/*   Base settings
------- ------- ------- ------- ------- ------- ------- -------*/
/*   :: import ---   */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

@font-face {
    font-family: "ALS Arc VFR Semibold";
    font-style: normal;
    font-weight: auto;
    src: url("../fonts/ALS-Arc-VFR-Semibold.woff") format("woff");
}

/*   :: VARS ---   */

/* Отключение принудительной темной темы для Samsung Browser */
@media (prefers-color-scheme: dark) {
    html {
        color-scheme: light;
    }
}


:root {
    /*fonts*/
    /*--wf: 'Open Sans', sans-serif;*/
    --wf: 'Inter', sans-serif;
    --wf2: 'Inter', sans-serif;
    --wf3: 'ALS Arc VFR Semibold', sans-serif;
    --color-text-heading: #001226;
    --color-text: #21204d;
    --color-text-accent: #eb534e;
    --color-text-note: #cccccc;
    --color-text-grey: #737373;

    /* Fonts sizes */
    --size-text: 1rem;
    --size-text-note: 0.8125rem;
    --size-heading-xl: 3rem;
    --size-heading-l: 2.5rem;
    --size-heading-m: 2rem;
    --size-heading-s: 1.5rem;
    --size-heading-xs: 1.125rem;

    /*project colors*/
    --color-dark: #18214D;
    --color-primary: #064E9F;
    --color-secondary: #064E9F;
    --color-neutral: #D5E2E9;
    --color-neutral-dark: #cadbe3;
    --color-placeholder: #EFF2F6;
    --color-black: #192a3e;
    --color-white: #ffffff;
    --color-link: #064E9F;
    --color-link-hover: #334d6e;
    --color-link-active: #334d6e;
    --color-accent: #1961af;
    --color-accent-dark: rgb(25, 68, 64);
    --color-accent-dark-10: rgba(25, 68, 64, 0.10);
    --color-accent-dark-5: rgba(25, 68, 64, 0.05);
    --color-grey-dark: #323c47;
    --color-grey: #90a0b7;
    --color-grey-light: #c2cfe0;

    /*Theme-shades*/
    --color-primary-dark: #03438d;
    --color-primary-transp: rgba(6, 78, 159, 0.16);

    /*bg colors*/
    --color-bg: #ffffff;
    --color-bg-header: #ffffff;
    --color-bg-header-dark: #001226;
    --color-bg-darkblue: #98cae5;
    --color-bg-blue: #D5E2E9;
    --color-bg-light-blue: #E5F2FC;
    --color-bg-light-blue-2: #f6fbff;
    --color-bg-yellow: #FFE3AF;
    --color-bg-grey: #f7f7f7;
    --color--bg-accent: #deeba5;


    /*guidelines colors*/
    --volley-yellow: rgb(242, 184, 68);
    --volley-light-yellow: rgb(253, 224, 124);
    --volley-dark-yellow: rgb(237, 167, 26);
    --volley-dark-blue: rgb(32, 30, 62);
    --volley-dark-blue2: #010B29;
    --volley-red: rgb(229, 47, 37);
    --volley-grey-blue: rgb(213, 226, 233);
    --volley-classic-blue: rgb(22, 65, 148);
    --volley-classic-red: rgb(237, 28, 36);

    /* SP5 DEV*/
    --color-sp5-dev-bg: #05e745;
    --color-sp5-dev-text: #222e4e;

    /*ui colors*/
    --color-yellow: #fdfdfd;
    --color-yellow-light: #FFE070;
    --color-orange: #ff8914;
    --color-red: #E3352F;
    --color-blue: #194490;
    --color-blue-dark: #211F3D;
    --color-blue-dark-2: #191B2A;
    --color-green: #2ed47a;
    --color-purple: #885af8;

    /* UI Colors */
    --ui-bg-50: #fafafa;
    --ui-bg-100: #F5F5F5;
    --ui-bg-200: #EBEBEB;
    --ui-bg-300: #E1E1E1;
    --ui-blue-bg-100: #F2F5F8;
    --ui-blue-bg-200: #EBF0F4;
    --ui-elem-bg: #edede7;
    --ui-input-bg: #fff;
    --ui-input-bg--active: #dee7ff;
    --ui-color-primary: #0043ed;
    /*--ui-color-focus is for box-shadow*/
    --ui-shadow-focus: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 2px #b5c9fc;
    --ui-shadow-error: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 2px #fcb5b5;

    --ui-color-checked: var(--ui-color-primary);
    --ui-color-neutral: #EFF2F6;
    --ui-color-text: var(--color-dark);
    --ui-color-text-grey: #737373;
    --ui-color-text-light-grey: #9b9b9b;
    --ui-trans: 0.16s ease;

    /* UI Sizes */
    --ui-size: 36px;
    --ui-size-s: 24px;
    --ui-size-l: 44px;
    --ui-raduis: 8px;

    /* UI Borders */
    --ui-input-border: 1px solid #b5bfd9;
    --ui-input-border-active: 1px solid #0043ed;


    /*interface*/
    --color-border: #98cae5;
    --color-border-hover: var(--color-accent);
    --color-input-bg: #ededed;
    --color-input-disabled-bg: #E1E6F9;
    --color-input-border: #d6d6d6;
    --color-input-text: #707683;
    --color-label-text: #206D9B;
    --color-input-placeholder-text: #a5bbcb;
    --color-table-black: #323c47;
    --color-table-grey: #707683;
    --color-dark-blue: #334d6e;
    --color-icon-grey: #666666;
    --color-icon--active: var(--color-accent);
    --thover: rgba(0, 0, 0, 0.1);
    /*transparent hover*/
    --trans: all 0.2s;
    /*transition delay*/
    --bs: 0 0 8px rgba(0, 0, 0, 0.12);

    /* Box-Shadows */
    --sp-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sp-shadow-s: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --sp-shadow-m: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sp-shadow-l: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --sp-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);


    --sp-shadow-m2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sp-shadow-l2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /*buttons*/
    /*--color-btn-bg: #3867F4;*/
    --color-btn-bg: var(--color-primary);
    --color-btn-border: var(--color-primary);
    --color-btn-text: #ffffff;
    --color-btn-ghost-text: #868686;
    --color-btn-shadow: rgba(37, 193, 252, 0.4);

    /*objects*/
    --gf: 8px;
    /* grid flow */
    --gap: 16px;
    /* grid gap */
    --header-height: 80px;
    --wid: 1440px;
    /* max-width of content */
    --col-wid: 348px;
    /* right column width */
    --slide-height: 400px;
    /* height of single slide */
    --main-header-bg: var(--color-primary);
    --main-header-height: 64px;
    --content-width: 800px;
    /* max-width of text content */


    /* Sparta */
    --sparta-blue: rgb(0, 57, 166);
    --sparta-red: rgb(213, 43, 30);
    --sparta-dark-blue: rgb(36, 45, 90);
    --sparta-light-blue: rgb(46, 124, 191);
    --sparta-green: rgb(167, 230, 0);

    /*themes*/
    /*classic volley*/
    --cv--header-bg: var(--volley-red);
    --cv--header-link: #ffffff;
    --cv--header-link-hover: #ffffff;
    --cv--header-link-active: #ffffff;
    --cv--header-tab-bg: #BEDDFF;
    --cv--header-tab-bg-hover: #a0c3e9;

    /*beach volley*/
    --bv--header-bg: rgb(237, 167, 26);
    /*--bv--header-bg: rgb(244,125,9);*/
    --bv--header-subline-bg: rgb(225, 151, 8);
    /*--bv--header-subline-bg: rgb(232, 107, 13);*/
    --bv--header-link: #333333;
    --bv--header-link-hover: #333333;
    --bv--header-link-active: #333333;
    --bv--header-tab-bg: #FFE3AF;
    --bv--header-tab-bg-hover: #FFE3AF;

    /*snow volley*/
    --sv-blue: rgb(22, 65, 148);
    --sv-light-blue: rgb(79, 185, 233);
    --sv-light-blue2: rgb(61, 163, 210);
    --sv-dark-blue: rgb(32, 30, 62);
    --sv--header-bg: var(--sv-light-blue2);
    --sv--header-subline-bg: var(--sv-light-blue);
    --sv--header-link: var(--sv-dark-blue);
    --sv--header-link-hover: var(--sv-dark-blue);
    --sv--header-link-active: var(--sv-dark-blue);
    --sv--header-tab-bg: #AFEDFF;
    --sv--header-tab-bg-hover: #AFEDFF;

    /*junior volley*/
    --jv-blue: rgb(22, 65, 148);
    --jv-light-blue: #43a047;
    --jv-light-blue2: rgb(61, 163, 210);
    --jv-dark-blue: #1de9b6;
    --jv--header-bg: var(--jv-light-blue);
    --jv--header-subline-bg: #277e29;
    --jv--header-link: var(--jv-dark-blue);
    --jv--header-link-hover: var(--jv-dark-blue);
    --jv--header-link-active: var(--jv-dark-blue);
    --jv--header-tab-bg: #64ffda;
    --jv--header-tab-bg-hover: #1de9b6;

    /*Stats*/
    --ts-table-border: 1px solid #d6d6d6;

    /*VIP*/
    --vip-gradient: linear-gradient(45deg, #4FB9E9, #4FB9E9, #ED2324, #FFAA00, #FFAA00);
}


.body--cv {
    --color-primary: var(--volley-classic-red);
    --color-primary-dark: #c62828;
    --color-btn-bg: var(--volley-classic-red);
    --color-btn-border: var(--volley-classic-red);

}


/*  TECH
------- ------- ------- ------- ------- ------- ------- -------*/
* {
    box-sizing: border-box;
}

*,
::after,
::before {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    color: var(--color-text);
    font-family: var(--wf), Helvetica, Arial, sans-serif;
    font-size: 100%;
    background: var(--color-bg);
    margin: 0;
    padding: 0;
}

/*   (2) SP5 Tokens ------- ------- ------- ------- ------- */

.wid {
    width: 100%;
    max-width: var(--wid);
    min-width: 748px;
    margin: 0 auto;
}

.wa {
    width: auto;
}

.fw {
    width: 100%;
}


.wf {
    font-family: var(--wf), Helvetica, Arial, sans-serif;
}

.wf2 {
    font-family: var(--wf2), Helvetica, Arial, sans-serif;
}

.cimg,
.tac {
    text-align: center;
}

.tal {
    text-align: left;
}

.tar {
    text-align: right;
}


.fb {
    font-weight: bold;
}

.fi {
    font-style: italic;
}

.fsn {
    font-size: var(--size-text-note);
}


.ca {
    color: var(--color-accent);
}

.cp {
    color: var(--color-primary);
}

.cg {
    color: var(--color-text-grey);
}

.clg {
    color: var(--ui-color-text-light-grey);
}

.nwp {
    white-space: nowrap;
}

.hide-on-mobile,
.hom {
    display: block;
}

.show-on-mobile,
.som {
    display: none;
}

.dn {
    display: none;
}

.flex-wrap {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
    flex-wrap: wrap;
}

.clicked-item {
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.clicked-item:hover {
    transition: all 0.2s;
    text-decoration: underline;
}


.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    :ROOT {
        --wid: 100%;
    }

    .wid {
        max-width: 100%;
        min-width: 100%;
    }

    .hide-on-mobile,
    .hom {
        display: none;
    }

    .show-on-mobile,
    .som {
        display: block;
    }
}


/* /Tokens */

/* Custom scrolls*/
* {
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
    scrollbar-width: thin;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: none;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}


/* PADS */
.pad-1 {
    width: 100%;
    height: 1px;
}

.pad-4 {
    width: 100%;
    height: 4px;
}

.pad-1x {
    width: 100%;
    height: var(--gf);
}

.pad-2x {
    width: 100%;
    height: calc(var(--gf) * 2);
}

.pad-3x {
    width: 100%;
    height: calc(var(--gf) * 3);
}

.pad-4x {
    width: 100%;
    height: calc(var(--gf) * 4);
}

.pad-5x {
    width: 100%;
    height: calc(var(--gf) * 5);
}

.pad-6x {
    width: 100%;
    height: calc(var(--gf) * 6);
}

.pad-8x {
    width: 100%;
    height: calc(var(--gf) * 8);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: all 0.3s;
}

a:hover {
    color: var(--color-link-hover);
    transition: all 0.3s;
}

/*

a:link {
    color: var(--color-link);
}


a:visited {
    color: var(--color-link);
}

a:active {
    color: var(--color-link);
}
*/

.glb-games-counter {
    /*position: fixed;*/
    right: 0;
    bottom: 64px;
    padding: var(--gf);
    /* background-color: #ffffff;
     border-radius: var(--gf);
     border: 1px solid var(--color-primary);
     z-index: 1000;*/
    font-size: 0.6rem;
}

/* SP5 LAYOUT */
.body {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.body--ui {
    background: var(--ui-bg-100);
}

.body--cv,
.body--bv,
.body--sv {
    --main-header-height: calc(64px + 24px);
}

.body--jv {
    --main-header-height: 64px;
}

/* MAIN HEADER */
.main-header-wrapper {
    background: var(--main-header-bg);
    color: var(--color-white);
    position: fixed;
    width: 100%;
    z-index: 8999;
}

.body--cv {
    --main-header-bg: var(--cv--header-bg);
}

.body--bv {
    --main-header-bg: var(--bv--header-bg);
}

.body--sv {
    --main-header-bg: var(--sv--header-bg);
}

.body--jv {
    --main-header-bg: var(--jv--header-bg);
}

.main-header {
    padding: 0 var(--gap);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.main-header__left {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: left;
    gap: 20px;
}

.main-header__right {
    padding-left: 2px;
    /*width: var(--col-wid);*/
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--gap);
}

/* ---- Main submenu */
.main-header-menu {
    background: rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--trans);
    cursor: pointer;
    flex-shrink: 0;

}

.main-header-menu:hover {
    background: rgba(255, 255, 255, 0.2);
}

.line1,
.line2,
.line3 {
    width: 24px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 5px;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.main-header-menu--active .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.main-header-menu--active .line2 {
    opacity: 0;
}

.main-header-menu--active .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

.main-submenu {
    display: none;
}

.main-submenu--active {
    display: block;
    background: var(--main-header-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-height: calc(100vh - var(--main-header-height));
    overflow-y: scroll;

    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    scrollbar-width: thin;
}

.body--cv .main-submenu--active {
    background: var(--cv--header-bg);
}

.body--bv .main-submenu--active {
    background: var(--bv--header-bg);
}

.body--sv .main-submenu--active {
    background: var(--sv--header-bg);
}

.body--jv .main-submenu--active {
    background: var(--jv--header-bg);
}

.main-submenu--active::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.main-submenu--active::-webkit-scrollbar-track {
    background: transparent;
}

.main-submenu--active::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: none;
}

.main-submenu--active::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}


.submenu-body {
    padding: 32px var(--gap) 24px 80px;
    display: flex;
    align-items: start;
    justify-content: left;
    gap: 24px;
}

.submenu-col {
    color: var(--color-white);
    width: 240px;
}

.submenu-col--game-types {
    min-width: 320px;
}

.submenu-col-item {
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 24px;
}

.submenu-col-item__title {
    font-family: var(--wf2);
    font-size: var(--size-heading-xs);
    text-transform: uppercase;
}

.submenu-col-item__single-title {
    display: inline-block;
    font-family: var(--wf2);
    font-size: var(--size-heading-xs);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.submenu-col ul {
    list-style: none;
    padding: 0;
    margin: var(--gf) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.submenu-col a {
    color: rgba(255, 255, 255, 0.82);
}

.submenu-col a:hover {
    color: rgba(255, 255, 255, 1);
}

.submenu-summary::-webkit-details-marker {
    display: none;
}

.submenu-summary {
    font-family: var(--wf2);
    font-size: var(--size-heading-xs);
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--gf);
    color: rgba(255, 255, 255, 0.82);
}

.submenu-summary__img {
    width: 24px;
    height: 24px;
    translate: var(--trans);
    flex-shrink: 0;
}

.submenu-summary__icon {
    stroke: rgba(255, 255, 255, 0.82);
    width: 24px;
    height: 24px;
    translate: var(--trans);
    flex-shrink: 0;
    fill: none;
}

.submenu-summary:hover {
    color: var(--color-white);
}

.submenu-summary:hover .submenu-summary__icon {
    stroke: var(--color-white);
}

.submenu-details[open] .submenu-summary__icon {
    transform: rotate(90deg);
}

.submenu-details__body {
    margin-top: var(--gf);
    padding: var(--gap);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--gf);
    border: 1px solid transparent;
}

.submenu-details__body--cv {
    background-image: radial-gradient(ellipse at bottom right, rgba(219, 52, 47, 0.2), transparent);
}

.submenu-details__body--bv {
    background-image: radial-gradient(ellipse at bottom right, rgba(206, 183, 101, 0.2), transparent);
}

.submenu-details__body--sv {
    background-image: radial-gradient(ellipse at bottom right, rgba(100, 171, 186, 0.2), transparent);
}


.submenu-details__body ul {
    margin: 0;
}

.submenu-details__body li {
    padding: 2px 0;
}

.submenu-details__body li>a {
    line-height: 1;
}

.submenu-details-body__item {
    line-height: 1;
    padding: var(--gf) 0;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 4px;
    transition: var(--trans);
}

.submenu-details-body__item svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);
    transition: var(--trans);
}

.submenu-details-body__item--xs {
    font-size: var(--size-heading-xs);
}

.submenu-details-body__item:hover svg {
    stroke: rgba(255, 255, 255, 1);

}

.submenu-translations {
    margin-top: var(--gf);
    background: rgba(0, 0, 0, 0.2);
    padding: var(--gap);
    border-radius: var(--gf);
}

.submenu-translations__title {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    text-transform: uppercase;
    padding: 0 0 var(--gap) 0;
}

.submenu-translations__item {
    padding: 0 0 var(--gap) 0;
    display: flex;
    align-items: center;
    gap: var(--gf);
    line-height: 1;
}

.submenu-translations__item:last-child {
    padding: 0;
}

.submenu-translations__item svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.6);
    transition: var(--trans);
}

.submenu-translations__item:hover svg {
    stroke: rgba(255, 255, 255, 1);
}

.premium-banner {
    display: flex;
    justify-content: space-between;
    gap: var(--gap);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 24px 12px;
    align-items: center;
    position: relative;
}

.premium-banner::before {
    content: '';
    background: url('../img/premium-features-bg.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    transition: var(--trans);
}

.premium-banner:hover::before {
    filter: saturate(3);
    transition: var(--trans);
}

.premium-banner:hover svg {
    transform: translateX(2px);
    transition: var(--trans);
}

.premium-banner img {
    filter: brightness(1500%);
}

.premium-banner svg {
    stroke: white;
    pointer-events: none;
    transition: var(--trans);
}

/* ---- /Main submenu */

/* Main Header Subsections */

.main-header-subline--cv {
    display: none;
}

.main-header-subline--bv {
    display: none;
}

.main-header-subline--sv {
    display: none;
}

.body--cv .main-header-subline--cv {
    background: rgb(213, 33, 23);
    display: flex;
}

.body--bv .main-header-subline--bv {
    background: var(--bv--header-subline-bg);
    display: flex;
}

.body--sv .main-header-subline--sv {
    background: var(--sv--header-subline-bg);
    display: flex;
}

.body--jv .main-header-subline--jv {
    background: var(--jv--header-subline-bg);
    display: flex;
}

.header-subline-nav {
    width: var(--wid);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: var(--gap);
    padding: 4px var(--gap);
    padding-left: 267px;
    height: 26px;
}

a.subline-nav__item {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 4px;
    color: rgba(255, 255, 255, 0.8);
    transition: var(--trans);
}

a.subline-nav__item:hover {
    color: rgba(255, 255, 255, 1);
}

.subline-nav__item svg {
    width: 16px;
    height: 16px;
    stroke: rgba(255, 255, 255, 0.8);
    fill: none;
    transition: var(--trans);
}

.subline-nav__item:hover svg {
    stroke: rgba(255, 255, 255, 1);
    fill: none;
}

.subline-nav__item:not(:last-child) {
    margin-right: var(--gap);
}

.subline-close-btn {
    border: none;
    background: rgba(0, 0, 0, 0.2);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--trans);
    cursor: pointer;
}

.subline-close-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);
}

.subline-close-btn:hover {
    background: rgba(0, 0, 0, 0.4);
}

.subline-close-btn:hover svg {
    stroke: rgba(255, 255, 255, 1);
}

/* /Main Header Subsections */


.main-header__logo {
    padding-top: 4px;
    flex-shrink: 0;
}

.main-header__nav {
    margin-left: 24px;
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-evenly;
    gap: 24px;
}

.main-header-nav__item {
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition: var(--trans);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 4px;
    font-size: 1rem;
    text-transform: uppercase;
}

.main-header-nav__item:hover {
    color: rgba(255, 255, 255, 1);
}

.main-header-nav-item__img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.8;
    transition: var(--trans);
}

.main-header-nav__item:hover img {
    opacity: 1;
}

.main-header__search {
    /*display: none;*/
}

.demo .main-header__search {
    outline: 1px solid red;
}

.header-search {
    position: relative;
}

.header-search__input {
    border: none;
    background: rgba(255, 255, 255, 0.2);
    height: 32px;
    border-radius: 16px;
    padding: 4px 12px 4px 32px;
}

.header-search__icon {
    position: absolute;
    top: 6px;
    left: 10px;
    fill: none;
    stroke: rgba(255, 255, 255, 1);
    width: 18px;
    height: 18px;
}

.main-header__login {}

.main-header-login__link {
    padding: 4px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.main-header-login__link svg {
    width: 24px;
    height: 24px;
    stroke: rgba(255, 255, 255, 0.8);
    fill: none;
}

.main-header-login__link:hover {
    background: rgba(255, 255, 255, 0.2);
}

.main-header-login__link:hover svg {
    stroke: rgba(255, 255, 255, 1);
}

.main-header__login--auth .main-header-login__link {
    position: relative;
    background: var(--main-header-bg);
}

.main-header__login--auth .main-header-login__link::before {
    content: '';
    background: rgba(255, 255, 255, 0.24);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: -2px;
    border-radius: 50%;
}


.main-header__login--vip .main-header-login__link {
    position: relative;
    background: var(--main-header-bg);
}

.main-header__login--vip .main-header-login__link::before {
    content: '';
    background: var(--vip-gradient);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: -2px;
    border-radius: 50%;
}

/*.main-header__login--vip .main-header-login__link::after {
    content: '';
    position: absolute;
    top: 0;
    right: -4px;
    background: url('../img/premium-logo.svg') center / 66% no-repeat,
    var(--vip-gradient);
    height: 13px;
    width: 13px;
    color: var(--color-text);
    font-size: 9px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}*/

/* /MAIN HEADER */

/* GLOBAL LINE */
.glb-line-wrapper {
    width: 100%;
    height: 48px;
    overflow: hidden;
    margin-top: var(--main-header-height);
    background: url("../img/line/y100-line-bg.svg") #246DB5 left repeat-x;
    background-size: cover;
}

.glb-line {
    margin: 0 auto;
    width: var(--wid);
    padding: 0 var(--gap);
}

.glb-line__content {
    background: #1F1A4D;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gf) 24px;
    width: fit-content;
}

.glb-line-content__logo {
    background: url("../img/line/y100-full-logo.svg") no-repeat;
    background-size: contain;
    height: 25px;
    width: 144px;
}

/* /GLOBAL LINE */

/* GLOBAL LINE BANNER */
.glb-line-banner-wrapper {
    width: 100%;
    height: 48px;
    overflow: hidden;
    margin-top: var(--main-header-height);
}

.glb-line-banner {
    max-width: var(--wid);
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.glb-line-banner__img {
    height: 48px;
    display: flex;
    object-fit: cover;
    padding: 0 var(--gap);

}

@media screen and (max-width: 768px) {
    .glb-line-banner-wrapper {
        height: 120px;

    }

    .glb-line-banner__img {
        height: 120px;
        padding: 0;
    }
}

/* /GLOBAL LINE BANNER */

/* GLOBAL INLINE BANNER */
.glb-inline-banner-wrapper {
    width: 100%;
    overflow: hidden;
}

.glb-inline-banner {
    max-width: var(--wid);
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.glb-inline-banner__img {
    display: flex;
    object-fit: cover;
    border-radius: var(--gf);
}

/* /GLOBAL INLINE BANNER */

/* header */
.header-wrapper {
    background: var(--color-bg-header);
    margin-bottom: 8px;
    padding: var(--gap) var(--gap) 0 var(--gap);
}

.header {
    display: grid;
    grid-template-columns: 2fr 12fr;
    align-items: center;
    gap: var(--gap);
    padding: 0 8px;
}

.header__logo {
    height: var(--header-height);
    padding: 8px 8px 8px 0;
}

.header__right-mob {
    display: none;

}

.top-pan {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: var(--gap);
}

.top-pan__left {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.top-pan__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--gap) * 2);
}

.top-pan__auth {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gap);
    padding: 0 16px;
}

.top-pan__auth a {
    color: var(--color-text-grey);
}

.top-pan__auth a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.mob-auth {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--gap) 0 0 0;
    margin: 4px 0 0 0;
    text-align: center;
}

.mob-auth a {
    color: var(--color-white);
    text-transform: uppercase;
}

.mob-auth svg {
    stroke: var(--color-white);
}

.header-login-line {
    padding-top: var(--gf);
    font-size: var(--size-text-note);
}

.nav-tab {
    display: flex;
    align-items: center;
    height: 32px;
    color: var(--color-text);
}

.nav-tab__item {
    padding: 8px 16px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-right: 8px;
    cursor: pointer;
    font-family: var(--wf3);
}

.nav-tab__item a {
    color: var(--color-text);
}

.theme-cv .nav-tab__item--active {
    background: var(--cv--header-tab-bg);
}

.theme-cv .nav-tab__item:hover {
    background: var(--cv--header-tab-bg-hover);
}

.theme-bv .nav-tab__item--active {
    background: var(--bv--header-tab-bg);
}

.theme-bv .nav-tab__item:hover {
    background: var(--bv--header-tab-bg-hover);
}

.theme-sv .nav-tab__item--active {
    background: var(--sv--header-tab-bg);
}

.theme-sv .nav-tab__item:hover {
    background: var(--sv--header-tab-bg-hover);
}


.theme-jv .nav-tab__item--active {
    background: var(--jv--header-tab-bg);
}

.theme-jv .nav-tab__item:hover {
    background: var(--jv--header-tab-bg-hover);
}

.nav-pan {
    display: flex;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.nav {
    width: 100%;
    height: 40px;
}

.nav-home {
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.nav-home svg {
    stroke: var(--color-white);
    fill: none;
    width: 20px;
    height: 20px;
}

.nav-home:hover svg {
    stroke: rgba(255, 255, 255, 0.6);
}

.theme-cv .nav-pan {
    background: var(--cv--header-bg);
}

.theme-bv .nav-pan {
    background: var(--bv--header-bg);
}

.theme-sv .nav-pan {
    background: var(--sv--header-bg);
}

.theme-jv .nav-pan {
    background: var(--jv--header-bg);
}

a.tickets-nav {
    background: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    color: var(--color-white);
    font-family: var(--wf2);
    text-transform: capitalize;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0 var(--gap);
}

a.tickets-nav:hover {
    transition: var(--trans);
    background: #cb161f;
}

a.tickets-nav--mob {
    border-radius: 8px;
    display: inline-flex;
    padding: 4px var(--gap);
}

.lang-pan {
    display: flex;
    align-items: center;
    gap: var(--gf);
    margin-right: var(--gap);
}

.mob-lang-pan {
    display: flex;
    align-items: center;
    gap: var(--gf);
    margin-right: var(--gap);
}

.lang-pan__item {
    text-decoration: none;
    font-weight: bold;
    padding: 2px 4px;
    transition: var(--trans);
    text-transform: uppercase;
}

.mob-lang-pan .lang-pan__item {
    color: var(--color-white);
}

.lang-pan__item--active {
    text-decoration: underline;
}

/* /header */

/* MAIN NAV */

.mobnav__text {
    margin: 0 8px 0 0;
    text-transform: uppercase;
}

.nav {
    box-sizing: border-box;
}

.nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gf);
    height: 100%;
}


.nav a {
    color: var(--color-white);
    font-family: var(--wf3);
    font-weight: bold;
    font-size: 1.2rem;
    transition: var(--trans);
    text-transform: uppercase;
}

.nav a:hover {
    color: #ffecd8;
    transition: var(--trans);
}

.mobnav {
    display: none;
    /*display: flex;*/
    align-items: center;
    padding: 8px 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
}


.menu-icon-wrapper {
    width: 18px;
    display: block;
}

.menu-icon {
    display: block;
    width: 18px;
    height: 2px;
    transition: all 0.2s;
    background: var(--color-text);

}

.menu-icon__top {
    transition: all 0.2s;
}

.menu-icon__middle {
    transition: all 0.2s;
    margin: 3px 0;
}

.menu-icon__bottom {
    transition: all 0.2s;
}

.mobnav--active .menu-icon__bottom {
    transform: translate(0, -1px) rotate(45deg);
    transition: all 0.2s;
}

.mobnav--active .menu-icon__middle {
    background: rgba(255, 255, 255, 0);
    height: 0;
    margin: 0;
    transition: all 0.2s;
}

.mobnav--active .menu-icon__top {
    transform: translate(0, 1px) rotate(-45deg);
    transition: all 0.2s;
}

.nav--mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
}

.mob-menu-btn-pan {
    display: flex;
    gap: var(--gf);
    align-items: center;
}

.mob-menu-btn-pan__text {
    color: var(--color-text);
    text-transform: uppercase;
}

.mob-menu {
    display: none;
}

.mob-menu--active {
    display: block;
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--bv--header-bg);
}

.snow .mob-menu--active {
    background: var(--sv--header-bg);
}

.junior .mob-menu--active {
    background: var(--jv--header-bg);
}

.mob-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gf) var(--gap);
}

@media screen and (max-width: 767px) {
    .mobnav {
        display: flex;
    }

    .nav ul {
        flex-direction: column;
    }

    .nav {
        height: auto;
    }

    .main-nav--active ul {
        display: block;
    }

    .main-nav--active li {
        float: none;
        margin: 4px 0 8px 28px;
    }

    .nav--mobile li {
        margin: 4px 0;
    }
}


.page {
    padding: 0 var(--gap);
    margin-top: var(--gf);
}

.page--glb {
    padding: 0 var(--gf);
    margin-top: var(--gap);
}

.page-aside--glb {
    padding: var(--gf) var(--gap);

    display: grid;
    grid-template-columns: 240px auto;
    gap: var(--gap);
}

.glb-aside {
    background: var(--ui-bg-100);
    padding: var(--gap) var(--gf);
    border-radius: var(--gf);
}

.glb-aside-nav {
    margin-bottom: 24px;
}

.glb-aside-nav__title {
    font-family: var(--wf3);
    color: var(--color-text-heading);
    font-size: var(--size-heading-s);
    padding: var(--gf);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    transition: var(--trans);
    cursor: pointer;
    list-style: none;
}

.glb-aside-nav__title::-webkit-details-marker {
    display: none;
}


.glb-aside-nav__title svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-text-heading);
    transition: var(--trans);
}


.glb-aside-nav[open] .glb-aside-nav__title svg {
    transform: rotate(90deg);
}

.glb-aside-nav__ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.glb-aside-nav__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gf);
    transition: var(--trans);
    line-height: 1;
    padding: var(--gf);
    border-radius: var(--gf);
    margin-bottom: 2px;
    background: transparent;
}

.glb-aside-nav__summary:hover {
    background: var(--color-white);
}

.glb-aside-nav__summary svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: rgba(0, 0, 0, 0.32);
    transition: var(--trans);
}

.glb-aside-nav__summary:hover svg {
    stroke: rgba(0, 0, 0, 0.6);
}

.glb-aside-nav__details[open] {
    margin-bottom: var(--gf);
}

.glb-aside-nav__details[open] .glb-aside-nav__summary svg {
    transform: rotate(90deg);
}

.glb-aside-nav__summary::-webkit-details-marker {
    display: none;
}

.glb-aside-nav a {
    border-radius: var(--gf);
    margin-bottom: 2px;
    background: transparent;
    display: flex;
}

.glb-aside-nav a:hover {
    background: var(--color-white);
}

.page-news {
    display: grid;
    grid-template-columns: 9fr 3fr;
    gap: var(--gap);
}

.glb-aside-nav-link {
    color: var(--color-text);
    padding: var(--gf);
}

.glb-aside-nav__li .glb-aside-nav-link {
    color: var(--color-link);
    margin-left: var(--gf);
    font-size: var(--size-text-note);
    line-height: 1;
}

.aside-news {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.main {
    padding: 0 var(--gap);
}

/* Main-Content TYPO */
.main-content {
    line-height: 1.4;
}

.text-content {
    max-width: var(--content-width);
}

.main-content table {
    margin: var(--gf) 0 var(--gap) 0;
    border-spacing: 0;
    font-size: 0.8rem;
    border-collapse: collapse;
    border: 1px solid var(--color-primary);
}

.main-content table th {
    padding: 4px;
    border-bottom: 1px solid var(--color-primary);
    border-right: 1px solid var(--color-primary);
}

.main-content table th:last-child {
    border-right: none;
}

.main-content table td {
    padding: 4px;
    border-bottom: 1px solid var(--color-primary);
    border-right: 1px solid var(--color-primary);
}

.main-content table td:last-child {
    border-right: none;
}

.main-content table tr:last-child td {
    border-bottom: none;
}

.main-content time {
    font-size: 0.8rem;
    color: var(--color-text-grey);
}

.main-content details {
    margin-bottom: 32px;
    border: 1px solid var(--ui-bg-300);
    transition: var(--trans);
    border-radius: var(--gf);
}

.main-content summary {
    list-style: none;
    cursor: pointer;
    padding: var(--gf) 0;
    background: var(--ui-bg-100);
    border-radius: var(--gf);
}

.main-content summary:hover {
    background: var(--ui-bg-200);
}

.main-content summary h3 {
    padding: 0 var(--gf);
}

.main-content details[open] summary {
    border-bottom: 1px solid var(--ui-bg-300);
    border-radius: var(--gf) var(--gf) 0 0;
}

.main-content summary::-webkit-details-marker {
    list-style: none;
}

.main-content details>div {
    padding: var(--gf);
}

.font-b {
    font-weight: bold;
}

.regulation-file-item {
    margin: var(--gf) 0;
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
}

/* /Main-Content TYPO */


/*Files in main content*/
.content-files-list {
    list-style: none;
    padding: var(--gap);
}

.content-files-list li {
    padding: 0;
    list-style: none;
}

.content-files {
    padding: var(--gap);
    display: flex;
    align-items: flex-start;
    justify-content: start;
    gap: var(--gf);
    flex-direction: column;
    transition: var(--trans);
    background: var(--ui-bg-100);
    border-radius: var(--gf);
    margin: var(--gap) 0;
}

.content-files__item {
    display: flex;
    align-items: center;
    gap: var(--gf);
    padding: 12px 0;
    line-height: 1;
    width: fit-content;

}

.content-files__item svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: var(--color-text-grey);
    flex-shrink: 0;
}

