/*
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}*/
body{
  background-image: linear-gradient(168deg, #d87833 40%, #f0dba0 40% );
  background-color:  #f0dba0 ;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: rgba(0, 0, 0, 0.8);
  font-size: 14px;
  font-weight: 400;
  height: 100dvh;
  min-height: 100dvh;
  /* padding-bottom: 2rem;; */


}
body.principal {
  display: grid;
  align-items: center;
  /* font-family: "Montserrat", sans-serif; */

  height: 100dvh;
  /* justify-items: center; */
  /* weight: 100vw; */
}

.control{
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius); 
}

select option[disabled]{
  text-decoration: line-through;
  color:var(--bs-dark-bg-subtle);
}

.right-container {
  background: #fafafa;
  
  /*display: grid;
  grid-template-areas: "." ".";
  width: 500px;*/
}
.signup-container {
  display: grid;
  grid-template-areas: "left right";
  max-width: 900px;
}

.text-justify{
  text-align: justify;
}
/*

.left-container {
  background: linear-gradient(32deg, #fbe03e 0%, #4491f1 50%, #f34141 100%);;
  overflow: hidden;
  padding: 0 0 0 0;
  position: relative;
  text-align: center;
  width: 300px;
}
.left-container h1 {
  color: rgba(0, 0, 0, 0.8);
  display: inline-block;
  font-size: 24px;
}
.left-container h1 i {
  background: #ebe0df;
  border-radius: 50%;
  color: #807182;
  font-size: 24px;
  margin-right: 5px;
  padding: 10px;
  transform: rotate(-45deg);
}


.left-container img {
  /* filter: sepia(100%); *
  width: 100%;
}

.right-container {
  background: #f3dedc;
  display: grid;
  grid-template-areas: "." ".";
  width: 500px;
}
.right-container h1:nth-of-type(1) {
  color: rgba(0, 0, 0, 0.8);
  font-size: 28px;
  font-weight: 600;
}
.right-container .set {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.right-container input {
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  height: 38px;
  line-height: 38px;
  padding-left: 5px;
}
.right-container input, .right-container label {
  color: rgba(0, 0, 0, 0.8);
}
.right-container header {
  padding: 40px;
}
.right-container label, .right-container input, .right-container .form-photo {
  width: 176px;
}
.right-container .form-photo {
  align-items: center;
  display: grid;
  grid-template-areas: ". .";
}
.right-container .form-photo button {
  border: none;
  border-radius: 50%;
  height: 38px;
  margin-right: 10px;
  outline: none;
  width: 38px;
}
.right-container .form-photo button i {
  color: rgba(0, 0, 0, 0.8);
  font-size: 16px;
}
.right-container .form-weight .radio-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.right-container footer {
  align-items: center;
  background: #fff;
  display: grid;
  padding: 5px 40px;
}
.right-container footer button {
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 38px;
  line-height: 38px;
  width: 100px;
  border-radius: 19px;
  font-family: "Montserrat", sans-serif;
}
.right-container footer #back {
  background: #fff;
  transition: 0.2s all ease-in-out;
}
.right-container footer #back:hover {
  background: #171A2B;
  color: white;
}
.right-container footer #next {
  background: #807182;
  border: 1px solid transparent;
  color: #fff;
}
.right-container footer #next:hover {
  background: #171A2B;
}

.form-name label, .form-id label, .form-birthday label, .form-gender label, .form-spayed-neutered label, .form-weight label {
  display: block;
  margin-bottom: 5px;

}

.radio-container {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: inline-block;
  padding: 5px;
}

.radio-container label {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  margin: 0;
  padding: 0;
  text-align: center;
  transition: 0.2s all ease-in-out;
  width: 80px;
}
.form-spayed-neutered  label{
  width:50px;
}
.radio-container input[type=radio] {
  display: none;
}

.radio-container input[type=radio]:checked + label {
  background: #F7B1AB;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
*/

.input-code{  
  padding: 10px; 
  font-size: 18px; 
  text-align: center;
  letter-spacing: 2rem;
}

.notiflix-confirm-content{
  width: 75% !important;
    background: #e7e7e7;
    animation-duration: 300ms;
    border-radius: 25px;
    color:#222;
}