ali2210/WizDwarf

/* This codebase desgin according to mozilla open source license.
Redistribution , contribution and improve codebase under license
convensions. @contact Ali Hassan AliMatrixCode@protonmail.com   */

.main-dashboard-div {
  background-color:#f9f9f9;
  font-family: 'Lato', sans-serif;
  height: 225vh;
  width: 225vh;
}

.icon-light {
  color: black;
  margin-right: 5px;
}

.dropdown-menu {
  left: 30px;
}

.h4 {
  margin: 20px 0px;
  font-family: 'Roboto Mono', monospace;
  font-size: 20px;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  height: 60px;
}

.custom-navbar {
  background-color: #ededed;
  display: flex;
}


.heading-text{
  margin-top: 70px;
  display: flex;
  justify-content: center;
  position: relative;
  margin-right: 18px;
}

.avatar{
  position: absolute;
  width: 250px;
  height: 250px;
  background: whitesmoke;
  border-radius: 142px;
  left: 690px;
  top: 167px;
  border: 5px #c0c0c0 dotted;
}

/* .photoBtn{

} */

.description{
  position: absolute;
  width: 397px;
  left:2px;
  height:227px;
  border-radius: 54px;
  top: 214px;
}

.camera{
  width: 214px;
  height: 161px;
  border: 1px silver dashed;
}

.gallery{
    position: absolute;
    height: 197px;
    width: 210px;
    left: 266px;
    background:aliceblue;
    border-radius: 77px;
}

.photo1{
  width: 70px;
  height: 70px;
  background: darkslateblue;
  position: absolute;
  left: 33px;
  top: 26px;
  border-radius: 36px;
}

.photo2{
  width: 70px;
  height: 70px;
  background: darkslateblue;
  position: absolute;
  left: 118px;
  top: 26px;
  border-radius: 36px;
}

.photo3{
  width: 70px;
  height: 70px;
  background: darkslateblue;
  position: absolute;
  left: 33px;
  top: 106px;
  border-radius: 36px;
}

.photo4{
  width: 70px;
  height: 70px;
  background: darkslateblue;
  position: absolute;
  left: 118px;
  top: 106px;
  border-radius: 36px;
}

.savebtn{
  position: absolute;
  left: 96px;
  top: 83px;
}

.btn-modify{
  border-radius: 34px;
  position: absolute;
  left: -7px;
  top: 0px;
}

.uploadbtn{
  position: absolute;
  top: 125px;
  left: 105px;
}

.btn-param{
  position: absolute;
  width: 212px;
  left: -84px;
  border-radius: 9px;
  top: 21px;
}

.file-image{
  position: absolute;
  left: -84px;
  width: 212px;
  top: -173px;
}

.edit{
  position: absolute;
  left: 279px;
  top: 320px;
  visibility: visible;
  width: 800px; height: 800px;
  background-color: transparent;
  border-radius: 25px;
  box-shadow: 10px 10px transparent;
}

.name-field{
  height: 44px;
  border-radius: 10px;
  border: 1px transparent;
  position: absolute;
  left: -39px;
  box-shadow: 6px 6px transparent;
}

.btn-user{
  position: absolute;
  left: 161px;
  top: 3px;
  border-radius: 25px;
  color: grey;
}

.last-field{
  height: 44px;
  border-radius: 10px;
  border: 1px transparent;
  position: absolute;
  left: 456px;
  top: 0px;
  box-shadow: 6px 6px transparent;
}

.btn-users{
  position: absolute;
  left: 649px;
  top: 4px;
  border-radius: 25px; 
  color: grey;
}

.adam{
  top: 75px;
  left: 268px;
  position: absolute;
}

.eve{
  top: 75px;
  left: 307px;
  position: absolute;
}

.btn-male{
  width: 65px;
  height: 65px;
  position: absolute;
  left: -30px;
  border-radius: 24px;
}

.btn-female{
  width: 65px;
  height: 65px;
  position: absolute;
  left: 1px;
  border-radius: 24px;
}

.address-field{
  height: 44px;
  border-radius: 10px;
  border: 1px transparent;
  position: absolute;
  left: 121px;
  top: 162px;
  width: 549px;
  box-shadow: 6px 6px transparent;
}

.btn-home{
  position: absolute;
  left: 650px;
  top: 166px;
  border-radius: 25px;
  color: grey;
}

.apartment-field{
  height: 44px;
  border-radius: 10px;
  border: 1px transparent;
  position: absolute;
  left: -46px;
  top: 238px;
  width: 549px;
  box-shadow: 6px 6px transparent;
}

.btn-apartment{
  position: absolute;
  left: 486px;
  top: 242px;
  border-radius: 25px;
  color: gray;
}

.country-field{
  height: 44px;
  border-radius: 10px;
  border: 1px transparent;
  position: absolute;
  left: -45px;
  top: 311px;
  box-shadow: 6px 6px transparent;
}

.btn-country{
  position: absolute;
  left: 143px;
  top: 315px;
  border-radius: 25px;
  color: grey;
}