li+.content-files__item {
    list-style: none;
}

/*/Files in main content*/
.docs-page-item {
    display: flex;
    align-items: center;
    gap: var(--gf);
    padding: var(--gf) 0;
}

/* Content Info Box */
.content-info-box {
    max-width: 400px;
    margin: var(--gap) 0;
    display: flex;
    gap: var(--gap);
}

.content-info-box__img {
    text-align: center;
    margin: auto;
    flex-shrink: 0;
}

.content-info-box__img img {
    width: 100%;
    max-width: 320px;
}

.content-info-box__body {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    min-width: 220px;
    padding: var(--gap);
}

.content-info-box__title {
    font-family: var(--wf3);
    font-size: 1.2rem;
}

.content-info-box__list-item {
    display: block;
    font-family: var(--wf3);
    text-transform: uppercase;
}

/* /Content Info Box */

/*footer*/
.footer-wrapper {
    margin-top: 40px;
    background: var(--volley-grey-blue);
}

.footer {
    color: var(--color-white);
    font-size: 0.8em;
    line-height: 1.4;
    margin: var(--gap) auto;

    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--gap);
}

.footer__logo {
    width: 88px;
    height: 32px;
    margin: 0 var(--gf);
}

.footer__desc {
    padding: 8px 0 8px 16px;
    color: var(--color-text-grey);
    line-height: 1;
    font-size: 0.72rem;
}

.footer__center {
    color: var(--color-text-grey);
    display: flex;
    align-items: start;
    gap: var(--gap);
}

.footer-center__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}


.footer-nav {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    align-items: start;
}

.footer-nav a {
    color: var(--color-text-grey);
    transition: var(--trans);
}

.footer-nav a:hover {
    color: var(--color-text);
}

.footer__right {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    padding: 8px;
}

.footer-social {
    display: flex;
    gap: 32px;
}

.footer-social__item {
    display: flex;
    align-items: center;
    gap: var(--gf);
    padding-bottom: var(--gf);
    transition: var(--trans);
}

.footer-social__item svg {
    width: 16px;
    height: 16px;
    fill: var(--color-link);
}

.footer-social__item:hover {
    color: var(--color-text);
}

.footer-social__item:hover svg {
    fill: var(--color-text);
}

@media screen and (max-width: 767px) {
    .footer-social {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
    }

}

/* /footer */


/* SP5 GRID */
.grid-wr {
    display: grid;
    grid-template-columns: 1fr minmax(320px, var(--wid)) 1fr;
}

.grid-a {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-gap: calc(var(--gf) * 2);
}

.grid-line {
    grid-column: 1/-1;
}

.grid-a240 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-gap: calc(var(--gf) * 2);
}

.grid-a4 {
    width: fit-content;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: calc(var(--gf) * 2);
}

.grid-results {
    display: grid;
    grid-template-columns: auto 48px 320px 1fr;
    grid-gap: calc(var(--gf) * 2);
}

@media screen and (max-width: 767px) {
    .grid-results {
        grid-template-columns: auto 1fr;
        row-gap: 4px;
    }

    .grid-results>div:first-child {
        font-size: var(--size-text-note);
    }

    .grid-results>div:nth-child(2) {
        font-size: var(--size-text-note);
    }

    .grid-results>div:last-child {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .grid-results>div:nth-last-child(2) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
}

[class*='grid-c-'] {
    display: grid;
    grid-gap: calc(var(--gf) * 2);
}

.grid-c-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-c-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-c-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-c-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-7 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-8 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}


.grid-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 767px) {
    [class*='grid-c-'] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}


/* TYPOGRAPHIC
------- ------- ------- ------- ------- ------- ------- -------*/
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--wf2);
    margin: 0;
    padding: 16px 0 8px 0;
    line-height: 1;
}

.main__h1 {
    font-size: 2em;
    font-family: var(--wf3);
    text-transform: uppercase;
}

.main__h2 {
    font-size: 2em;
    padding: 40px 0 16px 0;
    font-family: var(--wf3);
    text-transform: uppercase;
}

.main__h3 {
    font-size: 1.4em;
    font-family: var(--wf3);
}

.main__p {
    line-height: 120%;
}

/* BUTTONS
------- ------- ------- ------- ------- ------- ------- -------*/
.btn,
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
    padding: 0 18px;
    border-radius: var(--gf);
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--color-btn-text);
    background: var(--color-btn-bg);
    transition: var(--trans);
    font-size: var(--size-text);
    line-height: 1;
    font-family: inherit;

    height: var(--ui-size);
}

.btn:hover {
    transition: var(--trans);
    background: var(--color-primary-dark);
    color: var(--color-btn-text);
}

/* btn icon */
.btn svg {
    fill: none;
    stroke: currentColor;
    width: 16px;
    height: 16px;
    /*margin-right: var(--gf);*/
}

.btn img {
    width: 16px;
    height: 16px;
    /*margin-right: var(--gf);*/
}

/* btn states */
.btn:focus {
    outline: 1px solid var(--ui-shadow-focus);
}

.btn:disabled {
    color: var(--color-text-grey);
    background: var(--color-neutral);
    cursor: auto;
    box-shadow: none;
}


/* btn sizes --- */
.btn--s,
a.btn--s,
.btn.ui-s,
a.btn.ui-s {
    height: var(--ui-size-s);
    padding: 0 16px;
    font-size: 0.8rem;
}

.ui-s svg,
.btn--s svg {
    width: 16px;
    height: 16px;
}

.btn--l,
a.btn--l,
.btn.ui-l,
a.btn.ui-l {
    height: var(--ui-size-l);
    padding: 0 32px;
}

.btn--l svg,
.btn.ui-l svg {
    width: 16px;
    height: 16px;
}

/* btn outline */
.btn--outline,
a.btn--outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-text);
}

.btn--outline svg {
    stroke: var(--color-text);
}

.btn--outline:hover {
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    border-color: transparent;
}

.btn--outline:hover svg {
    stroke: var(--color-btn-text);
}

/* /btn outline */

/* btn ghost */
.btn--ghost,
a.btn--ghost {
    background: transparent;
    color: var(--color-btn-ghost-text);
    border: 1px solid transparent;
}

.btn--ghost svg {
    stroke: var(--color-btn-ghost-text);
}

.btn--ghost:hover {
    background: var(--thover);
    color: var(--color-icon-grey);
    border-color: transparent;
}

.btn--ghost:hover svg {
    stroke: currentColor;
}

/* /btn ghost */

/* btn ui */
.btn--ui,
a.btn--ui {
    border: none;
    background: none;
    color: var(--color-text);

    /*new v*/
    padding: 0;
    width: var(--ui-size);
    height: var(--ui-size);
    font-size: var(--size-text-note);

}

.btn--s.btn--ui,
.ui-s.btn--ui,
a.ui-s.btn--ui {
    padding: 0;
    width: var(--ui-size-s);
    height: var(--ui-size-s);
}

.btn--l.btn--ui,
.ui-l.btn--ui,
a.ui-l.btn--ui {
    padding: 0;
    width: var(--ui-size-l);
    height: var(--ui-size-l);
}

.btn--ui svg {
    stroke: var(--color-icon-grey);
    margin: 0;
}

.btn--ui:hover {
    background: var(--thover);
    color: var(--color-icon-grey);
}

/* /btn ui*/

/* btn micro */
.btn--micro,
a.btn--micro {
    padding: 0;
    font-size: var(--size-text-note);
    background: transparent;
    border: none;
    color: var(--color-icon-grey);
    height: auto;
}

.btn--micro svg {
    width: calc(var(--gf) * 2);
    height: calc(var(--gf) * 2);
    stroke: var(--color-icon-grey);
}

.btn--micro:hover {
    color: var(--color-text);
    background: none;
}

.btn--micro:hover svg {
    stroke: var(--color-text);
}

/* /btn micro */

.btn--anim svg {
    transition: var(--trans);
}

.btn--anim:hover svg {
    transform: translateX(4px);
}


.btn--shadow {
    box-shadow: 0 4px 8px 1px var(--color-btn-shadow);
}

.btn--shadow:hover {
    box-shadow: 0 8px 16px 2px var(--color-btn-shadow);
}

a.btn--yellow,
.btn--yellow {
    background: var(--volley-yellow);
    color: var(--volley-dark-blue);
    transition: var(--trans);
}

a.btn--yellow:hover,
.btn--yellow:hover {
    background: var(--volley-dark-yellow);
    color: var(--volley-dark-blue);
    opacity: 1;
}

.body--sv .btn--yellow {
    background: var(--sv-blue);
    color: var(--color-white);
    transition: var(--trans);
}

.body--sv a.btn--yellow {
    background: var(--sv-blue);
    color: var(--color-white);
}

/* btn mobile */

/* btn pan */
.btn-pan {
    display: flex;
    padding: calc(var(--gf) * 2) 0;
    margin: var(--gf) 0;
    gap: var(--gap);
}

.btn-pan--thin {
    padding: 0;
    margin: 0;
}

.btn-pan--center {
    justify-content: center;
}

.btn-pan--right {
    justify-content: flex-end;
}

.btn-pan--col {
    flex-flow: column;
}

.btn-pan--col .btn {
    gap: var(--gap);
}

.btn-pan--col .btn:last-child {
    margin: 0;
}

/* /btn pan */

a.btn-header-tickets {
    background: var(--volley-red);
    color: var(--color-white);
    padding: 4px 8px;
}

a.btn-header-tickets svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-white);
}

a.btn--back {
    background: none;
    color: var(--color-text);
    /*padding: var(--gf) calc(var(--gf) * 2);*/
    padding: 0;
}

a.btn--back svg {
    stroke: var(--color-text);
}

a.btn--back:hover {
    /*background: var(--color-bg-grey);*/
    background: transparent;
    color: var(--color-text);
    text-decoration: underline;
}

/* /BUTTONS */

/* SPACE FORMS
------- ------- ------- ------- ------- ------- ------- -------*/
input {
    accent-color: var(--color-primary);
}

.sf {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.sf__footer {
    margin-top: var(--gf);
}


.sf__form {}

.sf__fieldset {
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    border-radius: calc(var(--ui-raduis) * 2);
}

.sf__fieldset:not(:last-child) {
    margin-bottom: calc(var(--gap) * 1.5);
}

.sf__legend {
    font-size: var(--size-heading-xs);
    color: var(--color-primary);
    padding: var(--gf);
}

.sf__line {
    margin: 8px 0;
}

.sf .sf__line {
    margin: 0;
}

.sf__line:last-child {
    margin: 0;
}

.sf__label {
    display: flex;
    align-items: center;
    gap: var(--gf);
    color: var(--color-label-text);
    font-size: var(--size-text);
    margin-top: 16px;
}

.sf__label--description {
    font-size: 0.8rem;
    color: var(--color-text-grey);
}

.sf__label--col {
    flex-direction: column;
    align-items: flex-start;
}

.sf__label+.sf__input {
    margin-top: calc(var(--gf) / 2);
}

.sf__label+.sf__select {
    margin-top: calc(var(--gf) / 2);
}

.sf__label+.sf__textarea {
    margin-top: calc(var(--gf) / 2);
}

.sf__label:has(input:disabled) {
    color: var(--ui-color-text-light-grey);
}

.sf__input,
.sf__textarea,
.sf__select {
    border: var(--ui-input-border);
    background: var(--ui-input-bg);
    color: var(--color-text);
    font-size: var(--size-text);
    border-radius: var(--ui-raduis);
    height: var(--ui-size);
    /*width: 200px;*/
}

.sf__input.fw,
.sf__textarea.fw,
.sf__select.fw {
    width: 100%;
    max-width: 100%;
}

.sf__input--a,
.sf__textarea--a,
.sf__select--a {
    width: auto;
    max-width: 200px;
}


.sf__input--photo {
    height: 300px;
    width: 200px;
}

.sf__input--password {
    display: flex;
    align-items: center;
    border: var(--ui-input-border);
    background: var(--ui-input-bg);
    color: var(--color-text);
    font-size: var(--size-text);
    border-radius: var(--gf);
}

.sf__input--password .sf__input {
    border: 0 solid transparent;
    background: rgba(255, 255, 255, 0.0);
    color: var(--color-text);
    font-size: var(--size-text);
    border-radius: var(--gf) 0 0 var(--gf);
    max-width: 200px;
}

.sf__input--password .btn--show-password {
    width: 40px;
    height: 40px;
    text-indent: -999px;
    overflow: hidden;

    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    /*background: transparent url(../img/sp5sprite.svg#eye);*/
    cursor: pointer;
    opacity: 0.7;
}

.sf__upload {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--gf);
    border-radius: var(--gf);
    border: 1px dashed var(--color-input-border);
    background: var(--ui-bg-50);
    padding: var(--gf);
    transition: var(--ui-trans);
    max-width: 280px;
    position: relative;
}

.sf__upload:hover {
    border: 1px dashed var(--color-primary);
    box-shadow: var(--sp-shadow-inset);
}

.sf__upload .btn {
    position: absolute;
    top: 8px;
    right: 8px;
}

.dragover {
    box-shadow: var(--ui-shadow-focus);
}

.sf__upload-preview {
    background: url("../img/download.svg") no-repeat center center;
    width: 80px;
    height: 80px;
    background-size: 90%;
    margin: auto;
}

.sf__upload-preview img {
    object-fit: cover;
    border-radius: var(--gf);
}

.sf__upload-progress {
    margin: var(--gf) auto;
    accent-color: var(--color-primary);
    height: calc(var(--ui-size) / 1.4);
}

.sf__upload-text {
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
    padding: var(--gf) var(--gap);
    text-align: center;
}

.sf__upload-text a {
    text-decoration: underline;
}

.btn--show-password,
.btn--hide-password {
    fill: none;
    stroke: var(--color-icon-grey);
    background: transparent;
}


.sf__input--password .btn--hide-password {
    width: 40px;
    height: 40px;
    text-indent: -999px;
    overflow: hidden;

    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    /*background: transparent url(../img/sp5sprite.svg#eye-off);*/
    cursor: pointer;
    opacity: 0.7;
}

.sf__input-wrapper {
    display: flex;
    border: var(--ui-input-border);
    border-radius: 8px;
    height: var(--ui-size);
    position: relative;
    justify-content: space-between;
    align-items: center;
}

.sf__input-wrapper .sf__input {
    border: none;
}

.sf__input-with-btn {
    /*background: transparent;*/
    border: 0;
    padding: 0 16px;
    font-size: var(--size-text);
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.sf__input-with-btn::placeholder {
    color: var(--color-input-placeholder-text);
}

.show-pass-btn {
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    z-index: 100;
    position: absolute;
    right: 12px;
    top: 4px;
    cursor: pointer;
}


.sf__input {
    padding: 0 12px;
    height: var(--ui-size);
}

.sf__select {
    padding: 0 12px;
    height: var(--ui-size);
}

.sf__input:focus {
    box-shadow: var(--ui-shadow-focus);
}

.sf__textarea:focus {
    box-shadow: var(--ui-shadow-focus);
}

.sf__select:focus {
    box-shadow: var(--ui-shadow-focus);
}

.sf__select option {
    padding: 8px;
}

.sf__input::placeholder {
    color: var(--color-input-placeholder-text);
    font-family: inherit;
}

.sf__textarea {
    padding: 8px;
    width: 100%;
}

.sf__textarea::placeholder {
    color: var(--color-input-placeholder-text);
    font-family: inherit;
}

.sf__input--m,
.sf__select--m {
    width: 168px;
}

.sf__textarea--m {
    width: 75%;
}

.sf__input--s,
.sf__select--s {
    width: 92px;
}

.sf__textarea--s {
    width: 50%;
}

.sf__input--a,
.sf__select--a {
    width: fit-content;
}

.sf__input.ui-s,
.sf__select.ui-s {
    height: var(--ui-size-s);
}

.sf__input.ui-l,
.sf__select.ui-l {
    height: var(--ui-size-l);
}

/*.sf__select, .sf__input {
    max-width: 240px;
}*/

.sf__input.fw,
.sf__textarea.fw,
.sf__select.fw {
    width: 100%;
    max-width: 100%;
}

.sf__input--a,
.sf__textarea--a,
.sf__select--a {
    width: auto;
    max-width: 200px;
}

.sf-input-wrapper {
    display: flex;
    gap: var(--gf);
    align-items: center;
}

.sf__error-message {
    font-size: var(--size-text-note);
    line-height: 1;
}

.sf__input--error,
.sf__textarea--error,
.sf__select--error {
    box-shadow: var(--ui-shadow-error);
}

.sf-error {
    color: var(--color-red);
    font-size: var(--size-text-note);
    line-height: 1;
    padding: 4px 0;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {

    input[type=checkbox],
    input[type=radio] {
        --active-inner: #fff;
        --focus: var(--color-accent);
        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--color-input-border));
        background: var(--b, var(--color-white));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

    input[type=checkbox]:after,
    input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform 0.3s var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }

    input[type=checkbox]:checked,
    input[type=radio]:checked {
        --b: var(--color-primary);
        --bc: var(--color-primary);
        --d-o: .3s;
        /* delay opacity */
        --d-t: .6s;
        /* delay transform */
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
        /* delay ease */
    }

    input[type=checkbox]:disabled,
    input[type=radio]:disabled {
        --b: var(--color-input-disabled-bg);
        cursor: not-allowed;
        opacity: 0.9;
    }

    input[type=checkbox]:disabled:checked,
    input[type=radio]:disabled:checked {
        --b: var(--color-input-disabled-bg);
        --bc: var(--color-input-border);
    }

    input[type=checkbox]:disabled+label,
    input[type=radio]:disabled+label {
        cursor: not-allowed;
    }

    input[type=checkbox]:hover:not(:checked):not(:disabled),
    input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--color-border-hover);
    }

    input[type=checkbox]:focus,
    input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus);
    }

    input[type=checkbox]:not(.sp-switch),
    input[type=radio]:not(.sp-switch) {
        width: 21px;
    }

    input[type=checkbox]:not(.sp-switch):after,
    input[type=radio]:not(.sp-switch):after {
        opacity: var(--o, 0);
    }

    input[type=checkbox]:not(.sp-switch):checked,
    input[type=radio]:not(.sp-switch):checked {
        --o: 1;
    }

    input[type=checkbox]+label,
    input[type=radio]+label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }

    input[type=checkbox]:not(.sp-switch) {
        border-radius: 7px;
    }

    input[type=checkbox]:not(.sp-switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }

    input[type=checkbox]:not(.sp-switch):checked {
        --r: 43deg;
    }

    input[type=checkbox].sp-switch {
        width: 38px;
        border-radius: 11px;
    }

    input[type=checkbox].sp-switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--color-input-border));
        transform: translateX(var(--x, 0));
    }

    input[type=checkbox].sp-switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }

    input[type=checkbox].sp-switch:disabled:not(:checked):after {
        opacity: 0.6;
    }

    input[type=radio] {
        border-radius: 50%;
    }

    input[type=radio]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }

    input[type=radio]:checked {
        --s: .5;
    }
}


/* radio-group */
.sp-radio-group {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    row-gap: 4px;
}

.sp-radio-group__item {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.sp-radio-group input[type=radio] {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.sp-radio-group-item__text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);

    cursor: pointer;
    background-color: var(--color-white);
    padding: var(--gf) var(--gap);
    position: relative;
    margin-left: -1px;
    border: var(--ui-input-border);
    letter-spacing: .05em;
    color: var(--ui-color-text);
    text-align: center;
    transition: background-color .3s ease;
}

.sp-radio-group-item__text svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--ui-color-text);
}

.sp-radio-group input[type="radio"]:checked+.sp-radio-group-item__text {
    border: var(--ui-input-border-active);
    background-color: var(--ui-input-bg--active);
    z-index: 1;
    color: var(--ui-color-primary);
}

.sp-radio-group input[type="radio"]:checked+.sp-radio-group-item__text svg {
    stroke: var(--ui-color-primary);
}

.sp-radio-group__item:first-child .sp-radio-group-item__text {
    border-radius: var(--gf) 0 0 var(--gf);
}

.sp-radio-group__item:last-child .sp-radio-group-item__text {
    border-radius: 0 var(--gf) var(--gf) 0;

}

/* Disabled */
.sp-radio-group input[type=radio]:disabled+.sp-radio-group-item__text {
    background: var(--ui-color-neutral);
    color: var(--ui-color-text-grey);
}

.sp-tab-section {
    padding: var(--gap) 0;
    display: none;
}

.sp-tab-section--active {
    display: block;
}

/* /radio-group */

/* SP Radio Toggle */
.sp-radio-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    border-radius: calc(var(--ui-size) / 2);
    background: var(--ui-bg-100);
    font-size: var(--size-text-note);
    transition: var(--trans);
    color: var(--ui-color-text);
    width: fit-content;
    height: var(--ui-size);
}

.sp-radio-toggle .sp-radio-toggle__label {
    flex: 1 1 auto;
    text-align: center;
}

.sp-radio-toggle .sp-radio-toggle__label input {
    /*display: none;*/
    opacity: 0;
    position: absolute;
    width: 0;
}

.sp-radio-toggle .sp-radio-toggle__label .sp-radio-toggle__text {
    height: calc(var(--ui-size) - 8px);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    border-radius: var(--gap);
    padding: 0 var(--gf);
    transition: all .15s ease-in-out;
    color: var(--ui-color-text-light-grey);
    cursor: pointer;
}

.sp-radio-toggle .sp-radio-toggle__label .sp-radio-toggle__text:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ui-color-text-grey);
}

.sp-radio-toggle .sp-radio-toggle__label input:checked+.sp-radio-toggle__text {
    background: var(--color-white);
    color: var(--ui-color-text);
}

.sp-radio-toggle .sp-radio-toggle__label input:checked+.sp-radio-toggle__text:hover {
    background: var(--color-white);
    color: var(--ui-color-text);
}

/* /SP Radio Toggle */


/* SP Radio Box    */
.sp-radio-box-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gf);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.sp-radio-box__input:checked+.sp-radio-box-card {
    border-color: var(--ui-shadow-focus);
    color: var(--ui-color-primary);
}

.sp-radio-box__input:checked+.sp-radio-box-card:before {
    transform: scale(1);
    opacity: 1;
    background-color: var(--ui-color-checked);
    border-color: var(--ui-color-checked);
}


.sp-radio-box__input:checked+.sp-radio-box-card .sp-radio-box__text {
    color: var(--ui-color-checked);
}

.sp-radio-box__input:focus+.sp-radio-box-card {
    border-color: var(--ui-color-primary);
    box-shadow: var(--ui-shadow-focus);
}

.sp-radio-box__input:focus+.sp-radio-box-card:before {
    transform: scale(1);
    opacity: 1;
}

.sp-radio-box-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 80px;
    height: 80px;
    padding: 4px;
    border-radius: var(--gf);
    border: var(--ui-input-border);
    background-color: var(--color-white);
    transition: var(--ui-trans);
    cursor: pointer;
    position: relative;
}

.sp-radio-box-card:before {
    content: "";
    position: absolute;
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    border: var(--ui-input-border);
    background-color: #fff;
    border-radius: 50%;
    top: 0.25rem;
    left: 0.25rem;
    opacity: 0;
    transform: scale(0);
    transition: var(--ui-trans);
}

.sp-radio-box-card:hover {
    border-color: #2260ff;
}

.sp-radio-box-card:hover:before {
    transform: scale(1);
    opacity: 1;
}

.sp-radio-box-card__example {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.sp-radio-box-card__example img {
    width: 40px;
    height: 40px;
}

.sp-radio-box__text {
    color: var(--ui-color-text-grey);
    transition: 0.375s ease;
    text-align: center;
    font-size: 12px;
    line-height: 1;
}

input[type="radio"].sp-radio-box__input {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    outline: 1px solid red;
}

/* /SP Radio Box    */

/* SP Chips */
.sp-chips-pan {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gf);
}

.sp-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: 4px 4px 4px var(--gap);
    border-radius: var(--gap);
    background: rgba(0, 0, 0, 0.05);
    font-size: var(--size-text-note);
    transition: var(--trans);
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
}

.sp-chip:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.8);
}

.sp-chip svg {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    width: 20px;
    height: 20px;
    padding: 2px;
    fill: none;
    stroke: rgba(0, 0, 0, 0.42);
    flex-shrink: 0;
}

.sp-chip:hover svg {
    stroke: rgba(0, 0, 0, 0.6);
}

.sp-chip--disabled {
    outline: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    color: rgba(0, 0, 0, 0.3);
}

.sp-chip--disabled:hover {
    background: transparent;
    cursor: auto;
    color: rgba(0, 0, 0, 0.3);
}

.sp-chip--disabled svg {
    opacity: 0.2;
}

.sp-chip--disabled:hover svg {
    opacity: 0.2;
}

/* /SP Chips */


/* SP Toggle */
.sp-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    border-radius: calc(var(--ui-size) / 2);
    background: var(--ui-bg-100);
    font-size: var(--size-text-note);
    transition: var(--trans);
    cursor: pointer;
    color: var(--ui-color-text);
    width: fit-content;
    height: var(--ui-size);
}

.sp-toggle__item {
    height: calc(var(--ui-size) - 8px);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    border-radius: var(--gap);
    padding: 0 var(--gf);
    transition: var(--trans);
    color: var(--ui-color-text-light-grey);
}

.sp-toggle__item:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ui-color-text-grey);
}

.sp-toggle__item--active,
.sp-toggle__item--active:hover {
    background: var(--color-white);
    color: var(--ui-color-text);
}

/* /SP Toggle */

/* SP forms */
.alert,
.reg-form,
.auth-form {
    background: var(--color-accent-dark-5);
    border-radius: 16px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: 375px;
    text-align: center;
    margin: 48px auto;
}

.auth-form {
    margin: 0;
}

.alert__title,
.reg-form__title,
.auth-form__title {
    font-size: 28px;
    padding-top: 0;
    padding-bottom: 8px;
    color: black;
}

.alert__subtitle,
.reg-form__subtitle,
.auth-form__subtitle {
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
}

.reg-form-subtitle__link,
.auth-form-subtitle__link {
    color: var(--color-link);
    text-decoration: underline;
}

.reg-form-subtitle__link:hover,
.auth-form-subtitle__link:hover {
    color: var(--color-link-hover);
    transition: var(--trans);
}

/* /SP forms*/

.btn--menu {
    background: transparent;
    padding: var(--gf);
}

.btn--menu:hover {
    background: rgba(0, 0, 0, 0.1);
}

.btn--menu svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-text);
}

.btn--menu__text {
    color: var(--color-text);
    text-transform: uppercase;
}

/* /Space Forms*/


/* SP5 icons system
------- ------- ------- ------- ------- ------- ------- -------*/

/* v2*/

[class*='spis-'] {
    stroke: var(--color-icon-grey);
    fill: none;
    flex-shrink: 0;
}

[class*='spis-']:hover {
    stroke: var(--color-icon--active);
}

.spis {
    stroke: var(--color-icon-grey);
    fill: none;
}

.spis-12 {
    width: 12px;
    height: 12px;
}

.spis-16 {
    width: 16px;
    height: 16px;
}

.spis-24 {
    width: 24px;
    height: 24px;
}

.spis-32 {
    width: 32px;
    height: 32px;
}

[class*='spif-'] {
    fill: var(--color-icon-grey);
    stroke: none;
    flex-shrink: 0;
}

[class*='spif-']:hover {
    fill: var(--color-icon--active);
}

.spif {
    fill: var(--color-icon-grey);
    stroke: none;
}


.spif-16 {
    width: 16px;
    height: 16px;
}

.spif-24 {
    width: 24px;
    height: 24px;
}

.spif-32 {
    width: 32px;
    height: 32px;
}

.itext {
    display: inline-flex;
    align-items: center;
    gap: var(--gf);
}


[class*='itext-'] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[class*='itext-'] img {
    flex-shrink: 0;
}

[class*='itext-'] svg {
    flex-shrink: 0;
}

/* Only img & svg */
[class*='itext-'].oimg img {
    margin: 0;
}

[class*='itext-'].oimg svg {
    margin: 0;
}

/* 16 */
.itext-16 img {
    width: 16px;
    flex-shrink: 0;
}

.itext-16 svg {
    width: 16px;
    height: 16px;
}

/* 24 */
.itext-24 img {
    width: 24px;
}

.itext-24 svg {
    width: 24px;
    height: 24px;
}

/* 32 */
.itext-32 img {
    width: 32px;
}

.itext-32 svg {
    width: 32px;
    height: 32px;
}

/* 40 */
.itext-40 img {
    width: 40px;
}

.itext-40 svg {
    width: 40px;
    height: 40px;
}

/* 48 */
.itext-48 img {
    width: 48px;
}

.itext-48 svg {
    width: 48px;
    height: 48px;
}

/* itext pan */
.itext-pan {
    display: flex;
    padding: var(--gap) 0;
    margin: var(--gf) 0;
}

.itext-pan [class*='itext-'] {
    margin-right: var(--gap);
}

/* /SP5 icons --------------------------------------------*/

/* made in space5 ------ */
.madeinsp5 {
    display: inline-block;
    background: transparent url("../img/sp5__logo.svg") no-repeat;
    background-size: contain;
    width: 56px;
    height: 33px;
    filter: grayscale(100%);
    transition: all 0.5s;
}

.madeinsp5:hover {
    filter: none;
}

/* /made in space5 */

.warning-register-needed {
    padding: var(--gf);
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
    transition: var(--trans);
    opacity: 0.5;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.warning-register-needed a {
    color: var(--color-text-grey);
}

.warning-register-needed:hover {
    opacity: 1;
}

.warning-register-needed a {
    text-decoration: underline;
}

.warning-register-needed img {
    height: 12px;
    display: flex;
}

.body--bv .warning-register-needed {
    color: var(--color-white);
}

.body--bv .warning-register-needed a {
    color: var(--color-white);
}

.warning-register-needed__icon {
    width: 24px;
    height: 24px;
    fill: var(--color-text-grey);
}

.body--bv .warning-register-needed__icon {
    fill: var(--color-white);
}

.body--bv .warning-register-needed img {
    filter: invert(1);
}

/* video responsive ------ */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}


.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-responsive-downscale-wrapper {
    margin: 0 auto;
    width: 60%;
}

@media screen and (max-width: 767px) {
    .video-responsive-downscale-wrapper {
        width: 100%;
    }
}

.grid-c-2 .video-responsive-downscale-wrapper {
    width: 100%;
}

/* /video responsive */


/* ################### PROJECT SPECIFIED COMPONENTS ################### */

.index-video-section {
    border-radius: var(--gap);
    background: var(--ui-bg-100);
    padding: var(--gap);
    margin: var(--gap) 0;
}

.index-video-section__header {
    display: flex;
    justify-content: start;
    align-items: end;
    gap: var(--gap);
    padding: 0 0 var(--gap) 0;
}

.index-video-section-header__logo {
    height: 40px;
}

.index-video-section-header__title {
    display: flex;
    align-items: center;
    padding: 0;
}

.index-video-section__desc {
    color: var(--color-text);
    padding: var(--gap) 0;
}

.index-video-section-header__prog {
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 var(--gap);
}

.channels-list {
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
    row-gap: var(--gf);
    padding: var(--gap) 0;
}

.channels-list__title {
    font-size: 1.2rem;
    font-weight: bold;
    grid-column: 1/-1;
    padding: var(--gap) 0 var(--gf) 0;
}

.channels-list__item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    padding: 8px 12px;
    border-radius: var(--gf);
    border: 1px solid var(--color-secondary);
    transition: var(--trans);
    margin-bottom: var(--gf);
    min-height: 40px;
}

.channels-list__info {
    color: var(--color-text-grey);
    padding: 2px 6px;
    font-size: var(--size-text-note);
    border: 1px solid rgba(0, 0, 0, 0.24);
    border-radius: 6px;
}

.channels-list__item:hover {
    background: var(--color-bg-light-blue);
    border: 1px solid var(--color-primary);
    transition: var(--trans);
}

.channels-list__item:hover .channels-list__info {
    border: 1px solid var(--color-text-grey);
    transition: var(--trans);

}

/* TV template */
.main-tv-section {
    margin-top: 24px;
}

.main-tv__h2 {
    font-family: var(--wf3);
    text-transform: uppercase;
}

.main-tv-section--thin {
    margin-top: 32px;
}

.main-tv-section--thin .main-tv__h2 {
    padding: 0;
}

.main-tv-section--thin .index-video-section {
    margin: 0;
}

.channel-card {
    background: var(--color-white);
    padding: var(--gap);
    border-radius: var(--gf);
    color: var(--color-text);
    box-shadow: var(--sp-shadow-s);
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    min-height: 140px;
    transition: var(--trans);
}

.channel-card:hover {
    box-shadow: var(--sp-shadow-m);
    transition: var(--trans);
}

.channel-card__img {
    object-fit: cover;
}

.channel-card__title {
    font-size: 1rem;
    text-align: center;
}

.channel-card__info {
    color: var(--color-text-grey);
    padding: 2px 6px;
    font-size: var(--size-text-note);
    border: 1px solid rgba(0, 0, 0, 0.24);
    border-radius: 6px;
}

.channel-card__pan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
}

/* /TV template */

