body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #faf8fc 0%, #f5f3f9 100%);
    background-attachment: fixed;
}

.navbar-custom {
    background-color: var(--color-primary-hover);
    padding: 0.15rem; /* Ещё меньше отступы для очень узкой навигации */
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); /* Тонкая тень навигации */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.navbar-custom .navbar-brand {
    display: flex;
    align-items: center;
    color: var(--color-bg-secondary);
    font-weight: 700;
    font-size: 1.1rem; /* Уменьшен размер шрифта */
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.navbar-custom .navbar-brand img {
    height: 24px; /* Регулируйте высоту SVG по необходимости */
    margin-right: 0.5rem; /* Отступ между логотипом и названием */
}

.navbar-custom .nav-link {
    color: var(--color-bg-secondary);
    margin-right: 0.3rem; /* Ещё меньше расстояние между ссылками */
    transition: color 0.3s;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 0.85rem; /* Уменьшен размер шрифта */
}

.navbar-custom .nav-link:hover {
    color: var(--color-text-light);
}

.navbar-custom .btn-custom {
    background-color: var(--color-bg-secondary);
    border: none;
    color: var(--color-primary-hover);
    padding: 0.3rem 0.3rem; /* Немного увеличены отступы для лучшей кликабельности */
    transition: background-color 0.3s, color 0.3s;
    font-size: 0.85rem; /* Немного увеличен размер шрифта для согласованности */
    display: flex;
    align-items: center;
    margin-left: 0.3rem; /* Отступ слева между кнопками */
}

.navbar-custom .btn-custom:hover {
    background-color: var(--color-border);
    color: var(--color-primary-hover);
}

.navbar-custom .form-control-custom {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-primary-hover);
    padding: 0.3rem 0.6rem; /* Немного увеличены отступы */
    transition: background-color 0.3s, border-color 0.3s;
    font-size: 0.85rem; /* Немного увеличен размер шрифта */
}

.navbar-custom .form-control-custom::placeholder {
    color: var(--color-text-lighter);
}

.navbar-custom .form-control-custom:focus {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-primary-hover);
    box-shadow: none;
}

/* Убираем закругления */
.navbar-custom .btn-custom,
.navbar-custom .form-control-custom {
    border-radius: 0;
}

/* Добавляем тень между навигационной панелью и контентом */
.content {
    margin: 0.5rem 0.5rem 0.5rem; /* Сначала отступ сверху, потом по бокам и снизу */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень для глубины */
    border: 1px solid var(--color-border); /* Окантовка вокруг контента */
    border-radius: 4px; /* Закругленные углы для плавного эффекта */
    background-color: var(--color-bg);
    padding: 0.5rem; /* Увеличенный отступ для более "воздушного" вида */
}

/* Стили для новых кнопок */
.navbar-custom .nav-button {
    color: var(--color-bg-secondary);
    margin-left: 0.5rem;
    transition: color 0.3s, background-color 0.3s;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border: none;
    background: none;
}

.navbar-custom .nav-button i {
    margin-right: 0.3rem;
}

.navbar-custom .nav-button:hover {
    color: var(--color-text-light);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0;
    text-decoration: none;
}

/* Адаптивность */
@media (max-width: 991.98px) {
    .navbar-custom {
        padding: 0.15rem 0.8rem; /* Ещё меньше отступы на мобильных */
    }

    .navbar-custom .navbar-brand {
        font-size: 1rem;
    }

    .navbar-custom .navbar-brand img {
        height: 20px; /* Немного меньше для мобильных */
        margin-right: 0.3rem;
    }

    .navbar-custom .nav-link {
        margin-right: 0.3rem;
        font-size: 0.75rem;
    }

    .navbar-custom .btn-custom,
    .navbar-custom .form-control-custom {
        padding: 0.15rem 0.4rem;
        font-size: 0.7rem;
    }

    .navbar-custom .btn-custom {
        margin-left: 0.3rem;
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
    }

    .navbar-custom .nav-button {
        margin-left: 0.3rem;
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }

    .navbar-custom .nav-button i {
        margin-right: 0.2rem;
    }
}

.font-sm{
    font-size: 0.9rem;
}
.font-extra-small{
    font-size: 0.7rem;
}

/* Пользовательские стили для таблицы */
.table-custom {
    background-color: var(--color-bg);
    border-collapse: collapse;
}

.table-custom thead {
    background-color: var(--color-primary-hover);
    color: var(--color-bg-secondary);
}

.table-custom th,
.table-custom td {
    padding: 0.5rem; /* Уменьшенные отступы для компактности */
    vertical-align: middle;
}

