html {
    font-size: 15px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
html, body {
    height: 100vh;
    overflow: hidden;
}
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    color: var(--main-black-color);
    background: var(--bg-color);
    font-size: 1rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    position: relative;
	padding-top: var(--safe-area-inset-top-redefined);
	padding-left: var(--safe-area-inset-left-redefined);
	padding-right: var(--safe-area-inset-right-redefined);
}
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    display: none;
}
body.open {
    height: 100%;
    scroll-behavior:smooth;
}
.disable-transitions * {
    transition: none !important;
}
div, a, input, button, * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    outline: none;
    text-decoration: none;
    transition: 0.3s;
}
a {
    text-decoration: none;
    color: var(--main-black-color);
}
button {
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    color: var(--main-black-color);
    cursor: pointer;
}
.pressed {
    cursor: pointer;
}
a:active, button:active, .pressed:active{
    color: var(--main-black-color);
    transform-origin: center;
}
.no-pressed:hover {
    transform: none !important;
}
.form-submit:active{
    transform: scale(0.99);
    transform-origin: center;
}
.type-a-r {
    cursor: pointer;
}
p {
    margin: 0.667rem 0;
}
.content p {
    margin: 0.467rem 0;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 500;
}
h1 {
    font-size: 1.867rem;
    margin: 2rem 0 1.333rem 0;
}
h1.page-title {
    margin: 1.333rem 0 2.333rem 0;
    font-size: 2.133rem;
}
h2 {
    font-size: 1.467rem;
    margin: 1.333rem 0 1rem 0;
}
h3 {
    font-size: 1.2rem;
    margin: 1.333rem 0 1rem 0;
}
h4 {
    font-size: inherit;
    margin: 1rem 0 1rem 0;
}
img, svg {
    width: 100%;
    height: auto !important;
}
body svg {
    display: inline-block;
    max-width: 40px;
}
svg g{
    fill: var(--main-black-color);
}
ul {
    margin: 0;
    padding-left: 1rem;
}
ul li {
    padding: 0.2rem 0;
}
.cols {
    display: flex;
}
.colsw {
    display: flex;
    flex-wrap: wrap;
}
.cols-sb {
    display: flex;
    justify-content: space-between;
}
.cols-aic {
    display: flex;
    align-items: center;
}
.cols-sa {
    display: flex;
    justify-content: space-around;
}
.cols-center {
    display: flex;
    justify-content:center;
}
.cols-end {
    display: flex;
    justify-content:flex-end;
}
.col-1 {
    flex: 1 1 calc(8.333% - 1rem);
    max-width: calc(8.333% - 1rem);
}
.col-2 {
    flex: 1 1 calc(16.66% - 1rem);
    max-width: calc(16.66% - 1rem);
}
.col-3 {
    flex: 1 1 calc(25% - 1rem);
    max-width: calc(25% - 1rem);
}
.col-4 {
    flex: 1 1 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
}
.col-5 {
    flex: 1 1 calc(41.667% - 1rem);
    max-width: calc(41.667% - 1rem);
}
.col-6 {
    flex: 1 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
}
.col-7 {
    flex: 1 1 calc(58.333% - 1rem);
    max-width: calc(58.333% - 1rem);
}
.col-8 {
    flex: 1 1 calc(66.666% - 1rem);
    max-width: calc(66.666% - 1rem);
}
.col-9 {
    flex: 1 1 calc(75% - 1rem);
    max-width: calc(75% - 1rem);
}
.col-10 {
    flex: 1 1 calc(83.333% - 1rem);
    max-width: calc(83.333% - 1rem);
}
.col-11 {
    flex: 1 1 calc(91.667% - 1rem);
    max-width: calc(91.667% - 1rem);
}
.col-12 {
    flex: 1 1 100%;
    max-width: 100%;
}
.section {
    padding: 5.333rem 0;
}
.uppercase {
    text-transform: uppercase;
}
.color-op {
    color: var(--main-black-color-op);
}
.text-center {
    text-align: center;
}
.mg-top-20 {
    margin-top: 1.333rem !important;
}
.mg-top-10 {
    margin-top: 0.667rem !important;
}
.mg-top-5 {
    margin-top: 0.333rem !important;
}
.margin-5-0 {
    margin: 0.333rem 0;
}
.margin-10-0 {
    margin: 0.667rem 0;
}
.margin-15-0 {
    margin: 1rem 0;
}
.margin-20-0 {
    margin: 1.333rem 0;
}
.margin-30-0 {
    margin: 2rem 0;
}
.margin-50-0 {
    margin: 3.333rem 0;
}
.notdisplay {
    display: none;
}
.hidden {
    display: none !important;
}
.hidden-t {
    display: none !important;
}
.invisible {
    visibility: hidden;
}
@keyframes dotAnimation {
    0%, 20% { content: ""; }
    40% { content: "."; }
    60% { content: ".."; }
    80% { content: "..."; }
    100% { content: ""; }
}
.loadingDotText:after {
    content: "";
    animation: dotAnimation 2s infinite steps(1);
}
.absoluteCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#toast-container {
    position: fixed;
    top: 0.667rem;
    right: 0.667rem;
    z-index: 999999999999;
}
#toast-container, #toast-container * {
    transition: 0s !important;
}
.toast {
    display: none;
    padding: 0.667rem 1.333rem;
    margin-top: 0.667rem;
    border-radius: 0.333rem;
    cursor: pointer;
    background: var(--input-bg-color);
    color: var(--input-text-color);
    outline: none;
    -webkit-box-shadow: 0 0 1.133rem -0.2rem var(--shadow-input-color);
    -moz-box-shadow: 0 0 1.133rem -0.2rem var(--shadow-input-color);
    box-shadow: 0 0 1.133rem -0.2rem var(--shadow-input-color);
    border: 1px solid var(--input-border-color);
    max-width: 23.333rem;
    font-size: 90%;
}
.vbox-close {
    top: var(--safe-area-inset-top-redefined);
}
.no-access-section {
    font-weight: 700;
    text-align: center;
    max-width: 33.333rem;
}
.form-item {
    margin: 2.333rem 0;
}
.form-item:first-child {
    margin-top: 0;
}
.form-item.form-item-small {
    margin: 1rem 0;
}
.form-item.form-item-small:first-child {
    margin-top: 0;
}
.form-type-textfield, .form-type-select {
    position: relative;
}
.form-item input, .form-item-submit input, .form-item select, .form-item textarea {
    width: 100%;
    padding: 1.333rem;
    border-radius: 0.333rem;
    background: var(--input-bg-color);
    color: var(--input-text-color);
    outline: none;
    -webkit-box-shadow: 0 0 1.133rem -0.2rem var(--shadow-input-color);
    -moz-box-shadow: 0 0 1.133rem -0.2rem var(--shadow-input-color);
    box-shadow: 0 0 1.133rem -0.2rem var(--shadow-input-color);
    border: 1px solid var(--input-border-color);
}
.form-item input:focus, .form-item select:focus {
    color: var(--main-black-color);
}
.form-item input.type-text, .form-item select.type-select {
    font-size: 1.2rem;
}
.form-type-textfield input, .form-type-select select {
    padding-top: 2.333rem;
}
.form-type-textfield label, .form-type-select label {
    position: absolute;
    top: 0.467rem;
    left: 1rem;
    opacity: 0.7;
    font-size: 80%;
}
.form-type-textfield _, .form-type-select_ :not(option) {
    color: var(--input-text-color);
}
.form-type-textfield _:hover, .form-type-select_ :hover {
    color: var(--input-text-color);
}
.form-item select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.667rem;
}
input[type="number"] {
    -moz-appearance: textfield; /* Для Firefox */
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;   /* Для Chrome, Safari, Edge, Opera */
    margin: 0;                  /* Убирает возможные отступы */
}
.form-submit {
    cursor: pointer;
}
.form-type-select:after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--input-text-color);
    font-size: 1.467rem;
}
.form-items-label {
    font-size: 120%;
    font-weight: 700;
    margin-bottom: -0.333rem;
    padding-top: 1rem;
}
.form-items-label-withAdd {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.form-items-label-withAdd a {
    padding: 0.667rem 1rem;
    font-size: 1.733rem;
}
.checkbox-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    padding: 0.333rem 0;
}
.checkbox-label input {
    display: none;
}
.custom-checkbox {
    position: relative;
    width: 2.267rem;
    height: 2.267rem;
    min-width: 2.267rem;
    background-color: var(--input-bg-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    margin: 0 0.667rem;
    border: 1px solid var(--input-border-color);
}
.custom-checkbox:before {
    content: '';
    width: 0.8rem;
    height: 0.8rem;
    background-color: var(--main-black-color);
    opacity: 0.5;
    border-radius: 50%;
}
.custom-checkbox.custom-checkbox-small {
    width: 1.867rem;
    height: 1.867rem;
    min-width: 1.867rem;
}
.custom-checkbox.custom-checkbox-small:before {
    width: 0.667rem;
    height: 0.667rem;
}
.checkbox-label input:checked + .custom-checkbox {
    background-color: var(--highlighting-color);
    border-color: var(--highlighting-color);
}
.checkbox-label input:checked + .custom-checkbox:before {
    opacity: 1;
    background-color: var(--always-white);
}
.checkbox-label input:disabled + .custom-checkbox {
    opacity: 0.6;
}
.form-type-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.form-type-links a {
    display: block;
}
.range-slider {
    max-width: 98%;
    -webkit-appearance: none;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.333rem;
    height: 1.333rem;
    background: var(--input-text-color);
    cursor: pointer;
    border-radius: 50%;
    margin-top: -0.4rem;
    border: 2px solid var(--input-text-color);
}
.range-slider::-moz-range-thumb {
    width: 1.333rem;
    height: 1.333rem;
    background: var(--input-text-color);
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid var(--input-text-color);
}
.range-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.533rem;
    background: #e0e0e0;
    border-radius: 0.267rem;
}
.range-slider::-moz-range-track {
    width: 100%;
    height: 0.533rem;
    background: #e0e0e0;
    border-radius: 0.267rem;
}
.range-slider::-ms-track {
    width: 100%;
    height: 0.533rem;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.range-slider::-ms-fill-lower {
    background: #e0e0e0;
    border-radius: 0.267rem;
}
.range-slider::-ms-fill-upper {
    background: #e0e0e0;
    border-radius: 0.267rem;
}
.range-slider::-ms-thumb {
    width: 1.333rem;
    height: 1.333rem;
    background: var(--input-text-color);;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid var(--input-text-color);
}
.range-slider:focus {
    outline: none;
}
.range-slider:focus::-webkit-slider-runnable-track {
    background: #d0d0d0;
}
.range-slider:focus::-ms-fill-lower {
    background: #d0d0d0;
}
.range-slider:focus::-ms-fill-upper {
    background: #d0d0d0;
}

/* Корневой контейнер слайдера (можно доп. стилизовать у себя) */
.universal-range-slider-root {
    margin: 0.8rem 0;
}

/* Обёртка непосредственно для range + пузырька */
.universal-range-slider {
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 32px; /* место для пузырька */
}

/* Сам input[type="range"] */
.universal-range-slider input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin: 0;
}