/* product card */
.pcard {
    text-align: center;
    background: var(--color-white);
    color: var(--color-text);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

.pcard:hover {
    transition: all 0.2s;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.pcard__body {
    position: relative;
}

.pcard__body,
.pcard__footer {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
}

.pcard__footer {
    padding: 0 16px 16px 16px;
}

.pcard__img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    /*background-size:cover;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
}

.pcard__title {
    font-family: var(--wf2);
    font-size: 1.1em;
    font-weight: bold;
    padding: 6px 0;
}

.pcard__price {
    margin: 16px 0;
    text-align: center;
    font-size: 1.5em;
    color: #270F0C;
    height: 46px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pcard__old-price {
    display: block;
    color: var(--color-text-grey);
    text-decoration: line-through;
    font-size: 0.76em;
    text-align: center;
}

.pcard__notexist {
    text-align: center;
    font-size: 1.1em;
    color: #ce92c1;

}

.pcard__pad {
    padding: 8px 0;
    text-align: center;

}

.pcard__btn {
    display: inline-flex;
    background: var(--color-red);
    color: var(--color-white);
    cursor: pointer;
    padding: 6px 24px;
    border-radius: 4px;
    border: none;
    text-align: center;
    transition: all 0.2s;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);


}

.pcard__btn:hover {
    background: var(--color-red);
    color: var(--color-white);
    box-shadow: 0 2px 6px rgba(245, 47, 47, 0.8);
    transition: all 0.2s;

}

.pcard-icon {
    width: 24px;
    height: 20px;
    background-size: cover;
    margin: 0 4px;
}


.label-box {
    position: absolute;
    top: 24px;
    left: 0;
    display: flex;
    flex-direction: column;
}

.label {
    margin: 0 0 8px 0;
}

.label--new {
    /*width: 66px;*/
    /*height: 16px;*/
    /*background: url("../img/label--new.svg") no-repeat;*/
    /*background-size: cover;*/
    background: var(--color-sp5-dev-bg);
    color: var(--color-sp5-dev-text);
    box-sizing: border-box;
    padding: 4px 32px;
}

.label--hit {
    width: 33px;
    height: 16px;
    /*background: url("../img/label--hit.svg") no-repeat;*/
    background-size: cover;
}

.label--discount {
    width: 93px;
    height: 16px;
    /*background: url("../img/label--discount.svg") no-repeat;*/
    background-size: cover;
}

@media screen and (max-width: 767px) {
    .pcard {
        margin: 0 16px;
    }
}

/* /pcard -----------------------------*/

/* wide */
.wide {
    display: grid;
    grid-template-columns: auto var(--col-wid);
    gap: var(--gap);

}

.wide--main {
    /*margin-top: calc(var(--main-header-height) + var(--gap));*/
    margin-top: var(--gap);
    height: 448px;
}

.wide .splide__slide img {
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.wide .splide__track {
    height: 100%;
}

.wnews {
    background: var(--bv--header-tab-bg);
    min-height: 384px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.wnews__title {
    padding: 16px;
    font-family: var(--wf3);
    font-size: 1.4rem;
}

a.wnews-item {
    color: var(--color-text-heading);
    padding: 8px 16px;
}

a.wnews-item:hover {
    background: var(--thover);
    transition: var(--trans);
}

.wnews-item__title {
    font-size: 1rem;
    font-weight: bold;
}

.wnews-item__pan {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px;
    font-size: 0.8rem;
}

.wnews__footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 0;
}

/* /wide */

/* SP5 Slider */

.spslider {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-auto-columns: auto;
    gap: var(--gap);
    height: 384px;
    overflow: hidden;
}

.spslide__figure {
    height: 384px;
    padding: 0;
    margin: 0;
}

.spslide__img {
    height: 384px;
    object-fit: cover;
}

/* /SP5 Slider */

/* VFR Slider */

.vfr-slider-body {
    width: 100%;
    height: var(--slide-height);
    position: relative;
    overflow: hidden;
}


.vfr-slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.vfr-slide--active {
    opacity: 1;
}

.vfr-slide__picture img {
    height: var(--slide-height);
    object-fit: cover;
    object-position: left;
}

.vfr-slide__picture--center img {
    object-position: center;
}

.vfr-slide-section {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: var(--gap);
    z-index: 200;

    font-size: 0.9rem;
    line-height: 1.4;

    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);

}

.vfr-slide-section__left {
    display: block;
    max-width: 640px;
    color: var(--color-text);
}

.vfr-slide-section__left:hover {
    color: var(--color-text-heading);
}

.vfr-slide-section-left__title {
    font-size: 1.2rem;
    font-weight: bold;
}

.vfr-slide-section__right {
    min-width: 200px;

    border-left: 1px solid rgba(255, 255, 255, 0.4);
    padding-left: var(--gap)
}

.vfr-slide-section-right__item {
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 2px;
    padding-bottom: 4px;
}

.vfr-slide-section-right__item svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--color-text);
}

.vfr-slide-section-right__item:hover svg {
    transform: translateX(2px);
}

.vfr-slider-footer {
    height: 48px;
}

.nav-buttons {
    display: flex;
    justify-content: center;
    height: 100%;
    background-color: var(--color-primary);
}

.vfr-slider-btn {
    background-color: transparent;
    transition: var(--trans);
    color: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 0.9;
}

.vfr-slider-btn:not(.vfr-slider-btn:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.vfr-slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.vfr-slide--fade-in {
    animation: fadeIn 0.5s;
}

.vfr-slider-btn--active {
    background-color: rgba(0, 0, 0, 0.2);
}

/* /VFR Slider */

/* MISC */


/*TV Styles*/
.tv-screen-bg {
    background: fuchsia;

    -webkit-user-select: none;
    /* Для Safari */
    -moz-user-select: none;
    /* Для Firefox */
    -ms-user-select: none;
    /* Для Internet Explorer/Edge */
    user-select: none;
    /* Стандартное свойство */
}

.tv-screen {
    margin: 0 auto;
}

.tv-screen--fhd {
    width: 1920px;
    height: 1080px;
}

.tv-screen--dashed {
    border: 1px dashed var(--color-sp5-dev-text);
}

/* ScoreBox*/

.scorebox-wrapper {
    background: var(--color-yellow-light) url("../img/bv-pattern.png");
    padding: 8px;
    height: 100vh;
    --scorebox-border: var(--color-yellow-light);
    --scorebox-bg: var(--color-blue-dark);
    --scorebox-text: var(--color-white);
    --scorebox-accent-text: var(--volley-yellow);
    --scorebox-red: var(--volley-red);
}

.scorebox {
    width: 596px;
    margin-bottom: 32px;
    background: var(--scorebox-bg);
    color: var(--scorebox-text);
}

.scorebox__header {
    height: 80px;
    display: grid;
    grid-template-columns: 80px auto;
    gap: 0;
}

.scorebox__logo {}

.scorebox__logo img {
    width: 80px;
    height: 80px;
}

.scorebox__title {
    padding: 8px 16px;
    font-family: var(--wf3);
    text-transform: uppercase;
    background: url("../img/yellow-rect.svg") no-repeat top right;
    height: 80px;
}

.scorebox-title__subtitle {
    /*font-size: 1rem;*/
    font-size: 0.8rem;
    color: var(--scorebox-accent-text);
}

.scorebox-title__subtitle-year {
    color: var(--scorebox-text);
}

.scorebox-title__heading {
    /*font-size: 1.2rem;*/
    font-size: 1rem;
    font-weight: bold;
    width: 220px;
}

.scorebox__adv {
    display: none;

    background: red url(../img/tv/betboom-logo.svg) no-repeat center;
    background-size: 80%;
    width: 200px;
    height: 80px;
}

.scorebox__body {
    background-image: url("../img/bg-triangle--dark-blue.svg");
    background-size: 24px;
    padding: 16px;
}

.scorebox-pan {
    font-size: 1.8rem;
    text-transform: uppercase;
    font-family: var(--wf3);
    font-weight: bold;
    margin-bottom: 24px;
}

.scorebox-pan__team {
    padding: 4px 16px;
    color: var(--scorebox-text);
    background: var(--color-blue-dark-2);
    display: inline-block;
}

.scorebox-pan__team--red {
    background: var(--scorebox-red);
}

.scorebox-pan__team--blue {
    background: var(--color-blue);
}

.scorebox-pan__line {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.scorebox-player {
    display: flex;
    flex-direction: column;
}

.scorebox-player__line {
    display: flex;
    align-items: center;
    margin: 8px 0;
}


.scorebox-player__numb {
    width: 2rem;
    padding: 4px;
    background: var(--color-white);
    color: var(--color-blue-dark-2);
    text-align: center;
    margin-right: 16px;
}

.scorebox-player__name {
    width: 240px;
    overflow: hidden;
    position: relative;
    font-size: 1.4rem;
    border: 4px solid transparent;
}

.scorebox-player__name--active {
    border: 4px solid var(--scorebox-border);
}

.scorebox-player__name:after {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
    height: 41px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0) 0%, rgba(18, 20, 38, 1) 100%);
}

.scorebox-pan-line__right {
    display: flex;
    padding: 8px 0;
}

.scorebox-pan-line__score {
    width: 4.6rem;
    padding: 8px;
    background: var(--color-white);
    color: var(--color-blue-dark-2);
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 16px;
    font-size: 3.6rem;
}

.scorebox-pan-line__score--yellow {
    background: var(--color-yellow-light);
}

.scorebox-player__line--yellow .scorebox-player__numb {
    background: var(--color-yellow-light);
}

.scorebox-player__line--yellow .scorebox-player__name {
    color: var(--color-yellow-light);
}

.sparta .scorebox {
    --scorebox-border: var(--volley-light-yellow);
    --scorebox-bg: var(--sparta-dark-blue);
    --scorebox-text: var(--color-white);
    --scorebox-accent-text: var(--volley-yellow);
    --scorebox-red: var(--sparta-red);
}

.scorebox-wrapper.sparta {
    background: var(--sparta-light-blue) !important;
}

.sparta .scorebox__logo {
    background: var(--color-white);
}

.sparta .scorebox__title {
    background: none;
}

.v100 {
    --scorebox-bg: #181052;
    --scorebox-accent-text: #d0bc98;
    --scorebox-border: #d0bc98;
}

.scorebox-wrapper.v100 {
    background: top left / contain #246af7 url("../img/tv/v100-bg.svg");
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
}

.v100 .scorebox {
    background: none;
}

.v100 .scorebox__header {
    grid-template-columns: 120px auto;
    border: 1px solid var(--scorebox-border);
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--scorebox-bg);
}

.v100 .scorebox__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.v100 .scorebox__logo img {
    width: 100%;
    height: auto;
}

.v100 .scorebox__title {
    background: none;
    border-left: 1px solid var(--scorebox-border);
    font-family: var(--wf-v100-1b);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.v100 .scorebox-title__subtitle {
    color: var(--scorebox-text);
    font-size: 16px;
}

.v100 .scorebox-title__heading {
    color: var(--scorebox-accent-text);
    font-size: 24px;
    width: auto;
}

.v100 .scorebox__body {
    background: var(--scorebox-bg);
}

.v100 .scorebox-pan {
    font-family: var(--wf-v100-v);
}

.v100 .scorebox-pan__team {
    font-family: var(--wf-v100-1b);
}

.v100 .scorebox-pan-line__score {
    font-family: var(--wf-v100-vb);
    font-size: 3.2rem;
}

.v100 .scorebox-player__name {
    font-family: var(--wf-v100-1);
}

.v100 .scorebox-player__name:after {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0) 0%, rgb(23 16 81) 100%);
}

.s25 .scorebox {
    --scorebox-bg: #0C4DA2;
    --scorebox-accent-text: #44AADF;
    --scorebox-border: #44AADF;
    --color-yellow-light: #44AADF;
    --scorebox-red: #44AADF;
}

.scorebox-wrapper.s25 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
}

.s25 .scorebox__logo {
    padding: 0;
}

.s25.scorebox-wrapper {
    background: url("../img/tv/snow-tv-bg.jpg") no-repeat center / cover;
}

.s25 .scorebox__body {
    background: var(--scorebox-bg);
}

.s25 .scorebox__title {
    background: none;
}

.s25 .scorebox-player__name:after {
    background-image: linear-gradient(to right, rgba(12, 77, 162, 0) 0%, rgba(12, 77, 162, 1) 100%);
}

/* /ScoreBox*/

/* PlayersBox */

.playersbox-wrapper {
    background: var(--volley-yellow) url(../img/bv-pattern.png);
    padding: 8px;
    height: 100vh;
}

.playersbox-wrapper--winners {
    background: var(--volley-yellow);
}

.playersbox {
    width: 760px;
    --playersbox-border: var(--color-yellow-light);
    --playersbox-bg: var(--color-blue-dark);
    --playersbox-text: var(--color-white);
    --playersbox-accent-text: var(--volley-yellow);
    --playersbox-red: var(--volley-red);
}

.playersbox__header {
    display: grid;
    /*grid-template-columns: 18px 80px 1fr 246px 18px; where 246 is plzce for betboom logo*/
    grid-template-columns: 18px 80px 1fr 18px;
    grid-template-rows: 80px;
}

.playersbox-header__betboom {
    display: none;

    background-color: var(--volley-red);
    /*display: flex;*/
    align-items: center;
    justify-content: space-around;
}

.playersbox-header__betboom-img {
    height: 80px;
}

.playersbox-header__title {
    background: var(--playersbox-bg) url("../img/yellow-rect.svg") bottom right no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    padding: var(--gf);
    color: var(--color-white);
    font-family: var(--wf3);

    text-transform: uppercase;
    width: 100%;
}

.playersbox-header-title-line__top {
    font-size: 10px;
}

.playersbox-header-title-line--yellow {
    color: var(--playersbox-accent-text);
}

.playersbox-header-title-line__bot {
    font-size: 26px;
    line-height: 0.9;
}


.playersbox__betboom {
    object-fit: contain;
}

.playersbox__body {
    padding: 8px 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gf);
}

.playersbox__title {
    text-align: center;
    padding: var(--gf);
    font-weight: bold;
    font-size: 40px;
    color: var(--playersbox-bg);
    grid-column: 1/-1;
}

.playersbox-card {
    padding: var(--gf);
    background: var(--playersbox-bg);
    display: grid;
    grid-template-columns: 200px auto;
    gap: var(--gap);

    overflow-x: hidden;
}


.playersbox-card__pan {
    font-family: var(--wf3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.playersbox-card-pan__num {
    font-size: 42px;
    font-weight: bold;
    color: var(--playersbox-accent-text);
    margin-bottom: var(--gf);
}

.playersbox-card-pan__judge-num {
    font-size: 32px;
    font-weight: bold;
    color: var(--playersbox-accent-text);
    margin-bottom: var(--gf);
    text-transform: uppercase;

}


.playersbox-card-pan__player {
    padding: var(--gf) var(--gap);
    background: var(--playersbox-bg);
    font-family: var(--wf3);
}


.playersbox-card-pan__surname {
    color: var(--playersbox-text);
    font-size: 1.4rem;
}

.playersbox-card-pan__name {
    color: var(--playersbox-text);
    font-size: 1.3rem;
}

.playersbox-card-pan__stats {
    margin-top: var(--gf);
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    padding: var(--gf) 0;
    justify-content: space-between;

    font-size: 1.3rem;
}

.playersbox-card-pan-box {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.playersbox-card__term {
    color: var(--playersbox-text);
}

.playersbox-card__def {
    color: var(--playersbox-accent-text);
}

.playersbox__clubs {
    grid-column: 1/-1;
    display: flex;
}

.playersbox__club {
    padding: var(--gf) var(--gap);
    background: var(--playersbox-red);
    color: var(--playersbox-text);
    width: 100%;
}

.playersbox__clubs--judjes .playersbox__club {
    background: var(--playersbox-bg);

}

.playersbox-club__title {
    font-family: var(--wf3);
    font-size: 1.2rem;
    line-height: 1;
}

.playersbox-club__city {
    font-size: 0.9rem;
    margin-top: var(--gf);
}

.playersbox__club:nth-child(2) {
    margin-left: var(--gf);
}

.playersbox__footer {
    height: 22px;
}

.playersbox-wrapper.sparta {
    background: var(--sparta-light-blue);
}

.sparta.playersbox-wrapper--winners {
    background: var(--volley-yellow);
}


.sparta .playersbox {
    --playersbox-border: var(--volley-light-yellow);
    --playersbox-bg: var(--sparta-dark-blue);
    --playersbox-text: var(--color-white);
    --playersbox-accent-text: var(--volley-yellow);
    --playersbox-red: var(--sparta-red);
}

.sparta .playersbox-header-c22 {
    background: var(--color-white);
}

.sparta .playersbox-header__title {
    background: var(--playersbox-bg);
}

.sparta .playersbox-card__img>img {
    max-height: 232px;
}

.playersbox-wrapper.v100 {
    background: top left / contain #246af7 url("../img/tv/v100-bg.svg");
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
}


.v100 .playersbox {
    --playersbox-bg: #181052;
    --playersbox-accent-text: #d0bc98;
    --playersbox-border: #d0bc98;

}

.v100 .playersbox__header {
    grid-template-columns: 18px 220px 1fr 18px;
    grid-template-rows: 100px;
}

.v100 .playersbox-header-c22 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--playersbox-bg);
    border: 1px solid var(--playersbox-border);
    padding: 16px;
}

.v100 .playersbox-header-title-line__top {
    font-size: 16px;
}

.v100 .playersbox-header-title-line--yellow {
    color: var(--playersbox-text);
}

.v100 .playersbox-header-title-line__bot {
    color: var(--playersbox-accent-text);
    font-size: 36px;
}

.v100 .playersbox-header__logo {
    height: 64px;
    object-fit: contain;
}

.v100 .playersbox-header__title {
    border-top: 1px solid var(--playersbox-border);
    border-right: 1px solid var(--playersbox-border);
    border-bottom: 1px solid var(--playersbox-border);
    background: var(--playersbox-bg);
    justify-content: center;
    font-family: var(--wf-v100-1b);
    gap: 8px;
}

.v100 .playersbox-card__def {
    color: var(--playersbox-text);
}

.v100 .playersbox__title {
    color: var(--playersbox-accent-text);
    text-shadow: 0 0 6px var(--playersbox-bg);
}

.v100 .playersbox-card-pan__judge-num {
    font-family: var(--wf-v100-1b);
    font-size: 28px;
}

.v100 .playersbox-card-pan__player {
    font-family: var(--wf-v100-1b);
}

.v100 .playersbox-club__title {
    font-family: var(--wf-v100-1b);

}

.v100 .playersbox-card-pan-box {
    font-size: 1rem;
}

.v100 .playersbox-card__term {
    font-family: var(--wf-v100-v);
}

.v100 .playersbox-card__def {
    font-family: var(--wf-v100-vb);
}

/* PlayersBox */

/* PlayerBox snow 4 */
.playersbox-wrapper.playersbox-wrapper--pb4 {
    background: var(--volley-dark-blue);
}

.pb4 {
    --pb-gap: 6px;
    --pb-dark-bg: #0C0F3E;
    --pb-dark-bg2: #091056;
    padding: var(--pb-gap);
    background: var(--sv-light-blue);

    max-width: 720px;
    margin: 0 auto;
}

.pb4-header {
    display: flex;
    align-items: center;
    gap: var(--pb-gap);
}

.pb4-header__logo {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    object-fit: contain;
}

.pb4-header__title {
    background: var(--pb-dark-bg);
    height: 80px;
    padding: var(--pb-gap);
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: var(--pb-gap);
    width: 100%;
    color: var(--color-white);
    font-family: var(--wf3);
}

.pb4-header-title-line__accent {
    color: var(--sv-light-blue);
}

.pb4-header-title-line__bottom {
    font-size: 24px;
}

.pb4__body>div {
    background: var(--pb-dark-bg);
    color: var(--color-white);
}

.pb4__body {
    margin-top: var(--pb-gap);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pb-gap);
    width: 100%;
}

.pb4-body-teams__title {
    padding: var(--pb-gap) 0 var(--pb-gap) var(--pb-gap);
    font-size: 24px;
    font-family: var(--wf3);
    color: var(--color-white);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pb-gap);
}

.pb4-body-teams__title>span {
    max-width: 240px;
}

.pb4-body-teams__title svg {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.pb4-body__line:nth-child(even) {
    background: var(--pb-dark-bg2);
}

.pb4-body__line {
    padding: var(--pb-gap);
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--pb-gap);
    height: 48px;
}

.pb4-body-line__numb {
    font-family: var(--wf3);
    color: var(--color-white);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pb4-body-line__info {
    font-size: 16px;
}

.pb4-body-line-info__title {
    font-family: var(--wf3);
    color: var(--color-white);
    font-size: 16px;

}

.pb4-body-line-info__text {
    font-size: 12px;
    color: var(--color-white);
}

/* /PlayerBox snow 4 */



/* ScoreGrid  */
.scoregrid-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.scoregrid {
    min-width: 300px;
    display: flex;
    margin: 0 auto 98px auto;
    position: relative;
}

.scoregrid__logo {
    width: 104px;
    height: 104px;
    border: 6px solid var(--volley-light-yellow);
    box-sizing: initial;
}

.scoregrid__logo img {
    width: 104px;
    height: 104px;
}

.scoregrid__adv {
    display: none;

    position: absolute;
    top: calc(104px + 6px);
    width: 116px;
    height: 32px;
    left: 0;
    border: 6px solid var(--volley-light-yellow);
    border-top: none;
    background: red url("../img/tv/betboom-logo.svg") no-repeat center;
    background-size: 80%;
}

.scoregrid-teams {
    display: flex;
    color: var(--color-white);
    font-family: var(--wf3);
}

.scoregrid-teams__col {
    display: flex;
    flex-direction: column;
}

.scoregrid-teams__col div:first-child {
    border-top: 6px solid var(--volley-light-yellow);
    border-bottom: 3px solid var(--volley-light-yellow);
}

.scoregrid-teams__col div:last-child {
    border-top: 3px solid var(--volley-light-yellow);
    border-bottom: 6px solid var(--volley-light-yellow);
}


.scoregrid__team-plate {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-right: 6px solid var(--volley-light-yellow);
    height: 49px;
    background: var(--volley-dark-blue);

    box-sizing: initial;

    font-size: 24px;
    white-space: nowrap;

}


.scoregrid__score {
    width: 49px;
    height: 49px;
    border-right: 6px solid var(--volley-light-yellow);
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: initial;
    font-size: 32px;
    background: var(--volley-dark-blue);
}

/* /ScoreGrid  */




/*VFR Results Table ----------------------------------------------*/
.result-table-wrapper {
    width: fit-content;
}

.result-table-header {
    background: var(--volley-dark-blue);
    height: 96px;
    display: grid;
    grid-template-columns: 96px auto 96px;
    gap: 16px;
}

.result-table-header__logo {
    width: 96px;
    flex-shrink: 0;
}

.result-table-header__logo img {
    width: 96px;
    height: 96px;
}

.result-table-header__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.result-table-header__h2 {
    color: var(--color-white);
    font-family: var(--wf3);
    font-size: 24px;
    margin: 0 0 8px 0;
    padding: 0;
}

.result-table-header__h3 {
    font-family: var(--wf3);
    font-size: 18px;
    color: var(--volley-yellow);
    margin: 0;
    padding: 0;
}

.result-table-header__triangle {
    width: 96px;
    height: 96px;
    background: url("../img/scorepan-triangle--yellow.svg") no-repeat;
}

.result-table-body {}

.result-table-line {
    display: grid;
    grid-template-columns: 60px 80px 1fr;
    min-height: 64px;
    padding: 24px 0 16px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.result-table__number {
    padding: 4px;
    font-weight: bold;
    font-size: 0.9rem;
}

.result-table__court {
    padding: 4px;
    font-size: 0.9rem;
}

.result-table__time {
    padding: 4px;
    color: var(--color-text-grey);
    font-size: 0.9rem;
}

.result-table__date {
    padding: 4px;
    color: var(--color-text-grey);
    font-size: 0.9rem;
}

.result-table-col {}

.result-table-col--double-line {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.result-table-col__vs {
    display: grid;
    grid-template-columns: 40% 20% 40%;
    width: 100%;

}

.result-table-col__team {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.result-table-col__team--left {
    align-items: flex-end;
    text-align: end;
}

.result-table-col__team--right {}

.result-table-col__team-name {
    color: var(--color-text-grey);
    font-size: 0.9rem;
}

.result-table-col__team-players {
    font-weight: bold;
    color: var(--color-text);
    font-size: 1.2rem;
    padding: 4px 0;
}

.result-table-col__score {
    display: flex;
    justify-content: center;
    height: 54px;
}

.result-table-col__score-numb {
    font-family: var(--wf3);
    font-size: 64px;
    color: var(--volley-dark-blue);
    width: 40px;
    text-align: center;
    line-height: 0.7;
}

.result-table-col__score-numb-separator {
    width: 16px;
    font-size: 64px;
    color: var(--volley-yellow);
    line-height: 0.7;
}

.result-table-col__sets-stats {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(7, 78, 162, 0.09) 0%, rgba(7, 78, 162, 0.2) 100%);
    border-radius: 0 0 16px 16px;
    padding: 4px 16px;
}

.result-table-col__sets-stats-numb {
    padding: 0 12px;
}

.result-table__history-pan {
    display: flex;
    padding: var(--gf);
    align-items: center;
    justify-content: space-around;
}

.result-table__history-pan a:hover {
    color: var(--color-text);
}

/* /VFR Results Table */

/* Filter Card */
.filter-card {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    max-width: 900px;
    align-items: stretch;
    min-height: 64px;
    background: var(--color-white);
    border-radius: var(--gf);
    padding: var(--gf);
    color: var(--color-text);
    box-shadow: var(--sp-shadow-xs);
    margin-bottom: var(--gap);
    transition: var(--trans);
}

.filter-card:hover {
    box-shadow: var(--sp-shadow-m);
}

/* /Filter Card */

/*VFR Result Card ----------------------------------------------*/
.result-cards-wrapper {
    margin-bottom: 40px;
}


.result-cards-title__h3 {
    margin-bottom: var(--gf);
}

.result-cards-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}


.result-card {
    max-width: 900px;
    align-items: stretch;
    min-height: 64px;
    background: var(--color-white);
    border-radius: var(--gf);
    padding: var(--gf);
    color: var(--color-text);
    /*filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16));*/
    margin-bottom: var(--gap);

    box-shadow: var(--sp-shadow-m2);
    cursor: pointer;
    transition: var(--trans);
}

.result-card:hover {
    box-shadow: var(--sp-shadow-l2);
    transition: var(--trans);
}

.result-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.result-card-header__cell {
    display: flex;
    align-items: center;
}

.result-card__body {
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.result-card-header__logo {
    width: 96px;
    flex-shrink: 0;
}

.result-card-header__logo img {
    width: 96px;
    height: 96px;
}

.result-card-header__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.result-card-header__h2 {
    color: var(--color-white);
    font-family: var(--wf3);
    font-size: 24px;
    margin: 0 0 8px 0;
    padding: 0;
}


.result-card__number {
    padding: 4px;
    font-weight: bold;
    font-size: 0.9rem;
}

.result-card__court {
    padding: 4px;
    font-size: 0.9rem;
}

.result-card__time {
    padding: 4px;
    color: var(--color-text-grey);
    font-size: 0.9rem;
}

.result-card__date {
    padding: 4px;
    color: var(--color-text-grey);
    font-size: 0.9rem;
}

.result-card-col {}


.result-card-col__vs {
    display: grid;
    grid-template-columns: 40% 20% 40%;
    width: 100%;
    align-items: end;
    line-height: 1;
}

.result-card-col__team {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.result-card-col__team--left {
    align-items: flex-end;
    text-align: end;
}

.result-card-col__team-name {
    color: var(--color-text-grey);
    font-size: 0.8rem;
}

.result-card-col__team-players {
    font-weight: bold;
    color: var(--color-text);
    font-size: 1rem;
    padding: 4px 0;
    text-transform: uppercase;
}

.result-card-col__score {
    display: flex;
    justify-content: center;
    height: 54px;
    gap: var(--gf);
}

.result-card-col__score-numb {
    font-family: var(--wf3);
    font-size: 64px;
    color: var(--volley-dark-blue);
    width: 40px;
    text-align: center;
    line-height: 0.7;
}

.result-card-col__score-numb-separator {
    width: 16px;
    font-size: 64px;
    color: var(--volley-yellow);
    line-height: 0.7;
}

.result-card-col__sets-stats {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(7, 78, 162, 0.09) 0%, rgba(7, 78, 162, 0.2) 100%);
    border-radius: 0 0 16px 16px;
    padding: 4px 16px;
}

.result-card-col__sets-stats-numb {
    font-size: 0.8rem;
    padding: 0 12px;
}

.result-card__history-pan {
    display: flex;
    padding: var(--gf) var(--gf) 0 var(--gf);
    align-items: center;
    justify-content: space-around;
}

.result-card__history-pan a:hover {
    color: var(--color-text);
}

.result__details {
    max-width: 900px;
    padding: var(--gf);
    border-radius: var(--gf);
    background: var(--color-bg-light-blue);
    margin-top: var(--gap);
    cursor: pointer;
}

.result__summary {
    padding: var(--gf);
}

.result-cards-footer {
    display: flex;
    justify-content: center;
    gap: var(--gap);
    padding: var(--gf);
}

@media screen and (max-width: 767px) {
    .result-card-col__score {
        gap: 0;
        padding: 0 var(--gf);
    }

    .result-card-col__score-numb {
        font-size: 40px;
        width: 40px;
    }

    .result-card-col__score-numb-separator {
        width: 16px;
        font-size: 40px;
    }
}

/* /VFR Results Card */

/* Result Line Cards */
.rlc {
    background: transparent;
    transition: var(--trans);
    padding: var(--gf) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.rlc:last-child {
    border-bottom: none;
}

.rlc:hover {
    transition: var(--trans);
    background: var(--ui-bg-50);
}

.rlc--title {
    font-weight: bold;
    text-align: center;
}

.rlc-clubs-pan {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    flex-direction: column;
}

.rlc-data-pan {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.rlc-club {
    display: flex;
    align-items: center;
    gap: var(--gf);
    width: fit-content;
}

.rlc-club__img {
    width: 24px;
    height: 24px;
}

.rlc-club__name {
    font-size: var(--size-text-note);
}

.rlc__subtitle {
    display: none;
}


.rlc__score {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.rlc__score--final {
    font-size: 1.2rem;
}

.rlc__date {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    text-align: center;
}

.rlc-set-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.rlc-set-list__item {
    font-size: 0.72rem;
    color: var(--color-text-grey);
    padding: 0 4px 0 0;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.rlc-set-list__item:last-child {
    border-right: none;
}

.rlc-cell-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

@media screen and (max-width: 767px) {
    .rlc:last-child {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        ;
    }

    .rlc--title {
        display: none;
    }

    .rlc-club {
        flex: 1;
        justify-content: left;
    }

    .rlc-clubs-pan {
        gap: var(--gf);
        align-items: center;
    }

    .rlc-clubs-pan .rlc-club:first-child {
        /*flex-direction: row-reverse;*/
        justify-content: right;
    }

    .rlc__subtitle {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        border-radius: 24px;
        background: rgba(0, 0, 0, 0.1);
        font-size: 0.6rem;
        width: fit-content;
        margin: 0 auto;
    }

    .rlc__score--final {
        margin-bottom: var(--gf);
    }

    .rlc-cell-wrapper {
        flex-direction: column;
    }
}

/* /Result Line Cards */

/* Champ grid*/
.champ {
    display: flex;
    align-items: center;
}

.champ__stage {
    padding: 0 8px;
}

.champ__stage-title {
    align-self: flex-start;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--color-text);
    padding: 16px 0;
    text-align: center;

}

.champ-card {
    background: var(--color-blue);
    border-radius: 8px;
    padding: 8px 16px;
    margin: 8px 0;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
    transition: var(--trans);
}

.champ-card:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}


.champ-card-header {
    color: var(--color-white);
    font-size: var(--size-text-note);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.champ__stage--1-16 .champ-card {
    background: var(--color-grey-dark);
}

.champ__stage--fin .champ-card {
    background: var(--volley-yellow);
}

.champ__stage--fin .champ-card--1 {
    background: sandybrown;
}

.champ-card__team {
    color: var(--color-white);
    font-size: 0.9rem;
}

.champ-card__separator {
    width: 90%;
    margin: 8px auto;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;

    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-weight: bold;
}

/* /Champ grid*/


/* Volley Tabs*/
.vl-tabs {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin: var(--gf) 0;
}

.vl-tabs__item {
    display: block;
    padding: 4px var(--gf);
    border-bottom: 3px solid var(--color-placeholder);
    color: var(--color-text);
    transition: var(--trans);
    font-size: var(--size-heading-xs);
}


.vl-tabs__item:hover {
    border-bottom: 3px solid var(--color-primary);
}

.vl-tabs__item--active,
.tc-nav__item--active {
    border-bottom: 3px solid var(--color-primary);
}

.vl-tab-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: flex-start;
    gap: var(--gap);
    padding: var(--gf);
}

.vl-tab-filter__cell--line {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap);
}

.vl-tab-content {
    padding-top: var(--gap);
}

.sp-chips-pan--vl-tab-filter {
    padding: var(--gf);
    border-radius: var(--gf);
    box-shadow: var(--sp-shadow-inset);
}

/* /Volley Tabs*/

.word-col {
    margin: 0 auto;
    max-width: 600px;
    line-height: 1.5;
}

/* Gall Albums */
.album {
    width: 100%;
    height: 260px;
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    margin: 0 var(--gap);
    box-shadow: var(--sp-shadow-xs);
    border-radius: var(--gf);
    transition: all 0.5s ease;
}

.album::before,
.album::after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: inherit;
    border: inherit;
    box-shadow: inherit;
    border-radius: inherit;
    transition: all 0.2s ease;
    overflow: auto;
}

.album::before {
    top: 5px;
    left: 5px;
    z-index: -1;
}

.album::after {
    top: 10px;
    left: 10px;
    z-index: -2;
}

.album:hover.album::before {
    transform: rotate(1.6deg);
    border: inherit;
    background: inherit;
    transition: all 0.2s ease;
}

.album:hover.album::after {
    transform: rotate(3.2deg);
    border: inherit;
    background: inherit;
    transition: all 0.2s ease;
}

.album__img-wrapper {
    overflow: hidden;
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background-repeat: no-repeat;
}

.album__img {
    width: 100%;
}

.album__title {
    font-family: var(--wf3);
    font-size: var(--size-heading-xs);
    padding: 4px var(--gf);
    line-height: 1;
}

.album__date {
    padding: 0 var(--gf);
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
}

/* /Gall Albums */

/* Volley gallery*/
.vl-gal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: center;
    margin: 32px 0;
}

.vl-gal__item {
    display: block;

    /* for lazy loading */
    border-radius: var(--gf);
    background-repeat: no-repeat;
    background-size: cover;
    /* /for lazy loading */
}

.vl-gal__item--loading {
    filter: blur(4px);
    opacity: 0.5;
}

.vl-gal__item img {
    display: block;
    width: 200px;
    height: 160px;
    object-fit: cover;
    border-radius: var(--gf);
    transition: var(--trans);
}

.vl-gal__item:hover img {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
}

.gallery-backlight {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(3, 81, 165, .5);
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    padding: var(--gap);
    z-index: 9999;
}

.gallery-win {
    margin: 0 auto;
    width: var(--wid);
    background: var(--color-white);
    padding: var(--gap);
    border-radius: var(--gf);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
}

.gallery-win__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding-bottom: var(--gf);
}

.gallery-win-header__title {
    font-weight: bold;
    font-size: var(--size-heading-xs);
    text-transform: uppercase;
}

.splide__slide__container img {
    border-radius: var(--gf);
    height: 82vh;
    width: 100%;
    object-fit: contain;
}

/* /Volley gallery*/

/* Tabs */
.tabs-header {
    margin: 16px 0;
    padding: 0;
}

.tabs {
    display: flex;
    align-items: center;
    gap: var(--gap);
    list-style: none;
    margin: 16px 0;
    padding: 0;
}

.tabs__item {
    list-style: none;
}

.tabs__item a {
    border-radius: 8px;
    padding: 8px 24px;
    background: var(--color-bg-grey);
    color: var(--color-text);
}

.tabs__item a:hover {
    background: var(--color-bg-blue);
    color: var(--color-text);
}

.tabs__item--active a {
    background: var(--color-blue);
    color: var(--color-white);
}

/* /Tabs */

/* Register Form */
.register-form,
.login-form {
    margin: 16px 0;
}

.form-box {
    width: 300px;
}

.form-box input {
    width: 300px;
}

.form-box .btn--primary {
    width: 300px;
}

/* /Register Form */

/* Request Form */
.request-form__note-box {
    padding: 16px 0;
    font-size: var(--size-text-note);
}

.request-form__note-box .sf__label {
    font-size: var(--size-text-note);
}

.request-form__team {
    border-radius: 8px;
    background: var(--color-bg-light-blue);
    display: inline-flex;
    gap: var(--gap);
}

.request-form-team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gf);
    margin: 16px;
}