.city-field{
  height: 44px;
  border-radius: 10px;
  border: 1px transparent;
  position: absolute;
  left: 469px;
  top: 311px;
  box-shadow: 6px 6px transparent;
}

.btn-city{
  position: absolute;
  left: 664px;
  top: 315px;
  border-radius: 25px;
  color: grey;
}

.email-field{
  height: 44px;
  border-radius: 10px;
  border: 1px transparent;
  position: absolute;
  left: 31px;
  top: 385px;
  box-shadow: 6px 6px transparent;
}

.span-email{
  position: absolute;
  left: 171px;
  top: 397px;
  color: green;
  visibility: hidden;
}

.span-email-unchecked{
  position: absolute;
  left: 187px;
  top: 397px;
  color: red;
  visibility: visible;
}

.phone-field{
  height: 44px;
  border-radius: 10px;
  border: 1px transparent;
  position: absolute;
  left: 371px;
  top: 385px;
  box-shadow: 6px 6px transparent;
}

.span-phone{
  position: absolute;
  left: 512px;
  top: 397px;
  color: green;
  visibility: hidden;
}

.span-phone-unchecked{
  position: absolute;
  left: 528px;
  top: 397px;
  color: red;
  visibility: visible;
}

.zip-field{
  height: 44px;
  border-radius: 10px;
  border: 1px transparent;
  position: absolute;
  left: -43px;
  top: 458px;
  box-shadow: 6px 6px transparent;
}

.btn-zip{
  position: absolute;
  left: 150px;
  top: 463px;
  border-radius: 25px;
  color: gray;
}

.tweet-field{
  height: 44px;
  border-radius: 10px;
  border: 1px transparent;
  position: absolute;
  left: 468px;
  top: 458px; 
}

.btn-tweet{
  position: absolute;
  left: 657px;
  top: 463px;
  border-radius: 25px;
  color: grey;
}

.btn-tweet:hover,.btn-zip:hover,
.btn-city:hover,.btn-country:hover,
.btn-apartment:hover,.btn-home:hover,
.btn-users:hover,.btn-user:hover, .btn-male:hover{
  color: blue;
}

.btn-female:hover{
  color:red;
}

.btn-save{
  position: absolute;
  top: 522px;
  left: 233px;
  box-shadow: 10px 10px lightgrey;
  border-radius: 20px;
}

.btn-cloud{
  width: 158px;
  border-radius: 20px;
}

.btn-cloud:hover{
  color:whitesmoke;
  border-radius: 50px;
}

.myphotos{
  position: relative;
  left:1px;
}

.img-class{
  position: absolute;
    left: 2px;
    width: 398px;
    top: -2px;
    border: none;
}

.images{
  position: absolute;
  width: 304px;
  left: -2px;
  top: -9px;
  height:212px;
}

.card-body-text{
    position: absolute;
    left: -15px;
    top: 195px;
    width: 315px;
    font-size:large;
  }

  .photo-card{
  position: absolute;
  left: -200px;
  top: 70px;
}

.profile-form{
  position: absolute;
  left: -226px;
  top: 16px;
  display: flex;
}

.float-card{
  position: relative;
  border-radius:32px;
  z-index: 2;
  width: 564px;
} 

.line{
  width: 554px; 
  height: 10px;
  background: repeating-linear-gradient(45deg, silver, transparent 10px);
  position: relative;
  top: 11px; 
  border-radius: 10px;
}

.photo-preview{
  position: relative;
  width: 552px;
  height: 166px;
  background:whitesmoke; 
  top: 20px;
  overflow: scroll;
}

.btns-links{
  position: relative;
  top:  -215px;
  left: 232px;
  border-radius: 26px;
}

/* .btns-links:hover{
  animation: skid 3s linear infinite alternate;
} */


@keyframes skid {
  
  20%{ 
    left : 395px;
  }
  
  40%{
    left : 295px;
  }
  
  60%{
    left : 395px;
  }
  
  100%{
    left : 495px;
  }
}

.uploads{
  position: relative;
  top: -215px;
  left: 235px;
  border-radius:36px;
}

/* .uploads:hover{
  animation: skid-right 2s infinite  alternate;
} */

@keyframes skid-right {
  
  20%{
    left: 245px;
  }
  
  60%{
    left: 345px;
  }
  
  80%{
    left: 345px;
  }
  
  100%{
    left: 245px;
  }
}

.date-picker{
  position: absolute;
  top:243px;
  left: 437px;
  border-radius: 40px;
  color: slategray;
  width: 8pc;
}

.date-picker:hover{
  color: silver;
}

.container-btn{
  position: absolute;
  top: 73px;
  left:36px;
}

.revert{
  width: 154px;
  position: absolute;
  display: flex;
  left: -31px;
  height: 36px;
  box-shadow: 10px 10px lightgrey;
  border-radius: 34px;
}

._ed01{ 
  position: relative;
  display: flex;
  top: 167px;
  left: 217px;
}

.btn-mycontainer{
  display: flex;
  position: absolute;
  left: 288px;
  top: 260px;
}