:root {
        view-transition-name: none;
    /* Светлая тема */
    --background-color-light: #F1F0EC;
    --text-color-light: #000000;
    --border-color-light: #cccccc;
    --primary-color-light: #B1296A;
    --secondary-color-light: #dddddd;
    --error-color-light: red;
    --success-color-light: green;
    --info-box-border-color-light: #c7b2e7;
    --info-box-header-bg-default-light: #c7b2e7;
    --info-box-header-bg-red-light: #9A2B2E;
    --info-box-header-bg-orange-light: #EC935E;
    --info-box-header-bg-siren-light: #00666C;
    --info-box-header-bg-bordo-light: #6F3C56;
    --scrollbar-thumb-color-light: var(--info-box-header-bg-red-light);
    --scrollbar-track-color-light: #f1f1f1;
    --section-background-color-light: var(--background-color-light);
    --section-text-color-light: var(--text-color-light);
    --selection-background-color-light: var(--info-box-header-bg-red-light);
    --selection-text-color-light: #ffffff;

    /* Темная тема */
    --background-color-dark: #121212;
    --text-color-dark: #F1F0EC;
    --border-color-dark: #444444;
    --primary-color-dark: #ff6f61;
    --secondary-color-dark: #333333;
    --error-color-dark: #ff4a4a;
    --success-color-dark: #4caf50;
--primary-color-dark: #8e2e5d; /* ближе к #B1296A */
--info-box-header-bg-default-dark: #6e4a94;
--info-box-header-bg-red-dark: #9A2B2E;
--info-box-header-bg-orange-dark: #CE7B5B;
--info-box-header-bg-siren-dark: #00666C;
    --info-box-header-bg-bordo-dark: #6F3C56;
    --scrollbar-thumb-color-dark: var(--info-box-header-bg-red-dark);
    --scrollbar-track-color-dark: #222222;
    --section-background-color-dark: var(--background-color-dark);
    --section-text-color-dark: var(--text-color-dark);
    --selection-background-color-dark: var(--info-box-header-bg-red-dark);
    --selection-text-color-dark: #F1F0EC;

    /* Текущая тема */
    --background-color: var(--background-color-light);
    --text-color: var(--text-color-light);
    --border-color: var(--border-color-light);
    --primary-color: var(--primary-color-light);
    --secondary-color: var(--secondary-color-light);
    --error-color: var(--error-color-light);
    --success-color: var(--success-color-light);
    --info-box-border-color: var(--info-box-border-color-light);
    --info-box-header-bg-default: var(--info-box-header-bg-default-light);
    --info-box-header-bg-red: var(--info-box-header-bg-red-light);
    --info-box-header-bg-orange: var(--info-box-header-bg-orange-light);
    --info-box-header-bg-siren: var(--info-box-header-bg-siren-light);
    --info-box-header-bg-bordo: var(--info-box-header-bg-bordo-light);
    --scrollbar-thumb-color: var(--scrollbar-thumb-color-light);
    --scrollbar-track-color: var(--scrollbar-track-color-light);
    --section-background-color: var(--section-background-color-light);
    --section-text-color: var(--section-text-color-light);
    --selection-background-color: var(--selection-background-color-light);
    --selection-text-color: var(--selection-text-color-light);
    
        /* Цвета для hover */
    --button-hover-bg-red: #ff6f61;
    --button-hover-bg-bordo: #ff9800;
    --button-hover-bg-siren: #ba68c8;
    --button-hover-bg-orange: #ffb74d;
}

html.dark {
    --background-color: var(--background-color-dark);
    --text-color: var(--text-color-dark);
    --border-color: var(--border-color-dark);
    --primary-color: var(--primary-color-dark);
    --secondary-color: var(--secondary-color-dark);
    --error-color: var(--error-color-dark);
    --success-color: var(--success-color-dark);
    --info-box-border-color: var(--info-box-border-color-dark);
    --info-box-header-bg-default: var(--info-box-header-bg-default-dark);
    --info-box-header-bg-red: var(--info-box-header-bg-red-dark);
    --info-box-header-bg-orange: var(--info-box-header-bg-orange-dark);
    --info-box-header-bg-siren: var(--info-box-header-bg-siren-dark);
    --info-box-header-bg-bordo: var(--info-box-header-bg-bordo-dark);
    --scrollbar-thumb-color: var(--scrollbar-thumb-color-dark);
    --scrollbar-track-color: var(--scrollbar-track-color-dark);
    --section-background-color: var(--section-background-color-dark);
    --section-text-color: var(--section-text-color-dark);
    --selection-background-color: var(--selection-background-color-dark);
    --selection-text-color: var(--selection-text-color-dark);
}


