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: 1250px;
    padding: 0 1rem;
    margin: auto;
}
.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 .spoiler-content:before {
    content: "";
    position: absolute;
    top: 0.333rem;
    left: -0.667rem;
    height: calc(100% - 0.667rem);
    width: calc(100% + 1.333rem);
    background: var(--btn-light-bg-color);
    opacity: 0.4;
    border-radius: 0.467rem;
} */
.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;
}
.f-carousel__toolbar.is-absolute {
    margin-top: var(--safe-area-inset-top-redefined);
}

.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);
}
body.not-controller .scroll-element {
    padding-top: 1rem;
}
.home {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.home-locations {
    flex: 1 0;
    height: 100%;
    position: relative;
    z-index: 1;
}
.not-homes {
    padding: 1.333rem;
}
.home-locations > .owl-stage-outer, .home-locations > .owl-stage-outer > .owl-stage, .home-locations > .owl-stage-outer > .owl-stage > .owl-item{
    height: 100%;
}
.home-locations .location  {
}
.home-locations .location::-webkit-scrollbar,.home-locations .location:-webkit-scrollbar {
    display: none;
}
.home-info-top {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 20;
}
.home-info-top-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    opacity: 0;
    z-index: 1;
}
.home-info-top .home-info{
    position: relative;
    z-index: 2;
}
.home-top {
    position: absolute;
    top: 4rem;
    width: 100%;
    left: 0;
    z-index: 20;
}
.home-top-bg {
    background: var(--bg-color);
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 1;
    height: 100%;
    opacity: 0;
}
.home .scroll-element {
    padding-top: 7rem;
}
.home-top-inner {
    position: relative;
    z-index: 3;
}
.home-top-inner.sticky {
}
.home-name {
    font-size: 1.867rem;
    font-weight: 500;
}
.home-name-text {
    margin-right: 1rem;
}
.home-name-icon {
    flex: 1 0;
}
.home-address {
    color: var(--main-black-color-op);
    font-size: 1rem;
    overflow: hidden;
}
.home-title {
    overflow: hidden;
    padding-right: 1.333rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.home-title > * {
    width: 100%;
}
.home-offline {
    font-size: 1.2rem;
    color: rgba(220,0,3,1.00);
    margin-right: 0.333rem;
}
.page.sticky .home-address{
    height: 0;
}
.page.sticky .home-setting-btn {
    display: none;
}
.page.sticky .home-info-top{
    height: 4rem;
}
.page.sticky.active-home .home-info-top, .page.sticky.active-noti .home-info-top{
    height: 6.333rem;
}
.page.sticky.active-video .home-info-top, .page.sticky.active-support .home-info-top{
    height: 3rem;
}
.page.sticky .home-top{
    top: 1.5rem;
}
.page.sticky .home-locations-menu{
    height: 4rem;
}
.page.sticky .scroll-element {
    padding-top: 4.333rem;
}
.page.sticky .home .scroll-element {
    padding-top: 5.2rem;
}
.page.sticky .home-info-top-bg {
    opacity: 0.8;
}
.page.sticky.active-video .scroll-element, .page.sticky.active-support .scroll-element {
	padding-top: 3rem;
}


.address-suggestions {
    position: absolute;
    top: calc(100% + 0.667rem);
    left: 0;
    width: 100%;
    background: var(--input-bg-color);
    z-index: 5;
    padding: 0.667rem 0;
}
.address-suggestion-item {
    padding: 0.467rem 1rem;
    margin-bottom: 0.467rem;
    border-bottom: 1px solid var(--border-separator-color2);
    cursor: pointer;
}
.home-setting-btn a{
    display: block;
    font-size: 1.2rem;
    padding: 1rem;
}
.home.sticky .home-setting-btn{
    display: none;
}
.home-locations-menu {
    height: 3.4rem;
    overflow: hidden;
}
.locations-menu-item {
    cursor: pointer;
    white-space: nowrap;
    padding: 1.2rem 0;
    color: var(--main-black-color-op);
    font-weight: 600;
    display: block;
}
.locations-menu-items .swiper-slide {
    width: auto;
}
.locations-menu-item.active {
    color: inherit;
}
.locations-menu-item.active span {
    position: relative;
}
.locations-menu-item.active span:after {
    content: "";
    position: absolute;
    bottom: -0.533rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.4rem;
    height: 2px;
    background: var(--highlighting-color);
}
.locations-menu-item a:active{
    color: inherit;
}
.location-summary {
    margin-bottom: 0.667rem;
    margin-top: 1.333rem;
    display: none;
}
.summary-items {
    background: var(--btn-light-bg-color);
    padding: 1rem 1rem;
    border-radius: 0.667rem;
    -webkit-box-shadow: 0 0 0.533rem 0.133rem var(--shadow-color);
    -moz-box-shadow: 0 0 0.533rem 0.133rem var(--shadow-color);
    box-shadow: 0 0 0.533rem 0.133rem var(--shadow-color);
    overflow: hidden;
    width: 100%;
    position: relative;
    user-select: none;
    cursor: grab;
}
.summary-items-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
    transition: transform 0.1s ease-out;
    will-change: transform;
    padding-right: 1rem;
}
.summary-items-inner.dragging {
    cursor: grabbing;
    transition: none;
}
.summary-item {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    font-size: 80%;
    order: 50;
}
.summary-icon {
    width: 1.067rem;
    display: flex;
    margin-right: 0.333rem;
}
.summary-icon svg {
    width: 3.333rem;
    height: 3.333rem;
}
.summary-item-temperature {
    order: 1;
}
.summary-item-humidity {
    order: 2;
}
.summary-item-voc,.summary-item-co,.summary-item-co2 {
    order: 3;
}
.summary-item-luminosity {
    order: 10;
}
.summary-item-energy {
    order: 15;
}
.summary-item-lock  {
    order: 20;
}
.summary-item-alarm_flood {
    order: 20;
}
.summary-item-smoke {
    order: 25;
}
.summary-item-door {
    order: 26;
}
.summary-item-light {
    order: 30;
}
.summary-item-switch {
    order: 31;
}
.summary-item-socket {
    order: 32;
}
.summary-item-blinds {
    order: 33;
}
.summary-item-off {
    opacity: 0.4;
}
.summary-item.summary-item-off {
    order: 50 !important;
}
.summary-item.summary-item-light {
    margin-top: -0.2rem;
}
.add-new-constituent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 16.667rem;
    height: 16.667rem;
    border-radius: 50%;
    background: var(--btn-light-bg-color);
    -webkit-box-shadow: 0 0 0.533rem 0.133rem var(--shadow-color);
    -moz-box-shadow: 0 0 0.533rem 0.133rem var(--shadow-color);
    box-shadow: 0 0 0.533rem 0.133rem var(--shadow-color);
}
.add-new-constituent:hover {
    transform: translate(-50%,-50%) scale(0.99) !important;
}
.add-new-constituent-ico {
    font-size: 2.4rem;
    text-align: center;
}
.home-add-btn-main {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 16.667rem;
    height: 16.667rem;
}
.home-add-btn-main a {
    display: block;
    width: 100%;
    height: 100%;
}
.home-add-btn-main-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 13.333rem;
    text-align: center;
}
@keyframes pulseLoadingDevice {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.home-locations .location.skeleton-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
    margin-top: -2rem;
}
.home-locations .location.skeleton-loading .container {
    position: relative;
}
.home.loading .home-locations .location.skeleton-loading {
    display: block;
}
.skeleton-loading-top-menu {
    overflow: hidden;
    height: 2.667rem;
    white-space: nowrap;
}
.skeleton-loading-top-menu-item, .skeleton-loading-summary-inner {
    height: 2.667rem;
    margin-right: 1rem;
    background: var(--btn-light-bg-color);
    border-radius: 0.667rem;
    flex-shrink: 0;
}
.skeleton-loading-summary-inner {
    margin: 2rem 0 1rem 0;
}
.skeleton-loading-str {
    position: absolute;
    width: 5.333rem;
    height: 100%;
    background: var(--main-white-color-op);
    left: 0;
    top: 0;
    opacity: 0.3;
    animation: slide 1.5s ease-in-out infinite;
    z-index: 3;
}
@keyframes slide {
    0% { left: 0; }
    50% { left: calc(100% - 5.333rem); }
    100% { left: 0; }
}
.devices {
    padding-top: 1rem;
    position: relative;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(6, minmax(0px, 1fr));
	align-content: start;
}
.device {
    aspect-ratio: 1 / 1;
    position: relative;
}
.device-inner {
    width: 100%;
    height: 100%;
    background: var(--btn-light-bg-color);
    border: 2px solid var(--btn-light-bg-color);
    border-radius: 0.667rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.933rem;
    -webkit-box-shadow: 0 0 0.4rem 0.067rem var(--shadow-color);
    -moz-box-shadow: 0 0 0.4rem 0.067rem var(--shadow-color);
    box-shadow: 0 0 0.4rem 0.067rem var(--shadow-color);
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.device.device-on:not(.device-reverseStroke) .device-inner {
    border-color: var(--highlighting-color);
    -webkit-box-shadow: 0 0 0.4rem 0.067rem var(--shadow-highlighting-color);
    -moz-box-shadow: 0 0 0.4rem 0.067rem var(--shadow-highlighting-color);
    box-shadow: 0 0 0.4rem 0.067rem var(--shadow-highlighting-color);
}
.device.device-on.device-dangerous:not(.device-reverseStroke) .device-inner {
    border-color: var(--error-color);
    -webkit-box-shadow: 0 0 0.4rem 0.067rem var(--error-color);
    -moz-box-shadow: 0 0 0.4rem 0.067rem var(--error-color);
    box-shadow: 0 0 0.4rem 0.067rem var(--error-color);
}
.device-reverseStroke .device-inner {
    border-color: var(--highlighting-color);
    -webkit-box-shadow: 0 0 0.4rem 0.067rem var(--shadow-highlighting-color);
    -moz-box-shadow: 0 0 0.4rem 0.067rem var(--shadow-highlighting-color);
    box-shadow: 0 0 0.4rem 0.067rem var(--shadow-highlighting-color);
}
.device-dangerous.device-reverseStroke .device-inner {
    border-color: var(--error-color);
    -webkit-box-shadow: 0 0 0.4rem 0.067rem var(--error-color);
    -moz-box-shadow: 0 0 0.4rem 0.067rem var(--error-color);
    box-shadow: 0 0 0.4rem 0.067rem var(--error-color);
}
.device.device-on.device-reverseStroke .device-inner {
    border-color: var(--btn-light-bg-color);
    -webkit-box-shadow: 0 0 0.4rem 0.067rem var(--shadow-color);
    -moz-box-shadow: 0 0 0.4rem 0.067rem var(--shadow-color);
    box-shadow: 0 0 0.4rem 0.067rem var(--shadow-color);
}
.device.failure .device-inner {
    border-color: var(--error-color) !important;
    -webkit-box-shadow: 0 0 0.4rem 0.067rem var(--error-color) !important;
    -moz-box-shadow: 0 0 0.4rem 0.067rem var(--error-color) !important;
    box-shadow: 0 0 0.4rem 0.067rem var(--error-color) !important;
}
.device.failure .device-inner .device-value {
    color: var(--error-color) !important;
}

.device-top {
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    margin: 1rem;
    overflow-y: hidden
}
.device-icon, .device-failed-icon {
    width: 1.867rem;
    display: flex;
    align-items: center;
}
.device-icon.device-icon-switchable svg:nth-child(2) {
    display: none;
}
.device.device-on .device-icon.device-icon-switchable svg:nth-child(1) {
    display: none;
}
.device.device-on .device-icon.device-icon-switchable svg:nth-child(2) {
    display: block;
}
.device-value {
    position: relative;
    padding-left: 0.667rem;
}
.device-value-small {
    font-size: 0.667rem;
}
.device.device-multiSensor .device-top {
    align-items: flex-start;
}
.device-value-row {
    text-align: right;
    margin-bottom: 2px;
}
.device.device-multiSensor .device-value-small{
    font-size: inherit;
}
.device-top .battery-charge .battery-charge-ico {
    margin: 0 0 0 0.333rem;
}
.device .spinner::after {
    background: var(--btn-light-bg-color);
}
.device-bottom {
    flex: 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 1rem 1rem 1rem;
}
.device-bottom .device-location {
    display: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.device-name {
    font-weight: 600;
}
.location-like .device-bottom .device-location {
    display: block;
}
.clamp-text, .clamp-2-text, .clamp-3-text {
    line-height: 1.2;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
}
.device-location {
    margin-top: 0.2rem;
    color: var(--main-black-color-op);
}
.device.device-failed {
    opacity: 0.7;
}
.device-failed .device-icon {
    display: none;
}
.device-state {
    margin-bottom: 0.4rem;
    color: var(--main-black-color-op);
    height: 1rem;
    display: flex !important;
}
.device-state-left {
    overflow: hidden;
    margin-right: 0.2rem;
    text-transform: lowercase;
}
.device-state-right {
    flex: 1 0;
}
.device.device-icon-on .device-icon svg g {
    fill: var(--highlighting-color);
}

.sortable-devices-btns {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	padding: 10px 15px;
	gap: 15px;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
}
.sortable-devices-btns > a:not(.sortable-devices-close) {
	flex: 1 0;
	max-width: 350px;
	text-align: center;
}
.sortable-devices-close {
	font-size: 1.5rem;
	padding: 5px 15px;
}

/* Класс для элемента, который перетаскивается */
.sortable-drag {
    opacity: 1 !important;
    cursor: grabbing;
    transform: scale(1.05); /* Немного увеличим при перетаскивании */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	display: none !important; 
}

/* Класс для "призрака" - места, куда встанет элемент */
.sortable-ghost {
	transform: scale(0.94) !important;
}
.sortable-ghost {
	border: 2px dashed var(--highlighting-color);
}


/* Анимация покачивания в режиме редактирования */
.sortable-devices .device {
    animation: wiggle 0.5s infinite;
}

.device-sortable .device-top > div:not(.device-sortable-icon) {
	opacity: 0.2;
}
.device-sortable-icon {
	display: none;
}
.device-sortable .device-sortable-icon {
	display: block;
	position: absolute;
	top: 0;
	right: 0px;
	padding: 15px;
	font-size: 1.2rem;
}

/* Исправление для иконки ручки, чтобы её было проще схватить */
.device-sortable-icon, .popup-page-home-locations-item-icon {
    cursor: grab;
    touch-action: none; /* Важно для мобильных */
}
.device-sortable-icon i, .popup-page-home-locations-item-icon i {
    pointer-events: none;
}

@keyframes wiggle {
  0% { transform: rotate(0.5deg); }
  50% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0.5deg); }
}