.table-custom tbody tr:hover {
    background-color: var(--color-bg-secondary);
}

.table-custom tbody tr:nth-of-type(odd) {
    background-color: var(--color-bg-secondary);
}

.table-custom tbody tr:nth-of-type(even) {
    background-color: var(--color-bg);
}

.table-custom th {
    text-align: center;
    font-size: 0.9rem;
    border-bottom: 2px solid var(--color-primary-hover);
}

.table-custom td {
    font-size: 0.85rem;
    color: var(--color-text);
}

.table-custom .text-end {
    text-align: end !important;
}

.table-custom .text-center {
    text-align: center !important;
}

/* Адаптивность для таблицы */
@media (max-width: 991.98px) {
    .table-custom th,
    .table-custom td {
        padding: 0.3rem; /* Ещё меньше отступы на мобильных */
        font-size: 0.75rem;
    }

    .table-custom thead {
        font-size: 0.8rem;
    }
}


.pnl-container {
    font-size: 0.7rem;

}

.pnl-container.positive {
    background-color: var(--color-success); /* Зеленый цвет для положительного значения */
    color: var(--color-bg);
}

.pnl-container.negative {
    background-color: var(--color-error); /* Красный цвет для отрицательного значения */
    color: var(--color-bg);
}


.status-indicator {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 3px; /* делаем углы слегка закругленными */
    margin-right: 5px; /* небольшой отступ справа */
    vertical-align: middle; /* выравнивание с текстом */
}

.status-success {
    background-color: var(--color-success); /* зеленый цвет для успешного статуса */
}

.status-error {
    background-color: var(--color-error); /* красный цвет для ошибки */
}


.fixed-top-left {
    position: absolute;
    top: 5px;
    left: 5px;
}

.fixed-top-right {
    position: absolute;
    top: 5px;
    right: 5px;
}

.custom-lang-button {
    color: var(--color-text); /* Темный цвет текста для лучшей видимости */
    border-color: var(--color-text); /* Темный цвет границы */
}

.custom-lang-button:hover, .custom-lang-button:focus {
    color: var(--color-bg); /* Белый цвет текста при наведении */
    background-color: var(--color-text); /* Темный фон при наведении */
    border-color: var(--color-text); /* Темная граница при наведении */
}


.status-indicator {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.connected {
    color: var(--color-success) !important; /* Зеленый */
}

.disconnected {
    color: var(--color-error) !important; /* Красный */
}


.select2-container--open{
    z-index: 100000 !important;
}
.select2-results__options {
    max-height: 400px !important;
}





.custom-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    font-size: 0.800em;
    font-weight: normal;
    color: var(--color-bg);
    background-color: var(--color-primary-hover);
    border-radius: 0.2rem;
    margin-right: 0.5rem;
}

.custom-badge .btn-close {
    font-size: 0.8em;
    margin-left: 0.5em;
    color: var(--color-bg);
    opacity: 0.8;
}

.custom-badge .btn-close:hover {
    opacity: 1;
}

.custom-radio-group {
    display: flex;
    gap: 5px;
    justify-content: start;
    align-items: center;
}
.custom-radio-group label {
    cursor: pointer;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
    /*min-width: 100px;*/
    text-align: center;
}
.custom-radio-group input[type="radio"] {
    display: none;
}
.custom-radio-group input[type="radio"]:checked + label {
    background-color: var(--color-primary-hover);
    color: white;
}

.custom-control .form-label{
    margin-bottom: .2rem !important;
}

.custom-control{
    margin-top: .1rem !important;
}

/* =========================== */
/* DESIGN SYSTEM FORM CLASSES */
/* =========================== */


/* Form Group */
.form_group {
    margin-bottom: var(--space-lg);
}

/* Form Label */
.form_label {
    display: block;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}

/* Form Input Base */
.form_input {
    width: 100%;
    height: 40px;
    padding: 0 var(--space-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    line-height: 1;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all 200ms ease;
    box-sizing: border-box;
}

.form_input:hover {
    border-color: var(--color-border);
}

.form_input:focus {
    outline: none;
    border-color: var(--color-primary-hover);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Form Input Small */
.form_input_sm {
    height: 40px;
    padding: 0 var(--space-md);
    font-size: var(--font-size-sm);
}

/* Form Help Text */
.form_help {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}


.image-figure {
    margin: var(--space-lg) 0;
    padding: 0;
}

.image-caption {
    margin-top: var(--space-md);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-light);
    font-weight: var(--font-weight-light);
}