a {
    text-decoration: none;
    color: var(--blue-pastel);
    transition: color var(--transition);
}

li {
    list-style: none;
}

.input,
.select,
.photo-block,
.btn,
.status-notification {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

label.warning {
    color: var(--red) !important;
}

input[type="file"] {
    display: none;
} 

input,
textarea,
.select {
    min-height: 64px;
    height: 64px;
    padding: 10px 16px;
    padding-top: 26px;
    border-radius: 14px;
    border: 1px solid var(--border);
    transition: border var(--transition);
    font-size: var(--text-small);
    display: block;
    width: 100%;
}

input[type="number"]::-moz-inner-spin-button,
input[type="number"]::-moz-outer-spin-button {
    -moz-appearance: none;
    margin: 0;
}

input[type="number"]::-o-inner-spin-button,
input[type="number"]::-o-outer-spin-button {
    -o-appearance: none;
    margin: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input::placeholder,
textarea::placeholder {
    color: var(--light-text);
}

input:read-only {
    background-color: #F6F6F8;
    border-color: #EFEFEFB2;
}

.input {
    position: relative;
    display: flex;
    align-items: center;
}

.input.datepicker .-icon-date,
.input.password .-show-password {
    height: 28px;
    width: 28px;
    position: absolute;
    right: 16px;
    top: 17px;
    cursor: pointer;
}

.input.password .-show-password .-eye-close {
    display: none;
    margin-top: 3px;
}

.input.datepicker input,
.input.password input {
    padding-right: 60px;
}

.input.datepicker .-icon-date path {
    transition: stroke var(--transition), fill var(--transition);
}

.input.datepicker.active .-icon-date path:nth-child(1),
.input.datepicker .-icon-date:hover path:nth-child(1),
.input.datepicker.active .-icon-date path:nth-child(2),
.input.datepicker .-icon-date:hover path:nth-child(2),
.input.datepicker.active .-icon-date path:nth-child(3),
.input.datepicker .-icon-date:hover path:nth-child(3),
.input.datepicker.active .-icon-date path:nth-child(4),
.input.datepicker .-icon-date:hover path:nth-child(4) {
    stroke: #3D3C63;
}

.input.datepicker.active .-icon-date path:nth-child(5),
.input.datepicker .-icon-date:hover path:nth-child(5),
.input.datepicker.active .-icon-date path:nth-child(6),
.input.datepicker .-icon-date:hover path:nth-child(6),
.input.datepicker.active .-icon-date path:nth-child(7),
.input.datepicker .-icon-date:hover path:nth-child(7),
.input.datepicker.active .-icon-date path:nth-child(8),
.input.datepicker .-icon-date:hover path:nth-child(8),
.input.datepicker.active .-icon-date path:nth-child(9),
.input.datepicker .-icon-date:hover path:nth-child(9),
.input.datepicker.active .-icon-date path:nth-child(10),
.input.datepicker .-icon-date:hover path:nth-child(10) {
    fill: #3D3C63;
}

.input label,
.select label {
    color: var(--light-text);
    font-size: 18px;
    position: absolute;
    pointer-events: none;
    transition: font-size calc(var(--transition) - 0.1s), top calc(var(--transition) - 0.1s), color calc(var(--transition) - 0.1s);
    font-weight: 500;
    left: 16px;
    top: 17px;
}

.input input:focus~label,
.input input:valid~label,
.input input[data-has-value]~label,
.input textarea:focus~label,
.input textarea:valid~label,
.input textarea[data-has-value]~label,
.input input:disabled~label,
.input textarea:disabled~label,
.input input:read-only~label {
    top: 10px;
    font-size: 12px;
}

.input input:disabled,
.input textarea:disabled {
    color: #000;
}

.input.warning.datepicker .-icon-date path {
    stroke: var(--red);
}

.input.warning input,
.input.warning textarea,
.select.warning .-base {
    border-color: var(--red);
    color: var(--red);
}

.input.warning input~label:not(.warning),
.input.warning textarea~label:not(.warning) {
    color: var(--red);
}

.input.warning input:focus~label:not(.warning),
.input.warning input:valid~label:not(.warning),
.input.warning textarea:focus~label:not(.warning),
.input.warning textarea:valid~label:not(.warning) {
    color: color-mix(in srgb, var(--red), #0000 50%);
}

.input label.warning,
.select label.warning {
    font-size: 12px !important;
    left: auto;
    right: 24px !important;
    top: -11px !important;
    background-color: var(--white);
    padding: 0 4px;
}

textarea {
    height: auto;
    resize: none;
    overflow: hidden;
    max-height: 250px;
}

.select {
    position: relative;
    color: var(--light-text);
    font-size: 18px;
    padding: 0;
    border: 0;
    transition: none;
}

.select .-base {
    width: 100%;
    cursor: pointer;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    height: 100%;
    transition: border var(--transition);
}

.select .-base .-title {
    font-size: 18px;
    position: absolute;
    pointer-events: none;
    transition: font-size calc(var(--transition) - 0.1s), top calc(var(--transition) - 0.1s), color calc(var(--transition) - 0.1s);
    font-weight: 500;
    left: 16px;
    top: 17px;
}

.select .-base svg {
    transition: transform var(--transition), fill var(--transition);
    margin-left: auto;
}

.select .-base .-selected-item {
    color: var(--dark-text);
    font-size: 16px;
    margin-top: 20px;
}

.select.warning .-base svg path {
    fill: var(--red);
}

.select .-wrapper {
    position: absolute;
    top: calc(100% + 4px);
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    padding: 16px;
    border: 1px solid var(--border);
    background-color: var(--white);
    width: 100%;
    border-radius: 6px 6px 14px 14px;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
    transform: translateY(-15px);
    transition: all var(--transition) ease-in-out, visibility 0s, z-index 0s;
    opacity: 0;
    max-height: 200px;
    overflow: hidden;
}

.select.show .-wrapper {
    visibility: visible;
    opacity: 1;
    z-index: 1000;
    transform: translateY(0px);
}

.select .-list {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

.select .-list .-item {
    margin-bottom: 12px;
    cursor: pointer;
    transition: color var(--transition);
}

.select .-list .-item.last,
.select .-list .-item:last-child {
    margin-bottom: 0;
}

.select .-list .-item.active,
.select .-list .-item:hover {
    color: var(--dark-text);
}

.select.show .-base {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

.select.show .-base svg {
    transform: rotate(180deg);
}

.select.selected .-base .-title {
    top: 10px;
    font-size: 12px;
}

.select.show.transform .-wrapper {
    top: auto;
    bottom: calc(100% + 4px);
    border-radius: 14px 14px 6px 6px;
    box-shadow: 0px -4px 24px 0px rgba(0, 0, 0, 0.08);
}

.select.norequired.show.transform .-wrapper {
    bottom: calc(100% + 8px);
}

.select.show.transform .-base {
    border-radius: 14px;

    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

.select[data-mode="multi"] .-list .-item {
    display: flex;
    align-items: center;
}

.select[data-mode="multi"] .-list .-item .multi-action {
    color: var(--blue-pastel);
    width: 20px;
    font-weight: 500;
}

.select.norequired::before,
.input.norequired::before {
    content: 'Не обязательно';
    position: absolute;
    top: -11px;
    right: 24px;
    font-weight: 500;
    font-size: 12px;
    background-color: var(--white);
    padding: 0 4px;
    color: var(--light-text);
}

.select-inline {
    margin-bottom: 16px;
}

/* SCROLLBAR FOR FIREFOX */

@-moz-document url-prefix() {
    .select-inline .-list {
        scrollbar-width: none !important;
    }
}

.select-inline .-list::-webkit-scrollbar-track {
    height: 0px;
    width: 0px;
}

.select-inline .-list::-webkit-scrollbar-thumb {
    height: 0px;
    width: 0px;
}

.select-inline .-list::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.select-inline .-list {
    flex-direction: row !important;
    align-items: center !important;
    overflow-y: hidden !important;
    overflow-x: auto !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.select-inline .-list .-item {
    width: calc(25% - 6px);
    min-width: calc(25% - 6px);
    height: 95px;
    margin-right: 8px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--white);
    border-radius: 10px;
    transition: border-color var(--transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.select-inline .-list .-item img {
    width: auto;
    height: 70px;
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.select-inline .-list .-item.last,
.select-inline .-list .-item:last-child {
    margin-right: 0;
}

.select-inline .-list .-item:hover,
.select-inline .-list .-item.active {
    border-color: var(--blue-pastel);
}

.select-inline .-list .-item p {
    color: var(--light-text);
    font-size: 12px;
    font-weight: 500;
}

.btn {
    display: flex;
    height: 72px;
    padding: 16px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 16px;
    background-color: var(--blue-pastel);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), opacity var(--transition);
    color: var(--white);
    font-size: inherit;
}

.btn:hover {
    opacity: .7;
}

.btn.transparent {
    background-color: var(--blue-pastel-light);
    color: var(--light-text);
}

.btn.transparent:hover {
    /* background-color: var(--blue-pastel); */
    background-color: #E7E7F5;
    /* color: var(--white); */
    /* opacity: 1; */
}

.btn.small {
    height: 56px;
    font-size: var(--text-small);
}

.btn.load {
    position: relative;
    overflow: hidden;
}

/*------ ACCORDION ------*/

.accordion {
    /* height: 118px;
    
    overflow: hidden; */
    overflow: hidden;
}

.accordion .-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.accordion .-acc-header .-acc-action {
    cursor: pointer;
}

.accordion .-acc-header .-acc-action svg {
    height: 20px;
    width: 16px;
    transition: transform var(--transition);
}

.accordion.open .-acc-header .-acc-action svg {
    transform: rotate(180deg);
}

.accordion .-acc-body {
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: height var(--transition), opacity calc(var(--transition) - 0.1s), padding var(--transition), visibility var(--transition);
}

.accordion.open .-acc-body {
    height: auto;
    opacity: 1;
    visibility: visible;
    transition: height var(--transition), opacity calc(var(--transition) - 0.1s), padding var(--transition), visibility var(--transition);
    padding-top: 30px;
}

.loading {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: inherit;
    z-index: 9;
}

.loading span {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: var(--white);
    animation: loading 1s infinite;
    margin-right: 10px;
}

.loading span:last-child {
    margin-right: 0;
}

.loading span:nth-child(1) {
    animation-delay: 0s;
}

.loading span:nth-child(2) {
    animation-delay: 0.3s;
}

.loading span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes loading {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }
}

img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    -moz-pointer-events: none;
    -webkit-pointer-events: none;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 500;
}

.fl {
    display: flex !important;
}

.fl.ai-s {
    align-items: start !important;
}

.fl.ai-c {
    align-items: center !important;
}

.fl.jc-c {
    justify-content: center !important;
}

.fl.jc-sb {
    justify-content: space-between !important;
}

.fl.fw-w {
    flex-wrap: wrap !important;
}

.fl.fd-r {
    flex-direction: row !important;
}

.fl.fd-c {
    flex-direction: column !important;
}

.photo-block {
    width: calc(50% - 6px);
    height: 254px;
    margin-bottom: 12px;
    background-color: var(--white-gray);
    border: 1px solid var(--white-gray);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.photo-block.action {
    cursor: pointer;
    background-color: var(--blue-pastel);
    border: 1px solid var(--blue-pastel);
    transition: opacity var(--transition), background-color var(--transition), border var(--transition);
}

.photo-block.action::before {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.1642 28.6973C21.9465 14.8991 25.8377 8 31.9997 8C38.1617 8 42.0528 14.8991 49.8351 28.6973L50.8049 30.4167C57.2719 41.8829 60.5054 47.6161 57.583 51.808C54.6605 56 47.4302 56 32.9694 56H31.0299C16.5692 56 9.3388 56 6.41636 51.808C3.49392 47.6161 6.72744 41.8829 13.1945 30.4167L14.1642 28.6973Z' stroke='%23EA1D37' stroke-width='2'/%3E%3Cpath d='M32 21.3333V34.6667' stroke='%23EA1D37' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='31.9994' cy='41.2502' r='1.41538' fill='%23EA1D37'/%3E%3C/svg%3E");
    height: 64px;
    width: 64px;
    opacity: 0;
    transform: translateY(-40px);
}

.photo-block.action:not(.warning):hover {
    opacity: .7;
}

.photo-block.action label {
    opacity: 0;
    font-size: 14px;
    position: absolute;
    transform: translateY(10px);
}

.photo-block.action p {
    font-size: 16px;
    color: var(--blue-pastel);
    position: absolute;
    opacity: 0;
    transform: translateY(50px);
}

.photo-block.action svg,
.photo-block.action label,
.photo-block.action p,
.photo-block.action::before {
    transition: opacity var(--transition);
}

.photo-block.action.warning {
    border-color: var(--red);
    background-color: var(--white);
    position: relative;
    text-align: center;
}

.photo-block.action.warning label,
.photo-block.action.warning p,
.photo-block.action.warning::before {
    opacity: 1;
    cursor: pointer;
}

.photo-block.action.warning svg {
    opacity: 0;
}

.checkbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid var(--gray);
    background-color: var(--white);
    transition: background-color var(--transition), border-color var(--transition);
}

.checkbox::before {
    content: '';
    height: 10px;
    width: 10px;
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4.5L3.5 6.5L8.5 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--transition);
}

.checkbox.checked {
    background-color: var(--blue-pastel);
    border-color: var(--blue-pastel);
}

.checkbox.checked::before {
    opacity: 1;
}

.toggle {
    display: flex;
    align-items: center;
    color: var(--light-text);
    margin-right: 8px;
    cursor: pointer;
    margin-bottom: 12px;
}

.toggle .-toggle-box {
    position: relative;
    margin-left: auto;
    height: 24px;
    width: 44px;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--blue-pastel), #0000 80%);
    padding: 2px;
    transition: background-color var(--transition);
}

.toggle .-toggle-box div {
    background-color: var(--blue-pastel);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    left: 2px;
    transition: background-color var(--transition), left var(--transition);
}

.toggle.active .-toggle-box {
    background-color: color-mix(in srgb, var(--blue-pastel), #0000 0%);
}

.toggle.active .-toggle-box div {
    background-color: var(--white);
    left: 22px;
}

.select-stars {
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    margin-bottom: 24px;
}

.select-stars label {
    display: flex;
    align-items: center;
    justify-content: center;
}

.select-stars label svg path {
    transition: fill var(--transition);
}

.select-stars label:not(:first-child) {
    padding-right: 10px;
}

.select-stars:not(:checked)>input {
    display: none;
}

.select-stars:not(:checked)>label {
    float: right;
    cursor: pointer;
}

.select-stars>input:checked~label path {
    fill: #FFD600;
}

.select-stars:not(:checked)>label:hover path,
.select-stars:not(:checked)>label:hover~label path {
    fill: #FFD600;
}

.select-stars>input:checked+label:hover path,
.select-stars>input:checked+label:hover~label path,
.select-stars>input:checked~label:hover path,
.select-stars>input:checked~label:hover~label path,
.select-stars>label:hover~input:checked~label path {
    fill: #FFD600;
}

.select-stars>label:active {
    position: relative;
}

.--small-tooltip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    z-index: 9;
}

.--small-tooltip p {
    color: var(--white);
    font-size: var(--text-small);
    border-radius: 12px;
    padding: 12px 16px;
    background-color: rgba(61, 60, 99, 0.80);
    position: absolute;
    visibility: hidden;
    opacity: 0;
    bottom: 30px;
    width: max-content;
    max-width: 350px;
    -webkit-backdrop-filter: blur(2px);
    -moz-backdrop-filter: blur(2px);
    -o-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transform: translate(0, -10px);
    transition: bottom var(--transition), visibility var(--transition), opacity var(--transition), transform var(--transition);
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.--small-tooltip p::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(61, 60, 99, 0.80) transparent transparent transparent;
}

.--small-tooltip:hover p,
.--small-tooltip:focus p {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
}

.--small-tooltip p span {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.--small-tooltip p span.price {
    margin-bottom: 4px;
}

.--small-tooltip p span.price b {
    padding: 3px 8px;
    color: #2EBA2C;
    background: #d3ffd3;
    border-radius: 5px;
    font-size: 14px;
}

.air-datepicker-body--day-name {
    color: var(--light-text);
    font-size: 14px;
    width: 30px;
}

.air-datepicker-cell {
    border-radius: 29px;
    color: var(--light-text);
}

.air-datepicker-cell.-day- {
    height: 30px;
    width: 30px;
}

.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current-,
.air-datepicker-cell.-selected-.-focus- {
    background: var(--blue-pastel);
    color: var(--white);
}

.air-datepicker-cell.-current- {
    color: var(--blue-pastel);
}

.air-datepicker-nav--action svg path {
    stroke: var(--dark-text)
}

/* .air-datepicker-time--sliders {
    display: none;
} */

.air-datepicker {
    border: none;
    background: 0;
    box-shadow: none !important;
    width: 340px;
    --adp-day-cell-width: 45px;
    --adp-day-cell-height: 35px;
    display: block;
    border-radius: 14px;
}

.air-datepicker--pointer:after {
    display: none;
}

.air-datepicker--content {
    padding: 20px;
    padding-top: 0;
    background: var(--white) !important;
    border-radius: 0 0 8px 8px;
    border: 1px solid var(--gray) !important;
    border-top: 0 !important;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08) !important;
}

.air-datepicker-nav {
    border-bottom: 0;
    padding: 0;
}

.air-datepicker--navigation {
    padding: 20px;
    padding-bottom: 15px;
    background: var(--white) !important;
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--gray) !important;
    border-bottom: 0 !important;
    position: relative;
}

.air-datepicker--buttons,
.air-datepicker--time {
    margin-top: 5px;
    border-radius: 8px 8px 14px 14px;
    border: 1px solid var(--gray) !important;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08) !important;
    padding: 20px;
    background: var(--white);
}

.air-datepicker-body--day-names {
    margin: 0 0 15px 0;
}

.air-datepicker-nav--action {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.air-datepicker-nav--title {
    border-radius: 10px;
}

.air-datepicker.-inline- {
    position: absolute;
}

.air-datepicker-time--current {
    justify-content: space-between;
}

.air-datepicker-time {
    display: block;
}

.air-datepicker-time--current-hours,
.air-datepicker-time--current-minutes {
    padding: 8px !important;
    height: 44px;
    width: calc(50% - 25px);
    border-radius: 16px;
    text-align: center;
    color: var(--light-text);
}

.air-datepicker-time--current-colon {
    margin: 0 20px;
    line-height: 1;
    font-size: 30px;
    margin-top: -5px;
}

.modals {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(3px);
    -moz-backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: rgba(61, 60, 99, 0.12);
    z-index: 777;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.modals.no-close {
    display: flex;
}

.modals.no-close .modal {
    display: flex;
}

.modals.right {
    justify-content: right;
    padding-right: 0;
}

.modals.height-full {
    padding: 0px;
}

.modals .modal {
    width: 660px;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    background-color: var(--white);
    border-radius: 20px;
    overflow: hidden;
    transform: translateY(-55px);
    transition: transform var(--transition), opacity var(--transition);
}

.modals.right .modal {
    transform: translateY(0px);
    transform: translateX(55px);
}

.modals .modal.auto-height {
    height: auto;
}

.modals .modal.show {
    transform: translateY(0px);
}

.modals.right .modal.show {
    transform: translateX(0px);
}
 
.modals .modal .-header {
    display: flex; 
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 24px 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray);
    font-size: 26px;
    max-height: 280px;
    width: calc(100% - 80px);
}

.modals .modal .-header .-close {
    cursor: pointer;
    padding: 5px;
    padding-right: 0;
}

.modals .modal .-header .-status {
    padding: 8px 16px;
    border-radius: 8px;
    background: #E8F7E8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-small);
    color: #2EBA2C;
}

.modals .modal .-header .-close svg path {
    transition: stroke var(--transition);
}

.modals .modal .-header .-close:hover svg path {
    stroke: var(--blue-pastel);
}

.modals .modal .-main {
    width: 100%;
    padding: 0 40px;
    flex-direction: column;
}

.modals .modal.no-header .-main {
    padding: 40px;
    padding-top: 70px;
}

.modals .modal.center .-main,
.modals .modal.center .-header,
.modals .modal.center .-main {
    text-align: center;
    justify-content: center;
}

.modals .modal.auto-height .-main {
    padding-bottom: 40px;
}

.modals .modal .-main .-block-text {
    /* height: 80px; */
    padding: 16px;
    border-radius: 12px;
    background-color: var(--white-gray-dark);
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}

.modals .modal .-main .-block-text span {
    color: var(--blue-pastel);
    margin-bottom: 12px;
}

.modals .modal .-main .-block-text p {
    font-size: var(--text-small);
}

.modals .modal .-main .input {
    margin-bottom: 12px;
}

.modals .modal .-main .-btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}

.modals .modal .-main .-btns div {
    width: calc(50% - 12px);
}

.modals .modal .-main .-btns div .btn {
    margin-top: 0;
}

.modals .modal .-main .btn,
.modals .modal .-main .input {
    width: 100%;
}

.modals .modal.auto-height .btn {
    margin-top: 24px;
}

.modals .modal .-main .-block:not(:last-child) {
    margin-bottom: 24px;
}

.modals .modal .-main .-subject {
    margin-bottom: 12px;
}

.modals .modal .-main .-subject-alt {
    margin-bottom: 24px;
    color: var(--light-text);
}

.modals .modal .-main .-subject-alt.small,
.modals .modal .-action .-subject-alt.small {
    font-size: var(--text-small);
    margin-bottom: 4px;
}

.modals .modal .-main .-subject.big,
.modals .modal .-main .-subject-alt.big {
    font-size: 28px;
    margin-bottom: 12px;
}

.modals .modal .-main .-table-content {
    margin-bottom: 24px;
}

.modals .modal .-main .-table-content .-text {
    border-bottom: 1px solid var(--gray);
    position: relative;
    display: flex;
    margin-bottom: 5px;
}

.modals .modal .-main .-table-content .-text:last-child {
    margin-bottom: 0;
}

.modals .modal .-main .-table-content p {
    background-color: var(--white);
    bottom: -5px;
}

.modals .modal .-main .-table-content .-title {
    position: relative;
    padding-right: 10px;
    color: var(--light-text);
}

.modals .modal .-main .-table-content .-info {
    position: absolute;
    right: 0;
    padding-left: 10px;
}

.modals .modal .-main .-link {
    color: var(--blue-pastel);
    cursor: pointer;
}

.modals .modal .-main .-code {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modals .modal .-main .-code .input {
    width: 60px;
    height: 60px;
    margin-right: 12px;
}

.modals .modal .-main .-code .input:last-of-type {
    margin-right: 0;
}

.modals .modal .-main .-code .input input {
    height: 100%;
    width: 100%;
    padding: 10px 16px;
    font-size: 40px;
    text-align: center;
}

.modals .modal .-main .-code .input.checked input {
    border-color: var(--blue-pastel);
}

.modals .modal .-main .-code .input input:focus {
    border-color: color-mix(in srgb, var(--blue-pastel), #0000 50%) !important
}

.modals .modal .-main .-code .-warning {
    position: absolute;
    bottom: -19px;
    margin: 0;
    color: var(--red);
}

.modals .modal .-main .-drop-shadow {
    position: relative;
    width: 100%;
    display: none;
    z-index: 9;
}

.modals .modal .-main .-drop-shadow div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.00) 0%, var(--white) 100%);
}

.modals .modal .-main .-drop-shadow:last-child {
    display: block;
}

.modals .modal .-main .-drop-shadow:last-child div {
    bottom: 0;
    top: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, var(--white) 100%);
}