/* Дорожка */
.universal-range-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    cursor: pointer;
    background: linear-gradient(90deg, var(--highlighting-color-02), var(--highlighting-color));
    border-radius: 3px;
}
.universal-range-slider input[type="range"]::-moz-range-track {
    height: 6px;
    cursor: pointer;
    background: linear-gradient(90deg, var(--highlighting-color-02), var(--highlighting-color));
    border-radius: 3px;
}
.universal-range-slider input[type="range"]::-ms-track {
    height: 6px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.universal-range-slider input[type="range"]::-ms-fill-lower,
.universal-range-slider input[type="range"]::-ms-fill-upper {
    background: linear-gradient(90deg, var(--highlighting-color-02), var(--highlighting-color));
    border-radius: 3px;
}

/* Бегунок (важно: ширина 20px — должна соответствовать thumbWidth в JS) */
.universal-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--always-white);
    border: 2px solid var(--highlighting-color);
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.universal-range-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--always-white);
    border: 2px solid var(--highlighting-color);
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.universal-range-slider input[type="range"]::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--always-white);
    border: 2px solid var(--highlighting-color);
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.universal-range-slider input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.1);
}
.universal-range-slider input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.1);
}
.universal-range-slider input[type="range"]:active::-ms-thumb {
    transform: scale(1.1);
}

