Frontend/style.css

html { overflow-y: scroll; }
body { position: absolute; }

.main-unregistered {
    flex-direction: column;
    background-color: #fffdf9;
    color: #3f3f3f;
    width: 100%;
}
.main-unregistered .intro {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
  .main-unregistered .menu {
    position: fixed;
    justify-content: center;
    top: 0;
    width: 39.313vw;
    height: 3.544vw;
    background-color: #deeaec;
    border-radius: 1.636vw;
    border: 0.109vw solid;
    border-color: #97b8a5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
  }
  .main-unregistered .text-menu {
    font-family: "Commissioner-SemiBold", Helvetica;
    font-weight: 600;
    font-size: 1.091vw;
    background-color: #deeaec;
    border: none;
    transition: border 0.1s ease-in;
  }
  .main-unregistered .text-menu:hover{
    border: 0.2vw solid #97b8a5;
    border-radius: 1.636vw;
  }

  .main-unregistered .heads-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    text-align: center;
    top: 5.453vw;

    align-items: center;
  }
  .main-unregistered .text-head {
    font-family: "Commissioner-SemiBold", Helvetica;
    font-weight: 800;
    font-size: 5.016vw;
  }
  .main-unregistered .text-subhead {
    font-family: "Commissioner-SemiBold", Helvetica;
    font-weight: 800;
    font-size: 2.017vw;
  }
  .main-unregistered .image-intro-pets {
    display: block;
    margin-top: 3.272vw;
    width: 23.501vw;
    height: 18.92vw;
  }

  .main-unregistered .miniinfo {
    margin-top: 19.502vw;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .main-unregistered .subminiinfo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 68.43vw;
  }
.main-unregistered .text-miniinfo-head {
    font-family: "Commissioner-SemiBold", Helvetica;
    font-weight: 800;
    font-size: 2.617vw;
    margin-left: 4.089vw;
}
.main-unregistered .text-miniinfo-subhead {
    font-family: "Abhaya Libre Medium-Regular", Helvetica;
    font-weight: 500;
    font-size: 1.745vw;
    width: 41.712vw;
    margin-left: 4.089vw;
}
.main-unregistered .miniinfo-img {
    width: 22.465vw;
    height: 33.751vw;
}

.main-unregistered .services {
    width: 100%;
    height: 50.436vw;
    margin-top: 9.051vw;
    background-color: #97b8a5;
    flex-direction: column;
    margin-left: -0.5vw;
  }
  .main-unregistered .subservices {
    display: flex;
    justify-content: space-around;
    margin-top: 3.162vw;
  }
  .main-unregistered .services-part {
    align-items: end;
    display: grid;
    justify-content: center;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease; 
  }
  .main-unregistered .services-part:hover{
    color: #fffdf9;
    background-color: #FFD87E;
  }
  .main-unregistered .text-services-head {
    font-family: "Commissioner-SemiBold", Helvetica;
    font-weight: 800;
    font-size: 2.617vw;
    padding-top: 4.798vw;
    text-align: center;
    color: #fffdf9;
    margin-bottom: 0.763vw;
}
.main-unregistered .for-services-img {
  justify-content: center;
  width: 100%;
  display: grid;
  align-items: center;
  margin-top: 1.927vw;
}
.main-unregistered .services-img {
    width: 4.471vw;
    height: 4.471vh;
    justify-content: center;
    align-items: center;
    display: flex;
}
.main-unregistered .text-services {
    text-align: center;
    font-family: "Abhaya Libre Medium-Regular", Helvetica;
    font-weight: 500;
    font-size: 1.527vw;
    margin-top: 4.635vw;
    margin-bottom: 1.254vw;
    width: 12.865vw;
    height: 3.125vw;
    text-align: center;
}
.main-unregistered .services-part {
    background-color: #fffdf9;
    width: 14.395vw;
    height: 15.812vw;
}

.main-unregistered .doctors {
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: flex;  
  padding-top: 3.907vw;
}
.main-unregistered .doctors-head {
  font-family: "Commissioner-SemiBold", Helvetica;
  font-weight: 800;
  font-size: 2.617vw;
  text-align: center;
  color: #3f3f3f;
  margin-bottom: 2.453vw;
}