/* =======================================================================================
   DND & SORTABLE CORE
   ======================================================================================= */

/* Индикатор вставки (Синяя полоска) */
.reorder-indicator-line {
    display: none;
    position: fixed;
    pointer-events: none;
    z-index: 20001; /* Выше призрака */
    background: var(--highlighting-color);
    border-radius: 2px;
    /* Размеры и позиция задаются через JS */
}

/* Призрак перетаскивания (для Devices и Locations) */
.drag-ghost {
    position: fixed !important;
    pointer-events: none;
    z-index: 20005 !important;
    opacity: 0.9;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    margin: 0 !important;
    transition: none !important;
    transform: none !important;
}

/* Специфика призрака для комнат */
.location-ghost {
    background: var(--bg-color);
    border: 1px solid var(--border-separator-color);
}

/* Заглушка (Placeholder) */
.device-placeholder, 
.location-placeholder {
    opacity: 0.3;
    background: rgba(0,0,0,0.05);
    border: 2px dashed var(--highlighting-color);
    border-radius: 0.667rem;
    visibility: visible !important;
}

/* =======================================================================================
   FOLDER STYLES
   ======================================================================================= */

/* Текст статуса кнопки внутри папки */
.device-folder .device-state {
    opacity: 0.75;
    text-transform: none;
    font-size: 0.85em;
}

/* Контейнер скрытых устройств внутри папки */
.folder-contents {
    display: none;
}

/* Визуализация цели (таргета) при наведении для создания папки */
/*.device.folder-target, 
.device-folder.folder-target {
    box-shadow: 0 0 0 3px var(--highlighting-color);
    transform: scale(1.02);
    transition: all 0.2s;
}*/
.device.folder-target .device-inner, 
.device-folder.folder-target .device-inner {
    border-style: dashed;
    border-color: var(--highlighting-color) !important;
    
    transition: all 0.2s;
}


/* Кнопка удаления (крестик) на устройстве в режиме редактирования */
.folder-remove-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    color: #fff;
    background: var(--error-color);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.folder-remove-btn i {
    font-size: 14px;
}

/* =======================================================================================
   POPUP STYLES
   ======================================================================================= */

/* Внутренности попапа папки */
.folder-popup-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* Сетка устройств внутри попапа */
.folder-grid.devices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr)) !important;
    gap: 1rem;
    align-content: start;
}

