.title {
    display: flex;
    margin-top: 20px;
    align-items: center; /* Центрируем элементы вертикально */
    flex-direction: row; /* Элементы располагаются в одну строку (по умолчанию для flex) */
    padding: 20px 50px; /* Отступы сверху и по бокам */
    height: auto; /* Высота элемента подстраивается под содержимое */
    background: linear-gradient(135deg, #ffffff, #f3f3f3); /* Светлый градиент для фона */
    color: #333; /* Тёмно-серый текст для контраста */
    border-radius: 15px; /* Скругление углов */
    font-size: 2.2rem; /* Увеличенный текст для заголовка */
    margin-bottom: 20px; /* Отступ снизу */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Выразительная тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Эффекты наведения */
    width: 95%; /* Занимает всю ширину родительского контейнера */
    text-align: center; /* Выравнивание текста */
    gap: 60px; /* Промежуток между элементами внутри контейнера */
}
button{
    margin-bottom: 15px;
    background-color: (135deg, rgb(38, 146, 140), rgb(26, 88, 88));

}
.f_btn {
    display: flex;
    flex-direction: row; /* Горизонтальное расположение */
    align-items: center; /* Центрируем элементы вертикально */
    justify-content: space-between; /* Распределяем элементы равномерно */
    gap: 15px; /* Пространство между элементами */
    width: 100%; /* Контейнер занимает всю доступную ширину */
    padding: 0; /* Убираем дополнительные отступы */
    box-sizing: border-box; /* Учитываем границы и отступы для корректного расчёта размеров */
}

.f_btn input, .f_btn button {
    flex: 1; /* Все элементы занимают равное пространство */
    padding: 10px; /* Внутренние отступы */
    font-size: 1rem; /* Удобный размер текста */
    border-radius: 8px; /* Скругленные углы */
}
.title:hover {
    transform: scale(1.02); /* Лёгкое увеличение при наведении */
}
.form-container-csr {
    width: 95%; /* Делаем ширину адаптивной */
    padding: 30px 0px; /* Удобные отступы */
    text-align: center;
    border-radius: 10px; /* Скругление углов */
    transition: transform 0.3s ease; /* Плавный эффект */
}

.form-container-csr:hover {
    transform: scale(1.01); /* Лёгкое увеличение при наведении */
}

.table {
    width: 100%; /* Таблица занимает всю ширину */
    border-collapse: collapse; /* Убираем разрыв между ячейками */
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень для глубины */
    border-radius: 8px; /* Скругление углов */
    overflow: hidden; /* Скрытие элементов за пределами таблицы */
}

.table th {
    background: linear-gradient(135deg, rgb(65, 199, 192), rgb(26, 88, 88));
    ; /* Синий фон заголовка */
    color: #fff; /* Белый текст для контраста */
    padding: 12px; /* Просторные отступы */
    text-align: center;
    font-size: 1rem; /* Размер текста */
    font-weight: 600; /* Жирный текст */
}

.table td {
    border: 1px solid #ddd; /* Лёгкая граница между ячейками */
    padding: 12px; /* Просторные отступы */
    text-align: center;
    font-size: 0.9rem; /* Немного уменьшенный текст */
    color: #333; /* Тёмный текст для читабельности */
}

.table-striped tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Светло-серый фон для нечётных строк */
}

.table-striped tbody tr:hover {
    background-color: #eaf3ff; /* Голубоватый фон при наведении */
    transition: background-color 0.3s ease; /* Плавный эффект */
}
.pagination {
    margin: 25px auto; /* Равномерный отступ */
    display: flex;
    justify-content: center; /* Центрирование элементов */
    list-style: none; /* Убираем маркеры */
    gap: 10px; /* Пространство между элементами */
}
input{
    border-style: silod 1px;
}
.pagination li a {
    text-decoration: none; /* Убираем подчёркивание */
    color: rgb(106, 146, 192); /* Синий текст */
    padding: 10px 20px; /* Просторные отступы */
    border: 1px solid #ddd; /* Лёгкая граница */
    border-radius: 8px; /* Скругление углов */
    font-size: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease; /* Эффект при наведении */
}

.pagination li a:hover {
    background-color: rgb(50, 54, 59); /* Синий фон */
    color: #fff; /* Белый текст */
}

.alert.alert-danger {
    color: #d8000c; /* Красный текст */
    padding: 15px;
    border-radius: 8px; /* Скругление углов */
    margin: 20px 0;
    text-align: center;
    font-size: 0.95rem; /* Немного уменьшенный текст */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
}
.filter_data{
    background-color: #333;
}
/* Адаптивность */
@media (max-width: 768px) {
    .form-container-csr {
        width: 95%; /* Увеличиваем ширину на мобильных устройствах */
        padding: 20px;
    }

    .title {
        font-size: 1.5rem; /* Уменьшаем размер заголовка */
        padding: 15px;
    }

    .pagination li a {
        padding: 6px 12px; /* Уменьшаем кнопки пагинации */
    }
}