.modals .modal .-main .-list {
    display: flex;
    flex-direction: column;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 12px;
    width: calc(100% + 12px);
    position: relative;
}

.modals .modal .-action {
    position: relative;
    padding: 24px 40px 24px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    width: 100%;
    border-top: 1px solid var(--gray);
    margin-top: auto;
}

.modals .modal .-action .btn {
    width: 100%;
}

.modals .modal.login,
.modals .modal.register,
.modals .modal.phone-confirm {
    width: 500px;
}

.modals .modal.phone-confirm .btn.confirm {
    margin-bottom: 24px;
}

.modals .modal.phone-confirm .btn.cancel {
    width: 80%;
    margin: 0 auto;
    margin-top: 60px;
}

.modals .modal.register .register-consents {
    margin-top: 4px;
    margin-bottom: 8px;
    text-align: left;
}

.modals .modal.register .register-consent-item {
    margin-bottom: 10px;
    color: var(--light-text);
    font-size: 11px;
    line-height: 1.5;
}

.modals .modal.register .register-consent-item:last-child {
    margin-bottom: 0;
}

.modals .modal.register .register-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    position: static;
    left: auto;
    top: auto;
    pointer-events: auto;
    color: var(--light-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    transition: color var(--transition), opacity var(--transition);
}

.modals .modal.register .register-consent-item .register-consent-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
}