/* Адаптив сетки */
@media screen and (max-width: 768px) {
    .folder-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Попап сортировки комнат */
.sort-locations-popup {
    pointer-events: auto;
    z-index: 10010;
}

.sort-locations-content {
    position: relative;
    overflow-y: auto;
}

/* Ручка перетаскивания (гамбургер) */
.drag-handle {
    padding: 10px;
    cursor: grab;
}


















.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;
}
.popup-control-range {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 30rem;
    margin: 1rem auto -3.333rem;
    position: relative;
    z-index: 1;
}
.popup-control-range-btns {
    position: relative;
    margin-bottom: 1.333rem;
    z-index: 2;
}
.popup-control-mode-btns, .popup-control-state-btns {
    position: relative;
    margin-top: -0.667rem;
    margin-bottom: 2rem;
    z-index: 2;
}
.level-control {
    position: relative;
    width: 100%;
    max-width: 40rem;
    aspect-ratio: 1 / 1;
    background: rgba(41, 41, 41, 1.00);
}
.incenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.level-control-circle-center {
    width: 40%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.level-control-level {
    font-size: 1.467rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.667rem;
    width: 100%;
    text-align: center;
}
.level-control-title {
    font-size: 0.8rem;
    margin-bottom: 0.333rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.667rem;
    width: 100%;
    text-align: center;
}
.level-control-circle-1 {
    width: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0.867rem 0.2rem var(--shadow-highlighting-color);
    -moz-box-shadow: 0 0 0.867rem 0.2rem var(--shadow-highlighting-color);
    box-shadow: 0 0 0.867rem 0.2rem var(--shadow-highlighting-color);
}
.level-control-circle-1:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 50%;
    background: var(--highlighting-color);
    opacity: 0.2;
    -webkit-box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color);
    -moz-box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color);
    box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color);
}
.level-control-circle-1:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color) inset;
    -moz-box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color) inset;
    box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color) inset;
    border-radius: 50%
}
.level-control-risks {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-size: 0.8rem;
    color: var(--main-black-color-op)
}
.level-control-risk, .level-control-risk-level {
    position: absolute;
    transform-origin: center center;
}
.level-control-risk-small {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--main-black-color-op)
}
.level-control-risk-big {
    width: 0.533rem;
    height: 2px;
    border-radius: 0.133rem;
    background: var(--main-black-color-op)
}
.level-control-risk-level {
    font-size: 0.933rem;
    white-space: nowrap;
}
.rs-control svg {
    height: inherit !important;
    width: auto;
    max-width: none;
}
.rs-control * {
    transition: 0s;
}
.rs-disabled {
    opacity: 1;
}
.level-control-highligt-inner.rs-svg-mode .rs-range {
    stroke: var(--highlighting-color);
}
.level-control-highligt-inner .rs-handle {
    background: var(--highlighting-color);
}
.level-control-main-control.rs-svg-mode .rs-range {
    stroke: rgba(255,0,4,0);
}
.level-control-main-control .rs-handle {
    background: rgba(255,0,4,0);
}
.level-control-highligt-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--bg-color) 84%, var(--bg-color) 100%);
}
.popup-controls {
    position: relative;
    display: flex;
    flex-direction: column;
}
.popup-controls > div {
    order: 10;
}
.popup-controls .popup-control-range, .popup-controls .popup-control-range-btns, .popup-controls .popup-control-mode-btns {
    order: 0;
}
.popup-controls .popup-control-line-currentTemperature {
    order: 2;
}
.popup-controls .popup-control-line-currentMode {
    order: 2;
}
.popup-controls .popup-control-modes.popup-control-modes-modes {
    order: 1;
}
.popup-controls .popup-control-line-failure {
    order: 1;
}
.popup-controls .popup-control-line-failure .popup-control-line-title{
    color: var(--error-color);
}
.popup-controls.hide {
    height: 0;
    overflow: hidden !important;
}
.popup-control.disable {
    position: relative;
    opacity: 0.3;
}
.popup-control.disable:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
}
.popup-controls .loader.loader-block {
    justify-content:flex-end;
    align-items: flex-start;
    padding: 0.667rem;
}
.popup-control-line {
    padding: 2rem 0;
    border-top: 1px solid var(--border-separator-color);
}
.popup-control-line-bottom {
    border-top: none;
    border-bottom: 1px solid var(--border-separator-color);
}
.popup-control-line-title {
    flex: 1 0;
}
.popup-control-line-command-btn {
    display: block;
    padding: 0.667rem;
    background: none;
    border: none;
}
.popup-control-line-level {
    padding: 0 1rem;
}
.popup-control-line-switch {
    width: 4.667rem;
    height: 2rem;
    border-radius: 1rem;
    background: var(--btn-light-bg-color);
    -webkit-box-shadow: inset 0 0 0.267rem 0.067rem var(--shadow-highlighting-color), 0 0 0.267rem 0.067rem var(--shadow-highlighting-color);
    -moz-box-shadow: inset 0 0 0.267rem 0.067rem var(--shadow-highlighting-color), 0 0 0.267rem 0.067rem var(--shadow-highlighting-color);
    box-shadow: inset 0 0 0.267rem 0.067rem var(--shadow-highlighting-color), 0 0 0.267rem 0.067rem var(--shadow-highlighting-color);
    margin: 0 0.667rem 0 1rem;
    position: relative;
    cursor: pointer;
}
.popup-on .popup-control-line-switch {
    background: var(--highlighting-color);
}
.popup-control-line-switch:after {
    content: "";
    position: absolute;
    top: 0.333rem;
    left: 0.333rem;
    width: 1.333rem;
    height: 1.333rem;
    background: var(--always-white);
    border-radius: 50%;
    opacity: 0.6;
    transition: all 0.3s;
}
.popup-on .popup-control-line-switch:after {
    left: auto;
    right: 0.333rem;
    opacity: 1;
}
.popup-control-line-multiline .popup-control-line-command-btn {
    font-size: 1.2rem;
}
.popup-control-line-value {
    padding: 0 0.667rem;
}
.popup-control-line-commands-onoff button, .popup-control .popup-control-commands button{
    padding: 1rem 1.667rem;
    background: var(--btn-light-bg-color);
    border-radius: 0.667rem;
    margin-left: 1rem;
}
.popup-control-line-commands-onoff button.active, .popup-control .popup-control-commands button.active {
    background: var(--highlighting-color);
    color: var(--always-white);
    -webkit-box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color);
    -moz-box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color);
    box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color);
}
.popup-control .popup-control-commands{
    width: 100%;
    justify-content: center;
    margin-top: 2rem;
}
.popup-control .popup-control-commands button {
    margin: 0 1rem;
}
.popup-control-btns {
    width: 100%;
    max-width: 18.667rem;
    margin: 2rem auto 3.333rem;
    position: relative;
}
.popup-control-btns-circle-highlight {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    -webkit-box-shadow: 0 0 0.867rem 0.2rem var(--shadow-highlighting-color);
    -moz-box-shadow: 0 0 0.867rem 0.2rem var(--shadow-highlighting-color);
    box-shadow: 0 0 0.867rem 0.2rem var(--shadow-highlighting-color);
}
.popup-control-btns-circle-highlight:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--highlighting-color);
    opacity: 0.2;
    z-index: 1;
    border-radius: 50%
}
.popup-control-btns-circle-highlight:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color) inset;
    -moz-box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color) inset;
    box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color) inset;
    border-radius: 50%
}
.popup-control.active .popup-control-btns-circle-highlight:after {
    opacity: 0.8;
}
.popup-control-btns-circle-state {
    width: 65%;
    height: 65%;
    border-radius: 50%;
    background: var(--bg-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
.popup-control.active .popup-control-btns-circle-state:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color) inset;
    -moz-box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color) inset;
    box-shadow: 0 0 0.533rem 0.2rem var(--shadow-highlighting-color) inset;
    border-radius: 50%
}
.popup-control-btns-circle-state-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.667rem;
    width: 100%;
    text-align: center;
    font-weight: 600;
}
.popup-control-color {
    width: 100%;
    max-width: 18.667rem;
    margin: 3.333rem auto;
    position: relative;
}
.popup-control-color-circle-picker {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    -webkit-box-shadow: 0 0 0.867rem 0.2rem var(--shadow-highlighting-color);
    -moz-box-shadow: 0 0 0.867rem 0.2rem var(--shadow-highlighting-color);
    box-shadow: 0 0 0.867rem 0.2rem var(--shadow-highlighting-color);
    background: url("../images/rgb.png") no-repeat;
    background-size: cover;
}
.popup-control-color-circle-1 {
    width: calc(100% - 6.667rem);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--bg-color);
}
.popup-control-color-circle-1:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--highlighting-color);
    opacity: 0.4;
}
.popup-control-color-circle-state {
    width: calc(100% - 12rem);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--bg-color);
    transition: 0s;
}
.popup-control-color .rs-handle {
    background: var(--main-white-color);
    position: relative;
}
.popup-control-color .rs-handle:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 0.667rem;
    height: 0.667rem;
    border-radius: 50%;
    background: var(--main-black-color);
}
.horizontal-colorpicker, .horizontal-temppicker {
    position: relative;
    cursor: pointer;
}
.color-picker-horizontal {
    border-radius: 0.333rem;
}
.colorpicker-indicator, .temppicker-indicator {
    position: absolute;
    width: 0.267rem;
    height: 70%;
    top: 15%;
    background: #FFFFFF;
    pointer-events: none;
    border: 1px solid #fff;
    box-shadow: 0 0 2px rgba(255,255,255,0.70);
    box-sizing: border-box;
    transition: none;
}
.popup-history {
    min-height: 100%;
    padding: 0 0 1.667rem 0;
}
.popup-history-notitems {
    text-align: center;
    font-weight: 600;
    margin: 2.667rem 0;
}
.popup-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.popup-history-item.hide {
    display: none;
}
.popup-history-show-more {
    margin: 1.333rem auto;
    display: block;
}
.popup-history-item-name {
    flex: 1 0;
}
.popup-history-item-time {
    opacity: 0.6;
    font-size: 80%;
    margin-top: 0.2rem;
}
.popup-history-item-location {
    opacity: 0.6;
    font-size: 80%;
}
.popup-history-item-level {
    text-align: right;
}
.popup-history-item-level-item {
    padding: 0.333rem 0;
}
.popup-history-item-level-title {
    opacity: 0.6;
    font-size: 80%;
    margin-right: 0.333rem;
}
.popup-history-item-level-value-small {
    font-size: 80%;
}
.popup-history-item-device {
    flex: 1 0;
    margin-right: 1rem;
    overflow: hidden;
}
.history-showMore-loader {
    height: 5.333rem;
    width: 100%;
    position: relative;
}
.history-item-name-time {
    margin-bottom: 0.2rem;
    font-size: 90%;
}
.popup-history-item-name-date {
    font-size: 80%;
    opacity: 0.7;
}
.history-chart {
    min-height: 6.667rem;
    position: relative;
    margin-bottom: 2rem;
}
.history-chart #chartInner {
    height: 23.333rem;
    position: relative;
    border-radius: 0.667rem;
    overflow: hidden;
}
.history-chart #chartInner .no-data-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0.7;
}
.history-chart * {
    transition: none !important;
}
.history-chart-error {
    text-align: center;
}
.history-chart-reload {
    margin: 0.667rem auto;
}
svg.apexcharts-svg {
    max-width: none;
    border-radius: 0.667rem;
}
.history-chart #pager, .history-chart #pager-selects, .history-chart #pager-btns {
    display: flex;
    justify-content: flex-end;
    gap: 0.667rem;
}
.history-chart #pager{
    margin-top: 1rem;
}
.history-chart #pager-selects > * {
    max-width: 10rem;
    min-height: 2.667rem;
}
.history-chart #pager-btns button {
    max-width: 4.667rem;
    min-height: 2.667rem;
}
.history-chart #pager button:disabled {
    opacity: 0.5;
}
.history-chart #pager select {
    padding: 0 0.8rem;
    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);
}
.apexcharts-title-text {
    font-weight: 500 !important;
    padding: 0.333rem 0;
}
.form-type-changeType-item-icon {
    width: 1.2rem;
    margin-right: 0.667rem;
}
.form-type-changeType-items {
    gap: 1rem;
    padding: 0.667rem 0;
    font-size: 80%;
}
.form-item-device-changeType label {
    width: 100%;
    margin-bottom: 1rem;
}
.popup-top-name .battery-charge {
    opacity: 0.7;
    margin-top: 0.2rem;
    font-size: 90%;
}
.battery-charge-ico {
    margin-right: 0.333rem;
}
.battery-charge-ico.battery-charge-ico-low {
    color: rgba(220, 0, 3, 1);
    animation: batteryColorChange 0.8s infinite alternate;
}
@keyframes batteryColorChange {
    0% { opacity: 1; }
    100% { opacity: 0.5; }
}
.choosing-houses-item {
    padding: 1.667rem 0;
    border-bottom: 1px solid var(--border-separator-color2);
}
.choosing-houses-item.disable {
    opacity: 0.7;
}
.choosing-houses-icon {
    width: 2.667rem;
    height: 2.667rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--btn-light-bg-color);
}
.choosing-houses-item.active .choosing-houses-icon {
    background: var(--highlighting-color);
    color: var(--always-white);
}
.choosing-houses-name {
    flex: 1 0;
    padding: 0 1rem;
    overflow: hidden;
}
.choosing-houses-name-address {
    margin-top: 0.2rem;
    font-size: 90%;
    color: var(--main-black-color-op);
}
.choosing-houses-name-status {
    margin-top: 0.2rem;
    font-size: 90%;
    color: var(--error-color);
}
.choosing-houses-name-status-online {
    color: var(--highlighting-color)
}
.choosing-houses-add-new {
    margin: 1.667rem auto 0;
    display: block;
    max-width: 16.667rem;
    padding: 1rem 0.333rem;
    text-align: center;
}
.choosing-houses-settings {
    font-size: 120%;
    width: 2.333rem;
    text-align: center;
}
.home-controller-delete-code {
    color: var(--highlighting-color);
    font-weight: 700;
    display: block;
    margin: 0.667rem auto;
    text-align: center;
}
.dev-ico-small {
    width: 1.467rem;
    margin-right: 1rem;
}
.pingTest {
    position: fixed;
    right: 0.667rem;
    padding-top: var(-safe-area-inset-top-redefined);
    color: var(--main-black-color-op);
    font-size: 0.933rem;
    z-index: 9999999;
    top: 0.667rem;
}
.video-recorders-add {
    padding: 1.667rem;
    margin: 1.333rem auto;
    width: auto;
    display: block;
    max-width: 26.667rem;
    text-align: center;
}
.video-inner {
    position: relative;
}
.video-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}
.video-header-info {
    flex: 1 0;
    overflow: hidden;
    padding-right: 1.333rem;
}
.video-header-info-name {
    font-weight: 700;
}
.video-header-info-version {
    font-size: 90%;
    opacity: 0.7;
}
.video-cameras {
    gap: 1.6rem;
    padding-bottom: 1.333rem;
}
.video-item {
    position: relative;
    aspect-ratio:1.33/1;
    background: var(--btn-light-bg-color);
    border-radius: 1rem;
    overflow: hidden;
    width: calc(33.33% - 1.067rem);
}
.video-item.video-item-hidden {
    display: none;
}
.show-hidden-elements .video-item.video-item-hidden {
    display: block;
}
.video-header  a {
    margin: 0.333rem;
}
.video-header > div:last-child a {
    margin-right: 0;
}
.video-item-img {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.video-item-img img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.video-item-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: var(--main-white-color-op);
}
.video-item .loader-inner {
    position: absolute;
    top: 1rem;
    right: 1rem;
}
.video-item-img-not {
    width: 80%;
    text-align: center;
    font-size: 80%;
}
.video-js .vjs-progress-control > _, .video-js .vjs-time-control  >_ {
    display: none !important;
}
.video-error-server-text {
    font-weight: 700;
}
.video-error-server-btn {
    display: inline-block;
    margin-top: 1rem;
}
.video-show-app {
    display: block;
    max-width: 16.667rem;
    text-align: center;
    margin: 1.333rem auto 0;
}
.video-item-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0.7;
}
.video-js .vjs-big-play-button {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}
.video-show video {
    width: 100%;
}
.videoPlayer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999989;
    background: rgba(0,0,0,1.00);
}
.video-web {
    position: relative;
    width: 100%;
    min-height: 23.333rem;
}
.video-web .video-js {
    width: 100%;
}
.video-web video {
    width: 100%;
    display: block;
}
vds-playback-speed-menu {
    display: none !important;
}
.vjs-live .vjs-progress-control {
    display: flex !important;
}
.vjs-menu-button-popup .vjs-menu {
    left: auto;
    right: -4em;
    top: 0;
    width: 12em
}
.vjs-theme-sea .vjs-control-bar {
    background-color: hsla(0,0%,11%,0.40) !important;
}
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    background-color: hsla(0,0%,11%,0.40);
    bottom: 0;
}
.vjs-menu li {
    padding: 0.467rem 0.2rem;
    text-align: center;
    color: #FFFFFF !important;
}
.js-focus-visible .vjs-menu li.vjs-selected:hover, .vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover {
    color: rgba(57,57,57,1.00) !important;
}
.video-js.vjs-theme-sea .vjs-button:hover {
    color: rgba(255,255,255,1.00);
    background: linear-gradient(0deg,#212F42,#393939) !important;
}
.popup-top a.popup-top-btn-change-player {
    font-size: 80%;
    padding: 0 0.333rem;
    text-decoration: underline;
}
.plyr__control svg {
    height: var(--plyr-control-icon-size,1.2rem) !important;
}
.plyr--full-ui .plyr__control--overlaid {
    display: none !important;
}
.plyr__volume input[type="range"] {
    max-width: 4rem;
    min-width: 2rem;
}
.plyr--audio .plyr__controls {
    background-color: rgba(255,255,255,0.80) !important;
    border-radius: 0.467rem !important;
}
.plyr__controls {
    opacity: 1 !important;
    transition: none !important;
}
.video-web .plyr.plyr--loading + .video-web-loader  {
    display: block !important;
}
.loader-video {
    width: 2.133rem;
    height: 2.133rem;
    border: 0.267rem solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: animVideoloader 1s linear infinite;
}
@keyframes animVideoloader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.popup-top a.popup-top-btn-changeFormat {
    font-size: 0.933rem;
    text-decoration: underline;
    text-transform: uppercase;
}
:root {
    --plyr-color-main: var(--highlighting-color);
}


.mainmenu {
    position: fixed;
    bottom: var(--safe-area-inset-bottom-redefined);
    left: 50%;
	transform: translateX(-50%);
    height: 50px;
    z-index: 10000;
	max-width: 500px;
	width: 100%;
}
.mainmenu-items {
    display: flex;
    justify-content: space-between;
    height: 50px;
    margin: 0 auto;
    width: calc(500px - 30px);
	border-radius: 25px;
    background: var(--main-menu-bg);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
		
}
.mainmenu-overlay {
	position: fixed;
	bottom: var(--safe-area-inset-bottom-redefined);
	opacity: 0;
	overflow: hidden;
	background: var(--overlay-color);
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	transform: scale(0);
	transform-origin: 50% calc(100vh - 50px);
	border-radius: 50%;
	transition: transform 0.13s ease-out, opacity 0.13s ease-out, border-radius 0.13s ease-out;
	z-index: 9999;
}
.mainmenu.open-right-menu + .mainmenu-overlay {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
	border-radius: 0;
}
.open-right-menu .mainmenu-items {

}
.mainmenu-item {
    width: 20%;
}
.mainmenu-item a {
    width: 100%;
    height: 100%;
    padding: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainmenu-item a svg{
    opacity: 0.5;
}
.mainmenu-item a.disabled svg{
    opacity: 0.2;
}
.mainmenu-item a.active svg{
    opacity: 1;
}
.mainmenu-item a:hover {
    transform: none;
}
.mainmenu-item-icon {
    position: relative;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainmenu-item-support .mainmenu-item-icon {
    max-width: 16px;
}
.mainmenu-item-icon-open {
    display: none;
}
.open-right-menu .mainmenu-item .mainmenu-item-icon-open {
    display: block;
}
.open-right-menu .mainmenu-item .mainmenu-item-icon-close {
    display: none;
}
.open-right-menu .mainmenu-item.mainmenu-item-menu a{
    opacity: 1 !important;
}
.open-right-menu .mainmenu-item.mainmenu-item-menu a svg {
	opacity: 1 !important;
}
.mainmenu-item-nums {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0.333rem,-80%);
    font-size: 0.6rem;
    padding: 0.333rem;
    border-radius: 0.333rem;
    color: var(--always-white);
    background-color: var(--highlighting-color);
}

.mainmenu.open-right-menu {
	border-radius: 15px;
    background: var(--bg-color);
	height: calc(100% - var(--safe-area-inset-top-redefined) - var(--safe-area-inset-bottom-redefined));
	padding-bottom: calc(var(--safe-area-inset-bottom-redefined) + 65px);
}
.rightmenu, .rightmenu-overlay {
	display: none;
}
.mainmenu.open-right-menu .rightmenu {
	display: block;
}
/*
.rightmenu, .rightmenu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}
.rightmenu {
    visibility: hidden;
}
.rightmenu.open {
    visibility:visible;
}
.rightmenu-overlay {
    z-index: 1;
    background: var(--overlay-color);
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}
.rightmenu.open .rightmenu-overlay {
    opacity: 1;
}*/
.rightmenu {
	height: 100%;
	overflow-y: auto;
}
.rightmenu-inner {
	padding: 0 15px;
	display: flex;
    flex-direction: column;
	height: 100%;
    /*position: fixed;
    top: 0;
    right: 0;
    transform: translateX(33.333rem);
    width: 100%;
    max-width: 33.333rem;
    background: var(--bg-color);
    transition: transform 0.3s ease-in-out;
    z-index: 2;
    height: 100%;
    padding: 1.333rem 1.333rem 5.333rem 1.333rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;*/
}
.rightmenu.open .rightmenu-inner {
    transform: translateX(0);
}
.rightmenu-centre > div {
    justify-content: space-between;
    align-items: flex-start;
}
.rightmenu-icon {
    font-size: 1.333rem;
    margin-right: 1rem;
    display: flex;
    align-items: center;
}
.rightmenu-icon svg {
    width: 1.333rem;
}
.rightmenu-user {
    padding: 1.333rem 0;
    margin-bottom: 1.333rem;
    border-bottom: 1px solid var(--border-separator-color);
}
.rightmenu-user-icon {
    font-size: 1.333rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--btn-light-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rightmenu-user-login {
    flex: 1 0;
    overflow: hidden;
    margin-right: 1rem;
}
.rightmenu-user-login-phone {
    font-weight: 700;
    font-size: 1.333rem;
}
.rightmenu-user-login-phone a {
    padding-left: 0.333rem;
    font-size: 90%;
    opacity: 0.7;
}
.rightmenu-user-login-logout {
    display: inline-block;
    padding: 0.333rem 0;
}
.rightmenu-item {
    margin: 1.333rem 0;
}
.rightmenu-checkbox-item {
    margin: 0.667rem 0;
    width: 100%;
}
.rightmenu-checkbox-item .form-item {
    margin: 0;
}
.rightmenu-home {
    background: var(--btn-light-bg-color);
    padding: 1.667rem 1.333rem;
    border-radius: 1rem;
    width: 100%;
}
.rightmenu-home-info {
    flex: 1 0;
    overflow: hidden;
}
.rightmenu-home-info-name {
    font-weight: 600;
}
.rightmenu-home-info-address {
    font-size: 80%;
}
.rightmenu-home-settings {
    padding: 1.5rem 0.333rem;
}
.rightmenu-btn {
    padding: 1rem 1.5rem;
    background: var(--btn-light-bg-color);
    border-radius: 1rem;
    width: calc(50% - 0.667rem);
    overflow: hidden;
}
.rightmenu-item-allwidth {
    width: 100%;
}
.rightmenu-noti {
    width: 100%;
}
.rightmenu-bottom {
    margin-top: auto;
    padding-top: 1.333rem;
}
.rightmenu-versions {
    color: var(--main-black-color-op);
    font-size: 80%;
    display: flex;
    justify-content: flex-end;
    gap: 0.333rem;
    flex-wrap: wrap;
}
.update-app-now a{
    margin: 0.333rem auto;
    font-size: 80%;
}
.app-updates-progress {
    width: 100%;
    margin: 1rem 0;
    height: 3.667rem;
    background: var(--btn-light-bg-color);
    position: relative;
    border-radius: 0.667rem;
    overflow: hidden;
}
.app-updates-progress-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--highlighting-color);
}
.app-updates-progress-num {
    font-size: 90%;
}
.update-app-link-icon svg{
    max-width: 1.667rem;
}
.update-app-link-icon {
    margin-right: 0.667rem;
}
.rightmenu a.disable {
    opacity: 0.65;
}


/* ===== User Notifications ===== */

/* --- Кнопка в правом меню --- */
.user-notifications-menu-block {
    width: 100%;
    padding: 1.1rem 1.333rem;
    border-radius: 1rem;
    background: var(--btn-light-bg-color);
    overflow: hidden;
    position: relative;
}

.user-notifications-menu-block,
.user-notifications-menu-block:hover,
.user-notifications-menu-block:active {
    color: var(--main-black-color);
}

.user-notifications-menu-block .user-notifications-menu-icon {
    margin-right: 1rem;
    font-size: 1.333rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-notifications-menu-block .user-notifications-menu-icon svg {
    width: 1.333rem;
}

.user-notifications-menu-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.user-notifications-menu-title {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.user-notifications-menu-status {
    font-size: 80%;
    opacity: 0.7;
    line-height: 1.3;
}

.user-notifications-menu-status span {
    white-space: nowrap;
}

.user-notifications-menu-arrow {
    margin-left: 0.8rem;
    opacity: 0.55;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-notifications-menu-block-disabled {
    opacity: 0.7;
}

/* --- Popup уведомлений --- */
.user-notifications-popup .popup-content {
    padding-bottom: calc(var(--safe-area-inset-bottom-redefined) + 1.333rem);
}

.user-notifications-popup-warning {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 0.8rem;
    background: var(--btn-light-bg-color);
    border: 1px solid var(--input-border-color);
    color: var(--error-color);
    line-height: 1.35;
    font-size: 0.933rem;
}

.user-notifications-popup-section {
    margin-bottom: 2rem;
    padding: 1.2rem;
    border-radius: 1rem;
    background: var(--btn-light-bg-color);
    border: 1px solid var(--input-border-color);
}

.user-notifications-popup-section:last-child {
    margin-bottom: 0;
}

.user-notifications-popup-section h3 {
    margin: 0 0 1rem 0;
    font-size: 1.067rem;
    font-weight: 600;
}

.user-notifications-popup .form-item {
    margin: 1rem 0;
}

.user-notifications-popup .form-item:first-child {
    margin-top: 0;
}

.user-notifications-popup .form-item:last-child {
    margin-bottom: 0;
}

.user-notifications-popup .checkbox-label {
    padding: 0;
}

.user-notifications-popup .form-description {
    margin-top: 0.5rem;
    padding-right: 0;
    line-height: 1.35;
}

/* --- Подписки Push --- */
.user-notifications-popup-topics {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-separator-color2);
}

.user-notifications-popup-topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.667rem;
    margin-top: 1rem;
}

.user-notifications-topic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-width: 10.5rem;
    padding: 0.85rem 1rem;
    border-radius: 0.8rem;
    background: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
    box-shadow: 0 0 1.133rem -0.2rem var(--shadow-input-color);
    color: var(--main-black-color);
}

.user-notifications-topic-btn:hover,
.user-notifications-topic-btn:active {
    color: var(--main-black-color);
}

.user-notifications-topic-btn.active {
    background: var(--highlighting-color);
    border-color: var(--highlighting-color);
    color: var(--always-white);
}

.user-notifications-topic-btn.disable {
    opacity: 0.5;
    pointer-events: none;
}

.user-notifications-topic-btn-title {
    font-weight: 600;
    line-height: 1.2;
}

.user-notifications-topic-btn-state {
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

/* --- Вспомогательное --- */
.user-notifications-popup .form-item-disabled {
    opacity: 0.6;
}

.user-notifications-popup .hidden {
    display: none !important;
}

.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);
}
.notifications, .notifications-content {
    height: 100%;
}
.notifications-menu {
    position: absolute;
    top: 4rem;
    width: 100%;
    left: 0;
    z-index: 20;
}
.page.sticky .notifications-menu {
    top: 2.5rem;
}
.notifications .scroll-element {
    padding-top: 7.667rem;
}
.notifications-menu .notifications-menu-item {
    width: auto;
    display: block;
    padding: 0.667rem 0;
    cursor: pointer;
    white-space: nowrap;
    color: var(--main-black-color-op);
    font-weight: 600;
}
.notifications-content-item {
    min-height: 20rem;
    position: relative;
}
.notifications-menu .notifications-menu-item.swiper-slide-thumb-active {
    color: inherit;
}
.notifications-menu .notifications-menu-item span {
    position: relative;
}
.notifications-menu .notifications-menu-item.swiper-slide-thumb-active span:after {
    content: "";
    position: absolute;
    bottom: -0.533rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.4rem;
    height: 2px;
    background: var(--highlighting-color);
}
.notifications-menu .notifications-menu-item span[data-count] {
    padding-right: 10px;
}
.notifications-menu .notifications-menu-item span[data-count]::before {
    content: attr(data-count);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% + -8px);
    background: var(--highlighting-color);
    padding: 3px;
    border-radius: 50%;
    font-size: 0.65rem;
    color: var(--always-white);
    min-width: 16px;
    min-height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.notifications-loader {
    position: relative;
    height: 6.667rem;
    width: 100%;
}
.page.sticky .notifications-notices, .page.sticky .notifications-news {
    padding-top: 1rem;
}
.notifications-notices-item-ico {
    font-size: 1.2rem;
    margin-right: 1rem;
    color: var(--main-black-color-op);
    display: flex;
    align-items: center;
}
.notifications-notices-item-ico svg {
    width: 1.333rem;
}
.notifications-notices-item-ico svg g {
    fill: var(--main-black-color-op);
}
.notifications-notices-item-text {
    flex: 1 0;
}
.notifications-bottom {
    padding: 0.667rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
}
.notifications-date, .notifications-notices-item-created, .notifications-terms {
    width: 100%;
    text-transform: lowercase;
    text-align: right;
    padding: 0.667rem 0 0 0;
    font-size: 80%;
    color: var(--main-black-color-op);
}
.notifications-date {
    width: auto;
    padding: 0;
    margin-left: 1rem;
    flex: 1 0;
    text-align: right;
    white-space: nowrap;
}
.notifications-terms {
    width: auto;
    display: flex;
    gap: 5px;
    padding: 0;
    overflow: hidden;
}
.btn.news-cat-chip {
  padding: 8px;
  font-size: 0.75rem !important;
}
.notifications-notices-item-created {
    width: auto;
    padding: 0;
    margin-left: 1rem;
    text-align: right;
}
.notifications-empty {
    padding: 1.667rem 0;
    text-align: center;
    opacity: 0.8;
}
.mainmenu-item-count {
    padding: 0.333rem;
    position: absolute;
    top: -0.8rem;
    left: calc(100% - 0.533rem);
    background: var(--highlighting-color);
    font-size: 0.667rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.467rem;
    height: 1.467rem;
    color: var(--always-white);
    border-radius: 0.733rem;
}
.mainmenu-item-count.active {
    background: var(--warning-color);
}
.notifications-item {
    width: 100%;
    max-width: 40rem;
    margin: 1.667rem auto;
    background: var(--btn-light-bg-color);
    padding: 1rem;
    border-radius: 0.667rem;
    overflow: hidden;
}
.notifications-item .swiper-pagination {
    padding: 0.333rem;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.6) 50%, rgba(0,0,0,0) 100%);
    border-radius: 0.333rem;
}
.swiper-pagination-bullet-active {
    background: var(--highlighting-color)
}
.notifications-photos {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.667rem;
    margin-bottom: 1rem;
    position: relative;
}
.notifications-photo a,.notifications-photo a img {
    display: block;
}
.notification-loader {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto 1.667rem;
    height: 3.333rem;
    position: relative;
}
.notifications-text {
    font-size: 0.933rem;
}
.notifications-news-filters-wrap {
    margin: 15px auto;
    width: 100%;
    max-width: 40rem;
}
.custom-swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 10;
    transform: translateZ(10px);
}