body {
    background: var(--background-color);
    font-family: PT-Sans, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: 10vh;
    font-size: clamp(10px, calc(12px + (15 - 12) * (100vw - 768px) / (1920 - 768)), 15px);
        /* Для WebKit-браузеров (Chrome, Safari, новые версии Opera) */
    image-rendering: -webkit-optimize-contrast;

    /* Для Firefox */
    image-rendering: -moz-crisp-edges;

    /* Для Internet Explorer */
    image-rendering: optimizeSpeed;

    /* Стандартное значение для остальных браузеров */
    image-rendering: optimizeSpeed;
}



img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: optimizeSpeed;
}

header {
    margin: 0 20vmin;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 2vmin 0 2vmin;
}



.header-buttons {
    display: flex;
    gap: 10px;
}

.header-buttons button {
    background-color: var(--primary-color);
    color: var(--text-color);
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.header-buttons button:hover {
    background-color: var(--secondary-color);
}


main {
    color:var(--text-color);
    margin: 0 20vmin 0 20vmin;
    padding: 2vmin;
}

main.animate-in {
    animation: slideInLeft 1s ease-out;
}

footer {
    width: 100%;
    padding: 10px 0 0 0;
    position: fixed;
    bottom: 0;
    text-align: center;
}

footer nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

footer nav ul li {
    margin: 0 15px;
}

footer nav ul li a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 18px;
}

footer nav ul li a:hover {
    text-decoration: underline;
}

/* Стили для скроллбара в целом */
::-webkit-scrollbar {
    width: 12px; /* Ширина скроллбара */
}

/* Стили для трека скроллбара */
::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color); /* Цвет трека */
}

/* Стили для ползунка скроллбара */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color); /* Цвет ползунка */
    border-radius: 6px; /* Скругление углов ползунка */
}

/* Стили для ползунка скроллбара при наведении */
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-color); /* Цвет ползунка при наведении */
}

/* Стили для выделения текста */
::selection {
    background-color: var(--selection-background-color);
    color: var(--selection-text-color);
    -webkit-text-stroke:var(--selection-text-color);
}


.flex_container {
    display: flex;
}

.announcement-item {
    max-width: 20vh;
    margin: 1vmin;
}

#news-container .news-item {
    margin-bottom: 20px;
}

.news-item h2 {
    margin: 0 0 10px;
}

.news-introtext {
    margin-bottom: 10px;
}

#pagination a {
    margin-right: 10px;
    text-decoration: none;
}

/* Modal Styles */


.open-general-modal {
    width:100%;
    cursor: pointer;
    display: flex;
    justify-content: center; /* Центрирование содержимого по горизонтали */
    font-family: inherit; /* Наследует шрифт от родительского элемента */
    font-size: inherit; /* Наследует размер шрифта от родительского элемента */
    border: 1px solid var(--border-color);
    border-radius: 2vmin; /* Соответствует остальным элементам сайта */
    background-color: var(--primary-color);
    color: var(--background-color);
    padding: 1vmin 2vmin; /* Добавление внутренних отступов в vmin */
    text-align: center;
    text-decoration: none; /* Убираем подчеркивание текста */
    margin: 1vmin 0; /* Добавление внешних отступов для лучшего выравнивания */
}

.open-general-modal:hover {
    background-color: var(--button-hover-background-color, var(--secondary-color));
    color: var(--text-color);
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Затемнение фона */
     backdrop-filter: blur(10px); /* эффект размытия */

  -webkit-backdrop-filter: blur(10px); /* для поддержки Safari */
    z-index: 1000; /* Поверх остальных элементов */
    justify-content: center;
    align-items: center;
}