/* Пузырёк с текущим значением */
.universal-range-slider-bubble {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(0);
    background: #4e73df;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: none;
}

/* Подписи к мин/макс отображаемым значениям */
.universal-range-slider-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: #777;
}

.universal-range-slider-scale-min,
.universal-range-slider-scale-max {
    /* при необходимости можно отдельно стилизовать */
}

.description {
    margin: 0.333rem 0;
    font-size: 85%;
    opacity: 0.6;
    line-height: 120%;
    color: var(--input-text-color);
}
.form-description {
    font-size: 85%;
    opacity: 0.6;
    margin-top: -0.667rem;
    line-height: 120%;
    color: var(--input-text-color);
}
.form-type-checkbox .form-description, .form-checkbox-description {
    padding-right: 3.333rem;
}
.form-item-description {
    font-size: 85%;
    opacity: 0.6;
    margin-top: -2rem;
    line-height: 120%;
    color: var(--input-text-color);
}
.form-item-disabled, input:disabled, select:disabled{
    opacity: 0.7;
}
.form-input-description, .checkbox-label-description {
    font-size: 85%;
    opacity: 0.6;
    margin-top: 0.333rem;
    line-height: 120%;
    color: var(--input-text-color);
}
.form-item-submit {
    margin: 1.333rem 0;
}
.form-item-submit.form-item-submit-some {
    display: flex;
    flex-direction: row-reverse;
}
.form-item-submit input {
    font-size: 1.2rem;
    font-family: 'Montserrat', sans-serif;
}
.form-item-submit button {
    font-family: 'Montserrat', sans-serif;
    padding: 1.2rem 1.333rem;
    border-radius: 0.333rem;
    background: var(--input-bg-color);
    color: var(--input-text-color);
    outline: none;
    -webkit-box-shadow: 0 0 1.133rem -0.2rem var(--shadow-input-color);
    -moz-box-shadow: 0 0 1.133rem -0.2rem var(--shadow-input-color);
    box-shadow: 0 0 1.133rem -0.2rem var(--shadow-input-color);
    border: 1px solid var(--input-border-color);
    margin-right: 1rem;
}
.form-item-submit button i {
    font-size: 1.2rem;
}
.form-info-items {
    opacity: 0.8;
    font-size: 0.867rem;
}
.form-info-item {
    margin: 0.333rem 0;
}
.form-info-item.form-info-item-calltome {
    margin: 0.8rem 0;
}
.form-info-item.form-info-item-resender-btn {
    margin: 1.333rem 0;
    text-align: center;
}
.form-info-item-error {
    color: var(--error-color);
}
.form-item-edit-link {
    position: absolute;
    right: 0.667rem;
    top: 50%;
    transform: translateY(-50%);
    text-decoration: underline;
    font-size: 0.933rem;
}
input.disabled {
    opacity: 0.55;
}
.form-item.error, .form-item.error input, .form-item.error select {
    color: var(--error-color) !important;
}
.form-item.error input {
    border-color: var(--error-color) !important;
}
input.error, select.error, textarea.error {
    color: var(--error-color) !important;
    border-color: var(--error-color) !important;
}
.error-text {
    color: var(--error-color);
}
.form-type-link a{
    padding: 0.333rem 0 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}
