/*Общее*/
input:hover,input:focus,textarea:focus,textarea:hover,select,select:hover,select:focus{outline:none}

/*Вертикальная форма*/
.form {}

/*Поля*/
.form input, .form textarea,.form select { color: var(--c2); border: none; text-align: center; height: 60px; background-color: white; border-radius: 2px; padding: 0 1rem; line-height: 60px; width: 100%; margin-bottom: 1rem; }
.form [type=submit] {display: block;width: 100%;}
.form input::placeholder, .form textarea::placeholder {color: var(--ct);}


/**/
.form .select {position: relative; margin-bottom: 1rem;}
.form .select select {margin-bottom: 0;text-align: left;padding-left: 3rem}
.form .select[data-type]:after {content: "";width:60px; height: 40px; position: absolute;right: 3px;top: calc(50% - 20px); background: white url('../img/whatsapp.svg') no-repeat center/contain}
.form .select[data-type]:before {content: "";width:20px; height: 20px; position: absolute;left: 1rem;top: calc(50% - 10px);background-color: var(--c2);   -webkit-mask: url('../img/arrow.svg') no-repeat center/50%}

.form .select[data-type=telegram]:after{background-image: url('../img/telegram.svg')}
.form .select[data-type=viber]:after{background-image: url('../img/viber.svg')}
.form .select[data-type=phone]:after{background-image: url('../img/phone_bg.svg')}

/**/
form .alert { color: red; font-size: 0.8rem; margin-top: -.5rem; }
form .messages>div {padding: 1rem;background-color: green; color: white; margin: 0.5rem 0; text-align: center}
form .messages .fail {background-color: red}



/**/
.check {position: relative;padding-bottom: 5px;display: flex; gap: 0.5rem;font-size: 12px;line-height:16px;justify-content: center;margin: 1rem 0 0}
.check label {position: relative;padding-left: 1.5rem;font-size: 12px;text-align: left}
.check input {opacity: 0;margin: auto 0;height: auto;width: 0}
.check input + label:before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; background-color:transparent; border: 1px solid white; border-radius: 20px;}
.check input:checked +label:after { background-color: white; content: ""; width: 8px; height: 8px; left: 4px; top: 4px; border-radius: 20px; position: absolute; }
.check a {color: white;text-decoration: underline}

.check.type2 label {padding-left: 2.25rem;color: var(--c2);cursor: pointer;font-weight: 500;font-size: 15px;line-height: 26px;}
.check.type2 input + label:before {border: 1px solid #DEDEDE;width: 26px; height: 26px;background-color: transparent !important;}
.check.type2 input + label:hover:before{border: 1px solid var(--c1);}
.check.type2 input + label:hover:after {background-color:var(--c1)}
.check.type2 input +label:after {content: "";background-color: #DEDEDE;width: 12px; height: 12px; left: 7px; top: 7px; border-radius: 20px; position: absolute;}
.check.type2 input:checked +label:after {background-color: var(--c1) !important;}



/**/
.bg-check .radio input +label:before { width: 100%; height: 100%; z-index: -1; border: 2px solid var(--c1); border-radius: 0; }
.bg-check .radio input +label:after {content: none;}
.bg-check .radio input+label {z-index: 1; line-height: 50px;padding: 0 15px;width: auto;text-align: center;cursor: pointer}
.bg-check .radio input:checked +label {color: white;}
.bg-check .radio input:checked +label:before {background-color: var(--c1);}
.bg-check .radio {height: 50px;width: 100%; justify-content: center}
.bg-check .radio input {position: absolute; left: -100000px; }
.bg-check .radio .icon {height: 100%;width: 2rem;z-index: 9;}

/**/
.form.hide{display:none}

/**/
.ya-captcha{margin: 1rem 0}

@media (max-width:768px){
    .form input, .form textarea,.form select  {line-height: 40px;height: 40px;}
    .check label {font-size: 8px;}
    .check {gap: 0}
    .form select {padding-left: 1rem !important; text-align: center !important;}
}

@media (max-width:576px){
    .form [type=submit]{font-size: 12px;    padding: 0 0.5rem;}
    .form input, .form textarea, .form select {font-size: 12px;}
}