.custom-bullet {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.custom-bullet:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.custom-bullet.active {
    background-color: var(--highlighting-color); 
    transform: scale(1.3);
}


.scenarios-item {
    position: relative;
}
.scenarios-item-click {
    flex: 1 0;
}
.scenarios-item-icon {
    width: 1.2rem;
}
.scenarios-item-name {
    padding: 0.667rem 1rem;
}
.scenarios-item-btns a{
    display: block;
    padding: 0.667rem 1rem;
    font-size: 1.2rem;
}
.scenario-device-item-info {
    flex-grow: 1;
}
.scenario-device-item-icon {
    flex-shrink: 0;
}
.scenario-device-item-dev {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}
.scenario-device-item-info {
    flex-grow: 1;
    overflow: hidden;
}
.scenario-device-item-info-dev {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}
.scenario-device-item-info-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scenario-device-item-info-subname {
    margin-top: 0.333rem;
    opacity: 0.8;
    font-size: 90%;
}
.scenario-device-item-info-delimetr,
.scenario-device-item-info-level {
    flex-shrink: 0;
}
.scenario-device-item-switchRGBW .scenario-device-item-info-level {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
}
.scenarios-item-disable .scenarios-item-icon, .scenarios-item-disable .scenarios-item-name, .scenarios-item-disable .scenarios-item-btn-play {
    opacity: 0.3;
}
.scenario-add-device-btns a {
    margin: 1.333rem 1rem 0 0;
}
.scenario-device-item-info-location {
    font-size: 80%;
    color: var(--main-black-color-op);
    margin-top: 0.333rem;
}
.scenario-device-item-info-delimetr {
    padding: 0 0.667rem;
}
.scenario-device-control-btn {
    display: block;
}
.scenario-device-control-level {
    width: 100%;
}
.scenario-device-control-item {
    margin: 1rem 0;
}
.scenario-device-control-on, .scenario-device-control-off {
    margin-right: 1rem;
}
.scenario-device-remove-btn {
    display: block;
    width: 4rem;
    text-align: center;
}
.scenario-device-remove {
    padding: 1rem 0;
    display: flex;
    justify-content: flex-end;
}
.scenario-device-control-item.active .btn {
    background: var(--highlighting-color);
    color: var(--always-white);
}
.scenario-device-control-level.active .range-slider, .scenario-device-control-level.active .scenario-device-controls-select-operator {
    border-color: var(--highlighting-color) !important;
}
.scenario-device-item-trigger .scenario-device-control-level {
    display: flex;
}
.form-item select.scenario-device-controls-select-operator {
    width: 5.333rem;
    margin-right: 1rem;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
.scenario-device-control-range {
    display: flex;
    align-items: center;
}
.scenario-device-control-range-value {
    padding-left: 0.667rem;
    min-width: 4rem;
}
.scenario-device-item-trigger .scenario-device-control-level .scenario-device-control-range {
    flex: 1 0;
}
.scene-logical-operator {
    padding: 1.333rem 0 0.667rem;
}
.scene-logical-operator-btns {
    margin-bottom: 1rem;
}
.scene-logical-operator-btns a {
    display: block;
    margin-right: 1rem;
}
.scene-logical-operator-description {
    font-size: 75%;
}
.scene-logical-operator-title {
    width: 100%;
    margin-bottom: 0.667rem;
    font-weight: 700;
}
.device-list-items:empty::before {
    content: "Нет Устройств";
    display: block;
    color: var(--main-black-color-op);
}
.addDevice-main .btn {
    display: block;
    max-width: 30rem;
    padding: 1.333rem 1.667rem;
}
.addDevice-icon-btn {
    margin-right: 0.667rem;
}
.addDevice-icon-off {
    display: none;
}
.addDevice-main .btn.active .addDevice-icon-off{
    display: inline-block;
}
.addDevice-main .btn.active .addDevice-icon-on{
    display: none;
}
.addDevice-loader {
    margin: 1.333rem 0;
    padding: 1rem;
    border-radius: 0.667rem;
    display: flex;
}
.addDevice-loader-text {
    margin-right: 1rem;
}
.btn.addDevice-secure.active {
    background: var(--btn-light-bg-color);
}
.ZWaveDeviceSettings .device-item-icon{
    width: 1.333rem;
    margin-right: 0.667rem;
}
.ZWaveDeviceSettings .device-item-id{
    margin-top: 0.333rem;
    font-size: 85%;
    opacity: 0.6;
}
.ZWaveDeviceSettings .device-item .form-item{
    margin: 1.333rem 0;
}
.ZWaveDeviceSettings .device-item .form-item.form-item-device-permanently_hidden{
    margin-bottom: 0;
}
.guestUser-form .spoiler-title {
    padding: 0 4rem 0 2.667rem;
}
.guestUser-form .spoiler-title:after {
    right: auto;
    left: 0;
}
.guestUser-form .location-devices {
    position: relative;
}
.guestUser-form .location-checkbox {
    position: absolute;
    top: 1.333rem;
    right: 0;
}
.guestUser-form .popup-page-home-device-item {
    position: relative;
}
.guestUser-form .popup-page-home-device-item.disable {
    opacity: 0.6;
}
.guestUser-form .device-checkbox{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.guestUsers-add-new .btn {
    margin: 1.667rem auto;
    text-align: center;
    padding: 1.667rem 1rem;
}
.guestUser-date-start {
    width: 50%;
    padding-right: 0.667rem;
}
.guestUser-date-end {
    width: 50%;
    padding-left: 0.667rem;
}
.guestUser-item-icon {
    font-size: 1.467rem;
}
.guestUser-item-info {
    padding: 0 1rem;
    flex: 1 0;
}
.guestUser-item-phone {
    opacity: 0.7;
    margin-top: 0.667rem;
}
.guestUser-item-role {
    opacity: 0.7;
    margin-top: 0.667rem;
    font-size: 80%;
}
.guestUser-item-timeInfo {
    display: block;
    margin-top: 0.333rem;
}
.guestUser-item-timeInfo.guestUser-item-timeInfo-active {
    position: relative;
}
.guestUser-item-timeInfo.guestUser-item-timeInfo-active:after {
    content: "";
    width: 0.533rem;
    height: 0.533rem;
    border-radius: 50%;
    background: var(--highlighting-color);
    position: absolute;
    top: 50%;
    left: -0.8rem;
    transform: translateY(-50%);
}
.home-tempUser-description-item {
    font-size: 100%;
}
.home-tempUser-description-item-2 {
    padding: 0.667rem 0;
}
.home-tempUser-description-time {
    padding: 0.2rem;
    font-size: 120%;
}
.guestUser-item-error {
    margin-top: 0.667rem;
    font-size: 80%;
    color: var(--error-color);
}
.guestUser-date-autoDelete {
    margin-top: 1rem;
}
.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: 10010;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--bg-color);
}
.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;
}
.scenario-device-item-remove {
    padding: 1rem;
}
.form-item-thermostat-devices .form-input-description, .form-item-thermostat-sensors .form-input-description {
    margin: -0.533rem 0 0.533rem 0;
}
.popup-page-home-device-item-name-child {
    display: block;
    margin-top: 0.333rem;
    opacity: 0.8;
    font-size: 90%;
}
.notices-device-list {
    margin: 0 0 2rem 0;
}
.notices-device .form-items-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notices-device-add-new {
    padding: 0.667rem 1rem;
    font-size: 1.733rem;
    display: none;
}
.device-list-item-spoiler-icon {
    margin-right: 0.667rem;
    font-size: 1.333rem;
}
.device-list-item-spoiler.open .device-list-item-spoiler-icon {
    color: var(--highlighting-color);
}
.device-list-item-spoiler-content > div {
    margin: 2rem 0;
}
.notices-device-users{
    margin: 0.333rem 0;
}
.notices-device-users, .notices-device-channels {
    opacity: 0.8;
    font-size: 90%;
}
.notices-device-child-title {
    font-size: 90%;
    margin: 0.467rem 0;
}
.btns-items {
    display: flex;
    flex-wrap: wrap;
}
.btns-block {
    display: flex;
    flex-wrap: wrap;
    gap: 0.667rem;
}
.btns-block a.btn {
    font-size: 90%;
}
.btns-items-center {
    justify-content: center;
}
.btns-items a.btn {
    margin: 0.667rem 0.667rem 0 0;
    font-size: 90%;
}
.notices-users-select-item span:nth-child(2) {
    display: block;
    opacity: 0.7;
    font-size: 80%;
    margin-top: 0.2rem;
    width: 100%;
    text-align: center;
}
.notices-users-select-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.notices-message-description {
    opacity: 0.7;
    font-size: 80%;
    margin-top: -1.667rem;
}
.notices-pre-title {
    margin-bottom: 0.333rem;
}
.notices-remove {
    text-align: right;
}
.notices-device-triggers-level {
    display: flex;
}
.notices-device-triggers-level-range, .notices-device-triggers-level-input {
    flex: 1 0;
    display: flex;
}
.form-item  .notices-device-triggers-level-operator {
    width: 5.333rem;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}