.form-type-link {
    position: relative;
    z-index: 0;
}
.form-type-link .form-description {
    position: relative;
    z-index: 1;
}
.form-type-btn a{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.form-type-btn  .form-description {
    margin-top: 0.333rem;
}
.form-type-btn .form-type-btn-ico {
    margin-left: 0.667rem;
}
.form-item-disable {
    opacity: 0.5;
}
.form-item-saved {
    position: relative;
}
.form-item-saved:before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    opacity: 0.6;
    z-index: 1;
}
.form-item-saved:after{
    position: absolute;
    content: "Сохранено";
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
}
.form-item textarea {
    resize: none;
    min-height: 8rem;
    margin: 0.333rem 0;
}
.form-type-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.form-type-text-value {
    font-size: 85%;
}
.form-type-text-value-on {
    color: var(--highlighting-color);
}
.form-type-text-value-error {
    color: var(--error-color);
}
.form-item .iti {
    width: 100%;
}
.form-item .iti .iti__country-container *{
    transition: 0s;
}
.form-item-phone-iti label{
    z-index: 2;
    left: 3.8rem;
}
.form-item-phone-iti-transgorm .iti__country-container{
    display: none;
}
.form-item-phone-iti .iti__tel-input {
    font-size: 150%;
}
.iti-counrys-list-item-name {
    flex: 1 0;
    padding: 0 1rem;
}
.iti-counrys-list-item-code {
    font-weight: 700;
}
.iti-counrys-list {
    position: relative;
}
.iti-counrys-list-search {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    margin-bottom: 1rem;
}
.iti-counrys-list-search .form-item {
    margin-bottom: 0;
}
.iti-counrys-list-item {
    padding-left: 0.333rem !important;
    padding-right: 0.333rem !important;
}
.form-type-textfield-with-btns {
    position: relative;
}
.form-type-textfield-with-btns input {
    padding-right: 7rem;
}
.form-type-textfield-with-btns .form-type-textfield-btns {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.333rem;
    font-size: 1.467rem;
    display: flex;
    opacity: 0.8;
}
.form-type-textfield-with-btns .form-type-textfield-btn {
    padding: 0.467rem 1rem;
    display: block;
}
.theme-dark .flatpickr-calendar, .theme-dark .flatpickr-months .flatpickr-month, .theme-dark span.flatpickr-weekday, .theme-dark .flatpickr-current-month .flatpickr-monthDropdown-months {
    background-color: var(--input-bg-color) !important;
}


.page {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
	position: relative;
}
.container {
    width: 100%;
    max-width: 1450px;
    padding: 0 1rem;
    margin: auto;
}
.incenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10011;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-top: var(--safe-area-inset-top-redefined);
	padding-bottom: var(--safe-area-inset-bottom-redefined);
	padding-left: 15px;
	padding-right: 15px
}
.hidden {
    display: none;
}
.alert-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-color);
    z-index: 998;
}
.alert-windows, .alert-content {
    background: var(--bg-color);
    padding: 1.333rem;
    border-radius: 0.667rem;
    max-width: 43.333rem;
    min-width: 20rem;
    z-index: 999;
}
.alert-title {
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-separator-color);
}
.alert-close {
    margin-top: 2rem;
    text-align: center;
}
.alert-text {
    margin: 3.333rem 0;
}
.alert-buttons {
    margin-top: 1.333rem;
    display: flex;
    align-items: center;
}
.alert-buttons > * {
    margin: 0 0.667rem;
    width: 100%;
    text-align: center;
    padding: 1rem 0.333rem;
}
.alert-content {
    background: none;
}
.spoiler-block {
    transition: none !important;
}
.spoiler-title {
    cursor: pointer;
    position: relative;
    padding-right: 2.667rem;
}
.spoiler-title h4 {
    margin: 0;
    padding: 1rem 0;
}
.spoiler-title:after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    position: absolute;
    top: 50%;
    right: 0.667rem;
    transform: translateY(-50%);
    color: var(--input-text-color);
}
.spoiler-block.open .spoiler-title:after {
    content: "\f077";
}
.spoiler-content {
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
    position: relative;
}
.spoiler-block.open .spoiler-content {
    height: auto;
}
.spoiler-block.open {
    position: relative;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}
