@font-face {
 font-family: "FontAwesome";
 src: url("//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts/fontawesome-webfont.eot?v=4.5.0");
 src: url("//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0")
   format("embedded-opentype"),
  url("//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts/fontawesome-webfont.woff?v=4.5.0")
   format("woff"),
  url("//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts/fontawesome-webfont.ttf?v=4.5.0")
   format("truetype"),
  url("//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular")
   format("svg");
 font-weight: normal;
 font-style: normal;
}

input {
 /* width: 100%; */
 color: #000;
}

._main-form {
 display: flex;
 flex-direction: column;
 gap: 15px;
 width: 100%;
 padding: 15px;
 max-width: 500px;
 position: relative;
 z-index: 2000;
 border-radius: 10px;
}

.phone-eror-mess {
 display: block;
 width: 100%;
 color: #fff;
 line-height: 1.2em;
 background-color: red;
 margin-bottom: 15px;
}

.form__btn {
 border-radius: 5px;
 background: none;
 outline: none;
 background: #dd2a30;
 color: white;
 width: 100%;
 padding: 15px 0;
 cursor: pointer;
 border: none;
 margin-bottom: 20px;
}

.input-group .form-control::placeholder {
 font-weight: 300;

 color: #fff;
}

.form-input {
 width: 100%;
 height: 3rem;
 padding: 15px 15px 13px;
 border-radius: 5px;
 font-size: 16px;
 border: 1px solid #ced4da;
 background-color: transparent;
}

.form-input:focus {
 background-color: transparent !important;
 color: #fff;
}

.iti__selected-flag {
 z-index: 10;
}

.form_error_msg {
 color: #ff0000;
 position: absolute;
 top: 42px;
 left: 0;
}

.form-error-content {
 margin-bottom: 10px;

 text-align: center;
 background: #cb0d0d;
 color: #fff;
 text-transform: uppercase;
 padding: 5px;
 display: none;
}

.form-error-content.active {
 display: block;
}

.form-preloader {
 display: none;
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 z-index: 100;
 background: rgba(0, 0, 0, 0.7);

 align-content: center;
 justify-content: center;
 height: 100%;
}

.form-preloader.active {
 display: flex;
}

.form-preloader__img {
 width: 50px;
 display: flex;
 justify-content: center;
 align-items: center;
}

img {
 /* width: 100%; */
}

.top-form {
 font-weight: bold;
}

.reg-error {
 color: #ff0000;
}

.form_has_error {
 color: #ff0000;
}

.reg-form_error {
 text-align: center;
 margin: 25px 0 15px;
 color: #ff0000;
 position: absolute;
 bottom: 39px;
 width: 100%;
}

.reg-form .popup {
 box-sizing: border-box;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 101;
}

.reg-form .popup .overlay {
 position: fixed;
 top: 0;
 left: 0;
 background: rgba(0, 0, 0, 0.5);
 z-index: 95;
 width: 100%;
 height: 100%;
}

.reg-form .popup .container {
 display: block;
 width: 320px;
 padding: 20px;
 margin: 5% auto 0;
 position: relative;
 background: #fff;
 z-index: 100;
 box-sizing: border-box;
 -webkit-box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.3);
 box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.3);
 text-align: center;
}

.buttonSend {
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 font-weight: bold;
 font-size: 20px !important;
}

.loadBtn {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 20px;
 max-height: 20px;
}

.btnFormText {
 margin: 0 !important;
 color: inherit;
}

.form-group {
 text-align: center;
 width: 100%;
 position: relative;
 margin-bottom: 0px !important;
}

.valid:-webkit-autofill {
 appearance: none;
 border: 1px solid green;
 position: relative;
 background-color: #0dfc703b;
}

.isValid:-webkit-autofill {
 appearance: none;
 border: 1px solid red !important;
 position: relative;
}

.iti {
 width: 100%;
 color: #000;
}

.fa__err,
.fa__checked {
 display: none;
 cursor: pointer;
}

.fa__errInfo {
 display: none;
 max-width: 180px;
 padding: 4px;
 line-height: 1;
 text-align: start;
}

.form-group .btn {
}

.form-group .btn img {
 margin-right: 10px;
}

.valid {
 position: relative;
 background-color: #00ff6a4f !important;
 color: #fff;
}

.isValid {
 border-bottom: 1px solid red !important;
 position: relative;
 background-color: #fc310d42 !important;
}

.isValid + span {
 display: block;
}

.isValid + .fa__err,
.valid + i {
 display: block;
 position: absolute;
 font-family: "FontAwesome" !important;
 font-weight: 600;
 font-size: 16px;
 top: 50%;
 right: 10px;
 transform: translate(0, -50%);
 z-index: 100;
 color: #fff;
 font-style: normal;
 color: #e74c3c;
 visibility: visible;
}

.valid + i {
 color: #2ecc71;
}

.isValid + .fa__err::before {
 content: "\f06a";
}

.valid + i::before {
 content: "\f058";
}

.isValid + .fa__err + .fa__errInfo {
 display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
 right: 5px;
 top: -54%;
 padding: 5px;
 color: RED;
 font-size: 10px;
 background: #fff;
 border: 1px solid red !important;
 border-radius: 8px !important;
 z-index: 200;
}

.notvalidphone {
 background-color: rgb(253, 164, 164) !important;
 border: 1px solid red !important;
}

.initial {
 border: 1px solid gray !important;
}

@media (max-width: 400px) {
 .fa__errInfo {
  max-width: 150px;
 }

 .input-group--name {
  width: 100% !important;
 }
}

/* PRELOADER */

.preloaderWrapperForm {
 position: fixed;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: #000000d4;
 z-index: 9999;
 text-align: center;
 margin-top: 50px;
 margin: 0 !important;
}

.preloaderWrapperForm span {
 width: 5px;
 height: 50px;
 background: linear-gradient(180deg, #7f4095, #fb3393);
 display: inline-block;
 margin: 0 1px;
 border-radius: 50px;
 animation: animade 1.5s infinite ease-in-out;
 margin-right: 4px !important;
}

@keyframes animade {
 0%,
 50%,
 100% {
  transform: scaleY(0.5);
 }

 20% {
  transform: scaleY(1);
 }
}

.preloaderWrapperForm span:nth-child(1) {
 animation-delay: 1.1s;
}

.preloaderWrapperForm span:nth-child(2) {
 animation-delay: 1.2s;
}

.preloaderWrapperForm span:nth-child(3) {
 animation-delay: 1.3s;
}

.preloaderWrapperForm span:nth-child(4) {
 animation-delay: 1.4s;
}

.preloaderWrapperForm span:nth-child(5) {
 animation-delay: 1.5s;
}