.modals .modal.register .register-consent-item .register-consent-label .checkbox {
    margin-top: 2px;
    min-width: 20px;
}

.modals .modal.register .register-consent-item .register-consent-checkbox:checked + .checkbox {
    background-color: var(--blue-pastel);
    border-color: var(--blue-pastel);
}

.modals .modal.register .register-consent-item .register-consent-checkbox:checked + .checkbox::before {
    opacity: 1;
}

.modals .modal.register .register-consent-item .register-consent-checkbox:focus-visible + .checkbox {
    outline: 2px solid color-mix(in srgb, var(--blue-pastel), #0000 30%);
    outline-offset: 2px;
}

.modals .modal.register .register-consent-item .register-consent-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.3;
}

.modals .modal.register .register-consent-item .register-consent-text a {
    color: #8F8CF7 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity var(--transition);
}

.modals .modal.register .register-consent-item .register-consent-text a:visited,
.modals .modal.register .register-consent-item .register-consent-text a:hover,
.modals .modal.register .register-consent-item .register-consent-text a:active {
    color: #8F8CF7 !important;
}

.modals .modal.register .register-consent-item .register-consent-text a:hover {
    opacity: 0.75;
}

.modals .modal.register .register-consents .warning {
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--red);
}

.modals .modal.register .register-consents.warning .register-consent-label {
    color: var(--red);
}