.spoiler-block.open:before {
    content: "";
    position: absolute;
    top: 0rem;
    left: -0.667rem;
    height: 100%;
    width: calc(100% + 1.333rem);
    background: var(--btn-light-bg-color);
    opacity: 0.5;
    border-radius: 0.467rem;
}
.btn {
    padding: 0.8rem 1rem;
    border-radius: 0.667rem;
    background: var(--btn-light-bg-color);
    cursor: pointer;
}
.btn-block {
    display: block;
    margin: 0.667rem;
    width: fit-content;
}
.btn-block-fw {
    display: block;
    width: 100%;
}
.btn-more {
    width: 100%;
    text-align: center;
    opacity: 0.6;
    padding: 0.8rem;
}
.btn-block-center {
    display: block;
    margin: 0.667rem auto;
    width: fit-content;
}
.btn.active {
    background: var(--highlighting-color);
    color: var(--always-white);
}
.btn.disable {
    opacity: 0.5;
}
.btn-warn {
    background: var(--error-color);
    color: var(--always-white) !important;
}
.inoneline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-list {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-separator-color2);
}
.item-list-big{
    padding: 2rem 0;
    border-bottom: 1px solid var(--border-separator-color2);
}
.owl-carousel {
}
.owl-stage {
    display: flex;
}
.owl-nav.disabled {
    display: none;
}
.owl-carousel.owl-hidden {
    opacity: 1;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000000;
}
.loader:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 1;
}
.loader.loader-block {
    position: absolute;
    height: 100%;
    z-index: 100;
}
.loader.loader-no-bg:after {
    background: none;
}
.loader.loader-op-bg:after {
    opacity: 0.8;
}
.loader-inner {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.loader.hide-animation {
    animation: shrinkToCenter 0.5s forwards;
}
.loader-text {
    margin-top: 0.667rem;
    font-size: 90%;
    opacity: 0.85;
}
.loader-subText {
    margin-top: 0.333rem;
    font-size: 80%;
    opacity: 0.85;
}
.popup-content > .loader.loader-block {
    position: fixed
}
@keyframes shrinkToCenter {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
.spinner {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    background: linear-gradient(0deg, var(--highlighting-color-02) 33%, var(--highlighting-color) 100%);
    box-sizing: border-box;
    animation: spinnerRotation 1s linear infinite;
}
.spinner::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2.933rem;
    height: 2.933rem;
    border-radius: 50%;
    background: var(--bg-color);
}
.loader-very-small .spinner {
    width: 1.467rem;
    height: 1.467rem;
}
.loader-very-small .spinner::after  {
    width: 1.2rem;
    height: 1.2rem;
}
.loader-small .spinner {
    width: 2.8rem;
    height: 2.8rem;
}
.loader-small .spinner::after  {
    width: 2.533rem;
    height: 2.533rem;
}
@keyframes spinnerRotation {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg)}
}
.popup-window {
    display: block;
    position: fixed;
    bottom: -100%;
    left: 0;
    z-index: 200;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    transition: bottom 0.3s ease-out;
}
.popup-window.show {
    bottom: 0;
}
.popup-window.hide {
    bottom: -100%;
    transition: bottom 0.3s ease-in;
}
.popup-window-inner {
    display: flex;
    flex-direction: column;
}
.popup-window-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.333rem;
    border-bottom: 2px solid var(--border-separator-color);
}
.popup-window-close {
    display: block;
    padding: 2rem 1.667rem;
    font-size: 1.467rem;
}
.popup-window-title {
    font-weight: 500;
    padding-right: 1.667rem;
    flex: 1 0;
    font-size: 1.2rem;
}
.popup-window-content {
    flex: 1 0;
}
.reloaderPage {
    position: fixed;
    z-index: 9999;
    top: -6.667rem;
    display: none;
    left: 50%;
    margin-left: -1.333rem;
    font-size: 1.467rem;
    width: 2.667rem;
    height: 2.667rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-color);
    color: var(--highlighting-color);
}
.reloaderPage-inner {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reloaderPage.rotate .reloaderPage-inner {
    animation: spin 0.5s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.table-list {
}
.table-list-item {
    display: flex;
    flex-wrap: wrap;
    margin: 0.533rem 0;
    padding-bottom: 0.533rem;
    border-bottom: 1px solid var(--shadow-input-color);
    font-size: 85%;
    gap: 0.667rem;
    justify-content: space-between;
    align-items: center;
}
.table-list-item-title {
    font-weight: 700;
}
.table-list-item-value {
    text-align: right;
    flex-grow: 1;
    white-space: pre-line;
}
.table-list-item-value-sub {
    margin-top: 0.333rem;
    opacity: 0.7;
}
.item-being-copied {
    cursor: pointer;
}
.overlap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-color);
	opacity: 0.8;
}


.pages {
    position: relative;
    width: 100%;
    height: 100%;
}
.page-inner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}
.page-inner.active {
    display: block;
}
.scroll-element {
    height: 100%;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: auto;
    position: relative;
    padding-top: 4rem;
	padding-bottom: calc(var(--safe-area-inset-bottom-redefined) + 65px);
}




.popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: 10010;
	padding-top: var(--safe-area-inset-top-redefined);
	padding-bottom: var(--safe-area-inset-bottom-redefined);
	display: flex;
	justify-content: center;
	align-items: center;
}
.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-color);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.popup-inner {
    transform: translateY(150%);
	transition: transform 0.3s ease-in-out;

	width: 100%;
	max-width: 650px;
	padding: 1.333rem;
	border-radius: 0.667rem;
	background: var(--bg-color);

	display: flex;
	flex-direction: column;
	min-height: 30vh;
	overflow: hidden;

	max-height: 100%;
}
.popup-full .popup-inner {
    height: 100%;
}
.popup-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.333rem;
    background: var(--bg-color);
    display: flex;
    flex-direction: column;
}
.popup.open {
    visibility: visible;
    pointer-events: auto;
}
.popup.open .popup-overlay {
    opacity: 1;
}
.popup.open .popup-inner {
    transform: translateY(0);
}
.popup-top {
    border-bottom: 1px solid var(--border-separator-color);
    padding: 0 0 1rem;
    margin-bottom: 1rem;
}
.popup-top-icon {
    max-width: 2rem;
}
.popup-top-icon svg:nth-child(2) {
    display: none;
}
.popup.popup-on .popup-top-icon.popup-top-icon-switchable svg:nth-child(1) {
    display: none;
}
.popup.popup-on .popup-top-icon.popup-top-icon-switchable svg:nth-child(2) {
    display: block;
}
.popup-top-name {
    flex: 1 0;
    padding: 0 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.popup-top-name-main {
    font-weight: 600;
}
.popup-top-name-location {
    color:var(--main-black-color-op);
}
.popup-top a{
    display: block;
    font-size: 1.467rem;
    padding: 0.333rem 1rem;
}
.popup-top-btn.popup-top-btn-close {
    font-size: 1.867rem;
}
.popup-top-btn.active {
    color: var(--highlighting-color);
}
.popup-top-like-btn {
    color: var(--main-black-color-op);
}
.popup-top-like-btn.active {
    color: var(--highlighting-color);
}
.popup-content {
    flex-grow: 1;
    overflow-y: auto;
    position: relative;
    padding: 0;
}


/* Убеждаемся, что тост поверх всего */
pwa-toast {
  z-index: 99999 !important; 
  position: fixed; /* На всякий случай фиксируем позицию */
}

/* Настройка цветов (опционально, если стандартные не видно) */
pwa-toast::part(message) {
   /* Это доступ к внутренностям shadow dom, если браузер поддерживает */
   font-family: inherit;
}

/* pwa-elements используют CSS переменные для стилизации */
:root {
  --ion-safe-area-top: 20px;
  --ion-safe-area-bottom: 22px;
}


/* --- Custom Action Sheet (Web Fallback) --- */

/* Фон-подложка */
.as-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.4);
    
    /* Скрыто по умолчанию */
    opacity: 0;
    pointer-events: none; /* Чтобы не мешало кликать, пока невидно */
    
    transition: opacity 0.3s ease;
    
    /* Для центрирования на ПК */
    display: flex;
    align-items: flex-end; /* По умолчанию внизу (для мобилок) */
    justify-content: center;
}

