html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


html {
    width: 100%;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
}

header {
    width: 100%;
    height: 70px;
    margin: 0 auto;
    background-color: #d1d1d1;
    color: #004095;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

header h1 {
    font-weight: bold;
    font-size: clamp(16px, 4vw, 32px); /* автоматически подстраивает размер */
    max-width: 100%;                   /* ограничиваем ширину */
    white-space: normal;               /* разрешаем перенос строк */
    word-wrap: break-word;             /* переносим длинные слова */
    text-align: center;                /* выравниваем по центру */
    margin: 0 auto;                    /* центрируем */
    padding: 10px;                     /* чтобы текст не прилипал */
    box-sizing: border-box;
}

nav {
    background-color: #004095;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

nav ul {
    display: flex;
    gap: 20px;
    /* Добавляем пространство между элементами меню */
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 1.1em;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

nav ul li a:hover {
    background-color: #003d80;
    color: #e1e1e1;
}

main {
    width: 100%;
    margin: 0 auto;
    background: #d1d1d1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 0;
}

.main-contener {
    width: 95%;
    padding: 5px 0;
    margin: 0px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #004095;
    text-align: center;
    height: 40px;
    width: 100%;
    color: white;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-content {
    margin: 0 auto;
    padding: 5px;
    line-height: 1.6;
    /* Для улучшения читаемости */
}

.main-content h2 {
    color: #0056b3;
    margin-bottom: 20px;
    font-size: 2em;
    /* Увеличен размер шрифта заголовка */
    text-align: center;
}

.main-content p {
    margin-bottom: 20px;
    font-size: 1.2em;
    /* Немного увеличен размер шрифта для текста */
    color: #333;
    text-align: justify;
    /* Выравнивание текста по ширине */
}

.main-content p:last-child {
    margin-bottom: 0;
    /* Убираем отступ у последнего абзаца */
}

/* Стили для страницы входа */
.login-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 0px auto;
}

.login-container h2 {
    color: #0056b3;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.2em;
}

.form-group {
    margin-bottom: 10px;
    width: 100%;
}

.form-group label {
    font-size: 1.1em;
    color: #333;
}

.form-group input {
    width: 90%;
    padding: 10px;
    margin-top: 5px;
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.login-btn {
    width: 100%;
    padding: 10px;
    background-color: #0056b3;
    color: white;
    font-size: 1.1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-btn:hover {
    background-color: #003d80;
}

.flash-messages {
    margin-top: 20px;
}

.flash-message {
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.flash-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.flash-message.success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.flash-message.warning {
    background-color: #fff3cd; /* Светло-желтый фон */
    color: #856404; /* Темно-желтый текст */
    border-color: #ffeeba; /* Светло-желтая граница */
    padding: 10px; /* Внутренний отступ */
    border: 1px solid; /* Граница */
    border-radius: 4px; /* Скругленные углы */
    margin-bottom: 10px; /* Отступ снизу */
}

/* Общие стили для контейнера профиля */
.profile-container {
    max-width: 100%;
    margin: 0px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Заголовок приветствия */
.profile-container h2 {
    font-size: 24px;
    padding: 0px;
    color: #333;
    margin-bottom: 5px;
}

.participants-controls p {
    font-size: 20px;          /* Увеличенный шрифт для читаемости */
    font-weight: bold;        /* Полужирный текст */
    margin-top: 10px;
    color: #333;              /* Основной цвет текста */
    text-align: center;       /* Выравнивание текста по центру */
}

/* Кнопка выхода */
.profile-container a {
    display: inline-block;
    font-size: 16px;
    color: #007bff;
    text-decoration: none;
    margin-top: 10px;
}

/* Стиль для кнопки добавления участника */
.profile-btn {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 0px;
    margin-bottom: 20px;
}

#export-form{
display: inline-block;
}

.profile-btn:hover {
    background-color: #45a049;
}

/* Разделение блоков */
.profile-container h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #333;
}

.profile-container .participant-list {
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
}

.profile-container .participant-list ul {
    list-style-type: none;
    padding: 0;
}

.profile-container .participant-list ul li {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.profile-container .participant-list ul li:last-child {
    border-bottom: none;
}

.add-participant-container {
    width: 100%; /* Используем всю ширину родителя */
    margin: auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
}

.add-participant-container h2,
.edit-participant-container h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

.add-participant-container .form-group-hidden{
    display: none
}

.add-participant-container form {
    display: flex;
    flex-direction: column; /* Размещаем блоки line-... вертикально */
    gap: 20px; /* Отступ между строками */
}

.add-participant-container .line-1,
.add-participant-container .line-2,
.add-participant-container .line-3 {
    display: flex;
    gap: 15px; /* Расстояние между полями внутри блока */
    justify-content: flex-start; /* Выравниваем элементы по началу строки */
}

.add-participant-container .form-group {
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(25% - 15px); /* Занимает 25% ширины строки с учётом отступов */
    box-sizing: border-box;
}

.add-participant-container .form-group-full-width {
    flex: 1 1 100%; /* Элемент занимает всю ширину строки */
}

.add-participant-container #types-container {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос строк для категорий */
    gap: 15px; /* Расстояние между полями */
    width: 100%; /* Контейнер категорий занимает всю ширину */
    border-top: 5px dashed #5b646e; /* Линия сверху: цветная, пунктирная */
    padding-top: 20px; /* Внутренний отступ сверху для визуального пространства */
}



.add-participant-container #types-container .form-group {
    flex: 1 1 calc(20% - 15px); /* Категории занимают треть строки */
}

.add-participant-container .form-group label {
    margin-bottom: 5px;
    font-weight: bold;
}

.add-participant-container .form-group input,
.add-participant-container .form-group select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 0px;
    align-self: flex-start; /* Выравниваем кнопку в начале строки */
}

.add-participant-container .form-btn:hover {
    background-color: #45a049;
}

a {
    display: inline-block;
    font-size: 16px;
    color: #007bff;
    text-decoration: none;
}

#participantsTable a {
    font-size: inherit;  /* Наследовать размер шрифта от родительского элемента */
    text-decoration: none;  /* Опционально: убрать подчеркивание */
    margin: 0;
}

/* Обновляем стили для контейнера таблицы */
.participants-table-container {
    max-height: 73vh;  /* Фиксированная высота контейнера */
    margin: 20px 0;     /* Добавляем отступы сверху и снизу */
    border: 1px solid #ddd;  /* Добавляем границу для визуального выделения */
    border-radius: 5px;      /* Скругляем углы */
    overflow: auto;        /* Предотвращаем двойной скролл */
    margin-top: 10px;
}

.table-wrapper {
    width: 100%;    /* Минимальная ширина таблицы */
}

#participantsTable {
    width: 100%;        /* Ширина таблицы */
}

/* Фиксируем заголовок таблицы */
#participantsTable thead th {
    position: sticky;
    top: var(--sticky-filter-h, 44px);
    background-color: #f4f4f4;
    z-index: 1;
    /* Добавляем тень для визуального отделения */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}