.main-unregistered .pets {
  width: 100%;
  height: 50.436vw;
  background-color: #FFE4DD;
  margin-top: 4.744vw;
  margin-left: -0.5vw;
}
.main-unregistered .pets-head {
  font-family: "Commissioner-SemiBold", Helvetica;
  font-weight: 800;
  font-size: 2.617vw;
  padding-top: 3.599vw;
  text-align: center;
  color: #fffdf9;
  margin-bottom: 5.889vw;
  text-shadow: 0 0 1px #3f3f3f, 0 0 1px #3f3f3f, 0 0 1px #3f3f3f;
}
.main-unregistered .subpets {
  display: flex;
  justify-content: space-between;
}
.main-unregistered .pets-part-background {
  width: 33.697vw;
  height: 28.353vw;
  background-color: #FFFDF9;
  margin-right: 1.472vw;
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
}
.main-unregistered .pets-parts-text {
  width: 29.171vw;
  height: 16.303vw;
  font-size: 1.745vw;
  text-align: center;
  font-family: "Abhaya Libre Medium-Regular", Helvetica;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.main-unregistered .podval {
  width: 100%;
  height: 22.028vw;
  margin-top: 2.963vw;
}
.main-unregistered .podval-str1, .podval-str2 {
  justify-content: space-between;
  display: flex;
}
.main-unregistered .podval-str2 {
  margin-top: 3.708vw;
}
.main-unregistered .podval-text-col2 {
  text-align: right;
  font-family: "Commissioner-SemiBold", Helvetica;
  font-weight: 800;
  font-size: 2.617vw;
  margin-right: 2.181vw;
}
.main-unregistered .podval-text-col1 {
  text-align: right;
  font-family: "Commissioner-SemiBold", Helvetica;
  font-weight: 500;
  font-size: 2.617vw;
  margin-left: 2.181vw;
}


.link {
  text-decoration: none;
  color: #3f3f3f;
}
.registration_form .button-back {
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 1.5vw;
  background-color: #DEEAEC;
  color: #3f3f3f;
  height: 4vw;
  width: 9vw;
  border: 2px solid #97B8A5;
  border-radius: 30px;
  text-align: center;
  margin-top: 1vw;
  margin-left: 2vw;
  vertical-align: middle;
}
.registration_form .button-back-p {
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 1.5vw;
  background-color: #DEEAEC;
  color: #3f3f3f;
  height: 4vw;
  width: 9vw;
  border: 2px solid #97B8A5;
  border-radius: 30px;
  text-align: center;
  margin-top: 1vw;
  margin-left: 1vw;
  vertical-align: middle;
}
.registration_form .button-edit {
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 1.5vw;
  background-color: #DEEAEC;
  color: #3f3f3f;
  height: 4vw;
  width: 18vw;
  padding-left: 3vw;
  border: 2px solid #97B8A5;
  border-radius: 30px;
  text-align: center;
  margin-top: 1vw;
  margin-left: 68vw;
  vertical-align: middle;
  background-image: url(img/edit.png); 
  background-size: 2vw; 
  background-repeat: no-repeat;
  background-position: left 1.5vw center;  
}
.line1 {
  margin-top: 3.217vw;
  border: 0.055vw solid #97B8A5;
  width: 80.261vw;
  position: absolute;
  top: 500%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.icon-user{
  background-color: #97B8A5;
  border-radius: 8vw;
  width: 13vw;
  height: 13vw;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 10vw;
  left: 50%;
}
.info-user{
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 22vw;
  left: 50%;
  display:grid;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.pets-user{
  font-family: "Commissioner-SemiBold", Helvetica;
  font-weight: 800;
  font-style: normal;
  font-size: 2vw;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 30vw;
  left: 50%;
  width: 23vw;
  height: 5vw;
  text-align: center;
  
}
.pets-add{  
  margin-top: 24vw;
  margin-left: 58vw;
}
.name-user{
  font-family: "Commissioner-SemiBold", Helvetica;
  font-weight: 800;
  font-style: normal;
  font-size: 2vw;
} 
.email-user{
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 2vw;
  margin-top: 0.1vw;
}
.registration_form {
  flex-direction: column;
  background-color: #fffdf9;
  color: #3f3f3f;
  width: 100%;
}
.registration_form .heads-form {
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 2.617vw;
  text-align: center;
  color: #3f3f3f;
  margin-bottom: 0.273vw;
}
.registration_form .form-position {  
  display:grid;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.registration_form .element{
  display: block;  
  text-align: justify;
  margin-top: 1.091vw;
}
.registration_form .lable{
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 1.617vw;
  color: #3f3f3f;
}
.registration_form .input{
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  width: 57.088vw;
  height: 3.871vw;
  border-radius: 0.818vw;
  background-color: #97B8A5;
  border: none;
  padding-left: 1.091vw;
  font-size: 1.617vw;
  color: #FFFDF9;
  margin-top: 1.091vw;
}
.textarea{
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  width: 57.088vw;
  height: 3.871vw;
  border-radius: 0.818vw;
  background-color: #97B8A5;
  border: none;
  padding-left: 1.091vw;
  font-size: 1.617vw;
  color: #FFFDF9;
  margin-top: 1.091vw;
  resize: vertical;
  max-height: 8.088vw;
  min-height:3.871vw;
  padding-top: 0.5vw;
}
.textarea::-webkit-resizer{
  background: linear-gradient(315deg,
  #0000 16% 26%,
  #FFFDF9 26% 33%,
  #0000 33% 43%,
  #FFFDF9 43% 50%,
  #0000 50% 100%) no-repeat;
background-size: 80% 80%;
}
.registration_form .input:focus{
  outline: none;
}
.registration_form .input::placeholder{
  color: #3F3F3F;
}
.textarea:focus{
  outline: none;
}
.textarea::placeholder{
  color: #3F3F3F;
}
.registration_form .container {
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  display: block;
  position: relative;
  text-align: left;
  padding-left: 3.272vw;
  margin-top: 1.091vw;
  cursor: pointer;
  font-size: 1.363vw;
  padding-top: 0.436vw;
}
.registration_form .checkmark {
  width: 2.072vw;
  height: 2.072vw;
  border: 0.164vw solid #97B8A5;
  border-radius: 0.818vw;
  cursor: pointer;
  display: inline-block;
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
}
.registration_form .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.container input:checked ~ .checkmark:after {
  display: block;
}
.container .checkmark:after {
  left: 0.709vw;
  top: 0.382vw;
  width: 0.545vw;
  height: 0.818vw;
  border:solid #3F3F3F;
  border-radius: 0.109vw;
  border-width: 0 0.191vw 0.191vw 0;
  transform: rotate(45deg);
}
.registration_form .button{
  text-align: center;
  display: block;  
  margin-top: 2.181vw;
  align-items: center;
  justify-content: center;
}
.registration_form .button-text{
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 3.272vw;
  width: 50.6vw;
  height: 5.18vw;
  border-radius: 0.818vw;
  background-color: #97B8A5;
  border: none;
  padding-left: 1.091vw;
  color: #FFFDF9;
  margin-top: 1.091vw;
}
.registration_form .footer-form {
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 1.500vw;
  text-align: center;
  color: #3f3f3f;
  margin-top: 0.545vw;
}
.registration_form .appointment-position {  
  display:grid;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.registration_form .head-appointment {
  font-family: "Commissioner-SemiBold", Helvetica;
  font-weight: 800;
  font-style: normal;
  font-size: 2.617vw;
  text-align: center;
  color: #3f3f3f;
  margin-bottom: 0.273vw;
}

.registration_form .input-appointment{
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  width: 47.088vw;
  height: 3.871vw;
  border-radius: 0.818vw;
  background-color: #FFD87E;
  border: none;
  padding-left: 1.091vw;
  font-size: 1.617vw;
  color: #FFFDF9;
  margin-top: 1.091vw;
  margin-left: 2vw;
  appearance: none; 
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url(img/strelka.png);
  background-size: 2vw; 
  background-repeat: no-repeat;
  background-position: right 1vw center;  
}
.registration_form .datetime-appointment{
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  width: 46.088vw;
  height: 3.871vw;
  border-radius: 0.818vw;
  background-color: #FFD87E;
  border: none;
  padding-left: 1.091vw;
  font-size: 1.617vw;
  color: #FFFDF9;
  margin-top: 1.091vw;
  margin-left: 2vw;  
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  display: block;
  background: url(img/datetime.png) no-repeat;
  width: 3vw;
  height: 2vw;
  border-width: thin;  
  background-size: 2vw;   
}
*:focus {
  outline: none;
}
.datetime-appointment:focus{
  outline: none;
}
.input-appointment:focus{
  outline: none;
}
.registration_form .button-appointment{
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 3.272vw;
  width: 50.6vw;
  height: 5.18vw;
  border-radius: 0.818vw;
  background-color: #FFD87E;
  border: none;
  padding-left: 1.091vw;
  color: #FFFDF9;
  margin-top: 1.091vw;
}
.registration_form .container-appointment {
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  display: block;
  position: relative;
  text-align: left;
  padding-left: 3.272vw;
  margin-top: 1.091vw;
  cursor: pointer;
  font-size: 1.363vw;
  padding-top: 0.436vw;
  margin-left: 2vw;
}
.registration_form .checkmark-appointment {
  width: 2.072vw;
  height: 2.072vw;
  border: 0.164vw solid #FFD87E;
  border-radius: 0.818vw;
  cursor: pointer;
  display: inline-block;
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
}
.registration_form .checkmark-appointment:after {
  content: "";
  position: absolute;
  display: none;
}
.container-appointment input:checked ~ .checkmark-appointment:after {
  display: block;
}
.container-appointment .checkmark-appointment:after {
  left: 0.709vw;
  top: 0.382vw;
  width: 0.545vw;
  height: 0.818vw;
  border:solid #3F3F3F;
  border-radius: 0.109vw;
  border-width: 0 0.191vw 0.191vw 0;
  transform: rotate(45deg);
}

.services {
  justify-content: center;
  display: flex;
  width: 100%;
  background-color: #fffdf9;
}
.services .services-page {
  flex-direction: column;
  width: 100%;
  margin-top: 9.017vw;
  justify-content: center;
  align-items: center;
  display: flex;
}
.services .services-head {
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 3.272vw;
  text-align: center;
  color: #3f3f3f;
  margin-top: 0.8.179vw;
}
.services .menu {
  position: fixed;
  justify-content: center;
  top: 0;
  width: 39.313vw;
  height: 3.544vw;
  background-color: #deeaec;
  border-radius: 1.636vw;
  border: 0.109vw solid;
  border-color: #97b8a5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
}
.services .text-menu {
  font-family: "Commissioner", Helvetica;
  font-weight: 600;
  font-size: 1.091vw;
  background-color: #deeaec;
  border: none;
  transition: border 0.1s ease-in;
} 
.services .text-menu:hover{
  border: 0.2vw solid #97b8a5;
  border-radius: 1.636vw;
}
.services .make-app {
  position: fixed;
  top: 0;
  width: 39.313vw;
  height: 5.344vw;
  background-color: #FFE4DD;
  border-radius: 1.636vw;
  border: 0.050vw solid;
  border-color: #97b8a5;
  display: flex;
  justify-content: center;
  align-items: end;
  z-index: 1000;
  margin-top: 1.091vw;
}
.services .make-app-text {
  font-family: "Commissioner", Helvetica;
  font-weight: 700;
  font-size: 1.527vw;
  margin-bottom: 0.354vw;
  color: #3F3F3F;
}
.services .line1 {
  margin-top: 3.217vw;
  border: 0.055vw solid #97B8A5;
  width: 63.261vw;
}
.services .services-section {
  margin-top: 3.762vw;
  margin-bottom: 3.326vw;
  width: 83.937vw;
  height: 22.465vw;
  display: flex;
  justify-content: space-between;
}
.services .service {
  background-image: url("img/service2.png");
  background-size: cover;
  border: 0.164vw solid #97b8a5;
  width: 22.901vw;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
}  
.services .line2 {
  border: 0.056vw solid #97B8A5;
  width: 14.286vw;
  margin-top: 1.418vw;
} 
.services .service-head {
  margin-top: 2.236vw;
  margin-bottom: auto;
  position: static;
  font-family: "Commissioner", Helvetica;
  font-weight: 400;
  font-size: 1.854vw;
  width: 20.011vw;
} 
.services .service-desc {
  margin-top: 1.527vw;
  margin-bottom: 1.472vw - 1.418vw;
  font-family: "Commissioner", Helvetica;
  font-weight: 400;
  font-size: 1.527vw;
  width: 20.011vw;
} 
.services .service-price {
  margin-top: 1.963vw;
  margin-bottom: 2.672vw;
  font-family: "Commissioner", Helvetica;
  font-weight: 600;
  font-size: 1.527vw;
} 

.doctors {
  justify-content: center;
  display: flex;
  width: 100%;
  height: auto;
  background-color: #fffdf9;
}
.doctors .docs {
  width: 68.542vw;
  height: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.doctors .subdocs {
  display: flex;
  width: 68.542vw;
  margin-bottom: 5.453vw;
  justify-content: space-between;
  align-items: center;
}
.doctors .text-docs-head-left {
  font-family: "Commissioner", Helvetica;
  font-weight: 800;
  font-size: 1.363vw;
  width: 47.708vw;
  margin-left: 2.181vw;
}
.doctors .text-docs-head-right {
  font-family: "Commissioner", Helvetica;
  font-weight: 800;
  font-size: 1.363vw;
  width: 47.708vw;
}
.doctors .text-docs-subhead-left {
  font-family: "Commissioner", Helvetica;
  font-weight: 500;
  font-size: 1.363vw;
  width: 47.708vw;
  margin-left: 2.181vw;
}
.doctors .text-docs-subhead-right {
  font-family: "Commissioner", Helvetica;
  font-weight: 500;
  font-size: 1.363vw;
  width: 47.708vw;
}
.doctors .doc-img {
  width: 17.986vw;
  height: 17.986vw;
}
.doctors .menu {
  position: fixed;
  justify-content: center;
  top: 0;
  width: 39.313vw;
  height: 3.544vw;
  background-color: #deeaec;
  border-radius: 1.636vw;
  border: 0.109vw solid;
  border-color: #97b8a5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
}
.doctors .text-menu {
  font-family: "Commissioner-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 1.091vw;
  background-color: #deeaec;
  border: none;
  transition: border 0.1s ease-in;
}
.doctors .text-menu:hover{
  border: 0.2vw solid #97b8a5;
  border-radius: 1.636vw;
}
.docs .doctors-head {
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 3.272vw;
  text-align: center;
  color: #3f3f3f;
  margin-top: 6.107vw;
  margin-bottom: 5.507vw;
  width: 100%;
  text-align: center;
}


.shelter {
  justify-content: center;
  display: flex;
  width: 100%;
  background-color: #fffdf9;
}
.shelter .pets {
  width: 100%;
  height: 183.403vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.shelter .subdocs {
  width: 85.347vw;
  display: flex;
  margin-bottom: 5.453vw;
}
.shelter .text-docs-head-left {
  font-family: "Commissioner", Helvetica;
  font-weight: 800;
  font-size: 1.363vw;
  width: 62.569vw;
  margin-left: 2.181vw;
}
.shelter .text-docs-head-right {
  font-family: "Commissioner", Helvetica;
  font-weight: 800;
  font-size: 1.363vw;
  width: 62.569vw;
}
.shelter .text-docs-subhead-left {
  font-family: "Commissioner", Helvetica;
  font-weight: 500;
  font-size: 1.363vw;
  width: 62.569vw;
  margin-left: 2.181vw;
}
.shelter .text-docs-subhead-right {
  font-family: "Commissioner", Helvetica;
  font-weight: 500;
  font-size: 1.363vw;
  width: 62.569vw;
}
.shelter .doc-img {
  width: auto;
  height: 21.528vw;
}
.shelter .menu {
  position: fixed;
  justify-content: center;
  top: 0;
  width: 39.313vw;
  height: 3.544vw;
  background-color: #deeaec;
  border-radius: 1.636vw;
  border: 0.109vw solid;
  border-color: #97b8a5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
}
.shelter .text-menu {
  font-family: "Commissioner-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 1.091vw;
  background-color: #deeaec;
  border: none;
  transition: border 0.1s ease-in;
}
.shelter .text-menu:hover{
  border: 0.2vw solid #97b8a5;
  border-radius: 1.636vw;
}
.pets .doctors-head {
  font-family: "Abhaya Libre", Helvetica;
  font-weight: 600;
  font-style: normal;
  font-size: 3.272vw;
  text-align: center;
  color: #3f3f3f;
  margin-top: 0.107vw;
  margin-bottom: 5.507vw;
  width: 100%;
  text-align: center;
}