/* !!! ВОТ ЭТОГО НЕ ХВАТАЛО !!! */
/* Активное состояние фона */
.as-backdrop.visible {
    opacity: 1;
    pointer-events: auto; /* Возвращаем возможность клика */
}

/* Современный блюр (если поддерживается браузером) */
@supports (backdrop-filter: blur(5px)) {
    .as-backdrop {
        background: rgba(0, 0, 0, 0.2); /* Чуть светлее, так как есть блюр */
        backdrop-filter: blur(6px);
    }
}

/* Контейнер самого меню */
.as-container {
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--main-white-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    
    /* Скрыто по умолчанию (сдвинуто вниз) */
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* Скругления для мобильной версии */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Заголовок и сообщение */
.as-header {
    padding: 16px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-separator-color2);
}

.as-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--main-black-color-op);
    margin-bottom: 4px;
    display: block;
}

.as-message {
    font-size: 0.9rem;
    color: var(--input-text-color);
    line-height: 1.4;
    display: block;
}

/* Кнопки */
.as-button {
    display: block;
    width: 100%;
    padding: 16px;
    background: transparent;
    border: none;
    font-family: inherit;
    border-bottom: 1px solid var(--border-separator-color);
    cursor: pointer;
    transition: background 0.2s;
    user-select: none; /* Чтобы текст не выделялся при клике */
    outline: none;
}

.as-button:last-child {
    border-bottom: none;
}

.as-button:active, .as-button:hover {
    background: var(--input-bg-color);
}

/* Стили типов кнопок */
.as-button.destructive {
    color: var(--error-color);
}

.as-button.cancel {
    font-weight: 600;
    color: var(--main-black-color);
    background: var(--bg-gradient-2-color);
}

/* --- ПК ВЕРСИЯ (Ширина больше 992px) --- */
@media screen and (min-width: 993px) {
    .as-backdrop {
        align-items: center; /* Центрируем по вертикали */
    }

    .as-container {
        width: 400px;
        border-radius: 12px;
        
        /* Начальное состояние для ПК */
        transform: scale(0.95);
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
        padding-bottom: 0;
        box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    }
}

/* --- АНИМАЦИИ ПОЯВЛЕНИЯ (Связь с JS классом .visible) --- */

/* Мобильная анимация при появлении */
@media screen and (max-width: 992px) {
    .as-backdrop.visible .as-container {
        transform: translateY(0);
    }
}

/* ПК анимация при появлении */
@media screen and (min-width: 993px) {
    .as-backdrop.visible .as-container {
        transform: scale(1);
        opacity: 1;
    }
}

.md-text {
  /* Defaults for "my" bubble */
  --tmss-msg-fg: var(--main-black-color);
  --tmss-msg-fg-muted: rgba(25, 27, 36, 0.70);
  --tmss-msg-link: var(--link-color);
  --tmss-msg-link-underline: rgba(0, 102, 204, 0.35);

  --tmss-msg-phone: var(--link-color);

  --tmss-msg-inline-code-bg: rgba(0, 0, 0, 0.10);
  --tmss-msg-inline-code-border: rgba(0, 0, 0, 0.10);

  --tmss-msg-pre-bg: rgba(0, 0, 0, 0.05);
  --tmss-msg-pre-border: rgba(0, 0, 0, 0.10);

  --tmss-msg-quote-bg: rgba(0, 0, 0, 0.10);
  --tmss-msg-quote-border: rgba(0, 0, 0, 0.18);

  --tmss-msg-hr: rgba(0, 0, 0, 0.12);
}

/* 1) Base container .tmss-msg .tmss-msg-inner .tmss-msg-message-text */
.md-text {
  font-family: inherit !important;
  font-size: 0.95rem !important;          /* соответствует .tmss-msg-message */
  line-height: 1.45 !important;
  color: var(--tmss-msg-fg) !important;

  /* переносы */
  white-space: normal !important;         /* не pre-line, т.к. markdown-it делает <br> */
  overflow-wrap: anywhere !important;
  word-break: break-word !important;

  /* чтобы не ломали внешние стили */
  text-align: left !important;
}

/* 2) Paragraphs */
.md-text p {
  margin: 0 0 0.55rem 0 !important;
  padding: 0 !important;
  color: inherit !important;
}
.md-text p:last-child {
  margin-bottom: 0 !important;
}

/* 3) Basic inline emphasis */
.md-text strong,
.md-text b {
  font-weight: 700 !important;
  color: inherit !important;
}

.md-text em,
.md-text i {
  font-style: italic !important;
  color: inherit !important;
}

.md-text s,
.md-text del,
.md-text strike {
  text-decoration: line-through !important;
  opacity: 0.75 !important;
}