.request-form-team-card__h3 {
    font-weight: normal;
    font-size: var(--size-heading-xs);
}

.request-form-team-card__img {
    border-radius: 4px;
    height: 140px;
    object-fit: contain;
}

.request-form-team-card__p {
    text-align: center;
    font-size: var(--size-heading-xs);
    font-weight: bold;
    color: var(--color-text-heading);
}

.request-form-team-card__files {
    padding: 8px;
    border-radius: 8px;
    background: #D5EBFC;
}


.request-form--footer {
    font-size: var(--size-text-note);
}

.request-form--footer__note {
    padding: 16px;
    border-radius: 8px;
    background: var(--color-bg-grey);
    margin-bottom: 8px;
}

.alert {
    color: var(--color-red);
}

/* /Request Form */


/* Form */
.form-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(4, 73, 151, 0.5);
}

.form {
    border-radius: 16px;
    background: var(--color-white);
    padding: 20px;
}

.form-box__header .btn {
    transform: skew(0deg);
}

.form-box__header .btn--ui svg {
    stroke: var(--color-white);
}

.beach-popup {
    padding: 24px;
}

.beach-popup__info-img img {
    width: 100px;
}

.mascot-popup__info-img img {
    width: 100px;
}

.form-box__header {
    display: flex;
    justify-content: flex-end;
}

.form-box__footer {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}


.btn--form {
    width: 100%;
    justify-content: center;
}

.register-form__footer-desc {
    font-size: var(--size-text-note);
    padding: 16px 0;
}

/* /Form */

div.title {
    display: none;
}

div.content {
    display: none;
}

/* Champ light-box */
.clb {
    background: var(--volley-dark-blue);
    display: grid;
    grid-template-rows: auto 1fr 48px;
}

.clb--wide {
    height: 384px;
}

.clb__header {
    background: var(--volley-dark-blue);
    display: flex;
    align-items: center;
}

.clb__header-title {
    font-family: var(--wf3);
    color: var(--volley-light-yellow);
    padding: var(--gf) var(--gap);
    font-size: var(--size-heading-xs);
}

.snow .clb__header-title {
    color: var(--sv-light-blue);
}

.clb__logo {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    position: relative;
}

.clb__logo:after {
    content: '';
    position: absolute;
    top: 80px;
    left: 0;
    width: 80px;
    height: 21px;
    background: url("../img/betboom-pan.svg") no-repeat center;
    z-index: 100;
    background-size: cover;
}


.clb__logo img {
    width: 80px;
    height: 80px;
}


.clb-title {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
    font-family: var(--wf3);
    color: var(--color-white);
    height: 80px;
    width: 100%;
    padding: var(--gf);
    gap: var(--gf);
    background: url("../img/yellow-rect-2.svg") no-repeat left;
    text-align: right;
    text-transform: uppercase;
}

.clb-title__subtitle {
    font-size: 0.9rem;
    display: flex;
    gap: var(--gf);
    line-height: 0.7;
}

.clb__year {
    color: var(--color-white);
}

.clb__gametype {
    color: var(--volley-yellow);
}

.clb-title__title {
    font-size: 1.1rem;
    line-height: 1;
    text-align: right;
}

.clb-title__line-down {
    font-size: 0.8rem;
    line-height: 0.7;
    color: var(--volley-yellow);
    display: none;
}


.clb__body {
    padding: 24px var(--gf) var(--gf) var(--gf);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: url("../img/blue-rect.svg");
}

.clb-line {
    padding: 8px;
    border-radius: 8px;
}

.clb-line__title {
    font-size: 1.1rem;
    font-family: var(--wf3);
}

.clb-line__title a {
    color: var(--color-white);
}

.clb-line__title a:hover {
    color: var(--volley-yellow);
}

.snow .clb-line__title a:hover {
    color: var(--sv-light-blue);
}


.clb-line__date {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--volley-light-yellow);
    padding-top: 4px;
}

.snow .clb-line__date {
    color: var(--sv-light-blue);
}

.clb-line__start-date {}

.clb-line__end-date {}

.clb-line__date-separator {
    color: var(--color-grey);
}

.clb-line--empty {
    padding: var(--gap);
    border-radius: var(--gf);
    text-align: center;
    filter: none;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.clb-line--empty-glb {
    color: rgb(97 97 97 / 70%);
    border: 1px dashed rgb(255 255 255 / 82%);
    margin: 64px 24px;
}

.clb__footer {
    display: grid;
    align-items: center;
    justify-content: space-around;
    padding: 8px;
    background: var(--volley-dark-blue2);
}

/* Champ light-box */

/* Champ New light-box */
.cnlb {
    /*background: var(--volley-dark-blue);*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gf);
    /*grid-template-rows: auto 1fr 48px;*/
    /*height: 100%;*/
}

.cnlb--wide {
    height: 384px;
}

.cnlb-header {
    /*background: var(--volley-dark-blue);*/
    display: flex;
    align-items: center;
}

.cnlb-header__title {
    font-family: var(--wf3);
    color: var(--color-text-heading);
    padding: var(--gf) var(--gap);
    font-size: var(--size-heading-xs);
}

.snow .cnlb-header__title {
    color: var(--sv-light-blue);
}

.cnlb__logo {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    position: relative;
}

.cnlb__logo:after {
    content: '';
    position: absolute;
    top: 80px;
    left: 0;
    width: 80px;
    height: 21px;
    background: url("../img/betboom-pan.svg") no-repeat center;
    z-index: 100;
    background-size: cover;
}


.cnlb__logo img {
    width: 80px;
    height: 80px;
}


.cnlb-title {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
    font-family: var(--wf3);
    color: var(--color-white);
    height: 80px;
    width: 100%;
    padding: var(--gf);
    gap: var(--gf);
    background: url("../img/yellow-rect-2.svg") no-repeat left;
    text-align: right;
    text-transform: uppercase;
}

.cnlb-title__subtitle {
    font-size: 0.9rem;
    display: flex;
    gap: var(--gf);
    line-height: 0.7;
}

.cnlb__year {
    color: var(--color-text);
}

.cnlb__gametype {
    color: var(--volley-yellow);
}

.cnlb-title__title {
    font-size: 1.1rem;
    line-height: 1;
    text-align: right;
}

.cnlb-title__line-down {
    font-size: 0.8rem;
    line-height: 0.7;
    color: var(--volley-yellow);
    display: none;
}


.cnlb-body {
    padding: var(--gf);
    display: flex;
    flex-direction: column;
    gap: 6px;
    row-gap: 6px;
    /*background: url("../img/blue-rect.svg");*/
}

.cnlb-line {
    padding: 6px 8px 6px 8px;
    border-radius: 8px;
    background: var(--ui-bg-100);
    box-shadow: var(--sp-shadow-xs);
    transition: var(--trans);
}

.cnlb-line:hover {
    box-shadow: var(--sp-shadow-s);
    background: var(--color-white);
}

.cnlb-line:hover .cnlb-line__title {
    color: var(--color-primary);
}

.cnlb-line__title {
    font-size: 1rem;
    font-family: var(--wf3);
}

.cnlb-line__title {
    color: var(--color-text);
}

.cnlb-bottom-line {
    padding-top: 4px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
}

.cnlb-line__gender {
    font-size: 0.8rem;
    color: var(--color-text-grey);
}

.cnlb-line__date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--color-text-grey);
    min-width: 94px;
}

.cnlb-line-date__separator {
    color: var(--color-text-grey);
}

.cnlb-line__league {
    font-size: 0.8rem;
    color: var(--color-text-grey);
}

.snow .cnlb-line__date {
    color: var(--sv-light-blue);
}

.cnlb-line--empty {
    padding: var(--gap);
    border-radius: var(--gf);
    text-align: center;
    filter: none;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);

}

.cnlb-footer {
    display: grid;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px 8px 8px;
    /*background: var(--volley-dark-blue2);*/
}

/* Champ New light-box */

/* int champ line*/
.int-champ-line {
    display: flex;
    gap: var(--gap);
    align-items: center;
    justify-content: space-evenly;
}

.int-champ-item {
    padding: 16px;
    border-radius: 8px;
    background: var(--color-bg-blue);
    flex: 1;
    transition: var(--trans);
}

.int-champ-item:hover {
    background: #e0ebf1;
}

a .int-champ-item__title {
    color: var(--color-text-heading);
    font-family: var(--wf3);
    font-size: 1.2rem;
}

.int-champ-item__pan {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px;
    font-size: 0.8rem;
    margin: 8px 0 0 0;
    padding: 2px 0;
    color: var(--color-grey-dark);
}

/* /int champ line*/
.judge-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-text-heading);
    text-transform: uppercase;
    padding: 24px 0 8px 0;
}

/*player card*/
.player-card {
    display: grid;
    grid-template-columns: 120px auto;
    gap: var(--gap);
    margin: 16px 0;
    background: none;
    transition: var(--trans);
    border-radius: 8px;
    padding: 16px;
    background: var(--color-white);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
}

.player-card:hover {
    background: #EDF6FF;
}

.player-card--judge {
    margin: 0;
}

.player-card__left {
    position: relative;
}

.player-card__num {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 2rem;
    font-weight: bold;
    color: var(--volley-yellow);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1;
}

.player-card__img {
    border-radius: 4px;
}

.player-card__right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--gf);
    align-items: flex-start;
}

.player-card__name {
    font-weight: bold;
    color: var(--color-text-heading);
    font-size: 1.2rem;
    text-transform: uppercase;
}

.player-card__rating {
    background: var(--volley-yellow);
    border-radius: 4px;
    color: var(--color-text-heading);
    font-weight: bold;
    font-size: 1.2rem;
    padding: 4px 16px;
    display: inline-block;
}

.player-card__rating--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.player-card__club {
    color: var(--volley-classic-blue);
    display: flex;
    align-items: center;
    gap: var(--gf);
    font-size: var(--size-text-note);
}

.player-card__club img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.main-player-link {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.main-players {
    padding: var(--gap);
    border-radius: var(--gf);
    margin-bottom: var(--gap);
}

.main-players--male {
    background: var(--volley-grey-blue) url("../img/vl-man-stroke--white.svg") no-repeat center right;
    background-size: contain;
}

.main-players--female {
    background: var(--volley-grey-blue) url("../img/vl-woman-stroke--white.svg") no-repeat center right;
    background-size: contain;
}

/*/player card*/

/* Player Transfer */
.vl-transfer-box {
    border: 1px solid var(--color-border);
    border-radius: var(--gf);
    margin: var(--gap) 0;
    width: 460px;
}

.vl-transfer-box__title {
    padding: var(--gf);
    font-weight: bold;
    border-bottom: 1px solid var(--color-border);
}

.vl-transfer-box__body {
    display: flex;
    align-items: start;
    gap: var(--gap);
}

.vl-transfer-box__item {
    padding: var(--gf);
    width: 200px;
}

.vl-transfer-box__item-title {
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
}

.vl-transfer-box__item-club {
    padding: var(--gf) 0;
}

.vl-transfer-box__item-club--from {
    color: var(--color-text-grey);
}

.vl-transfer-box__separator {
    align-self: center;
}

.vl-transfer-box__separator svg {
    width: 40px;
    height: 40px;
    stroke: var(--color-primary);
    fill: none;
}

/* /Player Transfer */

/* Player Achievements */
.player-ach-line {
    padding: var(--gf);
    border-radius: var(--gf);
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.player-ach-line__result {
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.player-ach-line__medal {
    width: 32px;
    flex-shrink: 0;
}

.player-ach-line__year {
    color: var(--color-text-note);
}

/* Player /Achievements */


/* Main vs box*/
.mvsb-wrapper {
    padding: 32px;
    /*grid-auto-rows: 1fr;*/
    background: var(--color-bg-blue) url("../img/round-logo-white.svg") 125% 75px no-repeat;
    border-radius: var(--gf);
}

.mvsb {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--color-white);
    border-radius: var(--gf);
}

.mvsb__header {
    background: var(--volley-dark-blue);
    color: var(--volley-light-yellow);
    padding: var(--gf);
    border-radius: 8px 8px 0 0;
    text-transform: uppercase;
}

.mvsb__title {
    padding: 8px 0;
    color: var(--volley-yellow);
    height: 80px;
}

.mvsb__h3 {
    padding: 0;
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}

.mvsb__h3 a {
    color: var(--volley-yellow);
}

.mvsb__subtitle {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;

}

.mvsb-line {
    height: 8px;
}

.mvsb__body {
    background: var(--color-white);
}

.mvsb-team {
    padding: 8px;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.mvsb-team__element {
    width: 16px;
    height: 100%;
    border-radius: 2px;
    background-color: lightgrey;
    outline: 1px solid rgba(0, 0, 0, 0.2);
}

.mvsb-team__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}


.mvsb-team--a {
    border-bottom: 1px solid rgba(144, 160, 183, 0.2);
}

.mvsb-team--b {
    border-top: 1px solid rgba(144, 160, 183, 0.2);
}

.mvsb-team__title {
    font-size: 0.8rem;
    padding: 4px 0;
}

.mvsb-team__player {
    font-weight: bold;

}

.mvsb-score-pan {
    display: grid;
    grid-auto-columns: 1fr auto 1fr;
    gap: 8px;
    justify-items: center;
}

.mvsb-score-pan-box {
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    width: fit-content;
}

.mvsb-score-pan-box__top {
    border-radius: 16px 16px 0 0;
    background: linear-gradient(0deg, rgba(7, 78, 162, 0.09) 0%, rgba(7, 78, 162, 0.2) 100%);
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvsb-score-pan-box__bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(7, 78, 162, 0.09) 0%, rgba(7, 78, 162, 0.2) 100%);
    border-radius: 0 0 16px 16px;
    padding: 4px 16px;
    gap: 12px;
}

.mvsb-score-pan-box__sets-stats {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 0.8rem;
}

.mvsb-score-pan-box__score {
    color: var(--color-text-heading);
    font-weight: bold;
    font-size: 1.4rem;
    padding: 4px 16px;
    display: inline-block;
}

.mvsb-score-pan__separator svg {
    fill: var(--volley-yellow);
}

.mvsb__footer {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: var(--volley-dark-blue);
    color: var(--volley-light-yellow);
    border-radius: 0 0 8px 8px;
    padding: 8px;
}

/* /Main vs box*/

/* Game page*/
.gpage__header {
    font-family: var(--wf3);
    height: 92px;
    display: flex;
    align-items: center;
    gap: var(--gf);
    background: var(--volley-dark-blue2) url("../img/yellow-rect.svg") top right no-repeat;
}

.gpage__chart-h4 {
    color: var(--color-white);
}

.snow .gpage__header {

    background: var(--volley-dark-blue2) url("../img/snow-rect.svg") top right no-repeat;
}

.gpage__header-logo {
    height: 92px;
}

.gpage__header-logo img {
    width: 92px;
    height: 92px;
}

.gpage__header-pan {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    padding: var(--gf) 0;
    gap: var(--gf);
    font-family: var(--wf3);
    text-transform: uppercase;
}

.gpage__header-subtitle {
    color: var(--volley-yellow);
    font-size: 0.7rem;
    line-height: 0.7;
}

.snow .gpage__header-subtitle {
    color: var(--sv-light-blue);
    font-size: 0.7rem;
    line-height: 0.7;
}

.gpage__header-subtitle-year {
    color: var(--color-white);
}

.gpage__h1 {
    color: var(--color-white);
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-family: var(--wf3);
    font-size: 1.28rem;
    line-height: 1;
}

.gpage__header-bot-title {
    color: var(--volley-yellow);
    font-size: 0.7rem;
    line-height: 0.7;
}

.snow .gpage__header-bot-title {
    color: var(--sv-light-blue);
    font-size: 0.7rem;
    line-height: 0.7;
}

.gpage__body {
    padding: 32px;
    background: var(--volley-dark-blue);
}

.gpage__video {
    margin-top: 32px;
}

.gpage__video--snow {
    margin: 0 auto;
    width: 50%;
}

.gpage__video--snow .video-responsive {
    max-height: 50vh;
}

.gpage-no-video {
    margin: 24px auto;
    padding: var(--gap);
    border-radius: var(--gf);
    align-items: center;
    border: 1px dashed rgba(24, 16, 82, 0.64);
    display: flex;
    gap: var(--gf);
    width: fit-content;
}

.gpage-no-video__img {
    margin: var(--gap);
    text-align: center;
    flex-shrink: 0;
}

.gpage-no-video__img img {
    width: 48px;
    height: 48px;
}

.gpage-no-video__desc {
    text-align: center;
    color: var(--volley-classic-blue);
    font-weight: bold;
    padding-right: 24px;
}

@media (max-width: 768px) {
    .gpage-no-video {
        margin: 16px auto;
    }

    .gpage-no-video__img img {
        width: 32px;
        height: 32px;
    }

    .gpage-no-video__desc {
        text-align: left;
    }
}

/* /Game page*/

/* Live Game*/
.lg {
    max-width: 640px;
}

.lg-stat {
    display: grid;
    grid-template-columns: 1fr 140px 1fr;
    align-items: center;
    gap: var(--gap);
    color: var(--volley-yellow);
}

.lg-stat__left {
    text-align: left;
    font-size: 0.9rem;
    padding: 8px;
}

.lg-stat__center {
    text-align: center;
    color: var(--color-white);
    background: var(--volley-red);
    padding: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.lg-stat__right {
    text-align: right;
    font-size: 0.9rem;
    padding: 8px;
}

.lg-header {
    display: grid;
    grid-template-columns: 1fr 140px 1fr;
    align-items: stretch;
    gap: var(--gap);
    background: var(--volley-dark-blue2);
}

.lg-body-info {
    margin: 40px var(--gf) var(--gf) var(--gf);
    padding: var(--gap);
    border-radius: var(--gf);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-around;
    gap: var(--gf);
    color: var(--color-white);
}

.lg-footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 6px 0 8px 0;
    background: var(--volley-light-yellow);
}

.lg-team {
    padding: 8px;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.lg-team__left {}

.lg-team__element {
    width: 16px;
    height: 100%;
    border-radius: 2px;
    background-color: lightgrey;
}

.lg-team__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.lg-team--b {
    flex-direction: row-reverse;
}

.lg-team--b .lg-team__right {
    align-items: flex-end;
    text-align: right;
}

.lg-team__title {
    font-size: 0.8rem;
    padding: 4px 0;
    color: var(--volley-yellow);
}

.lg-team__player {
    font-weight: bold;
    color: var(--color-white);
    font-family: var(--wf3);

}

.lg-score-pan {
    display: grid;
    grid-auto-columns: 1fr auto 1fr;
    gap: 8px;
    justify-items: center;
}


.lg-score-pan-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lg-score-pan-box__score {
    color: var(--color-white);
    font-weight: bold;
    font-size: 2.2rem;
    padding: 4px 16px;
    display: inline-block;
}

.lg-score-pan__separator svg {
    fill: var(--volley-yellow);
}

.lg-scorepan--snow-wrapper {
    --volley-light-yellow: var(--sv-light-blue);
    display: flex;
    justify-content: center;
    margin-top: 24px
}

.lg-scorepan--junior-wrapper {
    --volley-light-yellow: var(--volley-classic-blue);
    display: flex;
    justify-content: center;
    margin-top: 24px
}

.lg-scorepan--junior-wrapper .lg-scorepan__triangle {
    display: none;
}

.lg-scorepan {
    display: grid;
    grid-template-columns: 100px auto;
    grid-template-rows: 100px;
}

.lg-scorepan * {
    box-sizing: inherit !important;
}

.lg-scorepan__logo {
    border: 4px solid var(--volley-light-yellow);
    box-sizing: initial;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--volley-dark-blue);
    /*background: var(--color-white);*/
    /*padding: 0 4px;*/
    padding: 4px;
}

.lg-scorepan__logo img {
    width: 100%;
    height: auto;
    max-height: 100%;
}

.lg-scorepan-teams {
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    width: fit-content;
}

.lg-scorepan-teams__line {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    font-family: var(--wf3);
    box-sizing: initial;
    border: 4px solid var(--volley-light-yellow);
    height: 50px;
    border-bottom-width: 2px;
    border-left: none;
}

.lg-scorepan-teams__line--2 {
    border-top-width: 2px;
    border-bottom-width: 4px;

}

.lg-scorepan-teams__line--1 .lg-scorepan__team-plate {
    /*    border-top: 4px solid var(--volley-light-yellow);
        border-bottom: 4px solid var(--volley-light-yellow);*/
}

.lg-scorepan-teams__line--1 .lg-scorepan__score {
    /*
    border-top: 4px solid var(--volley-light-yellow);
    border-bottom: 4px solid var(--volley-light-yellow);*/
}

.lg-scorepan-teams__line--2 .lg-scorepan__team-plate {
    /*border-bottom: 4px solid var(--volley-light-yellow);*/
}

.lg-scorepan-teams__line--2 .lg-scorepan__score {
    /*border-bottom: 4px solid var(--volley-light-yellow);*/
}

.lg-scorepan__team-plate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*border-right: 4px solid var(--volley-light-yellow);*/

    background: var(--volley-dark-blue);
    overflow: hidden;
    /*patch for svg triangle*/
    box-sizing: initial;
    width: calc(206px + var(--gf) + 50px);
    height: 100%;
}

.lg-scorepan__team-plate-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lg-scorepan__name {
    padding: 0 16px;
    font-size: 0.8rem;
    white-space: nowrap;

}

.lg-scorepan__pass {
    font-size: 1.2rem;
    width: 16px;
}

.lg-scorepan__triangle {
    flex-shrink: 0;
}

.lg-scorepan__triangle svg {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.lg-scorepan__score {
    width: 48px;
    height: 100%;
    border-left: 4px solid var(--volley-light-yellow);
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: initial;
    font-size: 1.2rem;
}

.lg-scorepan__score--blue {
    background: var(--volley-dark-blue);
}

.lg-scorepan__score--red {
    background: var(--volley-red);
}

.snow .lg-scorepan__score--red {
    background: var(--sv--header-tab-bg);
    color: var(--color-dark);
}

.lg-scorepan__score--matchball {
    background: var(--volley-red);
    width: auto;
    padding: 0 16px;
}

.snow .lg-scorepan__score--matchball {
    background: var(--sv--header-tab-bg);
    color: var(--color-dark);
}

.lg-scorepan__score--setball {
    background: var(--volley-red);
    width: auto;
    padding: 0 16px;
}

.snow .lg-scorepan__score--setball {
    background: var(--sv--header-tab-bg);
    color: var(--color-dark);
}

.lg--end .lg-stat__center {
    background: transparent;
}


.lg--end .lg-body {
    filter: blur(8px) grayscale(80%);

}

.lg--end {
    position: relative;
}

.lg--end:after {
    content: 'Игра окончена';
    font-size: var(--size-heading-xs);
    font-weight: bold;
    display: block;
    top: 42%;
    left: calc(50% - 80px);
    padding: var(--gap);
    border-radius: var(--gf);
    position: absolute;
    z-index: 20;

    filter: none;

    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* /Live Game*/

/* Court */
.court {
    border: 8px solid;
    display: grid;
    grid-template-columns: 1fr 128px 1fr;
    min-height: 394px;
    width: 100%;
    align-items: center;
    position: relative;
}

.court--bv {
    background: var(--volley-yellow);
    border-color: var(--volley-light-yellow);
    background-image: linear-gradient(to right,
            var(--volley-yellow) 49%,
            #916E29 49%,
            #916E29 51%,
            var(--volley-yellow) 51%,
            var(--volley-yellow) 100%);
}


.court__left,
.court__right {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
}

.court-player {
    display: flex;
    gap: var(--gap);
    align-items: center;
}

.court-player--right {
    flex-direction: row-reverse;
}

.court-player__status {
    font-family: var(--wf3);
    color: var(--color-text-heading);
    font-size: 1.8rem;
    width: 24px;
    text-align: center;
}

.court-player__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--color-white);
    border: 4px solid grey;

    flex-shrink: 0;
}

.court-player__number {
    font-family: var(--wf3);
    color: var(--color-text-heading);
    font-size: 2.4rem;
}

.court-player__ball img {
    width: 64px;
    height: 64px;

}

.court-score-pan {
    z-index: 10;
}

.court-score-pan__top {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: #233A55;
    padding: 8px;
}

.court-score-pan__bottom {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4px;
    background: #C4C4C4;
    color: var(--color-text);
    font-weight: bold;
    text-transform: uppercase;

}

.court-score-pan__score {
    color: var(--color-white);
    font-weight: bold;
    font-size: 1.8rem;
    padding: 4px 16px;
    display: inline-block;
}

.court-score-pan__separator {}

.court-score-pan__separator svg {
    fill: var(--volley-yellow);
}

/* /Court */

/* Media */
.main-media-grid {
    gap: 24px;
}

.main-media-grid>.album {
    margin: 0;
}

.main-media-footer {
    margin-top: 24px;
}

/* /Media */

/* News*/
.main-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: var(--gap);
    align-items: start;
}

.main-news-line-grid {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    align-items: start;

}

.news-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    height: 200px;
    color: var(--color-text);
}

a.news-item {
    color: var(--color-white);
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
}

.news-item__pan {
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.8) 100%);
}

.news-item__title {
    font-size: 1rem;
    padding: 8px 0;
}


.news-item__date {
    width: fit-content;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 8px;
    color: var(--color-white);
    border-radius: 2px;
}

.news-post {
    display: grid;
    grid-template-columns: 360px auto;
    align-items: start;
    gap: var(--gap);
    margin-bottom: 24px;
}

.new-post__img {
    flex-shrink: 0;
    width: 360px;
}

.new-post__img img {
    height: 140px;
    flex-shrink: 0;

}

.new-post__body {}

.news-title__h2 a {
    color: var(--color-text-heading);
}

.news-title__h2 a:hover {
    color: var(--color-primary);
}

.news-entry p {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: var(--color-text) !important;
    font-weight: normal !important;
}

.news-readmore:hover {
    text-decoration: underline;
}

.news-date {
    color: var(--color-text-grey);
}

/* /News Item*/

/* Blog items */
.blog-main-entry {
    display: grid;
    grid-template-columns: 8fr 4fr;
    background: var(--color-neutral);
    border-radius: var(--gf);
    margin-bottom: var(--gap);
}

.blog-main-entry__text {
    padding: var(--gf) var(--gap);

}

.blog-main-entry__img {
    background: url("../img/running-man-scene-white.svg") no-repeat center center;
    background-size: contain;
    margin: var(--gf);
}

@media screen and (max-width: 768px) {
    .blog-main-entry {
        grid-template-columns: 1fr;
    }

    .blog-main-entry__img {
        display: none;
    }
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gap);
}

.blog-item,
a.blog-item {
    color: var(--color-text);
    border-radius: var(--gf);
    border: 1px solid var(--color-neutral);
    /*height: 340px;*/
    overflow: hidden;
    transition: var(--ui-trans);
}

.blog-item:hover,
a.blog-item:hover {
    border: 1px solid var(--color-neutral-dark);
}

.blog-item__img {
    background-size: cover;
    background-position: center;
    height: 240px;
}

.blog-item__pan {
    padding: 4px 8px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blog-item__title {
    font-size: 1rem;
    padding: 8px 0;
}

.blog-item__desc {
    padding: 0;
    margin: 0;
    line-height: 1.2 !important;
}


.blog-item__date {
    width: fit-content;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 8px;
    color: var(--color-white);
    border-radius: 2px;
}

/* /Blog items */


/* Filter */
.grid-filter {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--gap);
    row-gap: var(--gap);
    margin: 0 0 var(--gap) 0;
    padding: var(--gap);
    border-radius: var(--gf);
    align-items: start;
    box-shadow: var(--sp-shadow-inset);
    background: var(--ui-bg-100);
}

.grid-filter .sf__label {
    margin-top: 0;
    font-size: var(--size-text-note);
}

.grid-filter .sf__input {
    width: auto;
    max-width: 200px;
}

.grid-filter__btn-pan {
    display: flex;
    align-items: end;
    align-self: end;
    gap: var(--gap);
}

.grid-filter__btn-pan .btn {
    padding: 8px 16px;
}

.glb-important-filter .sf__label {
    font-weight: bold;
    color: var(--color-primary);
}

/* /Filter */

/* Volley Table*/
.vl-table {
    margin: 8px 0;
    width: fit-content;
}

.vl-table-header {
    margin-bottom: 24px;
}

.vl-table-header__title {
    margin-bottom: 24px;
}

.vl-table-header-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    gap: var(--gap);
    padding: 16px 0 8px 0;
}

.vl-table-header-toggle-wrapper .vl-table-header__h1 {
    padding: 0;
}

.vl-table-header__h1 {
    text-transform: uppercase;
    font-size: 1.8rem;
}

.vl-table-line:nth-child(2n+1) {
    background: var(--color-bg-light-blue-2);
}

.vl-table-line {
    display: flex;
    gap: var(--gap);
    padding: 8px;
    align-items: center;
    transition: var(--trans);
    font-size: 0.9rem;
    color: var(--color-text);
}

.vl-table-line:hover {
    transition: var(--trans);
    background: var(--color-bg-yellow);
}

.vl-table-line--now {
    font-weight: bold;
}

.vl-table-line--past {
    color: var(--color-text-grey) !important;
}

.vl-table-line--past .vl-table-line-item__text-note {
    color: #a7a7a7;
}

.vl-table-line--wc {
    color: var(--color-purple);
}

.vl-table-line__item {
    width: 220px;
}

.vl-table-line__item--xs {
    width: 40px;
}

.vl-table-line__item--s {
    width: 80px;
}

.vl-table-line__item--m {
    width: 120px;
}

.vl-table-line__item--l {
    width: 300px;
}

.vl-table-line__item--xl {
    width: 450px;
}

.vl-table-line__item--xxl {
    width: 600px;
}

.vl-table-line__item--max {
    width: 100%;
}

.vl-table-line--header {
    background: var(--color-neutral) !important;
    color: var(--color-text-heading);
    font-weight: bold;
    border-radius: 4px;
    padding: 16px 8px;
}

.vl-table-line--header:hover {
    background: var(--color-neutral) !important;
}

.vl-table-line__item--city {
    font-weight: bold;
}

.vl-table-line__item--city span {
    font-weight: normal;
}

.vl-table-line-item__text-money {
    font-weight: bold;
}

.vl-table-line--past-year {
    color: var(--color-text-grey);
}

.vl-table-rating-wrapper {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2px;
    line-height: 1;
    font-size: 12px;
}

.vl-table-player-rating {
    color: var(--volley-classic-blue);
    font-weight: bold;
}

.vl-table-player-rating-current-season {
    display: flex;
    align-items: center;
    gap: 2px;
}

.vl-table-player-rating-current-season__note {
    color: var(--color-text-note);
    font-size: 10px;
}

.vl-table-line__judge-grade-box {
    display: flex;
    align-items: center;
    gap: var(--gap);
    background: rgba(0, 0, 0, 0.04);
    padding: var(--gf);
    border-radius: var(--gf);
}

.vl-table-line__judge-grade-comment-box {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: var(--gap);
    background: rgba(0, 0, 0, 0.04);
    padding: var(--gf);
    border-radius: var(--gf);
}

.vl-table-line__judge-comment {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 4px;
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: var(--size-text-note);
}

.vl-table-line__judge-comment:last-of-type {
    margin-bottom: 0;
}

.vl-table-line-judge-comment__def {
    font-style: italic;
}

.vl-table-line__judge-grade {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--size-text-note);
    margin-bottom: 4px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 16px;
}

.vl-table-line__judge-grade--big {
    flex-direction: column;
    text-align: center;
    gap: 0;
    background: none;
}

.vl-table-line__judge-grade:last-of-type {
    margin-bottom: 0;
}

.vl-table-line-judge-grade__term {
    color: var(--ui-color-text-light-grey);
}

.vl-table-line-judge-grade__def {
    font-weight: bold;
}

.vl-table-line__judge-grade--big .vl-table-line-judge-grade__def {
    font-size: 1.8rem;
    font-weight: bold;
}

.vl-table-line__judge-grade--big .vl-table-line-judge-grade__term {
    font-size: 0.6rem;
    text-transform: uppercase;
}


.vl-table summary {
    cursor: pointer;
}

.vl-table summary+div {
    background: var(--color-white);
    box-shadow: var(--sp-shadow-inset);
    padding: var(--gf) var(--gap);
}

.vl-table details .search__filters {
    padding: var(--gf) 0;
}

/* /Competition Table*/


/* Pagination*/
.pagination {
    margin: 16px 0 48px 0;
}

.pagination,
.pagination ul {
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: var(--gf);
    list-style: none;
    flex-wrap: wrap;
}

.pagination a {
    padding: 8px 12px;
    border: 1px solid transparent;
    background: var(--color-bg-blue);
    border-radius: 4px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--ui-size);
}

.pagination a:hover {
    border: 1px solid var(--color-primary);
    transition: var(--trans);
}