.modals .modal.register .register-consents.warning .checkbox {
    border-color: var(--red);
}

/* .status-notification {
    padding: 12px 20px;
    border-radius: 12px;
    cursor: default !important;
    max-height: 48px;
}

.status-notification p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.status-notification.success {
    color: var(--green) !important;
    background-color: color-mix(in srgb, var(--green), #0000 90%) !important;
}

.status-notification.pause {
    color: var(--dark-text) !important;
    background-color: color-mix(in srgb, var(--dark-text), #0000 90%) !important;
}

.status-notification.warning {
    color: var(--red) !important;
    background-color: color-mix(in srgb, var(--red), #0000 90%) !important;
}

.status-notification.check {
    color: var(--orange) !important;
    background-color: color-mix(in srgb, var(--orange), #0000 90%) !important;
}

.status-notification.repair {
    color: var(--violet) !important;
    background-color: color-mix(in srgb, var(--violet), #0000 90%) !important;
} */

.disabled {
    opacity: .5 !important;
    cursor: default !important;
}

.toggle.disabled {
    opacity: 1 !important;
}

.toggle.disabled p,
.toggle.disabled svg,
.toggle.disabled .-toggle-box {
    opacity: .5 !important;
}

.toggle.disabled .--small-tooltip p {
    opacity: 0 !important;
}

.toggle.disabled .--small-tooltip:hover p,
.toggle.disabled .--small-tooltip:focus p {
    opacity: 1 !important;
}

.select.disabled {
    background-color: #EFEFEFB2;
    opacity: 1;
}

.select.disabled .-base {
    cursor: default;
}