@font-face{font-family:Manrope;src:url(./fonts/manrope400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(./fonts/manrope500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(./fonts/manrope600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(./fonts/manrope700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
*,::after,::before {box-sizing: border-box}
html, body {padding: 0; margin: 0; -webkit-tap-highlight-color: transparent; font-family: 'Manrope', sans-serif; background: var(--sta-background-primary);}
html {scroll-padding-top: 80px;overflow-y: scroll;position: relative}
body {min-height: 100dvh;margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.3; text-align: left; display: flex;flex-direction: column; color: var(--sta-color-text);}
h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: .5rem;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom: .5rem; font-family: inherit; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: inherit;}
p {margin-top: 0; margin-bottom: 1rem;}
a {text-decoration: none; outline: none; color: var(--sta-color-links);}
a:hover {text-decoration: none; color: var(--sta-color-links-hover);}
button, input, optgroup, select, textarea {margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; outline: none;}
.container-fluid {max-width: 1440px; margin: 0 auto; padding-right: 15px; padding-left: 15px;}
.container-fluid.not-padded {padding-right: 0; padding-left: 0;}
.nowrap {white-space: nowrap;}
.inl {display: inline-block; vertical-align: top;}
.relative {position: relative;}
.r90 {transform: rotate(90deg);}
.r180 {transform: rotate(180deg);}
.r270 {transform: rotate(270deg);}
.pb150 {padding-bottom: 150px;}
.mt0 {margin-top: 0!important;}
.mt1 {margin-top: 1px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px!important;}
.mt25 {margin-top: 25px!important;}
.mt30 {margin-top: 30px;}
.mt45 {margin-top: 45px;}
.mb15{margin-bottom: 15px!important;}
.mb25{margin-bottom: 25px!important;}
.w100 {width: 100% !important;}
b{font-weight: 600;}
.fw500{font-weight: 500;}
.no-decoration {text-decoration: none !important;}
.clear-both {clear: both;}
.color1{color: var(--sta-color-text-secondary)}
.pointer { cursor: pointer; }
.arrow-line-down{margin-top: 3px;min-width: 13px;width: 8px;height: 11px;display: block;background: url(img/arrow-line-down.svg) center no-repeat}
.arrow-line-up{margin-top: 3px;min-width: 13px;width: 8px;height: 11px;display: block;background: url(img/arrow-line-up.svg) center no-repeat}
.stable-stats{margin-top: 3px;min-width: 13px;width: 8px;height: 11px;display: block;background: url(img/wave.svg) center no-repeat;background-size: contain}
.f-cookie {position: fixed; left: 15px; width: 300px; bottom: 20px;}
.f-cookie-cnt {padding: 9px 15px; margin-right: 65px; font-size: 0.8em; border-radius: 5px; background: var(--sta-card-bg); color: #333; box-shadow: 0 0px 12px rgba(0, 0, 0, 0.07);}
.f-cookie-cnt-d { text-align: justify; }
.f-cookie-cnt-d a { color: var(--sta-color-danger); }
.f-cookie a:hover { text-decoration: underline; color: var(--sta-color-danger); }
.f-cookie-cnt-accept { transition: all 0.3s; background: var(--sta-gradient-primary); color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; border-radius: 5px; margin-top: 8px; }
.f-cookie-setup { margin-top: 5px; }
.f-cookie-setup button { transition: all 0.3s; text-align: center; width: 100%; padding: 5px 10px; border: none; background: var(--sta-card-bg); border-radius: 4px; color: black; }
.f-cookie-setup button:hover { cursor: pointer; text-decoration: underline; }
.tz-select-deploy { position: relative; }
.tz-select { position: absolute; height: 250px; bottom: 100%; overflow-y: scroll; padding: 5px; border-radius: 5px; color: white; background: #333; box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1); z-index: 1; }
.tz-select div { white-space: nowrap; padding: 10px; }
.tz-select div:hover, .tz-select div.selected { background: #4d4d4d; }

:root{
    --transition: .3s;
    --sta-gradient-primary: linear-gradient(135deg, #FF4D4D, #F9A826);
    --sta-color-danger: #F43F5E;
    /* Light theme retired (nova is dark-only now) — these tokens carry the
       former [data-theme="dark"] values directly as the sole default. */
    --sta-background-primary: #0B0E14;
    --sta-color-text: #F5F7FA;
    --sta-color-text-secondary: #B4C0D2;
    --sta-color-text-muted: #7C8AA0;
    --sta-card-bg: rgba(255, 255, 255, .04);
    --sta-card-border: rgba(255, 255, 255, .14);
    --sta-surface-muted: rgba(255, 255, 255, .08);
    --sta-color-links: #FF4D4D;
    --sta-color-links-hover: #F9A826;
    --sta-color-secondary: #fff;
    --sta-color-warning: #F43F5E;
    --sta-color-light: #64748B;
    --sta-color-ultralight: rgba(255, 255, 255, .08);
    --sta-background-ultralight: rgba(255, 255, 255, .04);

    /* spacing scale — used only by new/rewritten rules, not retrofitted site-wide */
    --sta-space-1: 4px;
    --sta-space-2: 8px;
    --sta-space-3: 12px;
    --sta-space-4: 16px;
    --sta-space-5: 24px;
    --sta-space-6: 32px;
    --sta-space-7: 48px;
    --sta-space-8: 64px;

    /* border-radius scale */
    --sta-radius-sm: 6px;
    --sta-radius-md: 10px;
    --sta-radius-lg: 16px;
    --sta-radius-pill: 999px;

    /* elevation — own signature (tight, brand-gradient-tinted), not stav's glass shadow */
    --sta-shadow-resting: 0 0 0 1px rgba(255, 77, 77, .12), 0 2px 8px rgba(0, 0, 0, .35);
    --sta-shadow-hover: 0 0 0 1px rgba(249, 168, 38, .3), 0 0 28px rgba(249, 168, 38, .3), 0 2px 6px rgba(0, 0, 0, .35);

    /* type scale */
    --sta-fs-display: 3rem;
    --sta-fs-h1: 2rem;
    --sta-fs-h2: 1.75rem;
    --sta-fs-h3: 1.5rem;
    --sta-fs-h4: 1.25rem;
    --sta-fs-body-sm: 0.875rem;
    --sta-fs-caption: 0.75rem;

    /* status/score badge tints — grown from the existing .table__bg_y/_g/_r pattern */
    --sta-badge-neutral-bg: rgba(78, 80, 84, .12);
    --sta-badge-neutral-fg: var(--sta-color-text-secondary);
    --sta-badge-neutral-bd: rgba(78, 80, 84, .28);
    --sta-badge-success-bg: rgba(61, 193, 141, .14);
    --sta-badge-success-fg: #3dc18d;
    --sta-badge-success-bd: rgba(61, 193, 141, .32);
    --sta-badge-danger-bg: rgba(244, 63, 94, .14);
    --sta-badge-danger-fg: var(--sta-color-danger);
    --sta-badge-danger-bd: rgba(244, 63, 94, .32);

    /* tariff plan colors, tokenized (same hexes as before) */
    --sta-plan-blue: #29aaed;
    --sta-plan-yellow: #ffba33;
    --sta-plan-green: #3dc18d;
}

/* POPUP */
.pp {max-width: 730px;width: 100%; border-radius: 10px;background-color: var(--sta-card-bg);}
.pp-cpt {padding: 10px 0; border-bottom: 1px solid lightgray; margin-bottom: 15px; font-size: 1.1em; font-weight: bold; margin: 0 15px;}
.pp-cpt.no-margin {margin-bottom: 0px;}
.pp-cnt {padding: 30px 15px;}
.pp-cnt.not-padded {padding: 0;}
.pp-close {float: right; position: absolute; top: 12px; right: 14px; cursor: pointer;}
.pp-close svg {width: 24px; height: 24px;}
.pp-cpt h2 {font-size: 1.2em; margin-bottom: 0; margin-right: 60px;}
@media (max-width: 750px) {
	.sys-popup {position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important;}
	.pp {border-radius: 0; position: absolute; top: 0; left: 0; bottom: 0; padding: 0px; width: 100%; overflow: auto;}
	.pp-cpt h2 {text-align: left; font-size: 1em;}
	.pp-cnt {padding: 15px;}
}

/* TOOLTIP */
.js-tooltip { width: fit-content;max-width: 250px; background: var(--sta-card-bg); box-shadow: 0 2px 10px rgba(0,0,0,0.2); border-radius: 10px; font-size: 12px; padding: 5px 10px; text-align: justify; opacity: 0; transition: opacity 0.3s; }

/* COOKIE */
.trackers-form input:checked + .tracker-switch-slider { background-color: #3DC18D; }
.trackers-form input:checked + .tracker-switch-slider:before { transform: translateX(18px); }
.tracker-switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 8px;
}
.tracker-switch-info { display: flex; align-items: center; }
.tracker-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    margin-right: 15px;
}
.tracker-switch input { opacity: 0; width: 0; height: 0; }
.tracker-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}
.tracker-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.tracker-switch-label { font-weight: bold; }
.tracker-switch input:disabled + .tracker-switch-slider { background-color: #95a5a6; cursor: not-allowed; }
.tracker-switch input:disabled + .tracker-switch-slider:before { background-color: #ecf0f1; }
.tracker-switch input:checked:disabled + .tracker-switch-slider { background-color: #3DC18D; opacity: 0.7; }
.tracker-toggle-description {
    background-color: var(--sta-color-text-muted);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.tracker-toggle-description:hover { background-color: #29AAED; }
.tracker-description {
    display: none;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 15px;
    animation: fadeIn 0.3s;
	font-size: 14px;
}
.trackers-form-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.trackers-form-buttons button {
	border-radius: 10px;
	padding: 12px 0;
	cursor: pointer;
}
.trackers-form-submit {
	background: var(--sta-gradient-primary);
	color: white;
	border: none;
}
.trackers-form-close {
	border: 2px solid #E4E4E4;
	background: var(--sta-card-bg);
	transition: all 0.3s;
    color: black;
}
.trackers-form-close:hover{
	background: #E4E4E4;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* LAYOUT */
.title{
    font-weight: 600;
    color: var(--sta-color-text);
}
.title__h1{
    font-size: 32px;
    margin-bottom: 10px;
    line-height: 138%;
    letter-spacing: -0.01em;
}
.title__h2{
    font-size: 28px;
    margin-bottom: 15px;
    line-height: 138%;
    letter-spacing: -0.01em;
}
.title__white{
    color: white;
}
.text{
    font-size: 14px;
    line-height: 132%;
    color: var(--sta-color-text);
    margin-top: 10px;
}
.text__lh-155{
    line-height: 155%;
}
.text a{
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--sta-color-danger);
}
.title__h2 + .text{
    margin-top: 14px;
}
.title__h2:has(+ .text){
    margin-bottom: 0;
}

.title__cnt{
    font-weight: 500;
    font-size: 24px;
    color: var(--sta-color-text);
    margin: 0;
}
.title__cnt + .text{
    margin-top: 0;
    font-size: 12px;
}
.title__cnt:not(:has(+ .text)){
    margin-bottom: 15px;
}
.text__w70{
    max-width: 1016px;
}
.content{
    overflow: hidden;
}
.breadcrumbs{
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 4px;
}
.breadcrumbs a{
    display: flex;
    align-items: center;
    grid-gap: 15px;
}
.breadcrumbs a:hover{
    text-decoration: underline;
}
.btns{
    display: flex;
    flex-wrap: wrap;
    grid-gap: 15px;
}
.btns.btns__nw{
    flex-wrap: inherit;
    grid-gap: 0;
}
.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    min-height: 60px!important;
    padding: 10px;
    border-radius: 10px;
    background: var(--sta-card-bg);
    font-weight: 600;
    font-size: 16px;
    line-height: 131%;
    text-align: center;
    color: var(--sta-color-text);
    cursor: pointer;
}
.btn.btn__w-150{
    min-width: 160px;
}
.slick-initialized .btn.slick-slide {
    display: flex;
    margin-right: 15px;
}
.btn.active, .btn.selected{
    cursor: inherit;
    color: #fff;
    background: var(--sta-gradient-primary);
}

.btn1{
    padding: 5px 15px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    min-height: 40px;
    border-radius: 10px;
    background: var(--sta-gradient-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.btn1.btn1-gray{
    background: var(--sta-color-light);
}

/* Unified button system (additive — layered alongside .btn/.btn1/.def-btn/.tariff-button/.block1__btn
   in templates rather than replacing them, so an unmigrated element just keeps its old styling) */
.sta-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sta-space-2);
    height: 40px;
    padding: 0 var(--sta-space-4);
    border-radius: var(--sta-radius-md);
    font-weight: 600;
    font-size: var(--sta-fs-body-sm);
    line-height: 150%;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.sta-btn.sta-btn--lg{
    height: auto;
    min-height: 60px;
    font-size: 16px;
}
.sta-btn--primary{
    background: var(--sta-gradient-primary);
    color: #fff;
}
.sta-btn--neutral{
    background: var(--sta-card-bg);
    color: var(--sta-color-text);
}
.sta-btn--muted{
    background: var(--sta-surface-muted);
    color: var(--sta-color-light);
    cursor: default;
}
.sta-btn--primary:hover:not(.sta-btn--muted){
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--sta-shadow-hover);
}

.c-scroll{
    overflow-y: auto;
}

@media (max-width: 992px) {
    .title__h1{
        font-size: 24px;
    }
    .title__h2{
        font-size: 20px;
    }
    .text{
        font-size: 14px;
    }
    .title__cnt + .text{
        font-size: 14px;
    }
}

/* TABLE */
.table{
    font-weight: 400;
    font-size: 14px;
    color: var(--sta-color-text);
    border-radius: 10px;
    background: var(--sta-card-bg);
    box-shadow: var(--sta-shadow-resting);
    /*overflow: hidden;*/
}
.js-table .table:not(.active){
    display: none;
}
.table__row:not(.hide__bb):has(+ .table__row), .table__h{
    border-bottom: 1px dashed var(--sta-card-border);
}
.table__h, .table__row{
    display: grid;
    grid-template-columns: 21px 1fr 250px;
    grid-gap: 5px;
    min-height: 21px;
    padding: 5px 15px;
}
.table__h{
    font-weight: 500;
}
.table__group-name{
    padding: 10px 15px 5px;
    font-weight: 600;
    color: #4E5054;
}
.table__row:hover{
    background-color: var(--sta-background-ultralight);
}
.table__statistic{
    grid-template-columns: 1fr minmax(auto, 470px);
}
.table__judges{
    grid-template-columns: 1fr;
}
.table__trend{
    grid-template-columns: 1fr 350px;
}
.table__events{
    grid-template-columns: 450px 1fr 1fr;
}
.table__events b{
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-gap: 4px;
}
.table__events b.has-stat-bar::after{
    content: '';
    display: block;
    height: 4px;
    width: 100%;
    border-radius: var(--sta-radius-pill);
    background: linear-gradient(to right, var(--sta-color-links) var(--stat-bar-pct, 0%), var(--sta-surface-muted) var(--stat-bar-pct, 0%));
}
.table__referees{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.table__row-hidden{
    display: none;
}
.table__events-h > *{
    font-weight: 500;
}
.table__statistic-h{
    font-weight: 600;
    font-size: 16px;
    color: var(--sta-color-text);
    padding: 9px 15px;
    position: relative;
}
.table__inds{
    display: flex;
    align-items: center;
    grid-gap: 10px;
}
.table__ind{
    width: 50px;
    height: 21px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.table__bg_y:not(:empty){
    background: rgba(255, 186, 51, 0.25);
}
.table__bg_g:not(:empty){
    background: rgba(61, 193, 141, 0.25);
}
.table__bg_r:not(:empty){
    background: rgba(171, 26, 57, 0.25);
}
.lineups-extra-stats{
    background: #F4F5F6;
    position: absolute;
    z-index: 1;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
}
.lineups-extra-stats div{
    display: flex;
    justify-content: space-between;
    gap: 15px;
}
.lineups-extra-stats span{
    white-space: nowrap;
}
.table__name{
    display: flex;
    flex-direction: column;
    grid-gap: 5px;
}
.table__h-toggle{
    transform: rotate(90deg);
    margin-left: auto;
    width: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.table__h-toggle.active{
    transform: rotate(0);
}
.table__trends{
    display: flex;
    grid-gap: 12px;
    flex-direction: row;
}
.table__stat{
    font-weight: 600;
    font-size: 14px;
    color: var(--sta-color-text);
    display: flex;
    flex-direction: column;
}
.table__stat span{
    font-weight: 400;
}
.table__rounds{
    display: flex;
    align-items: center;
    grid-gap: 5px;
}
.table__rounds > div{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(16, 16, 16, 0.5);
}
.table__rounds > .table__round-g{
    background-color: #3dc18d;
}
.table__rounds > .table__round-r{
    background-color: var(--sta-color-danger);
}

.table__prob{
    background: rgba(61, 193, 141, 0.25);
    border-radius: 5px;
    width: 70px;
    height: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*.table__stat .table__prob span{*/
/*    font-weight: 600;*/
/*    font-size: 14px;*/
/*    text-align: center;*/
/*    color: var(--sta-color-text);*/
/*}*/
.table__info-i{
    background: #f4f5f6;
    border-radius: 5px;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.table__info{
    display: none;
    flex-flow: column;
    border-radius: 5px 0 5px 5px;
    width: 128px;
    height: 94px;
    background: #f4f5f6;
    position: absolute;
    top: 19px;
    right: 0;
    padding: 5px;
    z-index: 1;
}
.table__info-i:hover .table__info{
    display: flex;
}
.table__info span{
    height: 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 12px;
    color: var(--sta-color-text);
}
.table__info b span{
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    color: var(--sta-color-text);
}
.table__stat-stat{
    flex-direction: row;
    grid-gap: 10px;
}
.table__win{
    font-weight: 400;
    font-size: 12px;
    text-align: right;
    color: var(--sta-color-text);
    display: flex;
    align-items: center;
    line-height: 93%;
}

@media (max-width: 992px) {
    .table__statistic-h:has(> .table__h-toggle) {
        grid-template-columns: 21px 1fr 250px;
    }
    .table__referees .table__name {
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .table__referees-h .table__name{
        display: none;
    }
    .table__row-hidden{
        display: block;
    }
    .table__info{
        border-radius: 5px;
        right: -15px;
    }
    .event-vbet-report-entity .table__trend{
        grid-template-columns: 1fr;
    }
    .event-vbet-report-entity .table__trend div + div{
        text-align: right;
    }
    .table__ind{
        width: 40px;
    }
    .table__name{
        font-weight: 600;
    }
}

/* COMMANDS */
.commands{
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-gap: 28px 20px;
}
.commands__team{
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
    align-items: center;
    text-align: center;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
}
.commands__team img{
    width: 150px;
    height: 70px;
    object-fit: contain;
}

/* LEAGUE */
.js-league-cnt{display: none}
.js-league-cnt.active{display: block}
.loader__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader {
    width: 48px;
    height: 48px;
    border: 2px solid grey;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.loader.loader__min{ width: 15px; height: 15px; }

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* HEADER */
.header, .content, .footer__wrap{
    position: relative;
    /*z-index: 1;*/
}
.header{
    position: sticky;
    top: 0;
    z-index: 3;
}
.h{
    width: 100%;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0 0 10px 10px;
    padding: 10px 0;
    position: relative;
    z-index: 2;
    height: 68px;
}
[data-theme="dark"] .h{
    /* opaque-ish + blur rather than the translucent card token: this sits on
       top of the homepage's decorative gradient shapes, so a low-alpha token
       isn't enough on its own to read as a frosted sticky header */
    background: rgba(18, 21, 29, .8);
}
.h > .container-fluid{
    height: 100%;
}
.h__t{
    display: flex;
    align-items: center;
    grid-gap: 120px;
    height: 100%;
}
.h__logo{
    line-height: 0;
    display: block;
}
.h__logo svg{
    max-width: 100%;
}
.h__menu ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    grid-gap: 16px;
}
.h__menu ul li > *{
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: capitalize;
    color: var(--sta-color-text);
    padding: 5px 16px;
    border-radius: 4px;
    cursor: pointer;
}
[data-theme="dark"] .h__menu ul li > *{
    /* resting state deliberately a step below full brightness, so hover/
       active reaching full white reads as a real state change next to the
       (already bright) logo, rather than everything being equally bright */
    color: rgba(241, 245, 249, .82);
}
.js-btm:hover:not(.h__btn){
    /* was a hardcoded light-theme color (#f5f4f4), never adapted for dark
       mode — a stray bright-white flash on the dark header */
    background: var(--sta-surface-muted);
    color: var(--sta-color-text);
}
.js-btm.active:not(.h__btn){
    /* the flat --sta-surface-muted fill (rgba(255,255,255,.08) in dark mode)
       reads as barely-there — make the active section clearly branded
       instead, with the same accent used for CTAs/logo */
    background: none;
    color: var(--sta-color-links);
    position: relative;
}
.js-btm.active:not(.h__btn)::after{
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--sta-gradient-primary);
}
.h__btns{
    margin-left: auto;
    display: flex;
    align-items: center;
    grid-gap: 20px;
}
.h__btn{
    display: flex;
    align-items: center;
    grid-gap: 13px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: capitalize;
    color: var(--sta-color-text);
    border-radius: 4px;
    cursor: pointer;
}
.h__btn img{
    width: 20px;
    height: 20px;
    object-fit: cover;
}
.theme-toggle__icon--sun{ display: none; }
[data-theme="dark"] .theme-toggle__icon--sun{ display: block; }
[data-theme="dark"] .theme-toggle__icon--moon{ display: none; }

.btm{
    width: 100%;
    position: absolute;
    top: -700px;
    z-index: 1;
    background: var(--sta-card-bg);
    padding: 30px 0 20px;
    transition: top var(--transition);
}
.btm.active{
    top: 38px;
}
.btm__i{
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 20px;
}
.btm__search{
    grid-column: 2 / 4;
}
.btm__search .search__input{
    background: var(--sta-background-ultralight);
}
.search__section{
    display: flex;
    flex-direction: column;
    /*gap: 20px;*/
}
.search__result{
}
.search__block{
    width: 100%;
    border-radius: 10px;
    margin-top: 10px;
    background: var(--sta-card-bg);
    padding: 20px 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}
.search__block:hover{
    background: var(--sta-background-ultralight);
}
img[src$="team_icon_placeholder.svg"],
img[src$="league_icon_placeholder.svg"],
img[src$="cup_icon_placeholder.svg"]{
    background: var(--sta-color-text-muted);
    border-radius: var(--sta-radius-sm);
    padding: 6px;
    box-sizing: border-box;
}
.btm__i.active{
    display: grid;
}
.btm__cards{
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
}
.btm__wrap{
    background-image: linear-gradient(180deg, #4e5054 0%, #8b8e95 100%);
    width: 100%;
    border-radius: 10px;
    transition: background var(--transition);
}
.btm__wrap.btm__wrap_search{
    cursor: pointer;
}
.btm__wrap.btm__wrap_search:hover, .btm__wrap.btm__wrap_search.active{
    background-image: linear-gradient(180deg, #29AAED 0%, #229ED9 100%);
}
.btm__wrap.btm__wrap_tg{
    background-image: linear-gradient(180deg, #29aaed 0%, #229ed9 100%)
}
.btm__wrap:not(.btm__wrap_tg):not(.btm__wrap_search):hover{
    background-image: var(--sta-gradient-primary);
}
.btm__card{
    width: 100%;
    min-height: 110px;
    padding: 15px 12px 15px 20px;
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
}
.btm__card-title{
    font-weight: 600;
    font-size: 20px;
    color: #fff;
}
.btm__card-text{
    margin-top: 5px;
    font-size: 14px;
    line-height: 150%;
    color: #fff;
}
.btm__card-text span{
    font-weight: 600;
}
.btm__card-btns{
    display: flex;
    flex-wrap: wrap;
    grid-gap: 15px;
}
.btm__card-btn{
    margin-top: 9px;
    border: 1px solid #fff;
    border-radius: 5px;
    width: 100%;
    max-width: 126px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    padding: 4px;
}
.btm__card-btn:hover{
    background: var(--sta-card-bg);
    color: var(--sta-color-text);
}
.btm__b{
    position: relative;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.btm__slide-cnt{
    background: rgba(11, 11, 11, 0.7);
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 44px;
}
.btm__slider-h{
    font-weight: 600;
    font-size: 128px;
    text-align: center;
    color: #fff;
}
.btm__slider-t{
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    color: #fff;
}
.btm__live{
    position: relative;
    height: 100%;
    background: #f4f5f6;
    border-radius: 10px;
    padding: 27px 40px;
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
}
.btm__live-title{
    font-weight: 600;
    font-size: 32px;
    color: var(--sta-color-text);
}
.btm__live-text{
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
}
.btm__live-text span{
    font-weight: 600;
}
.btm__btns{
    margin-top: auto;
    display: flex;
    flex-direction: column;
    grid-gap: 15px;
}
.btm__btn{
    margin-top: auto;
    border-radius: 10px;
    width: fit-content;
    /*max-width: 213px;*/
    padding: 9px;
    background: var(--sta-gradient-primary);
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 17px;
}
.btm__btn:hover{
    color: #fff;
}
.btm__close{
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: -100dvh;
    height: 100dvh;
    left: 0;
    right: 0;
    cursor: pointer;
}
.btm.active + .btm__close{
    top: 0;
}
.match{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    grid-gap: 10px;
    border-bottom: 1px dashed #878787;
    padding-bottom: 10px;
}
.match__l{
    display: flex;
    flex-direction: column;
    grid-gap: 5px;
}
.match__name{
    font-weight: 600;
    font-size: 14px;
    color: var(--sta-color-text);
}
.match__r{
    display: flex;
    flex-direction: column;
    grid-gap: 5px;
}
.match__scores{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5px minmax(0, 1fr);
    grid-gap: 3px;
}
.match__score{
    width: 100%;
    border-radius: var(--sta-radius-pill);
    background: var(--sta-badge-neutral-bg);
    border: 1px solid var(--sta-badge-neutral-bd);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: var(--sta-badge-neutral-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.match__score.match__score_g{
    background: var(--sta-badge-success-bg);
    border-color: var(--sta-badge-success-bd);
    color: var(--sta-badge-success-fg);
}
.match__time{
    font-size: 14px;
    text-align: right;
    color: var(--sta-color-text-secondary);
}
.match__status{
    min-width: 100px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    padding: 0 9px;
    height: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--sta-radius-pill);
    margin-left: auto;
    color: var(--sta-badge-neutral-fg);
    background: var(--sta-badge-neutral-bg);
    border: 1px solid var(--sta-badge-neutral-bd);
}
.match__status-g{
    background: var(--sta-badge-success-bg);
    border-color: var(--sta-badge-success-bd);
    color: var(--sta-badge-success-fg);
}
.match__status-r{
    background: var(--sta-badge-danger-bg);
    border-color: var(--sta-badge-danger-bd);
    color: var(--sta-badge-danger-fg);
}
.h-search__cnt{
    display: flex;
    flex-flow: column;
    grid-gap: 10px;
    max-height: 440px;
    margin-top: 20px;
    overflow: auto;
}
.h-search__card{
    border-radius: 10px;
    padding: 20px;
    background: #f4f5f6;
}
.h-search__card .match{
    grid-template-columns: minmax(0, 1fr) 300px;
}
.h-search__card .match__scores{
    max-width: 100px;
    width: 100%;
    margin-left: auto;
}
.h-search__card .match{
    border-bottom: none;
    padding-bottom: 0;
}
.h-search__card .match__l{
    justify-content: center;
}
.match__h{
    font-size: 14px;
    color: var(--sta-color-text-secondary);
}

.h__menu-wrap{
    flex: 1;
    display: flex;
    align-items: center;
    grid-gap: 120px;
    height: 100%;
}
.h__burger{
    display: none;
    margin-left: auto;
    width: 20px;
    min-width: 20px;
    padding: 10px 0;
    flex-flow: column;
    grid-gap: 4px;
}
.h__overlay{
    position: fixed;
    top: 60px;
    right: 0;
    right: -100%;
    width: 100%;
    background: #010101ab;
    z-index: 122;
    /* this is the mobile slide-in menu's backdrop — its own toggle button
       (.h__burger) and the ".h.active" rule that slides it in are both
       already gated to the same @media(max-width:992px) breakpoint below,
       but this base rule had no such gate: at any wider viewport it still
       sat "display:block" and "right:-100%" (i.e. pushed one full viewport
       width off-screen to the right), which was silently doubling the
       document's scrollable width and surfacing a horizontal scrollbar */
    display: none;
    height: calc(100dvh - 50px);
    transition: all .3s;
}
.block1__btn.btm__burger{
    display: none;
}

@media (max-width: 1300px) {
    .h__t{
        grid-gap: 50px;
    }
    .h__menu-wrap{
        grid-gap: 50px;
    }
}
@media (max-width: 992px) {
    /*.h__menu{*/
    /*    display: none;*/
    /*}*/
    /*.h__btns{*/
    /*    display: none;*/
    /*}*/
    .h__menu-wrap{
        padding: 50px 15px;
        position: fixed;
        top: 50px;
        width: 300px;
        right: -300px;
        z-index: 123;
        height: calc(100dvh - 50px);
        background: var(--sta-card-bg);
        flex-flow: column;
        align-items: flex-end;
        transition: all .3s;
    }
    .h.active .h__menu-wrap, .h.active .h__overlay{
        right: 0;
    }
    .h__burger{
        display: flex;
    }
    .h__overlay{
        display: block;
    }
    .h__burger-i{
        width: 100%;
        height: 2px;
        background: #010101;
    }
    .h__menu{
        order: 1;
    }
    .h__menu ul{
        flex-flow: column;
        align-items: flex-end;
    }
    .h__menu ul li > *{
        padding: 5px 0;
    }
    .btm{
        top: 51px;
        right: -100%;
        transition: all .3s;
        position: fixed;
    }
    .btm.active{
        height: calc(100dvh - 51px);
        overflow: auto;
        z-index: 55;
        right: 0;
        top: 51px;
    }
    .btm__i{
        grid-template-columns: minmax(0, 1fr);
    }
    .block1__btn.btm__burger{
        width: 100%;
        margin-bottom: 15px;
        display: flex;
        max-width: 100%;
    }
    .match__score{
        min-width: 44px;
    }
    .btm__i.active.btm__search{
        display: flex;
        flex-flow: column;
    }
    .btm__i.active.btm__search .search__section{
        width: 100%;
    }
}

/* BLOCK1 */
.block1{
    padding-bottom: 45px;
}
.block1__cnt{
    display: grid;
    /* photo slot > the two side cards combined, so it reads as the hero
       instead of a fifth same-weight tile */
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: minmax(240px, 1fr) minmax(240px, 1fr);
    grid-gap: 20px;
}
.block1__i_b, .block1__i_v, .block1__i_event{
    grid-row-start: 1;
    grid-row-end: 3;
}
.block1__i_v{
    grid-column-start: 3;
}
.block1__i{
    background: var(--sta-card-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--sta-shadow-resting);
    transition: box-shadow .25s ease, transform .25s ease;
}
.block1__i:hover{
    box-shadow: var(--sta-shadow-hover);
    transform: translateY(-3px);
}
[data-theme="dark"] .block1__i{
    /* .block1__i sits on top of the homepage's decorative gradient shapes
       (.decoration/.decoration2 etc, img/angle.svg) — the translucent
       --sta-card-bg overlay (rgba(255,255,255,.04)) is fine on the plain
       dark page background but doesn't read as a card over a bright
       orange shape, so use an opaque dark fill here instead. */
    background: #12151d;
}
.block1__i-empty{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block1__slide{
    position: relative;
    height: 100%!important;
}
.block1__slide::after{
    /* always-on directional scrim (banner or fallback alike) instead of the
       old flat, content-gated overlay, so headline/description/button text
       sits legibly in a darkened zone rather than dead-center on bare photo */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, transparent 40%, rgba(9, 11, 16, .8) 100%);
    pointer-events: none;
}
.block1__slide-cnt{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 44px;
}
.block1__slider-h{
    font-weight: 600;
    font-size: 128px;
    text-align: left;
    color: #fff;
}
.block1__slider-t{
    font-weight: 600;
    font-size: 20px;
    text-align: left;
    color: #fff;
}
.block1__i_b:not(.slick-initialized){
    display: flex;
}
.block1__i_b{
    background-image: linear-gradient(180deg, #4e5054 0%, #8b8e95 100%);
}
[data-theme="dark"] .block1__i_b{
    /* let it fall back to .block1__i's opaque dark card color instead of the
       light-theme grey placeholder, so the tile matches its siblings */
    background-image: none;
}
.block1__i_b.slick-slider .slick-list, .block1__i_b.slick-slider .slick-track{
    height: 100%;
}
.block1__i_b .slick-arrow{
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 1;
    cursor: pointer;
    transition: background var(--transition);
}
.block1__i_b .slick-arrow:hover{
    background: var(--sta-gradient-primary);
}
.block1__i_b .slick-prev{
    right: 95px;
    bottom: 20px;
}
.block1__i_b .slick-next{
    right: 20px;
    bottom: 20px;
}
/* Hero carousel now runs on Swiper (see .js-hero-swiper init in sc.js) — nav buttons
   reuse the exact visual recipe the old .slick-arrow/-prev/-next had. */
.js-hero-swiper, .js-hero-swiper .swiper-wrapper, .js-hero-swiper .swiper-slide{
    height: 100%;
}
.js-hero-swiper .sta-hero-nav{
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 1;
    cursor: pointer;
    transition: background var(--transition);
}
.js-hero-swiper .sta-hero-nav:hover{
    background: var(--sta-gradient-primary);
}
.js-hero-swiper .sta-hero-nav--prev{
    right: 95px;
    bottom: 20px;
}
.js-hero-swiper .sta-hero-nav--next{
    right: 20px;
    bottom: 20px;
}
.block1__i-ml, .block1__i_v{
    background-size: cover;
    padding: 27px 40px;
    display: flex;
    flex-direction: column;
}
[data-theme="dark"] .block1__i-ml{
    /* img/ml.png is a raw raster screenshot with its own light/grey colors
       baked in and no scrim, so in dark mode it reads as a foreign surface
       next to the opaque #12151d cards around it. Darken it to match. */
    position: relative;
}
[data-theme="dark"] .block1__i-ml::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(9, 11, 16, 0.82);
}
[data-theme="dark"] .block1__i-ml > *{
    position: relative;
    z-index: 1;
}
.block1__i_v{
    background-position: bottom 40px right 0;
    background-size: auto;
    background-repeat: no-repeat;
}
.block1__h{
    font-weight: 600;
    font-size: 32px;
    color: var(--sta-color-text);
}
.block1__t{
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
}
.block1__btn{
    width: 100%;
    max-width: 274px;
    border-radius: 10px;
    padding: 10px 13px;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    color: #fff;
    background: var(--sta-gradient-primary);
    /* a resting glow + inner top highlight so the button reads as lit/raised
       against the dark card instead of a flat fill, without waiting for hover */
    box-shadow: 0 4px 16px rgba(249, 168, 38, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 15px;
    margin-top: auto;
}
.block1__btn + .block1__btn{
    margin-top: 9px;
}
.block1__btn:hover{
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--sta-shadow-hover);
}
.block1__ps{
    margin-top: 18px;
    margin-bottom: 10px;
}
.block1__p-t{
    display: flex;
    grid-gap: 14px;
    align-items: center;
    margin-bottom: 10px;
}
.block1__p-percent{
    font-weight: 700;
    font-size: 38px;
    letter-spacing: -0.02em;
    color: #3dc18d;
    line-height: 1;
}
.block1__p .match__r{
    margin-top: 5px;
}
.block1__p .match__scores{
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-gap: 5px;
}
.block1__p .match__score{
    min-width: 54px;
}
.block1__p-i{
    font-size: 14px;
    color: var(--sta-color-text);
}
.block1__p-time{
    font-size: 12px;
    color: var(--sta-color-text-secondary);
}
.block1__p-down > svg{
    transform: scaleY(-1);
}
.block1__p-down > svg path{
    fill: var(--sta-color-danger);
}
.block1__p-down .block1__p-percent{
    color: var(--sta-color-danger);
}
.js-header-stat:not(.slick-initialized) .block1__p, .js-header-stat:not(.slick-initialized) .hml{
    min-width: 100%;
}
.js-header-stat:not(.slick-initialized){
    display: flex;
    overflow: hidden;
}
.js-header-stat .slick-dots{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 18px;
    display: flex;
    grid-gap: 5px;
}
.js-header-stat .slick-dots li button{
    width: 7px;
    height: 7px;
    background: rgba(16, 16, 16, 0.5);
    border-radius: 50%;
    border: none;
    font-size: 0;
    display: block;
    padding: 0;
}
.js-header-stat .slick-dots li.slick-active button{
    background: #101010;
}
.hml{
    padding: 15px 29px 15px 40px;
    position: relative;
}
.hml-t{
    display: flex;
    justify-content: space-between;
    grid-gap: 16px;
}
.hml-h1{
    font-weight: 600;
    font-size: 14px;
    color: var(--sta-color-text-muted);
}
.hml-h2{
    font-weight: 600;
    font-size: 14px;
    color: var(--sta-color-text);
}
.hml-h3{
    font-weight: 400;
    font-size: 12px;
    color: var(--sta-color-text-secondary);
}
.hml-r{
    display: flex;
    grid-gap: 13px;
}
.hml__total{
    font-weight: 400;
    font-size: 14px;
    color: var(--sta-color-text);
    display: flex;
    grid-gap: 15px;
    margin-top: 5px;
    align-items: center;
}
.hml__k{
    background: #3dc18d;
    border-radius: 5px;
    width: fit-content;
    padding: 1px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: #fff;
}
.hml__percent{
    display: flex;
    align-items: center;
    grid-gap: 15px;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
    margin-top: 5px;
}
.hml__percent span{
    font-weight: 700;
    font-size: 56px;
    letter-spacing: -0.02em;
    color: #3dc18d;
    line-height: 1;
}
.hml__text{
    max-width: 330px;
}
.hml__hint{
    font-size: 10px;
    color: var(--sta-color-text-muted);
    margin-top: 10px;
}
.hml__hint a{
    text-decoration: underline;
    text-decoration-skip-ink: none;
}
.hml__back{
    width: 145px;
    height: 145px;
    position: absolute;
    right: -43px;
    bottom: -51px;
    opacity: 10%;
    background-size: contain;
    background-repeat: no-repeat;
}
.js-header-stat.hml-dot .slick-dots{
    padding: 0 29px 16px 40px;
    margin-top: 0;
}
.js-header-stat.hml-dot .slick-list{
    overflow: inherit;
}
@media (max-width: 1200px) {
    .block1__cnt{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .block1__i_b{
        aspect-ratio: 5 / 4;
    }
    .block1__i_b, .block1__i_v, .block1__i_event{
        grid-row-start: inherit;
        grid-row-end: inherit;
        grid-column-start: inherit;
    }
}
@media (max-width: 992px) {
    .js-hero-swiper .sta-hero-nav{
        width: 30px;
        height: 30px;
    }
    .js-hero-swiper .sta-hero-nav svg{
        width: 12px;
    }
    .js-hero-swiper .sta-hero-nav--prev{
        right: 65px;
    }
    .block1__i_b .slick-arrow{
        width: 30px;
        height: 30px;
    }
    .block1__i_b .slick-arrow svg{
        width: 12px;
    }
    .block1__i_b .slick-prev{
        right: 65px;
    }
    .block1__slider-h{
        font-size: 70px;
    }
    .block1__slider-t{
        font-size: 16px;
    }
    .block1__h{
        font-size: 18px;
    }
    .block1__t{
        font-size: 14px;
    }
    .block1__btn{
        font-size: 12px;
        padding: 8px 11px;
    }
    .block1__i-ml, .block1__i_v{
        padding: 14px 20px;
    }
}
@media (max-width: 768px) {
    .block1__cnt{
        grid-template-columns: 1fr;
    }
    .block1__i-empty{
        display: none;
    }
}

/* TOOLS */
.tools{
    display: flex;
    /*grid-gap: 20px;*/
    margin-top: 25px;
}
.tools:not(.swiper-wrapper){
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    grid-gap: 20px;
}
.tools__wrap{
    background: var(--sta-card-bg);
    min-width: 256px;
    /*width: 100%;*/
    border-radius: 10px;
    /*margin-right: 20px;*/
    box-shadow: var(--sta-shadow-resting);
    transition: background var(--transition);
}
[data-theme="dark"] .tools__wrap{
    /* same reasoning as .block1__i: an opaque dark fill reads as a card,
       the translucent --sta-card-bg token doesn't over the decorative
       gradient shapes */
    background: #12151d;
}
.tools__wrap.tools__wrap_live{
    /* was an inline style on the element itself (event.html) hardcoding
       #4e5054 — the same legacy grey .tools__wrap used to have everywhere
       before Round 1, but never tokenized here, so it never adapted to the
       theme */
    background: linear-gradient(180deg, #4e5054 0%, #F43F5E 100%);
}
[data-theme="dark"] .tools__wrap.tools__wrap_live{
    background: linear-gradient(180deg, #12151d 0%, var(--sta-color-danger) 100%);
}
.tools:not(.tools__active) .tools__wrap:hover{
    /* Telegram tile used to keep its own blue brand color here (:not(.tools__wrap_tg))
       instead of the shared graphite+orange treatment — dropped so the reduced
       palette (graphite / orange / green-for-growth / red-for-decline) holds
       across every tile, not just six of seven */
    background-image: var(--sta-gradient-primary);
}
.tools__wrap.active{
    background-image: var(--sta-gradient-primary);
}
.tools__card{
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 256px;
    min-height: 110px;
    padding: 17px 12px 15px 20px;
    cursor: pointer;
}
.tools__icon{
    /* the icon used to be .tools__card's own background-image at full
       strength, competing with the numbers/title for attention — now a
       quiet watermark sitting behind the text instead */
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: .35;
    pointer-events: none;
}
.tools__title, .tools__text, .tools__stats{
    position: relative;
    z-index: 1;
}
.tools__title{
    font-weight: 600;
    font-size: 18px;
    color: var(--sta-color-text);
}
.tools__text{
    margin-top: 7px;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text-secondary);
}
.tools__text span{
    font-weight: 700;
    font-size: 20px;
    color: var(--sta-color-text);
}
.tools__stats{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.tools__stat{
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.tools__stat-num{
    font-weight: 800;
    font-size: 32px;
    color: var(--sta-color-text);
}
.tools__stat-label{
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--sta-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.tools__stat_live .tools__stat-label{
    color: var(--sta-color-links);
    font-weight: 700;
}
.tools:not(.tools__active) .tools__wrap:hover .tools__title,
.tools:not(.tools__active) .tools__wrap:hover .tools__text,
.tools__wrap.active .tools__title,
.tools__wrap.active .tools__text{
    color: #fff;
}
.tools:not(.tools__active) .tools__wrap:hover .tools__text span,
.tools__wrap.active .tools__text span{
    color: #fff;
}
.tools:not(.tools__active) .tools__wrap:hover .tools__stat-num,
.tools__wrap.active .tools__stat-num,
.tools:not(.tools__active) .tools__wrap:hover .tools__stat-label,
.tools__wrap.active .tools__stat-label,
.tools:not(.tools__active) .tools__wrap:hover .tools__stat_live .tools__stat-label,
.tools__wrap.active .tools__stat_live .tools__stat-label{
    color: #fff;
}
.tools .slick-list{
    overflow: inherit;
}

@media (max-width: 992px) {
    .tools__title{
        font-size: 16px;
    }
    .tools__text{
        font-size: 12px;
    }
    .tools__stat-num{
        font-size: 26px;
    }
    .tools__card{
        padding: 14px 12px 14px 20px;
    }
}
@media (max-width: 568px) {
    .tools:not(.swiper-wrapper){
        grid-template-columns: 1fr;
    }
}

/* TEAMS */
.teams{
    display: flex;
    /*grid-gap: 20px;*/
    margin-top: 25px;
}
.teams__wrap{
    background: var(--sta-card-bg);
    min-width: 256px;
    width: 100%;
    border-radius: 10px;
    margin-right: 20px;
    box-shadow: var(--sta-shadow-resting);
    transition: background var(--transition);
}
[data-theme="dark"] .teams__wrap{
    background: #12151d;
}
.teams__wrap:hover{
    background-image: var(--sta-gradient-primary);
}
.teams__card{
    width: 100%;
    height: 110px;
    padding: 15px 12px 15px 20px;
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.teams__title{
    font-weight: 600;
    font-size: 20px;
    color: var(--sta-color-text);
    display: flex;
    grid-gap: 17px;
    justify-content: space-between;
}
.teams__wrap:hover .teams__title,
.teams__wrap:hover .teams__text{
    color: #fff;
}
.teams__title img{
    height: 27px;
    object-fit: contain;
}
.teams__title span{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;
}
.teams__text{
    margin-top: 5px;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    box-orient: vertical;
}
.teams__text span{
    font-weight: 600;
}
.teams .slick-list{
    overflow: inherit;
}

/* DECORATION */
.sta-page-decoration{
    /* .decoration/.decoration2/.decoration3/.decoration4 used to be siblings
       of <body>, which has no position of its own, so they inherited
       <html>'s position:relative — and .decoration3/.decoration4 used
       "bottom: Npx", measured from the bottom of the WHOLE document. On a
       long homepage (lots of matches/leagues/blog posts) that meant they
       could surface anywhere, including bleeding through unrelated sections
       far below the hero. This wrapper groups them under one z-index/
       pointer-events rule; the underlying fix is that all four shapes now
       use "top" (see .decoration3/.decoration4 below), so none of them
       depend on this wrapper's height or the document's length at all. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 0;
    pointer-events: none;
}
.decoration{
    width: 100%;
    height: 600px;
    position: absolute;
    top: 0;
    z-index: 0;
    background: url("img/angle.svg") bottom no-repeat;
    background-size: cover;
}
[data-theme="dark"] .decoration{
    /* the raw gradient reads much brighter against the dark surfaces than it
       does against the light theme's #F4F5F6 background, so tone it down
       instead of letting it dominate the fold. Opacity only — height
       interacts with this SVG's "bottom"-anchored, "cover"-sized background
       in a viewport-width-dependent way (the painted shape sits in the
       upper part of the SVG's viewBox), so shrinking height risks cropping
       it out almost entirely on some widths and barely at all on others. */
    opacity: 0.4;
    /* the gradient's amber end (#F9A826) is much higher-luminance than its
       red end, so the right side of the diagonal reads louder than the left
       at equal opacity — pull saturation/brightness down to a "dark amber"
       instead of raising transparency further, which would also dim the red side */
    filter: saturate(.7) brightness(.8);
}
.decoration2{
    width: 371px;
    max-width: 100%;
    height: 547px;
    position: absolute;
    top: 400px;
    z-index: 0;
    background: url("img/angle2.svg") left no-repeat;
    background-size: contain;
    opacity: 0.5;
}
[data-theme="dark"] .decoration2{
    /* same solid-white-at-50%-opacity issue as .decoration3 (they're the
       same mirrored shape) — match its muted value so the two sides read
       consistently instead of one being noticeably brighter than the other */
    opacity: 0.22;
}
.decoration3{
    width: 371px;
    max-width: 100%;
    height: 547px;
    position: absolute;
    right: 0;
    bottom: 1300px;
    /* was "bottom: 1300px" — measured from the bottom of whatever container
       it happened to sit in (previously the whole document); switched to a
       fixed top offset so it lands in the same spot regardless of page
       length. Moved further down (900px → 1450px) to clear the events list
       and sit alongside .decoration4's lower zone instead of overlapping
       mid-table. */
    /* top: 1450px; */
    z-index: 0;
    background: url("img/angle2.svg") right no-repeat;
    background-size: contain;
    transform: scaleX(-1);
    opacity: 0.5;
}
[data-theme="dark"] .decoration3{
    /* a solid-white shape at 50% opacity reads as a bright glow against the
       dark surfaces around it — quiet it down the same way .decoration's
       amber was toned down, rather than just relocating the same brightness */
    opacity: 0.22;
}
.decoration4{
    width: 100%;
    height: 1050px;
    position: absolute;
    /* was "bottom: 300px" — same document-height-dependent problem as
       .decoration3, fixed the same way */
    top: 1300px;
    z-index: 0;
    background: url("img/decor4.svg") bottom no-repeat;
    background-size: cover;
}
[data-theme="dark"] .decoration4{
    /* same brand-orange hue and "reads brighter against dark surfaces" issue
       as .decoration — apply the same saturate/brightness pull-down */
    opacity: 0.6;
    filter: saturate(.7) brightness(.8);
}

/* CONTENT */
.content {font-size: 0.95em; padding-top: 25px;padding-bottom: 150px;}

/* PAGINATION */
.pagination {margin-top: 30px; margin: 0; padding: 0; list-style: none;}
.pagination li {display: inline-block;}
.pagination li a {display: inline-block; line-height: 30px; margin-right: 10px; width: 30px; background: var(--sta-background-ultralight); text-align: center; border-radius: 15px; transition: 0.2s all;}
.pagination li:last-child {margin-right: 0px;}
.pagination li.selected a, .pagination li a:hover {background: var(--sta-color-links); color: var(--sta-background-primary);}

/* FORMS */
.wa-form input[type="text"], .wa-form input[type="numeric"], .wa-form input[type="password"], .wa-form textarea, .wa-form select {
    /*padding: 7px; font-size: 0.9em; width: 100%; border: 1px solid; border-radius: 3px; border-color: var(--sta-color-ultralight); min-height: 40px; background: var(--sta-background-ultralight);*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 0 15px 0 15px;
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    background: var(--sta-card-bg);
    font-weight: 400;
    color: var(--sta-color-text);
    gap: 5px;
}
.wa-hd-frontend-form{
    margin-top: 25px;
}
.wa-form textarea {min-height: 100px;}
.wa-form .checkbox-icon-wrap {border: 1px solid; border-color: var(--sta-color-ultralight);}
.wa-form .wa-field {margin-bottom: 10px;}
.wa-form .wa-field .wa-name {font-size: 0.9em; padding: 4px 0;}
.wa-form .wa-field .wa-value .hint {font-size: 0.9em; color: var(--sta-color-light);}
.wa-form .wa-field .wa-value .hint:empty {display: none}
.wa-form .wa-field .wa-value .checkbox-label {font-size: 0.9em; margin-bottom: 10px;}
.wa-form .wa-field .wa-value .checkbox-label:last-child {margin-bottom: 0;}
.wa-form .wa-field:has(label.checkbox-label) input[type="checkbox"] {width: 0; height: 0; opacity: 0;}
.wa-form .wa-field:has(label.checkbox-label) label {display: flex;}
.wa-form .wa-field:has(label.checkbox-label) .checkbox-icon, .wa-form .wa-field:has(label.checkbox-label) .checkbox-icon-svg-wrap svg {width: 16px; height: 16px; margin-top: 2px; margin-left: 2px; display: none; color: var(--sta-color-links);}
.wa-form .wa-field:has(label.checkbox-label) input + span.checkbox-icon-wrap {position: relative; overflow: hidden; display: inline-block; vertical-align: top; min-width: 21px; height: 21px; border-radius: 2px; cursor: pointer; box-sizing: border-box; margin-right: 5px; background: var(--sta-color-ultralight);}
.wa-form .wa-field:has(label.checkbox-label) input:checked + span.checkbox-icon-wrap .checkbox-icon, .wa-form .wa-field:has(label.checkbox-label) input:checked + span.checkbox-icon-wrap .checkbox-icon-svg-wrap svg {display: block;}
.wa-form .sta-field-error input[type="text"], .wa-form .sta-field-error textarea, .wa-form .sta-field-error select, .wa-form .sta-field-error .checkbox-icon-wrap {border-color: var(--sta-color-warning);}
.wa-form .sta-field-error .hint {color: var(--sta-color-warning);}
.wa-form .form-message {padding: 10px; border-radius: 5px; background: var(--sta-background-ultralight); margin-bottom: 10px;}
.wa-form button {border-radius: 5px; color: var(--sta-color-secondary); background: var(--sta-color-links); outline: none; border: none; width: 100%; padding: 12px 0; cursor: pointer}
.wa-form button:hover {background: var(--sta-color-links-hover);}
.wa-form input[type="submit"]{
    width: 100%;
    border-radius: 10px;
    background: var(--sta-gradient-primary);
    border: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    padding: 10px 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-size: 200% 100%;
    background-position: 0% 0%;
    transition: 0.2s background;
}
.wa-form input[type="submit"]:disabled {
    background: linear-gradient(180deg, #878787 0%, #878787 100%);
}
.wa-form .state-error-hint{
    color: red;
    font-size: 12px;
}

/* Error simple */
.error-simple{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--sta-color-text-secondary);
    gap: 10px;
    padding: 15px;
}
.error-simple .system-error-icon{
    width: 50px;
    height: 50px;
    fill: #b0b0b0;
    opacity: 0.8;
}
.error-simple .system-error-text{
    font-size: 14px;
}

/* EVENT */
.container {
    width: 100%;
    max-width: 1410px;
    margin: 0 auto;
    background: var(--sta-card-bg);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.events-table-header{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}
.events-navigation {
    display: flex;
    align-items: center;
    grid-gap: 20px;
}

.date-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.search__bar{
    position: relative;
}
.search__input{
    width: 100%;
    border-radius: 10px;
    border: none;
    height: 40px;
    padding: 0 45px 0 20px;
    font-size: 14px;
    background: var(--sta-card-bg);
    color: var(--sta-color-text);
}
.search__input::placeholder{
    color: var(--sta-color-text-muted);
}
.search__icon{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
}
[data-theme="dark"] .search__icon{
    /* was inheriting --sta-color-text (already near-white) implicitly —
       make it explicit and nudge to pure white, a deliberate small boost
       for a thin-stroke icon that reads soft against the dark field */
    color: #fff;
}
.search__clear {
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.search__clear:hover {
    opacity: 1;
}

.nav-button {
    width: 44px;
    height: 40px;
    border-radius: 10px;
    background: var(--sta-card-bg);
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--sta-color-text);
}

.nav-button:hover {
    background: var(--sta-gradient-primary);
}
.nav-button:hover svg{
    transition: all var(--transition);
}
.nav-button:hover svg path{
    fill: white;
}

.nav-button:active {
    transform: translateY(0);
}

.nav-button svg {
    /*width: 20px;*/
    /*height: 20px;*/
    /*fill: #555;*/
}

.events-date-picker-container {
    position: relative;
}
.events-custom-date-picker {
    font-size: 16px;
    font-weight: 600;
    color: var(--sta-color-text);
    min-width: 180px;
    height: 40px;
    border-radius: 10px;
    background: var(--sta-card-bg);
    border: none;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.events-real-date-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2000;
}
.events-real-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
    cursor: pointer;
}
.events-real-date-input::-moz-focus-inner {
    border: 0;
}

.live-button {
    background: var(--sta-gradient-primary);
    border: none;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #fff;
}

.live-button:hover {

}

.live-button.active {
    background: linear-gradient(135deg, #4caf50, #45a049);
    box-shadow: 0 6px 15px rgba(76, 175, 80, 0.3);
}

.live-button:active {
    transform: translateY(0);
}

.live-indicator {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

.all-events-button {
    background: var(--sta-card-bg);
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}
.all-events-button:hover svg path{
    fill: white;
}
.all-events-button:hover {
    color: white;
    background: var(--sta-gradient-primary);
}

.events-table {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.league-events-wrap{
    width: 100%;
    display: flex;
    grid-gap: 20px;
}
.league-events-wrap > *{
}
.league-events-wrap .swiper-wrapper{
    display: flex;
    width: 100%;
    /*grid-gap: 10px;*/
    /*flex-wrap: nowrap;*/
    /*overflow: hidden;*/
}
.league-events-wrap .swiper-slide{
    min-width: 340px;
    flex: 1;
    user-select: none;
}
.events-table, .league, .league-events, .steamers-events{
    display: flex;
    flex-direction: column;
}
.events-table, .steamers-events{
    gap: 15px;
}
/*.league + .league{
    margin-top: 15px;
}*/
.league-events {
    margin-top: 20px;
    gap: 16px;
}
.league-events.js-table-cnt{display: none}
.league-events.js-table-cnt.active{
    display: flex;
}
.league-name {
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    color: var(--sta-color-text);
}
.league-hint {
    font-weight: 400;
    font-size: 12px;
    color: var(--sta-color-text-secondary);
}
.event-block {
    background-color: var(--sta-card-bg);
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 10px;
    padding: 10px 15px;
    grid-gap: 3px;
}
.event-row-1, .event-row-2 {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.event-row-1{
    align-items: center;
    grid-gap: 20px;
}
/*.event-toggle {*/
/*    cursor: pointer;*/
/*    transition: all 0.3s ease;*/
/*    font-weight: bold;*/
/*    background: none;*/
/*    border: none;*/

/*    padding: 0;*/
/*    width: 21px;*/
/*    height: 21px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/
.event-date{
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: var(--sta-color-text);
}
.event-referee{
    /*font-weight: 400;*/
    font-size: 12px;
    line-height: 1;
    /*color: var(--sta-color-text-secondary);*/

    color: #3dc18d;
    font-weight: 600;
    display: block;
}
.event-status{
    min-width: 102px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: #fff;
    background: #3dc18d;
    padding: 0 9px;
    height: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-left: auto;
}
.event-status__c-b{
    background: #4e5054;
}
.event-score{
    margin-left: auto;
    align-items: center;
    grid-gap: 2px;
    min-width: 102px;
    display: grid;
    grid-template-columns: 1fr 5px 1fr;
    margin-bottom: auto;
}
.event-row-check{
    display: flex;
    grid-gap: 15px;
}
.event-row-check label{
    border-radius: 5px;
    width: 25px;
    height: 25px;
    background: #f4f5f6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.event-row-check label input{
    display: none;
}
.event-row-check label:has(> input[type="checkbox"]:checked){
    background: #3dc18d;
}
.event-score-localteam, .event-score-visitorteam{
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: #fff;
    background: #4e5054;
    width: 100%;
    height: 21px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.event-score-localteam.event-score_g, .event-score-visitorteam.event-score_g{
    background: #3dc18d;
}
/*.event-toggle svg {*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    fill: #555;*/
/*}*/
.event-toggle svg{
    transition: all 0.3s ease;
}
.event-toggle.active svg{
    transform: rotate(90deg);
}
.event-summary {
    /*margin: 20px auto;*/
    width: 100%;
}
.event-name{
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: var(--sta-color-text);
    text-decoration: underline;
}
.event-name-col{
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    grid-gap: 12px;
}

.event-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.event-stats-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.event-stats-values {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    /*width: 100%;
    display: flex;
    flex-direction: row;
    display: grid;
    grid-template-columns: 1fr auto auto auto auto 1fr;
    align-items: center;
    gap: 10px;*/
}

.event-stats-name, .event-stats-localteam-avg, .event-stats-visitorteam-avg, .event-stats-referee-avg {
    flex: 1;
    font-weight: 500;
    color: var(--sta-color-text);
}
.event-stats-localteam-avg, .event-stats-visitorteam-avg, .event-stats-referee-avg{
    font-size: 12px;
}
.event-stats-localteam, .event-stats-visitorteam {
    color: white;
    border-radius: 5px;
    min-width: 55px;
    height: 21px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 130%;
}
.event-stats-localteam-avg, .event-stats-referee-avg { text-align: right; }

.event-stats-progress-bar {
    display: flex;
    gap: 10px;
}
.event-stats-progress-bar-wrapper {
    height: 3px;
    background: #D6D6D6;
    width: 50%;
    position: relative;
}
.event-stats-progress-bar-localteam, .event-stats-progress-bar-visitorteam {
    position: absolute;
    height: 3px;
    transition: width 0.3s ease-in-out;
}
.event-stats-progress-bar-localteam {
    right: 0;
}
.event-stats-progress-bar-visitorteam {
    left: 0;
}
.event-summary-error{
    font-size: 12px;
    color: var(--sta-color-text);
}
.event-summary-tabs {
    /*display: flex;
    flex-direction: row;*/
    display: grid;
    grid-template-columns: repeat(3, auto) 1fr;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.event-summary-tab {
    padding: 3px 30px;
    border: 1px solid #4e5054;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    color: var(--sta-color-text-secondary);
}
.event-summary-tab:hover, .event-summary-tab.active{
    background: #4E5054;
    color: white;
}
.event-summary-avg-flag {
    /*margin-left: auto;*/
    justify-self: end;
    align-self: center;
    font-weight: 400;
    font-size: 12px;
}
.event-summary-avg-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
}
.event-summary-avg-checkbox-input {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid #4E5054;
    border-radius: 2px;
    background-color: var(--sta-card-bg);
    cursor: pointer;
    transition: all 0.15s;
    margin: 0;
}
.event-summary-avg-checkbox-input:checked {
    background-color: rgb(61, 193, 141);
    border-color: rgb(61, 193, 141);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.event-summary-avg-checkbox-text {
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
}
@media (max-width: 680px) {
    .event-summary-tabs {
        grid-template-columns: repeat(2, 1fr);
    }

    .event-summary-avg-flag {
        justify-self: end;
        grid-column: 2;
    }
}
@media (max-width: 500px) {
    .event-summary-tabs {
        grid-template-columns: 1fr;
    }

    .event-summary-avg-flag {
        grid-column: 1;
        justify-self: end;
    }
}
/*
@media (max-width: 650px) {
    .event-summary-tabs {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .event-summary-avg-flag {
        margin-left: 0;
    }
}
*/
.event-lineups-table{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.event-lineups-table table{
    width: 100%;
    border-collapse: collapse;
}
.event-lineups-table table td, th{
    border: 1px solid;
}

.steamers-events{
    grid-gap: 12px;
}
.prog{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 182px;
    grid-gap: 15px;
    padding: 15px;
}
.prog__col{
    width: 100%;
    display: flex;
    grid-gap: 15px;
}
.prog__arrow{
    min-width: 36px;
}
.prog__percent{
    font-weight: 600;
    font-size: 32px;
    line-height: 100%;
}
.prog__stat{
    display: flex;
    flex-flow: column;
    grid-gap: 4px;
}
.prog .event-score{
    grid-template-columns: 1fr auto 1fr;
    grid-gap: 5px;
    margin-bottom: 6px;
}
.prog .event-status__c-b{
    width: 100%;
    background: var(--sta-surface-muted);
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: var(--sta-color-text);
    height: 20px;
}
.prog .event-score{
    min-width: inherit;
}
.prog .event-score > span{
    min-width: 54px;
    height: 20px;
}
.prog__row{
    display: flex;
    flex-flow: column;
    grid-gap: 7px;
}
.prog__win{
    font-weight: 600;
    font-size: 14px;
    color: var(--sta-color-text);
}
.prog__h{
    display: flex;
    grid-gap: 15px;
}
.prog-date{
    font-size: 12px;
    color: var(--sta-color-text);
}
.prog__h-text{
    font-size: 12px;
    color: var(--sta-color-text-secondary);
}
.prog__h > *:empty{
    display: none;
}
.prog__team{
    font-weight: 500;
    font-size: 14px;
    color: var(--sta-color-text);
}
.prog__team:has(~ .prog__team){
    margin-bottom: 2px;
}

@media (max-width: 992px) {
    .event-row-1{
        grid-gap: 10px;
        flex-wrap: wrap;
    }
    .league-events-wrap .swiper-slide{
        min-width: 300px;
    }
}
@media (max-width: 576px) {
    .prog__h{
        flex-flow: column;
        grid-gap: 5px;
    }
    .prog__col{
        justify-content: end;
    }
    /*.event-block.prog{*/
    /*    grid-template-columns: 1fr;*/
    /*}*/
}

/* EVENT PAGE */
.event{
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-gap: 20px;
}
.event__l, .event__r{
    border-radius: 10px;
    background: var(--sta-card-bg);
    padding: 26px 40px;
}
.event__l{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 16px;
}
.event__r{
    display: flex;
    flex-direction: column;
    grid-gap: 15px;
}
.event__c, .event__c a{
    display: flex;
    flex-direction: column;
    align-items: center;justify-content: center;
    grid-gap: 10px;
}
.event__goals{
    display: flex;
    justify-content: center;
    grid-gap: 5px;
}
.event__goal{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(16, 16, 16, 0.5);
}
.event__goal-g{
    background: #3dc18d;
}
.event__goal-r{
    background: var(--sta-color-danger);
}
.event__c-name{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;
    height: 38px;
    font-size: 14px;
    text-align: center;
    color: var(--sta-color-text);
}
.event__c-name.event__c-winner{ font-weight: 700; }
.event__data{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-gap: 7px;
}
.event__data > *{
    max-width: 120px;
}
.event__status{
    width: 100%;
    text-align: center;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 21px;
    /*padding: 4px;*/
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
}
.event__score{
    border-radius: 5px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 10px;
}
.event__score-i{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    min-height: 40px;
    font-weight: 600;
    font-size: 24px;
    text-align: center;
    color: #fff;
    background: #4e5054;
    line-height: 1;
}
.event__score-g{
    background: #3dc18d;
}
.event__text{
    font-size: 14px;
    color: var(--sta-color-text);
}
.event__l .event__text{
    text-align: center;
}
.event__text span{
    color: var(--sta-color-text);
}
.event__c img{
    display: block;
    object-fit: contain;
}
.event__referee{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.event__referee a{
    font-size: 14px;
    color: var(--sta-color-danger);
    text-decoration: underline;
}
.event__title{
    font-weight: 600;
    font-size: 32px;
    color: var(--sta-color-text);
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}
.event__weather{
    display: flex;
    align-items: center;
    grid-gap: 17px;
}
.event__description{
    border-radius: 10px;
    background: var(--sta-card-bg);
    padding: 15px;
}
.event__wrap{
    margin-top: 20px;
    display: flex;
    grid-gap: 45px;
}
.event__box{
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    background: var(--sta-card-bg);
}
.event__img{
    margin-top: 19px;
}
.block1__btns{
    margin-top: auto;
    display: grid;
    grid-gap: 10px;
}
.block1__btns .block1__btn{
    max-width: 100%;
    margin-top: 0;
}
.block1__btn:first-child{
    grid-column-start: 1;
    grid-column-end: 3;
}
.block1__event-stats{
    margin-top: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    grid-gap: 5px;
}
.block1__event-stat{
    display: grid;
    grid-template-columns: 152px 1fr 1fr;
    align-items: center;
    font-size: 14px;
    color: var(--sta-color-text);
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--sta-card-border);
}
.block1__event-stat b{
    text-align: right;
}
.block1__event-h > *{
    font-weight: 500;
}
.block1__i_event{
    position: relative;
    overflow: hidden;
}
.block1__i_event img{
    position: absolute;
    top: calc(50% - 75px);
    opacity: 10%;
}
.block1__i_event-lt{
    left: -75px;
}
.block1__i_event-vt{
    right: -75px;
}
.odds{
    margin-top: 15px;
    display: flex;
    flex-flow: column;
    grid-gap: 10px;
}
.odds__h, .odds__row{
    padding: 7px 15px 7px 0;
    display: grid;
    grid-template-columns: 1fr repeat(3, 60px);
    grid-gap: 5px;
    align-items: center;
}
.odds__h .odds__title{
    font-weight: 600;
    font-size: 14px;
    color: var(--sta-color-text);
    width: 130px;
    padding-left: 15px;
}
.odds__row .odds__title{
    font-weight: 500;
    font-size: 14px;
    color: var(--sta-color-text);
    width: 160px;
}
.odds__row .odds__title, .odds__row .odds__title{
    background: var(--sta-card-bg);
    display: flex;
    height: 100%;
    align-items: center;
    width: 125px;
    position: sticky;
    left: 0;
    padding-left: 15px;
    z-index: 1;
}

.odds__row{
    border-radius: 10px;
    background: var(--sta-card-bg);
}
.odds__i{
    width: 100%;
    min-height: 40px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    border-radius: 5px;
}
.odds__row .odds__i{
    background: rgba(135, 135, 135, 0.25);
}
.odds__row .odds__i.odds__i-g{
    background: rgba(61, 193, 141, 0.25);
}
.odds__row .odds__i.odds__i-r{
    background: rgba(171, 26, 57, 0.25);
}
.odds__i-r .odds__i-v svg{
    transform: rotate(180deg);
}
.odds__i-r .odds__i-v svg path{
    fill: var(--sta-color-danger);
}
.odds__i-t{
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: var(--sta-color-text);
}
.odds__i-v{
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 3px;
}
.odds__i-v span{
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    color: var(--sta-color-text-muted);
}
.odds__h .odds__i{
    flex-flow: row;
    grid-gap: 5px;
    cursor: pointer;
}

.odds__scroll {
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;

    &::-webkit-scrollbar {
        display: none;
    }

    &.dragging {
        cursor: grabbing;
        scroll-behavior: auto !important;
    }
}

.odds__row {
    /*scroll-behavior: smooth;*/
}

.odds__scroll * {
    /*user-select: none;*/
}

.odds__scroll {
    user-select: text;
}

.way{
    display: flex;
    flex-flow: column;
    grid-gap: 10px;
}
.way__top{
    margin-bottom: 5px;
}
.way__row{
    display: flex;
    grid-gap: 15px;
}
.way__row.way__row-v{
    margin-left: auto;
}
.way__logo{
    border-radius: 50%;
    background: white;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.way__logo img{
    object-fit: contain;
}
.way__icon{
    display: flex;align-items: center;justify-content: center;
}
.way__cnt{
    min-width: 355px;
    padding: 15px;
    background: var(--sta-card-bg);
    border-radius: 10px 10px 10px 0;
    display: flex;
    flex-flow: column;
    position: relative;
}
.way__row.way__row-v .way__cnt{
    border-radius: 10px 10px 0 10px;
}
.way__top{
    display: flex;
    grid-gap: 10px;
    justify-content: space-between;
    align-items: center;
}
.way__title{
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
}
.way__title span {
    color: var(--sta-color-text-muted);
    font-size: 12px;
}
.way__time{
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    text-align: right;
    color: var(--sta-color-text);
}
.way__b{
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
}
.way__b > div{
    display: flex;
    align-items: center;
    grid-gap: 10px;
}
.way__angle svg{
    position: absolute;
    left: -15px;
    bottom: 0;
}
.way__row-v .way__angle svg{
    position: absolute;
    left: inherit;
    right: -15px;
    bottom: 0;
}
.way__logo{
    margin-top: auto;
}
.way__logo img{
    display: block;
}
.way__goal{
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 10px;
}
.way__goal .match__score{
    min-width: 40px;
}
.way__h{
    width: 100%;
    background: var(--sta-surface-muted);
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    color: var(--sta-color-text);
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-gap: 10px;
    border-radius: 10px;
    padding: 10px;
}
.way__h .match__score{
    min-width: 40px;
}
.way__h-g{
    background: rgba(61, 193, 141, 0.25);
}
.event__table .table__ind{
    width: 23px;
}
.event__table .table__h, .event__table .table__row{
    grid-template-columns: 21px 1fr 122px;
}
.event__table-sub{
    display: flex;
    align-items: center;
    grid-gap: 5px;
}
.event__table{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 20px;
}
.event__table .table{
    height: min-content;
}
.arc__wrap{
    display: flex;justify-content: space-between;grid-gap: 20px;margin-top: 20px;
}
.arc{
    display: flex;flex-direction: column; flex: 1;
}
.arc__cnt{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 48px;
}
.arc__text{
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    color: #000;
    display: flex;
    flex-flow: column;
    grid-gap: 5px;
}
.arc__val{
    position: absolute;
}

@media (max-width: 992px) {
    .container-fluid.mobile-cf{
        padding-left: 0;
        padding-right: 0;
    }
    .league-name{
        font-size: 20px;
    }
    .date-field{
        font-size: 14px;
    }
    .event{
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 15px;
    }
    .event__l, .event__r{
        padding: 13px 20px;
    }
    .event__title{
        font-size: 24px;
    }
    .block1__btns{
        margin-top: 20px;
    }
    .event__img{
        display: none;
    }
    .event-stats-values{
        flex-wrap: wrap;
    }
    .event-stats-name, .event-stats-referee-avg{
        flex-basis: 100%;
        text-align: center;
    }
    .event-stats-referee-avg[style*="visibility: hidden"]{
        display: none;
    }
    /*.tools{*/
    /*    margin-top: 0;*/
    /*}*/
    .way__h{
        grid-template-columns: 1fr;
    }
    .match__scores{
        max-width: 100px;
        margin: 0 auto;
    }
    .way__h span:empty{
        display: none;
    }
    .way__cnt{
        min-width: 240px;
    }
    .event__table{
        padding: 0 15px;
        width: calc(100% + 30px);
        margin-left: -15px;
        grid-template-columns: repeat(2, calc(100% - 40px));
        overflow-x: scroll;
    }
    .event__table .mt25{
        margin-top: 0!important;
    }
    .tools .match__scores{
        max-width: 200px;
    }
}

/* ------------------------------- */
/*.tariff-logo{*/
/*    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE5Ml8xNzgwKSI+DQogICAgPHBhdGggZD0iTTMwLjc4MDIgOC4wNjMyNEMyOS4yMTM4IDguMjMzMyAyNy40MjM3IDguODY4OCAyNi4zNzY0IDkuNjQ3NTJDMjUuMTU5MSAxMC41NTE1IDI0LjI0NjEgMTEuODY3MyAyMy45MjM5IDEzLjIwMUMyMy43MDkxIDE0LjA4NzEgMjMuNzI3IDE1Ljc2MDkgMjMuOTY4NyAxNi42NjQ5QzI0LjI0NjEgMTcuNzIxMSAyNC41NDE1IDE4LjIxMzQgMjUuNDAwOCAxOS4wNjM3QzI2LjA1NDIgMTkuNzE3MSAyNi4zMzE3IDE5LjkwNTEgMjcuMjQ0NiAyMC4zNzk1QzI4LjU2MDQgMjEuMDUwOCAyOS41NTM5IDIxLjQ0NDYgMzEuOTg4NSAyMi4yNjgxQzM1LjgzNzQgMjMuNTY2IDM3LjMyMzIgMjQuMjAxNSAzOC4yNjMgMjQuOTYyM0MzOS4yMzg3IDI1Ljc1IDM5LjY0MTUgMjYuNjAwMyAzOS42NDE1IDI3Ljg3MTNDMzkuNjQxNSAzMC4wMTk1IDM4LjQyNDEgMzEuNjAzOCAzNi4yNDAyIDMyLjMwMTlDMzUuMTIxMyAzMi42NTk5IDM0LjA0NzIgMzIuNzU4NCAzMS4xMzgyIDMyLjc1ODRIMjguNDA4MkwyOS41MjcxIDMzLjg3NzJMMzAuNjQ1OSAzNC45OTYxSDMxLjgzNjRDMzMuNDU2NSAzNC45OTYxIDM1LjAzMTggMzQuODQzOSAzNi4wNzAxIDM0LjU5MzNDNDAuMDUzMiAzMy42MjY2IDQyLjEzODcgMzEuMTAyNSA0MS45NDE4IDI3LjQ1OTVDNDEuODYxMiAyNS44OTMyIDQxLjQ4NTMgMjQuODgxNyA0MC42MzUgMjMuOTU5OEMzOS40NDQ1IDIyLjY3OTggMzcuOTU4NyAyMS45NDU5IDMzLjQ1NjUgMjAuNDE1M0MyOS40Mjg2IDE5LjA0NTggMjguMTIxOCAxOC40NDYxIDI3LjE3MyAxNy41MTUyQzI2LjI4NjkgMTYuNjQ3IDI1LjkwMiAxNS4zNTgxIDI2LjEwNzkgMTMuOTk3NkMyNi40MjEyIDExLjk5MjYgMjcuODUzMyAxMC43OTMyIDMwLjQ4NDggMTAuMzM2N0MzMS4xMDI0IDEwLjIyOTMgMzIuMjIxMyAxMC4yMDI1IDM2LjMyMDcgMTAuMjAyNUM0MC4xNzg1IDEwLjIwMjUgNDEuNDQwNiAxMC4xNzU2IDQxLjYxMDYgMTAuMDg2MUM0Mi4wODUgOS44NDQ0NCA0Mi4xNTY2IDguNjI3MTMgNDEuNzI3IDguMjE1NEw0MS41MDMyIDguMDA5NTNMMzYuNTI2NiA4LjAwMDU4QzMzLjc4NzcgNy45OTE2MyAzMS4yMDA5IDguMDI3NDMgMzAuNzgwMiA4LjA2MzI0WiIgZmlsbD0iIzEwMTAxMCIgLz4NCiAgICA8cGF0aCBkPSJNMTIuNDc1OSA4LjQ5MjU2QzEyLjI3ODkgOC41ODIwNyAxMi4wMzczIDguNzUyMTMgMTEuOTI5OSA4Ljg2ODQ5QzExLjgyMjUgOC45ODQ4NSAxMC45NDUzIDEwLjIyOSA5Ljk2OTY1IDExLjYzNDNDOC45OTQwMiAxMy4wMzk1IDcuOTY0NjggMTQuNTA3NSA3LjY4NzIxIDE0LjkwMTNDNy40MDk3MyAxNS4yOTUxIDcuMDMzOCAxNS44MTQzIDYuODYzNzQgMTYuMDY0OUM2LjY5MzY3IDE2LjMwNjYgNS4xNDUxOSAxOC41MjY0IDMuNDE3NjkgMjAuOTg3OEMxLjY5OTE0IDIzLjQ0OTMgMC4yNDAxNjkgMjUuNTUyNyAwLjE3NzUxMyAyNS42NjkxQzAuMTE0ODU4IDI1Ljc4NTQgMC4wNDMyNTE3IDI2LjE1MjQgMC4wMTYzOTk0IDI2LjQ5MjZDLTAuMDQ2MjU2IDI3LjE5MDcgMC4wNzAxMDQgMjcuNTc1NiAwLjM3NDQzIDI3LjczNjdDMC41MTc2NDIgMjcuODA4MyAyLjM1MjU1IDI3Ljg0NDEgNi44ODE2NCAyNy44NjJMMTMuMTkxOSAyNy44Nzk5TDEzLjIzNjcgMzEuMDMwNkMxMy4yODE0IDM0LjE0NTUgMTMuMjgxNCAzNC4xOTAyIDEzLjQ3ODQgMzQuMzg3MUMxMy44NzIyIDM0Ljc3MiAxNS4xNyAzNC42OTE1IDE1LjQ0NzUgMzQuMjYxOEMxNS40ODMzIDM0LjE5OTIgMTUuNTM3IDMyLjczMTIgMTUuNTYzOSAzMS4wMTI3TDE1LjYwODYgMjcuODc5OUwxNy40ODgzIDI3LjgzNTJDMTguNTI2NiAyNy44MDgzIDE5LjQyMTcgMjcuNzU0NiAxOS40OTMzIDI3LjcwOTlDMTkuNjYzMyAyNy42MDI0IDE5Ljg2MDIgMjcuMDgzMyAxOS44NTEzIDI2Ljc0MzJDMTkuODQyMyAyNi4xNzkzIDE5LjY2MzMgMjUuODMwMiAxOS4zMjMyIDI1LjcxMzhDMTkuMDkwNSAyNS42MzMzIDE2Ljk2MDIgMjUuNjA2NCAxMS4wMjU4IDI1LjYwNjRDNi42MzEwMiAyNS41OTc1IDMuMDMyODEgMjUuNTc5NiAzLjAzMjgxIDI1LjU1MjdDMy4wMzI4MSAyNS40ODExIDEyLjg3ODYgMTEuNDM3NCAxMy4wNzU2IDExLjIzMTVDMTMuMjM2NyAxMS4wNjE0IDEzLjIzNjcgMTEuMjIyNSAxMy4yMzY3IDE3LjE1NjlWMjMuMjYxM0wxMy40NTE1IDIzLjUwM0MxMy42MzA1IDIzLjcxNzggMTMuNzQ2OSAyMy43NTM2IDE0LjIzOTIgMjMuNzg5NEMxNC44NzQ3IDIzLjgyNTIgMTUuMzA0MyAyMy42ODIgMTUuNDc0NCAyMy4zNjg3QzE1LjUzNyAyMy4yNTI0IDE1LjU2MzkgMjAuNzY0MSAxNS41NjM5IDE2LjAyMDJWOC44NDE2NEwxNS4zMDQzIDguNTgyMDdDMTUuMDQ0NyA4LjMyMjQ5IDE1LjAzNTggOC4zMjI0OSAxMy45MzQ4IDguMzIyNDlDMTMuMDU3NyA4LjMyMjQ5IDEyLjc2MjMgOC4zNTgzIDEyLjQ3NTkgOC40OTI1NloiIGZpbGw9IiNBQjFBMzkiIC8+DQogICAgPHBhdGggZD0iTTIzLjcwOTEgMzIuODIwMUMyMy41ODM4IDMyLjg0NjkgMjMuMzk1OCAzMi45NDU0IDIzLjI5NzQgMzMuMDM0OUMyMi44ODU2IDMzLjQxMDggMjIuOTkzIDM0LjY1NSAyMy40NDA2IDM0Ljg3ODhDMjMuNjkxMiAzNS4wMDQxIDI3LjkxNiAzNS4wNDg4IDI3LjkxNiAzNC45MjM1QzI3LjkxNiAzNC44ODc3IDI3LjQ0MTYgMzQuMzg2NSAyNi44NTk4IDMzLjgwNDdMMjUuODEyNSAzMi43NTc0TDI0Ljg3MjcgMzIuNzY2NEMyNC4zNTM1IDMyLjc3NTMgMjMuODM0NCAzMi44MDIyIDIzLjcwOTEgMzIuODIwMVoiIGZpbGw9IiMxMDEwMTAiIC8+DQogIDwvZz4NCiAgPGRlZnM+DQogICAgPGNsaXBQYXRoIGlkPSJjbGlwMF8xOTJfMTc4MCI+DQogICAgICA8cmVjdCB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIGZpbGw9IndoaXRlIiAvPg0KICAgIDwvY2xpcFBhdGg+DQogIDwvZGVmcz4NCjwvc3ZnPg==');*/
/*}*/
.tariff-arrow{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNSAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC43MjQ3IDAuMjE4NzgzQzE0LjgwNTEgMC4yOTU0MjYgMTQuODcwOCAwLjM4ODcwOCAxNC45MTc4IDAuNDkzMjA2QzE0Ljk2NDggMC41OTc3MDQgMTQuOTkyMyAwLjcxMTMzMSAxNC45OTg2IDAuODI3NDgyQzE1LjAwNDkgMC45NDM2MzIgMTQuOTg5OSAxLjA1OTk5IDE0Ljk1NDUgMS4xNjk3OEMxNC45MTkxIDEuMjc5NTggMTQuODY0MSAxLjM4MDYyIDE0Ljc5MjUgMS40NjcwNEw2LjMxMTIzIDExLjcxMDNDNi4yMzkyOSAxMS43OTcgNi4xNTIxNiAxMS44NjczIDYuMDU0OTUgMTEuOTE2OUM1Ljk1Nzc0IDExLjk2NjUgNS44NTI0IDExLjk5NDUgNS43NDUxMSAxMS45OTkzQzUuNjM3ODIgMTIuMDA0IDUuNTMwNzQgMTEuOTg1NCA1LjQzMDE1IDExLjk0NDVDNS4zMjk1NiAxMS45MDM2IDUuMjM3NDggMTEuODQxMyA1LjE1OTMyIDExLjc2MTJMMC4yNTE1OTYgNi43MzM5NEMwLjEwNDM2MyA2LjU4MDk2IDAuMDE1MjE3OSA2LjM3MzQ1IDAuMDAxNzc1NzkgNi4xNTI0MUMtMC4wMTE2NjYzIDUuOTMxMzYgMC4wNTE1NzI4IDUuNzEyODcgMC4xNzg5OTcgNS41NDAxMUMwLjI0Nzc3NyA1LjQ0NjQ1IDAuMzMzMzMxIDUuMzY4OTggMC40MzA0NjQgNS4zMTI0QzAuNTI3NTk4IDUuMjU1ODEgMC42MzQyODYgNS4yMjEzIDAuNzQ0MDUgNS4yMTA5NkMwLjg1MzgxNCA1LjIwMDYyIDAuOTY0MzY1IDUuMjE0NjUgMS4wNjg5OSA1LjI1MjIyQzEuMTczNjIgNS4yODk3OSAxLjI3MDE0IDUuMzUwMTEgMS4zNTI2OSA1LjQyOTUxTDUuMTYwMTMgOS4xNTY3MkM1LjMxOTEgOS4zMTI0MyA1LjUyODQgOS4zOTMwNiA1Ljc0MTk5IDkuMzgwODdDNS45NTU1OCA5LjM2ODY5IDYuMTU1OTggOS4yNjQ3IDYuMjk5MTMgOS4wOTE3NkwxMy41OTM4IDAuMjg5ODg2QzEzLjczNTggMC4xMTg1NjkgMTMuOTM0IDAuMDE0OTY5NSAxNC4xNDU3IDAuMDAxNDk4OUMxNC4zNTczIC0wLjAxMTk3MTcgMTQuNTY1MyAwLjA2NTc2ODkgMTQuNzI0NyAwLjIxNzkwNFYwLjIxODc4M1oiIGZpbGw9IiMzREMxOEQiLz4KPC9zdmc+Cg==');
}
.tariff-info{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMSAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyNV8yMSkiPgo8cGF0aCBkPSJNOS4yNzk2OSAxLjcxOTg4QzcuMjA1MjcgLTAuMzU0NTQyIDMuNzk1MjcgLTAuMzU0NTQyIDEuNzIwODUgMS43MTk4OEMtMC4zNTM1NjUgMy43OTQyOSAtMC4zNTM1NjUgNy4yMDQyOSAxLjcyMDg1IDkuMjc4NzFDMi43NzIyNyAxMC4zMzAxIDQuMTM2MjcgMTAuODQxNiA1LjUwMDI3IDEwLjg0MTZDNi44NjQyNyAxMC44NDE2IDguMjI4MjcgMTAuMzMwMSA5LjI3OTY5IDkuMjc4NzFDMTEuMzU0MSA3LjIwNDI5IDExLjM1NDEgMy43OTQyOSA5LjI3OTY5IDEuNzE5ODhaTTguODgxODUgOC44ODA4OEM3LjAzNDc3IDEwLjcyOCAzLjk5NDE5IDEwLjcyOCAyLjE0NzEgOC44ODA4OEMwLjMwMDAxOCA3LjAzMzc5IDAuMzAwMDE4IDMuOTkzMjEgMi4xNDcxIDIuMTQ2MTNDMy4wODQ4NSAxLjIwODM4IDQuMzA2NzcgMC43NTM3MDggNS41Mjg2OSAwLjc1MzcwOEM2Ljc1MDYgMC43NTM3MDggNy45NzI1MiAxLjIwODM4IDguOTEwMjcgMi4xNDYxM0MxMC43Mjg5IDMuOTkzMjEgMTAuNzI4OSA3LjAwNTM4IDguODgxODUgOC44ODA4OFpNNS42NzA3NyA0Ljc2MDQ2QzUuNzI3NiA0LjgxNzI5IDUuNzg0NDQgNC45MDI1NCA1Ljc4NDQ0IDUuMDE2MjFWNy43NDQyMUM1Ljc4NDQ0IDcuODU3ODcgNS43NTYwMiA3Ljk0MzEyIDUuNjcwNzcgNy45OTk5NkM1LjU4NTUyIDguMDU2NzkgNS41Mjg2OSA4LjA4NTIxIDUuNDE1MDIgOC4wODUyMUM1LjMyOTc3IDguMDg1MjEgNS4yNDQ1MiA4LjA1Njc5IDUuMTU5MjcgNy45OTk5NkM1LjEwMjQ0IDcuOTQzMTIgNS4wNDU2IDcuODU3ODcgNS4wNDU2IDcuNzQ0MjFWNS4wMTYyMUM1LjA0NTYgNC45MDI1NCA1LjA3NDAyIDQuODE3MjkgNS4xNTkyNyA0Ljc2MDQ2QzUuMjQ0NTIgNC43MDM2MiA1LjMwMTM1IDQuNjc1MjEgNS40MTUwMiA0LjY3NTIxQzUuNTI4NjkgNC42NzUyMSA1LjYxMzk0IDQuNzAzNjIgNS42NzA3NyA0Ljc2MDQ2Wk01Ljc1NjAyIDMuMjI1OTZDNS44NDEyNyAzLjMxMTIxIDUuODY5NjkgMy4zOTY0NiA1Ljg2OTY5IDMuNTEwMTNDNS44Njk2OSAzLjYyMzc5IDUuODQxMjcgMy43Mzc0NiA1Ljc1NjAyIDMuNzk0MjlDNS42NzA3NyAzLjg3OTU0IDUuNTg1NTIgMy45MDc5NiA1LjQ0MzQ0IDMuOTA3OTZDNS4zMDEzNSAzLjkwNzk2IDUuMjE2MSAzLjg3OTU0IDUuMTMwODUgMy43OTQyOUM1LjA0NTYgMy43MDkwNCA1LjAxNzE5IDMuNjIzNzkgNS4wMTcxOSAzLjUxMDEzQzUuMDE3MTkgMy4zOTY0NiA1LjA0NTYgMy4yODI3OSA1LjEzMDg1IDMuMjI1OTZDNS4yMTYxIDMuMTQwNzEgNS4zMjk3NyAzLjExMjI5IDUuNDQzNDQgMy4xMTIyOUM1LjU1NzEgMy4xMTIyOSA1LjY3MDc3IDMuMTQwNzEgNS43NTYwMiAzLjIyNTk2WiIgZmlsbD0iIzEwMTAxMCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzIyNV8yMSI+CjxyZWN0IHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K');
}
.tariff-cross{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNjUxNzkgNy41ODkyOUwxNC45NTA5IDEuMjkwMThDMTUuMjU0NSAwLjk4NjYwNyAxNS4yNTQ1IDAuNTMxMjUgMTQuOTUwOSAwLjIyNzY3OUMxNC42NDczIC0wLjA3NTg5MjkgMTQuMTkyIC0wLjA3NTg5MjkgMTMuODg4NCAwLjIyNzY3OUw3LjU4OTI5IDYuNTI2NzlMMS4yOTAxOCAwLjIyNzY3OUMwLjk4NjYwNyAtMC4wNzU4OTI5IDAuNTMxMjUgLTAuMDc1ODkyOSAwLjIyNzY3OSAwLjIyNzY3OUMtMC4wNzU4OTI5IDAuNTMxMjUgLTAuMDc1ODkyOSAwLjk4NjYwNyAwLjIyNzY3OSAxLjI5MDE4TDYuNTI2NzkgNy41ODkyOUwwLjIyNzY3OSAxMy44ODg0Qy0wLjA3NTg5MjkgMTQuMTkyIC0wLjA3NTg5MjkgMTQuNjQ3MyAwLjIyNzY3OSAxNC45NTA5QzAuNTMxMjUgMTUuMjU0NSAwLjk4NjYwNyAxNS4yNTQ1IDEuMjkwMTggMTQuOTUwOUw3LjU4OTI5IDguNjUxNzlMMTMuODg4NCAxNC45NTA5QzE0LjE5MiAxNS4yNTQ1IDE0LjY0NzMgMTUuMjU0NSAxNC45NTA5IDE0Ljk1MDlDMTUuMjU0NSAxNC42NDczIDE1LjI1NDUgMTQuMTkyIDE0Ljk1MDkgMTMuODg4NEw4LjY1MTc5IDcuNTg5MjlaIiBmaWxsPSIjQUIxQTM5Ii8+Cjwvc3ZnPgo=');
}
.btn-arrowhead{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuNjM2MzcgNS42MTczMkwxMS44Mjc2IDUuNjE3MzJMOC40NTkyNiA4LjkyNTQ0QzguMzk4NDggOC45ODMxIDguMzUgOS4wNTIwNiA4LjMxNjY1IDkuMTI4MzJDOC4yODMzIDkuMjA0NTcgOC4yNjU3NSA5LjI4NjU4IDguMjY1MDEgOS4zNjk1N0M4LjI2NDI4IDkuNDUyNTYgOC4yODAzOCA5LjUzNDg2IDguMzEyMzggOS42MTE2N0M4LjM0NDM3IDkuNjg4NDggOC4zOTE2MyA5Ljc1ODI2IDguNDUxMzggOS44MTY5NEM4LjUxMTEzIDkuODc1NjIgOC41ODIxOCA5LjkyMjAzIDguNjYwMzkgOS45NTM0NkM4LjczODU5IDkuOTg0ODggOC44MjIzOSAxMC4wMDA3IDguOTA2ODkgOS45OTk5OEM4Ljk5MTM4IDkuOTk5MjYgOS4wNzQ4OSA5Ljk4MjAxIDkuMTUyNTMgOS45NDkyNkM5LjIzMDE3IDkuOTE2NSA5LjMwMDM5IDkuODY4ODkgOS4zNTkwOSA5LjgwOTE5TDEzLjgxMzcgNS40MzQxOUMxMy45MzMgNS4zMTY5OSAxNCA1LjE1ODA1IDE0IDQuOTkyMzJDMTQgNC44MjY1OSAxMy45MzMgNC42Njc2NSAxMy44MTM3IDQuNTUwNDVMOS4zNTkwOSAwLjE3NTQ0NUM5LjIzOTA3IDAuMDYxNTk1OSA5LjA3ODMyIC0wLjAwMTQwMDk1IDguOTExNDcgMi4yODg4MmUtMDVDOC43NDQ2MSAwLjAwMTQ0NzY4IDguNTg1IDAuMDY3MTc4NyA4LjQ2NzAyIDAuMTgzMDU5QzguMzQ5MDMgMC4yOTg5MzkgOC4yODIxIDAuNDU1Njk2IDguMjgwNjUgMC42MTk1N0M4LjI3OTIgMC43ODM0NDIgOC4zNDMzNCAwLjk0MTMxOSA4LjQ1OTI2IDEuMDU5MkwxMS44Mjc2IDQuMzY3MzJMMC42MzYzNyA0LjM2NzMyQzAuNDY3NTk0IDQuMzY3MzIgMC4zMDU3MyA0LjQzMzE3IDAuMTg2Mzg4IDQuNTUwMzhDMC4wNjcwNDUyIDQuNjY3NTkgMCA0LjgyNjU2IDAgNC45OTIzMkMwIDUuMTU4MDggMC4wNjcwNDUyIDUuMzE3MDUgMC4xODYzODggNS40MzQyNkMwLjMwNTczIDUuNTUxNDcgMC40Njc1OTQgNS42MTczMiAwLjYzNjM3IDUuNjE3MzJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
}
.tariff-grayarrow{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDEwIDUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01LjAwMDU2IDVDNC44NTI5NiA1LjAwMDAyIDQuNzExMzYgNC45NDc0NiA0LjYwNjY4IDQuODUzODFMMC4xNTYxNjQgMC44NDg0ODNDMC4wNTQ4MjY5IDAuNzU0MDU3IC0wLjAwMTI0NjQ5IDAuNjI3NTg3IDIuMTAzMDJlLTA1IDAuNDk2MzE0QzAuMDAxMjg4NTUgMC4zNjUwNDIgMC4wNTk3OTU1IDAuMjM5NDY4IDAuMTYyOTQxIDAuMTQ2NjQxQzAuMjY2MDg2IDAuMDUzODEzNSAwLjQwNTYxOCAwLjAwMTE1OTY1IDAuNTUxNDgyIDEuODkyNjVlLTA1QzAuNjk3MzQ2IC0wLjAwMTEyMTggMC44Mzc4NzEgMC4wNDkzNDI0IDAuOTQyNzkzIDAuMTQwNTQzTDUuMDAwNTYgMy43OTEzOUw5LjA1NzIxIDAuMTQwNTQzQzkuMTYyMTMgMC4wNDkzNDI0IDkuMzAyNjUgLTAuMDAxMTIxOCA5LjQ0ODUyIDEuODkyNjVlLTA1QzkuNTk0MzggMC4wMDExNTk2NSA5LjczMzkxIDAuMDUzODEzNSA5LjgzNzA2IDAuMTQ2NjQxQzkuOTQwMiAwLjIzOTQ2OCA5Ljk5ODcxIDAuMzY1MDQyIDkuOTk5OTggMC40OTYzMTRDMTAuMDAxMiAwLjYyNzU4NyA5Ljk0NTE3IDAuNzU0MDU3IDkuODQzODQgMC44NDg0ODNMNS4zOTMzMSA0Ljg1MzgxQzUuMzQxNzYgNC45MDAyNCA1LjI4MDUzIDQuOTM3MDUgNS4yMTMxMyA0Ljk2MjE0QzUuMTQ1NzMgNC45ODcyMyA1LjA3MzQ5IDUuMDAwMDkgNS4wMDA1NiA1WiIgZmlsbD0iIzEwMTAxMCIvPgo8L3N2Zz4K');
}
.pd-info-icon{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyNV8zMzkpIj4KPHBhdGggZD0iTTM1LjQzMDUgNi41NjczM0MyNy41MSAtMS4zNTMxNyAxNC40OSAtMS4zNTMxNyA2LjU2OTUgNi41NjczM0MtMS4zNTEgMTQuNDg3OCAtMS4zNTEgMjcuNTA3OCA2LjU2OTUgMzUuNDI4M0MxMC41ODQgMzkuNDQyOCAxNS43OTIgNDEuMzk1OCAyMSA0MS4zOTU4QzI2LjIwOCA0MS4zOTU4IDMxLjQxNiAzOS40NDI4IDM1LjQzMDUgMzUuNDI4M0M0My4zNTEgMjcuNTA3OCA0My4zNTEgMTQuNDg3OCAzNS40MzA1IDYuNTY3MzNaTTMzLjkxMTUgMzMuOTA5M0MyNi44NTkgNDAuOTYxOCAxNS4yNDk1IDQwLjk2MTggOC4xOTcgMzMuOTA5M0MxLjE0NDUgMjYuODU2OCAxLjE0NDUgMTUuMjQ3MyA4LjE5NyA4LjE5NDgzQzExLjc3NzUgNC42MTQzMyAxNi40NDMgMi44NzgzMyAyMS4xMDg1IDIuODc4MzNDMjUuNzc0IDIuODc4MzMgMzAuNDM5NSA0LjYxNDMzIDM0LjAyIDguMTk0ODNDNDAuOTY0IDE1LjI0NzMgNDAuOTY0IDI2Ljc0ODMgMzMuOTExNSAzMy45MDkzWk0yMS42NTEgMTguMTc2OEMyMS44NjggMTguMzkzOCAyMi4wODUgMTguNzE5MyAyMi4wODUgMTkuMTUzM1YyOS41NjkzQzIyLjA4NSAzMC4wMDMzIDIxLjk3NjUgMzAuMzI4OCAyMS42NTEgMzAuNTQ1OEMyMS4zMjU1IDMwLjc2MjggMjEuMTA4NSAzMC44NzEzIDIwLjY3NDUgMzAuODcxM0MyMC4zNDkgMzAuODcxMyAyMC4wMjM1IDMwLjc2MjggMTkuNjk4IDMwLjU0NThDMTkuNDgxIDMwLjMyODggMTkuMjY0IDMwLjAwMzMgMTkuMjY0IDI5LjU2OTNWMTkuMTUzM0MxOS4yNjQgMTguNzE5MyAxOS4zNzI1IDE4LjM5MzggMTkuNjk4IDE4LjE3NjhDMjAuMDIzNSAxNy45NTk4IDIwLjI0MDUgMTcuODUxMyAyMC42NzQ1IDE3Ljg1MTNDMjEuMTA4NSAxNy44NTEzIDIxLjQzNCAxNy45NTk4IDIxLjY1MSAxOC4xNzY4Wk0yMS45NzY1IDEyLjMxNzhDMjIuMzAyIDEyLjY0MzMgMjIuNDEwNSAxMi45Njg4IDIyLjQxMDUgMTMuNDAyOEMyMi40MTA1IDEzLjgzNjggMjIuMzAyIDE0LjI3MDggMjEuOTc2NSAxNC40ODc4QzIxLjY1MSAxNC44MTMzIDIxLjMyNTUgMTQuOTIxOCAyMC43ODMgMTQuOTIxOEMyMC4yNDA1IDE0LjkyMTggMTkuOTE1IDE0LjgxMzMgMTkuNTg5NSAxNC40ODc4QzE5LjI2NCAxNC4xNjIzIDE5LjE1NTUgMTMuODM2OCAxOS4xNTU1IDEzLjQwMjhDMTkuMTU1NSAxMi45Njg4IDE5LjI2NCAxMi41MzQ4IDE5LjU4OTUgMTIuMzE3OEMxOS45MTUgMTEuOTkyMyAyMC4zNDkgMTEuODgzOCAyMC43ODMgMTEuODgzOEMyMS4yMTcgMTEuODgzOCAyMS42NTEgMTEuOTkyMyAyMS45NzY1IDEyLjMxNzhaIiBmaWxsPSIjMTAxMDEwIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjI1XzMzOSI+CjxyZWN0IHdpZHRoPSI0MiIgaGVpZ2h0PSI0MiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K');
}




.page-descriptor {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 15px;
    border-radius: 10px;
    background: var(--sta-card-bg);
    padding: 15px 15px 15px 20px;
    margin-bottom: 25px;
}
.pd-title {
    font-weight: 600;
    font-size: 20px;
    color: var(--sta-color-text);
    margin: 0;
    line-height: 1.3;
}
.pd-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
}
.pd-img {
    font-size: 0;
}
.pd-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.tariffs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px;
    margin-bottom: 25px;
}
.tariffs__s{
    grid-template-columns: 1fr;
}
.tariff {
    border-radius: var(--sta-radius-lg);
    background: var(--sta-card-bg);
    box-shadow: var(--sta-shadow-resting);
    overflow: hidden;
}
.tariff-label {
    font-weight: 400;
    font-size: 40px;
    color: #fff;
    background: var(--sta-color-danger);
    padding: 5px 15px 5px 10px;
    border-radius: 0 0 var(--sta-radius-lg) 0;
    margin-bottom: auto;
    min-height: 50px;
    display: flex;
}
.tariff-label img{
    display: block;
}
.tariff__blue .tariff-label{
    background: var(--sta-plan-blue);
}
.tariff__yellow .tariff-label{
    background: var(--sta-plan-yellow);
}
.tariff__green .tariff-label{
    background: var(--sta-plan-green);
}
.tariff-top {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding-right: 15px;
    align-items: center;
    margin-bottom: 15px;
}
.tariff-logo {
    width: 42px;
    height: 42px;
}
.tariff-text {
    font-weight: 400;
    font-size: 14px;
    color: #000;
    padding: 0 15px;
    margin-bottom: 15px;
    line-height: normal;
}
.tariff-head {
    font-weight: 600;
    font-size: 20px;
    color: var(--sta-color-text);
    padding: 0 15px;
    margin-bottom: 15px;
}
.tariff-li {
    border-bottom: 1px dashed var(--sta-card-border);
    display: grid;
    grid-template-columns: 15px minmax(0,1fr) 11px;
    padding: 0 15px 4px;
    gap: 10px;
    font-size: 14px;
    color: #000;
    align-items: center;
}
.tariff-li:last-child {
    border-bottom: 1px dashed #e4e4e400;
}
.tariff-arrow {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    min-width: 15px;
    height: 12px;
}
.tariff-info {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 11px;
    min-width: 11px;
    margin-top: 5px;
}
.tariff-ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
}
.tariff-cross {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    min-width: 15px;
    height: 15px;
}
.tariff-prices {
    padding: 0 15px;
    margin-bottom: 15px;
}
.tariff-price {
    font-weight: 600;
    font-size: 36px;
    color: var(--sta-color-text);
    margin-bottom: 5px;
    display: flex;
    gap: 5px;
    align-items: flex-end;
    line-height: 0.8;
    margin-top: 28px;
}
.tariff-price span {
    font-size: 14px;
    color: var(--sta-color-text-secondary);
    font-weight: 400;
    line-height: 1.3;
}
.tariff-ptext {
    font-size: 14px;
    color: var(--sta-color-text-secondary);
}
.tariff-ptext b {
    color: #000;
}
.tariff-signed {
    font-size: 14px;
    color: #3dc18d;
    display: grid;
    grid-template-columns: 15px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    padding: 0 15px;
    margin-bottom: 15px;
    min-height: 40px;
}
.tariff-button {
    border-radius: 10px;
    height: 40px;
    padding: 0 15px 0 13px;
    margin: 0 15px 16px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 14px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    align-items: center;
    line-height: 150%;
    cursor: pointer;
    background: var(--sta-gradient-primary);
    transition: transform 0.3s ease, color 0.3s ease;
}
.tariff-button-message {
    padding: 0 20px 10px 20px;
}
.tariff-button:not(.t-signed):hover{
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 82, 82, 0.3);
}
.tariff-button.t-signed {
    background: var(--sta-surface-muted);
    cursor: default;
}
.btn-arrowhead {
    min-width: 14px;
    height: 10px;
}
.tariff-upgrade {
    font-size: 14px;
    padding: 0 15px;
    margin: 0 15px 15px;
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    background: #f4f5f6;
    font-weight: 400;
    color: var(--sta-color-text);
    gap: 5px;
}
.tariff-upgrade span{
    color: #3dc18d;
    font-weight: 600;
}
select.tariff-upgrade {
    width: 100%;
    border: 0;
    cursor: pointer;
    width: calc(100% - 30px);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.tariff-select-overlay{
    position: relative;
}
.tariff-select-overlay .tariff-grayarrow{
    position: absolute;
    right: 30px;
    top: 50%;
    z-index: 1;
    pointer-events: none;
    min-width: 10px;
    height: 5px;
    transform: translateY(-50%);
}
.tariff-select-overlay:has(select:focus) .tariff-grayarrow {
    transform: translateY(-50%) rotate(180deg);
}
.tariff-upgrade .tariff-grayarrow {
    min-width: 10px;
    height: 5px;
    margin-left: auto;
}
.tariff-upgrade-select{
    cursor: pointer;
}

@media (max-width: 992px) {
    .tariffs{
        grid-template-columns: 1fr;
    }
    .tariff-label{
        font-size: var(--sta-fs-h4);
    }
}

.pd-info-icon {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    min-width: 42px;
    height: 42px;
}
.pd-text a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--sta-color-danger);
}
.def-h2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: var(--sta-color-text);
    margin: 0;
}
.promo_code-text {
    font-weight: 400;
    font-size: 12px;
    color: var(--sta-color-text-secondary);
    margin-bottom: 15px;
    line-height: 15px;
}
.def-input {
    border-radius: 10px;
    height: 40px;
    background: var(--sta-card-bg);
    outline: none;
    border: 0;
    padding: 0 20px;
    font-weight: 400;
    font-size: 14px;
    color: #000;
    width: 100%;
}
.def-input::placeholder {
    color: var(--sta-color-text-muted);
}
.promo_code .def-input {
    margin-bottom: 21px;
}
.def-btn {
    background: var(--sta-gradient-primary);
    border-radius: 10px;
    height: 40px;
    padding: 0 15px 0 13px;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
}
.promo_code .def-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}
/*.def-btn:hover {*/
/*    color: white;*/
/*    transform: translateY(-2px);*/
/*    box-shadow: 0 6px 15px rgba(255, 82, 82, 0.3);*/
/*}*/
.promo_code {
    margin-bottom: 25px;
}

/* FOOTER */
div:not(.content):has(+ .footer__wrap){
    margin-bottom: 250px;
}
.footer__wrap{
    margin-top: auto;
    background: #272727 url(img/footer.svg) right no-repeat;
    background-size: contain;
}
.footer{
    padding: 60px 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 15px;
}
.footer__t{
    max-width: 248px;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #fff;
    margin: 29px 0 12px;
}
.footer__a{
    font-weight: 400;
    font-size: 14px;
    text-decoration-skip-ink: none;
    color: #fff;
}
.footer__a:hover{
    text-decoration: underline;
    color: #fff;
}
.footer__title{
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}
.footer__ul{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
}
.footer__btm{
    border-top: 1px solid #333;
    padding: 13px 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    grid-gap: 15px;
}
.footer__i{
    display: flex;
    align-items: center;
    grid-gap: 10px;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
}
.footer__i:hover{
    text-decoration: underline;
    color: #fff;
}
@media (max-width: 992px) {
    .footer{
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-gap: 35px;
    }
    .footer__c {
        display: flex;
        flex-flow: column;
        align-items: center;
        text-align: center;
    }
}


.tf_order {
    display: grid;
    grid-template-columns: minmax(0, 1fr)  minmax(0, 2fr);
    gap: 20px;
    margin-bottom: 25px;
}
.tariff_try {
    border-radius: 10px;
    background: var(--sta-card-bg);
    padding: 27px 40px;
    display: flex;
    flex-direction: column;
}
.tariff_try-title {
    font-weight: 600;
    font-size: 32px;
    color: var(--sta-color-text);
    line-height: normal;
    margin-bottom: 9px;
}
.tariff_try-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
    width: 514px;
    max-width: 100%;
    margin-bottom: 15px;
}
.tariff_try-ul .match {
    grid-template-columns: minmax(0, 1fr) 114px;
}
.tariff_try-ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tariff_try .def-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    width: fit-content;
    margin-top: auto;
}
.tariff_try .event-status {
    padding: 0 1px;
    width: 100%;
}

/* -------- */
.pg-payments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
    margin-bottom: 25px;
}
.pg-payment {
    border-radius: 10px;
    background: var(--sta-card-bg);
    padding: 15px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
}
.pg-payment-img {
    max-width: 172px;
    max-height: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.pg-payment-img > * {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
}
.pg-payment-info{
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    color: #000;
}
.pg-payment-text {
    font-weight: 400;
    margin-bottom: 15px;
}
.pg-payment .def-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}
.tg-login-btn {
    background: #54a9eb;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #fff;
    height: 40px;
    width: fit-content;
    padding: 11px 13px;
    margin-top: 9px;
}
.csv_events-title {
    font-weight: 500;
    font-size: 24px;
    line-height: normal;
    color: var(--sta-color-text);
}
.csv_events-text {
    font-weight: 400;
    font-size: 12px;
    color: var(--sta-color-text-secondary);
    margin-bottom: 20px;
}
.csv_events-ul {
    border-radius: 10px;
    background: var(--sta-card-bg);
}
.csv_events-li {
    border-bottom: 1px dashed var(--sta-card-border);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 5px 15px;
}
.csv_events-li:last-child {border: 0;}
.csv_events-li-a {
    font-weight: 500;
    font-size: 14px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--sta-color-danger);
}
.csv_events {
    margin-bottom: 25px;
}


.pg-login-row:not(.sta-reset-password){
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.sta-reset-password {
    max-width: 800px;
    margin: 0 auto;
}
.pg-login-left,
.pg-login-right{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pg-login-left > *:last-child,
.pg-login-right > *:last-child{
    margin-top: auto;
}
.pg-login-left > *:last-child {
    margin-top: 0;
}
.pg-login-row form.wa-form {
    border-radius: 10px;
    background: var(--sta-card-bg);
    padding: 27px 40px;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
    position: relative;
}
.pg-login-title {
    font-weight: 600;
    font-size: 32px;
    color: var(--sta-color-text);
    margin-bottom: 10px;
    line-height: normal;
}
.pg-login-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
    margin-bottom: 15px;
}
.pg-login-row .wa-form .wa-field .wa-name:empty{display: none;}
.pg-login-row .wa-form input[type="text"],
.pg-login-row .wa-form input[type="password"]{
    background: #f4f5f6;
    border-radius: 10px;
    height: 40px;
    border: 0;
    padding: 0px 20px;
}
.pg-login-row .wa-form input[type="text"]::placeholder,
.pg-login-row .wa-form input[type="password"]::placeholder{
    font-weight: 400;
    font-size: 14px;
    color: var(--sta-color-text-muted);
}
.pg-login-row .wa-form .wa-field .wa-name{
    padding: 0;
}
.pg-login-row .wa-form button {
    border-radius: 10px;
    padding: 10px 13px;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    color: #fff;
    background: var(--sta-gradient-primary);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 15px;
    margin-top: auto;
    width: auto;
}
.pg-login-row .wa-field {
    margin-bottom: 15px;
    /* max-width: 417px; */
    width: 100%;
}
.pg-login-row .wa-field:last-child {margin-bottom: 0;}

.pg-login-row input[type="checkbox"]{
    display: none;
}
.pg-login-row .wa-value:has(input[type="checkbox"]) label{
    display: flex;
    gap: 10px;
    cursor: pointer;
    width: 100%;
}
.pg-login-row .wa-value:has(input[type="checkbox"]) label:before{
    content: "";
    min-width: 25px;
    height: 25px;
    display: inline-block;
    background: #f4f5f6;
    border-radius: 5px;
}
.pg-login-row .wa-value:has(input[type="checkbox"]:checked) label:before{
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByeD0iNSIgZmlsbD0iIzNEQzE4RCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIxLjY2OTYgNi4yNTUyNUMyMS43NjYyIDYuMzQ0NjYgMjEuODQ0OSA2LjQ1MzQ5IDIxLjkwMTQgNi41NzU0MUMyMS45NTc4IDYuNjk3MzIgMjEuOTkwNyA2LjgyOTg5IDIxLjk5ODMgNi45NjU0QzIyLjAwNTkgNy4xMDA5IDIxLjk4NzkgNy4yMzY2NSAyMS45NDU0IDcuMzY0NzVDMjEuOTAzIDcuNDkyODQgMjEuODM2OSA3LjYxMDczIDIxLjc1MSA3LjcxMTU1TDExLjU3MzUgMTkuNjYyQzExLjQ4NzEgMTkuNzYzMiAxMS4zODI2IDE5Ljg0NTIgMTEuMjY1OSAxOS45MDMxQzExLjE0OTMgMTkuOTYxIDExLjAyMjkgMTkuOTkzNiAxMC44OTQxIDE5Ljk5OTJDMTAuNzY1NCAyMC4wMDQ3IDEwLjYzNjkgMTkuOTgzIDEwLjUxNjIgMTkuOTM1M0MxMC4zOTU1IDE5Ljg4NzYgMTAuMjg1IDE5LjgxNDkgMTAuMTkxMiAxOS43MjE0TDQuMzAxOTIgMTMuODU2M0M0LjEyNTI0IDEzLjY3NzggNC4wMTgyNiAxMy40MzU3IDQuMDAyMTMgMTMuMTc3OEMzLjk4NiAxMi45MTk5IDQuMDYxODkgMTIuNjY1IDQuMjE0OCAxMi40NjM1QzQuMjk3MzMgMTIuMzU0MiA0LjQgMTIuMjYzOCA0LjUxNjU2IDEyLjE5NzhDNC42MzMxMiAxMi4xMzE4IDQuNzYxMTQgMTIuMDkxNSA0Ljg5Mjg2IDEyLjA3OTVDNS4wMjQ1OCAxMi4wNjc0IDUuMTU3MjQgMTIuMDgzOCA1LjI4Mjc5IDEyLjEyNzZDNS40MDgzNCAxMi4xNzE0IDUuNTI0MTYgMTIuMjQxOCA1LjYyMzIzIDEyLjMzNDRMMTAuMTkyMiAxNi42ODI4QzEwLjM4MjkgMTYuODY0NSAxMC42MzQxIDE2Ljk1ODYgMTAuODkwNCAxNi45NDQ0QzExLjE0NjcgMTYuOTMwMSAxMS4zODcyIDE2LjgwODggMTEuNTU5IDE2LjYwNzFMMjAuMzEyNSA2LjMzODJDMjAuNDgyOSA2LjEzODMzIDIwLjcyMDggNi4wMTc0NiAyMC45NzQ4IDYuMDAxNzVDMjEuMjI4OCA1Ljk4NjAzIDIxLjQ3ODQgNi4wNzY3MyAyMS42Njk2IDYuMjU0MjJWNi4yNTUyNVoiIGZpbGw9IiNGNEY1RjYiLz4KPC9zdmc+Cg==);
}
.wa-form-ico {
    position: absolute;
    right: 10px;
    top: 10px;
}
.sta-login-form-tg {
    background:     url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjE1OCIgdmlld0JveD0iMCAwIDE0NiAxNTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF80MF82NDgpIj4KPGNpcmNsZSBjeD0iOTIuNSIgY3k9IjY1LjUiIHI9IjkwLjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjMiIHN0cm9rZS13aWR0aD0iNCIvPgo8cGF0aCBkPSJNMTA2LjAyMiAxMDAuMjhDMTA0Ljk1MiAxMDAuMjggMTAzLjc3NyA5OS45MjUzIDEwMi41MDYgOTkuMjE4M0w3My43MjY2IDc3Ljc3ODlDNzMuNTY4MyA3Ny42NiA3My40MzgxIDc3LjUwNzIgNzMuMzQ1MiA3Ny4zMzE1QzczLjI1MjQgNzcuMTU1OCA3My4xOTkyIDc2Ljk2MTYgNzMuMTg5NSA3Ni43NjI3QzczLjE3OTkgNzYuNTYzOSA3My4yMTM5IDc2LjM2NTMgNzMuMjg5MyA3Ni4xODEzQzczLjM2NDYgNzUuOTk3MyA3My40Nzk0IDc1LjgzMjQgNzMuNjI1NCA3NS42OTg0TDEwNy43MTQgNDQuNzQ2MUMxMDcuOTc3IDQ0LjUwNzcgMTA4LjMyMiA0NC4zODQyIDEwOC42NzUgNDQuNDAyOEMxMDkuMDI4IDQ0LjQyMTUgMTA5LjM1OSA0NC41ODA4IDEwOS41OTUgNDQuODQ1NkMxMDkuODMxIDQ1LjExMDQgMTA5Ljk1NCA0NS40NTkyIDEwOS45MzUgNDUuODE1MUMxMDkuOTE3IDQ2LjE3MDkgMTA5Ljc1OSA0Ni41MDQ5IDEwOS40OTYgNDYuNzQzM0w3Ni42MjI0IDc2LjU5NjJMMTAzLjkzOSA5Ni45NjA0QzEwNC42NjEgOTcuMzUwMiAxMDUuODgxIDk3Ljg0NDggMTA2Ljc1IDk3LjQzODlDMTA3LjYzNCA5Ny4wMzAzIDEwOC4wNzEgOTUuNzI2NiAxMDguMjg0IDk0LjcwNTJMMTE5LjkzOSAzOS4yODY4QzEyMC4zOTIgMzcuNDU2MyAxMjAuMTc0IDM1Ljk4MzMgMTE5LjM2NiAzNS4zMDU5QzExOC43NTEgMzQuNzg5OCAxMTcuODM1IDM0Ljc1MjIgMTE2Ljg0NCAzNS4yMDM4TDQ4LjMzNTkgNjEuODYzM0M0Ni4yMzQgNjIuNzE1NCA0NS41NzMzIDYzLjU5MTcgNDUuNTg0IDYzLjg4MkM0NS41OTIgNjQuMDcyOCA0Ni4wNDQ5IDY0LjU5OTcgNDcuMzk1NSA2NS4wMTYzTDY0LjM3ODYgNzAuMzY1NEw4My4wMjQgNTguNDk1MkM4My4zMjIgNTguMzIzMyA4My42NzQzIDU4LjI3NDIgODQuMDA3MyA1OC4zNThDODQuMzQwNCA1OC40NDE4IDg0LjYyODUgNTguNjUyMSA4NC44MTE3IDU4Ljk0NUM4NC45OTQ4IDU5LjIzOCA4NS4wNTg4IDU5LjU5MDkgODQuOTkwMyA1OS45MzAzQzg0LjkyMTcgNjAuMjY5NyA4NC43MjYgNjAuNTY5MyA4NC40NDM5IDYwLjc2NjZMNjUuMjc5IDcyLjk2NzRDNjUuMTE1NyA3My4wNzA5IDY0LjkzMjEgNzMuMTM3NyA2NC43NDA5IDczLjE2MzJDNjQuNTQ5NiA3My4xODg3IDY0LjM1NTIgNzMuMTcyNCA2NC4xNzA4IDczLjExNTJMNDYuNjA5NiA2Ny41ODMzQzQzLjQ5MjcgNjYuNjIxIDQyLjk1OTkgNjQuOTIyMiA0Mi45MjI2IDYzLjk5NDlDNDIuODY5MyA2Mi43MjM0IDQzLjU5NjYgNjAuODg0OSA0Ny4zNjM1IDU5LjM2MzRMMTE1LjgxNSAzMi43MzA4QzExNy42NzIgMzEuODc2IDExOS42NjUgMzIuMDU4OCAxMjEuMDc0IDMzLjI0NDJDMTIyLjcwNyAzNC42MTc4IDEyMy4yNCAzNy4wNDI0IDEyMi41MzcgMzkuODk0M0wxMTAuODkyIDk1LjI2MTZDMTEwLjQwMiA5Ny42MjE2IDEwOS4zODQgOTkuMTc4IDEwNy44NjMgOTkuODgyM0MxMDcuMjg2IDEwMC4xNDkgMTA2LjY1OCAxMDAuMjg1IDEwNi4wMjIgMTAwLjI4WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuMyIgc3Ryb2tlLXdpZHRoPSIyIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNDBfNjQ4Ij4KPHJlY3Qgd2lkdGg9IjE4NSIgaGVpZ2h0PSIxODUiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0yNykiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) top right no-repeat, linear-gradient(180deg, #29aaed 0%, #229ed9 100%);
    border-radius: 10px;
    padding: 27px 40px;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #ffffff;
    position: relative;
}
.sta-login-form-tg .pg-login-title {
    color: #fff;
}
.sta-login-form-tg .pg-login-text {
    color: #fff;
}
@media (max-width: 992px) {
    .pg-login-row:not(.sta-reset-password){
        grid-template-columns: minmax(0, 1fr);
    }
    .pg-login-row form.wa-form{
        padding: 16px;
    }
}

/* FILTERS */
.filter{
    /*margin-top: 15px;*/
}
.filter-name{
    margin-bottom: 10px;
}
.filter-name:empty{
    display: none;
}
.filter-value:has(> select){
    position: relative;
}
.filter-value:has(> select) svg{
    position: absolute;
    top: 17px;
    right: 15px;
}
.filter-value select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 0 37px 0 20px;
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    background: var(--sta-card-bg);
    font-weight: 400;
    color: var(--sta-color-text);
    gap: 5px;
}
.filter-value .filters-select-rotator-value-wrap .hint {
    font-size: 0.8rem;
    font-weight: 400;
}
.filter.multibox, .filter.singlebox{
    background: var(--sta-card-bg);
    /*border-radius: 10px;*/
    padding: 15px;
}
.filters__table .filter:not(:last-child){
    border-bottom: 1px dashed var(--sta-card-border);
}
.filters__table .filter.filter-hidden, .filters__table .filter.filter__nb, .filters__table .filter-grouped-value .filter{
    border-bottom: none;
}

.filters__table .filter.filter__nb + .filter:not(.filter.filter__nb), .filters__table .filter__nb + .filter:not(.filter.filter__nb){
    border-radius: 10px 10px 0 0!important;
}

.filters__table .filter:not(:has(+ .filter)){
    border-bottom: none;
}
.filters__table .filter:has(+ .filter-submit){
    border-radius: 0 0 10px 10px;
}
.filter.multibox .filter-value{
    display: flex;
    flex-wrap: wrap;
    grid-gap: 5px;
}
.filter.singlebox .filter-value{
    display: flex;
    flex-wrap: wrap;
    grid-gap: 10px;
}
.filter.multibox .filter-value input{
    display: none;
}
.filter.multibox .filter-value > .multibox-item-wrap{
    background: var(--sta-surface-muted);
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    color: var(--sta-color-text);
    padding: 2px 9px;
    cursor: pointer;
}
.filter.multibox .multibox-item{
    cursor: pointer;
}
.filter.multibox .filter-value > .multibox-item-wrap:has(input[type="checkbox"]:checked){
    background: #878787;
    color: white;
}
.filter-multibox-controls{
    display: none;
}

.filter.singlebox .filter-value > input{
    display: none;
}
.filter.singlebox .filter-value > .singlebox-item{
    /*font-weight: 500;*/
    /*font-size: 14px;*/
    /*color: var(--sta-color-text);*/
    /*padding: 8px 15px;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*grid-gap: 5px;*/

    background: var(--sta-surface-muted);
    border-radius: 10px;
    min-width: 45px;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
    cursor: pointer;
    grid-gap: 5px;
    justify-content: center;
}
.filter-box-sub-name:empty{
    display: none;
}
.filter.singlebox .filter-value > input[type="radio"]:checked + .singlebox-item{
    background: #878787;
    color: white;
}
.filter.singlebox .filter-value > .singlebox-item input[type="text"]{
    border-radius: 5px;
    outline: none;
    border: none;
    font-size: 12px;
    text-align: center;
    color: var(--sta-color-text);
    height: 21px;
    width: 41px;
}
.filter-submit input[type="submit"]{
    width: 100%;
    border-radius: 10px;
    background: var(--sta-gradient-primary);
    border: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    color: #fff;
    padding: 0 14px;
    cursor: pointer;
    text-align: left;
    min-height: 40px;
}
.filter-submit{
    margin-top: 20px;
    display: flex;
    align-items: center;
    position: relative;
}
.filter-submit svg{
    position: absolute;
    right: 15px;
}
.filter-box-subfields{
    display: flex;
    grid-gap: 5px;
}
.filter-grouped-value{
    grid-gap: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.filters-input-search-ajax, .filter-value input[type="number"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 0 15px 0 15px;
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    background: var(--sta-card-bg);
    font-weight: 400;
    color: var(--sta-color-text);
    gap: 5px;
}
.filters-input-search-ajax::placeholder{
    color: #5c5c5c;
}
.filter-name{
    font-weight: 400;
    font-size: 12px;
    color: var(--sta-color-text);
}
.filter.multibox .filter-value, .filter.singlebox .filter-value{
    flex-wrap: wrap;
    overflow-x: auto;
    &::-webkit-scrollbar {
        display: none;
    }

    &.dragging {
        cursor: grabbing;
        scroll-behavior: auto !important;
    }
}
.filter.multibox .filter-value > *, .filter.singlebox .filter-value > *{
    white-space: nowrap;
}
.filters__wrap{
    /*display: grid;*/
    /*grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);*/
    /*grid-gap: 20px;*/
}
.filters__table{
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
}
.filters__title{
    font-weight: 500;
    font-size: 24px;
    color: var(--sta-color-text);
    margin-top: 25px;
    margin-bottom: 15px;
}
.filters__title:has(+ .filters__text){
    margin-bottom: 0;
}
.filters__wrap .filters__title{
    margin-bottom: 20px;
}
.filters__text{
    font-weight: 400;
    font-size: 12px;
    color: var(--sta-color-text-secondary);
}
.filters__text a{
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--sta-color-danger);
}
.filters__text a:hover{
    color: var(--sta-color-danger);
}
.filters__title-box{
    margin-bottom: 11px;
}

.submit-btn {
    width: 100%;
    border-radius: 10px;
    background: var(--sta-gradient-primary);
    border: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    padding: 10px 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-size: 200% 100%;
    background-position: 0% 0%;
    transition: 0.2s background;
}
.submit-btn:after {
    background: var(--sta-card-bg);
    content: "";
    height: 170px;
    left: -180px;
    opacity: 0.1;
    position: absolute;
    top: -65px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 150px;
    pointer-events: none;
}
.submit-btn:hover {
    background-position: 50% 0%;
}
.submit-btn:hover:after {
    left: 130%;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.submit-btn:active {
    background-position: 100% 0%;
}
.submit-btn div {
    position: relative;
    top: 0;
    height: 0;
    transition: 0.2s top;
}
.submit-btn img {
    display: block;
    margin: 0 auto;
    position: relative;
    top: 40px;
    transition: 0.2s top;
}
.submit-btn:disabled {
    background: linear-gradient(180deg, #878787 0%, #878787 100%);
}
.submit-btn:disabled:after {
    opacity: 0;
}
.submit-btn:disabled div {
    top: -40px;
}
.submit-btn:disabled img {
    top: 0;
}
.submit-progress {
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px;
    background: var(--sta-card-bg);
    line-height: 21px;
    display: grid;
    grid-template-columns: 47px minmax(0, 1fr);
    grid-gap: 20px;
}
.submit-progress-content-cpt {
    font-weight: 600;
    margin-bottom: 5px;
}
.submit-progress-preloader img {
    display: block;
}
.submit-content {
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px;
    background: var(--sta-card-bg);
    line-height: 21px;
    display: grid;
    grid-template-columns: 47px minmax(0, 1fr);
    grid-gap: 20px;
}
.submit-content-content-cpt {
    font-weight: 600;
    margin-bottom: 5px;
}
.submit-content-icon img {
    display: block;
}

.filter__numb{
    position: relative;
    display: flex;
    align-items: center;
}
.filter__numb .filter-name{
    position: absolute;
    z-index: 1;
    margin: 0;
    left: 20px;
    font-size: 14px;
    color: var(--sta-color-text-muted);
}
.filter__numb .filter-value{
    width: 100%;
    display: flex;
    align-items: center;
}
.filter__numb .filter-value input[type="number"]{
    padding: 0 30px 0 116px;
    text-align: right;
}
.filter__numb-nv{
    position: absolute;
    right: 15px;
}
.filter__numb .filter-value:has(.filter__numb-nv:empty) input[type="number"]{
    padding: 0 10px 0 116px;
}

@media (max-width: 992px) {

}
@media (max-width: 768px) {
    .filter-grouped-value{
        grid-template-columns: 1fr;
    }
}

/* SLIDER */
.mySwiper2, .top-leagues-swiper, .top-teams-swiper{
    margin-left: -15px;
    width: calc(100% + 30px);
    padding: 0 15px;
}
.mySwiper, .mySwiper2, .top-leagues-swiper, .top-teams-swiper {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mySwiper::-webkit-scrollbar, .mySwiper2::-webkit-scrollbar, .top-leagues-swiper::-webkit-scrollbar, .top-teams-swiper::-webkit-scrollbar {
    display: none;
}

.mySwiper.has-fade-right::after, .mySwiper2.has-fade-right::after, .top-leagues-swiper.has-fade-right::after, .top-teams-swiper.has-fade-right::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 100%;
    background: linear-gradient(
            to left,
            var(--sta-background-primary),
            rgba(255, 255, 255, 0)
    );
    pointer-events: none;
    z-index: 2;
}
.mySwiper.has-fade-left::before, .mySwiper2.has-fade-left::before, .top-leagues-swiper.has-fade-left::before, .top-teams-swiper.has-fade-left::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(
            to right,
            var(--sta-background-primary),
            rgba(255, 255, 255, 0)
    );
    pointer-events: none;
    z-index: 2;
}
.mySwiper.no-fade-right::after, .mySwiper2.no-fade-right::after, .top-leagues-swiper.no-fade-right::after, .top-teams-swiper.no-fade-right::after {
    display: none;
}
.mySwiper.no-fade-left::before, .mySwiper2.no-fade-left::before, .top-leagues-swiper.no-fade-left::before, .top-teams-swiper.no-fade-left::before {
    display: none;
}


.pagination{
    display: flex;
    gap: 5px;
    margin: 25px auto;
    justify-content: center;
}
.pagination a, .pagination div{
    padding: 8px 16px;
    border-radius: 10px;
}
.pagination a:not(.active){
    transition: background-color .3s;
}
.pagination a:not(.active):hover{
    background-color: #E4E4E4;
}
.pagination a.active{
    color: white;
    background: var(--sta-gradient-primary);
}

/* BLOG */
.container-fluid.hm__b-wrap{
    padding-right: 5px;
}
.hm__b{
    display: grid;
    grid-template-columns: 1fr minmax(0, 2fr);
}
.hm__b-s-wrap{
    aspect-ratio: 1 / 1;
    position: relative;
    margin: 0 10px;
    border-radius: 10px;
    overflow: hidden;
}
.hm__b-s-cnt{
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 19px;
    background-position: center center
}
.hm__b-s-time{
    width: 100%;
    max-width: 110px;
    border-radius: 10px;
    font-size: 40px;
    text-align: center;
    color: var(--sta-color-danger);
    display: flex;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    background: var(--sta-card-bg);
    padding: 5px 15px 2px;
}
.hm__b-s-time span{
    font-size: 24px;
    text-align: center;
    color: var(--sta-color-text);
}
.hm__b-s-text{
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    z-index: 3;
}
.hm__b-s-shadow{
    position: absolute;
    height: 168px;
    width: 100%;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.8) 100%);
    background-position: bottom;
    z-index: 2;
}
.hm__blog-btns{
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm__blog-btns a{
    margin: 0;
}
@media (max-width: 1024px) {
    .hm__b{
        grid-template-columns: minmax(0, 1fr);
        grid-gap: 20px;
    }
    .hm__blog-btns{
        justify-content: flex-end;
        padding: 0 10px;
    }
}


/* PAGE */
.triple-tiles {
    display: grid;
    grid:
    "a b"
    "c b";
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.triple-div:nth-child(1) {
    grid-area: a;
}
.triple-div-big {
    grid-area: b;
    background: var(--sta-card-bg);
    border-radius: 10px;
    overflow: hidden;
}
.triple-div:nth-child(3) {
    grid-area: c;
}
.triple-div {
    border-radius: 10px;
    background-color: var(--sta-card-bg);
    background-position: bottom right;
    background-repeat: no-repeat;
    padding: 27px 40px;
    /*background-size: contain;*/
    display: flex;
    flex-direction: column;
}
.triple-title {
    font-weight: 600;
    font-size: 32px;
    color: var(--sta-color-text);
    line-height: 43px;
    margin-bottom: 10px;
}
.triple-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
    width: 376px;
    max-width: 100%;
    margin-bottom: 10px;
}
.triple-b-title {
    border-radius: 0 0 10px 0;
    background: var(--sta-color-danger);
    width: 350px;
    min-height: 50px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    padding: 0 16px;
    line-height: 1;
}
.triple-b-ul {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}
.triple-b-li {
    padding: 5px 15px;
    border-bottom: 1px dashed var(--sta-card-border);
    font-weight: 400;
    font-size: 14px;
    color: #000;
    display: grid;
    grid-template-columns: 15px minmax(0,1fr);
    gap: 10px;
}
.triple-btm {
    padding: 25px 15px 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: 600;
    font-size: 24px;
    text-align: right;
    color: var(--sta-color-text);
    gap: 10px;
}
.triple-b-li svg {
    margin-top: 5px;
}
.page-def-text {
    font-size: 14px;
    line-height: 150%;
    color: #000;
}
.page-def-text a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--sta-color-danger);
}
.lvl-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.lvl-block {
    background: var(--sta-card-bg);
    border-radius: 10px;
    overflow: hidden;
    padding: 15px 15px 15px 20px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 25px 15px;
}
.lvl-number {
    border: 2px solid #101010;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 24px;
    line-height: 87%;
    text-align: center;
    color: #000;
}
.lvl-title {
    font-weight: 600;
    font-size: 20px;
    color: var(--sta-color-text);
    margin-bottom: 5px;
}
.lvl-text {
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
}
.lvl-ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    grid-column-start: 2;
    grid-column-end: 3;
}
.lvl-li {
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr) 100px;
    border-bottom: 1px dashed var(--sta-card-border);
    padding-bottom: 5px;
    gap: 12px;
    font-weight: 400;
    font-size: 14px;
    color: #000;
}
.lvl-li-label {
    border-radius: 5px;
    width: 100px;
    height: 21px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: #fff;
    font-family: var(--third-family),'Audiowide';
}
.lvl-li svg:first-child {
    margin-top: 4px;
}
.lvl-li:last-child {
    border: 0;
}
.lvl-li a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--sta-color-danger);
}
.lvl-block.lvl-block-colored .lvl-number,
.lvl-block.lvl-block-colored .lvl-title {
    color: var(--sta-color-danger);
    border-color: var(--sta-color-danger);
}
.lvl-big {
    background: var(--sta-card-bg);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.lvl-big-img {
    font-size: 0;
}
.lvl-big-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
}
.lvl-big-text a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--sta-color-danger);
}
.b_def-ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 10px;
    background: var(--sta-card-bg);
    padding: 15px;
}
.b_def-ul-li {
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px dashed var(--sta-card-border);
    padding-bottom: 5px;
    font-weight: 400;
    font-size: 14px;
    color: #000;
    line-height: 1.4;
}
.b_def-ul-li svg:first-child {
    margin-top: 5px;
}
.b_def-ul-li:last-child {
    padding: 0;
    border: 0;
}
.page-faqs {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.page-faq {
    border-radius: 10px;
    overflow: hidden;
    background: var(--sta-card-bg);
}
.page-faq-title {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: 14px;
    color: var(--sta-color-text);
    padding: 15px;
    cursor: pointer;
}
.page-faq-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
    padding: 0 15px 15px;
}
.page-faq-text a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--sta-color-danger);
}
.page-faq .page-faq-title svg {
    transform: rotate(270deg);
}
.page-faq.active .page-faq-title svg {
    transform: none;
}
.lvl-info-special {
    grid-column-start: 2;
    grid-column-end: 3;
}
.lvl-list-g15 .lvl-block {
    gap: 15px;
}
.lvl-is-ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
}
.lvl-is-li {
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    gap: 12px;
    font-size: 14px;
    color: #000;
    border-bottom: 1px dashed var(--sta-card-border);
    padding-bottom: 5px;
}
.lvl-is-li:last-child {
    border: 0;
}
.lvl-is-li svg:first-child {
    margin-top: 4px;
}
.lvl-is-img:not(:first-child) {
    margin-top: 15px;
}
.lvl-is-img:not(:last-child) {
    margin-bottom: 15px;
}
.lvl-is-img {
    border-radius: 10px;
    overflow: hidden;
}
.lvl-is-img svg {
    max-width: 100%;
    height: auto;
    width: 100%;
}
.b_ndef-ul-li-text {
    font-size: 14px;
    color: #000;
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 5px;
}
.b_ndef-ul-li-text svg:first-child{
    margin-top: 4px;
}
.b_ndef-ul-li {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.b_ndef-ul {
    border-radius: 10px;
    background: var(--sta-card-bg);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.b_ndef-ul-li-img svg {
    max-width: 100%;
    height: auto;
    width: 100%;
}
.page-guids {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.page-guid {
    border-radius: 10px;
    background: var(--sta-card-bg);
    overflow: hidden;
}
.page-guid-img svg {
    width: 100%;
    height: auto;
}
.page-guid-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #000;
    margin-bottom: 20px;
}
.page-guid-img {font-size: 0;line-height: 0;}
.page-guid-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #000;
}
.page-guid-info {
    min-height: 252px;
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.page-guid-btn.block1__btn {
    max-width: 100%;
    margin-top: auto;
}
.b_def-info {
    background: var(--sta-card-bg);
    border-radius: 10px;
    overflow: hidden;
    padding: 15px;
}

.b_def-info-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--sta-color-text);
}

.b_def-info-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
}
.b_def-info .lvl-is-ul {
    padding: 0;
}
.lvl-text a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--sta-color-danger);
}
.block1__btn.lvl-info-btn {
    width: 189px;
    max-width: 100%;
    color: #fff !important;
    height: 40px;
}
.lvl-title:has(.lvl-title-icon) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 5px;
}
.lvl-title-icon {
    margin-top: 3px;
}
.lvl-is-li a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--sta-color-danger);
}
ul.lvl-ugly-ul {
    padding-left: 25px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}
@media (max-width: 992px) {
    .triple-tiles{
        grid:
        "a"
        "b"
        "c";
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
@media(max-width: 768px){
    .lvl-ul{
        grid-column: 1 / -1;
    }
    .lvl-info-special{
        grid-column: 1 / -1;
    }
}

.sidebar {float: left; width: 250px; padding-bottom: 100px;}
.sidebar-block {  overflow: hidden;
    background: var(--sta-card-bg);
    border-radius: 10px;
}
.page-content.padded {margin-left: 265px; margin-right: -15px;}
.mcpt {height: 73px; position: fixed; right: 0; left: 0; top: 0; z-index: 3; display: none;}
.mcpt-close {width: 40px; height: 16px; float: right; margin-top: 28px;}
.mcpt-close svg {max-width: 18px; max-height: 18px;}
.mcpt-text {line-height: 73px; font-size: 18px; padding-left: 15px;}
.sbc-show, .ff-show {display: none; margin-bottom: 15px; text-align: center;}
.sbc-list {margin: 0; list-style: none; padding: 0 10px; overflow-y: auto; max-height: 700px; border-radius: 5px;}
.sbc-list ul {padding-left: 12px; list-style: none;}
.sbc-list li a {transition: 0.2s color; padding: 0 5px;
    border-bottom: 1px dashed #8b8e95;
    display: flex;
    align-items: center;
    min-height: 49px;
    font-size: 15px;
    line-height: 140%;
    color: #000;
}
.sbc-list li:last-child a{
    border-bottom: none;
}
.sbc-list li.selected > a {font-weight: bold;}
.sbc-list li ul li a {font-size: 0.9em;}
.sbc-name {display: inline-block; vertical-align: middle;}
.sbc-count {text-align: right; display: inline-block; vertical-align: middle; width: 15%; font-size: 14px;}
.sbc-border {height: 1px; margin-top: 14px;}
.sbc-list > li:last-child > a .sbc-border {opacity: 0;}

.sys-breadcrumbs {padding-top: 25px; padding-bottom: 10px;
    font-size: 14px;
    line-height: 150%;
    color: var(--sta-color-text);
}
.sys-breadcrumbs a {margin: 0 10px;}
.sys-breadcrumbs a:hover {text-decoration: underline;}
.sys-breadcrumbs span:first-child a {margin-left: 0;}
.sys-breadcrumbs-last {padding-left: 10px;}

@media (max-width: 992px) {
    .sidebar {float: none; width: 100%; padding-bottom: 0;}
    .page-content.padded {margin-left: 0;}
    .ff.mobile-visible, .sbc.mobile-visible {display: block; margin-top: 0; position: fixed; z-index: 12; margin-bottom: 0 !important;}
    .ff, .sbc {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: var(--sta-card-bg); z-index: 10; margin-top: 0; padding: 15px; padding-top: 85px; overflow-y: auto; display: none;}
    .sbc {padding-top: 73px;}
    .sbc-list {padding: 0; max-height: initial; overflow: auto;}
    .mcpt, .sbc-show, .ff-show {display: block;}
    .sbc.mobile-visible .c-nav-form-wrap {padding: 0; padding-top: 10px;}
}

/* PAGE */
@media (max-width: 992px) {
    .page-descriptor{
        grid-template-columns: 1fr;
    }
}

/* TABLE */
@media (max-width: 992px) {
    /*.table{*/
    /*    overflow-x: auto;*/
    /*    padding: 0 15px;*/
    /*}*/
    /*.table__h, .table__row{*/
    /*    grid-template-columns: 21px minmax(0, 1fr) 250px;*/
    /*}*/
    /*.table__events{*/
    /*    grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr);*/
    /*}*/
    /*.table__name{*/
    /*    position: sticky;*/
    /*    left: 0;*/
    /*    background: var(--sta-card-bg);*/
    /*}*/
    /*.table__h, .table__row{*/
    /*    width: 800px;*/
    /*}*/
    /*.table__h, .table__row{*/
    /*    padding: 5px 0;*/
    /*}*/
    .table__events{
        grid-template-columns: 1fr 1fr;
    }
    .table__name{
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .table__events-h .table__name{
        display: none;
    }
    .table__numb + .table__name{
        grid-column-start: 2;
        grid-column-end: 4;
    }
    .table__numb + .table__name +.table__inds{
        grid-column-start: 1;
        grid-column-end: 4;
    }
}


/* DRAWER */
.custombox-popup-container .custombox-popup {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    max-width: 700px;
    width: 100%;
    height: 100%;
    background: #f4f5f6;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
}
.custombox-popup-container .custombox-popup-content{
    display: flex;
    flex-flow: column;
    height: 100%;
}
.custombox-popup-container .custombox-wrapper-header{
    min-height: 60px;
    padding: 10px 15px 10px;
    background: var(--sta-card-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.custombox-popup-container .custombox-wrapper-header h2{
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--sta-color-text);
    margin: 0;
}
.custombox-popup-container .custombox-checkbox{
    border-radius: 5px;
    min-width: 25px;
    height: 25px;
    background: #f4f5f6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.custombox-popup-container .custombox-checkbox input{
    display: none;
}
.custombox-popup-container .custombox-checkbox:has(> input[type="checkbox"]:checked){
    background: #3dc18d;
}
.custombox-popup-container .custombox-wrapper-items{
    margin-top: 15px;
    background: var(--sta-card-bg);
    border-radius: 10px;
    padding: 5px 0;
}
.custombox-popup-container .custombox-item{
    padding: 5px 10px;
    cursor: pointer;
}
.custombox-popup-container .custombox-item:not(:last-child){
    border-bottom: 1px dashed var(--sta-card-border);
}
.custombox-popup-container .custombox-checkbox-wrap{
    display: flex;
    align-items: center;
    overflow: hidden;
    grid-gap: 10px;
    white-space: nowrap;
    cursor: pointer;
}
.custombox-popup-container .custombox-checkbox-wrap img{
    object-fit: contain;
}
.custombox-popup-container .custombox-checkbox-title{
    font-size: 14px;
    color: #000;
    user-select: none;
    letter-spacing: 0.23px;
}
.custombox-popup-container .custombox-checkbox-title span{
    color: var(--sta-color-text-muted);
}
.custombox-popup-container .custombox-checkbox-wrap:has(input[type="checkbox"]:checked) .custombox-checkbox-title{
    font-weight: 600;
    letter-spacing: 0;
}
.custombox-popup-container .custombox-wrapper-actions{
    margin-top: auto;
    background: var(--sta-card-bg);
    padding: 15px;
    display: flex;
    flex-flow: column;
    grid-gap: 15px;
}
.custombox-button{
    width: fit-content;
    border-radius: 10px;
    background: #878787;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    height: 40px;
    display: flex;
    align-items: center;
    grid-gap: 15px;
    padding: 5px 15px;
    cursor: pointer;
}
.filter.custombox .custombox-item-wrap .swiper-wrapper{
    display: flex;
    /*grid-gap: 10px;*/
    /*flex-wrap: nowrap;*/
    /*overflow: hidden;*/
}
.filter.custombox .custombox-item-wrap .swiper-wrapper:not(:empty){
    margin-top: 10px;
}
.filter.custombox .custombox-item-wrap .swiper-wrapper > *{
    border-radius: 10px;
    min-height: 30px;
    display: flex;
    align-items: center;
    background: var(--sta-surface-muted);
    padding-left: 10px;
    font-weight: 400;
    font-size: 12px;
    color: var(--sta-color-text);
    white-space: nowrap;
}
.custombox-remove{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguMTQyODYgNy4xNDI4NkwxNC4wNzE0IDEuMjE0MjlDMTQuMzU3MSAwLjkyODU3MSAxNC4zNTcxIDAuNSAxNC4wNzE0IDAuMjE0Mjg2QzEzLjc4NTcgLTAuMDcxNDI4NiAxMy4zNTcxIC0wLjA3MTQyODYgMTMuMDcxNCAwLjIxNDI4Nkw3LjE0Mjg2IDYuMTQyODZMMS4yMTQyOSAwLjIxNDI4NkMwLjkyODU3MSAtMC4wNzE0Mjg2IDAuNSAtMC4wNzE0Mjg2IDAuMjE0Mjg2IDAuMjE0Mjg2Qy0wLjA3MTQyODYgMC41IC0wLjA3MTQyODYgMC45Mjg1NzEgMC4yMTQyODYgMS4yMTQyOUw2LjE0Mjg2IDcuMTQyODZMMC4yMTQyODYgMTMuMDcxNEMtMC4wNzE0Mjg2IDEzLjM1NzEgLTAuMDcxNDI4NiAxMy43ODU3IDAuMjE0Mjg2IDE0LjA3MTRDMC41IDE0LjM1NzEgMC45Mjg1NzEgMTQuMzU3MSAxLjIxNDI5IDE0LjA3MTRMNy4xNDI4NiA4LjE0Mjg2TDEzLjA3MTQgMTQuMDcxNEMxMy4zNTcxIDE0LjM1NzEgMTMuNzg1NyAxNC4zNTcxIDE0LjA3MTQgMTQuMDcxNEMxNC4zNTcxIDEzLjc4NTcgMTQuMzU3MSAxMy4zNTcxIDE0LjA3MTQgMTMuMDcxNEw4LjE0Mjg2IDcuMTQyODZaIiBmaWxsPSIjMTAxMDEwIi8+Cjwvc3ZnPgo=);
    border-left: 1px dashed #fff;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 37px;
    margin-left: 9px;
    cursor: pointer;
}
.custombox-popup-container .custombox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 999;
}
.custombox {
    background: var(--sta-card-bg);
    border-radius: 0!important;
    padding: 15px;
}
.custombox-popup-container .custombox-popup.active {
    transform: translateX(0);
}
.custombox-item-wrap-item:not(:has(> .custombox-remove)){
    padding-right: 10px;
}
.custombox-popup-container .custombox-overlay.active {
    opacity: 1;
    visibility: visible;
}
.filters__wrap .swiper-wrapper{
    display: flex;
    /*grid-gap: 20px;*/
}

/*.filters__wrap{*/
/*    width: 100%;*/
/*}*/
/*.filters__wrap .swiper-wrapper > * {*/
/*    width: 100%;*/
/*}*/

/*@media (min-width: 1000px) {*/
/*    .filters__wrap .swiper-wrapper > * {*/
/*        width: calc(50% - 5px);*/
/*    }*/
/*}*/
.filters__wrap .swiper-wrapper {
    width: 100%;
}

/*.filters__wrap .swiper-wrapper > * {*/
/*    text-align: center;*/
/*    font-size: 18px;*/
/*    background: #444;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

/*swiper-slide img {*/
/*    display: block;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*}*/


.filters > .swiper > .swiper-wrapper{
    /*grid-gap: 20px;*/
}
.filters > .swiper {
    width: 100%;
}
.filters > .swiper > .swiper-wrapper > .swiper-slide > * {
    display: block;
    width: 100%;
}
.filters > .swiper > .swiper-wrapper > .swiper-slide {
    width: 100%;
    user-select: none;
}

.filters__table-s .filter.custombox .custombox-item-wrap > *{
    border-radius: 10px;
    min-height: 30px;
    display: flex;
    align-items: center;
    background: var(--sta-surface-muted);
    padding-left: 10px;
    font-weight: 400;
    font-size: 12px;
    color: var(--sta-color-text);
    white-space: nowrap;
}
.filters__table-s .filter.custombox .custombox-item-wrap > *:not(:has(> .custombox-remove)){
    padding-right: 10px;
}
.filters__table-s span.custombox-item-wrap {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 10px;
    margin-top: 10px;
}

.filters__table-s .custombox-item-wrap{
    display: flex;
    flex-wrap: wrap;
    grid-gap: 10px;
    margin-top: 10px;
}

/*.filters{*/
/*    border-radius: 10px;*/
/*    overflow: hidden;*/
/*}*/
/*.filters .filter:not(:last-child), .filters .filter:not(:last-child){*/
/*    border-bottom: 1px dashed var(--sta-card-border);*/
/*}*/
@media (max-width: 610px) {
    .filters > .swiper > .swiper-wrapper > .swiper-slide{
        /*width: calc(100% - 15px);*/
        width: 330px;
        min-width: 330px;
    }
}
@media (min-width: 1000px) {
    .filters > .swiper > .swiper-wrapper > .swiper-slide {
        width: 50% ;
    }
    .filters > .swiper > .swiper-wrapper > .swiper-slide {
        margin-right: 0 !important;
    }
    .filters > .swiper > .swiper-wrapper{
        grid-gap: 20px;
    }
}

/* TREND */
.trends{
    display: flex;
    flex-flow: column;
    grid-gap: 10px;
}
.trend{
    border-radius: 10px;
    background: var(--sta-card-bg);
    display: flex;
    flex-flow: column;
    padding-bottom: 10px;
}
.trend__h{
    padding: 18px 15px 0;
    display: flex;
    grid-gap: 15px;
    margin-bottom: 7px;
}
.trend__date{
    font-size: 12px;
    color: var(--sta-color-text);
}
.trend__h-text{
    font-size: 12px;
    color: var(--sta-color-text-secondary);
}
.trend__h > *:empty{
    display: none;
}
.trend__team {
    padding: 0 15px;
    font-weight: 500;
    font-size: 14px;
    color: var(--sta-color-text);
    margin-bottom: 7px;
}
.trend__team ~ .trend__team{
    margin-bottom: 17px;
}
.trend__team:has(~ .trend__team) {
    margin-bottom: 9px;
}
.trend__dash{
    width: 100%;
    border-bottom: 1px dashed var(--sta-card-border);
}
.trend .trend__dash:last-child, .trend__dash + .trend__dash{
    display: none;
}
.trend__title{
    padding: 15px 15px 7px;
    font-weight: 600;
    font-size: 16px;
    color: var(--sta-color-text);
}
.trend__row{
    padding: 5px 15px;
    display: grid;
    align-items: center;
    grid-gap: 10px;
    grid-template-columns: 1fr 167px 188px 86px;
}
.trend__stat{
    display: flex;
    align-items: center;
    grid-gap: 7px;
    font-size: 14px;
    color: #000;
}
.trend__box{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    height: 20px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background: #4e5054;
    min-width: 40px;
    border-radius: 5px;
}
.trend__hint{
    font-size: 14px;
    color: var(--sta-color-text-secondary);
}
.trend__row-val{
    font-weight: 600;
    font-size: 14px;
    color: #000;
}
.trend__empty{
    padding: 5px 15px;
}
.trend__deck{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}
.trend__deck + .trend__deck{
    margin-top: 25px;
}
.trend__deck .league-events {
    margin-top: 10px;
    gap: 16px;
}
.trend__deck .ml{
    padding-bottom: 0;
}
.trend__deck .ml__h {
    padding: 10px 15px 0;
}
.trend__deck .ml__team ~ .ml__team {
    margin-bottom: 10px;
}
.trend__deck .ml__team:has(~ .ml__team) {
    margin-bottom: 6px;
}
@media (max-width: 768px) {
    .trend__row{
        grid-template-columns: 1fr;
        padding: 10px 15px;
    }
}

/* ML */
.ml{
    border-radius: 10px;
    background: var(--sta-card-bg);
    display: flex;
    flex-flow: column;
    padding-bottom: 10px;
}
.ml__h{
    padding: 18px 15px 0;
    display: flex;
    grid-gap: 15px;
    margin-bottom: 7px;
}
.ml__date{
    font-size: 12px;
    color: var(--sta-color-text);
}
.ml__h-text{
    font-size: 12px;
    color: var(--sta-color-text-secondary);
}
.ml__h > *:empty{
    display: none;
}
.ml__team {
    padding: 0 15px;
    font-weight: 500;
    font-size: 14px;
    color: var(--sta-color-text);
    margin-bottom: 7px;
}
.ml__team ~ .ml__team{
    margin-bottom: 17px;
}
.ml__team:has(~ .ml__team) {
    margin-bottom: 9px;
}
.ml__dash{
    width: 100%;
    border-bottom: 1px dashed var(--sta-card-border);
}
.ml__top{
    display: grid;
    grid-template-columns: 1fr 95px;
    grid-gap: 15px;
    padding: 15px;
}
.ml__top-r, .ml__top-l{
    display: flex;
    flex-flow: column;
    grid-gap: 5px;
}
.ml__top-l{
    grid-gap: 8px;
}
.ml__status{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border-radius: 5px;
    background: #4e5054;
    height: 20px;
    font-size: 14px;
    text-align: center;
    color: #fff;
}
.ml__status.ml__status-g{
    color: white;
    background: #3dc18d;
}
.ml__status.ml__status-gray{
    color: var(--sta-color-text);
    background: #f4f5f6;
    font-weight: 400;
}
.ml__hint{
    position: absolute;
    right: 5px;
}
.ml__scores{
    display: grid;
    grid-template-columns: 1fr 14px 1fr;
    align-items: center;
    text-align: center;
}
.ml__score{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border-radius: 5px;
    background: #4e5054;
    height: 20px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: #fff;
}
.ml__top-title{
    font-weight: 600;
    font-size: 14px;
    color: var(--sta-color-text);
    display: flex;
    align-items: center;
    grid-gap: 10px;
}
.ml__top-title svg{
    transform: rotate(-90deg);
    transition: all .3ms;
}
.ml.active .ml__top-title svg{
    transform: rotate(0);
}
.ml__top-text{
    font-size: 14px;
    color: var(--sta-color-text);
}
.ml__top-text span{
    font-weight: 600;
}
.ml__row{
    padding: 6px 15px;
    display: flex;
    grid-gap: 10px;
    font-weight: 400;
    font-size: 14px;
    color: var(--sta-color-text);
}
.ml__row span{
    font-weight: 600;
}
.ml__row:has(+ .ml__row){
    border-bottom: 1px dashed var(--sta-card-border);
}
.ml__row .ml__hint{
    position: relative;
    right: inherit;
}


@media (max-width: 992px) {
    .events-navigation{
        flex-flow: column;
        grid-gap: 10px;
    }
    .events-navigation .live-button{
        width: 100%;
    }
    .events-navigation .all-events-button{
        margin: auto;
        width: 100%;
    }
    .date-controls{
        width: 100%;
    }
    .events-date-picker-container{
        width: 100%;
    }
    .nav-button{
        min-width: 44px;
    }
}

/* THUMBS */
.sys-thumb {width: 25%; padding: 15px; white-space: initial;}
.sys-thumbs-33 .sys-thumb {width: 33.3%;}
.sys-thumbs-50 .sys-thumb {width: 50%;}
.sys-thumbs-100 .sys-thumb {width: 100%;}
.sys-thumbs-grid {display: grid; grid-column-gap: 15px; grid-row-gap: 15px; grid-template-columns: repeat(4, 1fr);}
.sys-thumbs-grid .sys-thumb {width: 100% !important; padding: 0;}
.sys-thumbs-grid.sys-thumbs-33 {grid-template-columns: repeat(3, 1fr);}
.sys-thumbs-grid.sys-thumbs-50 {grid-template-columns: repeat(2, 1fr);}
.sys-thumbs-grid.sys-thumbs-100 {grid-template-columns: repeat(1, 1fr);}
.sys-thumb-i, .sys-thumbs-grid .sys-thumb {border-radius: 5px;overflow: hidden;background: white;border: 1px solid var(--wcms-color-ultralight);transition: 0.2s box-shadow;}
.sys-thumb-i:hover, .sys-thumbs-grid .sys-thumb:hover {box-shadow: 0px 0px 15px var(--wcms-color-shadow);}
.sys-thumbs-grid .sys-thumb-i {border-radius: initial; border: none;}
.sys-thumbs-grid .sys-thumb-i:hover {box-shadow: none;}
.sys-thumb-i-img {width: 100%; height: 200px; background-size: cover !important; background-position: center center !important;}
.sys-thumb-i-img.high {height: 300px;}
.sys-thumb-i-name, .sys-thumb-i-subcaption {line-height: 1.5em; height: 3em; font-size: 1.1em; overflow: hidden; font-weight: bold; margin: 15px; box-sizing: border-box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.sys-thumb-i-name.height-auto, .sys-thumb-i-subcaption.height-auto {height: auto;}
.sys-thumb-i-name.one-line, .sys-thumb-i-subcaption.one-line {height: 1.5em; -webkit-line-clamp: 1;}
.sys-thumb-i-name a, .sys-thumb-i-subcaption a {color: var(--wcms-color-primary);}
.sys-thumb-i-subcaption {font-size: 1em;}
.sys-thumb-i-summary {margin: 15px; line-height: 1.5em; height: 6em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; margin-right: 30px;}
.sys-thumb-i-summary.two-lines {height: 3em; -webkit-line-clamp: 2;}
.sys-thumbs-grid .sys-thumb-i-summary, .sys-thumbs-grid .sys-thumb-i-summary.two-lines {height: auto; -webkit-line-clamp: initial;}
.sys-thumb-i-dt {margin: 0 15px; font-size: 0.9em; color: var(--wcms-color-light); margin-bottom: 15px;}
.sys-thumb-i-count {padding-left: 10px; float: right;}
.sys-thumb-i-timing {margin: 0 15px; font-size: 0.9em; line-height: 1.5em; height: 3em; overflow: hidden; color: var(--wcms-color-light); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.sys-thumb-i-more {padding: 15px; font-weight: bold;}
.sys-thumb-i-more.pt0 {padding-top: 0;}
.sys-thumb-i-data {margin: 0 15px;}
.sys-thumb-i-footer {height: 15px;}
.sys-thumb-i-dt + .sys-thumb-i-more {padding-top: 0;}
.sys-thumb-i-btn .sys-btn {border-radius: 0;}
.sys-thumb-cpt {color: var(--wcms-color-bright); padding: 2px 10px; background: var(--wcms-background-ultralight); border-radius: 4px; width: fit-content; font-size: 0.9rem; position: absolute; left: 15px; top: 15px;}
.sys-thumb-i-sidebar {float: left; width: 94px; padding: 15px;}
.sys-thumb-i.large-sidebar .sys-thumb-i-sidebar {width: 158px;}
.sys-thumb-i-sidebar-img {display: block; margin: 0 auto; max-width: 64px;}
.sys-thumb-i.large-sidebar .sys-thumb-i-sidebar-img {max-width: 128px;}
.sys-thumb-i.large-sidebar svg.sys-thumb-i-sidebar-img {width: 128px; height: 128px;}
.sys-thumb-i-sidebar-img.rounded {border-radius: 50%;}
.sys-thumb-i-content {margin-left: 94px;}
.sys-thumb-i.large-sidebar .sys-thumb-i-content {margin-left: 158px;}
.sys-thumb-i.centered .sys-thumb-i-content {margin-left: 0;}
.sys-thumb-i.centered {text-align: center;}
.sys-thumb-i.vertical .sys-thumb-i-sidebar {float: none; width: 100% !important;}
.sys-thumbs-100 .sys-thumb-i.vertical .sys-thumb-i-content {max-width: 50%; margin: 0 auto;}
@media (max-width: 1050px) {
    .sys-thumb {width: 33.3%;}
    .sys-thumbs-50 .sys-thumb {width: 50%;}
    .sys-thumbs-100 .sys-thumb {width: 100%;}
    .sys-thumbs-grid.sys-thumbs {grid-template-columns: repeat(3, 1fr);}
    .sys-thumbs-grid.sys-thumbs-50 {grid-template-columns: repeat(2, 1fr);}
    .sys-thumbs-grid.sys-thumbs-100 {grid-template-columns: repeat(1, 1fr);}
    .sys-thumbs-100 .sys-thumb-i.vertical .sys-thumb-i-content {max-width: 100%;}
}
@media (max-width: 992px) {
    .sys-thumb-i.large-sidebar .sys-thumb-i-sidebar {width: 94px;}
    .sys-thumb-i.large-sidebar .sys-thumb-i-sidebar-img {max-width: 64px;}
    .sys-thumb-i.large-sidebar svg.sys-thumb-i-sidebar-img {width: 64px; height: 64px;}
    .sys-thumb-i.large-sidebar .sys-thumb-i-content {margin-left: 94px;}
    .sys-thumb-i.vertical.large-sidebar .sys-thumb-i-content {margin-left: 0;}
}
@media (max-width: 768px) {
    .sys-thumb {width: 50%;}
    .sys-thumbs-33 .sys-thumb {width: 50%;}
    .sys-thumbs-50 .sys-thumb {width: 50%;}
    .sys-thumbs-100 .sys-thumb {width: 100%;}
    .sys-thumbs-grid.sys-thumbs {grid-template-columns: repeat(1, 1fr);}
    .sys-thumbs-grid.sys-thumbs-33 {grid-template-columns: repeat(1, 1fr);}
    .sys-thumbs-grid.sys-thumbs-50 {grid-template-columns: repeat(1, 1fr);}
    .sys-thumb-i-sidebar {float: none; width: 100% !important; margin-bottom: 15px;}
    .sys-thumb-i-content, .sys-thumb-i.large-sidebar .sys-thumb-i-content {margin-left: 0;}
    .sys-thumb-i.large-sidebar .sys-thumb-i-sidebar {width: 128px;}
    .sys-thumb-i.large-sidebar .sys-thumb-i-sidebar-img {max-width: 128px;}
    .sys-thumb-i.large-sidebar svg.sys-thumb-i-sidebar-img {width: 128px; height: 128px;}
    .sys-thumb-i.mobile-centered {text-align: center;}
}
@media (max-width: 576px) {
    .sys-thumb {width: 100%;}
    .sys-thumbs-33 .sys-thumb {width: 100%;}
    .sys-thumbs-50 .sys-thumb {width: 100%;}
}

/* LEAGUE TABLE */
.lg{
    width: 100%;
    display: flex;
    flex-flow: column;
    border-radius: 10px;
    overflow: hidden;
}
[data-theme="dark"] .lg{
    /* without its own background this card had nothing to sit on but the
       page's near-black background — reuse the same opaque dark-card tone
       already established for .block1__i/.tools__wrap/.teams__wrap instead
       of introducing a fourth dark surface */
    background: #12151d;
}
.lg__h{
    padding: 6px 9px;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    grid-gap: 15px;
    background: var(--sta-surface-muted);
}
.lg__loc{
    font-weight: 600;
    font-size: 14px;
    color: var(--sta-color-text-muted);
}
.lg__name{
    margin-left: 5px;
    color: var(--sta-color-text);
    text-decoration: underline;
}
.lg__name:hover{
    color: var(--sta-color-text);
}
.lg__lg{
    margin-left: auto;
    font-size: 12px;
    line-height: 125%;
    color: var(--sta-color-text-secondary);
}
.lg__arrow{
    min-width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--sta-card-bg);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease;
    transform: rotate(90deg);
}
.lg.active .lg__arrow{
    transform: rotate(0);
}
.lg__events{
    display: none;
    flex-flow: column;
}
.lg.active .lg__events{
    display: flex;
}
.lg__block{
    /*height: 37px;*/
    /*padding: 6px 10px;*/
    /*display: grid;*/
    /*grid-template-columns: 80px 110px 1fr 250px 20px;*/
    /*align-items: center;*/
    /*grid-gap: 15px;*/
    /*background: var(--sta-card-bg);*/
    background: var(--sta-card-bg);
    width: 100%;
}
/*.lg__block:hover{*/
/*    background-color: rgba(255, 186, 51, 0.1);*/
/*}*/
.lg__block:has(+ .lg__block){
    border-bottom: 1px dashed #8b8e95;
}
.lg__block_h{
    padding: 6px 10px;
    display: grid;
    grid-template-columns: 40px 110px 1fr 250px 20px;
    align-items: center;
    grid-gap: 15px;
    background: var(--sta-card-bg);
}
.lg__block:hover .lg__block_h{
    background-color: rgba(255, 186, 51, 0.1);
}
.lg__datetime{
    font-weight: 600;
    font-size: 14px;
    color: var(--sta-color-text);
    white-space: nowrap;
}
.lg__date{
    font-weight: 400;
    color: var(--sta-color-text-muted);
}
.lg__status{
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    color: var(--sta-color-text);
    border-radius: 5px;
}
.lg__status-live {
    font-weight: 600;
    color: var(--sta-color-danger);
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    text-align: center;
}
.lg__status-live span {
    animation: blink 3s step-end infinite;
}
.lg__cnt{
    display: grid;
    grid-template-columns: 1fr 74px 1fr;
    grid-gap: 10px;
    align-items: center;
}
.lg__team{
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    text-align: right;
    color: var(--sta-color-text);
}
.lg__block:hover .lg__team{
    color: var(--sta-color-danger);
}
.lg__team:has(+ .lg__scores){
    text-align: right;
}
.lg__scores + .lg__team{
    text-align: left;
}
.lg__scores{
    display: grid;
    grid-template-columns: 1fr 14px 1fr;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    color: var(--sta-color-text);
}
.lg__score{
    width: 30px;
    height: 24px;
    min-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    background: #4e5054;
    opacity: 0.1;
    line-height: 1;
}
.lg__scores:has(.lg__score-live) {
    grid-template-columns: auto 8px auto;
}
.lg__score-live {
    width: 20px;
    height: 24px;
    min-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    color: var(--sta-color-danger);
    line-height: 1;
}
.lg__score_g{
    background: #3dc18d;
    opacity: 1;
}
.lg__score_b{
    background: #4e5054;
    opacity: 1;
}
.lg__referee a, .lg__referee a:hover{
    font-weight: 400;
    font-size: 12px;
    line-height: 125%;
    color: var(--sta-color-text-secondary);
}
.lg__toggle{
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: none;
    height: 20px;
    width: 20px;
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.lg__toggle.active{
    transform: rotate(-90deg);
}
.lg__toggle.non-clickable{
    opacity: 0.1;
}
/*.event-summary{
    padding: 10px;
    grid-column-start: 1;
    grid-column-end: 6;
}*/
.lg__block .event-stats-name{
    font-size: 14px;
    text-align: center;
}
.lg__block .event-stats-values{
    grid-gap: 6px;
}
.lg__block .event-stats-localteam, .lg__block .event-stats-visitorteam {
    min-width: 40px;
    height: 20px;
    line-height: 1;
    font-size: 14px;
}
.lg__block .event-stats-progress-bar{
    background: var(--sta-surface-muted);
    gap: 2px;
}
.lg__block .event-stats-progress-bar-wrapper{
    background: var(--sta-surface-muted);
}
.lg__block .event-summary{
    /*background: #f4f5f6;
    border-radius: 10px;*/
    width: calc(100% - 30px);
    margin: 0 auto 20px;
    position: relative;
    margin-top: 44px;
    /*padding: 15px;*/
    grid-column-start: 1;
    grid-column-end: 6;
}
.lg__block .event-summary-tabs{
    position: absolute;
    top: -40px;
    margin: 8px 0 10px 0;
}
.lg__block .event-stats-group{
    background: #f4f5f6;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.lg__block .event-stats-group-name{
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}
@keyframes blink {
    0%, 85% { visibility: visible; }
    85.1%, 100% { visibility: hidden; }
}

@media (max-width: 992px) {
    .lg__datetime{
        grid-area: a;
        display: flex;
        flex-flow: column;
    }
    .lg__status{
        grid-area: b;
        min-width: 110px;
    }
    .lg__status-live{
        grid-area: a;
    }
    .lg__cnt{
        grid-area: c;
        grid-template-columns: minmax(208px, 1fr) 30px;
        grid-gap: 2px 10px;
    }
    .lg__cnt .lg__team:has(+ .lg__scores){
        text-align: left;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .lg__cnt .lg__scores + .lg__team{
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .lg__scores{
        color: white;
        grid-template-columns: 1fr;
        grid-template-rows: 24px 2px 24px;
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 2;
        grid-column-end: 2;
    }
    .lg__scores:has(.lg__score-live){
        grid-template-columns: 1fr;
    }
    .lg__score-live{
        width: 30px;
    }
    .lg__referee{
        grid-area: d;
        text-align: right;
    }
    .lg__toggle{
        grid-area: e;
    }
    .lg__block_h{
        grid-gap: 6px 10px;
        grid:"b d d"
            "a c e";
        grid-template-columns: 38px 1fr 20px;
    }
    .lg__datetime{

    }
    .events-table{
        padding: 0;
    }
    .lg{
        border-radius: 0;
    }
    .lg__team{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lg__h{
        height: auto;
    }
    .lg__lg{
        display: none;
    }
    .lg__arrow{
        margin-bottom: auto;
        margin-left: auto;
    }
    .lg__block .event-summary-tabs{
        display: flex;
        flex-wrap: wrap;
    }
    .lg__block .event-summary-tab{
        padding: 0 10px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        line-height: 1;
        width: fit-content;
    }
    .lg__block .event-summary-avg-flag{
        flex-basis: 100%;
    }
    .lg__block .event-summary-tabs{
        top: -67px;
    }
    .lg__block .event-summary{
        margin-top: 65px;
        padding: 0;
    }
    .lg__block:hover .lg__block_h {
        background-color: var(--sta-card-bg);
    }
    .lg__block .event-stats-values .event-stats-name{
        display: none;
    }
    .event-stats-localteam-avg[style*="visibility: hidden"], .event-stats-visitorteam-avg[style*="visibility: hidden"]{
        font-size: 0;
    }
}

/* DATATABLES */
table.dataTable{
    width: 100%;
}
table.dataTable td:first-child, table.dataTable th:first-child {
    padding-left: 13px;
}
table.dataTable td:last-child, th:last-child {
    padding-right: 13px;
}

table.dataTable td:not(:first-child) {
    font-weight: 600;
}
table.dataTable th {
    border: none;
    cursor: pointer;
}
table.dataTable td, table.dataTable th {
    border-bottom: 1px dashed var(--sta-card-border);
    padding: 5px 0;
}
table.dataTable tr:last-child td{
    border-bottom: none;
}


.trends__sort-control {
    align-self: flex-end;
    font-size: 14px;
}
.trends__sort-control select {
    border-radius: 10px;
    border: none;
    background: var(--sta-card-bg);
    font-weight: 400;
    color: var(--sta-color-text);
    padding: 5px;
}