.modal.show,
.general-modal.show {
    display: flex;

}

.modal-content {
    animation: fadeIn 0.5s ease-out; /* Модальное окно появляется плавно */
    background: var(--background-color);
    padding: 5vmin;
    max-width: calc(100% - 40vmin);
    max-height: 75%;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 2vmin;
    position: relative; /* Добавлено для абсолютного позиционирования кнопки */
}

/* Style for images within the modal */
.modal-content img {
    max-width: 100%; /* Ensure images do not exceed the width of the modal */
    height: auto; /* Maintain aspect ratio */
    /*display: block;  Remove any extra space below the images */
}

#close-modal,
#close-general-modal,
.close-button {

    color: var(--text-color-dark);
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    display: block;
    position: absolute; /* Абсолютное позиционирование */
    top: 20px; /* Отступ сверху */
    right: 20px; /* Отступ справа */
    z-index: 1001; /* Убедитесь, что кнопка находится поверх контента */
}

/* Ключевые кадры для плавного появления */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9); /* Элемент сжимается перед появлением */
    }
    to {
        opacity: 1;
        transform: scale(1); /* Возвращается к нормальному размеру */
    }
}

/* Ключевые кадры для сдвига слева направо */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%); /* Элемент начинает за пределами экрана слева */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* Возвращается в нормальное положение */
    }
}

/* Ключевые кадры для сдвига справа налево */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%); /* Элемент начинает за пределами экрана справа */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* Возвращается в нормальное положение */
    }
}

/* Класс для плавного появления */
.fade-in {
    animation: fadeIn 0.8s ease-out; /* Длительность анимации: 0.8 секунд */
}

/* Класс для сдвига слева направо */
.slide-in-left {
    animation: slideInLeft 0.8s ease-out; /* Длительность анимации: 0.8 секунд */
}

/* Класс для сдвига справа налево */
.slide-in-right {
    animation: slideInRight 0.8s ease-out; /* Длительность анимации: 0.8 секунд */
}

/* Committee Members Styles */
.committee-members, .commission-members, .directorate-members, .members-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32vmin, 1fr));
    flex-wrap: wrap;
    gap: 1.5vmin;
    padding: 0;
    list-style-type: none;
    padding-left: 0;
}

.status-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5vmin;
    padding: 0;
    list-style-type: none; /* Убирает маркеры у списка */
    padding-left: 0; /* Убирает отступ слева, который по умолчанию добавляется к списку */
}

.act-cont{
    grid-template-columns: 1fr 0.5fr;
}

.act-child{
    display: grid !important;
    grid-template-columns: 0.5fr;
    justify-content: space-between;
}

        .column-vertical {
            display: grid;
        /*    grid-template-rows: 1fr 1fr; /* Два ряда одинаковой высоты */
            gap: 1.5vmin; /* Расстояние между элементами в вертикальном столбце */
        }

        .column-horizontal {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(39vmin, 1fr));
        /*    grid-auto-rows: 1fr; /* Ряды растягиваются по высоте */
            gap: 1.5vmin;
        }


.member-item {
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    width: 200px;
}

.member-item img {
    max-width: 100%;
    border-radius: 2vmin;
    margin-bottom: 2vmin;
}

/* information box style */
.info-box {
    position: relative;
    background: var(--background-color);
/*    min-height: 200px;*/
/*    max-width: 45vmin;*/
    border-radius: 2vmin;
/*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    box-shadow:0 4px 20px 0px rgb(255 3 236 / 10%);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавные переходы */
}

.info-box:hover {
    transform: translateY(-5px); /* Поднимаем карточку при наведении */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Увеличиваем тень */
}

.info-box.empty::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%; /* Размер иконки */
    height: 100%;
    background:center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.5; /* Прозрачность иконки */
    background-image: url('/assets/images/white-paper.jpg'); /* Абсолютный путь */
}

.info-box-header {
    margin: 0;
    padding: 1vmin 2vmin;
    border-radius: 1.5vmin;
}

