@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat/static/Montserrat-Regular.ttf);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat/static/Montserrat-Medium.ttf);
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat/static/Montserrat-Bold.ttf);
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: Play;
    src: url(../fonts/Play-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: Play;
    src: url(../fonts/Play-Bold.ttf);
    font-weight: 700;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    visibility: visible;
}
.form.form-status--success,
.form.form-status--error {
    visibility: hidden;
    display: none;
}

.form__label {
    display: flex;
		flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: relative;
}

.form__item-container {
    position: relative;
    display: inline-block;
    width: 100%;
}
.form__type--checkbox {
	flex-direction: row;
	align-items: center;
}
.form__type--checkbox .form__item-container {
    width: auto;
}

.form__item {
		border: 1px solid rgba(48, 96, 160, 0.6);
    background: rgba(180, 200, 255, 0.2);
    border-radius: 12px;
    padding: 12px;
    backdrop-filter: blur(64px);    
    width: 100%;
    height: 48px;    
    color: #000;
    font-weight: 400;    
    font-size: 16px;
    line-height: 137%;
    padding-right: 48px;
		font-family: Montserrat, sans-serif;
}

.form__item:focus {
	border: 2px solid rgba(48, 96, 160, 0.6);
}
.form__item:focus-visible {
	outline: rgba(48, 96, 160, 0.6) auto 1px;
}

.form__item[type="file"]::-webkit-file-upload-button {
    display: none;
}

.form__item[type="date"] {
    padding-right: 15px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3E%3Cpath d="M14 5.86665V11.4666C14 12.5868 14 13.1468 13.782 13.5746C13.5903 13.951 13.2843 14.2569 12.908 14.4487C12.4802 14.6666 11.9201 14.6666 10.8 14.6666H5.2C4.0799 14.6666 3.51984 14.6666 3.09202 14.4487C2.71569 14.2569 2.40973 13.951 2.21799 13.5746C2 13.1468 2 12.5868 2 11.4666V5.86665M14 5.86665C14 4.74654 14 4.18649 13.782 3.75867C13.5903 3.38234 13.2843 3.07638 12.908 2.88463C12.4802 2.66665 11.9201 2.66665 10.8 2.66665H5.2C4.0799 2.66665 3.51984 2.66665 3.09202 2.88463C2.71569 3.07638 2.40973 3.38234 2.21799 3.75867C2 4.18649 2 4.74654 2 5.86665M14 5.86665V6.66665H2V5.86665M10.6667 1.33331V3.99998M5.33333 1.33331V3.99998" stroke="%23B9A8D0" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
    background-size: 16px;
    background-position: calc(100%) center;
    background-origin: content-box;
    background-repeat: no-repeat;
}

.form__item[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.form__item[type="checkbox"] {
	width: auto;
	height: auto;
}

.form__item::placeholder {
    color: #fff;
}

.form__item option {
    color: #000;
}

.form__item ~ .form__tooltip {
    position: absolute;
    z-index: 1000;
    left: 50%;
    top: 120%;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    transition-duration: 0.2s;
    font-size: 0.675rem;
    background-color: #828282;
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    max-width: 100%;
}

.form__item:hover ~ .form__tooltip {
    opacity: 1;
    display: block;
}

.form__text,
.form__text * {
    display: inline;
    font-weight: 400;
    /* min-width: 210px; */
    /* color: rgba(255, 255, 255, 0.6); */
    font-size: 16px;
    line-height: 24px;
}

.form__name--confirmation .form__item,
.form__type--checkbox .form__item {
    display: none;
}
.form__name--confirmation .form__inner,
.form__type--checkbox .form__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.form__name--confirmation .form__inner::before,
.form__type--checkbox .form__inner::before {
    content: "";
    display: flex;
    min-width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #3060a0;
}
.form__name--confirmation .form__item:checked + .form__inner::before,
.form__type--checkbox .form__item:checked + .form__inner::before {
    /* background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADnSURBVHgBrZWBDYIwEEXvDAPoBjiBuoFMoBvIJs7ABOoExglkBSdAJ8AN8H88EmJSaQs/+Tkaco+7Nj1UTE3TbBFW8ELCVMM3VX1yMTPYEeEKLyVcG/hujBaWwhWjRMoYNbtkhXu47EqOkeVe4DWBc/gl4/UmayYTKxqI/TpMBgTshJBNAjQYzkFzb6CrnSGYEwhllhwEcwItSTuoL8wJ/IFWvjAq+feSEABzxLN4avCUQ2BewFAR2N5BGa+0ZXHk2OhJJVL9EZhgj0o8FPIdkqWETx52x4tQcIxp/ysIO4n7BTxYGBcf2Dp87NH3xncAAAAASUVORK5CYII"); */
		background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.7587 4.31292e-07H14.2413C15.0463 -1.23241e-05 15.7106 -2.28137e-05 16.2518 0.0441945C16.8139 0.0901197 17.3306 0.188684 17.816 0.435975C18.5686 0.819468 19.1805 1.43139 19.564 2.18404C19.8113 2.66937 19.9099 3.18608 19.9558 3.74817C20 4.28936 20 4.95372 20 5.75868V14.2413C20 15.0463 20 15.7106 19.9558 16.2518C19.9099 16.8139 19.8113 17.3306 19.564 17.816C19.1805 18.5686 18.5686 19.1805 17.816 19.564C17.3306 19.8113 16.8139 19.9099 16.2518 19.9558C15.7106 20 15.0463 20 14.2413 20H5.75868C4.95372 20 4.28936 20 3.74817 19.9558C3.18608 19.9099 2.66937 19.8113 2.18404 19.564C1.43139 19.1805 0.819468 18.5686 0.435975 17.816C0.188684 17.3306 0.0901197 16.8139 0.0441945 16.2518C-2.28137e-05 15.7106 -1.23241e-05 15.0463 4.31292e-07 14.2413V5.7587C-1.23241e-05 4.95373 -2.28137e-05 4.28937 0.0441945 3.74817C0.0901197 3.18608 0.188684 2.66937 0.435975 2.18404C0.819468 1.43139 1.43139 0.819468 2.18404 0.435975C2.66937 0.188684 3.18608 0.0901197 3.74817 0.0441945C4.28937 -2.28137e-05 4.95373 -1.23241e-05 5.7587 4.31292e-07ZM15.2071 6.29289C15.5976 6.68342 15.5976 7.31658 15.2071 7.70711L9.20711 13.7071C8.81658 14.0976 8.18342 14.0976 7.79289 13.7071L4.79289 10.7071C4.40237 10.3166 4.40237 9.68342 4.79289 9.29289C5.18342 8.90237 5.81658 8.90237 6.20711 9.29289L8.5 11.5858L13.7929 6.29289C14.1834 5.90237 14.8166 5.90237 15.2071 6.29289Z' fill='%233060A0'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center center;
}
.form__type--checkbox .form__text,
.form__type--checkbox .form__text * {
	line-height: 18px;
}
.form__text em {
	font-size: 14px;
	font-style: normal;
}

.form__text a {
	text-decoration: underline;
  text-decoration-skip-ink: none;
	font-size: 14px;
}
.form__name--confirmation .form__text a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
		
}
.form__name--confirmation .form__text a:hover {
    text-decoration: none;
}

