@font-face {
 font-family: "Lora";
 src: url("../fonts/Lora/Lora-Regular.ttf");
 font-style: normal;
 font-weight: normal;
}
body {
 font-family: sans-serif;
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}
label {
 margin: 0;
 padding: 0;
 position: absolute;
 left: 0;
 top: -15px;
 transform: translateY(-50%);
 color: rgb(0, 0, 0);
 font-size: 16px;
 font-weight: 400;
 line-height: 19px;
 transition: 0.1s linear;
 margin-bottom: 10px;
}
.navbar {
 padding: 47px 0 0;
}
.navbar .btn-outline-success {
 height: 40px !important;
 width: 159px;
 height: 56px;
 white-space: nowrap;
 background: #c7923e;
 border-radius: 8px;
 font-weight: 600;
 font-size: 16px;
 line-height: 120%;
 text-align: center;
 text-decoration: none !important;
 letter-spacing: 0.005em;
 color: #ffffff !important;
 border: none;
}
.form-input-wrap,
.form-checkbox {
 position: relative;
 width: 100%;
 margin-bottom: 42px;
}
.form-checkbox {
 display: flex;
 align-items: center;
}
.form-checkbox label {
 margin: 0;
}
.form-checkbox input[type="checkbox"] {
 width: 20px;
 height: 20px;
 margin-right: 10px;
}
.form-checkbox input[type="checkbox"]:checked {
 background-color: #afb3ff !important;
}
.form-input-wrap input,
.form-input-wrap select {
 position: relative;
 width: 100%;
 height: 34px;
 background: #fff;
 border: 1px solid rgb(101, 110, 211);
 border-radius: 50px;
 font-size: 20px;
 line-height: 25px;
 padding: 0 20px;
}
.form-input-wrap select {
 font-size: 15px;
 line-height: normal;
}
.form-input-wrap textarea {
 position: relative;
 width: 100%;
 height: 64px;
 background: #fff;
 border: 1px solid rgb(101, 110, 211);
 border-radius: 25px;
 font-size: 20px;
 line-height: 25px;
 resize: none;
 padding: 0 20px;
}
.form-input-wrap-error {
 margin-bottom: 40px;
}
#message {
 display: none;
 color: #000;
 position: relative;
 margin-top: 10px;
 margin-bottom: 40px;
}
#message h3 {
 color: rgb(26, 26, 26);
 font-size: 15px;
 font-weight: 700;
 line-height: 18px;
}
#message p {
 padding: 10px 35px 0;
 margin: 0;
 font-size: 14px;
}

/* Добавить зеленый цвет текста и галочка, когда требования верны */
.valid {
 color: green;
}

.valid:before {
 position: relative;
 left: -25px;
 content: "✔";
}

/* Добавить красный цвет текста и собой "x" и значок, когда требования не правы */
.invalid {
 color: red;
}

.invalid:before {
 position: relative;
 left: -25px;
 content: "✖";
}
.errorWindow {
 display: none;
}
.errorWindow.active {
 display: flex;
 color: red;
 font-size: 11px;
}
.bg-color {
 flex-grow: 1;
 background: rgb(235, 239, 255);
}
.bg-gradient {
 background: linear-gradient(to right, #ebefff 60%, #afb3ff 60% 40%);
}
.form-designer .bg-form {
 max-width: 500px;
 margin: 0 auto;
 padding: 140px 0 60px;
}
.bg-form {
 max-width: 370px;
 padding: 90px 0 60px;
}
.group-title {
 color: rgb(26, 26, 26);
 font-size: 16px;
 font-weight: 700;
 line-height: 19px;
 text-align: left;
 margin-bottom: 50px;
}
.button {
 width: 100%;
 height: 34px;
 padding: 8px;
 border-radius: 50px;
 background: rgb(101, 110, 211);
 color: rgb(255, 255, 255);
 font-size: 16px;
 font-weight: 500;
 line-height: 19px;
 border: none;
}
button:disabled,
button[disabled] {
 opacity: 0.8;
 color: rgb(255, 255, 255);
}
button:disabled:hover,
button[disabled]:hover {
 color: rgb(255, 255, 255);
}
.button:hover,
.button:focus {
 color: #afb3ff;
}
.signin {
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
}
.signin > img {
 margin-left: 70px;
}
.signup {
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background: url(../img/bg_signup.svg) no-repeat top left;
 background-position-y: -70px;
}
.signup > img {
 margin-right: 60px;
}
.link-signin,
.link-signup {
 color: rgb(0, 0, 0);
 font-size: 16px;
 font-weight: 400;
 line-height: 19px;
 text-align: center;
 margin-top: 27px;
}
.link-signin a,
.link-signup a {
 color: rgb(0, 0, 0);
 font-weight: 700;
 font-size: 16px;
 line-height: 19px;
 text-decoration: none;
}
.link-media {
 text-align: center;
 margin-top: 27px;
}
@media (max-width: 991px) {
 .signin {
  flex-direction: column-reverse;
  justify-content: flex-end;
 }
 .signup {
  flex-direction: column;
  justify-content: flex-start;
  background: none;
  padding-bottom: 20px;
 }
 .signin > img {
  width: 100%;
  max-width: 400px;
  height: auto;
  max-height: 400px;
  margin-left: 0;
 }
 .signup > img {
  width: 100%;
  max-width: 400px;
  height: auto;
  max-height: 300px;
  margin-right: 0;
 }
 .bg-form {
  padding: 20px 0 20px;
 }
 .form-designer .bg-form {
  padding: 90px 0 60px;
 }
}