.pagination a.active {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.page-item+.active a {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.page-item__spacer {
    padding: 8px 12px;
    border: 1px solid transparent;
    background: var(--color-bg-blue);
    border-radius: 4px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--ui-size);
}

.pagination svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

.pagination a[aria-current="page"] {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

/* /Pagination*/


/* LK */
.page--lk {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 12fr;
    gap: var(--gap);
}

.aside-lk {
    padding: 8px;
    border-right: 1px solid var(--color-bg-blue);
}

.aside-lk-nav {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    /*position: fixed;*/
}

.aside-lk-nav__item {
    display: flex;
    padding: 8px 12px;
    gap: 8px;
    align-items: center;
    transition: var(--trans);
    background: transparent;
    line-height: 1;
    font-size: 0.9rem;
    color: var(--color-text);
}

.aside-lk-nav__item svg {
    stroke: var(--color-text);
}

.aside-lk-nav__item:hover {
    color: var(--color-text);
    background: var(--ui-blue-bg-100);
}

.aside-lk-nav__item:hover svg {
    stroke: var(--color-text);
}

.aside-lk-nav__item--active {
    background: var(--ui-blue-bg-200);
    color: var(--color-blue);
}

.aside-lk-nav__item--active svg {
    stroke: var(--color-blue);
}

.aside-bot-nav {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    align-items: center;
    justify-content: center;
}

.aside-bot-nav img {
    max-width: 124px;
}

.aside-bot-nav h5 {
    text-align: center;
}

.main--lk__h1 {
    margin: 0;
    font-size: 2rem;
}

.lk-grid {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.lk-bottom {
    padding: 16px 0;
}

.lk-body {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
}


.lk-body__left {
    width: 220px;
}

.lk-footer {
    margin: 16px 0;
}

.lk-body__img {
    max-height: 320px;
    border-radius: 8px;
    object-fit: contain;
}

/* LK Player Rating box */
.lk-rating {
    padding: var(--gap);
    border-radius: var(--gf);
    background: var(--ui-bg-100);
    color: var(--color-text);
    width: fit-content;
    margin-bottom: var(--gf);
}

.lk-rating-table {
    display: grid;
    grid-template-columns: 180px auto;
    align-items: center;
    gap: var(--gap);
    /*border: #ce92c1 1px solid;*/
}


.lk-rating__title {
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
    line-height: 1;
}

.lk-rating__title--bold {
    font-weight: bold;
}

.lk-rating__value--s {
    font-size: var(--size-text-note);
}

.lk-rating__value--bold {
    font-weight: bold;
}

.lk-rating__summary::-webkit-details-marker {
    display: none;
}

.lk-rating__summary {
    font-size: var(--size-text-note);
    color: var(--volley-classic-blue);
    text-decoration: dashed underline;
    list-style: none;
    cursor: pointer;
    transition: var(--ui-trans);
    padding: 16px 0 0 0;
}

.lk-rating__summary:hover {
    text-decoration: underline;
}

.lk-rating__details-body {
    margin-top: var(--gap);
}

/* /LK Player Rating box */


.lk-line {
    padding: 8px 0;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}


.lk-line__term {
    color: var(--color-text-grey);
    padding-right: 8px;
    width: 9rem;
}

.lk-player-info {
    /*background: var(--color-bg-light-blue);*/
    padding: 16px;
    border-radius: 8px;
}

.lk-line__def--rating {
    font-weight: bold;
}

.lk-line-club {
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.lk-line-club img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.lk-game-wrapper {
    background: var(--ui-bg-100);
    padding: var(--gap);
    border-radius: var(--gf);
}

.lk-game-line {
    padding: var(--gap);
    border-radius: var(--gf);
    box-shadow: var(--sp-shadow-s);
    margin-bottom: var(--gap);
    background: var(--color-white);
}

.lk-game-line__header {
    line-height: 1;
    padding-bottom: var(--gap);
}

.lk-game-line__header-line1 {
    font-size: 0.9rem;
    color: var(--color-text-grey);
}

.lk-game-line__header-line2 {
    font-size: 1.2rem;
    color: var(--color-text-heading);
    font-family: var(--wf3);
}

.lk-game-line__body {
    display: flex;
    align-items: start;
    gap: 48px;
}

.lk-game-line__footer {
    padding: var(--gap) 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    margin-top: var(--gf);
}

.lk-game-line__body>div:last-child {
    padding-left: var(--gap);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.lk-game-line-body__subtitle {
    color: var(--color-text-heading);
    font-family: var(--wf3);
    padding-bottom: var(--gf);
}

.lk-game-line-body__cards {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.lk-game-line-body-subcard {
    display: flex;
    align-items: center;
    gap: var(--gf);
    min-width: 180px;
    border-radius: var(--gf);
}

.lk-game-line-body-subcard__img {
    border-radius: var(--gf);
    width: 80px;
    height: 100px;
    object-fit: cover;
    object-position: top;
}

.lk-game-line-body-subcard__name {
    font-size: 0.8rem;
    color: var(--color-text-grey);
}

.lk-game-inspector__panel .btn {
    margin-top: var(--gap);
}

.can-remove {
    position: relative;
    outline: 1px dashed rgba(0, 0, 0, 0.1);
}

.can-remove::after {
    opacity: 0;
    content: 'УДАЛИТЬ';
    font-size: 0.7rem;
    position: absolute;
    top: 8px;
    left: 6px;
    background: rgba(0, 0, 0, 0.64);
    color: var(--color-white);
    padding: 4px 8px;
    border-radius: 24px;
}

.can-remove:hover {
    outline: 1px dashed rgba(0, 0, 0, 0.5);
    transition: var(--trans);
}

.can-remove:hover.can-remove::after {
    opacity: 1;
}

/* Club item card */
.club-item {
    display: flex;
    align-items: center;
    gap: var(--gap);
    transition: var(--trans);
    padding: var(--gap);
    background: var(--color-white);
    border-radius: var(--gf);
    border: 1px solid transparent;
    box-shadow: var(--sp-shadow-s);
}

.club-item:hover {
    border: 1px solid var(--color-primary);
}

.club-item__left {
    width: 88px;
    flex-shrink: 0;
}

.club-item__right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.club-item__img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    flex-shrink: 0;
}

.club-item__big-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.club-item__big-icon svg {
    width: 48px;
    height: 48px;
    stroke: var(--color-text);
    fill: none;
}

.club-item__title {
    line-height: 1;
}

.club-item__sex {
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
}

.club-item__type {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
}

.club-item-float-pan {
    position: absolute;
    top: 0;
    right: 0;
}

.club-item--edit {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.club-item__editpan {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.club-item--locked {
    border: 1px dashed rgba(0, 0, 0, 0.1);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.48);
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.club-item--locked:hover {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.club-item--locked .club-item__big-icon svg {
    stroke: var(--color-grey-light);
}

.club-item--locked .club-item__line {
    font-size: var(--size-text-note);
    color: var(--color-grey-light);
}

.club-item--add {
    border: 1px dashed rgba(0, 0, 0, 0.1);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.48);
    flex-direction: column;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    color: var(--ui-color-text-light-grey);
}

.club-item--add:hover {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--color-white);
    color: var(--color-text);
}

.club-item--add .club-item__big-icon svg {
    stroke: var(--color-blue);
}

/* /Club item card */

/* Club page */
.club-box-wrapper {
    background-position: center right 20%;
    background-repeat: no-repeat;
    background-size: 40%;
    margin-top: var(--gf);
}

.club-box {
    display: flex;
    align-items: start;
    gap: var(--gap);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 10%;
}

.club-box--2 {

    border-radius: var(--gf);
    padding: var(--gap);
    display: grid;
    grid-template-columns: 1fr 1fr;

    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
    z-index: 2;
}

.club-box__title-pan {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
}

.club-box__right {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
}

.club-box__logo {
    flex-shrink: 0;

}

.club-box-logo__img {
    object-fit: contain;
    width: 80px;
    height: 80px;
}

.club-box__title-header {
    padding-top: var(--gap);
}

.club-box__h1 {
    padding: 0;
}

.club-box__city {
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
}

.club-box__desc {
    max-width: 600px;
    line-height: 1.4;
}

.club-box__info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gap);
    margin: var(--gap) 0;
}

.club-box__year {
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
}

.club-box__web {
    margin-top: var(--gap);
    font-family: var(--wf3);
    font-size: 1.2rem;
}

.club-box__soc {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 24px;
    margin-top: var(--gf);
}

.club-box__soc-item svg {
    width: 20px;
    height: 20px;
    fill: var(--volley-classic-blue);
}

.club-box__soc-item:hover svg {
    fill: var(--color-text);

}

/* /Club page */

/* Team Intro Card */
.grid-team-intro-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 240px));
    grid-gap: var(--gap);
}

.team-intro-card {
    max-width: 220px;
    border-radius: var(--gf);
    box-shadow: var(--sp-shadow-s);
}

.team-intro-card__img-wrapper {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    width: 100%;
    height: 140px;
    overflow: hidden;
    object-fit: cover;
}

.team-intro-card__img {
    width: 100%;
    height: 100%;
}

.team-intro-card-pan {
    padding: 4px;
    text-align: center;
    font-family: var(--wf3);
    display: flex;
    flex-direction: column;
}

.team-intro-card-pan__year {
    color: var(--color-text-grey);
}

/* /Team Intro Card */

/* Sponsor item card */
.sponsor-item {
    padding: var(--gap);
    border-radius: var(--gf);
    background: transparent;
    transition: var(--trans);
    text-align: center;
}

.sponsor-item:hover {
    box-shadow: var(--bs);
}

.sponsor-item__img {
    height: 120px;
    object-fit: contain;
    max-width: 240px;
}

.sponsor-item__title {
    font-weight: bold;
    font-size: var(--size-heading-xs);
    line-height: 1;
}

.sponsor-item__desc {
    line-height: 1.2;
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
    padding: 4px 0;
}

.sponsor-item__contact {
    font-size: var(--size-text-note);
    padding: var(--gf) 0;
}

/* /Sponsor item card */

/* Courts and stadiums */
.court-item {
    display: flex;
    align-items: center;
    gap: var(--gap);
    transition: var(--trans);
    padding: 0 var(--gf);
    background: var(--color-white);
    border-radius: var(--gf);
    margin: var(--gf) 0;
}

.court-item__left {
    flex-shrink: 0;
}

.court-item__right {
    display: flex;
    align-items: center;
    gap: var(--gf);
    flex-wrap: wrap;
}

.court-item__img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--gf);
    flex-shrink: 0;
}

.court-item__title {
    font-weight: bold;
    font-size: var(--size-heading-xs);
}

.court-item__desc {
    margin: var(--gap) 0;
    line-height: 1.2;
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
}

.court-item__tags {
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.vltag {
    font-size: var(--size-text-note);
    background: var(--color-bg-blue);
    border-radius: var(--gf);
    padding: 4px var(--gf);
}

.court-box__header {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.court-box__img {
    width: 120px;
    object-fit: contain;
    padding: var(--gap) 0;
    flex-shrink: 0;
}

.court-box__title {
    font-weight: bold;
    font-size: var(--size-heading-xs);
}

.court-box__desc {
    margin: var(--gap) 0 32px 0;
    line-height: 1.2;
}

.court-box__contacts-list {
    margin: var(--gf) 0;
    padding: var(--gap);
    background: var(--color-bg-light-blue);
    border-radius: var(--gf);
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

/* /Courts and stadiums */


.competition-list-item {
    border-bottom: 1px solid var(--color-bg-blue);
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: var(--gap);
    align-items: center;
    padding: 16px 2px;
    transition: var(--trans);
    background: transparent;
}

.competition-list-item:hover {
    background: var(--color-bg-light-blue);
}

.competition-list-item__title {
    font-weight: bold;
}

.competition-list-item__date {
    padding-top: 4px;
    color: var(--color-blue);
    font-size: var(--size-text-note);
    display: inline-flex;
    gap: 8px;
}

.competition-list-item__date-separator {
    color: var(--color-text-note);
}

.request-list-item {
    display: grid;
    grid-template-columns: 8fr 2fr 2fr;
    gap: var(--gap);
    padding-bottom: var(--gap);
}

.request-list-item--players {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    padding-bottom: var(--gap);
}

.doc-indicator-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;
    width: 40px;
}

.doc-indicator {
    width: 8px;
    height: 8px;
    background-color: #bbb;
    border-radius: 50%;
}

.doc-indicator- {
    background-color: #e57373;
}

.doc-indicator-active {
    background-color: #43a047;
}

.upload-container img {
    max-width: 200px;
    border-radius: 8px;
}

.teams-list__footer {
    padding: 16px 0;
}

.team-item {
    background: var(--color-bg-light-blue);
    border-radius: 8px;
    margin-bottom: 16px;
}

.team-item__header {
    padding: 8px;
    background: #D5EBFC;
    overflow: hidden;
}

.team-item__body {
    display: inline-flex;
    gap: var(--gap);
    padding: 8px;
}

.team-item__h2 {
    font-size: var(--size-heading-xs);
}

.team-item__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gf);
    margin: 16px;
}

.team-item__img {
    border-radius: 4px;
    height: 140px;
    object-fit: contain;
}

.team-item__name {
    text-align: center;
    font-size: var(--size-heading-xs);
    color: var(--color-text-heading);
}

.team-form {}

.team-form--new-team {
    margin: 16px 0;
    border-radius: 16px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
    padding: 16px;
}

.new-team__body {
    display: grid;
    grid-template-columns: 240px minmax(200px, 1fr);
    gap: var(--gap);
    align-items: center;
}

.choose-player2-wrapper {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 8px;
}

.choose-player2-wrapper__header {
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
}

.choose-player2-wrapper__body {
    overflow-y: scroll;
    height: 200px;
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.player-select-card {
    font-size: var(--size-text-note);
    border-radius: 8px;
    padding: 8px;
    transition: var(--trans);
    text-align: center;
    cursor: pointer;
    margin-bottom: 8px;
    width: 120px;
    height: 180px;
}

.player-select-card:hover {
    background: var(--color-bg-light-blue);
}

.player-select-card__img {
    border-radius: 4px;
    height: 120px;
}

.player-select-card__rating {
    font-weight: bold;
}


.team-form__footer {
    padding: 8px 0 0 0;
    border-top: 1px solid var(--color-border);
}

.trains-wrapper {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: var(--gap);
}

.trains {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trains-line {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    background: var(--color-white);
    transition: var(--trans);
    border-radius: 8px;
}

.trains-line:hover {
    background: var(--color-bg-light-blue);
}

.trains-line__title {
    font-size: var(--size-heading-s);
}

.trains-line__description {
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
}

.calendar {
    width: fit-content;
}

.calendar__title {
    display: flex;
    align-items: center;
    gap: var(--gap);
    font-size: var(--size-heading-s);
    padding: 8px 0;
}

.calendar__header {
    display: flex;
    align-items: center;
    gap: var(--gap);
    font-weight: bold;
    padding: 8px 0;
    font-size: var(--size-heading-s);
}

.calendar__line--title {
    font-weight: bold;
}

.calendar__day {
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: var(--trans);
    box-shadow: none;
    cursor: pointer;
    background: var(--color-white);
    border: 2px solid transparent;
}

.calendar__day:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    background: var(--color-white);
    border: 2px solid var(--color-primary);
}

.calendar__day-current {
    background: var(--color-yellow-light);
}

.calendar__day-current:hover {
    background: var(--color-yellow-light);
}

.calendar__day--inactive {
    color: var(--size-text-note);
    background: var(--color-bg-grey);
    cursor: auto;
}

.calendar__day--inactive:hover {
    border: 2px solid transparent;
    background: var(--color-bg-grey);
    box-shadow: none;
}

.scheduler__header {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: 8px 0;
}

.scheduler__header-name {
    color: var(--color-text-heading);
    font-weight: bold;
}

.scheduler__header-date {
    color: var(--size-text-note);
}

.scheduler-box {
    display: flex;
    gap: var(--gap);
    border-radius: 8px;
}

.scheduler-list {
    background: var(--color-bg-grey);
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    padding: 8px;
}

.scheduler-list__item {
    width: 140px;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: var(--trans);
    box-shadow: none;
    cursor: pointer;
    background: var(--color-white);
    border: 2px solid transparent;
}

.scheduler-list__item:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: var(--color-white);
}

.scheduler-list__item--selected {
    background: var(--color-primary);
    color: var(--color-white);
}

.scheduler-box-right-pan {
    padding: 8px;
}

.scheduler-box-right-pan__time-box {
    display: inline-flex;
    gap: var(--gap);

}

.scheduler-box-right-pan__selected-time {
    border-radius: 8px;
    padding: 4px 8px;
    background: var(--color-bg-light-blue);
}

.scheduler-box-right-pan__footer {
    margin: 16px 0 0 0;

}

.my-reservations {
    padding: 16px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    background: var(--color-white);
    border-radius: 8px;
    position: fixed;
}

.my-reservations__body {
    font-size: var(--size-text-note);
    max-height: 60vh;
    overflow-y: scroll;
}

.my-reservations-item {
    margin: 8px 0;
}

.my-reservations-item__title {
    font-weight: bold;
}

.my-reservations-item__time {
    color: var(--color-text-grey);
}

.my-reservations-item__lenght {
    display: inline-flex;
    gap: var(--gf);
}

.my-reservations-item__lenght-item {
    border-radius: 4px;
    padding: 1px 2px;
    background: var(--color-bg-light-blue);
    font-size: var(--size-text-note);
}

/* /LK */

/* Back pan */
.back-pan__link {
    display: flex;
    align-items: center;
    gap: var(--gap);
    transition: var(--trans);
    color: var(--color-text);
}

.back-pan__link svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-icon-grey);
    fill: none;
}

.back-pan__link:hover svg {
    stroke: var(--color-text);
}

/* /Back pan */

/* Game index image lightbox */
.grid--competitions-on-main {
    column-gap: 24px;
    row-gap: 40px;
}

.game-lightbox__img {
    border-radius: var(--gf);
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: center;
    transition: var(--trans);
}

.game-lightbox__img:hover {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
}

.game-lightbox__title {
    font-family: var(--wf3);
    font-size: var(--size-heading-xs);
    padding: var(--gf) 0;
    text-align: center;
    color: var(--color-text);
    text-transform: uppercase;
    line-height: 1;
}

.game-lightbox__date {
    color: var(--color-grey);
    text-align: center;
}

/* /Game index image lightbox */

/* Event page */
.event-wide-wrapper {
    width: calc(var(--wid) - 32px);
    margin: 0 auto;
    border-radius: var(--gf);
    height: 400px;
    background: linear-gradient(180deg, #ffe3af 0%, #f2b844 100%);
}

.body--sv .event-wide-wrapper {
    background: linear-gradient(180deg, #b3edff 0%, #59bce9 100%);
}

.event-wide {
    padding: var(--gap);
    border-radius: var(--gf);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.event__h1 {
    padding: var(--gf);
    font-family: var(--wf3);
    font-size: var(--size-heading-xl);
    color: var(--color-white);
    text-shadow: 0 2px 8px rgba(153, 97, 41, 0.4);
    text-transform: uppercase;
}

.snow .event__h1 {
    text-shadow: 0 2px 8px rgba(13, 94, 139, 0.4);
}

.event-wide__date {
    font-size: var(--size-heading-xl);
    font-family: var(--wf3);
    align-self: end;
    color: var(--color-white);
    padding: 0 var(--gap);
    text-align: right;
    text-shadow: 0 2px 8px rgba(153, 97, 41, 0.4);
}

.snow .event-wide__date {
    justify-self: end;
    padding: var(--gf) var(--gap);
    background: rgba(98, 152, 200, 0.69);
    border-radius: var(--gap);
}

.event-wide__desc {
    /*background: var(--color-bg-yellow);*/
    padding: 0 var(--gap);
    border-radius: var(--gf);
    margin: var(--gap);
    font-size: var(--size-heading-xs);

    display: flex;
    gap: var(--gap);
    align-items: center;

    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 8px 16px 0 rgb(91, 62, 17);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.body--sv .event-wide__desc {
    box-shadow: 0 8px 16px 0 rgb(14, 98, 172);
}

.event-wide-desc__content {
    color: #000;
}

.event-content-wrapper {
    font-size: var(--size-heading-xs);
    background: #f1f1f2 url("../img/beach-bg.jpg") center no-repeat;
    background-size: cover;

}

.event-content {
    padding: var(--gap) 24px;
    width: 50%;
    line-height: 1.2;
    color: var(--color-white);
}

.event-content__h2 {
    line-height: 1;
}

.event-card {
    margin: var(--gap) 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.event-card__img {
    height: 320px;
}

.event-card__img img {
    object-fit: cover;
    object-position: top;
    border-top-left-radius: var(--gf);
    border-top-right-radius: var(--gf);
    height: 320px;
    width: 100%;
}

.event-card__title {
    padding: var(--gap);
    font-size: var(--size-heading-xs);
    font-family: var(--wf3);
    line-height: 1;
    background: var(--color-bg-blue);
    border-bottom-left-radius: var(--gf);
    border-bottom-right-radius: var(--gf);
    height: 100%;
}

.event-address {
    padding: var(--gap) 0;
    font-size: var(--size-heading-xs);
}

.event-video {
    margin: var(--gap) 0;
}

.event-lines-bg {
    background: url(../img/bg-lines-wide-2.svg) no-repeat center;
    background-size: cover;
}

.event-join-line {
    margin: var(--gap);
    padding: 40px var(--gap);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.event-tickets-button-text-wrapper {
    border-radius: var(--gf);
    margin: var(--gap) auto;
    background: var(--ui-bg-100);
    padding: 24px var(--gf);
    text-align: center;
}

/* /Event page */

/* Alert Line*/
.alert-line-wrapper {
    background: var(--color-bg-yellow);
    margin-bottom: var(--gf);
}

.alert-line {
    width: var(--wid);
    margin: 0 auto;
    padding: 4px;
    text-align: center;
}

/* /Alert Line*/

/* TV Preview */
.tv-prev-list {
    margin: 0;
    padding: var(--gf);
    border-radius: var(--gap);
    list-style: none;
    background: var(--color-bg-blue);
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.tv-prev-link {
    display: flex;
    align-items: center;
    gap: var(--gf);
    padding: var(--gf);
    background: var(--color-bg-blue);
    border-radius: var(--gap);
}

.tv-prev-link:hover {
    background: var(--color-bg-light-blue);
}

.tv-prev-link img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--gf);
}

/* /TV Preview */

/* Popup form */
.request-form-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 767px) {
    .request-form-wrapper {
        overflow-y: scroll;
    }
}

.request-form,
.request-form__complete {
    background: white;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 16px;
    font-family: Arial, Verdana sans-serif;
    /*max-width: 660px;*/
}

.request-form__complete {
    min-width: 300px;
    height: 180px;
    text-align: center;
}

.request-form__complete__description {
    font-weight: bold;
    font-size: 1.2rem;
    margin: 16px 0 48px;
}

.request-form__complete__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.request-form--header {
    color: #063c99;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.request-form--header h1 {
    font-size: 1.4rem;
    margin: 8px 0;
    padding: 0;
}

.close-btn {
    padding: 8px;
    border-radius: 8px;
    background: transparent;
    transition: all 0.02s;
    border: none;
    cursor: pointer;
}

.close-btn:hover {
    background: rgba(0, 0, 0, 0.2);
}

.close-btn svg {
    stroke: #063c99;
}

.close-btn:hover svg {
    stroke: black;
}

.request-form-description {
    color: grey;
    font-size: 0.8rem;
}

.request-form .sf__line {
    margin: 0;
}

.request-form__button {
    margin: var(--gap) 0;
    display: flex;
    gap: var(--gap);
}

/* game actions chart*/
.game-actions-chart {
    display: flex;
    flex: 50px 0;
    /*background: rgba(255,255,255, 1.0);*/
}

.game-actions-chart ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 50px;
}

.chart-button {
    width: 50px;
    text-align: center;
    border: 1px solid #ededed;
    cursor: hand;
    color: #ededed;
}

.chart-button--selected {
    color: #0d0d0d;
    background: rgba(255, 255, 255, 1.0);
}

/* /game actions chart*/

/* Custom scrolls*/
.request-form {
    scrollbar-color: #ccc #ededed;
    scrollbar-width: thin;
}

/* Works on Chrome, Edge, and Safari */
.request-form::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.request-form::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.request-form::-webkit-scrollbar-thumb {
    background-color: #90A0B7;
    border-radius: 8px;
    border: 1px solid #ededed;

}

.request-form::-webkit-scrollbar-thumb:hover {
    background-color: #7a8ca7;
}

/* /Popup form */

/* Social Item */
.social-item {
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.social-item__img {
    width: 24px;
    height: 24px;
}

.mob-socials {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--gap);
    flex-wrap: wrap;
    padding: var(--gap);
}

.mob-socials .social-item {
    flex-direction: column;
    gap: 4px;
    width: 28%;
    text-align: center;
}

.mob-socials .social-item__img {
    fill: var(--color-white);
}

.mob-socials .social-item__title {
    color: var(--color-white);
    font-size: var(--size-text-note);
}

/* /Social Item */

/* Volley Type Mark */
.vl-type-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--size-text-note);
}

.vl-type {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vl-type--cv {
    background-color: var(--volley-classic-red);
}

.vl-type--bv {
    background-color: var(--volley-dark-yellow);
}

.vl-type--sv {
    background-color: var(--sv-light-blue);
}

/* /Volley Type Mark */

/* Sites Circle*/
.mob-sites-circle {
    border-top: 1px solid rgba(255, 255, 255, 0.32);
    margin: var(--gap) auto 0 auto;
    padding: var(--gap) var(--gf);
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.mob-sites-circle a {
    align-items: center;
    text-align: center;
    padding: var(--gf);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.32);
    font-size: var(--size-text-note);
}

.mob-sites-circle a:first-child {
    border-bottom-left-radius: var(--gf);
    border-top-left-radius: var(--gf);
    border-right: none;
}

.mob-sites-circle a:last-child {
    border-bottom-right-radius: var(--gf);
    border-top-right-radius: var(--gf);
    border-left: none;
}

a.mob-sites-circle__item--active {
    background: rgba(255, 255, 255, 0.32);
    color: var(--size-text);
}

/* /Sites Circle*/


/* Mini calendar */
.wide__mcal {
    background: var(--ui-elem-bg);
    height: calc(var(--slide-height) + 48px);
}

.mcal-tab-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    align-items: center;
    justify-content: start;
    background: var(--color-white);
    transition: var(--trans);
    height: 34px;
}

.mcal-tab {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
    background: rgba(255, 255, 255, 1);
    padding: var(--gf) var(--gap);
}

.mcal-tab svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--color-text);
}

.mcal-tab--active {
    background-color: var(--ui-elem-bg);
}

.mcal-tabcontent {
    display: none;
    height: 100%;
}

.mcal-tabcontent--active {
    display: block;
}

.mcal {
    background: var(--ui-elem-bg);
    display: grid;
    /*grid-template-rows: 34px;*/
    /*height: 366px;*/
}

.mcal-header {
    display: flex;
    align-items: center;
    padding: var(--gap) var(--gf);
    font-weight: bold;
    justify-content: space-between;
}

.mcal-body {
    padding: var(--gf);
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 4px;
    row-gap: 4px;
}

.mcal-workday,
.mcal-weekend {
    text-align: center;
    width: 34px;
    line-height: 1;
    font-size: 0.8rem;
    color: var(--color-text);
}

.mcal-weekend {
    font-weight: bold;
}

.mcal-d {
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--gf);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 44px;
    height: var(--ui-size);
    padding: 2px;
    border: 2px solid transparent;
    transition: var(--trans);
    cursor: pointer;
}

.mcal-d:hover {
    border-color: rgba(6, 78, 159, 0.8);
    background: rgba(255, 255, 255, 1);
}

.mcal-d__numb {
    font-weight: bold;
    line-height: 1;
}

.mcal-d__body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.mcal-activity {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mcal-activity--cv {
    background-color: var(--volley-classic-red);
}

.mcal-activity--bv {
    background-color: var(--volley-dark-yellow);
}

.mcal-activity--sv {
    background-color: var(--sv-light-blue);
}

.mcal-d--past {
    opacity: 0.5;
}

.mcal-d--past-month {
    opacity: 0.3
}


.mcal-d--today:hover {
    border-color: rgba(6, 78, 159, 1);
    background: rgba(255, 255, 255, 1);
}

.mcal-d--today {
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.8);

}

.mcal-d--future-month {
    background: rgba(255, 255, 255, 0.4);
}

.mcal-footer {
    display: flex;
    padding: 4px var(--gap);
    align-items: start;
    justify-content: start;
    gap: var(--gap);
}

.mcal-footer-col {
    padding: var(--gf);
}

.mcal-footer__item {
    display: flex;
    align-items: center;
    gap: var(--gf);
    font-size: var(--size-text-note);
}

.mcal-footer__item .mcal-activity {
    width: 8px;
    height: 8px;
}

.btn--mcal {
    border: none;
    background: rgba(255, 255, 255, 0.7);
    height: 34px;
    width: 44px;
    padding: 0 var(--gap);
}

.btn--mcal:hover {
    background: rgba(255, 255, 255, 0.96);
}

.btn--mcal svg {
    width: var(--gap);
    height: var(--gap);
    stroke: var(--color-text);
    fill: none;
}

/* /Mini calendar */

/* Translations line om Main */
.trans-line-body-wrapper {
    position: relative;
    height: 246px;
}

.trans-line-body-wrapper::before {
    position: absolute;
    content: ' ';
    display: block;
    width: 12px;
    height: 240px;
    top: 0;
    left: 0;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    z-index: 2;
}

.trans-line-body-wrapper::after {
    position: absolute;
    content: ' ';
    display: block;
    width: 48px;
    height: 260px;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    z-index: 2;
}

.trans-line-body {
    /*width: calc(100% - (var(--gap) * 2));*/
    display: flex;
    gap: var(--gap);
    justify-content: start;
    align-items: center;
    overflow-x: scroll;
    scroll-behavior: smooth;
    padding: var(--gf) 0;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    scrollbar-width: thin;
}

.trans-line-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.trans-line-body::-webkit-scrollbar-track {
    background: transparent;
    height: 14px;
}

.trans-line-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}

.trans-line-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.trans-line-item {
    background: var(--ui-elem-bg);
    border-radius: var(--gap);
    /*padding: var(--gf) var(--gap);*/
    overflow: hidden;
    width: 348px;
    height: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.trans-line-item--male {
    background: #E4E4EE;
}

.trans-line-item--female {
    background: #F4DFDE;
}

.trans-line-item:first-child {
    margin-left: var(--gf);
}

.trans-line-item:last-child {
    margin-right: 40px;
}

.trans-line-item-header {
    text-align: center;
    padding: var(--gap) var(--gap) 0 var(--gap);
}

.trans-line-item-header__line-1 {
    font-weight: bold;
}

.trans-line-item-header__line-2 {
    font-weight: bold;
}

.trans-line-item-header__line-3 {
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
    line-height: 0.6;
}

.trans-line-item-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: 0 var(--gap);
}

.trans-line-item__club {
    flex-shrink: 0;
}

.trans-line-item__club img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: var(--gf);
    background: var(--color-white);
}

.trans-line-item__info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gf);
}

.trans-line-item-info__time {
    line-height: 1.6;
    font-size: var(--size-text-note);
    width: 80px;
}

.trans-line-item-info__score {
    font-weight: bold;
    font-size: var(--size-heading-m);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
}

.trans-line-item-sets {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    column-gap: var(--gap);
    height: 16px;
}

.trans-line-item-sets__item {
    font-size: var(--size-text-note);
}

.trans-line-item-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    height: 32px;
}

.trans-line__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
    background: transparent;
    padding: var(--gf);
    transition: var(--trans);
    color: var(--color-text);
    text-transform: uppercase;
}

.trans-line__btn:hover {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02));
}

.trans-line__btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-text);
    fill: none;
    transition: var(--trans)
}

.trans-line__btn:hover svg {
    transform: translateX(2px);
}

.trans-days-grid {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
    flex-wrap: wrap;
}

.tdg-item {
    border-radius: var(--gf);
    cursor: pointer;
    background-color: var(--color-white);
    padding: var(--gf) var(--gap);
    border: var(--ui-input-border);
    letter-spacing: .05em;
    color: var(--ui-color-text);
    text-align: center;
    transition: all .3s ease;
    text-transform: capitalize;
}

.tdg-item:hover {
    border: var(--ui-input-border-active);
}

.tdg-item input[type="radio"] {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.tdg-item--active {
    border: var(--ui-input-border-active);
    background-color: var(--ui-input-bg--active);
    color: var(--ui-color-primary);
}

/* /Translations line om Main */

/* Main competitions */
.glb-main-competitions {
    margin: 0 0 32px 0;
}

/* /Main competitions */

/* Main archive */
.glb-main-archive {
    border-radius: var(--gf);
}

.glb-main-archive__header .grid-filter {
    margin: 0 0 var(--gf) 0;
}

.glb-main-archive__body {
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    background: var(--ui-bg-100);
    border-radius: var(--gf);
    margin-bottom: 32px;
}

.glb-main-archive__footer {
    border-radius: var(--gf);
    /*box-shadow: var(--sp-shadow-inset);*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.glb-main-archive__body h3 {
    margin: 0;
    padding: var(--gf) 0;
}

/* /Main archive */

/* Main News */
.main-news {
    padding: var(--gap) var(--gap) 32px var(--gap);
}

.main-news-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
}

.main-news-nav__item {
    padding: 4px var(--gap);
    font-size: var(--size-text-note);
    border-radius: var(--gap);
    background: var(--ui-elem-bg);
    white-space: nowrap;
    flex-wrap: wrap;
    transition: var(--trans);
    cursor: pointer;
}

.main-news-nav__item:hover {
    background: var(--color-primary);
    color: var(--color-bg);
}

.main-news-nav__item:hover a {
    color: var(--color-bg);
}

.main-news-nav__item--active {
    background: var(--color-primary);
    color: var(--color-bg);
}

.main-news-nav__item--active a {
    color: var(--color-bg);
}

.main-news-body {
    padding: var(--gap) var(--gf);
}

.main-news-body__item {
    padding: 12px;
    display: flex;
    border-radius: var(--gf);
    width: fit-content;
}

.main-news-body__item:hover {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.08) 100%);
}

.main-news-footer {
    padding-top: var(--gap);
}

.news-arch-btn {
    width: fit-content;
    border: 1px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
    background: transparent;
    padding: var(--gf) var(--gap);
    transition: var(--trans);
    border-radius: var(--gf)
}

.news-arch-btn:hover {
    background: var(--color-primary);
    color: var(--color-white)
}

.news-arch-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-primary);
    fill: none;
    transition: var(--trans)
}

.news-arch-btn:hover svg {
    transform: translateX(2px);
    stroke: var(--color-white);
}

/* /Main News */

/* News Page */
.news-page-header {
    padding: var(--gap);
    border-radius: var(--gf);
    background: var(--color-white);
    margin: var(--gap) 0;
}

.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: var(--gap);
    row-gap: 24px;
}

.page-news-footer {
    padding: var(--gap);
}

/* /News Page */