/* 4) Links (URL + email) */
.md-text a {
  color: var(--tmss-msg-link) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--tmss-msg-link-underline) !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

/* explicit classes from your renderer */
.md-text a.tmss-msg-link {
  color: var(--tmss-msg-link) !important;
}

.md-text a.tmss-msg-phone-link {
  color: var(--tmss-msg-phone) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-color: var(--tmss-msg-link-underline) !important;

  /* важно: nowrap иногда делает горизонтальный скролл.
     Тут компромисс: не запрещаем перенос полностью, но разрешаем аккуратно переноситься. */
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* 5) Headings */
.md-text h1,
.md-text h2,
.md-text h3 {
  margin: 0.85rem 0 0.45rem 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: inherit !important;
}

.md-text h1 {
  font-size: 1.25rem !important;
  border-bottom: 1px solid var(--tmss-msg-hr) !important;
  padding-bottom: 0.35rem !important;
}

.md-text h2 {
  font-size: 1.12rem !important;
}

.md-text h3 {
  font-size: 1.02rem !important;
}

/* 6) Blockquote */
.md-text blockquote {
  margin: 0.7rem 0 !important;
  padding: 0.65rem 0.8rem !important;

  border-left: 3px solid var(--tmss-msg-quote-border) !important;
  background: var(--tmss-msg-quote-bg) !important;
  border-radius: 0.45rem !important;

  color: inherit !important;
}
.md-text blockquote p {
  margin: 0 !important;
  color: inherit !important;
  opacity: 0.95 !important;
}

/* 7) Lists */
.md-text ul,
.md-text ol {
  margin: 0rem 0 0.75rem 0 !important;
  padding: 0 0 0 1.35rem !important;
  color: inherit !important;
}

.md-text li {
  margin: 0.25rem 0 !important;
  padding: 0 !important;
}

.md-text li p {
  margin: 0.25rem 0 !important; /* чтобы внутри li не было огромных дыр */
}

/* 8) Inline code */
.md-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 0.90em !important;
  font-weight: 600 !important;

  color: inherit !important;
  background: var(--tmss-msg-inline-code-bg) !important;
  border: 1px solid var(--tmss-msg-inline-code-border) !important;

  padding: 0.15rem 0.35rem !important;
  border-radius: 0.35rem !important;

  /* чтобы код красиво переносился в узких пузырях */
  white-space: break-spaces !important;
  cursor: pointer;
}

/* 9) Code block (если включишь ``` или markdown-it его даст) */
.md-text pre {
  margin: 0.75rem 0 !important;
  padding: 0.75rem 0.8rem !important;

  background: var(--tmss-msg-pre-bg) !important;
  border: 1px solid var(--tmss-msg-pre-border) !important;
  border-radius: 0.55rem !important;

  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.md-text pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
}

/* 10) Horizontal rule (на всякий) */
.md-text hr {
  border: none !important;
  border-top: 1px solid var(--tmss-msg-hr) !important;
  margin: 0.8rem 0 !important;
}

/* 11) Small text (если появится) */
.md-text small {
  color: var(--tmss-msg-fg-muted) !important;
  font-size: 0.85em !important;
}

/* 12) Prevent inherited crazy styles from global CSS frameworks */
.md-text * {
  max-width: 100% !important;
}

/* 13) Tables (Markdown table) */
.md-text table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0.75rem 0 !important;
  color: inherit !important;
  /* чтобы длинные значения не ломали пузырь */
  table-layout: fixed !important;
  font-size: 0.75rem;
}

.md-text thead {
  color: inherit !important;
}

.md-text th,
.md-text td {
  border: 1px solid var(--tmss-msg-hr) !important;
  padding: 0.4rem 0.55rem !important;
  vertical-align: top !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.md-text th {
  font-weight: 700 !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

.md-text tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* если таблица шире сообщения — дадим горизонтальный скролл */
.md-text table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 14) Line (*** -> <hr>) — если хочешь отличать от обычного hr */
.md-text hr {
  border: none !important;
  border-top: 1px solid var(--tmss-msg-hr) !important;
  margin: 0.8rem 0 !important;
}

/* 15) Link markdown + autolink (дополнительно, на всякий) */
.md-text a:visited {
  color: var(--tmss-msg-link) !important;
}

.md-text a:hover {
  text-decoration-color: var(--tmss-msg-link) !important;
}

#AUTH_LOGIN_OVERLAY {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
}

#AUTH_LOGIN_OVERLAY .am-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  background: #111;
  color: #fff;
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

#AUTH_LOGIN_OVERLAY .am-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

#AUTH_LOGIN_OVERLAY .am-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0 0 16px 0;
  line-height: 1.35;
}

#AUTH_LOGIN_OVERLAY .am-btn {
  display: inline-block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: var(--highlighting-color);
  color: #fff;
}

#AUTH_LOGIN_OVERLAY .am-btn:active {
  transform: translateY(1px);
}

