body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0; /* Фон страницы для контраста */
}

.navbar-custom {
    background-color: #5753c9;
    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: #f0f0f0;
    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: #f0f0f0;
    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: #d1d1d1;
}

.navbar-custom .btn-custom {
    background-color: #f0f0f0;
    border: none;
    color: #5753c9;
    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: #e0e0e0;
    color: #5753c9;
}

.navbar-custom .form-control-custom {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    color: #5753c9;
    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: #a0a0a0;
}

.navbar-custom .form-control-custom:focus {
    background-color: #f8f9fa;
    border-color: #5753c9;
    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 #e0e0e0; /* Окантовка вокруг контента */
    border-radius: 4px; /* Закругленные углы для плавного эффекта */
    background-color: #ffffff;
    padding: 0.5rem; /* Увеличенный отступ для более "воздушного" вида */
}

/* Стили для новых кнопок */
.navbar-custom .nav-button {
    color: #f0f0f0;
    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: #d1d1d1;
    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: #ffffff;
    border-collapse: collapse;
}

.table-custom thead {
    background-color: #5753c9;
    color: #f0f0f0;
}

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

.table-custom tbody tr:hover {
    background-color: #f8f9fa;
}

.table-custom tbody tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

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

.table-custom th {
    text-align: center;
    font-size: 0.9rem;
    border-bottom: 2px solid #5753c9;
}

.table-custom td {
    font-size: 0.85rem;
    color: #333333;
}

.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: #28a745; /* Зеленый цвет для положительного значения */
    color: #ffffff;
}

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


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

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

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


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

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

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

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


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

.connected {
    color: #28a745 !important; /* Зеленый */
}

.disconnected {
    color: #dc3545 !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: #ffffff;
    background-color: #7975E1;
    border-radius: 0.2rem;
    margin-right: 0.5rem;
}

.custom-badge .btn-close {
    font-size: 0.8em;
    margin-left: 0.5em;
    color: #ffffff;
    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 #ccc;
    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: #7975E1;
    color: white;
}

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

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

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

:root {
    --color_primary_700: #7c3aed;
    --color_neutral_0: #ffffff;
    --color_border: #e5e7eb;
    --color_border_hover: #d1d5db;
    --color_text_primary: #111827;
    --color_text_secondary: #6b7280;
    --color_text_tertiary: #9ca3af;
    --color_surface: #ffffff;
    --color_surface_hover: #f9fafb;
    --color_background_secondary: #f9fafb;
    --table_bg: #ffffff;
    --table_border: #e5e7eb;
    --table_border_hover: #d1d5db;
    --table_text: #111827;
    --table_text_secondary: #6b7280;
    --table_text_tertiary: #9ca3af;
    --table_row_hover: #f9fafb;
    --spacing_1: 0.25rem;
    --spacing_2: 0.5rem;
    --spacing_3: 0.75rem;
    --spacing_4: 1rem;
    --radius_md: 0.375rem;
    --radius_sm: 0.25rem;
    --font_size_sm: 0.875rem;
    --font_size_xs: 0.75rem;
    --font_weight_medium: 500;
}

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

/* Form Label */
.form_label {
    display: block;
    margin-bottom: var(--spacing_2);
    font-size: var(--font_size_sm);
    font-weight: var(--font_weight_medium);
    color: var(--color_text_primary);
}

/* Form Input Base */
.form_input {
    width: 100%;
    height: 40px;
    padding: 0 var(--spacing_3);
    font-family: inherit;
    font-size: var(--font_size_sm);
    line-height: 1;
    color: var(--color_text_primary);
    background-color: var(--color_surface);
    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_hover);
}

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

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

/* Form Help Text */
.form_help {
    display: block;
    margin-top: var(--spacing_1);
    font-size: var(--font_size_xs);
    color: var(--color_text_secondary);
}