/* Шрифт приложения — Manrope (переопределяет Quicksand из темы). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/manrope/manrope-400-cyrillic-ext.4cdf0bed0838.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/manrope/manrope-400-cyrillic.e58febde317b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/manrope/manrope-400-latin-ext.6d36d5bdedfa.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/manrope/manrope-400-latin.938c6e8019b6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/manrope/manrope-500-cyrillic-ext.4cdf0bed0838.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/manrope/manrope-500-cyrillic.e58febde317b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/manrope/manrope-500-latin-ext.6d36d5bdedfa.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/manrope/manrope-500-latin.938c6e8019b6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/manrope/manrope-600-cyrillic-ext.4cdf0bed0838.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/manrope/manrope-600-cyrillic.e58febde317b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/manrope/manrope-600-latin-ext.6d36d5bdedfa.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/manrope/manrope-600-latin.938c6e8019b6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope/manrope-700-cyrillic-ext.4cdf0bed0838.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope/manrope-700-cyrillic.e58febde317b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope/manrope-700-latin-ext.6d36d5bdedfa.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope/manrope-700-latin.938c6e8019b6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --default-font-family: "Manrope", sans-serif;
}

.page {
    justify-content: flex-start !important;
}


/* Эффект для карточек игроков в составе */
.player-card {
    transition: all 0.2s ease-in-out;
}
.player-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color) !important; /* Подсветка рамки основным цветом */
}

.app-sidebar {
    display: flex;
    flex-direction: column;
}

.main-sidebar {
    flex-grow: 1; 
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--default-border);
    flex-shrink: 0;
}

.side-menu__item_custom {
    padding: 0.65rem 0.75rem;
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 0.85rem;
    color: var(--menu-prime-color);
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.form-circle { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; color: white; font-size: 0.8em; margin: 0 1px; }
.form-win { background-color: rgb(var(--success-rgb)); }
.form-loss { background-color: rgb(var(--danger-rgb)); }
.form-draw { background-color: rgb(var(--secondary-rgb)); }

/* Стили для авт/* Стили для авто-генерируемых аватаров-заглушек */
.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit; /* Наследует скругление от родителя */
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase; /* <-- Это свойство делает букву заглавной */
}