/* Main Anti-Doping */
a.ad-banner {
    border-radius: var(--gap);
    padding: var(--gap) 24px;
    background: radial-gradient(66.58% 367.93% at 95.54% 100%, #cf5c5c 0%, #164194 100%);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
    color: var(--color-white);
    transition: var(--trans);
    position: relative;
    text-transform: uppercase;
}

a.ad-banner:hover {
    background: radial-gradient(66.58% 367.93% at 95.54% 100%, #cf5c5c 20%, #164194 100%);
    box-shadow: var(--sp-shadow-s);
}

a.ad-banner:nth-child(2) {
    background: radial-gradient(66.58% 367.93% at 95.54% 100%, #8e49d8 0%, #164194 100%);
}

a.ad-banner:nth-child(2):hover {
    background: radial-gradient(66.58% 367.93% at 95.54% 100%, #8e49d8 20%, #164194 100%);
}

a.ad-banner:nth-child(3) {
    background: radial-gradient(66.58% 367.93% at 95.54% 100%, #5CCF68 0%, #164194 100%);
}

a.ad-banner:nth-child(3):hover {
    background: radial-gradient(66.58% 367.93% at 95.54% 100%, #5CCF68 20%, #164194 100%);
}

a.ad-banner:nth-child(4) {
    background: radial-gradient(66.58% 367.93% at 95.54% 100%, #cf5c7b 0%, #164194 100%);
}

a.ad-banner:nth-child(4):hover {
    background: radial-gradient(66.58% 367.93% at 95.54% 100%, #ec6489 20%, #164194 100%);
}

.ad-banner__text {
    font-family: var(--wf2);
}

.ad-banner__ext {
    position: absolute;
    top: var(--gf);
    right: var(--gf);
    width: 24px;
    height: 24px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: var(--trans);
}

a.ad-banner:hover .ad-banner__ext {
    opacity: 1;
}

/* /Main Anti-Doping */

/* Main Sponsors */
.main-sponsors {
    margin-bottom: 42px;
}

.main-sponsors-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: var(--gap);
}

.main-sponsors-body__item {
    transition: var(--trans);
    filter: grayscale(100%);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

.main-sponsors-body__item:hover {
    filter: none;
}

.main-sponsors-body__item img {
    object-fit: contain;
    height: 64px;
}

/* /Main Sponsors */

/* Main Partners */
.main-partners {
    margin-bottom: 42px;
}

.main-partners-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: var(--gap);
}

.partners-item {
    transition: var(--trans);
    filter: grayscale(100%);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

.partners-item:hover {
    filter: none;
}

.partners-item img {
    object-fit: contain;
    height: 64px;
}

/* /Main Partners */

/* Main Translations */
.page--trans-main {
    padding: var(--gap);
}

.main__h1--trans {
    padding-bottom: var(--gap);
}

.trans-aside {
    background: var(--color-white);
    padding: var(--gf);
    border-radius: var(--gf);
}

.trans-aside-nav {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.trans-aside-nav__item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    line-height: 1;
    padding: var(--gf);
    border-radius: var(--gf);
    transition: var(--trans);
    cursor: pointer;
    font-size: var(--size-text-note);
}

.trans-aside-nav__item:hover {
    background: var(--color-bg-light-blue);
}

.trans-aside-nav__item--active {
    background: var(--color-bg-light-blue);
}

.trans-aside-nav-item__img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.trans-nav-top-section {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
}

.trans-nav-top-section__item {
    padding: var(--gf) var(--gap);
    cursor: pointer;
    transition: var(--trans);
    background: transparent;
    border-top-left-radius: var(--gf);
    border-top-right-radius: var(--gf);
    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    gap: var(--gf);
    color: var(--color-text-grey);
    opacity: 0.8;
}

.trans-nav-top-section-item__img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.trans-nav-top-section__item:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    opacity: 1;
}

.trans-nav-top-section__item--active {
    background: var(--color-white);
    border-color: transparent;
    color: var(--color-text);
    opacity: 1;
}

.trans-nav-top-section__item--active:hover {
    border-color: transparent;
}

.trans-nav-section {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    background: var(--color-white);
    padding: var(--gf);
    border-top-right-radius: var(--gf);
}

.trans-nav-section__item {
    padding: var(--gf) 12px;
    border-radius: var(--gf);
    cursor: pointer;
    transition: var(--trans);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    border: 1px solid transparent;
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
    width: min-content;
    height: 48px;
}

.trans-nav-section__item img {
    display: none;
    width: 32px;
    height: 32px;
}

.trans-nav-section__item:hover {
    color: var(--color-text);
    background: var(--color-bg-light-blue);
    border: 1px solid var(--color-primary);
}

.trans-nav-section__item--active {
    color: var(--color-white);
    background: var(--color-primary);
}

.trans-nav-sub-section {
    background: rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: calc(var(--gap) * 2);
    padding: var(--gf) var(--gap);
    border-bottom-left-radius: var(--gf);
    border-bottom-right-radius: var(--gf);
}

.sp-control-group {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
}

.trans-main-body {
    padding: var(--gap);
    background: var(--ui-bg-100);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: calc(var(--gf) * 2);
}

.trans-main-body--ontv {
    grid-gap: calc(var(--gf) * 6);
}

.tv-channel--header {
    display: flex;
    align-items: center;
    gap: var(--gap);
    font-size: 1.1rem;
}

.tv-channel--header img {
    width: 36px;
    height: 36px;
}

.trans-main-footer div {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: var(--gf);
}

.trans-main-footer span {
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
}

.trans-main-footer .pagination {
    gap: var(--gf);
}

.trans-main-footer .pagination__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px var(--gap);
    border-radius: var(--gf);
    background: transparent;
    transition: var(--trans);
    cursor: pointer;
}

.trans-main-footer .pagination__item:hover {
    background: var(--ui-bg-300);
}

.trans-main-footer .pagination__item--active {
    background: var(--color-primary);
    color: var(--color-white);
}

.trans-main-footer .pagination__item--active:hover {
    background: var(--color-primary-dark);
}

.trans-item {
    display: inline-flex;
    flex-direction: column;
    gap: var(--gf);
    padding: var(--gf);
    background: var(--color-white);
    border-radius: var(--gf);
    transition: var(--trans);
}

.trans-item:hover {
    box-shadow: var(--sp-shadow-m);
}

.trans-item--online {
    position: relative;
}

.trans-item--online::before {
    content: 'В эфире';
    font-size: 11px;
    position: absolute;
    top: -6px;
    right: 8px;
    color: var(--color-white);
    background: var(--volley-classic-red);
    padding: 4px 18px 4px 8px;
    border-radius: var(--gf);
}

.trans-item--online::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 4px;
    transform: translateY(-50%);
    width: var(--gf);
    height: var(--gf);
    border-radius: 50%;
    background-color: var(--color-white);
    animation: pulse 1s infinite alternate;
}

.trans-item__title {
    font-weight: bold;
    line-height: 1.1;
}

.trans-item__teams {
    padding: var(--gf) 0;
    font-size: var(--size-text-note);
}

.trans-item-info {
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
}

.trans-item-body img {
    border-radius: 4px;
}

.tv-item {
    background: var(--color-white);
    padding: var(--gap);
    border-radius: var(--gf);
    color: var(--color-text);
    box-shadow: var(--sp-shadow-s);
    margin-bottom: var(--gf);
}

.tv-item__channel {
    font-weight: bold;
    padding: var(--gf) 0;
}

.tv-item__time {
    color: var(--color-accent);
    font-size: var(--size-text-note);
    padding-bottom: var(--gf);
}

.tv-item__time--online {
    position: relative;
    padding-right: var(--gap);
}

.tv-item__time--online::before {
    content: "Прямая трансляция";
    color: var(--volley-red);
    font-size: 11px;
    position: absolute;
    top: 0;
    right: 16px;
}

.tv-item__time--online::after {
    content: " ";
    position: absolute;
    right: 0;
    top: 30%;
    transform: translateY(-50%);
    width: var(--gf);
    height: var(--gf);
    border-radius: 50%;
    background-color: var(--volley-red);
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
        transform: translateY(-50%) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
    }
}

.tv-item__title {
    line-height: 1.1;
    font-size: var(--size-text-note);
}

/* /Main Translations */

/* GLB Tabs*/
.glbtab-nav {
    display: flex;
    align-items: start;
    justify-content: start;
    gap: var(--gf);
    margin-top: var(--gap);
}

.glbtab {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: var(--gf);
    border-bottom: 2px solid transparent;
    transition: var(--trans);
    padding: var(--gf) var(--gap);
    cursor: pointer;
}

.glbtab:hover {
    border-bottom: 2px solid var(--color-primary);
}

.glbtab--active {
    border-bottom: 2px solid var(--color-primary);
}

.glb-tabcontent {
    display: none;
    padding: var(--gap);
}

.glb-tabcontent--active {
    display: block;
}

/* /GLB Tabs*/

/* Match Center */
.mc__h3 {
    padding: 0 0 var(--gap) 0;
}

.mc-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.mc-header__logo {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-header__logo img {
    object-fit: contain;
}

.mc-header-pan {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    justify-content: space-between;
    align-items: start;
}

.mc-header-pan__line {
    display: flex;
    align-items: start;
    gap: var(--gf);
    font-size: var(--size-heading-xs);
    font-family: var(--wf2);
}

.mc-header__type {
    font-weight: bold;
}

.mc-header__year {
    font-weight: bold;
}

.mc-header__sponsor {
    font-weight: bold;
}

.mc-header-pan__title {
    font-weight: bold;
    font-size: var(--size-heading-s);
    font-family: var(--wf2);
}

.video-pan {
    background: #1E2554;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap);
    flex-wrap: wrap;
    color: var(--color-white);
    border-bottom-left-radius: var(--gf);
    border-bottom-right-radius: var(--gf);
}

.video-pan__btn {
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: var(--trans);
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    font-size: 0.8rem;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
}

.video-pan__btn:hover {
    border-color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, 1);
}

/* Team Stat Table */
.ts-table {
    width: 100%;
    border: var(--ts-table-border);
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1;
    transition: var(--trans);
    background: var(--color-white);
}

.stat-table-2,
.stat-table-3,
.stat-table-4,
.stat-table-5,
.stat-table-6 {
    text-align: center;
}

.ts-table td {
    padding: var(--gf);
    border-right: var(--ts-table-border);
    border-bottom: var(--ts-table-border);
}

.ts-table td:last-of-type {
    border-right: none;
}

.ts-table__grey-cell {
    color: #bebebe;
}

td.ts-table__td-lc {
    border-left: 2px solid #0b0b0b;
}

.ts-table__bt {
    border-top: 2px solid #0b0b0b;
}

.ts-table__active-cell {
    /*font-weight: bold;*/
    color: var(--color-accent);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    outline: 1px solid var(--color-accent);
    font-size: 0.7rem;
}

.ts-table thead td {
    font-weight: bold;
}

.ts-table tbody tr:nth-child(even) {
    background: #f2f2f2;
}

.ts-table tbody tr:hover {
    background: rgba(155, 207, 239, 0.2);
}


.ts-table tbody td:not(:nth-child(-n + 2)) {
    text-align: center;
}

.ts-table-container {
    max-width: 100%;
}

.ts-table-head {
    position: sticky;
    top: 58px;
    background-color: var(--color-white);
    box-shadow: 0 2px 0 0 #d6d6d6;
}

.ts-table-column--selected {

    background: var(--ui-input-bg--active);
}

@media (max-width: 768px) {

    .ts-table-container {
        border: 1px solid rgba(0, 0, 0, 0.4);
        overflow-x: auto;
        width: calc(100vw - 24px);
    }

    .ts-table-container-info-layer {
        position: relative;
        margin: 36px 0;
    }

    .ts-table-container-info-layer::before,
    .ts-table-container-info-layer::after {
        display: flex;
        align-items: center;
        content: 'Доступна прокрутка';
        position: absolute;
        top: -34px;
        right: 0;
        background: url("../img/icons/icon-hor-scroll.svg") no-repeat right;
        background-size: contain;
        height: 32px;
        padding-right: 38px;
        z-index: 2;
        color: var(--color-text-grey);
        font-size: var(--size-text-note);
        overflow: auto;
    }

    .ts-table-container-info-layer::after {
        top: auto;
        bottom: -34px;
    }

    .ts-table {
        position: relative;
        border: none;
    }

    .ts-table-head {
        position: relative;
        top: 0;
    }

    .ts-table thead tr:first-child td:first-child {
        position: sticky;
        z-index: 1;
        left: 0;
        background-image: linear-gradient(to right, #fff 98%, #d6d6d6 2px);
        width: 80px;
        border-right: none;
        border-bottom: 2px solid #d6d6d6;
    }

    .ts-table tbody td:nth-child(1) {
        width: 20px;
        position: sticky;
        z-index: 1;
        left: 0;
        border-right: none;
        background-image: linear-gradient(to right, #f2f2f2 31px, #d6d6d6 1px);
        padding: 4px;
        text-align: center;

    }

    .ts-table tbody td:nth-child(2) {
        width: 60px;
        position: sticky;
        z-index: 1;
        left: 26px;
        border-right: none;
        background-image: linear-gradient(to right, #f2f2f2 98%, #d6d6d6 2px);
    }

    .ts-table tbody tr:nth-last-child(odd) td:nth-child(1) {
        background-image: linear-gradient(to right, #fff 31px, #d6d6d6 1px);
    }

    .ts-table tbody tr:nth-last-child(odd) td:nth-child(2) {
        background-image: linear-gradient(to right, #fff 98%, #d6d6d6 2px);
    }
}

/* /Team Stat Table */

/* Team Stat Simple Table */
.tss-table {
    width: 100%;
    border: var(--ts-table-border);
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1;
    transition: var(--trans);
    background: var(--color-white);
    text-align: center;

}

.tss-table td {
    padding: 4px var(--gf);
    border-right: var(--ts-table-border);
    border-bottom: var(--ts-table-border);
}

.tss-table td:last-of-type {
    border-right: none;
}

.tss-table__td-br {
    border-right: var(--ts-table-border) !important;
}

.tss-table__td-bb {
    border-bottom: var(--ts-table-border) !important;
}

.tss-table__td-bt {
    border-top: var(--ts-table-border) !important;
}

/* /Team Stat Simple Table */

/* Clear Table */
.clr-table {
    width: 100%;
    border: 1px solid transparent;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 0.8rem;
    line-height: 1;
    transition: var(--trans);
    background: var(--color-white);
}

.clr-table td {
    padding: var(--gf);
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.clr-table td:last-of-type {
    border-right: none;
}

.tss-note {
    padding: var(--gap);
    font-size: var(--size-text-note);
    border: var(--ts-table-border);
}

.tss-note__line {
    display: flex;
    align-items: center;
    gap: var(--gf);
    padding: 0 0 var(--gf) 0;
}

.tss-note-line__term {
    font-weight: bold;
    width: 2.2rem;
    white-space: nowrap;
}

.tss-note-line__def {
    color: var(--color-text-note);
}

/* /Team Stat Simple Table */

/* Scrollable Table */
.s-table {
    width: 100%;
    border: var(--ts-table-border);
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: var(--trans);
    background: var(--color-white);
}

.main-content .s-table {
    border: var(--ts-table-border);
}

.s-table td {
    padding: var(--gf);
    border-right: var(--ts-table-border);
    border-bottom: var(--ts-table-border);
}

.main-content .s-table td {
    padding: var(--gf);
    border-right: var(--ts-table-border);
    border-bottom: var(--ts-table-border);
}

.s-table td:last-of-type {
    border-right: none;
}

.s-table thead tr:last-child td {
    border-bottom: 2px solid #d6d6d6;
}

.main-content .s-table thead tr:last-child td {
    border-bottom: 2px solid #d6d6d6;
}

.s-table thead td {
    font-weight: bold;
}

.s-table tbody tr:nth-child(even) {
    background: #f2f2f2;
}

.s-table--round tbody tr:nth-child(even) {
    background: var(--color-white);
}

.s-table tbody tr:hover {
    background: rgba(155, 207, 239, 0.2);
}

.s-table tbody td:not(:nth-child(-n + 2)) {
    text-align: center;
}

.s-table-container {
    max-width: 100%;
}

.s-table--round tr {
    background: var(--color-white);
}

.round-0 {
    background-color: var(--color-white);
}

.s-table--round tbody .round-1:nth-child(even),
.s-table--round tbody .round-1 {
    background-color: rgba(232, 232, 232, 0.6);
}

.s-table--round tbody tr:hover {
    background: rgba(155, 207, 239, 0.2);
}

.s-table__flex-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: var(--gap);
}

.s-table__total-score {
    font-weight: bold;
}

.s-table__rounds-score {
    font-size: 10px;
    color: #939393;
}

@media (max-width: 768px) {

    .s-table-container {
        border: 1px solid transparent;
        overflow-x: auto;
        width: calc(100vw - 24px);
        transition: var(--trans);
    }

    .s-table-container:hover {
        border: var(--ui-input-border-active);
    }

    .s-table-container-info-layer {
        position: relative;
        margin: 36px 0;
    }

    .s-table-container-info-layer::before,
    .s-table-container-info-layer::after {
        display: flex;
        align-items: center;
        content: 'Доступна прокрутка';
        position: absolute;
        top: -34px;
        right: 0;
        background: url("../img/icons/icon-hor-scroll.svg") no-repeat right;
        background-size: contain;
        height: 24px;
        padding-right: 30px;
        z-index: 2;
        color: var(--ui-color-text-light-grey);
        font-size: 0.7rem;
        overflow: auto;
    }

    .s-table-container-info-layer::after {
        top: auto;
        bottom: -34px;
    }

    .s-table {
        position: relative;
        border: none;
    }

    .s-table thead tr:first-child td:first-child {
        position: sticky;
        z-index: 1;
        left: 0;
        background-image: linear-gradient(to left, #d6d6d6 1px, #fff 2px);
        background-position: right;
        width: 80px;
        border-right: none;
        border-bottom: 2px solid #d6d6d6;
    }

    .s-table tbody td:nth-child(1) {
        position: sticky;
        z-index: 1;
        left: 0;
        border-right: none;
        background-image: linear-gradient(to left, #d6d6d6 1px, #fff 2px);
        background-position: right;
        padding: 4px;
        text-align: center;

    }

    .s-table tbody tr:nth-last-child(odd) td:nth-child(1) {
        /*background-image: linear-gradient(to right, #f2f2f2 24px, #d6d6d6 1px);*/
    }

    .s-table tbody tr:nth-last-child(odd) td:nth-child(2) {
        /*background-image: linear-gradient(to right, #f2f2f2 98%, #d6d6d6 2px);*/
    }
}

/* /Scrollable Table */
.ginfo-details {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--gf);
    margin-bottom: var(--gap);
    box-shadow: var(--sp-shadow-xs);
}

.ginfo-summary {
    list-style: none;
    cursor: pointer;
    padding: var(--gf) var(--gap);
}

.ginfo-summary::-webkit-details-marker {
    display: none;
}

.ginfo-summary-title {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
}

.ginfo-summary__body {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: var(--gap);
    background: var(--ui-bg-100);
}

.ginfo-summary-title__icon {
    width: 24px;
    height: 24px;
    stroke: var(--color-primary);
    transform: rotate(-90deg);
    transition: var(--trans);
    fill: none;
    flex-shrink: 0;
}

.ginfo-details[open] .ginfo-summary-title__icon {
    transform: rotate(0deg);
    transition: var(--trans);
}

.ginfo-summary-title__h {
    font-size: 1.1rem;
    font-weight: bold;
    font-family: var(--wf2);
    padding: 0;
    margin: 0;
}

.ginfo-card-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.ginfo-card {
    width: 100%;
    min-height: 64px;
    background: var(--color-white);
    border: 1px solid transparent;
    border-radius: var(--gf);
    /*padding: var(--gf);*/
    color: var(--color-text);
    /*filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16));*/
    transition: var(--trans);
    box-shadow: var(--sp-shadow-s);
}

.ginfo-card:hover {
    border: 1px solid var(--color-primary);
    cursor: pointer;
    box-shadow: var(--sp-shadow-m);
}

.ginfo {
    padding: var(--gf) var(--gap);
}


.skeleton .ginfo div>div * {
    opacity: 0;
}

.skeleton .ginfo>div>div {
    animation: skeleton-loading 2s linear infinite;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
}

.skeleton .ginfo-online-tag::before,
.skeleton .ginfo-online-tag::after {
    display: none;
}

.skeleton .ginfo>.ginfo-line:last-child {
    margin-top: 8px;
    animation: skeleton-loading 2s linear infinite;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
}

.skeleton .ginfo>.ginfo-line:last-child div {
    opacity: 0;
}

@media (max-width: 768px) {
    .ginfo-summary-title__h {
        font-size: 0.9rem;
    }

    .skeleton .ginfo>.ginfo-line:last-child {
        display: none;
    }

    .skeleton .show-on-mobile>.ginfo-line {
        margin-top: 8px;
    }
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.ginfo-line {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
    gap: var(--gap);
}

.ginfo-line--colors {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gf);
    justify-items: center;
}

.ginfo-box {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
}

.ginfo-card .ginfo-box {
    grid-template-columns: 1fr 450px 1fr;
}

.ginfo-team {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
}

.ginfo-card .ginfo-team--a {
    justify-content: end;
}

.ginfo-card .ginfo-team--b {
    justify-content: start;
}

.ginfo-team__color {
    width: var(--gf);
    height: 2rem;
    border-radius: 4px;
}

.ginfo-team__color--outline {
    outline: 1px solid rgba(0, 0, 0, 0.16);
}

.ginfo-team__shirt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
}

.ginfo-team__shirt svg {
    width: 24px;
    height: 24px;
    fill: white;
    /*stroke: rgba(0,0,0,0.16);*/
    stroke: rgba(0, 0, 0, 0.3);
}

.ginfo-team__title {
    font-size: var(--size-heading-m);
    line-height: 1;
    font-family: var(--wf3);
    padding-bottom: 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.ginfo-team--a .ginfo-team__title {
    align-items: end;
}

.ginfo-card .ginfo-team__title {
    font-size: var(--size-heading-s);
}

.ginfo-team-title__city {
    margin-top: 4px;
    font-size: 1.2rem;
    color: var(--color-text-grey);
}

.ginfo-team__logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.ginfo-data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
}

.ginfo-card .ginfo-data {
    justify-content: space-between;
}

.ginfo-data__score {
    padding: 0 24px 0.3rem 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--size-heading-xl);
    font-weight: bold;
    font-family: var(--wf3);
    color: var(--color-text-heading);
}

.ginfo-rounds__sep {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: var(--wf3);
    color: var(--color-text-heading);

    padding: 0 8px 0.5rem 8px;
    font-size: var(--size-heading-s);
}

.ginfo-rounds-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ginfo-rounds {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
    border-left: 1px solid rgba(0, 0, 0, 0.24);
}

.ginfo-rounds:first-child {
    border-left: none;
}

.ginfo-rounds--active {
    color: var(--volley-classic-blue);
    cursor: pointer;
    transition: var(--trans);
}

.ginfo-rounds--active:hover {
    background: rgba(155, 207, 239, 0.1);
}

.ginfo-rounds__numb {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 4px 8px;
    font-weight: bold;
}

.ginfo-rounds__score {
    text-align: center;
    padding: 4px 8px;
    white-space: nowrap;
    font-size: var(--size-text-note);
}

.ginfo-gold-set {
    background: var(--volley-yellow);
    border-radius: 24px;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    margin: 0 auto;
    color: var(--color-text);
    padding: 4px 12px;
}

.ginfo-gold-set__score {
    font-weight: bold;
}

.ginfo-gold-set__title {
    text-transform: capitalize;
}

.ginfo-online-tag {
    position: relative;
}

.ginfo-online-tag::before {
    content: "Эфир";
    color: var(--volley-red);
    font-size: 11px;
    position: absolute;
    top: 10px;
    right: -52px;
}

.ginfo-online-tag::after {
    content: " ";
    position: absolute;
    right: -20px;
    top: 16px;
    transform: translateY(-50%);
    width: var(--gf);
    height: var(--gf);
    border-radius: 50%;
    background-color: var(--volley-red);
    animation: online-pulse 1s infinite alternate;
}

@keyframes online-pulse {
    0% {
        opacity: 0.5;
        transform: translateY(-50%) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
    }
}

.mc-video {
    width: 56%;
    margin: 0 auto;
}

.mc-free-video {
    /*background: var(--ui-bg-200);*/
    padding: 4px;
    border-radius: var(--gf);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.mc-free-video #my-player {
    max-width: 590px;
    max-height: 320px;
    aspect-ratio: 16 / 9;
    border-radius: var(--gf);
}

.mc-free-video-pan svg {
    stroke: rgba(255, 255, 255, .8);
}

.mc-free-video-pan {
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    padding: var(--gf);
    box-shadow: var(--sp-shadow-inset);
    border-radius: var(--gf);
    margin: var(--gf);
    background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706, #FA8BFF);
    background-size: 600% 100%;
    animation: free-video-pan 24s linear infinite;
    animation-direction: alternate;
}

.player-warning {
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
    padding: 4px 0;
    text-align: right;
}

@keyframes free-video-pan {
    0% {
        background-position: 0
    }

    100% {
        background-position: 100%
    }
}

.team-pan {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
}

.team-pan__title {
    font-family: var(--wf3);
    color: var(--color-text-heading);
    font-size: var(--size-heading-xs);
}

.team-pan__color {
    width: var(--gf);
    height: 2rem;
    border-radius: 4px;
}

.team-pan__logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.cards-list ul {
    list-style: none;
    padding: 0;
}

.team-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap);
    padding: var(--gf);
    border-radius: var(--gf);
    background: transparent;
    transition: var(--trans);
    width: 220px;
}

.team-card:hover {
    background: var(--color-bg-blue);
}

.team-card__img {
    width: 96px;
    height: 128px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: contain;
}

.team-card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;

}

.team-card-info__name {
    color: var(--color-text-heading);
    font-family: var(--wf3);
    line-height: 1;
}

.team-card-info__number {
    color: var(--color-text-heading);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: var(--size-text-note);
    margin-top: 4px;
}

.team-card-info__age {
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
}

.team-card-info__height {
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
}

.team-card-info__role {
    font-size: var(--size-text-note);
}

/* /Match Center */

/* MC Game Statistic */
.stat-details {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--gap);
    margin-bottom: var(--gap);
    box-shadow: var(--sp-shadow-xs);
    transition: var(--trans);
}

.stat-details:hover {
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: var(--sp-shadow-s);
}

.stat-details:last-of-type {
    margin-top: 0;
}

.stat-summary::-webkit-details-marker {
    display: none;
}

.stat-summary {
    cursor: pointer;
    list-style: none;
    padding: var(--gap);
    text-align: center;
    font-family: var(--wf3);
    font-size: var(--size-heading-xs);
}

.stat-details__body {
    padding: 0 var(--gap) var(--gap) var(--gap);
}

.stable {
    width: 60%;
    border-radius: var(--gf);
    margin: 0 auto;
}

.stable-header,
.stable-line {
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    gap: var(--gap);
    align-items: center;
    justify-content: center;
    padding: var(--gf);
}

.stable-line {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.stable-header__col {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--gap);
}

.stable-header__col:last-child {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
}

.stable-header-col__title {
    font-family: var(--wf3);
    color: var(--color-text-heading);
}

.stable-header-col__logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}

.stable-header__col--center,
.stable-line__col--center {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wf3);
    color: var(--color-text-heading);
}

.stable-line__col {
    display: flex;
    align-items: center;
    justify-items: start;
    gap: var(--gap);
    text-align: center;
    line-height: 1;
}

.stable-progress-wrapper {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: var(--gap);
    border-radius: var(--gf);
    background: var(--ui-bg-100);
}

.stable-line__col:last-child .stable-progress-wrapper {
    justify-content: start;
}

.stable-progress {
    height: var(--gap);
    border-radius: var(--gf);
    background: var(--ui-bg-300);
}

.stable-progress--active {
    background: var(--color-primary);
}

.stable-point-box {
    padding: var(--gf);
    background: var(--ui-bg-200);
    border-radius: var(--gf);
    font-weight: bold;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-grey);
}

.stable-point-box--active {
    color: var(--color-primary);
}

/* /MC Game Statistic */

/* Game Story */
.gstory {
    width: fit-content;
    margin: 0 auto;
}

.gstory-line {
    padding: var(--gf);
    display: grid;
    grid-template-columns: 92px 80px 92px;
}

.gstory-heading {
    grid-column: 1/-1;
    text-align: center;
    font-size: 1.4rem;
    font-family: var(--wf3);
    color: var(--color-text-heading);
    padding: var(--gf);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.gstory-item {
    display: grid;
    justify-items: center;
    justify-content: end;
    align-items: center;
    gap: var(--gf);
    grid-template-columns: 42px 42px;
}

.gstory-item:last-child {
    justify-content: start;

}

.gstory-item__point {
    width: 42px;
    height: 24px;
    border-radius: var(--gf);
    background: var(--ui-bg-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.gstory-item__ball {
    width: 24px;
    height: 24px;
    background: url("../img/icons/round-icon.svg") no-repeat;
    object-fit: contain;
    margin: 0 auto;
}

.gstory-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
    font-family: var(--wf3);
    color: var(--color-text-heading);
}

.gstory-center__sep {
    padding-bottom: 0.2rem;
    color: rgba(0, 0, 0, 0.2);
}

/* /Game Story */

/* Person Card */
.person-card {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
    margin-bottom: var(--gap);
    padding: var(--gap);
    background: var(--color-white);
    box-shadow: var(--sp-shadow-s);
    border-radius: var(--gf);
}

.person-card__img {
    flex-shrink: 0;
    width: 160px;
    height: 200px;
    border-radius: var(--gf);
    object-fit: cover;
}

.person-card__name {
    font-family: var(--wf3);
    font-size: 1rem;
    color: var(--color-text-heading);
    text-transform: uppercase;
}

.person-card__desc {
    padding-top: var(--gf);
    color: var(--color-text-grey);
}

/* /Person Card */

/* Sroll Up Btn */
.scrollup-btn {
    display: none;
    align-items: center;
    justify-content: center;
    transition: var(--trans);
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    bottom: 100px;
    right: 60px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.73);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.42);
}

.scrollup-btn:hover {
    box-shadow: 0 4px 48px rgba(0, 0, 0, 0.2);
}

.scrollup-btn img {
    transition: var(--trans);
    opacity: 0.8;
    width: 24px;
    height: 24px;
}

.scrollup-btn:hover img {
    transform: translateY(-4px);
    opacity: 1;
}

/* /Sroll Up Btn */

/* TimeZone */
.timezone-pan {
    display: flex;
    align-items: center;
    gap: var(--gf);
    margin: var(--gf) 0;
    flex-wrap: wrap;
    padding: 4px var(--gap);
    border-radius: var(--gap);
    width: fit-content;
}

.timezone-pan img {
    width: 32px;
}

.result-card__time--time-zone {
    font-size: 0.8rem;

    padding: 4px var(--gf);
    border-radius: var(--gap);
}

/* /TimeZone */


/* GLB News */
.body--glb-news {
    background: var(--ui-bg-100);
}

.page--glb-news {
    background: var(--ui-bg-100);
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: var(--gap);
    width: var(--wid);
    margin: var(--gap) auto;
}

.main--news {
    background: var(--color-white);
    border-radius: var(--gap);
}

.main-content--news {
    padding: var(--gap);
}

.glb-news__title {
    font-size: 1.4rem;
    line-height: 1;
    padding: var(--gf) 0;
}

.glb-news-header-pan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--gap);
    row-gap: var(--gf);
    padding: 0 0 var(--gap) 0;
}

.glb-news__date,
.glb-news__tag {
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
}

.glb-news__img {
    border-radius: var(--gf);
}

.glb-news-aside {
    background: var(--color-white);
    padding: var(--gap) 24px;
    border-radius: var(--gap);
}

.glb-news-aside__h3 {
    padding: var(--gf) 0;
    font-size: 1.1rem;
}

.glb-news-aside__list {
    padding: var(--gf) 0;
}

@media screen and (max-width: 1024px) {
    .page--glb-news {
        grid-template-columns: 1fr;
    }
}

/* /GLB News */

/* GLB News Card */
.main-news-section {
    margin: 0 0 32px 0;
}

.glb-news-card {
    display: block;
    padding: var(--gf);
    background: var(--color-white);
    border-radius: calc(var(--gf) + 4px);
    transition: var(--trans);
}

.glb-news-card:hover {
    box-shadow: var(--sp-shadow-s);
}

.glb-news-card__img {
    border-radius: var(--gf);
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    transition: var(--trans);
}

.glb-news-card__title {
    font-family: var(--wf3);
    padding: var(--gf) 0;
    color: var(--color-text);
    text-transform: uppercase;
    line-height: 1;
}

.glb-news-card:hover .glb-news-card__title {
    color: var(--color-primary);
}

.glb-news-card__desc {
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
    line-height: 1.2;
    padding-bottom: var(--gf);
}

.glb-news-card__footer {
    padding: 0 0 var(--gf) 0;
    display: flex;
    align-items: start;
    gap: var(--gap);
    flex-wrap: wrap;
    row-gap: 4px;
}

.glb-news-card__tag {
    color: var(--color-grey);
    font-size: 0.7rem;
}

.glb-news-card__date {
    color: var(--color-grey);
    font-size: 0.7rem;
}

/* /GLB News Card */

/* GLB News Line Card */
.glb-news-line-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gf);
    padding: 0 0 var(--gap) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: var(--gap);
}

.glb-news-line-card:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.glb-news-line-card__img {
    flex-shrink: 0;
    border-radius: var(--gf);
    width: 120px;
    object-fit: cover;
    object-position: center;
    transition: var(--trans);
}

.glb-news-line-card__title {
    font-family: var(--wf3);
    padding: var(--gf) 0;
    color: var(--color-text);
    text-transform: uppercase;
    line-height: 1;
}

.glb-news-line-card:hover .glb-news-line-card__title {
    color: var(--color-primary);
}

.glb-news-line-card__footer {
    padding: 0 0 var(--gf) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    row-gap: 4px;
    column-gap: var(--gf);
}

.glb-news-line-card__tag {
    color: var(--color-grey);
    font-size: 0.7rem;
}

.glb-news-line-card__date {
    color: var(--color-grey);
    font-size: 0.7rem;
}

/* /GLB News Line Card */

/* document layout*/
.document--content ol {
    list-style: none;
    counter-reset: li;
    padding: 0;
}

.document--content>ol>li {
    padding-top: 1.1em;
}

.document--content li:before {
    counter-increment: li;
    content: counters(li, ".") ". ";
}

.document--content .women {
    width: 25em;
    margin-top: 1.25em;
}

.document--content .men {
    width: 25em;
    margin-top: 0.6em;
    margin-bottom: 1.25em;
}

.document--content .like {
    text-align: center;
}

.document--content .groups-name {
    text-align: center;
    font-weight: 700;
}

.document--content .groups-name-women-men {
    text-align: center;
    font-weight: 600;
}

.document--content .groups-a-b {
    display: flex;
    justify-content: center;
    gap: 1.8em;
    margin-top: 1.25em;
}

.document--content .b {
    text-align: right;
}

.document--content .fund {
    text-align: center;
    font-weight: 600;
}

.document--content .prize-money {
    text-align: center;
    margin-top: 1.25em;
}

.document--content .navigation-line {
    font-size: 1.2em;
}

.document--content h2 {
    display: inline;
    text-transform: uppercase;
}

.document-team-card {
    background: var(--ui-bg-100);
    padding: var(--gap) var(--gf);
    border-radius: var(--gf);
    margin-bottom: 1.1em;
}

.document-prize-card {
    background: var(--ui-bg-100);
    padding: var(--gap) var(--gf);
    border-radius: var(--gf);
    margin-bottom: 1.1em;
}