.form__clear {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4182 16 8C16 3.5818 12.4183 0 8 0C3.58172 0 0 3.5818 0 8C0 12.4182 3.58172 16 8 16ZM11.5442 4.45588C11.8382 4.74977 11.8382 5.22656 11.5442 5.52068L9.06483 8L11.5442 10.4793C11.8382 10.7734 11.8382 11.2502 11.5442 11.5441C11.2501 11.8382 10.7734 11.8382 10.4793 11.5441L8 9.0648L5.52065 11.5441C5.22662 11.8382 4.74989 11.8382 4.45582 11.5441C4.16179 11.2502 4.16179 10.7734 4.45582 10.4793L6.93517 8L4.45582 5.52068C4.16179 5.22656 4.16179 4.74977 4.45582 4.45588C4.74986 4.16176 5.22659 4.16176 5.52065 4.45588L8 6.9352L10.4793 4.45588C10.7734 4.16176 11.2501 4.16176 11.5442 4.45588Z' fill='white' fill-opacity='0.6'/></svg>");
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    right: 20px;
		top: 15px;
    display: none;		
}
.form__clear.show {
    display: inline-block;
		cursor: pointer;
}

.form__btn {
    margin-top: 24px;
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(90deg, #60c0ff 0%, #3060a0 100%);
    color: #fff;
    border-radius: 12px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: #fff;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.form__btn:hover {
    /* background: linear-gradient(90deg, #9600FF 0%, #C800C8 100%);; */
		background: #183050;
}

.form__btn:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.form__btn:disabled:hover {
    /* background: linear-gradient(90deg, #C800C8 0%, #9600FF 100%, #9600FF 100%); */
		/* background: #183050; */
		background: linear-gradient(90deg, #60c0ff 0%, #3060a0 100%);
}

.form-status--processing .form__btn {
    visibility: hidden;
}

.form__error {
    position: absolute;
    font-size: 12px;
    color: #f00;
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
    line-height: normal;
    text-align: center;
}

.form__error--global {
    position: relative;
    transform: none;
    left: auto;
    bottom: auto;
}

.form__container--success,
.form__container--error {
    visibility: hidden;
    color: white;
    text-align: center;
}
.form__container--success.form__container--show,
.form__container--error.form__container--show {
    visibility: visible;
}

.form__container--processing {
    visibility: hidden;
}
.form__container--processing.form__container--show {
    visibility: visible;
}

.form__container--success > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form__item-select {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M6 9L12 15L18 9" stroke="%23B9A8D0" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E'); /* Кастомная стрелка */
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 24px;
}

.form__item-select::-ms-expand {
    display: none;
  }

@media(max-width: 600px) {
    .form {
        gap: 20px;
    }
    .form__label {
        flex-direction: column;
        align-items: flex-start;
    }
    .form__text {
        width: 90%;
        padding: 0;
        font-size: 16px;
    }
    .form__clear {
        top: calc(50% - 8px);
    }

    .form__error {
        left: 0;
    }
}