.table-info {
    margin-top: 2px;
    text-align: right;
    padding: 2px;
    font-size: 14px;
    color: #666;
}

#rowCount {
    font-weight: bold;
}

#participantsTable td:not(.participant-name) {
    white-space: nowrap;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    text-align: left;
}

table th,
table td {
    border: 1px solid #ddd;
    padding: 8px;
    vertical-align: middle;
    /* Вертикальное выравнивание по центру */
}

table th {
    background-color: #f4f4f4;
    color: #333;
    font-weight: bold;
    text-align: center;
}

table tr:nth-child(even) {
    background-color: #f9f9f9;
}

table tr:hover {
    background-color: #f1f1f1;
}

.edit-participant-container {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.edit-participant-container .form-group {
    margin-bottom: 15px;
}

.edit-participant-container .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.edit-participant-container .form-group input,
.edit-participant-container .form-group select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.delete-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12px;
    height: 12px;
}

.delete-button img {
    width: 24px;
    height: 24px;
}

.delete-button:hover img {
    opacity: 0.7;
}

.available-category {
    background-color: #d4edda;
    color: green;
}

.disabled-category {
    background-color: #f8d7da;
    color: #6c757d;
}

.error-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
}

td.error-cell {
    width: 24px;
    height: 24px;
}

/* Контейнер для формы загрузки категорий */
.upload-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Заголовок формы */
.upload-container h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

/* Стили для формы */
.upload-container .form-group {
    margin-bottom: 15px;
}

.upload-container .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.upload-container .form-group input[type="file"] {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 5px;
}

.category-list {
    display: flex;
    /* Используем flexbox для расположения элементов в одну строку */
    gap: 10px;
    /* Расстояние между категориями */
    flex-wrap: wrap;
    /* Если категория не помещается, она может перейти на новую строку */
}

.category-list span {
    padding: 5px 10px;
    /* Добавляем отступы для улучшения видимости */
    border-radius: 5px;
    /* Скругленные углы */
    font-size: 12px;
    /* Размер шрифта */
    white-space: nowrap;
    /* Запрещаем перенос текста внутри span */
    color: #fff;
    /* Цвет текста */
    background-color: #4CAF50;
    /* Фон для категорий */
}

.category-list span:nth-child(odd) {
    background-color: #2196F3;
}

.no-categories {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #f44336;
    /* Красный фон */
    color: white;
    font-size: 12px;
    white-space: nowrap;
}

.modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
        background-color: #fff;
        margin: 10% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 500px;
        border-radius: 8px;
    }

    .close-btn, .column-visibility-close-btn {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .close-btn:hover,
    .close-btn:focus, .column-visibility-close-btn:hover, .column-visibility-close-btn:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    /* Кнопка для добавления фильтра */
#add-filter-btn {
    background-color: #4CAF50; /* Зеленый фон */
    color: white; /* Белый текст */
    border: none;
    padding: 10px 20px; /* Отступы */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 4px; /* Округлые углы */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Плавное изменение фона при наведении */
    margin-top: 10px;
}

#add-filter-btn:hover {
    background-color: #45a049; /* Темный зеленый при наведении */
}

#add-filter-btn:active {
    background-color: #3e8e41; /* Еще более темный зеленый при нажатии */
}

#filter-options{
    display: flex;
    flex-direction: column; /* Размещаем блоки line-... вертикально */
    gap: 20px;
}

.filter-container{
    display: flex;
    gap: 10px; /* Расстояние между полями внутри блока */
    justify-content: flex-start;
    align-items: center
}

.gender-select {
    height: auto;
}

.belt-select{
    height: auto;
}

.gender-select option, .belt-select option {
padding: 5px 5px 0px 5px;
}

#sticky-filter-placeholder{
  position: sticky;
  top: 0;                 /* если есть фиксированная шапка — увеличьте */
  z-index: 5;
  background: #fff;
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: flex-end; /* гонит содержимое вправо */
  padding: 6px 12px;
}

/* Убираем внешние отступы у самого блока фильтра */
#sticky-filter-placeholder .dataTables_filter{
  margin: 0;
}