/* /document layout*/

/* doc-v2 */
.doc-v2 h2 {
    display: inline;
    text-transform: uppercase;
}

.doc-v2 h3 {
    display: inline;
    text-transform: uppercase;
}

.doc-v2 ol {
    padding: 1.1em 0;
}

.doc-v2 ol {
    list-style: none;
    counter-reset: li;
}

.doc-v2 li:before {
    counter-increment: li;
    content: counters(li, ".") ". ";
    font-family: var(--wf3);
}

.doc-v2 ol>li:has(h2):before {
    font-size: 1.5rem;
}

.doc-v2 ul {
    padding-left: 0;
    list-style-type: none;
}

.doc-v2 ul li:before {
    content: "-";
}

.doc-v2 ul {
    list-style: none;
    counter-reset: li;
}

/* /doc-v2*/

/* sp5form */
.sp5form__list {
    display: grid;
}

.sp5form__list--item {
    border: 1px solid #ededed;
    border-radius: 8px;
    min-width: 100%;
    padding: 8px;
    margin-bottom: 4px;
    cursor: pointer;
}

.sp5form__list--item:hover {
    background-color: #ededed;
}

.sp5form__list--item.selected {
    border-color: var(--color-primary);
}

.sf__line--description {
    font-size: 0.8rem;
    margin-top: 4px;
}

.sp5link-important a {
    text-decoration: underline;
}

.sp5form--footer {
    display: flex;
    gap: var(--gap);
    margin-top: var(--gap);
}

/* /sp5form */

/* Crumbs -----------------------------*/
.breadcrumbs {
    font-size: var(--size-text-note);
    line-height: 120%;
    color: var(--color-text-grey);
    margin: 16px 0 8px 0;
    padding: 0;
    display: inline-flex;
    gap: var(--gf);
}

.breadcrumbs a {
    color: var(--color-link);
}

.breadcrumbs a:hover {
    color: var(--color-text);
}

.breadcrumbs a:not(:last-child):after {
    content: '/';
    margin: 0 0 0 6px;
    color: var(--color-text-grey);
}

@media screen and (max-width: 767px) {
    .breadcrumbs {
        margin-top: var(--gap);
    }
}

/* /Crumbs -----------------------------*/

/* Best of Statistics */
.bos-line {
    padding: var(--gap);
    border-radius: var(--gf);
    margin: var(--gap) 0;
}

.bos-line--male {
    background: var(--volley-grey-blue) url(../img/vl-man-stroke--white.svg) no-repeat center right;
    background-size: contain;
}

.bos-line--female {
    background: var(--volley-grey-blue) url(../img/vl-woman-stroke--white.svg) no-repeat center right;
    background-size: contain;
}

.bos-line__header {
    font-family: var(--wf3);
    line-height: 1;
    font-size: var(--size-heading-s);
    margin-bottom: var(--gap);
    padding: 0 0 var(--gf) 0;
}

.bos-line__body {
    display: flex;
    gap: var(--gap);
}

.bos-cell {
    border-radius: var(--gf);
    padding: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.73) 0, transparent 40%, transparent);
}

.bos-cell__header {
    font-family: var(--wf3);
    line-height: 1;
    font-size: 1.24rem;
    padding: var(--gf) var(--gf) 12px var(--gap);
    color: var(--color-primary);
}

.bos-cell__body .player-card {
    margin: 0;
}

/* /Best of Statistics */

/* Print Report */
.body--print .ginfo-team__logo {
    width: 48px;
    height: 48px;
}

.body--print .ginfo-team__title {
    font-size: 1.1rem;
}

.body--print .ts-table__active-cell {
    height: 16px;
    font-size: 0.9rem;
    border-radius: 4px;
}

.prn-header {
    background: var(--volley-classic-blue);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: var(--gf) 24px;
}

.prn-header__left {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
}

.prn-header-logo {
    height: 32px;
}

.prn-header-title {
    font-size: 1.4rem;
    font-weight: bold;
}

.prn-header__pan a {
    text-decoration: underline;
    color: var(--color-white);
    font-size: 1.2rem;
}

.prn-title-pan {
    display: flex;
    gap: var(--gf);
    align-items: center;
    justify-content: space-between;
    padding: var(--gf);
}

.prn-title-pan__left {
    display: flex;
    gap: var(--gf);
    align-items: center;
    justify-content: start;
}

.prn-title-pan__right {
    display: flex;
    gap: var(--gf);
    align-items: center;
    justify-content: start;
    color: #666666;
}

@media print {
    body {
        margin: 0 2px;
    }

    @page {
        margin: 0;
    }

    .ts-table,
    .tss-table {
        font-size: 9px;
    }

    .ts-table td {
        padding: 2px;
    }

    .clr-table td {
        padding: 2px;
    }

    .ts-table-container {
        width: 100%;
        overflow: auto;
    }

    .ts-table-container-info-layer {
        margin: 0;
    }

    .prn-header {
        background: var(--volley-classic-blue) !important;
        -webkit-print-color-adjust: exact;
        padding: 4px 8px;
    }

    .prn-header-logo {
        height: 16px;
    }

    .prn-header-title {
        font-size: 14px;
    }

    .prn-header__pan a {
        display: none;
    }

    .ts-table-container-info-layer::before,
    .ts-table-container-info-layer::after {
        display: none;
    }

    .clr-table {
        font-size: 9px;
    }

    .body--print {
        display: block;
    }

    .body--print .ts-table__active-cell {
        font-size: 9px;
        height: auto;
        outline: 1px solid #9BB5D8;
        outline: 0.5px solid #9BB5D8;
    }

    .ginfo-rounds {
        font-size: 9px;
    }

    .ginfo-data__score {
        font-size: 28px;
    }

    .ginfo-team--a {
        justify-self: end;
    }

    .ginfo-team--b {
        justify-self: start;
    }

    .ginfo-team-title__city {
        font-size: 10px;
    }

    .prn-title-pan {
        padding: var(--gf) var(--gf) 0 var(--gf);
    }

    .prn-title-pan__right {
        font-size: 10px;
    }

    .prn-title-pan__left {
        font-size: 10px;
    }

    .tss-note {
        font-size: 9px;
    }
}

/* /Print Report */

/* RTE */
.rte-iblock {
    display: grid;
    grid-template-columns: auto auto;
    gap: 16px;
    padding: 16px;
}

.rte-iblock div {
    width: fit-content;
}

.rte-iblock img {
    max-width: 20vw;
}

@media (max-width: 768px) {
    .rte-iblock {
        grid-template-columns: auto;
    }

    .rte-iblock img {
        max-width: 100%;
    }
}

/* /RTE */


/* New 2024 Gal*/
#gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin: 0 16px 48px 16px;
    /* Adjusted margin */
}

.image-card {
    text-align: center;
    cursor: pointer;
}

.thumbnail-img {
    max-width: 100%;
    height: auto;
}

.error-message {
    text-align: center;
    color: red;
}

.loading-state .image-card {
    background-color: #f1f1f1;
    animation: gal-pulse 1.5s infinite;
}

.skeleton-card {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    background-color: #f1f1f1;
    margin-bottom: 16px;
    min-height: 200px;
    /* Set minimal height to 200px */
}

@keyframes skeleton-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Full-screen image display */
.full-screen {
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
}

.full-screen-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    /*filter: blur(4px);*/
}

.full-screen img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fade-in {
    opacity: 1 !important;
}

.gal-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
}

.indicator {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    padding: 2px 12px;
    font-size: 0.8rem;
    border-radius: 16px;
}

/* Arrows for image navigation */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.arrow.left {
    left: 20px;
}

.arrow.right {
    right: 20px;
}

.full-screen .btn--ui svg {
    stroke: rgba(255, 255, 255, 0.8);
}

.full-screen .btn--ui:hover svg {
    stroke: rgba(255, 255, 255, 1);
}

#pagination-panel,
.pagination-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    /* Set height to 48px */
    padding: 0 16px;
    /* Add padding for styling */
    background-color: var(--ui-bg-100);
    bottom: 0;
    width: 100%;
    font-size: var(--size-text-note);
    border-radius: var(--gf);
}

.pagination-buttons {
    display: flex;
    gap: 8px;
}

.pagination-btn {
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid #ddd;
    border-radius: var(--gf);
    background-color: #f1f1f1;
}

.pagination-btn.active {
    background-color: #ddd;
}

.pagination-btn:hover {
    background-color: #ddd;
}

.ellipsis {
    margin: 0 8px;
}

.blurred-img {
    /* background-image: url(imageName-small.jpg);*/
    background-repeat: no-repeat;
    background-size: cover;
}

.blurred-img img {
    opacity: 0;
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    transition: var(--trans);
    /*filter: blur(4px);*/
}

/*
.blurred-img::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: pulse 2.5s infinite;
    background-color: white;
}*/
.blurred-img-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: gal-pulse 2.5s infinite;
    background-color: white;
}

@keyframes gal-pulse {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 0;
    }
}

.blurred-img-container {
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    position: relative;
}


.blurred-img.loaded::before {
    animation: none;
    content: none;
}

.blurred-img img {
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

.blurred-img.loaded img {
    opacity: 1;
}

.full-screen-thumbnails {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    overflow-x: auto;
    gap: 10px;
}

.full-screen-thumbnails img.fs-thumbnail-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
    display: none;
}

.full-screen-thumbnails img.fs-thumbnail-img.active {
    border: 2px solid #fff;
    /* Highlight with a white border */
    opacity: 1;
}

/* /New 2024 Gal*/

/* VTS Volley Test Sheet */
.vts-dialog {
    padding: 0;
    max-width: 860px;
}

.vts-header {
    padding: var(--gf) var(--gap);
    color: var(--color-white);
    background: var(--volley-classic-blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gf);
}

.vts-header .btn--ui svg {
    stroke: var(--color-white);
}

.vts-header__title {
    font-size: 1.2rem;
    font-weight: bold;
    padding: var(--gf) 0;
    margin: 0;
}

.vts-subheader {
    padding: var(--gap);
    color: var(--color-text-grey);
}

.vts-subheader__logo {
    width: 64px;
    display: inline-block;
}

.vts-subheader__title {
    font-weight: bold;
}

.vts-main {
    padding: 0 var(--gap);
}

.vts-line {
    display: grid;
    grid-template-columns: 1fr 200px;
    width: 100%;
    align-items: start;
    justify-content: start;
    gap: var(--gf);
    transition: var(--trans);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.vts-line:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.vts-line__vote {
    padding: 20px 0;
}

.vts-line__vote-note {
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
    padding: 0 0 0 var(--gf);
}

.vts-line__info {
    padding: 20px 10px;
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    transition: var(--trans);
}

.vts-line:hover {
    background: #fafdff;
}

.vts-line:hover .vts-line__info {
    border-color: var(--volley-classic-blue);
}

.vts-line-info__title {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--volley-classic-blue);
}

.vts-details {
    padding: 0;
}

.vts-summary {
    cursor: pointer;
    list-style: none;
    padding: 4px 0;
}

.vts-summary svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--color-text-grey);
    flex-shrink: 0;
}

.vts-details[open] .vts-details-body {}

.vts-details .vts-summary__text--open {
    display: none;
}

.vts-details[open] .vts-summary__text--closed {
    display: none;
}

.vts-details[open] .vts-summary__text--open {
    display: flex;
}

.vts-summary__text {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 4px;
    padding: 0 var(--gf);
    color: var(--color-text-grey);
    font-size: 0.9rem;
}

.vts-summary:hover .vts-summary__text {
    color: var(--color-text)
}

.sf__textarea--vts {
    width: 100%;
    font-size: 0.9rem;
    min-height: 4rem;
}

.vts-footer {
    padding: var(--gap) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
    background: #ededed;
}

.sp-radio-toggle--vts .sp-radio-toggle__label .sp-radio-toggle__text {
    padding: 0 var(--gap);
}

.sp-radio-toggle--vts .sp-radio-toggle__label:first-child input:checked+.sp-radio-toggle__text {
    background: #13c50d;
    color: var(--color-white);
}


.sp-radio-toggle--vts .sp-radio-toggle__label input:checked+.sp-radio-toggle__text {
    background: #f69420;
    color: var(--color-white);
}

.sp-radio-toggle--vts .sp-radio-toggle__label:last-child input:checked+.sp-radio-toggle__text {
    background: #d51313;
    color: var(--color-white);
}

.vts-grid-c-3 {
    display: grid;
    grid-template-columns: 1fr 180px 1fr;
    gap: var(--gf);
}

.vts-column__title {
    font-weight: bold;
    font-size: 0.8rem;
    background: var(--volley-classic-blue);
    color: var(--color-white);
    border-top-left-radius: var(--gf);
    border-top-right-radius: var(--gf);
    padding: 2px var(--gf);
    width: fit-content;
    margin-top: 4px;
}

.vts-column__body {
    background: var(--ui-bg-100);
    padding: var(--gf);
    height: 100%;
}

.vts-table {
    margin: 0 !important;
    width: 100%;
}

.vts-table td {
    padding: 0 !important;
}

.vts-table td:last-child {
    width: 64px;
    overflow: hidden;
}

.vts-error-panel {
    border: 1px dotted var(--volley-classic-red);
    padding: var(--gf);
    border-radius: var(--gf);
    color: var(--volley-classic-red);
}

.vts-table__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ui-size-s);
    font-size: 10px;
    cursor: pointer;
    background: transparent;
    border: 1px dashed rgba(0, 0, 0, 0.1);
    transition: var(--trans);
    border-radius: 4px;
}

.vts-table__btn:hover {
    border-color: var(--ui-input-border-active);
    background: var(--color-bg-light-blue-2);
}

.vts-box {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.vts-box-header__title {
    font-size: 1.2rem;
    font-weight: bold;
    padding: var(--gf) 0 0 0;
    margin: 0;
    color: var(--volley-classic-blue);
}

.vts-box-header__description {
    color: var(--color-text-grey);
}

.vts-box-body {
    padding: var(--gap) 0;
}

.vts-box-body .sp-radio-box-card__example:first-child {
    outline: 1px solid rgba(0, 0, 0, 0.1);
}

.vts-ms-list-item {
    display: grid;
    grid-template-columns: 20px 100px 80px 20px 20px 40px;
    gap: 4px;
    align-items: center;
    padding: 0 var(--gf);
    font-size: 12px;
    height: 40px;
    background: var(--color-white);
    border-radius: var(--gf);
    box-shadow: var(--sp-shadow-xs);
    margin-bottom: 8px;
    overflow: hidden;
    transition: var(--trans);
    width: fit-content;
}

.vts-ms-list-item--title {
    background: transparent;
    box-shadow: none;
    height: auto;
    color: var(--ui-color-text-light-grey);
    margin-bottom: 2px;
}

.vts-ms-list-item:hover {
    box-shadow: var(--sp-shadow-m);
}

.vts-ms-list-item--title:hover {
    box-shadow: none;
}

.vts-ms-list-item--error {
    box-shadow: var(--ui-shadow-error);
}

.vts-ms-list-item--error:hover {
    box-shadow: var(--ui-shadow-error);
}

.grid-c-2--vts {
    gap: 0;
}

.grid-c-2--vts .vts-column:first-child .vts-column__title {
    background: var(--ui-bg-300);
    color: var(--color-text-grey);
    font-weight: normal;
}

.grid-c-2--vts .vts-column:first-child .vts-column__body {
    border-right: dashed 1px rgba(0, 0, 0, 0.1);
}

.grid-c-2--vts .vts-column:last-child .vts-ms-list-item {
    grid-template-columns: 40px 32px 32px 32px 100px 80px;
}

.vts-ms-error-panel {
    border: 1px dashed red;
    border-radius: 8px;
    color: red;
    padding: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}

.vts-line--col {
    display: block;
}

.vts-line--col .vts-line__info {
    border-right: none;
}

.vts-line--col .vts-line__info {
    padding: 16px 0 0 0;
}

/* /VTS Volley Test Sheet */

/* Dialog */
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

dialog {
    max-width: 600px;
    min-width: 320px;
    height: fit-content;
    background: var(--color-white);
    padding: 0;
    border-radius: var(--gap);
    /*z-index: 9999;*/
    border: none;
    box-shadow: var(--sp-shadow-l);
}

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: var(--gap);
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    padding: 8px 16px var(--gf) 16px;
}

.dialog-header__title {
    font-size: 1.2rem;
    font-weight: bold;
}

.dialog-body {
    padding: 0 16px;
}

.dialog-body .sf {
    margin: 0 auto;
    width: 280px;
}

.dialog-body .sf__label {
    margin-top: 0;
    gap: 4px;
    line-height: 1;
}

.dialog-body .sf__input {
    width: 100%;
}

.dialog-body .sf__textarea {
    min-height: 260px;
    width: 100%;
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    margin-top: var(--gap);
    border-top: 1px solid rgba(0, 0, 0, 0.16);
    padding: var(--gf) 16px 8px 16px;
}

/* /Dialog */

/* Volley Profile 2024*/
.body--vp {
    background: #FAFBFC url("../img/bg-grey-logo.png") no-repeat bottom right fixed;
    --main-header-height: 64px;
    height: 100%;
    grid-template-rows: 1fr auto;
}

.page--vp {
    margin: var(--main-header-height) auto 0 auto;
    padding: 0 var(--gap);
    display: grid;
    gap: var(--gf);
    grid-template-columns: 264px auto;
}

.aside-vp {
    display: grid;
    grid-template-rows: auto auto 1fr;
    padding: 24px 0 0 0;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.aside-vp__header {
    padding: 0 var(--gf);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

.aside-vp__body {
    margin-top: var(--gap);
    /*padding: 0 var(--gf);*/
}

.aside-vp__footer {
    display: flex;
    align-items: flex-start;
    justify-content: left;
    margin-top: var(--gap);
    padding: var(--gf);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.aside-vp-user-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: 0 0 24px 0;
}

.aside-vp-user-box__pan {
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.aside-vp-user-box__ava {
    flex-shrink: 0;
}

.aside-vp-user-box__img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    outline: 2px solid rgba(0, 0, 0, 0.2);
}

.aside-vp-user-box--vip .aside-vp-user-box__ava::before {
    content: '';
    background: var(--vip-gradient);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 3.25px;
    z-index: -1;
    margin: -2px;
    border-radius: 50%;
}

.aside-vp-user-box__name {
    font-size: 0.9rem;
}

.aside-vp-user-box--vip .aside-vp-user-box__ava {
    position: relative;
}

.aside-vp-user-box--vip img {
    outline: none;
}

.aside-vp-user-box--vip .aside-vp-user-box__ava::after {
    content: '';
    position: absolute;
    top: 0;
    right: -4px;
    background: url('../img/premium-logo.svg') center / 66% no-repeat,
        var(--vip-gradient);
    height: 13px;
    width: 13px;
    color: var(--color-text);
    font-size: 9px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.premium-banner--light {
    background: none;
    margin: 12px;
}

.premium-banner--light img {
    filter: none;
}

.premium-banner--light svg {
    stroke: var(--color-text);
}

.main--vp {
    /*background: var(--color-white);*/
    border-radius: var(--gap);
    padding: var(--gap);
    height: calc(100vh - var(--main-header-height));
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    scrollbar-width: thin;
}

.main--vp::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.main--vp::-webkit-scrollbar-track {
    background: transparent;
}

.main--vp::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: none;
}

.main--vp::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.vp__h1 {
    font-size: 1.5rem;
    margin-bottom: var(--gap);
}

.vp__h2 {
    font-size: 1.34rem;
    margin-bottom: var(--gf);
}

.vp__h3 {
    font-size: 1.16rem;
    margin-bottom: var(--gf);
}

.vp__code {
    display: block;
    border: var(--ui-input-border);
    padding: var(--gf);
    border-radius: var(--gf);
    font-size: 0.8rem;
    margin-bottom: var(--gap);
    overflow-x: scroll;
}

.p__vp-note {
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
    padding: 0;
    margin: var(--gf) 0;
}

.vp-club-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--gap);
}

.vp-club-grid .club-item {
    position: relative;
}

.vp-club-grid .club-item__left {
    width: 48px
}

.vp-club-grid .club-item__title {
    font-size: var(--size-text-note);
}

.vp-details {
    max-width: 800px;
    margin-bottom: 24px;
    transition: var(--trans);
    border-radius: var(--gf);
    background: var(--color-white);
    box-shadow: var(--sp-shadow-s);
}

.vp-summary {
    list-style: none;
    cursor: pointer;
    padding: var(--gf) var(--gap);
    /*background: var(--ui-color-neutral);*/
    border-radius: var(--gf);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vp-details[open] summary {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--gf) var(--gf) 0 0;
}

.vp-summary::-webkit-details-marker {
    display: none;
}

.vp-summary:hover {
    background: var(--ui-blue-bg-100);
    cursor: pointer;
}

.vp .details-body {
    padding: var(--gap);
}

.vp-line {
    display: flex;
    align-items: start;
    gap: var(--gf);
    margin-bottom: var(--gf);
    font-size: 0.9rem;
}

.vp-line--col {
    flex-direction: column;
    margin-bottom: var(--gap);
}

.vp-line--col:last-child {
    margin-bottom: 0;
}

.vp-line__term {
    color: var(--ui-color-text-light-grey);
    width: 6rem;
}

.vp-line--col .vp-line__term {
    width: auto;
}

.vp-line__def {
    color: var(--color-text);
}

.vp-line__inner {
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.vp-line__avatar {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    object-fit: contain;
}

.summary-title {
    display: flex;
    gap: var(--gf);
    align-items: center;
}

.summary-title__icon {
    width: 24px;
    height: 24px;
    stroke: var(--color-text);
    transition: var(--ui-trans);
}

.summary-title__icon--minus {
    display: none;
}

.vp details[open] .summary-title__icon--plus {
    display: none;
}

.vp details[open] .summary-title__icon--minus {
    display: block;
}

.body--vp .footer-wrapper {
    margin: 0;
}

.stream-warning {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--gf);
    padding: var(--gf) 0;
    border-radius: var(--gf);
    font-size: var(--size-text-note);
    color: var(--color-text-note);
}

/* Auth-form info block */

.auth-container {
    display: flex;
    gap: var(--gap);
    justify-content: center;
    margin-top: 48px;
    flex-wrap: wrap;
}

.account-status-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: 340px;
    flex-grow: 1;
}

.account-status {
    border-radius: 16px;
    border: 1px solid var(--ui-bg-300);
    padding: 16px;
}

.account-status-features-list {
    font-size: 12px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    margin: 16px 0 0 0;
}

.account-status__regular ul {
    color: #88879A;
}

.account-status.account-status--registered h2 {
    color: var(--color-text);
}

.account-status h2 {
    font-size: 16px;
    font-weight: bold;
    color: #88879A;
    padding: 0;
}

.auth-container .premium-banner {
    margin: 0;
    display: flex;
}

.premium-banner-auth::before {
    border-radius: 16px;
}

.premium-banner-auth__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text);
}

.premium-banner-auth__details {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--color-text);
    gap: 2px;
    font-weight: bold;
    align-items: end;
}

.premium-banner-auth-details__price {
    font-size: 14px;
    text-align: right;
}

/* /Auth-form info block */

@media screen and (max-width: 768px) {
    .main--vp {
        height: auto;
        overflow: auto;
    }

    .page--vp {
        margin: var(--main-header-height) auto 0 auto !important;
        display: block;
    }

    .aside-vp {
        border: none;
        margin-bottom: var(--gf);
    }

    .aside-vp__header {
        border: none;
        padding: 0;
    }

    .aside-vp__footer {
        display: none;
    }

    .aside-vp__body {
        margin-top: 0;
        padding: 0;
    }

    .aside-lk-nav {
        margin: 8px 0 0 0;
    }

    .aside-vp-user-box {
        margin-bottom: var(--gf);
        padding: 0;
    }

    .aside-vp-user-box__img {
        width: 24px;
        height: 24px;
    }

    .aside-vp-user-box__name {
        font-size: 0.8rem;
    }

    .aside-vp-user-box--vip .aside-vp-user-box__ava::after {
        bottom: 0;
        right: -10px;
        width: 14px;

    }

    .aside-lk {
        border-right: none;
    }

    .aside-lk-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--gf);
        margin-bottom: var(--gf);
    }

    .aside-lk-nav__item {
        padding: 2px 8px;
        font-size: 0.8rem;
        gap: 4px;
        border-radius: 8px;
    }

    .main--vp {
        padding: 0;
    }

    .vp__h1 {
        font-size: 1.3rem;
        margin-bottom: var(--gf);
    }

    .vp-club-grid {
        grid-template-columns: 1fr;
    }

    .vp details {
        max-width: 100%;
    }

    .vp summary {
        padding: var(--gf);
    }

    .vp .details-body {
        padding: var(--gap);
    }

    .vp-line {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 16px;
    }

    .vp-line--col {
        margin-bottom: var(--gap);
    }

    .vp-line__avatar {
        width: 100%;
        height: auto;
    }

    .summary-title {
        gap: var(--gap);
        font-size: 0.8rem;
    }

    .summary-title__icon {
        width: 24px;
        height: 24px;
    }
}

/* / VP 2024*/

/* competition card */
.comp-card-container {
    margin: 16px 0;
    padding: 16px;
    border-radius: 16px;
    background-position: center right;
}

.comp-card-container--bv {
    background-image: linear-gradient(40deg, var(--volley-light-yellow) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.comp-card-container--sv {
    background-image: linear-gradient(40deg, var(--sv-light-blue) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.comp-card {
    display: block;
    background-image: linear-gradient(to bottom, white, white);
    background-position: right center;
    background-repeat: no-repeat;
    border-radius: 8px;
    box-shadow: var(--sp-shadow-s);
    padding: 24px 16px;
    transition: var(--trans);
    color: var(--color-text);
    margin-bottom: 16px;
}

.comp-card:last-child {
    margin-bottom: 0;
}

.comp-card:hover {
    box-shadow: var(--sp-shadow-m);
    color: var(--color-link);
}

.comp-card__tag {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--size-text-note);
    color: var(--color-grey);
    margin-bottom: 8px;
}

.comp-card__title {
    font-size: 1.1rem;
    margin-bottom: 8px;
    padding: 0;
}

@media screen and (max-width: 520px) {
    .comp-card-container {
        padding: 16px;
    }

    .comp-card {
        padding: 16px;
    }

    .comp-card__tag {
        font-size: var(--size-text-note);
    }

    .comp-card__title {
        font-size: 1rem;
    }

    .comp-card__date {
        font-size: var(--size-text-note);
    }
}

/* /competition card */

/* Add Club */
.add-club-dialog-wrapper {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.show-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-club-dialog {
    margin: 0 auto;
    width: 442px;
    background: var(--color-white);
    box-shadow: var(--sp-shadow-l);
    border-radius: var(--gap);
    display: grid;
    grid-template-rows: auto 1fr auto;
}

@media screen and (max-width: 520px) {
    .add-club-dialog {
        width: 90%;
        max-width: 442px;
    }

    .club-item {
        padding: var(--gf);
    }
}

.add-club-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: var(--gf) var(--gf) var(--gf) var(--gap);
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.add-club-dialog__filters {
    padding: var(--gap);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.add-club-dialog__filters .search__filters {
    display: flex;
    align-items: center;
    gap: var(--gf);
    margin-bottom: var(--gf);
}

.add-club-dialog__container {
    padding: var(--gap);
    overflow-y: scroll;
    /*height: calc(100vh - (var(--header-height) + 120px));*/
    height: 50vh;
    scroll-behavior: smooth;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    scrollbar-width: thin;
}

.add-club-dialog__container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.add-club-dialog__container::-webkit-scrollbar-track {
    background: transparent;
}

.add-club-dialog__container .club-item {
    margin-bottom: var(--gap);
    cursor: pointer;
    position: relative;
}

.add-club-dialog__container .club-item::after {
    display: none;
    content: 'Добавить в избранное';
    font-weight: bold;
    color: var(--color-white);
    position: absolute;
    inset: 0;
    background: rgba(5, 79, 159, 0.72);
    border-radius: 7px;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 8px black;
}

.add-club-dialog__container .club-item:hover::after {
    display: flex;
}

/* /Add Club */

/* Vip AD */
.vip-ad {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    margin: 16px 0;
    background-color: #ffffff;
    opacity: 1;
    transition: var(--ui-trans);
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);
}

.vip-ad__title:hover::before {
    transition: var(--ui-trans);
    filter: saturate(3);
}

.vip-ad__title {
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0px 32px;
    height: 88px;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: var(--ui-trans);
    cursor: pointer;
    justify-content: space-between;
}

.vip-ad-title__info {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    align-items: center;
}

.vip-ad__title::before {
    content: '';
    background: url(../img/premium-features-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transform: rotate(180deg);
    width: 322px;
    height: 144px;
    position: absolute;
    top: -16px;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 16%);
    left: 0;
    z-index: 0;
    transition: var(--trans);
}

.vip-ad__title p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    z-index: 1;
}

.vip-ad__title--active::before {
    content: '';
    background: url(../img/premium-active-bg.svg);
    transform: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    mask-image: none;
}

.vip-ad-title__img {
    height: 20px;
    z-index: 1;
}

.vip-ad__body {
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vip-ad__body .btn-pan {
    padding-bottom: 0;
    margin-bottom: 0;
}

.vip-ad-title__btn {
    font-weight: bold;
}

.vip-ad-title__btn svg {
    pointer-events: none;
    stroke: var(--color-text);
    transition: var(--trans);
}

.vip-ad[open] .vip-ad-title__btn svg {
    transform: rotate(180deg);
    transition: var(--trans);
}

/* /Vip AD*/

/* VIP features */
.features-desc {
    padding: 16px;
    border-radius: 16px;
    background-color: white;
    border: 1px solid var(--ui-bg-300);
}

.features-desc-status {
    padding: 24px;
}

.features-desc__header>span {
    font-weight: bold;
    font-size: 20px;
}

.features-desc__header-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gf);
    font-weight: bold;
    margin-top: 4px;
    flex-wrap: wrap;
}

.features-container {
    position: relative;
    z-index: 1;
}

.features-desc-premium {
    position: relative;
    border: none;
    background: url(../img/premium-features-bg.svg),
        white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.features-desc-premium::before {
    background: var(--vip-gradient);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: -2px;
    border-radius: 18px;
    z-index: -1;
}

.features-desc-premium .features-list {
    list-style-type: none;
    color: var(--color-text);
}

.features-list {
    padding: 0px 16px;
    margin: 0;
    font-size: 14px;
    gap: 4px;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    color: var(--color-grey);
}

.features-list__item {
    position: relative;
}

.features-desc-premium .features-list__item::before {
    background: url("../img/premium-logo-black.svg");
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: -16px;
}

.features-desc__subscription-info {
    font-weight: bold;
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    align-items: center;
    padding: var(--gap) 0;
    border-bottom: 1px solid var(--ui-bg-300);
}

.features-desc__subscription-info span {
    font-size: 24px;
}

.features-desc__subscription-info img {
    filter: grayscale(100%);
}

.features-desc__expire-date {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    margin-top: 24px;
}

.features-desc-expire-date__title {
    font-size: 14px;
    color: #88879A;
}

.features-desc-expire-date__date {
    font-weight: bold;
}

/* /VIP features */

/* VIP Card */
.vip-ad__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    z-index: 1;
    position: relative;
}

.vip-card {
    height: 100%;
    background: var(--color-bg);
    border-radius: var(--gap);
    padding: 16px;
    transition: var(--trans);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    border: 1px solid var(--ui-bg-300);
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
}

.vip-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--vip-gradient);
    border-radius: 18px;
    z-index: -1;
    opacity: 0;
    transition: var(--trans);
    margin: -4px;
}

.vip-card__img {
    position: absolute;
    height: 48px;
    width: 48px;
    top: 37px;
    right: 24px;
    filter: grayscale(100%);
    transition: var(--trans);
}

.vip-card:hover .vip-card__img {
    filter: none;
}

.vip-card:hover::before {
    opacity: 1;
}

.vip-card:hover .vip-card__badge {
    transition: var(--trans);
    background: var(--vip-gradient);
}


.vip-card__title {
    font-size: 32px;
    font-weight: bold;
}

.vip-card__old-price {
    text-decoration: line-through;
    font-size: 18px;
    color: #c4c4d8;
}

.vip-card__price {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: auto;
}

.vip-card__text {
    color: #c4c4d8;
    font-size: var(--size-text-note);
}

.vip-card__badge {
    position: absolute;
    background: #88879A;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: white;
    border-radius: 16px;
    right: -6px;
    top: -6px;
}

.vip-card-label {
    display: flex;
}

input.vip-card-radio[type=radio]:not(.sp-switch) {
    width: 0;
    height: 0;
}

input.vip-card-radio[type=radio] {
    border: none;
}

.vip-card-radio[type=radio]:checked+.vip-card {
    border-color: transparent;
}

.btn.btn--vip {
    text-align: center;
    min-width: 40%;
    height: 48px;
}

.vip-card-radio {
    position: absolute;
    left: -9999px;
}

.vip-card--active .vip-card__img {
    filter: none;
}

.vip-card--active::before {
    opacity: 1;
}

.vip-card--active .vip-card__badge {
    transition: var(--trans);
    background: var(--vip-gradient);
}

.vip-card-radio:checked+.vip-card .vip-card__img {
    filter: none;
}

.vip-card-radio:checked+.vip-card::before {
    opacity: 1;
}

.vip-card-radio:checked+.vip-card .vip-card__badge {
    transition: var(--trans);
    background: var(--vip-gradient);
}

/* /VIP Card */

/* VIP Reedem */
.vip-reedem {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    margin: 16px 0;
    background-color: #ffffff;
    opacity: 1;
    transition: var(--ui-trans);
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);
}

.vip-reedem__title:hover::before {
    transition: var(--ui-trans);
    filter: saturate(3);
}

.vip-reedem__title {
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0px 32px;
    height: 48px;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: var(--ui-trans);
    cursor: pointer;
    justify-content: flex-start;
}

.vip-reedem__title::before {
    content: '';
    background: url(../img/premium-features-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transform: rotate(180deg);
    width: 322px;
    height: 144px;
    position: absolute;
    top: -16px;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 16%);
    left: 0;
    z-index: 0;
    transition: var(--trans);
}