/* 5 вариантов градиентов для фона */
.avatar-bg-1 { background: linear-gradient(135deg, #FF6B6B, #FFC371); }
.avatar-bg-2 { background: linear-gradient(135deg, #6B8DFF, #71FFC3); }
.avatar-bg-3 { background: linear-gradient(135deg, #8E2DE2, #4A00E0); }
.avatar-bg-4 { background: linear-gradient(135deg, #11998e, #38ef7d); }
.avatar-bg-5 { background: linear-gradient(135deg, #f7971e, #ffd200); }

/* Кликабельные заголовки сортируемых таблиц (table_sort.js) */
.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sortable:hover { background-color: rgba(0, 0, 0, 0.03); }

/* Стили для больших заглушек на карточках (например, на странице leagues_list) */
.avatar-placeholder-lg {
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
    border-radius: 8px;
}

/* Плейсхолдер-градиент карточки на токене темы (вместо инлайн-хардкода) */
.card-placeholder-gradient {
    height: auto;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.9) 0%, rgba(var(--primary-rgb), 0.55) 100%);
}

.card-img-top-container {
    height: 150px; /* This sets a fixed height for the image area */
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--custom-white); /* theme-aware background for any empty space */
}

/* Styles for the image OR the placeholder inside the container */
.card-img-top-container img,
.card-img-top-container .avatar-placeholder {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* This is the key: it scales the image to fit without distortion */
}

/* Styles for the large placeholder avatar on cards */
.avatar-placeholder-lg {
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
    border-radius: 8px;
}

.app-sidebar .main-sidebar-header .header-logo img {
    height: 2.5rem;
}

/* ===== Контекстные .table-* варианты =====
   Zynix каждому варианту хардкодит `background-color:#fff` + `color:#000`
   (и те же #000 в --bs-table-{striped,active,hover}-color). Цветным задуман
   только тинт (--bs-table-bg уже на *-rgb и адаптируется), а фон/текст
   захардкожены — поэтому в тёмной теме подсвеченная строка выглядит белой
   с чёрным (нечитаемым) текстом. Сама тема покрывает только .table-dark
   (и то лишь border), так что чиним здесь — на токенах, для обеих тем.
   Затрагивает подсветку команд матча (.table-primary в standings_table),
   зону выхода из группы (.table-success в groups) и .table-light на строке. */
.table-primary,
.table-secondary,
.table-success,
.table-danger,
.table-warning,
.table-info,
.table-light,
.table-dark,
.table.table-primary,
.table.table-secondary,
.table.table-success,
.table.table-danger,
.table.table-warning,
.table.table-info,
.table.table-light,
.table.table-dark {
    --bs-table-color: var(--default-text-color);
    --bs-table-striped-color: var(--default-text-color);
    --bs-table-active-color: var(--default-text-color);
    --bs-table-hover-color: var(--default-text-color);
    color: var(--default-text-color);
    background-color: var(--custom-white);
}

/* Ячейки внутри таблицы с контекстным классом — тема отдельно форсит им color:#000 */
.table.table-primary > :not(caption) > * > *,
.table.table-secondary > :not(caption) > * > *,
.table.table-success > :not(caption) > * > *,
.table.table-danger > :not(caption) > * > *,
.table.table-warning > :not(caption) > * > *,
.table.table-info > :not(caption) > * > *,
.table.table-light > :not(caption) > * > *,
.table.table-dark > :not(caption) > * > * {
    color: var(--default-text-color);
}

/* Zynix .table-light форсит белый фон thead и чёрный текст (--bs-table-color:#000
   !important) — в тёмной теме это светлая полоса с чёрным текстом. Переводим на
   токены темы один раз: чинит шапки всех таблиц (standings, schedule, overview). */
.table thead.table-light {
    background-color: var(--custom-white);
    --bs-table-color: var(--default-text-color) !important;
    --bs-table-bg: rgba(var(--light-rgb), 0.4);
    --bs-table-border-color: var(--default-border);
}

/* Контейнер таблицы должен позволять прокрутку */
.table-responsive {
    overflow-x: auto;
}

.table-sticky-columns {
    border-collapse: separate; /* Необходимо для работы sticky */
}

/* Общие стили для "липких" ячеек */
.table-sticky-columns th:first-child,
.table-sticky-columns td:first-child,
.table-sticky-columns th:nth-child(2),
.table-sticky-columns td:nth-child(2) {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
}

/* Первая колонка (#) */
.table-sticky-columns th:first-child,
.table-sticky-columns td:first-child {
    left: 0;
    z-index: 2; /* Должна быть поверх второй колонки */
}

/* Вторая колонка (Команда) */
.table-sticky-columns th:nth-child(2),
.table-sticky-columns td:nth-child(2) {
    left: 45px; /* Ширина первой колонки, подберите по своему вкусу */
}

/* Важно: задаем фон, чтобы текст под "липкими" ячейками не просвечивал.
   Токены темы + явный color перебивают форс `--bs-table-color:#000` от .table-light,
   иначе шапка в тёмной теме — светлая полоса с чёрным текстом. */
.table-sticky-columns thead th {
    background: var(--custom-white);
    color: var(--default-text-color);
}
.table-sticky-columns tbody td {
    background: var(--bs-table-bg, var(--custom-white)); /* Фон ячеек таблицы */
}

/* Кликабельная строка таблицы (переход по data-href через JS) */
.clickable-row {
    cursor: pointer;
}

.landing-body .section-bg-2 {
    background-color: #eeefef;
}

.img-fluid {
    max-height: 320px;
}
/* Фото команды — авто-высота (без глобального капа .img-fluid) */
.team-photo {
    max-height: none;
    object-fit: contain;
}

.text-stat-page a {
    color: rgb(var(--info-rgb));
    text-decoration: underline;
    text-decoration-color: rgba(var(--info-rgb), 0.25);
    text-underline-offset: 0.25em;
    transition: text-decoration-color 0.2s ease-in-out;
}

.text-stat-page a:hover {
    text-decoration-color: rgba(var(--info-rgb), 1);
}

.h2, h2 {
    font-size: calc(1.325rem + .2vw);
}

.card-icon {
    display: inline-block;
    width: 12px;
    height: 16px;
    border-radius: 2px;
    vertical-align: middle;
}

.card-icon.yellow { background-color: rgb(var(--warning-rgb)); }
.card-icon.red { background-color: rgb(var(--danger-rgb)); }

    /* Новые стили для нашего кастомного таймлайна */
    .timeline-chat-container {
        padding: 1rem;
    }
    .timeline-half {
        text-align: center;
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--text-muted);
        text-transform: uppercase;
        margin: 1.5rem 0;
    }
    .timeline-event-row {
        display: flex;
        margin-bottom: 1rem;
    }
    .event-bubble {
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        max-width: 320px;
    }
    .bubble-left {
        background-color: var(--light);
        margin-left: 0.75rem;
    }
    .bubble-right {
        background-color: var(--primary-transparent);
        margin-right: 0.75rem;
        text-align: right;
    }
    .event-player-time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.25rem;
    }
    .bubble-right .event-player-time {
        flex-direction: row-reverse;
    }
    .event-minute {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-muted);
    }
    .event-description {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
    }
    .bubble-right .event-description {
        justify-content: flex-end;
    }
    .event-assistant {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }
.avatar img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ===== Playoff bracket (tree) ===== */
.bracket-scroll{overflow-x:auto;overflow-y:hidden;padding:.5rem 0;margin:0 -.5rem}
.bracket{display:flex;min-width:max-content;padding:0 .5rem;--bracket-gap:1.5rem;--bracket-line:rgba(var(--primary-rgb),.28)}
[data-theme-mode="dark"] .bracket{--bracket-line:rgba(var(--primary-rgb),.5)}
.bracket__round{flex:1 1 0;min-width:264px;display:flex;flex-direction:column;padding:0 var(--bracket-gap)}
.bracket__round-title{text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:.25rem 0 1rem;display:flex;align-items:center;justify-content:center;gap:.35rem}
.bracket__matchups{flex:1;display:flex;flex-direction:column}
.bracket__matchup{flex:1;display:flex;flex-direction:column;justify-content:center;position:relative;padding:.85rem 0}
/* Orphan-раунд (play-in): не участвует в чётной развязке (нет ни --feeds, ни
   --fed). Не растягиваем его матчи на всю (высокую) колонку соседа — иначе
   единственный матч «висит» в центре пустоты. Прижимаем к верху, под заголовок. */
.bracket__round:not(.bracket__round--feeds):not(.bracket__round--fed) .bracket__matchups{justify-content:flex-start}
.bracket__round:not(.bracket__round--feeds):not(.bracket__round--fed) .bracket__matchup{flex:0 0 auto}
/* connectors (pure CSS, tolerant of dynamic height). Рисуются ТОЛЬКО на стыках
   с чётным делением (round--feeds/round--fed выставляет сервис); при play-in /
   нестандартной сетке соединители в кривом стыке подавляются. */
.bracket__round--feeds .bracket__matchup::after{content:"";position:absolute;left:100%;width:var(--bracket-gap);border-right:2px solid var(--bracket-line)}
.bracket__round--feeds .bracket__matchup:nth-child(odd)::after{top:50%;height:100%;border-top:2px solid var(--bracket-line)}
.bracket__round--feeds .bracket__matchup:nth-child(even)::after{bottom:50%;height:100%;border-bottom:2px solid var(--bracket-line)}
.bracket__round--fed .bracket__matchup::before{content:"";position:absolute;right:100%;width:var(--bracket-gap);top:50%;border-top:2px solid var(--bracket-line)}
/* match card */
.bracket__match{display:block;color:inherit;text-decoration:none;background:var(--custom-white);border:1px solid var(--default-border);border-radius:.5rem;overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s}
.bracket__match:hover{color:inherit}
.bracket__match:hover{box-shadow:0 6px 20px rgba(16,24,40,.12);transform:translateY(-2px);border-color:var(--primary02)}
.bracket__match-top{display:flex;align-items:center;justify-content:space-between;gap:.4rem;flex-wrap:wrap;padding:.35rem .6rem;border-bottom:1px solid var(--default-border)}
.bracket__match-no{font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);display:flex;align-items:center;gap:.3rem;white-space:nowrap;min-width:0}
.bracket__match-top .badge{flex-shrink:0}
.bracket__team{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;position:relative}
.bracket__team+.bracket__team{border-top:1px solid var(--default-border)}
.bracket__team-name{flex:1;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bracket__team-score{font-weight:700;font-size:.9rem;min-width:1.4em;text-align:center}
.bracket__team--tbd .bracket__team-name{color:var(--text-muted);font-style:italic}
/* winner: ТОЛЬКО прошедшая команда, мягко — success-цветом, без bold и без полосы */
.bracket__team--win{background:rgba(var(--success-rgb),.07)}
.bracket__team--win .bracket__team-name,.bracket__team--win .bracket__team-score{color:rgb(var(--success-rgb))}
.bracket__match-foot{display:flex;align-items:center;justify-content:space-between;gap:.4rem;flex-wrap:wrap;padding:.35rem .6rem;border-top:1px solid var(--default-border);background:rgba(var(--primary-rgb),.03)}
.bracket__match-dt{font-size:.72rem;color:var(--text-muted);display:flex;align-items:center;gap:.35rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bracket__match-foot .btn{flex-shrink:0}
@keyframes bracket-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.bracket .badge-live-pulse{animation:bracket-pulse 1.8s infinite}
.bracket__empty{text-align:center;padding:1.5rem;color:var(--text-muted)}

/* ===== Счёт матча (partials/match/score.html) =====
   Единый вид счёта на всех экранах: нейтральный цвет (не primary), success-
   акцент только на победившей стороне — та же семантика, что в сетке плей-офф. */
.match-score {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--default-text-color);
    white-space: nowrap;
}
.match-score--lg {
    font-size: 1.5rem;
    font-weight: 700;
}
.match-score--hero {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}
.match-score__sep {
    color: var(--text-muted);
    font-weight: 400;
}
.match-score__value--win {
    color: rgb(var(--success-rgb));
}
/* идёт матч — счёт живой, победитель ещё не подсвечивается */
.match-score--live .match-score__value {
    color: rgb(var(--danger-rgb));
}
.match-score--vs {
    color: var(--text-muted);
    font-weight: 500;
}

.tab-content .tab-pane {
    padding: 0;
}

/* Cookie Consent Banner — добавить в конец core/static/core/css/custom.css */

.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--custom-white, #fff);
    border-top: 1px solid var(--default-border, #e9ebec);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    z-index: 1060;
    transition: opacity 0.3s ease;
}

[data-theme-mode="dark"] .cookie-consent-banner {
    background: var(--custom-white);
    border-top-color: var(--default-border);
}

/* На мобиле баннер стекается в столбец — ужимаем вертикальный футпринт,
   чтобы занимать меньше нижней части экрана. */
@media (max-width: 575.98px) {
    .cookie-consent-banner .py-3 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .cookie-consent-banner p {
        font-size: 0.75rem;
        line-height: 1.35;
    }
}

/* Lighthouse: improve contrast ratio for WCAG AA */
.landing-body .text-muted {
    color: #525960 !important;
}
.landing-footer .op-6 {
    opacity: 0.75 !important;
}


.scrollToTop {
    bottom: 96px !important;
}

/* Тач-таргеты: на мобиле иконочные кнопки и элементы пагинации должны быть
   не меньше 40x40px (WCAG 2.5.5 / комфортное нажатие пальцем). */
@media (max-width: 575.98px) {
    .btn-icon,
    .pagination .page-link {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}