.info-box-header a {
    font-family: 'PT Sans', sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 3vmin; /* Адаптивный размер */
    -webkit-text-stroke: 0.3vmin white; /* Обводка */
    text-decoration: none; /* Убираем подчеркивание */
    position: relative;
    line-height: 1.1;
}
.info-box-content a:not([href]) {
  pointer-events: none; /* Отключает взаимодействие */
  color: inherit; /* Цвет текста наследуется от родителя */
  text-decoration: none; /* Убирает подчеркивание */
}

.info-box-header a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--info-box-header-bg-red); /* Цвет подчеркивания */
    transition: width 0.3s ease;
}

.info-box-header a:hover::after {
    width: 100%;
}
.info-box-header a:not([href]):hover::after {
    width: 0;
}



.info-box-content {
    padding: 1vmin 2vmin;
}


.info-box-content hr{
    width:100%;
    margin:0;
}
.info-box-content p{
    margin:0.45vmin;
}

.info-box-content a {
  color: var(--error-color); /* Цвет текста */
  text-decoration: none;
  padding: 0 0.05vmin; /* Внутренние отступы для текста */
  border-radius: 1vmin; /* Скругленные углы */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.info-box-content a:hover {
  background-color: rgba(255, 87, 51, 0.2); /* Прозрачный красный фон */
  color: #FF5733; /* Красный цвет текста при наведении */
}

.info-box img {
    border-radius: 2vmin;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.info-box ul{
    padding-inline-start: 3vh;
}

/* Default color scheme */
.info-box.default .info-box-header a {
    color: var(--info-box-header-bg-default) !important;
    -webkit-text-stroke: 0.3vmin var(--info-box-header-bg-default) !important;
}

/* Red color scheme */
.info-box.red .info-box-header a {
    color: var(--info-box-header-bg-red) !important;
    -webkit-text-stroke: 0.3vmin var(--info-box-header-bg-red) !important;
}

/* Orange color scheme */
.info-box.orange .info-box-header a {
    color: var(--info-box-header-bg-orange) !important;
    -webkit-text-stroke: 0.3vmin var(--info-box-header-bg-orange) !important;
}

/* Siren color scheme */
.info-box.siren .info-box-header a {
    color: var(--info-box-header-bg-siren) !important;
    -webkit-text-stroke: 0.3vmin var(--info-box-header-bg-siren) !important;
}

/* Bordo color scheme */
.info-box.bordo .info-box-header a {
    color: var(--info-box-header-bg-bordo) !important;
    -webkit-text-stroke: 0.3vmin var(--info-box-header-bg-bordo) !important;
}

/* Pagination style*/
    #pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
        background-color: var(--background-color);
        padding: 10px;
        border-radius: 10px;
    }

    #pagination a {
        margin-right: 10px;
        text-decoration: none;
    }

    .pagination-button, .pagination-number {
  color: var(----info-box-header-bg-default); /* Цвет текста */
  text-decoration: none;
  display: inline-block;
  padding: 0 0.5vmin; /* Внутренние отступы для текста */
  border-radius: 1vmin; /* Скругленные углы */
  transition: background-color 0.3s ease, color 0.3s ease;
    }

    .pagination-button:hover, .pagination-number:hover {
        background-color: #e0e0e0;
        color: #000;
    }

    .pagination-button.disabled, .pagination-number.disabled {
        background-color: var(--background-color);
        color: #999;
        cursor: not-allowed;
    }

    .pagination-button.disabled:hover, .pagination-number.disabled:hover {
        background-color: #ddd;
        color: #999;
    }

    .active {
        cursor: default;
        margin-right: 10px; /* Добавлен отступ справа */
    }

    .pagination-ellipsis {
        display: inline-block;
        padding: 10px 15px;
        margin: 0 5px;
        color: #333;
    }
    
        /* Search form style */
        #search-form {
            color:var(--text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
            background-color: var(--background-color);
            padding: 10px;
            border-radius: 10px;
        }
        #search-form input[type="text"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
            width: 200px;
        }
        #search-form button {
            color:var(--text-color);            
            padding: 10px 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: var(--background-color);
            color: #333;
            cursor: pointer;
        }
        #search-form button:hover {
            background-color: #e0e0e0;
            color: #000;
        }