.vip-reedem__body {
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.vip-reedem__line {
    margin: var(--gf) 0;
    width: 220px;
}

.sf__input--reedem {
    text-transform: uppercase;
}

.vip-reedem-card {
    width: 240px;
    /*background: var(--ui-bg-100);*/
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    align-items: center;
}

.animated-gradient {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFB92C, #4FB9E9, #ED1C24);
    animation: move-gradient 4s infinite linear;
    background-size: 150%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.animated-gradient__inner {
    background: var(--color-white);
}

.animated-gradient__inner {
    border-radius: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.animated-gradient__inner svg {
    width: 100%;
    fill: none;
    stroke: #FFB92C;
    flex-shrink: 0;
}

.vip-reedem__logo {
    width: 120px;
    padding-left: 12px;
}

@keyframes move-gradient {
    0% {
        background-position: 75% 0%;
    }

    25% {
        background-position: 100% 75%;
    }

    50% {
        background-position: 75% 100%;
    }

    75% {
        background-position: 0% 75%;
    }

    100% {
        background-position: 75% 0%;
    }
}

/* /VIP Reedem */

/* Service Page */
.service-page-box {
    width: 320px;
    margin: 0 auto;
    color: var(--color-text-grey);
    text-align: center;
}

.service-page-box__logo {
    filter: grayscale(1);
    height: 48px;
}

.service-page-box__h1 {
    font-size: 1.2rem;
    padding: var(--gf);
    margin: 0;
}

/* /Service Page */

/* Spoiler */
.spoiler {
    position: relative;
    cursor: pointer;
}

.spoiler:before {
    content: " ";
    color: transparent;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    /*filter: blur(1px);*/
    background-image: radial-gradient(#e1e1e1 0.5px, transparent 0.5px),
        radial-gradient(#e1e1e1 0.5px, transparent 0.5px);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    background-color: #a5a5a5;
    animation: moveNoise 2s linear infinite;
    transition: var(--ui-trans);
    opacity: 1;
}

.revealed {
    text-indent: 0;
}

.revealed:before {
    opacity: 0;
}

@keyframes moveNoise {
    0% {
        background-position: 0 0, 5px 5px;
    }

    100% {
        background-position: 10px 10px, 15px 15px;
    }
}

/* /Spoiler */


/* =========================== MEDIA ====================================== */
@media screen and (max-width: 1370px) {
    .main-header__nav {
        margin-left: 0;
    }

    .main-header-nav__item {
        font-size: 0.9rem;
    }

    .main-header-nav-item__img {
        width: 20px;
        height: 20px;
    }

    .header-subline-nav {
        padding-left: 230px;
    }

    .mc-header-pan__line {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .mc-video {
        width: 100%;
    }

    .ginfo-card .ginfo-box {
        grid-template-columns: 1fr auto 1fr;
    }

    .ginfo-line {
        padding: var(--gf) 0;
    }

    .glbtab-nav {
        flex-wrap: wrap;
    }

    .glbtab {
        background: var(--ui-bg-100);
        border-radius: var(--gap);
    }

    .glbtab--active {
        background: var(--color-primary);
        color: var(--color-white);
    }

    .ginfo-data__score {
        padding: 0 16px 0.3rem 16px;
        font-size: var(--size-heading-s);
    }

    .ginfo-team {
        flex-direction: column-reverse;
        align-content: flex-end;
        gap: 0;
    }

    .ginfo-team__color {
        width: 4rem;
        height: 0.5rem;
    }

    .ginfo-team:last-child {
        flex-direction: column;
        align-content: flex-start;
    }

    .ginfo-team__logo {
        width: 48px;
        height: 48px;
    }

    .ginfo-team__title {
        font-size: 1rem;
        text-align: center;
        align-items: center;
    }

    .ginfo-team--a .ginfo-team__title {
        align-items: center;
    }

    .ginfo-team-title__city {
        font-size: 0.8rem;
    }

    .ginfo-rounds__numb {
        display: none;
    }

    .stable {
        width: 100%;
    }

    .stable-header,
    .stable-line {
        grid-template-columns: 1fr 120px 1fr;
    }

    .stable-header-col__logo {
        width: 42px;
        height: 42px;
    }

    .stable-header__col {
        flex-direction: column-reverse;
        gap: 2px;
    }

    .stable-header__col:last-child {
        flex-direction: column;
    }

    .main-submenu--active {
        overflow: hidden;
    }
}

@media screen and (max-width: 1280px) {
    .main-header__nav {
        gap: 16px;
    }

    .main-header-nav__item {
        font-size: 0.8rem;
    }

    .main-header-nav-item__img {
        width: 16px;
        height: 16px;
    }

    .vl-table-header-toggle-wrapper {
        flex-direction: column;
        align-items: start;
        gap: var(--gf);
    }

}

@media screen and (max-width: 1186px) {
    .main-header__nav {
        display: none;
    }

    .main-ad-banners {
        padding: 0 var(--gap);
    }

    .body--cv .main-header-subline--cv {
        display: none;
    }

    .body--bv .main-header-subline--bv {
        display: none;
    }

    .body--sv .main-header-subline--sv {
        display: none;
    }

    .body--cv,
    .body--bv,
    .body--sv,
    .body--jv {
        --main-header-height: 64px;
    }

    .trans-main-body {
        padding: var(--gap) 0;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

@media screen and (max-width: 960px) {
    .trans-nav-section {
        flex-wrap: wrap;
        padding: var(--gap) var(--gf);
    }

    .trans-nav-section__item {
        padding: 4px var(--gf);
        width: 150px;
    }

    .trans-nav-pan {
        position: relative;
    }

    .trans-nav-pan::after {
        content: ' ';
        position: absolute;
        right: 0;
        top: 0;
        width: 34px;
        height: 32px;
        background-image: linear-gradient(to right, rgba(245, 245, 245, 0), rgba(245, 245, 245, 1));
    }

    .trans-nav-sub-section {
        padding: var(--gap) 4px;
        flex-direction: column;
        gap: var(--gf);
    }

    .trans-nav-top-section {
        gap: var(--gf);
        overflow-x: scroll;
        scroll-behavior: smooth;

        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .trans-nav-top-section::-webkit-scrollbar {
        display: none;
    }

    .trans-nav-top-section__item {
        font-size: var(--size-text-note);
        line-height: 0.8;
        flex-shrink: 0;
        width: fit-content;
    }

    .trans-nav-top-section__item:last-child {
        margin-right: 40px;
    }

    .trans-nav-top-section-item__img {
        width: 16px;
        height: 16px;
    }

    .main-news-grid {
        grid-template-columns: 1fr 1fr 1fr;

    }

    .mc-video {
        width: 72%;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --col-wid: auto;
    }

    h1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    .result-cards-title__h3 {
        text-align: center;
    }

    .main__h1 {
        font-size: 1.6rem;
    }

    .main__h2 {
        font-size: 1.4rem;
    }

    .top-pan {
        display: none;
    }

    .header-wrapper {
        margin: var(--gf) 0;
    }

    .header {
        grid-template-columns: 3fr 9fr;
    }

    .nav-pan {
        grid-template-columns: auto;
    }

    .header__logo {
        height: auto;
    }

    .nav {
        border-radius: 0;
        padding: 0;
        margin-bottom: var(--gap);
    }

    .wide {
        grid-template-columns: auto;
    }

    .int-champ-line {
        flex-direction: column;
    }

    .int-champ-item {
        width: 100%;
    }

    .header-wrapper {
        padding: 0;
    }

    .header__right-mob {
        display: flex;
        position: relative;
        align-items: center;
        height: 40px;
        padding: 4px 8px;
        justify-content: space-between;
        background: var(--volley-yellow);
        border-radius: var(--gf);
    }

    .snow .header__right-mob {
        background: var(--sv--header-bg);
    }

    .junior .header__right-mob {
        background: var(--jv--header-bg);
    }

    a.header-right-mob__tickets {
        color: var(--color-black);
    }

    .page {
        margin-top: 0;
    }

    .main {
        padding: 0;
    }

    .main--news {
        margin: var(--gap) 0;
        padding: var(--gap);
    }

    .page-news {
        grid-template-columns: auto;
    }

    .main-media-footer {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-news-grid {
        grid-template-columns: 1fr 1fr;
    }

    .news-grid {
        grid-template-columns: auto;
    }

    .news-post {
        grid-template-columns: auto;
        margin-bottom: 48px;
    }

    .news-post__img img {
        max-height: 340px;
    }

    .stage-table-header__h1 {
        font-size: 1.2rem;
    }

    .stage-table-header__date {
        font-size: var(--size-text);
    }

    .competition-line--header {
        display: none;
    }

    .competition-line {
        flex-wrap: wrap;
        padding: 16px;
    }

    .grid-filter {
        grid-template-columns: 1fr 1fr;
    }

    .grid-filter .sf__input {
        min-width: 100%;
    }

    .grid-filter .sf__label {
        margin: 0;
    }

    .grid-filter__btn-pan {
        grid-column: 1/-1;
        padding: 16px 0 0 0;
    }

    .result-table-header__h2 {
        font-size: 16px;
    }

    .result-table-line {
        grid-template-columns: 1fr 1fr;
    }

    .result-table-col--vs-box {
        grid-column: 1/-1;
    }

    .result-table-col__team-name {
        font-size: 0.8rem;
    }

    .result-table-col__score-numb-separator {
        text-align: center;
    }

    .result-table-col__team-players,
    .result-table-col__score-numb-separator {
        font-size: 1rem;
    }

    .result-table-col__score-numb {
        font-size: 1.2rem;
    }

    .result-table-col__score {
        align-self: end;
        align-items: center;
    }

    .result-table-col__vs {
        align-items: end;
    }

    .result-table-col__sets-stats {
        border-radius: 16px;
    }

    .club-box {
        flex-direction: column;
    }

    .lk-player-info {
        margin: 0;
    }

    .vl-tabs {
        flex-wrap: wrap;
    }

    .vl-table-line--header {
        display: none;
    }

    .vl-table-line {
        flex-wrap: wrap;
        border-radius: var(--gf);
        padding: var(--gap);
        row-gap: var(--gf);
        margin-bottom: var(--gap);
    }

    .vl-table-line__item,
    .vl-table-line__item--xs,
    .vl-table-line__item--s,
    .vl-table-line__item--m,
    .vl-table-line__item--l,
    .vl-table-line__item--xl,
    .vl-table-line__item--xxl {
        width: auto;
    }

    .vl-table-line__item:first-child {
        font-weight: bold;
    }

    .vl-transfer-box {
        width: auto;
    }

    .vl-transfer-box__body {
        flex-direction: column;
        align-items: center;
        gap: var(--gf);
    }

    .vl-transfer-box__item {
        text-align: center;
    }

    .vl-transfer-box__separator {
        transform: rotate(90deg);
    }

    .gpage__body {
        padding: 0;
    }

    .lg-stat__center {
        border-radius: var(--gf);
    }

    .gpage__h1 {
        font-size: 1.2rem;
    }

    .lg-header {
        grid-template-columns: auto;
    }

    .court-score-pan__score {
        font-size: 1.4rem;
    }

    .court-player__avatar {
        width: 60px;
        height: 60px;
    }

    .lg-scorepan {
        grid-template-columns: auto;
    }

    .lg-scorepan__logo {
        display: none;
    }

    .lg-scorepan-teams__line {
        border-left: 4px solid var(--volley-light-yellow);
    }

    .snow .lg-scorepan-teams__line {
        border-left: 4px solid var(--volley-light-yellow);
    }

    .lg-scorepan__name {
        padding: 0 var(--gf);
    }

    .lg-scorepan__team-plate {
        width: 160px;
    }

    .lg-footer {
        padding: 0 0 8px 0;
    }

    .vl-gal {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .gallery-win {
        height: auto;
    }

    .splide__slide__container img {
        --img-height: calc(100vw / 2);
        height: var(--img-height);
    }

    .event-wide-wrapper,
    .event-wide {
        width: 100%;
        height: auto;
        margin-top: var(--gf);
    }

    .event-wide {
        background-position: center;
    }

    .event__h1 {
        font-size: var(--size-heading-l);
        line-height: 0.8;
        color: var(--color-white);
        text-shadow: 0 2px 8px rgba(153, 97, 41, 0.4);
    }

    .snow .event__h1 {
        text-shadow: 0 2px 8px rgb(10 109 158 / 79%);
        font-weight: normal;
    }

    .event-wide__date {
        padding: 40px 0 var(--gf) var(--gf);
        align-self: start;
        text-align: left;
        text-shadow: 0 2px 8px rgba(153, 97, 41, 0.4);
        line-height: 1;
        font-size: var(--size-heading-l);
    }

    .snow .event-wide__date {
        padding: var(--gf);
        align-self: start;
        text-align: left;
        background: none;
        text-shadow: 0 2px 8px rgb(10 109 158 / 79%);
    }

    .event-content-wrapper {
        margin: var(--gap) 0;
        border-radius: var(--gf);
        background: #f1f1f2;
    }

    .event-content {
        width: 100%;
    }

    .event-wide__desc {
        margin: var(--gap) 0 0 0;
        flex-direction: column;
        gap: var(--gf);
    }

    .event-card {
        margin: var(--gap) 0 0 0;
    }

    .main-players__h3 {
        padding: var(--gf) 0 var(--gap) 0;
    }

    .main-players--male,
    .main-players--female {
        background: var(--volley-grey-blue) url(../img/bg-lines-90deg-2.svg) no-repeat center;
        background-size: cover;
    }

    .sf__select,
    .sf__input {
        max-width: 240px;
    }

    .wide {
        gap: var(--gf);
    }

    .wide .splide__slide img {
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .wide .splide__track {
        height: auto;
    }

    .player-card__club img {
        width: 48px;
    }

    .club-box-wrapper {
        background-position: center left 200px;
        background-repeat: no-repeat;
        background-size: 90%;
    }

    .club-box--2 {
        grid-template-columns: 1fr;
    }

    .club-box__right {
        align-items: flex-start;
        padding: 0 0 0 96px;
    }

    .club-box__right div {
        align-items: start;
    }

    .club-box__logo {
        align-items: center;
        justify-content: space-around;
    }

    .content-info-box {
        display: block;
    }

    .content-info-box__body {
        padding: 0 var(--gap);
    }

    .lg--end:after {
        top: calc(50% + 80px);
    }

    .player-card__club img {
        width: 40px;
    }

    .vl-table-line__item {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .vl-table-line__item--mob-col {
        flex-direction: column;
        align-items: flex-start;
    }

    .vl-table-line-item__text-note {
        color: var(--color-text-grey);
        font-size: var(--size-text-note);
    }

    /* VL-Table mobile card Type-1 */
    .vl-table-mobile-card--type1 {
        max-width: 375px;
        min-width: 310px;
        display: grid;
        grid-template-columns: 0.48fr repeat(4, 1fr);
        grid-template-rows: repeat(4, auto) 0;
        grid-column-gap: 0;
        grid-row-gap: var(--gf);
        background: var(--color-white);
        border-radius: var(--gf);
        box-shadow: var(--bs);
    }

    .vl-table-mobile-card--type1 .vl-table-line__item:first-child {
        grid-area: 1 / 1 / 2 / 2;
    }

    .vl-table-mobile-card--type1 .vl-table-line__item:nth-child(2) {
        grid-area: 1 / 2 / 2 / 6;
    }

    .vl-table-mobile-card--type1 .vl-table-line__item:nth-child(3) {
        grid-area: 2 / 1 / 3 / 6;
    }

    .vl-table-mobile-card--type1 .vl-table-line__item:nth-child(4) {
        grid-area: 3 / 1 / 4 / 6;
    }

    .vl-table-mobile-card--type1 .vl-table-line__item:nth-child(5) {
        grid-area: 4 / 1 / 5 / 6;
        display: flex;
        align-items: center;
        justify-content: right;
    }

    /* /VL-Table mobile card Type-1 */
    /* VL-Table mobile card Type-2 */
    .vl-table-mobile-card--type2 {
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: var(--gf);
        border-radius: var(--gf);
        box-shadow: var(--bs);
        width: 100%;
    }

    /*
    .vl-table-mobile-card--type2 {
            max-width: 375px;
            min-width: 310px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(4, auto);
            grid-column-gap: 0;
            grid-row-gap: var(--gf);
            background: var(--color-white);
            border-radius: var(--gf);
            box-shadow: var(--bs);
        }

        .vl-table-mobile-card--type2 .vl-table-line__item:first-child {
            grid-area: 1 / 1 / 2 / 2;
        }

        .vl-table-mobile-card--type2 .vl-table-line__item:nth-child(2) {
            grid-area: 1 / 2 / 2 / 6;
        }

        .vl-table-mobile-card--type2 .vl-table-line__item:nth-child(3) {
            grid-area: 2 / 1 / 3 / 4;
        }

        .vl-table-mobile-card--type2 .vl-table-line__item:nth-child(4) {
            grid-area: 2 / 4 / 3 / 6;
        }

        .vl-table-mobile-card--type2 .vl-table-line__item:nth-child(5) {
            grid-area: 3 / 4 / 4 / 6;
        }

        .vl-table-mobile-card--type2 .vl-table-line__item:nth-child(6) {
            grid-area: 3 / 1 / 4 / 4;
        }

        .vl-table-mobile-card--type2 .vl-table-line__item:nth-child(7) {
            grid-area: 4 / 1 / 4 / 6;
        }*/
    /* /VL-Table mobile card Type-2 */
    /* VL-Table mobile card Type-3 */
    .vl-table-mobile-card--type3 {
        max-width: 375px;
        min-width: 310px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(5, auto);
        grid-column-gap: 0;
        grid-row-gap: var(--gf);
        background: var(--color-white);
        border-radius: var(--gf);
        box-shadow: var(--bs);
    }

    .vl-table-mobile-card--type3 .vl-table-line__item:first-child {
        grid-area: 1 / 1 / 2 / 2;
    }

    .vl-table-mobile-card--type3 .vl-table-line__item:nth-child(2) {
        grid-area: 1 / 2 / 2 / 7;
    }

    .vl-table-mobile-card--type3 .vl-table-line__item:nth-child(3) {
        grid-area: 2 / 1 / 3 / 4;
    }

    .vl-table-mobile-card--type3 .vl-table-line__item:nth-child(4) {
        grid-area: 2 / 4 / 3 / 7;
    }

    .vl-table-mobile-card--type3 .vl-table-line__item:nth-child(5) {
        grid-area: 3 / 1 / 4 / 4;
    }

    .vl-table-mobile-card--type3 .vl-table-line__item:nth-child(6) {
        grid-area: 3 / 4 / 4 / 7;
    }

    .vl-table-mobile-card--type3 .vl-table-line__item:nth-child(7) {
        grid-area: 4 / 1 / 5 / 7;
        display: flex;
        align-items: center;
        justify-content: right;
    }

    /* /VL-Table mobile card Type-3 */
    /* VL-Table mobile card Type-4 */
    .vl-table-mobile-card--type4 {
        max-width: 375px;
        min-width: 310px;
        display: grid;
        grid-template-columns: 0.5fr repeat(6, 1fr) 0.5fr;
        grid-template-rows: repeat(3, auto);
        grid-column-gap: 0;
        grid-row-gap: var(--gf);
        background: var(--color-white);
        border-radius: var(--gf);
        box-shadow: var(--bs);
    }

    .vl-table-mobile-card--type4 .vl-table-line__item:first-child {
        grid-area: 1 / 1 / 2 / 2;
    }

    .vl-table-mobile-card--type4 .vl-table-line__item:nth-child(2) {
        grid-area: 1 / 2 / 2 / 6;
        display: flex;
        justify-content: start;
    }

    .vl-table-mobile-card--type4 .vl-table-line__item:nth-child(3) {
        grid-area: 2 / 1 / 3 / 6;
    }

    .vl-table-mobile-card--type4 .vl-table-line__item:nth-child(4) {
        grid-area: 3 / 1 / 4 / 9;
    }

    .vl-table-mobile-card--type4 .vl-table-line__item:nth-child(5) {
        grid-area: 2 / 6 / 3 / 9;
    }

    .vl-table-mobile-card--type4 .vl-table-line__item:nth-child(6) {
        grid-area: 1 / 6 / 2 / 9;
    }

    /* /VL-Table mobile card Type-4 */
    .result-table-col__sets-stats-numb {
        padding: 0 6px;
    }

    /*LK*/
    .page--lk {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .lk-body__h2,
    .lk-body__left {
        padding-left: var(--gap);
        padding-right: var(--gap);
    }

    .lk-body {
        flex-direction: column;
    }

    .lk-line {
        display: grid;
        align-items: flex-start;
        grid-template-columns: 148px auto;
    }

    .lk-line__term,
    .lk-line__def {
        line-height: 1;
    }

    .lk-line__def a {
        font-size: var(--size-text-note);
    }

    .aside-bot-nav {
        margin-top: 0;
        border-top: 1px solid var(--color-border);
        /*border-bottom: 1px solid var(--color-border);*/
        flex-direction: row;
        /*padding: var(--gf);*/
    }

    .aside-bot-nav h5 {
        padding: 0;
        margin: 0;
    }

    .aside-bot-nav img {
        width: 32px;
    }


    .competition-list-item__title {
        line-height: 1;
    }

    /* /LK */
    /* Main mob content */
    .main-content table {
        font-size: 0.7rem;
    }

    /* /Main mob content */
    /* VFR Slider */
    .wide--main {
        height: auto;
        gap: var(--gap);
    }

    .vfr-slide {
        width: 100%;
    }

    .vfr-slide__picture img {
        object-position: left top;
        width: 100%;
    }

    .vfr-slide-section {
        flex-direction: column;
        padding: var(--gf);

    }

    .vfr-slide-section-left__title {
        font-size: 1rem;
    }

    .vfr-slide-section-left__text {
        font-size: 0.8rem;
    }

    .vfr-slide-section__right {
        padding-top: var(--gf);
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    .vfr-slide-section-right__item {
        font-size: 0.8rem;
    }

    .vfr-slider-btn {
        padding: 8px;
        font-size: 0.8rem;
    }

    /* /VFR Slider */
    /* Mobile Main header */
    .submenu-body {
        padding: var(--gap);
        flex-direction: column;
        height: calc(100vh - var(--main-header-height));
        overflow-y: scroll;
        gap: 0;
    }

    /* /Mobile Main header */
    .header-search {
        display: none;
    }

    .trans-line__h2 {
        padding-left: var(--gap);
    }

    .trans-line-body {
        padding-left: var(--gap);

        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .trans-line-body::-webkit-scrollbar {
        display: none;
    }

    .trans-line-body-wrapper::after {
        width: 16px;
    }

    .trans-line-item {
        width: 320px;
        height: 200px;
    }

    .trans-line-item:first-child {
        margin-left: 0;
    }

    .trans-line-item:last-child {
        margin-right: var(--gap);
    }

    .trans-line-item__club img {
        width: 60px;
        height: 60px;
    }

    .trans-main-footer div {
        flex-direction: column;
    }

    .main-news-section,
    .main-partners,
    .main-sponsors,
    .main-media-section {
        padding: 0 var(--gap);
    }

    .wide__mcal {
        height: auto;
        margin: var(--gap) var(--gf);
    }

    .mcal-body {
        grid-template-columns: 48px 48px 48px 48px 48px 48px 48px;
        justify-content: center;
        justify-items: center;
    }

    .mcal-footer {
        justify-content: center;
    }

    .glb-main-archive {
        padding: 0 var(--gf);
    }

    .glb-main-archive__body {
        padding: 0;
        background: none;
    }

    .ginfo-card .ginfo-team__title {
        font-size: 1rem;
    }

    .glb-main-competitions {
        padding: 0 var(--gf);
    }

    .page-aside--glb {
        display: block;
    }

    .glb-aside {
        position: sticky;
        top: calc(var(--main-header-height) + var(--gap));
        box-shadow: var(--sp-shadow-m);
        padding: var(--gf);
    }

    .glb-aside-nav {
        margin: 0;
    }

    .person-card {
        align-items: flex-start;
        margin-bottom: 32px;
    }

    .person-card__img {
        width: 120px;
        height: 180px;
    }

    .person-card__name {
        font-size: var(--size-heading-xs);
    }

    .person-card__desc {
        line-height: 1.1;
    }

    .timezone-pan {
        padding: var(--gap);
    }

    .submenu-col {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        width: 100%;
    }

    .submenu-col-item {
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .submenu-details-body__item:not(:last-child) {
        margin-bottom: var(--gf);
    }

    .lk-game-line__body {
        flex-direction: column;
        gap: var(--gap);
    }

    .lk-game-line__body>div:last-child {
        border-left: none;
        padding-left: 0;
        padding-top: 4px;
    }

    .lk-game-line-body__cards {
        flex-direction: column;
    }

    .lk-game-line-body-subcard__img {
        width: 60px;
        height: 80px;
    }

    .main-partners-body,
    .main-sponsors-body {
        grid-template-columns: 1fr 1fr;
    }

    .mc-video {
        width: calc(100% - 32px);
        margin-bottom: 42px;
    }

    .ginfo-team-title__city {
        font-size: 0.8rem;
    }

    .album {
        margin: 0 0 var(--gap) 0;
    }

    .grid-team-intro-card {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        justify-items: center;
    }

    .team-intro-card {
        max-width: 320px;
    }

    .team-intro-card__img-wrapper {
        height: 180px;
    }

    .bos-line__body {
        flex-direction: column;
    }

    .gpage__video--snow {
        width: 100%;
    }

    .event-wide-desc__content {
        font-size: 0.9rem;
        text-align: center;
    }

    .event-wide-desc__content p {
        margin: var(--gf) 0 0 0;
    }

    .footer {
        grid-template-columns: 1fr;
    }

    .footer__desc {
        padding: 8px 8px 8px 16px;
    }

    .footer__center {
        padding: 0 var(--gap);
    }

    .footer__right {
        padding: var(--gap);
    }

    .footer-social {
        flex-wrap: wrap;
        column-gap: 32px;
        row-gap: 16px;
    }
}


@media screen and (max-width: 510px) {
    .vl-table {
        width: auto;
    }

    .ginfo-line {
        flex-direction: column;
        gap: 2px;
    }

    .glb-news-card__title {
        font-size: 0.9rem;
    }

    .full-screen-container {
        top: auto;
        left: auto;
        transform: none;
    }

    .arrow {
        height: 40vh;
    }

    .glb-news-line-card__title {
        font-size: 0.9rem;
    }

    .regulation-file-item {
        margin: var(--gap) 0;
    }
}

@media screen and (max-width: 360px) {

    .lk-line {
        display: flex;
        flex-direction: column;
    }
}

/*volley content 2025*/
.vcnt-cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 32px 0;
}

.vcnt-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--sp-shadow-s);
    padding: 20px 28px;
    gap: 24px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

.vcnt-card img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
    background: #fff;
}

.vcnt-card-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vcnt-card-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.vcnt-card a {
    color: #1a4fa0;
    text-decoration: none;
}

.vcnt-card p {
    margin: 0 0 4px 0;
    font-size: 15px;
}

@media (max-width: 700px) {
    .vcnt-card {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 8px;
        gap: 12px;
    }

    .vcnt-card img {
        width: 100%;
        max-width: 140px;
        height: auto;
        margin: 0 auto;
    }
}

/* Volley Search */
/* Контейнер поиска */
.vs-search-container {
    position: relative;
    z-index: 1000;
}

/* Кнопка-триггер */
.vs-search-trigger {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vs-search-trigger::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vs-search-trigger:hover {
    /*transform: scale(1.05);*/
    background: rgba(255, 255, 255, 0.2);
    /*box-shadow:
            0 6px 8px rgba(0, 0, 0, 0.12),
            0 4px 6px rgba(0, 0, 0, 0.08),
            0 15px 30px rgba(103, 126, 234, 0.4);*/
}

.vs-search-trigger:hover::before {
    opacity: 1;
}

.vs-search-trigger:active {
    transform: scale(0.95);
}

.vs-search-trigger.vs-hidden {
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

.vs-search-trigger svg {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

/* Развернутая форма поиска */
.vs-search-form {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) scale(0);
    transform-origin: right center;
    width: 600px;
    max-width: 90vw;
    background: #ffffff;
    backdrop-filter: blur(20px);
    border-radius: 30px;
    padding: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15),
        0 20px 48px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}

.vs-search-form.vs-active {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.vs-search-input-wrapper {
    display: flex;
    align-items: center;
    padding: 4px 4px 4px 8px;
    position: relative;
}

/* Кнопка закрытия */
.vs-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.vs-close-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: rotate(90deg);
}

.vs-close-btn svg {
    width: 20px;
    height: 20px;
    stroke: #6b7280;
    stroke-width: 2;
}

/* Иконка поиска */
.vs-search-icon {
    margin-right: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: 0.5;
}

.vs-search-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-icon-grey);
    stroke-width: 2;
    fill: none;
}

/* Поле ввода */
.vs-search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 300;
    color: var(--color-text);
    outline: none;
    padding: 4px 0;
}

.vs-search-input::placeholder {
    color: var(--color-icon-grey);
}

/* Скрытие браузерных кнопок очистки */
/* Chrome, Safari, Edge, Opera */
.vs-search-input::-webkit-search-decoration,
.vs-search-input::-webkit-search-cancel-button,
.vs-search-input::-webkit-search-results-button,
.vs-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Firefox */
.vs-search-input::-moz-clear {
    display: none;
}

/* IE/Edge legacy */
.vs-search-input::-ms-clear,
.vs-search-input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* Samsung Internet */
.vs-search-input::-webkit-clear-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Кнопка очистки */
.vs-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    margin: 0 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-clear-btn.vs-visible {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.vs-clear-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.vs-clear-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-icon-grey);
    stroke-width: 2;
}

/* Кнопка отправки */
.vs-submit-btn {
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.vs-submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vs-submit-btn:hover::before {
    opacity: 1;
}

.vs-submit-btn:hover {
    background: var(--color-primary-dark);
}

.vs-submit-btn:active {
    transform: scale(0.95);
}

.vs-submit-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s ease;
}

.vs-submit-btn:hover svg {
    /*transform: translateX(2px);*/
}

/* Spinner */
.vs-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.vs-submit-btn.vs-loading .vs-spinner {
    display: block;
}

.vs-submit-btn.vs-loading svg {
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Выпадающий список подсказок */
.vs-suggestions-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15),
        0 20px 48px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    max-height: 300px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1001;
}

.vs-suggestions-dropdown.vs-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.vs-suggestion-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.vs-suggestion-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(103, 126, 234, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.vs-suggestion-item:hover::before,
.vs-suggestion-item.vs-highlighted::before {
    transform: translateX(100%);
}

.vs-suggestion-item:first-child {
    border-radius: 16px 16px 0 0;
}

.vs-suggestion-item:last-child {
    border-radius: 0 0 16px 16px;
}

.vs-suggestion-item:hover,
.vs-suggestion-item.vs-highlighted {
    background: #f0f4ff;
}

.vs-suggestion-icon {
    opacity: 0.5;
    flex-shrink: 0;
}

.vs-suggestion-icon svg {
    width: 16px;
    height: 16px;
    stroke: #6b7280;
    stroke-width: 2;
    fill: none;
}

.vs-suggestion-text {
    flex: 1;
    font-size: 14px;
    color: #374151;
}

.vs-suggestion-text mark {
    background: linear-gradient(135deg, #667eea20, #764ba220);
    color: inherit;
    font-weight: 500;
    padding: 2px 4px;
    border-radius: 4px;
}

/* Dark mode */
/*
@media (prefers-color-scheme: dark) {
    .vs-search-form {
        background: #1e293b;
        box-shadow:
                0 10px 25px rgba(0, 0, 0, 0.3),
                0 20px 48px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .vs-search-input {
        color: #f1f5f9;
    }

    .vs-search-input::placeholder {
        color: #64748b;
    }

    .vs-close-btn svg,
    .vs-search-icon svg,
    .vs-clear-btn svg,
    .vs-suggestion-icon svg {
        stroke: #94a3b8;
    }

    .vs-close-btn:hover,
    .vs-clear-btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .vs-suggestions-dropdown {
        background: #1e293b;
        box-shadow:
                0 10px 25px rgba(0, 0, 0, 0.3),
                0 20px 48px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .vs-suggestion-item:hover,
    .vs-suggestion-item.vs-highlighted {
        background: #334155;
    }

    .vs-suggestion-text {
        color: #e2e8f0;
    }

    .vs-suggestion-text mark {
        background: linear-gradient(135deg, #667eea40, #764ba240);
    }
}
*/
/* Адаптивность */
@media (max-width: 768px) {
    .vs-search-form {
        width: calc(100vw - 24px);
        max-width: none;
        right: auto;
        left: 50%;
        top: 0;
        transform: translate(-80%, 0) scale(0);
        transform-origin: center center;
        /*border-radius: 0;*/
        /*padding: 4px 4px 4px 8px;*/
    }

    .vs-search-form.vs-active {
        transform: translate(-90%, 0) scale(1);
    }

    .vs-search-trigger {
        width: 48px;
        height: 48px;
    }

    .vs-search-trigger svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .vs-search-form {
        width: calc(100vw - 16px);
        /*border-radius: 0;*/
        left: 50%;
        top: 0;
        transform: translate(-80%, 0) scale(0);
    }

    .vs-search-form.vs-active {
        transform: translate(-80%, 2px) scale(1);
    }

    .vs-search-input {
        font-size: 14px;
    }

    .vs-submit-btn {
        width: 36px;
        height: 36px;
    }

    .vs-suggestion-item {
        padding: 10px 16px;
    }

    .vs-suggestions-dropdown {
        /*border-radius: 0;*/
        left: 0;
        right: 0;
    }
}

@media (max-width: 375px) {
    .vs-search-form.vs-active {
        transform: translate(-78%, 2px) scale(1);
    }
}

@media (max-width: 340px) {
    .vs-search-form {
        width: calc(100vw - 16px);
        /*border-radius: 0;*/
        left: 50%;
        top: 0;
        transform: translate(-80%, 0) scale(0);
    }

    .vs-search-form.vs-active {
        transform: translate(-74%, 2px) scale(1);
    }

    .vs-close-btn {
        width: 26px;
        height: 26px;
    }

    .vs-search-icon {
        width: 20px;
        height: 20px;
    }

    .vs-clear-btn {
        width: 24px;
        height: 24px;
    }

    .vs-submit-btn {
        width: 30px;
        height: 30px;
        margin-right: 6px;
    }

}

/* Анимация появления */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vs-search-container {
    animation: fadeIn 0.6s ease;
}

.vs-search-trigger:hover {
    animation: none;
}

/* /Volley Search */

.games-banner {
    padding: 24px 0;
}


/* Main Page Adv controls */

.mobile-adv-spawner-1 {
}

.mobile-adv-spawner-2 {
    margin: var(--gap) 0;
}

.mobile-adv-spawner-3 {}


/* .main-video-adv-cell {} */
.main-video-adv-cell--active {
    display: grid;
    grid-template-columns: auto 320px;
    gap: var(--gap);
}

@media screen and (max-width: 768px) {
    .main-video-adv-cell--active {
        grid-template-columns: 1fr;
    }
}

/* .main-news-adv-cell {} */
.main-news-adv-cell--active {
    display: grid;
    grid-template-columns: 300px auto;
    gap: var(--gap);
}

@media screen and (max-width: 768px) {

    .mobile-adv-spawner-1 {
        margin-top: calc(var(--header-height) - var(--gap));
    }

    .main-news-adv-cell--active {
        grid-template-columns: 1fr;
    }
}

/* /Main Page Adv controls */