body {
   background: var(--bg);
   width: 100%;
   height: 100%;
   position: absolute;
}

body.signup {
   background: url("../images/bg-signup.webp") no-repeat center right var(--bg);
   background-size: cover;
}

body.signin {
   background: url("../images/bg-signin.webp") no-repeat center right var(--bg);
   background-size: auto 100%;
}

body.recovery {
   background: url("../images/bg-recovery.webp") no-repeat center right var(--bg);
   background-size: auto 100%;
}

#header {
   padding: 33px 0;
   position: relative;
   z-index: 2;
}

#conteiner {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

#conteiner .center {
   height: auto;
   display: table;
   width: 100%;
}

#conteiner .title {
   font-weight: 400;
   font-size: 38px;
   line-height: 130%;
   text-transform: uppercase;
   color: var(--shrift);
   font-family: var(--family-title);
   margin-bottom: 34px;
}

#conteiner form {
   width: 100%;
   max-width: 430px;
   height: auto;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 24px;
}

#conteiner form .error {
   border: 1px solid #82331d;
   border-radius: 10px;
   width: 100%;
   height: auto;
   display: table;
   background: var(--red);
   font-weight: 700;
   font-size: 16px;
   color: #fff;
   padding: 13px 19px;
}

#conteiner form .success {
   border: 1px solid #c29306;
   border-radius: 10px;
   width: 100%;
   height: auto;
   display: table;
   background: var(--orange);
   font-weight: 700;
   font-size: 16px;
   color: #fff;
   padding: 13px 19px;
}

#conteiner form .input {
   width: 100%;
   height: auto;
}

#conteiner form .input label {
   font-weight: 400;
   font-size: 16px;
   color: rgba(82, 65, 58, 0.62);
   margin-bottom: 7px;
   display: block;
}

#conteiner form .input input {
   border: 1px solid #f3eee9;
   border-radius: 10px;
   padding-left: 15px;
   width: 100%;
   height: 47px;
   background: #fff;
   display: block;
   outline: none;
   font-weight: 400;
   font-size: 16px;
   color: var(--shrift);
   font-family: var(--family-text);
}

#conteiner form button {
   border-radius: 10px;
   padding: 15px 18px;
   width: 100%;
   height: auto;
   background: var(--shrift);
   font-weight: 500;
   font-size: 16px;
   color: #fff;
   border: 0;
   cursor: pointer;
   font-family: var(--family-text);
}

#conteiner form button:hover {
   background: var(--orange);
}

#conteiner form .links {
   width: 100%;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

#conteiner form .links a {
   font-weight: 400;
   font-size: 14px;
   color: rgba(82, 65, 58, 0.5);
}

#conteiner form .links a:hover {
   color: var(--shrift);
}

@media only screen and (max-width: 1180px) {

   .wrapper {
      padding-left: 10px !important;
      padding-right: 10px !important;
   }

   #header {
      width: 100%;
      background: #fff;
      padding: 12px 0;
      position: relative;
      z-index: 2;
   }

   #header a img {
      height: 35px;
   }

   #conteiner {
      z-index: 1;
      background: rgba(82, 65, 58, 0.5);
      display: table;
      padding-top: 100px;
   }

   #conteiner .title {
      font-size: 24px;
      color: #fff;
   }

   #conteiner form {
      gap: 20px;
   }

   #conteiner form .input label {
      font-size: 14px;
      color: #fff;
   }

   #conteiner form .input input {
      height: 40px;
   }

   #conteiner form .links a {
      color: #fff;
      font-size: 12px;
   }

   #conteiner form .error {
      font-size: 14px;
   }
}