.notices-device-triggers-level {
    margin: 1rem 0 1.333rem 0;
}
.notices-device-triggers-level-range input, .notices-device-triggers-level input {
    margin: 0 0.667rem;
}
.notices-device-triggers-level-range-value {
    display: flex;
    align-items: center;
    min-width: 3.2rem;
    justify-content: center;
}
.notices-device .device-list-item.error .device-list-item-spoiler-icon, .notices-device .device-list-item.error .notices-device-title{
    color: var(--error-color);
}
.notices-device .loadingDotText, .notices-scenario .loadingDotText {
    padding: 1rem 0;
}
.notices-device-empty {
    padding: 1rem 0;
    opacity: 0.8;
    font-size: 80%;
}
.btn.yandex-integration-controller {
    width: 100%;
    margin: 1rem 0;
    position: relative;
    display: flex;
    padding-right: 4.667rem !important;
    flex-direction: column;
    justify-content: center;
    min-height: 5.333rem;
    border: 2px solid var(--btn-light-bg-color);
}
.btn.yandex-integration-controller.active {
    background: var(--btn-light-bg-color);
    border: 2px solid var(--highlighting-color);
}
.yandex-integration-controller-checkbox {
    position: absolute;
    top: 0;
    right: 0;
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.em-currentData-datas {
    margin: 1.333rem 0 0 0;
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    flex-wrap: wrap;
}
.em-currentData-data {
    width: calc(33.33% - 0.667rem);
    text-align: center;
}
.em-currentData-item-title  {
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.em-currentData-item-title-ico{
    width: 1.2rem;
    min-width: 1.2rem;
    margin-left: 0.667rem;
}
.em-currentData-data.em-currentData-data-summ {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    text-align: left;
    justify-content: flex-end;
    margin-top: 0.333rem;
}
.em-currentData-data.em-currentData-data-summ .em-currentData-data-name {
    padding-right: 0.467rem;
}
.em-currentData-data-state-scaleTitle {
    padding-left: 0.2rem;
    opacity: 0.7;
    font-size: 90%;
    display: none;
}
.em-currentData-data-summ .em-currentData-data-state-scaleTitle {
    display: inline-block;
}
.em-currentData-data-state-level {
    font-size: 110%;
}
.em-currentData-data:not(.em-currentData-data-summ) .em-currentData-data-name, .em-summary-item-main-item-scale, .em-summary-item-main-item-name {
    margin-top: 0.267rem;
    font-size: 85%;
    opacity: 0.7;
}
.em-currentData-data:not(.em-currentData-data-summ) {
    padding: 0.667rem;
    background: var(--btn-light-bg-color);
    border-radius: 0.667rem;
}
.em-currentData-item.item-list, .em-summary-item.item-list {
    padding: 1.333rem 0;
}
.history-chart-title h3 {
    margin-top: 0;
}
.history-chart-mm h3, .em-currentData h3 {
    font-size: 1.2rem;
}
.history-chart-mm h4, .em-currentData h4 {
    font-weight: 700;
}
.history-chart-mm .item-list:first-child, .em-currentData .item-list:first-child, .em-currentData .em-currentData-item.item-list.em-currentData-item-AP_energy {
    padding-top: 0;
}
.history-chart-mm hr, .em-currentData hr {
    margin: 1.333rem 0;
    height: 2px;
    background: var(--main-black-color);
    opacity: 0.4;
}
.em-summary-item-main {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    flex-wrap: wrap;
}
.em-summary-item-main-item {
    width: calc(33.33% - 0.667rem);
    text-align: center;
    padding: 0.667rem;
    background: var(--btn-light-bg-color);
    border-radius: 0.667rem;
    margin: 0 0 1.333rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.em-summary-item-main-item-name {
    text-transform: uppercase;
}
.em-summary-item-adv-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 1px dotted #ccc;
    padding: 0.333rem 0;
    font-size: 90%;
}
.em-summary-item-adv-item-name {
    padding-right: 0.667rem;
}
.em-summary-item-adv-item-level {
    padding-left: 0.667rem;
}
.em-summary-item-adv-item-level span:first-child{
    font-weight: 500;
}
.em-summary-item-adv-item-level span:nth-child(2){
    margin-left: 0.2rem;
}
.apexcharts-legend {
    overflow: hidden !important;
}
.em-summary-item-insufficientData {
    opacity: 0.7;
    font-size: 90%;
}
.em-settings-list {
    padding: 1rem 0;
}
.em-settings-list-item {
    display: flex;
    gap: 0.467rem;
    align-items: center;
    margin: 1rem 0
}
.em-settings-list-item-delete a {
    font-size: 1.733rem;
    padding: 0.667rem;
}
.module-form h4 {
    margin-bottom: 0.333rem;
}
.module-form .module-devices-list-add-device-btn {
    margin-top: 0.667rem;
    font-size: 80%;
}
.module-form .form-type-fieldset > h3 {
    margin:0 0 0.333rem 0;
}
.module-form .form-item:first-child {
    margin-top: 1rem;
}
.zigbee-device-item-image {
    width: 3.333rem;
    padding: 0.667rem;
    border-radius: 0.333rem;
    background: rgb(96, 96, 96);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}
.zigbee-device-item-info {
    flex: 1 0;
    overflow: hidden;
}
.zigbee-device-item-devices {
    margin: 0.533rem 0;
    color: var(--main-black-color-op);
    overflow: hidden;
}
.zigbee-device-item-other {
    display: flex;
    gap: 0.333rem;
    color: var(--main-black-color-op);
    font-size: 80%;
}
.zigbee-device-item-devices-n {
    margin-left: 0.333rem;
}
.zigbee-device-item-btns {
    margin: 1.667rem 0 1rem 0;
    justify-content: flex-end;
}
.popup-page-home-device-item-info {
    flex: 1 0;
}
.zigbee-device-add-tmr-inner {
    margin: 1.667rem 0;
    font-size: 2.4rem;
}
.zigbee-devices-filters {
    display: flex;
    justify-content: space-between;
}
.zigbee-devices-filters .form-item {
    margin: 0;
    width: calc(50% - 0.667rem);
}
.zigbee-devices-support-item {
    background: var(--btn-light-bg-color);
    border: 2px solid var(--btn-light-bg-color);
    border-radius: 0.667rem;
    margin: 1.333rem 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.zigbee-devices-support-item-left {
    width: 6.667rem;
    margin-right: 1rem;
}
.zigbee-devices-support-item-right {
    flex: 1 0;
    overflow: hidden;
}
.zigbee-devices-support-item .device-catalog, .zigbee-devices-support-item .device-vendor {
    color: var(--main-black-color-op);
    font-size: 85%;
    margin: 0.333rem 0;
}
.zigbee-devices-support-item .device-body {
    margin-top: 0.667rem;
    font-size: 90%;
}
.zigbee-devices-support .no-devices, .zigbee-devices-support .loadingDotText{
    margin-top: 1.333rem;
}
.edit-text-field-btn {
    cursor: pointer;
}
.edit-text-field-form {
    display: none;
    position: relative;
}
.edit-text-field-form input {
    padding-right: 5rem;
}
.edit-text-field-form .edit-text-field-form-btns {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.333rem;
    font-size: 1.2rem;
    display: flex;
    opacity: 0.8;
}
.edit-text-field-form .edit-text-field-form-btn {
    padding: 0.333rem 0.667rem;
    display: block;
}
.edit-text-field.open .edit-text-field-btn {
    display: none;
}
.edit-text-field.open .edit-text-field-form {
    display: block;
}
.edit-text-field-btn i {
    margin-left: 0.2rem;
    opacity: 0.6;
}
.irDev-commands-item {
    margin: 1rem 0;
}
.irDev-commands-item-data {
    flex: 1 0;
    margin: 0 15px;
}
.irDev-commands-item-icon {
    max-width: 20px;
}
.irDev-commands-item-btn a {
    font-size: 0.8rem;
    display: block;
}
.irDev-commands-item-data-command {
    margin-top: 5px;
    font-size: 0.9rem;
    opacity: 0.7;
}
.irDev-commands-item-data-command-value {
    max-width: 170px;
    margin-left: 0.5rem;
}
.ir-device-item-icon {
    max-width: 20px;
}
.ir-device-item-info {
    flex: 1 0;
    margin: 0 15px;
}
.ir-device-item-location, .ir-device-item-devices {
    margin-top: 5px;
    font-size: 0.9rem;
    opacity: 0.7;
}
.ir-device-item-location div:first-child, .ir-device-item-devices div:first-child {
    margin-right: 5px;
}
.ir-device-item-btns {
  margin: 1.667rem 0 1rem 0;
  justify-content: flex-end;
}

.support-home-info-preview-title {
    text-transform: uppercase;
    margin-bottom: 0.667rem;
}
.support-home-info-preview-btn {
    position: relative;
    padding-right: 3.333rem !important;
    margin: 1.333rem 0;
}
.support-home-info-preview-icon {
    position: absolute;
    top: 50%;
    right: 1.333rem;
    transform: translateY(-50%);
}
.support-home-info-items{
    margin: 1rem 0 0 0;
}
.support-home-info-items > div {
    margin: 0.533rem 0;
}
.support-home-info-item {
    padding-bottom: 0.533rem;
    border-bottom: 1px solid var(--shadow-input-color);
    font-size: 85%;
}
.support-home-info-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.support-home-info-item-label {
    font-weight: 700;
}
.support-home-info-item-value {
    margin-top: 0.333rem;
}
.requests-preview {
    margin-top: 3rem;
}
.requests-preview-title {
    margin-bottom: 1rem;
}
.requests-preview-items {
    margin: 1rem 0;
}
.requests-preview-items-not {
    font-weight: 600;
    opacity: 0.6;
}
.requests-preview-btns {
    justify-content: flex-end;
}
.requests-preview-title span{
    text-transform: uppercase;
    flex: 1 0;
    padding: 0 0.667rem;
}
.support-home-docs-item {
    background: var(--btn-light-bg-color);
    padding: 0.8rem;
    border-radius: 0.8rem;
}
.support-home-docs-item-head {
    font-size: 80%;
    opacity: 0.6;
}
.support-home-docs-item-inner {
    margin-top: 0.333rem;
}
.support-home-docs-item-data, .support-home-docs-item-downloads-item-name {
    flex: 1 0;
    padding: 0.667rem 1rem;
}
.support-home-docs-item-status.inoneline {
    font-weight: 700;
    margin-top: 0.667rem;
}
.support-home-docs-item-download a {
    display: block;
    padding: 0.667rem;
}
.support-home-docs-item-downloads-item-download .btn{
    display: block;
    font-size: 70%;
}
.support-home-docs-item-downloads-item {
    margin: 0.667rem 0;
}
.support-home-docs-item-downloads-item-name {
    font-size: 85%;
}
.support-home-manuals-item.btn {
    display: block;
    width: 100%;
    margin: 0 0 0.7rem 0;
}
.support-home-manuals-item-title {
    font-weight: 500;
    font-size: 120%;
}
.support-home-manuals-item-description {
    margin: 7px 0;
    opacity: 0.8;
}
.support-home-manuals-item-updated {
    font-size: 90%;
    opacity: 0.6;
}

/* Убеждаемся, что тост поверх всего */
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;
  white-space: pre !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;
}