.mainmenu {
    position: fixed;
    left: var(--safe-area-inset-left-redefined, 0px);
    right: var(--safe-area-inset-right-redefined, 0px);
    bottom: var(--safe-area-inset-bottom-redefined, 15px);
    z-index: 1001;
}
.mainmenu .container {
    height: 0;
    overflow: visible !important;
    position: relative;
    z-index: 2;
}
.mainmenu-inner {
    min-height: 0;
    max-height: 0; 
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 1rem;
    width: 480px;
    transition: max-height 0.2s ease-in-out, min-height 0.2s ease-in-out !important; 
    background: var(--main-menu-bg);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.mainmenu.open .mainmenu-inner {
    min-height: 60vh;
    max-height: 95vh;
}
.mainmenu-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: var(--overlay-color);
    z-index: 1;
    visibility: hidden; 
    transition: opacity 0.4s ease-in-out, visibility 0.4s !important;
}
.mainmenu.open .mainmenu-overlay {
    visibility: visible;
    opacity: 1;
}
.mainmenu-btn {
    position: absolute;
    bottom: 0;
    left: 1rem;
    width: 60px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--highlighting-color);
    color: var(--always-white);
}
.mainmenu-btn svg, .mainmenu-btn svg * {
    fill: var(--always-white);
}
.mainmenu.open .mainmenu-btn {
    background: var(--main-menu-bg);
    color: var(--main-black-color);
}
.mainmenu.open .mainmenu-btn svg, .mainmenu.open .mainmenu-btn svg *{
    fill: var(--main-black-color);
}
.mainmenu-btn-icon {
    width: 40%;
    aspect-ratio: 1 / 1;
}
.mainmenu-btn-icon svg {
    max-width: none;
}
.mainmenu-btn-icon-open {
    display: none;
}
.mainmenu.open .mainmenu-btn-icon-open {
    display: block;
}
.mainmenu.open .mainmenu-btn-icon-close {
    display: none;
}
.mainmenu-top {
    padding: 1rem;
    border-bottom: 1px solid var(--border-separator-color);
    margin-bottom: 1rem;
}
.mainmenu-content {
    flex: 1 0;
    padding: 0 1rem 1rem 1rem;
}
.mainmenu-bottom {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    text-align: right;
    padding: 1rem;
}
.mainmenu-versions {
    color: var(--main-black-color-op);
    font-size: 0.85rem;
}
.mainmenu-user-icon {
  font-size: 1.333rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--btn-light-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}
.mainmenu-user-info {
  flex: 1 0;
  overflow: hidden;
  margin-right: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.mainmenu-user-info-phone {
    font-size: 1rem;
    margin: 3px 0;
}
.mainmenu-sections-item, a.mainmenu-settings-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--btn-light-bg-color);
    border-radius: 1rem;
    overflow: hidden;
    margin: 1rem 0;
}
.mainmenu-sections-item i, a.mainmenu-settings-item i {
    margin-right: 10px;
}
.mainmenu-sections-item.active, a.mainmenu-settings-item.active {
    color: var(--always-white);
    background-color: var(--highlighting-color);
}
.mainmenu-sections-item, a.mainmenu-settings-item {
    margin: 1rem 0;
}
.mainmenu-sections-item .form-item {
    margin: 0;
}
.theme-change {
    padding: 0.667rem 1rem;
    border-radius: 0.667rem;;
    background: var(--btn-light-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-change > div {
    width: 1.333rem;
    height: 1.333rem;
}
.theme-change-auto {
    display: block;
}
.theme-change-light, .theme-change-dark {
    display: none;
}
.theme-light .theme-change-auto, .theme-dark .theme-change-auto {
    display: none;
}
.theme-light .theme-change-dark, .theme-dark .theme-change-light  {
    display: none;
}
.theme-dark .theme-change-dark, .theme-light .theme-change-light {
    display: block;
}
.theme-change-light svg {
    stroke: var(--main-black-color);
}
.theme-change-dark svg {
    stroke: var(--main-black-color);
}

.userSettings-sections {
    margin: 1.2rem 0;
}
.userSettings-section-title {
    margin-bottom: 1rem;
    font-size: 120%;
    font-weight: 700;
}

.page-item {
    display: none;
    height: 100%;
    flex-direction: column;
}
.page-item.active {
    display: flex;
}
.page-item-title {
    font-weight: 700;
    font-size: 1.2rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-separator-color);
}
.page-content {
    flex:1 0;
    overflow-y: hidden;
}


.pin-container {
    text-align: center;
}
.pin-display {
    font-size: 4rem;
    margin-bottom: 1rem;
    letter-spacing: 0.5rem;
}
.pin-display.error {
    color: #FF0004;
}
.pin-display span {
    transition: color 0.5s ease, transform 0.5s ease;
}
.pin-display span.success {
    color: var(--highlighting-color);
    transform: scale(0.1);
}
.keypad {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    padding: 0 1rem;
}
.keypad button {
    display: block;
    width: calc(33% - 0.667rem);
    margin-bottom: 0.667rem;
    aspect-ratio: 1 / 1;
    font-size: 1.333rem;
    border-radius: 50%;
    border: none;
    background: var(--btn-light-bg-color);
    cursor: pointer;
}
.keypad button.delete, .keypad button.clear, .keypad button.repeat, .keypad button.fingerPrint {
    background: var(--btn-light-bg-color);
    opacity: 0.6;
}
.appAuth-container {
    z-index: 100000001;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--bg-color);
}
.alert.reboot-code {
    z-index: 100000002;

}
.appAuth {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.appAuth-inner {
    max-height: 100vh;
    overflow-y: auto;
    width: 23.333rem;
    padding-top: 1.333rem;
    padding-bottom: 1.333rem;
}
.appAuth-title {
    text-align: center;
    margin-bottom: 1.333rem;
}
.appAuth-bottom {
    margin-top: 1.333rem;
}
.appAuth-btn-notConfig, .appAuth-btn-reboot {
    display: block;
    max-width: 10.667rem;
    margin: 1rem auto 0.333rem;
    text-align: center;
}
.appAuth-bottom-desc {
    color: var(--main-black-color-op);
    text-align: center;
}