:root
{
    --color-0: #ffffff;
    --color-1: #222126;
    --color-2: #1B1A1E;
    --color-4: #7E7E7E;
    --color-accent: #4A8FFF;
    --color-accent-light: #bfd5f9;
    --color-live: #F01F3F;
    --color-pool: #932CFA;
    --color-padel: #14A68C;
    --color-6: #C7C7C7;
    --color-accent2: #E5641C;
    --color-7: #E9E9E9;
    --color-8: #F0F0F0;
    --color-9: #E6F0FF;
    --color-11: #F5F5F5;
    --color-12: #FBFCFF;
    --color-custom-black: #1b1a1e;
    --color-active-link: #18a0fb;
    --color-matchlive: #fdbfc8;
    --color-match-next: #e2eaf9;
    --color-theme-dark: #d9d2e4;

    --color-b-red: #F53540;
    --color-b-yellow: #FFD900;
    --color-b-green: #14A68C;
    --color-b-brown: #7C4209;
    --color-b-blue: #4A8FFF;
    --color-b-hover-blue: #287AFF;
    --color-b-pink: #f56476;
    --color-b-black: #3D3C40;

    --font-family: 'Montserrat', sans-serif;
    --font-weight: 400;
    --font-size: 16px;
    --theme-icon-bg-color: #f1f1f1;

    /*Online Scooring colors*/
    --color-online-txt-light: #222126;
    --color-online-txt-dark: #ffffff;
    --color-online-sc-light: #F5F5F5;
    --color-online-menu: #3D3C40;
    --color-online-menu2: #323135;

    --color-gr-datepicker-active: linear-gradient(to bottom, #08c, #04c);

    --color-tournament-state-1-bg: #f0f0f0;  /* DRAFT */
    --color-tournament-state-2-bg: #cce5ff;  /* COMING */
    --color-tournament-state-3-bg: #d4edda;  /* REGISTRATION */
    --color-tournament-state-4-bg: #f8d7da;  /* ONLINE */
    --color-tournament-state-5-bg: #fff3cd;  /* PAUSED */
    --color-tournament-state-6-bg: #e2e3e5;  /* CLOSED */
    --color-tournament-state-7-bg: #b8daff;  /* CANCELLED */
}

[data-theme="light"] {
    --color-3: #3D3C40;
    --color-5: #323135;
    --color-10: #F5F9FF;
    --color-11: #F5F5F5;

    --theme-icon-bg-color: #f1f1f1;
    --color-underline-submenu: #dadada;

    /*Modal colors*/
    --color-modal-bg: #F5F5F5;

    /* Основные цвета страницы */
    --main-bg-color: #F5F5F5;
    --secondary-bg-color: #ffffff;
    --text-color: #3D3C40;

    /* Поля ввода */
    --input-bg: #f7f8fa;
    --input-disabled-bg: #e4e5e7;
    --input-border: #cccccc;
    --input-text-color: #3D3C40;
    --input-disabled-text-color: #8B8A8C;
    --input-focus-border: #2684ff;
    --input-hover-bg: #89b1fc;
    --input-focus-shadow: rgba(0, 123, 255, 0.3);

    /* Placeholder / label */
    --label-color: #777777;
    --placeholder-color: transparent;

    /* Кнопки управления полем */
    --input-icon-color: #666666;

    /* Цвет ошибки */
    --input-error-border: #e55353;

    /* Autofill фон */
    --input-autofill-bg: #e6f0ff;

    /* Логотип */
    --logo-bg-color: black;
    --logo-bg-img: url('/img/logo/basic_black.png');
    --logo--short-bg-img: url('/img/logo/short_basic_black.png');

    /* вторичный текст */
    --text-caption: rgba(0, 0, 0, 0.6);
    --text-caption-hover: #4A8FFF;

    /* Таблица */
    --table-bg-color: #f7f8fa;
    --table-success-bg-color: #dff0d8;
    --table-match_status-3-4-bg-color: #F5F5F5;
    --table-match_status-5-bg-color: var(--color-draw-match) ; /* paused */
    --table-match_item_link: var(--color-4);
    --table-hover-bg: rgba(233, 236, 239, 0.85);

    --highlight-draw-player-row-bg-color: #f5f5f5;
    --group_match-highlighted-cell-color: rgb(34, 102, 138);
    --group_match-highlighted-crossed-cell-color: var(--color-0);
    /* Заголовок */
    --heading-bg-color: #F5F5F5;

    --color-bg-match-type: #ffffff;
    --color-match-next: #e2eaf9;
    --color-draw-match: #ffffff;
    --border-color-match: #F0F0F0;
    --table-border-color-match: var(--color-6);
    --match-active-hover-color: #F5F9FF;

    --control-bg-color-disabled: #e9ecef;
    --control-txt-color-disabled: #7c8a96;

    --color-bg-active-list-item: #c3d6f3;

    /* Alert colors */
    --alert-primary-bg:    #cce5ff;
    --alert-primary-text:  #004085;
    --alert-primary-border:#b8daff;

    --color-bg-file-selector-button: noset;
}

[data-theme="dark"] {
    --color-3: #cdcdcd;
    --color-5: #323135;
    --color-10: #2f2f2f;
    --color-11: #d3d3d3;

    --theme-icon-bg-color: #007932;
    --color-underline-submenu: #696969;

    /*Modal colors*/
    --color-modal-bg: #222126;

    /* Основные цвета страницы */
    --main-bg-color: #222126;
    --secondary-bg-color: #1B1A1E;
    --text-color: #ffffff;

    /* Поля ввода */
    --input-bg: #2c2f34;
    --input-disabled-bg: #3a3d42;
    --input-border: #444444;
    --input-text-color: #ffffff;
    --input-disabled-text-color: #999999;
    --input-focus-border: #347aff;
    --input-hover-bg: #8eb3f8;
    --input-focus-shadow: rgba(100, 180, 255, 0.2);

    /* Placeholder / label */
    --label-color: #999999;
    --placeholder-color: transparent;

    /* Кнопки управления полем */
    --input-icon-color: #999999;

    /* Цвет ошибки */
    --input-error-border: #ff5b57;

    /* Autofill фон */
    --input-autofill-bg: #3c445c;

    /* Логотип */
    --logo-bg-color: white;
    --logo-bg-img: url('/img/logo/basic.png');
    --logo--short-bg-img: url('/img/logo/short_basic_white.png');

    /* вторичный текст */
    --text-caption: #C7C7C7;
    --text-caption-hover: #4A8FFF;

    /* Таблица */
    --table-bg-color: #2c2f34;
    --table-success-bg-color: #5f894d;

    /* цвета матчей по статусам */
    --table-match_status-3-4-bg-color: #1f2724; /* FINISHED\WALKOVER */
    --table-match_status-5-bg-color: #ad571d; /* PAUSED */
    --color-matchlive: #8d3030; /* CURRENT */
    --color-match-next: #2d3853;/* PLANNED */

    --highlight-draw-player-row-bg-color: #595959;
    --table-match_item_link: #c5c5c5;
    --table-hover-bg: #9fb6cb85;
    --group_match-highlighted-cell-color: #ff8609;
    --group_match-highlighted-crossed-cell-color: #545e75;

    /* Заголовок */
    --heading-bg-color: #2b2b2b;

    --color-bg-match-type: #6b6b6b;
    --color-draw-match: #333333;
    --color-match-date: #ffffff;
    --border-color-match: #444444;
    --table-border-color-match: #444444;
    --match-active-hover-color: #3d3c40;

    --control-bg-color-disabled: #444444;
    --control-txt-color-disabled: #7c8a96;

    --color-bg-active-list-item: #535353;

    /* Alert colors */
    --alert-primary-bg:    #1f2a38;
    --alert-primary-text:  #e1e8f0;
    --alert-primary-border:#324354;

    --color-bg-file-selector-button: #494a4a;

    --color-tournament-state-1-bg: #333333;  /* DRAFT */
    --color-tournament-state-2-bg: #2d3853;  /* COMING */
    --color-tournament-state-3-bg: #24750b;  /* REGISTRATION */
    --color-tournament-state-4-bg: #8d3030; /* ONLINE */
    --color-tournament-state-5-bg: #ad571d;  /* PAUSED */
    --color-tournament-state-6-bg: #283d35;  /* CLOSED */
    --color-tournament-state-7-bg: #250e0e;  /* CANCELLED */
}

[data-theme="dark"] #playerSelector .btn-close
{
    filter: invert(0.8);
}

/* Переопределение переменных для Bootstrap */
[data-theme="light"],
[data-theme="dark"] {
  /* Основные цвета */
  --bs-body-bg: var(--main-bg-color);
  --bs-body-color: var(--text-color);

  /* Ссылки и акценты */
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-b-hover-blue);
  --bs-primary: var(--color-accent);
  --bs-primary-bg-subtle: var(--input-autofill-bg);
  --bs-primary-text: var(--text-color);

  /* Инпуты и формы */
  --bs-form-control-bg: var(--input-bg);
  --bs-form-control-color: var(--input-text-color);
  --bs-form-control-border-color: var(--input-border);
  --bs-form-control-focus-border-color: var(--input-focus-border);
  --bs-form-control-placeholder-color: var(--label-color);
  --bs-form-control-disabled-bg: var(--input-bg);
  --bs-form-control-disabled-color: var(--label-color);
  --bs-form-invalid-border-color: var(--input-error-border);

  /* Чекбоксы / радиокнопки */
  --bs-form-check-input-bg: var(--input-bg);
  --bs-form-check-input-border: var(--input-border);
  --bs-form-check-input-checked-bg-color: var(--color-accent);
  --bs-form-check-input-checked-border-color: var(--color-accent);

  /* Кнопки */
  --bs-btn-color: var(--text-color);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-bg: var(--color-b-hover-blue);
  --bs-btn-hover-border-color: var(--color-b-hover-blue);
  --bs-btn-disabled-bg: var(--input-bg);
  --bs-btn-disabled-border-color: var(--input-border);

  /* Фоновые цвета компонентов */
  --bs-secondary-bg: var(--input-bg);
  --bs-border-color: var(--input-border);

  /* Тени и фокус */
  --bs-focus-ring-color: var(--input-focus-border);

  /* Вторичный текст */
  --bs-secondary-color: var(--text-caption);
  --bs-secondary-text-emphasis: var(--text-caption);

  /* Компоненты */
  --bs-component-bg: var(--input-bg);
  --bs-component-bg-rgb: 247, 248, 250;
  --bs-component-color: var(--text-color);
  --bs-component-border-color: var(--input-border);
  --bs-component-hover-bg: var(--input-focus-border);
  --bs-component-hover-color: var(--text-color);
  --bs-component-hover-border-color: var(--input-focus-border);
  --bs-component-disabled-bg: var(--input-bg);
  --bs-component-disabled-border-color: var(--input-border);
  --bs-component-disabled-color: var(--label-color);
  --bs-component-dropdown-bg: var(--input-bg);
  --bs-component-dropdown-hover-bg: var(--input-border);
  --bs-component-dropdown-border-color: var(--input-border);
  --bs-component-modal-bg: var(--color-modal-bg);
  --bs-component-modal-border-color: var(--input-border);
  --bs-component-table-border-color: var(--input-border);
  --bs-component-table-separator-color: var(--input-border);

  /* таблица */
  --bs-table-bg: var(--input-bg);
  --bs-table-hover-bg: var(--table-hover-bg);

  /* заголовок */
  --bs-heading-color: var(--text-color);
}
.table {
    --bs-table-hover-bg: var(--table-hover-bg);
}

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

html
{
    min-width: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
body
{
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    background-color: var(--main-bg-color);
    color: var(--text-color);
    max-width: 100%;
    width: 100%;
    min-width: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow-x: hidden;
    scrollbar-width: none;
    box-sizing: border-box;
}

a
{
    color: var(--color-active-link);
}
a:hover
{
    color: var(--color-accent);
}
.link-caption {
    color: var(--text-caption);
    text-decoration: underline;
    cursor: pointer;
}
.link-caption:hover {
    color: var(--text-caption-hover);
    text-decoration: underline;
}
.basic_color
{
    color: var(--text-color);
}

.mt-4px
{
    margin-top: 4px;
}
.mt-16px
{
    margin-top: 16px;
}
.mb-10px
{
    margin-bottom: 10px;
}
.mb-16px
{
    margin-bottom: 16px;
}
.mt-24px
{
    margin-top: 24px;
}
.mt-32px
{
    margin-top: 32px;
}
.mt-48px
{
    margin-top: 48px;
}
.mb-48px
{
    margin-bottom: 48px;
}
.mt-72px
{
    margin-top: 72px;
}
.mb-72px
{
    margin-bottom: 72px;
}
.f-11px
{
    font-size: 11px;
}
.f-12px
{
    font-size: 12px;
}
.f-24px
{
    font-size: 24px;
}
.f-32px
{
    font-size: 32px;
}
.f-05em
{
    font-size: 0.5em;
}
.f-06em
{
    font-size: 0.6em;
}
.no-shadow
{
    text-shadow: none;
}

.c3
{
    color: var(--color-3);
}
.c4
{
    color: var(--color-4);
}

.alert-primary {
  background-color: var(--alert-primary-bg) !important;
  color:            var(--alert-primary-text) !important;
  border-color:     var(--alert-primary-border) !important;
}

.semibold
{
    font-weight: 500;
}
.text-bg-light
{
    color: var(--color-3) !important;
    background-color: var(--color-9) !important;
}
.bg-c0
{
    background-color: var(--color-0) !important;
}
.bg-c11
{
    background-color: var(--color-11) !important;
}
.bg-panel
{
    background: linear-gradient(180deg, var(--main-bg-color) 0%, var(--main-bg-color) 18%, var(--main-bg-color) 82%)
}

.width-240
{
    width: 240px;
    min-width: 240px;
}

.content
{
    flex: 1;
    margin: 0;
    padding-top: 20px;
    position: relative;
    z-index: 1020;
}

.form-row {
    padding: 20px;
    margin-bottom: 20px;
    background-color: var(--secondary-bg-color);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

/**
 * Carousel Styles
 */
#carousel-post .carousel-inner
{
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
#carousel-post .carousel-indicators
{
    display: flex !important;
}
#carousel-post .carousel-indicators button
{
    box-sizing: content-box;
    width: 20px;
    height: 4px;
    padding: 0;
    margin: 0 2px;
    border: none !important;
    border-radius: 2px !important;
    background-color: var(--color-0) !important;
    opacity: 0.5;
    transition: opacity .6s ease, width .3s ease;
}
#carousel-post .carousel-indicators .active
{
    width: 26px;
    height: 4px;
    background-color: var(--color-accent) !important;
    opacity: 1;
}
#carousel-post .carousel-item
{
    position: relative;
    width: 100%;
    aspect-ratio: 14 / 6;       /* desctop: about 1568×556 (≈2.82:1) */
    overflow: hidden;
}

/* If old browser doesn't support aspect-ratio */
@supports not (aspect-ratio: 1)
{
    #carousel-post .carousel-item
    {
        height: 0;
        padding-top: calc(6 / 14 * 100%); /* (height/width)*100% ≈ 42.86% */
    }
}
#carousel-post .carousel-item img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}
@media (max-width: 576px)
{
    #carousel-post .carousel-indicators button
    {
        width: 16px;
        height: 3px;
    }
    #carousel-post .carousel-indicators .active
    {
        width: 20px;
        height: 3px;
    }
}
@media (max-width: 768px)
{
    #carousel-post .carousel-item
    {
        aspect-ratio: 900 / 1280;
    }
    @supports not (aspect-ratio: 1)
    {
        #carousel-post .carousel-item
        {
            height: 0;
            padding-top: 142.22%; /* (1280/900)*100% ≈142.22% */
        }
    }
}
@media (min-width: 768px)
{
    #carousel-post .carousel-indicators
    {
        display: flex;
    }
}

#carousel-post .carousel-control-prev,
#carousel-post .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 30%;
    width: 24px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#carousel-post .carousel-control-prev {
    left: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

#carousel-post .carousel-control-next {
    right: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

#carousel-post .carousel-control-prev-icon,
#carousel-post .carousel-control-next-icon {
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
}

#carousel-post .carousel-control-prev:hover,
#carousel-post .carousel-control-next:hover {
    background: rgba(0, 0, 0, 0.4);
}
/* End of Carousel */


.footer-copyright
{
    background-color: var(--color-2);
    padding: 16px 66px;
    color: var(--color-0);
    font-size: 12px;
    font-weight: normal;
}
.footer-copyright .copyright
{
    white-space: nowrap;
}
.footer-copyright .social-lists-container
{
    column-gap: 70px;
}
.footer-copyright .social-media-list>li a
{
    color: var(--color-0);
    transition: none;
    text-wrap: nowrap;
}
.footer-copyright .social-media-list>li a:hover
{
    color: var(--color-accent);
}
.footer-copyright .social-media-list>li.lnk a
{
    font-size: 12px;
    font-weight: normal;
}

@media (max-width: 576px)
{
    .footer-copyright .copyright
    {
        text-align: center;
        margin-bottom: 5px;
        width: 100%;
    }
    .footer-copyright .social-lists-container
    {
        flex-direction: column;
    }
    .footer-copyright .social-media-list
    {
        margin-bottom: 5px;
    }
}

@media (max-width: 768px)
{
    .footer-copyright .copyright
    {
        text-align: center;
        margin-bottom: 5px;
        width: 100%;
    }
    .footer-copyright .social-lists-container
    {
        justify-content: center !important
    }
}

.stream-item
{
    border-radius: 12px;
    background-color: var(--color-0);
    position: relative;
}
.stream-item .badge
{
    font-size: 11px;
    font-weight: var(--font-weight);
    margin-right: 6px;
}
.stream-item .post-image .badge
{
    top: 12px;
    left: 12px;
    z-index: 1;
}
.stream-item .post-image .badge.right
{
    right: 12px;
    top: 12px;
    left: auto;
    padding-right: 0;
}
.stream-item .post-image .badge.right_bottom
{
    right: 12px;
    bottom: 12px;
    top: auto;
    left: auto;
    padding-right: 0;
    font-weight: var(--font-weight);
    background-color: var(--color-1);
    color: var(--color-0);
    padding: 4px;
    margin: 0;
    border-radius: 0;
}
.stream-item .post-image .badge.right .fa
{
    margin-bottom: 2px;
}
.stream-item .post-image, .stream-item .post-video
{
    overflow: hidden;
    margin-bottom: 16px;
    max-height: 165px;
}
.stream-item h4
{
    font-size: var(--font-size);
    margin-bottom: 16px;
    max-height: 40px;
}
.stream-item h4 a
{
    color: var(--text-color);
}
.stream-item h4 a:hover
{
    color: var(--color-accent);
}

.streaminfo
{
    padding: 0 12px 12px 12px;
    overflow: hidden;
}
.streamlist .post-content
{
    margin-bottom: 16px;
    border-radius: 12px;
    height: 320px;
}
.streamlist .post-content .post-image-cover
{
    border-radius: 12px 12px 0 0;
}
.streamlist .post-desc
{
    max-height: 30px;
}
.streamlist p
{
    margin-bottom: 0;
    line-height: auto;
}
.streamlist .bottom
{
    overflow: hidden;
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-height: 22px;
    right: 75px;
}
.streamlist .bottom_date
{
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 12px;
    max-height: 22px;
}

.tournslist > div
{
    margin-bottom: 24px;
}
.tournslist .tourn
{
    position: relative;
    overflow: hidden;
    background-color: var(--color-1);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.tournslist .tourn a
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.tournslist .tourn img
{
    transition: opacity 0.4s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
}
@media (max-width: 1264.8px) {
    .tournslist .tourn img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
}
.tournslist .tourn h4
{
    flex: 1;
    color: var(--color-0);
    z-index: 1;
    padding: 20px;
    text-align: center;
    opacity: 100% !important;
}
.tournslist .bg
{
    height: 332px;
}
.tournslist .bg h4
{
    font-size: 26px;
}
.tournslist .sm h4
{
    font-size: 16px;
}
.tournslist .sm
{
    height: 156px;
    margin-bottom: 20px;
}
.tournslist a img
{
    opacity: 40%;
}
.tournslist a:hover img
{
    opacity: 80%;
}

.submenu.nav .nav-link
{
    font-weight: 400;
    font-size: 14px;
    color: var(--text-color);
    padding: 0;
    margin-right: 8px;
    margin-left: 8px;
    position: relative;
}
.submenu.nav.float-end .nav-link
{
    margin-left: 20px;
    margin-right: 0;
}
.submenu.nav .nav-item.active
{
    border-bottom: 3px solid var(--color-accent);
}
.submenu.nav .nav-item.active a
{
    color: var(--color-accent);
    font-weight: 500;
}
.submenu.nav .nav-link:hover
{
    color: var(--color-accent);
}
.submenu.nav .nav-item:hover
{
    border-bottom: 3px solid var(--color-accent-light);
}
.submenu.nav .nav-item
{
    border-bottom: 0.5px solid var(--color-underline-submenu);
}
.submenu.nav .nav-item .nav-link[data-count]
{
    position: relative;
    padding-right: 0;
}
.submenu.nav .nav-item .nav-link[data-count]::after
{
    content: attr(data-count);
    display: inline-block;
    margin-left: 0.3em;
    font-size: 0.85em;
    color: #007bff;
    vertical-align: top;
    line-height: 0.5;
}
@media (max-width: 767px)
{
    .submenu.nav .nav-item
    {
      margin-bottom: 10px;
    }
}

.table
{
    font-size: 12px;
}
.table th
{
    background-color: var(--color-5);
    color: var(--color-0);
    font-weight: 500;
    font-size: 10px;
}
.table th:first-child
{
    border-radius: 8px 0 0 0;
}
.table th:last-child
{
    border-radius: 0 8px 0 0;
}

.table td
{
    border-bottom-width: 0;
}
.table:not(.drawtbl) td
{
    background-color: var(--table-bg-color);
}
.table td, .table td a
{
    color: var(--text-color);
}
.table td.imp, .table td.imp a
{
    font-weight: 500;
}
.table th a
{
    color: var(--color-0);
}
.table td a:hover, .table td.imp a:hover, .table th a:hover
{
    color: var(--color-accent);
}
.table .profile_image
{
    width: 37px;
    height: 37px;
    margin-right: 10px;
    border-radius: 37px;
}
.table>:not(caption)>*>* 
{
    padding: 16px 24px;
}
.table .tnumber
{
    width: 4.5%;
    min-width: 40px;
}
.table .t30p
{
    width: 30%;
    min-width: 50px;
}

.person_header
{
    width: 600px;
    margin-bottom: 44px;
    margin-top: 48px;
}
.person_header .photo
{
    width: 250px;
    height: 250px;
    margin-right: 64px;
    border-radius: 444px;
    overflow: hidden;
}
.person_header.dpairs .photo
{
    width: 125px;
    height: 125px;
    margin-right: 10px;
    border-radius: 222px;
    margin-top: 44px;
}
.person_header.dpairs .photo:nth-child(even)
{
    margin-right: 30px;
}
.person_header .photo img
{
    width: 100%;
}
.person_header.pairs
{
    width: 914px;
}
.person_header.dpairs
{
    width: 914px;
}
.person_header .info
{
    overflow: hidden;
}
.person_header h1
{
    margin-top:44px;
    margin-bottom: 28px;
    color: var(--text-color);
    font-size: 32px;
    font-weight: 900;
}
.person_header p
{
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 16px;
}
.person_header p span
{
    display: inline-block;
    margin-right: 18px;
    font-weight: 500;
}
.person_header .break
{
    display: none;
}
#player_link .person_header
{
    margin: 0;
}
.object_header
{
    background-color: var(--secondary-bg-color);
    border-radius: 12px;
    padding: 0px 10px 10px 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.object_header > div
{
    overflow: hidden;
}
.object_header img
{
    max-width: 100%;
    max-height: 265px;
    border-radius: 12px !important;
}
.object_header h1
{
    margin: 24px 24px 24px 0;
    font-weight: 900;
    font-size: 32px;
}
.object_header .subhdrt
{
    font-size: 14px;
    color: var(--color-accent);
    margin-bottom: 6px;
}
.object_header .subhdrv
{
    font-size: 14px;
    color: var(--text-color);
    line-height: 25px;
}
.object_header .subhdrv strong
{
    font-size: 18px;
    font-weight: 500;
}
.object_header .subhdrv b
{
    font-weight: 500;
}

@media (max-width: 992px)
{
    .table
    {
        font-size: 14px;
    }
    .table th
    {
        font-size: 12px;
    }
    .object_header
    {
        padding: 0px 10px 5px 20px;
    }
    .object_header h1
    {
        font-size: 28px;
    }
    .object_header .subhdrt
    {
        font-size: var(--font-size);
    }
    .object_header .subhdrv
    {
        font-size: var(--font-size);
    }
    .person_header.pairs .break
    {
        clear: both;
        display: block;
    }
    .person_header.pairs .photo
    {
        margin-right: 0;
    }
    .person_header.pairs .photo ~ .photo
    {
        float: right !important;
    }
    .person_header.pairs .info
    {
        text-align: center;
    }
}
@media (max-width: 768px)
{
    .object_header
    {
        padding: 0px 10px 5px 20px;
    }
    .object_header h1
    {
        font-size: 24px;
    }
    .person_header.pairs
    {
        width: 100%;
    }
    .person_header .photo
    {
        margin-right: 32px;
    }
}
@media (max-width: 576px)
{
    .object_header
    {
        padding: 0px 10px 5px 20px;
    }
    .table>:not(caption)>*>*
    {
        padding: 12px 12px;
    }
    .tab-content table td.vMiddle.imp img
    {
        max-width: none;
    }
    .object_header h1
    {
        font-size: 22px;
    }
    .person_header
    {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .person_header.pairs
    {
        width: 100%;
    }
    .person_header.pairs .photo, .person_header.pairs .photo ~ .photo
    {
        float: none !important;
        margin: 24px auto;
    }
}

.personProfile > p
{
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 40px;
}
.personProfile .desc
{
    margin-bottom: 40px;
}
.personProfile p span
{
    color: var(--color-4);
}

.match_div
{
    max-width: 940px;
    margin: auto;
    background-color: var(--secondary-bg-color);
    border-radius: 12px;
    border-color: var(--color-7);
    overflow: hidden;
}
.match_div .hdr
{
    background-color: var(--color-5);
    padding: 12px 24px;
    font-size: 12px;
    color: var(--color-0);
}
.match_div .hdr a
{
    color: var(--color-0);
}
.match_div .hdr a:hover
{
    color: var(--color-accent);
}
.match_div .hdr .badge
{
    font-weight: var(--font-weight);
}
.match_div .hdr .badge.text-bg-white
{
    color: var(--text-color) !important;
    background-color: var(--color-bg-match-type) !important;
}
.match_div i.win
{
    color: var(--color-accent);
}
.match_div .player.l i.win,
.match_div .float-start i.win
{
    margin-left: 8px;
}
.match_div .player.r i.win,
.match_div .float-end i.win
{
    margin-right: 8px;
}
.match_div .match_main
{
    padding: 27px 0 27px 0;
    margin: 0 auto;
    max-width: 500px;
    color: var(--text-color);
}
.match_div .match_main.pairs
{
    max-width: 800px;
}
.match_div .match_main h4
{
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 5px;
}
.match_div .match_main p
{
    text-align: center;
    font-size: 12px;
    margin: 0;
    color: var(--text-color);
}
.match_div .match_main .info
{
    display: flex;
    justify-content: space-between;
}
.match_div .match_main .player, .h2hstats .player
{
    width: 114px;
}
.match_div .match_main.pairs .player
{
    width: 230px;
}
@media (max-width: 768px)
{
    .match_div .match_main.pairs .player
    {
        width: 200px;
    }
}
@media (max-width: 576px)
{
    .match_div .match_main.pairs .player
    {
        width: 120px;
    }    
}
.match_div.h2h_select .match_main .player
{
    width: 150px;
}
.match_div .match_main .player .plim, .h2hstats .player .plim
{
    display: block;
    width: 100%;
    height: 114px;
    border-radius: 86px;
    margin-bottom: 16px;
    overflow: hidden;
}
.h2h_select.match_div .match_main .player .plim
{
    height: 150px;
}
.match_div .match_main .player .plim img, .h2hstats .player .plim img
{
    width: 100%;
}
.match_div .match_main .player p, .h2hstats .player p
{
    margin: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    height: 24px;
    display: flex;
    justify-content: center;
}
.match_div .match_main .info .player, .h2hstats .player
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.match_div .match_main .info .player p
{
    height: auto;
    align-items: center;
}
.h2hstats .player p
{
    height: auto;
    width: fit-content;
}
.match_div .match_main .player span, .h2hstats .player span
{
    overflow: visible;
}
.match_div .match_main .player.l p .fi, .h2hstats .player.l p .fi
{
    margin-right: 8px;
    vertical-align: middle;
    min-width: 20px;
    min-height: 16px;
}
.match_div .match_main .player.r p .fi, .h2hstats .player.r p .fi
{
    margin-left: 8px;
    vertical-align: middle;
    min-width: 20px;
    min-height: 16px;
}
.match_div .match_main .score
{
    margin-top: 35px;
    height: 54px;
    display: flex;
    align-items: center;
}
.match_div .match_main .score strong
{
    font-size: 44px;
    font-weight: bold;
    color: var(--color-3);
}
.match_div .match_main .score span
{
    margin: 0px 16px;
    font-size: 20px;
    font-weight: var(--font-weight);
    color: var(--text-color);
}
@media (max-width: 576px) {
    .match_div .match_main .player p {
        font-size: 12px;
    }
}
@media (max-width: 405px) {
    .match_div .match_main .score span
    {
        margin: 0px;
    }
    .match_div .match_main .player p {
        font-size: 10px;
    }
}
.match_div .match_video
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-7);
    padding: 14px 0px;
}
.match_div .match_video i
{
    display: inline-block;
    margin-right: 8px;
}
.match_div .match_video a
{
    flex: auto;
    font-size: 12px;
}
.match_div .match_video a:hover
{
    color: var(--color-accent);
    text-decoration: underline;
}
.match_div .video-container
{
    text-align: center;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
    border: 1px solid var(--border-color-match)
}
.match_div .video-container.hide-player
{
    max-height: 0;
}
.match_div .video-container.show-player
{
    max-height: 354px;
}
.match_div .video-container iframe
{
    border-radius: 10px;
    width: 100%;
    max-width: 630px;
    height: 354px;
}
.match_div .video-container-toggle
{
    color: var(--color-active-link);
    font-weight: bold;
}
.match_div .frames
{
    border-top: 1px solid var(--color-7);
    padding: 40px 180px;
}
.match_div .frames.pairs
{
    padding: 40px 40px;
}
.match_div .frames_in
{
    display: flex;
    justify-content: space-around;
}
.match_div .frames_in > div
{
    max-width: 130px;
    padding: 12px;
    font-size: 18px;
    color: var(--color-3);
    text-align: center;
}
.match_div .frames_in > div.bg
{
    background-color: var(--color-10);
}
.match_div .frames_in > div > *
{
    margin-bottom: 12px;
}
.match_div .frames_in h4
{
    height: 26px;
    overflow: hidden;
    font-weight: 500;
    font-size: 12px;
}
.match_div .frames_in p strong
{
    font-weight: 700;
}
.match_div .frames_in p.curf
{
    font-weight: bold;
    color: var(--color-live);
}
.match_main .info .player .mcurm
{
    font-size: 24px;
    margin-top: 16px;
    color: var(--color-live);
}
.match_main .player.mcurp .mcurm
{
    display: block;
}
.match_main .player:not(.mcurp) .mcurm, .match_main.not_online .info .player .mcurm
{
    display: none;
}

@media (max-width: 992px)
{
    .match_div .frames
    {
        padding: 40px 100px;
    }
    .match_div .frames.pairs
    {
        padding: 40px 20px;
    }
}

@media (max-width: 768px)
{
    .match_div .match_main
    {
        padding: 20px 0 27px 0;
    }
    .match_main .info .player .mcurm
    {
        font-size: 20px;
        margin-top: 10px;
    }
    .match_div .frames
    {
        padding: 20px 60px;
    }
    .match_div .frames.pairs
    {
        padding: 20px 20px;
    }
    .match_div .match_main .info, .matches_list .h2hstats
    {
        justify-content: space-around;
    }
    .match_div .match_main .player, .h2hstats .player
    {
        width: 100px;
    }
    .match_div.h2h_select .match_main .player
    {
        width: 100px;
    }
    .match_div .match_main .player .plim, .h2hstats  .player .plim
    {
        height: 100px;
    }
    .h2h_select.match_div .match_main .player .plim
    {
        height: 100px;
    }
}
@media (max-width: 576px)
{
    .match_div .video-container iframe
    {
        height: 232px;
    }
    .match_div .match_main .score strong
    {
        font-size: 36px;
    }
    .match_div .frames
    {
        padding: 20px 0px;
    }
    .match_div .match_main .player, .h2hstats .player
    {
        width: 80px;
    }
    .match_div.h2h_select .match_main .player
    {
        width: 80px;
    }
    .match_div .match_main.pairs .player .plim
    {
        height: 55px;
    }
    .match_div .match_main .player .plim, .h2hstats  .player .plim
    {
        height: 80px;
    }
    .h2h_select.match_div .match_main .player .plim
    {
        height: 80px;
    }
}

.stats_div form, .stats_div form select
{
    font-size: 12px;
    font-weight: var(--font-weight);
}
.stats_div .stats
{
    font-size: 12px;
    color: var(--text-color);
    padding: 0 16px;
}
.stats_div .stats_graph
{
    margin: 16px 0;
}
.stats_div .stats i.fi
{
    margin-right: 8px;
}
.stats_div .stats strong
{
    font-weight: 500;
}
.stats_div ul
{
    list-style-type: none;
}
.stats_div ul li
{
    margin-bottom: 4px;
}
.stats_div h4
{
    color: var(--text-color);
    font-size: 10px;
    padding: 6px 16px;
    background-color: var(--heading-bg-color);
    margin-top: 18px;
    margin-bottom: 10px;
}

.matches_list h3
{
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 24px;
    margin-top: 48px;
}
.matches_list h3 a
{
    color: var(--text-color);
}
.matches_list h3 a:hover
{
    color: var(--color-accent);
}
.matches_list h3 i
{
    margin-right: 8px;
}
.matches_list h4
{
    color: var(--text-color);
    font-weight: 500;
    font-size: 10px;
    margin: 6px 16px;
}
.matches_list h4 a
{
    color: var(--text-color);
}
.matches_list h4 a:hover
{
    color: var(--color-accent);
}
.matches_list .hdr
{
    background-color: var(--heading-bg-color);
    margin-top: 18px;
    margin-bottom: 10px;
}
.matches_list, .h2hstats
{
    max-width: 650px;
}
.h2hcontent .matches_list
{
    width: 765px;
}
.h2hstats
{
    display: flex;
    justify-content: space-between;
    margin-bottom: 44px;
}
.h2hstats .perc
{
    display: flex;
    flex-grow: 1;
    margin: 0 48px;
    align-items: center;
}
.h2hstats .perc > div:not(.line)
{
    width: 60px;
    text-align: center;
    color: var(--text-color);
}
.h2hstats .perc > div h4
{
    font-size: 27px;
    font-weight: 500;
    margin-bottom: 0;
}
.h2hstats .perc > div p
{
    font-size: 12px;
}
.h2hstats .perc > div.line
{
    flex-grow: 1;
    background-color: var(--color-accent);
    width: 100%;
    height: 4px;
    margin: 0 16px;
}
.h2hstats .perc > div.line .line_in
{
    height:100%;
    background-color: var(--color-5);
}
@media (max-width: 992px)
{
    .stats_div form, .stats_div form select
    {
        font-size: 14px;
    }
    .stats_div .stats
    {
        font-size: 14px;
    }
    .stats_div h4
    {
        font-size: 12px;
    }
    .matches_list h4
    {
        font-size: 14px;
    }
}
@media (max-width: 576px)
{
    .h2hstats .perc
    {
        flex-grow: initial;
        margin: 0 0px;
    }
}

#playersList, #playerSelector .form-control, #playerSelector .form-label, #playerSelector .form-select
{
    font-weight: var(--font-weight);
    font-size: 12px;
}
#playersList
{
    overflow-y: auto;
    max-height: 300px;
}
#playerSelector
{
    padding-top: 0;
}
#playerSelector .form-select:disabled
{
    background-color: var(--control-bg-color-disabled);
    color: var(--control-txt-color-disabled);
}
#playerSelector .person:hover, #playerSelector .person.active
{
    background-color: var(--color-bg-active-list-item);
}
#playerSelector .person
{
    cursor: pointer;
}
#playerSelector .person_in
{
    overflow: hidden;
    position: relative;
}
.person
{
    position: relative;
    margin: 0 0 10px 0;
    padding: 10px;
    border: 1px solid lightgray;
}
.person img
{
    display: block;
    position: absolute;
    max-width: 50px;
    max-height: 100px;
}
.person .person_data
{
    margin-left: 70px;
}
.person .person_data p
{
    margin: 0;
}
.person i.dlt
{
    display: none;
    position: absolute;
    top: -5px;
    right: -5px;
    color: red;
    cursor: pointer;
}
.person i.pri
{
    display: block;
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: green;
    cursor: pointer;
}
.person span.prior
{
    display: block;
    position: absolute;
    bottom: 0;
    right: 25px;
    color: green;
}
.person.closable i.dlt
{
    display: block;
}
.person.closable i.pri, .person.closable span.prior
{
    display: none;
}
.person_data h3
{
    font-size: 16px;
    margin: 0 0 10px 0;
}

.match_item
{
    display: flex;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid;
    border-color: var(--border-color-match);
    background-color: var(--color-draw-match);
    margin-bottom: 10px;
}
/* Online match */
.match_item.match_status_1, .draw_match.match_status_1 table,
.groupplayertr td.match_status_1, .groupplayertr td.match_status_1 
{
    background-color: var(--color-matchlive) !important;
}

/* Planned match with both players defined */
.match_item.match_status_2.match_pr, .draw_match.match_status_2.match_pr table,
.groupplayertr td.match_status_2.match_pr, .groupplayertr td.match_status_2.match_pr
{
    background-color: var(--color-match-next) !important;
}

/* Planned match */
.match_item.match_status_2, .draw_match.match_status_2 table
{
}

/* Finished match */
/* Walkover match */
.match_item.match_status_4, .match_item.match_status_3,
.draw_match.match_status_4 table, .draw_match.match_status_3 table,
.groupplayertr td.match_status_4, .groupplayertr td.match_status_3 
{
    background-color: var(--table-match_status-3-4-bg-color) !important;
}

/* Paused match */
.match_item.match_status_5 ,.draw_match.match_status_5 table
{
    background-color: var(--table-match_status-5-bg-color) !important;
}

.match_item:not(.inactive):hover
{
    background-color: var(--match-active-hover-color);
    cursor: pointer;
}
.match_item .date
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin-right: 16px;
    color: var(--color-match-date);
    font-size: 12px;
    width: 100px;
}
.match_item .players
{
    flex-grow: 1;
    font-size: 12px;
    color: var(--text-color);
}
.short_ml .match_item .players
{
    width: 250px;
}
.short_ml .matches_list:last-child .match_item
{
    margin: 48px 0 82px 0;
}
.match_item .players div:first-child
{
    margin-bottom: 12px;
}
.match_item .players i
{
    margin-right: 8px;
}
.match_item .players i.win
{
    color: var(--color-accent);
}
.match_item .players strong
{
    font-weight: 600;
}
.match_item .add_link
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--color-4);
    font-size: 14px;
    width: 100px;
}
.match_item .add_link a
{
    margin-left: 8px;
    color: var(--table-match_item_link);
}
.match_item .add_link a:hover
{
    color: var(--color-accent);
}
@media (max-width: 992px)
{
    .match_item .players
    {
        font-size: 14px;
    }
    .short_ml .match_item .players
    {
        width: 290px;
    }
}
@media (max-width: 576px)
{
    .match_item
    {
        padding: 8px 4px;
    }
    .match_item .date
    {
        margin-right: 0px;
        width: 84px;
    }
    .match_item .players i
    {
        margin-right: 4px;
    }
    .match_item .players .pname
    {
        margin-right: 6px;
        flex: 1;
    }
    .match_item .players .clearfix
    {
        display: flex;
    }
    .match_item .add_link
    {
        width: 84px;
    }
}

@media (max-width: 400px) {
    .match_item
    {
        padding: 6px 2px;
    }
    .match_item .date
    {
        margin-right: 0px;
        width: 60px;
        text-align: center;
    }
}

#draw_net_scroll
{
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
#draw_net_scroll .draw-stages
{
    display: flex;
    justify-content: space-between;
}
#draw_net_scroll .draw-stages .stage-item
{
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-4);
}
#draw_net
{
    background-color: var(--secondary-bg-color);
    border-radius: 12px;
    font-size: 12px;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#draw_net .draw_match table
{
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: var(--color-draw-match);
    border-radius: 6px;
    border-width: 1px;
    border-color: var(--table-border-color-match);
    border-style: solid;
    border-collapse: unset;
}
.draw_match .highlight-row {
    outline: 3px solid #32a67d;
    background-color: var(--highlight-draw-player-row-bg-color);
    border-radius: 3px;
}
.draw_match table {
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
}
#draw_net .draw_match:not(.inac) table:hover
{
    background-color: var(--color-10);
}
.draw_match:not(.inac)
{
    cursor: pointer;
}
.draw_match
{
    position: absolute;
    z-index: 2;
}
.draw_match .dplayer i {
    margin-right: 8px;
}
.draw_match tr.mwinner
{
    font-weight: 600;
}
#draw_net .draw_match .draw_matchid
{
    position: absolute;
    top: -15px;
    height: 15px;
    font-size: 10px;
    line-height: 15px;
}
#draw_net .draw_match td
{
    padding: 2px 6px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    border-color: gray;
}
#draw_net.bigdraw .draw_match td
{
    font-size: inherit;
}

#draw_net .marker_div
{
    background-color: #337ab7;
    color: white;
    position: absolute;
    padding: 0 5px;
}
#draw_net .hint_div
{
    font-size: 80%;
    text-align: right;
}
#draw_net .time_div
{
    position: absolute;
    top: -15px;
    right: 0;
    height: 15px;
    font-size: 10px;
    line-height: 15px;
}
.match_arrow
{
    position: absolute;
    z-index: 1;
}
.match_arrow.top
{
    border-top: 1px solid var(--color-6);
}
.match_arrow.right
{
    border-right: 1px solid var(--color-6);
}
.match_arrow.left
{
    border-left: 1px solid var(--color-6);
}
.match_arrow.bottom
{
    border-bottom: 1px solid var(--color-6);
}
#draw_net .draw_match .draw_drawid1
{
    text-align: right;
    position: absolute;
    top: 0px;
    font-size: 10px;
}
#draw_net .draw_match .draw_drawid2
{
    text-align: right;
    position: absolute;
    bottom: 0px;
    font-size: 10px;
}
#draw_net .draw_match .video-icon {
    position: absolute;
    top: -16px;
    right: 5px;
    z-index: 10;
    animation: blink 2s infinite;
}
#draw_net .draw_match .video-icon i {
    font-size: 1.2em;
    color: #337ab7;
}
#draw_net .draw_match .video-icon:hover i {
    color: #214260;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (max-width: 992px)
{
    #draw_net
    {
        font-size: 14px;
    }
    .draw_match .dplayer i
    {
        margin-right: 2px;
    }
    #draw_net .draw_match .draw_matchid
    {
        font-size: 12px;
    }
    #draw_net .time_div
    {
        font-size: 14px;
    }
    #draw_net .draw_match .draw_drawid1
    {
        font-size: 12px;
    }
    #draw_net .draw_match .draw_drawid2
    {
        font-size: 12px;
    }
}


.text-bg-primary
{
    background-color: var(--color-accent);
}

.carousel-control-next, .carousel-control-prev
{
    width: 32px;
}
.carousel-control-prev
{
    left: 6px;
}
.carousel-control-next
{
    right: 6px;
}

.carousel .carousel-control-next .fa, .carousel .carousel-control-prev .fa
{
    font-size: 18px;
}

@media (min-width: 1265px)
{
    .container, .container-lg, .container-md, .container-sm, .container-xl
    {
        max-width: 1264px;
        padding: 0;
    }
}
@media (max-width: 1264px)
{
    .container, .container-lg, .container-md, .container-sm, .container-xl
    {
        width: 100%;
        max-width: 100%;
        padding-right: 24px;
        padding-left: 24px;
    }
}
@media (max-width: 768px)
{
    .container, .container-lg, .container-md, .container-sm, .container-xl
    {
        width: 100%;
        max-width: 100%;
        padding-right: 10px;
        padding-left: 10px;
    }
}

.header.navbar-inverse
{
    background-color: var(--color-2);
    box-shadow: 0 4px 8px rgb(0 0 0 / 40%);
    color: var(--color-0);
    font-size: 16px;
}
.header.navbar-inverse .brand-text, .header.navbar-inverse .nav.navbar-nav>li>a
{
    color: var(--color-0);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
}

.header .navbar-brand img, .footer .navbar-brand img
{
    height: 37px;
    display: inline-block;
}

.header .navbar-brand
{
    margin-right: 0;
    margin-left: 0;

    padding-left: 0;
    padding-right: 0;
}

.header.navbar-inverse .navbar-toggle
{
    background: none;
    box-shadow: none;
    color: var(--color-0);
    margin: 0px 2px;
}
.header.navbar-inverse .navbar-toggle:hover
{
    background: none;
}
.header.navbar-inverse .dropdown-user button
{
    margin-left: 10px !important;
    color: var(--color-0) !important;
}
.header.navbar-inverse .dropdown-user .dropdown-menu
{
    margin-top: 10px !important;
}
@media (max-width: 992px) {
    .header.navbar-inverse
    {
        padding: 0px;
    }
    .header.navbar-inverse .dropdown-user
    {
        display: none;
    }
}
@media (max-width: 768px) {
    .header .navbar-brand img, .footer .navbar-brand img
    {
        height: 32px;
    }
}
@media (min-width: 992px) {
    #user-menu.collapse /* For desktop mode, hide collapse */
    {
        display: none !important;
    }
}

.header.navbar-inverse .navbar-nav .dropdown-menu
{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
    background: var(--color-custom-black);
    border-radius: 8px;
    min-width: 100%;
    left: 50% !important;
    margin: 0;
    transform: translateX(-50%);
    text-transform: uppercase;
}

.dropdown-menu.show
{
    display: block !important;
}

.header.navbar-inverse .navbar-nav .dropdown-menu .dropdown-item
{
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    color: #FFFFFF;
    padding: 8px 25px;
}
.header.navbar-inverse .navbar-nav .dropdown-menu .dropdown-item+.dropdown-item
{
    border: 0;
}
.header.navbar-inverse .navbar-nav .dropdown-menu .dropdown-item:hover
{
    background-color: var(--color-custom-black);
    color: var(--color-accent) !important;
}

.header.navbar-inverse .nav.navbar-nav>li>a:hover
{
    color: var(--color-accent) !important;
}
.header.navbar-inverse .nav.navbar-nav>li>a.show
{
    color: var(--color-active-link);
}
.header.navbar-inverse .nav.navbar-nav>li>a .fa
{
    transition: transform 0.3s ease;
}
.header.navbar-inverse .nav.navbar-nav>li>a.show .fa
{
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}
.dropdown-item img
{
    vertical-align: baseline;
}

@media (max-width: 1450px)
{
    .header.navbar-inverse .dropdown-user-dropdown .dropdown-menu {
        left: auto !important;
        right: 0;
        transform: none;
    }
}

.onlinescore_sm
{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.onlinescore_sm > div
{
    width: 100%;
    display: flex;
    overflow: hidden;
}
.onlinescore_sm .stats
{
    height: 31px;
    line-height: 31px;
}
.onlinescore_sm .main
{
    position: relative;
    height: 58px;
    line-height: 58px;
    background-color: var(--color-5);
}

.onlinescore_sm .main::before,
.onlinescore_sm .main::after {
    content: "";
    position: absolute;
    top: 0;
    width: 56px;
    height: 100%;
    transition: background-color 0.3s ease;
    pointer-events: none;
}
.onlinescore_sm .main::before {
    left: 0;
    background-color: var(--player1-color, transparent);
}
.onlinescore_sm .main::after {
    right: 0;
    background-color: var(--player2-color, transparent);
}

.onlinescore_sm .main .subb-b
{
    color: var(--color-0);
    font-size: 34px;
    font-weight: 500;
    display: block;
    text-transform: uppercase;
}
.onlinescore_sm .main .subb-b:first-child
{
    text-align: left;
    padding-left: 100px;
}
.onlinescore_sm .main .subb-b:last-child
{
    text-align: right;
    padding-right: 100px;
}
.onlinescore_sm .main .subb-b .curpls
{
    display: inline-block;
    line-height: 58px;
    color: var(--color-accent);
    font-size: 52px;
}
.onlinescore_sm .main .frms
{
    color: var(--color-0);
    font-size: 48px;
    background-color: var(--color-online-menu);
    font-weight: 500;
}
.onlinescore_sm .main .mtchs
{
    background-color: var(--color-0);
    display: flex;
    justify-content: center;
}
.onlinescore_sm .main .mtchs .sm
{
    color: var(--color-4);
    font-size: 40px;
    margin: 0 6px;
}
.onlinescore_sm .main .mtchs > div:not(.sm)
{
    color: var(--color-5);
    font-size: 46px;
    font-weight: bolder;
}
.onlinescore_sm .main .subb-b:first-child .curpls
{
    float: right;
}
.onlinescore_sm .main .subb-b:last-child .curpls
{
    float: left;
}
.onlinescore_sm .main .subb-b:first-child i
{
    margin-right: 16px;
}
.onlinescore_sm .main .subb-b:last-child i
{
    margin-left: 16px;
}

.onlinescore_sm .break
{
    height: 48px;
    line-height: 48px;
}
.onlinescore_sm .break .subb-b > div
{
    background: #444444;/*linear-gradient(180deg, #444444 0%, #555555 18%, #888888 100%);*/
    color: var(--color-0);
}
.onlinescore_sm .stats .subb-s
{
    background: #444444;/*linear-gradient(180deg, #888888 0%, #555555 82%, #444444 100%);*/
    color: var(--color-0);
}
.onlinescore_sm > div .subb-b
{
    flex-basis: 37.5%;
    display: flex;
}
.onlinescore_sm > div .subb-s
{
    flex-basis: 25%;
    display: flex;
}
.onlinescore_sm .subb-s > div
{
    text-align: center;
}
.onlinescore_sm .subb-s .subb-s-s
{
    flex-basis: 30%;
    overflow: hidden;
}
.onlinescore_sm .subb-s .subb-s-b
{
    flex-basis: 40%;
    overflow: hidden;
}
.onlinescore_sm .stats > div
{
    font-size: 14px;
    color: var(--text-color);
}
.onlinescore_sm .stats .subb-s-s
{
    font-weight: 500;
}
.onlinescore_sm .break .subb-b
{
    font-size: 22px;
}
.onlinescore_sm .break .subb-b > div
{
    padding: 0 0 0 16px;
}
.onlinescore_sm .break .subb-b span
{
    font-size: 22px;
    margin-right: 12px;
}
.onlinescore_sm .break .subb-b span:not(.break-log)
{
    font-size: 28px;
}
.onlinescore_sm .break .subb-b span strong
{
    font-weight: 500;
}
.onlinescore_sm .break i
{
    color: var(--color-0);
    font-weight: bold;
    font-style: normal;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 24px;
    overflow: hidden;
    display: inline-block;
    margin-right: 4px;
    text-align: center;
}
.onlinescore_sm .break .break-log
{
    align-items: center;
}


.onlinescore_xs
{
    width: 20%;
    display: flex;
    flex-direction: column;
}
.onlinescore_xs .main
{
    line-height: 36px;
    border-radius: 6px;
}
.onlinescore_xs .main hr
{
    width:100%;
    height:0;
    border:0;
    border-top:1px solid var(--color-4);
    margin:0;
}
.onlinescore_xs .main .subb-b
{
    width: 82%;
    color: var(--color-0);
    background-color: var(--color-5);
    font-size: 20px;
    display: block;
    text-transform: uppercase;
    text-align: left;
    padding-left: 12px;
}
.onlinescore_xs .main .subb-b .curpls
{
    line-height: 36px;
    color: var(--color-accent);
    float: right;
    font-size: 30px;
}
.onlinescore_xs .main .subb-b i
{
    margin-right: 12px;
}
.onlinescore_xs .main .frms
{
    width: 18%;
    font-size: 28px;
    color: var(--color-0);
    background-color: var(--color-online-menu);
    font-weight: 500;
    text-align: center;
}
.onlinescore_xs .main .mtchs
{
    border: 1px solid var(--color-5);
}
.onlinescore_xs .main .subb-s-b-s
{
    font-size: 28px;
    color: var(--color-5);
    background-color: var(--color-7);
    font-weight: 500;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
}
.onlinescore_xs .main .subb-s-b-s.sm
{
    font-size: 24px;
    color: var(--color-4);
    height: 28px;
    line-height: 26px;
}

.onlinescore, .onlinescore-ph
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.onlinescore > div, .onlinescore-ph > div
{
    width: 100%;
    text-align: center;
    overflow: hidden;
}
.onlinescore-ph
{
    font-family: Arial, sans-serif;
}
.onlinescore-ph .top
{
    flex-basis: 28%;
    flex-grow: 253;
    display: flex;
    background-color: var(--color-1);
    background-image: url("/img/scbkg.png");
    background-position: -70px -150px;
}
.onlinescore-ph .top .playernm
{
    min-height: 56px;
    padding: 4px 0;
    background-color: var(--color-2);
}
.onlinescore-ph .top .vs
{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 9%;
    font-size: 18px;
    color: var(--color-0);
}
.onlinescore-ph .curplayerpl
{
    color: var(--color-accent);
    font-size: 36px;
}
.onlinescore-ph .curplayerpl.left-side
{
    margin: 0 8px 0 0;
}
.onlinescore-ph .curplayerpl.right-side
{
    margin: 0 0 0 8px;
}
.onlinescore-ph .curplayerpl i
{
    margin: auto 6px;
}
.onlinescore-ph .playercc
{
    font-size: 14px;
}
.onlinescore-ph .playercc i.mbr
{
    margin-right: 8px;
}
.onlinescore-ph .playercc i.mbl
{
    margin-left: 8px;
}
.onlinescore-ph .playernm
{
    color: var(--color-0);
    font-size: 24px;
    overflow: hidden;
}
.onlinescore-ph .playermn
{
    height: 32px;
    overflow: hidden;
}
.onlinescore-ph .playermn.pair
{
    height: 26px;
    font-size: 18px;
}
.onlinescore-ph .playermn.pair i
{
    margin-left: 5px;
    margin-right: 5px;
}
.onlinescore-ph .playerph, .onlinescore-ph .playerph2
{
    padding: 20px;
    min-height: 0;
}
.onlinescore-ph .playerph.pair, .onlinescore-ph .playerph2.pair
{
    padding: 5px;
}
.onlinescore-ph .playerph img, .onlinescore-ph .playerph2 img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.onlinescore-ph .main
{
    padding: 12px;
    flex-basis: 72%;
    flex-grow: 640;
    display: flex;
    background-color: var(--color-5);
}
.onlinescore-ph .main .btncls
{
    flex-basis: 8.8%;
}
.onlinescore-ph .main .scrplc
{
    flex-basis: 12.1%;
}
.onlinescore-ph .main .scrbls
{
    flex-basis: 82.4%;
}
.onlinescore-ph .main .scrbls a.btn-control.selected
{
    background-color: var(--color-0);
    color: black !important;
}
.onlinescore-ph .main .scrplc .scp1f, .onlinescore-ph .main .scrplc .scp2f
{
    flex-basis: 34.0%;
    flex-grow: 116;
    background-color: var(--color-2);
    color: var(--color-0);
    font-size: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.onlinescore-ph .main .scrplc .scp1f.curpl, .onlinescore-ph .main .scrplc .scp2f.curpl
{
    background-color: var(--color-accent);
}
.onlinescore-ph .main .scrplc .scmf
{
    flex-basis: 32.0%;
    flex-grow: 127;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-0);
    color: var(--color-5);
    font-size: 38px;
    font-weight: bold;
}
.onlinescore-ph .main .scrplc .scmf span
{
    display: inline-block;
    margin: 0px 2px;
    color: var(--color-4);
    font-size: 24px;
    font-weight: normal;
}
.onlinescore-ph .main .break-info
{
    min-height: 55px;
    margin-top: 3px;
    line-height: normal;
}
.onlinescore-ph .main .remaining-info
{
    color: #97949c;
    margin-bottom: -8px;
    margin-top: 8px;
}
.onlinescore-ph .main .remaining-info i
{
    color: var(--color-0);
    font-size: 10px;
    font-style: normal;
    width: 14px;
    height: 14px;
    line-height: 16px;
    border-radius: 10px;
    overflow: hidden;
    display: inline-block;
    margin-right: 2px;
}
.onlinescore-ph .main .balls_remaining i, .onlinescore .score-info .balls_remaining i
{
    color: transparent;
}

.onlinescore i.b-0,
.onlinescore-ph i.b-0,
.onlinescore-ph .break-info i.b-0,
.onlinescore_sm .break i.b-0
{
display: inline-flex !important;
  width: 2rem;
  height: 2rem;
  border-radius: 50% !important;
  position: relative !important;

  /* 3D gradient for spherical look */
  background: radial-gradient(
    circle at 30% 30%,
    #ffffff,
    #f5f5f5 40%,
    #e0e0e0 70%,
    #cccccc
  ) !important;

  /* inner shadows for depth + outer shadow */
  box-shadow:
    inset -0.2rem -0.2rem 0.5rem rgba(255, 255, 255, 0.8),
    inset 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2),
    0 0.2rem 0.5rem rgba(0, 0, 0, 0.3) !important;

  align-items: center !important;
  justify-content: center !important;
  color: #2a2a2b !important;
  font-weight: bold;
  font-size: 1.8rem;
  text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.1);
}
.onlinescore i.b-0::before,
.onlinescore-ph i.b-0::before,
.onlinescore-ph .break-info i.b-0::before,
.onlinescore_sm .break i.b-0::before
{
  content: '';
  position: absolute;
  top: 15%;
  left: 15%;
  width: 40%;
  height: 40%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.8),
    transparent 70%
  );
  border-radius: 50%;
}


.onlinescore-ph .main .remaining-info .ahead-count
{
    word-break: break-word;
    width: 110px;
    line-height: 1.2;
    margin-left: 2px;
}

.onlinescore-ph .main .break-info i
{
    color: var(--color-0);
    font-size: 16px;
    font-style: normal;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 10px;
    overflow: hidden;
    display: inline-block;
    margin-right: 3px;
}

.onlinescore-ph .scrbls
{
    justify-content: space-between;
}
.onlinescore-ph .scrbls > div
{
    flex-basis: 21.6%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.onlinescore-ph .scrbls > div > div
{
    flex-basis: 28.4%;
}
.onlinescore-ph .scrbls .scb:not(.nonrb) a
{
    border-radius: 112px;
    color: var(--color-0);
    font-size: 48px;
    font-weight: 500;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onlinescore-ph .scrbls .scb .btn-control
{
    height: 70px !important;
    align-self: center;
    background-color: #26252b;
    color: #97949c !important;
    text-transform: uppercase;
    border-radius: 18px !important;
    font-size: 24px !important;
    line-height: 1;
    border: 1px solid #807f87;
}
.onlinescore-ph .scrbls .scb .btn-control:hover {
    /*background-color: #444;*/
    /*border-color: #777;*/
}
.onlinescore-ph .scrbls .scb
{
    display: flex;
}
.onlinescore-ph .scrbls .scb.nonrb p
{
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
    color: #97949c;
}
.onlinescore-ph .scrbls .scb.nonrb .ahead
{
    font-size: 32px;
}
.onlinescore-ph .scrbls .scb.nonrb a
{
    flex-basis: 60%;
    color: var(--color-0);
    font-weight: 500;
    font-size: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onlinescore-ph .scrbls .scb a.disabled
{
    opacity: 0.3;
}
.onlinescore-ph .sm_menu
{
    z-index: 200;
    bottom: 0;
    width: 100%;
    background-color: black;
    box-shadow: -1px -2px 30px gray;
}
.sm_menu > div
{
    padding: 10px 40px;
}
.sm_menu .btn
{
    width: 100%;
}
.onlinescore-ph .main .scmf i
{
    font-style: normal;
}
.onlinescore-ph .scrbls .scb1
{
    background: radial-gradient(circle at 30% 30%, #e0e0e0, #f0f0f0) !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.05), 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1) !important;
}
.onlinescore-ph .scrbls .scb2
{
    background-color: var(--color-b-yellow);
}
.onlinescore-ph .scrbls .scb3
{
    background-color: var(--color-b-green);
}
.onlinescore-ph .scrbls .scb4
{
    background-color: var(--color-b-brown);
}
.onlinescore-ph .scrbls .scb5
{
    background-color: var(--color-b-blue);
}
.onlinescore-ph .scrbls .scb6
{
    background-color: var(--color-b-pink);
}
.onlinescore-ph .scrbls .scb7
{
    background-color: var(--color-b-black);
}

.onlinescore .faultfreeball
{
    box-shadow: -1px -2px 30px gray;
    border: 1px solid var(--color-b-red);
    left: 40px;
    bottom: 10px;
    width: 150px;
    text-align: center;    
    background-color: var(--color-0);
    z-index: 200;
}
.onlinescore .connstatus
{
    width: 20px;
    bottom: 10px;
    left: 10px;
    z-index: 200;
}
.onlinescore .start-warning
{
    box-shadow: -1px -2px 30px gray;
    border: 1px solid var(--color-5);
    bottom: 20px;
    width: 200px;
    text-align: center;
    left: calc(50% - 100px);
    background-color: var(--color-0);
    z-index: 200;
}
.onlinescore .scoremenu
{
    left: 0;
    top: 0;
    height: 210px;
    color: var(--color-online-menu);
    background-color: var(--color-0);
    border-bottom: 1px solid var(--color-5);
    box-shadow: 0px 6px 30px gray;
    padding: 10px;
    z-index: 200;
}
.onlinescore .scoremenu .menu_btns
{
    width: 200px;
    flex-direction: column;
}
.onlinescore .scoremenu .helpdiv
{
    padding-left: 20px;
    font-size: 18px;
}

.onlinescore .score-info
{
    right: 0;
    bottom: 0;
    height: 250px;
    color: var(--color-online-menu);
    background-color: var(--color-0);
    border-top: 1px solid var(--color-online-menu2);
    box-shadow: -1px -2px 30px gray;
    padding: 10px;
    font-size: 22px;
    z-index: 2;
}
.onlinescore .score-info .info-controls
{
    width: 200px;
}
.onlinescore .score-info .top
{
    color: var(--color-0);
    flex-grow: 0;
}
.onlinescore .score-info .info-controls p
{
    margin-bottom: 0;
}
.onlinescore .score-info .info-controls .break-log
{
    margin-left: 0;
}
.onlinescore .score-info .info-undo button
{
    height: 100%;
    width: 100%;
    border-radius: 0;
}
.onlinescore .score-info .minw-0
{
    min-width: 0;
}
.onlinescore .framelog
{
    padding-right: 10px;
    padding-left: 10px;
}
.onlinescore .framelog .evel
{
    display: flex;
    flex-direction: column;
    font-size: 18px;
    margin-right: 10px;
}
.onlinescore .framelog .evel > div
{
    align-content: center;
    flex-basis: 33%;    
    align-items: center;
    justify-content: center;
    display: flex;
}
.onlinescore .framelog .evel > div i
{
    margin-right: 0;
}
.onlinescore .framelog .evel .text-muted
{
    color: var(--color-online-txt-light) !important;
}

.onlinescore .vc
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.onlinescore .scores
{
    flex-basis: 20%;
    flex-grow: 177;
    display: flex;
}
.onlinescore .ast
{
    flex-basis: 10%;
    flex-grow: 96;
    display: flex;
}
.onlinescore .top
{
    flex-basis: 3%;
    flex-grow: 28;
    background-color: var(--color-online-menu);
}
.onlinescore .subsc-b
{
    flex-basis: 42%;
    flex-grow: 609;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onlinescore .subsc-b h3
{
    font-size: 115px;
    margin: 0;
    font-weight: var(--font-weight);
}
.onlinescore .subsc-b h3.imp
{
    font-size: 140px;
    font-weight: 500;
}
.onlinescore .subsc-b h3.sm
{
    font-size: 36px;
    font-weight: 500;
}
.onlinescore .subsc-b p
{
    font-size: 20px;
    margin: 0;
    display: flex;
}
.onlinescore .subsc-b p span
{
    align-content: center;
}
.onlinescore .subsc-b p span.break-log, .onlinescore_sm .break .break-log
{
    display: flex;
}
.onlinescore .subsc-s
{
    flex-basis: 16%;
    flex-grow: 222;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onlinescore .subsc-s h4
{
    margin: 0;
    font-size: 30px;
    font-weight: 500;
}
.onlinescore .bottom .subsc-s h4
{
    font-size: 18px;
    max-height: 45px;
    overflow: hidden;
}
.onlinescore .scores .logo
{
    width: 33%;
    height: auto;
}
.onlinescore .scores i.fi
{
    margin-right: 8px;
    width: 0.85em;
}
.onlinescore .scores h1
{
    margin: 0;
    color: var(--color-0);
    font-size: 40px;
    font-weight: var(--font-weight);
}
.onlinescore .scores:not(.pair) h1:last-child
{
    font-size: 48px;
    font-weight: bold;
}
.onlinescore .top h4
{
    color: var(--color-0);
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}
.onlinescore .bottom
{
    display: flex;
    flex-grow: 66;
    flex-basis: 7%;
    background-color: var(--color-8);
}
.onlinescore.dark .bottom
{
    background-color: #65646c;
    color: var(--color-theme-dark);
}
.onlinescore .c5
{
    background-color: var(--color-5);
}
.onlinescore .c11
{
    background-color: var(--color-online-sc-light);
}
.onlinescore :is(.c11, .c0, .bottom) :is(h3, h4, p)
{
  color: var(--color-online-txt-light);
}
.onlinescore.dark :is(.c11, .c0, .bottom) :is(h3, h4, p)
{
  color: var(--color-online-txt-dark);
}
.onlinescore.dark .c11
{
    background-color: #65646c;
    color: var(--color-theme-dark);
}
.onlinescore .c0
{
    background-color: var(--color-0);
}
.onlinescore.dark .c0
{
    background-color: #4b484f;
    color: var(--color-theme-dark);
}
.onlinescore .playerplace h1 ~ h1
{
    margin-top: 8px;
}
.playerplace .left-24
{
    position: relative;
    left: 24px;
}
.onlinescore .playerplace .playerph img, .onlinescore .playerplace .playerph2 img
{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.onlinescore .curplayerpl
{
    height: 10%;
    width: 100%;
    background-color: var(--color-accent);
}
.onlinescore .break-log
{
    margin-left: 24px;
}
.onlinescore .break-log i, .onlinescore i.bl
{
    color: var(--color-0);
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 28px;
    overflow: hidden;
    display: inline-block;
    margin-right: 4px;
}
.onlinescore i.b-white
{
    background-color: var(--color-6);
}
.onlinescore i.b-1, .onlinescore-ph i.b-1, .onlinescore-ph .break-info i.b-1 , .onlinescore_sm .break i.b-1
{
    background-color: var(--color-b-yellow);
    color: var(--color-5);
}
.onlinescore i.b-2, .onlinescore-ph i.b-2, .onlinescore-ph .break-info i.b-2, .onlinescore_sm .break i.b-2
{
    background-color: var(--color-b-green);
}
.onlinescore i.b-3, .onlinescore-ph i.b-3, .onlinescore-ph .break-info i.b-3, .onlinescore_sm .break i.b-3
{
    background-color: var(--color-b-brown);
}
.onlinescore i.b-4, .onlinescore-ph i.b-4, .onlinescore-ph .break-info i.b-4, .onlinescore_sm .break i.b-4
{
    background-color: var(--color-b-blue);
}
.onlinescore i.b-5, .onlinescore-ph i.b-5, .onlinescore-ph .break-info i.b-5, .onlinescore_sm .break i.b-5
{
    background-color: var(--color-b-pink);
    color: var(--color-5);
}
.onlinescore i.b-6
{
    background-color: var(--color-b-black);
}
.onlinescore-ph i.b-6, .onlinescore-ph .break-info i.b-6, .onlinescore_sm .break i.b-6
{
    background-color: black;
}


@media (max-width: 992px)
{
    .onlinescore .subsc-b p
    {
        font-size: 16px;
    }
    .onlinescore .subsc-b p span:not(.break-log)
    {
        display: none;
    }

    .onlinescore .break-log i
    {
        width: 28px;
        height: 28px;
        line-height: 28px;
        border-radius: 20px;
    }
}
@media (max-width: 768px)
{
    .onlinescore .subsc-b p
    {
        font-size: 14px;
    }

    .onlinescore .break-log i
    {
        font-size: 14px;
        font-weight: normal;
        width: 24px;
        height: 24px;
        line-height: 24px;
        border-radius: 20px;
    }
}
@media (max-width: 576px)
{
    .onlinescore .subsc-b p
    {
        font-size: 12px;
    }

    .onlinescore .break-log i
    {
        font-size: 10px;
        font-weight: normal;
        width: 16px;
        height: 16px;
        line-height: 16px;
        border-radius: 12px;
    }
}

.hidden
{
    display: none !important;
}
.invisible
{
    visibility: hidden !important;
}

.invisible-slow
{
    opacity: 0;
    transform: translateY(-20px);
    height: 0;
    transition: opacity 1.5s ease, transform 1.5s ease, height 1.5s ease;
    visibility: hidden;
}
.visible-slow
{
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.5s ease, transform 1.5s ease, visibility 0s;
    visibility: visible;
}

/* === old stuff === */


.footer .navbar-brand .brand-text
{
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 16px;
}

.announcement
{
    margin-bottom: 2rem;
}


.table .vMiddle
{
    vertical-align: middle;
}
.table .vMiddle .styleColor
{
    display: flex;
    align-items: center;
}
.table .vMiddle.icon-text
{
    white-space: nowrap;
}

.map-canvas
{
    width: 100%;
    height: 400px;
    margin-bottom: 40px;
}

table .nobr
{
    white-space: nowrap;
}

.post-image-cover.player
{
    padding-top: 100%;
    background-size: auto;
}

.pin.bottomrightpin
{
    bottom: 0;
    right: 0;
}

.pin.bottompin
{
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.player.post-image-cover
{
    position: relative;
}

.post-image .pin
{
    position: absolute;
    font-size: 150%;
    padding: 5px 10px;
    background: rgba(41,47,56,0.8);
    text-shadow: black 3px 3px 4px;
}

.post-image .pin:hover
{
    color: white;
}

.user_picture
{
    border: 1px solid lightgray;
    padding: 30px;
    max-width: 100%;
}

.tab-content img
{
    max-width: 100%;
}

.bg-muted
{
    background-color: #e5e5e5 !important;
}

.text-left
{
    text-align: left;
}
.text-right
{
    text-align: right;
}
.text-muted
{
    color: #777;
}
.table
{
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.fullwidth
{
    width: 100% !important;
}
.margin-bottom20
{
    margin-bottom: 20px;
}
.margin-bottom10
{
    margin-bottom: 10px;
}

.item-box
{
    overflow: hidden;
    margin: 16px 0;
    width: 100%;
    position: relative;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.item-box-desc
{
    overflow: hidden;
}

.margin-bottom10
{
    margin-bottom: 10px;
}

.margin-top20
{
    margin-top: 20px;
}
.sn_gallery a.gal_a
{
    display: block;
    background-color: black;
    margin-bottom: 15px;
}
.sn_gallery img
{
    width: 100%;
}

.groupplayertr td
{
    white-space: nowrap;
}
td.matchesbetween
{
    position: relative;
}
td.matchesbetween:not(.text-muted)
{
    cursor: pointer;
}
td.matchestime
{
    white-space: pre-wrap;
    padding: 7px 24px;
}

h1 small
{
    font-size: 65%;
    font-weight: 400;
    line-height: 1;
    color: #777;
}



#tab_draw .matchesbetween
{
    cursor: pointer;
    position: relative;
}
#tab_draw .matchesbetween:hover
{
    box-shadow: 0px 0px 25px -1px gray;
}
#tab_draw .lastbetween
{
    border-right: 1px solid darkgray;
}
.ns-effect-jelly
{
    right: 30px;
    left: auto;
}
.ns-effect-jelly.ns-type-error
{
    background: #fa4b5c;
}
.ns-effect-jelly.ns-type-success
{
    background: #188bc8;
}

.border-left
{
    border-left: 1px dashed lightgray;
}
.border-right
{
    border-right: 1px dashed lightgray;
}
.border-bottom
{
    border-bottom: 1px dashed black;
}

.playerScore .countTo div:not(.white-row) label
{
    padding: 20px 0;
    line-height: 60px;
    font-size: 2.5em;
}

.styleBackground.white-row
{
    color: #fff;
    background-color: #2E363F;
}
.white-row
{
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
div.countTo strong
{
    display: block;
    font-size: 60px;
    line-height: 60px;
    font-weight: 600;
}

.table>tbody>tr.success>td, .table>tbody>tr.success>th, .table>tbody>tr>td.success, .table>tbody>tr>th.success, .table>tfoot>tr.success>td, .table>tfoot>tr.success>th, .table>tfoot>tr>td.success, .table>tfoot>tr>th.success, .table>thead>tr.success>td, .table>thead>tr.success>th, .table>thead>tr>td.success, .table>thead>tr>th.success
{
    background-color: var(--table-success-bg-color);
}

.table-bordered
{
    border: 1px solid #ddd;
}
#draw_net .table-bordered>:not(caption)>*>*
{
    border-width: 1px;
}

@media (min-width: 992px)
{
    .navbar-expand-lg .navbar-nav.navbar-center
    {
        margin: auto;
    }
}

.section-container
{
    width: 100%;
    padding: 10px 0;
    margin-bottom: 0px;
}
.pagination-container
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.pagination-container .pagination-info
{
    font-size: 12px;
    color: #7E7E7E;
}
.pagination-container .pagination
{
    margin-bottom: 0;
}
.pagination-container .page-link
{
    background-color: var(--color-b-blue);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    padding: 0;
}
.pagination-container .page-link:hover
{
    background-color: #357AE8;
    color: white;
}
.pagination-container .page-item.active .page-link
{
    background-color: #335b9d;
    border-color: var(--color-b-blue);
}
@media (max-width: 768px) {
    .pagination-container .page-item
    {
        margin-left: 0px !important;
    }
    .pagination-container .page-link
    {
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
    }
    .pagination-container .pagination-info
    {
        font-size: 11px;
    }
}
@media (max-width: 576px) {
    .pagination-container .pagination-info
    {
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }

    .pagination-container {
        justify-content: center;
        flex-wrap: wrap;
    }
}

.controlpanel .form-inline
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
}
.controlpanel .form-group
{
    margin-right: 3px;
}
.controlpanel .form-group label
{
    margin-right: 3px;
    color: grey;
    font-size: 12px;
}
.controlpanel .form-control, .controlpanel .form-select
{
    height: 30px;
    font-weight: 400;
}
.controlpanel .form-control, .controlpanel .form-select, .controlpanel .btn
{
    height: 30px;
    font-size: 12px;
}
.controlpanel .datepicker
{
    width: 120px;
}
.controlpanel .switchblockbtn
{
    font-size: 14px;
}
.datepicker table tr td.day:hover
{
    background: var(--input-hover-bg) !important;
}

.datepicker.datepicker-dropdown {
    box-shadow: rgb(0 0 0 / 24%) 0px 8px 20px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.18);
}

.datepicker .datepicker-switch:hover,.datepicker .next:hover,
.datepicker .prev:hover,.datepicker tfoot tr th:hover,
.datepicker table tr td span.focused,.datepicker table tr td span:hover {
    background: var(--input-hover-bg) !important;
}

.datepicker table tr td span.active.active {
    background-image: var(--color-gr-datepicker-active)!important;
}

@media (max-width: 768px) {
    .controlpanel .form-inline
    {
        flex-direction: column;
        align-items: flex-start;
    }
    .controlpanel .form-group, .controlpanel .btn-group-sm
    {
        margin-bottom: 10px;
        margin-right: 0;
        width: 100%;
    }
    .controlpanel .form-control, .controlpanel .form-select, .controlpanel .datepicker, .controlpanel .btn
    {
        width: 100%;
    }
}

.row .imageplace img
{
    max-width: 100%;
    max-height: 250px;
    height: auto;
    display: block;
}
.row .print_hdr
{
    flex: 1;
    padding-left: 20px;
}

.crossed-cell
{
    position: relative;
    width: 0%;
    background: var(--group_match-highlighted-crossed-cell-color) !important;
}
.crossed-cell::before, .crossed-cell::after
{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 1px;
    background-color: rgb(214, 214, 214);
    transform-origin: center;
}
.crossed-cell::before
{
    transform: translate(-50%, -50%) rotate(34deg);
}
.crossed-cell::after
{
    transform: translate(-50%, -50%) rotate(-34deg);
}
@media (max-width: 576px) {
    .crossed-cell::before, .crossed-cell::after
    {
        width: 130%;
    }
    .crossed-cell::before
    {
        transform: translate(-50%, -50%) rotate(40deg);
    }
    .crossed-cell::after
    {
        transform: translate(-50%, -50%) rotate(-40deg);
    }
}

.match-report .fixed-width
{
    flex: 0 0 auto;
    white-space: nowrap;
}
.match-report .flex-grow
{
    min-width: 30px;
    flex-grow: 1;
    flex-shrink: 1;
}
.match-report .row
{
    margin-top: 10px;
}
.match-report .row.signs p
{
    margin: 0;
    font-size: 12px;
}
.match-report .row.signs small
{
    font-size: x-small;
}
.match-report .autoheight
{
    position: relative;
    top: -8px;
}
.match-report .border-bottom.border-black
{
    position: relative;
    top: -5px;
}
@media (max-width: 576px)
{
    .match-report
    {
        flex-direction: column;
    }
}

.table .groupplayertr .match-highlighted
{
    box-shadow: inset 0 0 0 3px var(--group_match-highlighted-cell-color);
}


@media (max-width: 576px) {
    .modal-dialog {
        margin-right: 5px;
        margin-left: 5px;
    }
}

/* === Video Modal === */
.video-modal
{
    background-color: var(--color-modal-bg);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 10px;
}
.video-modal .logo img
{
    max-height: 32px;
}
.video-modal iframe
{
    border-radius: 0px 0px 8px 8px;
}
.video-modal .modal-header
{
    padding: 0px 0px 8px 0px;
}
.video-modal .modal-header img
{
    height: 42px;
    margin: 0 auto;
    content: var(--logo--short-bg-img)
}
.video-modal .modal-header .video-title
{
    color: var(--text-color);
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px)
{
    .video-modal
    {
        padding: 5px;
    }
    .video-modal .modal-header .video-title
    {
        font-size: 0.8rem;
    }
}

/* === Dark Login Modal === */
.modal-content
{
    background-color: var(--color-modal-bg);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

.modal.blur
{
    backdrop-filter: blur(2px);
}

.modal-content,
.modal-content label,
.modal-content input,
.modal-content button,
.modal-content a
{
    font-weight: normal;
}

.login-modal .modal-content
{
    color: #ffffff;
    padding:30px;
}

.login-modal .modal-title
{
    color: var(--text-color);
    font-size: 24px;
    font-weight: bold;
}

.btn-primary,
.btn-success,
.btn-danger {
    border: none;
    color: #fff;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-weight: normal;
}

.btn-primary {
    background-color: var(--color-b-blue);
}

.btn-success {
    background-color: var(--color-b-green);
}

.btn-danger {
    background-color: var(--color-b-pink);
}


.td_security .btn-primary,
.register-view .btn-primary,
.login-modal .btn-primary
{
    font-size: 16px;
    padding: 8px 20px;
    width: 100%;
}

.btn-primary:hover,
.btn-primar:hover,
.btn-primary:hover
{
    background-color: var(--color-b-hover-blue);
}

/* Close button in all modals */
.btn-close,
.btn-close,
.btn-close
{
    filter: invert(0.8);
    opacity: 1;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1050;
    margin: 0;
    padding: 5px;
}
.btn-close:hover,
.btn-close:hover,
.btn-close:hover
{
    filter: invert(0.6);
}

.login-modal .form-control
{
    background-color: var(--color-modal-black);
    border: 1px solid var(--input-border);
    border-radius: 5px;
    color: var(--text-color);
    padding: 10px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.login-modal .form-control:focus
{
    border-color: #347aff;
    outline: none;
    box-shadow: 0 0 8px rgba(52, 122, 255, 0.5);
}

.login-modal .form-control::placeholder
{
    color: #888;
}

.login-modal .modal-content .form-group
{
    font-size: 14px;
}

.login-modal .modal-content .form-group a
{
    color: var(--text-caption);
    text-decoration: underline;
    margin-top: -10px;
    display: inline-block;
    transition: color 0.3s ease;
}
.login-modal .modal-content .form-group a:hover
{
    color: var(--text-caption-hover);
}

.login-modal .modal-content .form-group label
{
    color: var(--text-caption);
}

.login-modal .modal-header
{
    border-bottom: none;
}

.login-modal .modal-header img
{
    height: 42px;
    margin: 0 auto;
    content: var(--logo-bg-img)
}

@media (max-width: 768px)
{
    .login-modal .modal-content
    {
        padding: 10px 20px 15px 20px;
    }
}

a.header-menu-icon-wrapper {
    text-decoration: none;
    line-height: 1;
    font-size: 0;
}

.header-menu-icon-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.header-menu-icon-wrapper::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 0;
}

.header-menu-icon-wrapper.dropdown-user::before {
    width: 90%;
    height: 75%;
}

.dropdown-user i {
    color: white !important;
}

.header-menu-icon-wrapper .fa {
    transform: none !important;
    transition: none !important;
}

.header-menu-icon-wrapper:hover::before {
    background-color: rgba(255, 255, 255, 0.05);
}

.header-menu-icon-wrapper:active::before {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.15);
}

.header-menu-icon-wrapper.show::before {
    background-color: rgba(255, 255, 255, 0.05);
}

.header-menu-icon {
    width: 24px;
    height: 24px;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    display: inline-block;
    flex-shrink: 0;
}

.header-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
}

@media (max-width: 992px) {
    .header-menu-icon-wrapper::before {
        background-color: rgba(255, 255, 255, 0);
    }

    .header-menu-icon-wrapper:hover::before {
        background-color: rgba(255, 255, 255, 0);
    }

    .header-menu-icon-wrapper:active::before {
        background-color: rgba(255, 255, 255, 0);
    }

    .header-menu-icon-wrapper.show::before {
        background-color: rgba(255, 255, 255, 0);
    }
}

.theme-icon {
    background-color: var(--theme-icon-bg-color, transparent);
}

.theme-icon-list-item {
    background-color: #f1f1f1;
}

.theme-icon--dark {
    mask-image: url('/img/themes/icons/dark.svg');
    -webkit-mask-image: url('/img/themes/icons/dark.svg');
}

.theme-icon--light {
    mask-image: url('/img/themes/icons/light.svg');
    -webkit-mask-image: url('/img/themes/icons/light.svg');
}

.tournament-video .video-group-title {
    font-size: 14px;
    font-weight: 600;
    margin: 24px 10px 12px;
    display: flex;
    align-items: center;
    color: var(--text-color);
}
.tournament-video .live-dot
{
    content: "\A";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #F01F3F;
    display: inline-block;
    margin-right: 10px;
}

/* Video Player */
.video-container
{
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.8);
    border: 1px solid #4c4b4b;
    background: transparent;
}
.video-container .video-item
{
    overflow: hidden;
    background: #C7C7C7;
}
.video-container .video-item img
{
  height: auto;
  transition: transform 0.4s ease;
}
.video-container .video-item:hover img
{
  transform: scale(1.05);
}
.video-container .video-item .inline-play-btn,
.video-container .video-item .play-btn
{
  transition: transform 0.2s ease;
  transform-origin: center;
  border: none;
}
.video-container .video-item .inline-play-btn:hover,
.video-container .video-item .play-btn:hover
{
    transform: translate(-50%, -50%) scale(1.2) !important;
    background-color: unset;
}
.video-container .video-caption-container
{
    padding: 6px 8px 6px 8px;;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.video-container.video--sm .video-caption-container {
    font-size: 10px;
}

.video-container .video-date {
    text-align: right;
    font-weight: 500;
    color: var(--color-6);
}

.video-container.video--sm .play-btn,
.video-container.video--sm .inline-play-btn {
    width: 28px;
    height: 28px;
    top: 45% !important;
    left: 45% !important;
    transform: translate(-45%, -45%) !important;
}
.video-container.video--sm .play-btn img {
    width: 28px;
}

.video-container.video--md .video-caption-container {
    font-size: 14px;
}
.video-container.video--md .play-btn,
.video-container.video--md .inline-play-btn {
    width: 5rem;
    height: 5rem;
}

.video-container.video--lg .video-caption-container {
    font-size: 1.25rem;
}
.video-container.video--lg .play-btn,
.video-container.video--lg .inline-play-btn {
    width: 3rem;
    height: 3rem;
    top: 55% !important;
    left: 50% !important;
    transform: translate(-50%, -55%) !important;
}
/* End Video Player */

/* Card Block */
.card-container {
    display: flex;
}

.card-block {
    flex: 1;
    padding: 16px;
    background-color: var(--secondary-bg-color);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-block .value {
    color: var(--text-color);
    margin-bottom: 10px;
    font-size: var(--font-size);
}

.card-block .label {
    font-size: calc(var(--font-size) - 2px);
    padding: 0;
    color: #7f7f7f;
}

@media (max-width: 992px) {
    .card-container {
        display: block;
    }
}
/* End Card Block */

/* Tournament Info  */
.tournament-info {
    margin-right: 10px;
    height: 100%;
}

@media (max-width: 992px) {
    .tournament-info {
        margin-right: 0px;
    }

    .tournament-info-description {
        margin-top: 10px;
    }
}
/* End Tournament Info  */

/* Modal "Share tournament" */
.share-tournament-modal {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
    background-color: var(--color-modal-bg);
    color: #ffffff;
    border-radius: 12px;
    border: none;
    min-width: 320px;
}

.share-tournament-link {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text-color);
    border-radius: 6px;
    padding: 10px;
    font-size: calc(var(--font-size) - 30%);
}

.share-tournament-iframe {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text-color);
    border-radius: 6px;
    padding: 10px;
    max-height: 130px;
    font-size: calc(var(--font-size) - 30%);
}

.share-tournament-link:focus,
.share-tournament-iframe:focus {
    border-color: var(--color-b-blue);
    background-color: var(--input-bg);
    outline: none;
    color: var(--input-text-color);
}

.share-tournament-copy-btn {
    background-color: var(--color-b-blue);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 10px 20px;
    border: none;
    display: inline-block;
    transition: transform 0.1s ease, background-color 0.2s ease;
    width: 100%;
    font-size: calc(var(--font-size) - 2px);
}

.share-tournament-copy-btn:hover {
    background-color: var(--color-b-hover-blue);
}

.share-tournament-copy-btn:focus {
    background-color: #1876b4;
    color: #fff;
    box-shadow: none;
    outline: none;
}

.share-tournament-copy-btn:active {
    transform: scale(0.95);
}

#tournament_share_modal .modal-header {
    justify-content: center;
}

#tournament_share_modal .modal-title {
    text-align: center;
    width: 100%;
    color: var(--text-color);
}

#tournament_share_modal .form-group {
    padding-bottom: 30px;
}

.share-tournament-modal-body {
    padding: 0px 60px 0px 60px;
}
@media (max-width: 576px) {
    .share-tournament-modal-body {
        padding: 0px 5px 0px 5px;
    }
}
/* End Modal "Share tournament" */

/* Share tournament button "*/
.share-button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.share-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1rem;
    padding: 2px 10px;
    background-color: rgba(0, 0, 0, 0%);
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--text-color);
    font-size: 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
    position: relative;
    overflow: hidden;
    min-width: max-content;
}

.share-button::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    mask-image: url('/img/icons/share.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: currentColor;
    transition: background-color 0.2s;
}

.share-button:hover {
    background-color: rgba(114, 114, 114, 0.08);
}

.share-button:hover::before {
    background-color: var(--text-color);
}

.share-button:focus {
    outline: none;
}

.share-button:active {
    transform: scale(0.96);
}

.share-icon {
    width: 24px;
    height: 24px;
    mask-image: url('/img/icons/share.svg'); /* путь к твоей иконке */
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: currentColor; /* чтобы цвет иконки совпадал с текстом */
    flex-shrink: 0; /* чтобы не сжималась */
}
/* Share tournament button"*/

/*  Custom Input Control */
.go_input_container {
    font-weight: inherit;
}

.go_input_container .form-group {
    margin-bottom: 1.5rem;
}

.go_input_container .floating-label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--label-color);
    pointer-events: none;
    transition: 0.2s ease all;
    padding: 0 4px;
    font-size: 0.95rem;
}

.go_input_container .form-control:focus + .floating-label,
.go_input_container .form-control:not(:placeholder-shown) + .floating-label,
.go_input_select select:focus + .floating-label,
.go_input_select select.has-value + .floating-label {
    top: 10px;
    left: 8px;
    font-size: 0.75rem;
}

.go_input_container .form-control,
.go_input_container .go_input_select select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    color: var(--input-text-color);
    padding: 14px 12px 6px;
    font-weight: 400;
}

.go_input_container .form-control:focus {
    border-color: var(--input-focus-border);
    border-width: 0.3px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-shadow:
        0 0 0 0.3px var(--input-focus-border),
        0 0 6px 3px var(--input-focus-shadow);
}

.go_input_container .form-control::placeholder {
    color: var(--placeholder-color);
}

.go_input_container .form-control:focus::placeholder {
    color: var(--placeholder-color);
}

.go_input_container .form-control:disabled {
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-text-color);
}

.go_input_container .form-select {
    background-color: var(--input-bg);
    color: var(--label-color);
    border: 1px solid var(--input-border);
}

.go_input_container .form-select:focus {
    border-color: var(--input-focus-border);
    box-shadow: none;
}

.go_input_container .show-password-btn,
.go_input_container .clear-input-btn {
    color: var(--input-icon-color);
    font-size: 21px;
    border: 0;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.go_input_container .clear-input-btn {
    display: none;
}

.go_input_container .show-password-btn:hover,
.go_input_container .clear-input-btn:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.go_input_container .show-password-btn i {
    color: var(--input-icon-color);
}

.go_input_container .go_input_password input,
.go_input_container .go_input_select select {
    padding-right: 5rem;
    font-weight: 400;
    height: 43px;
}

.go_input_container select.form-select {
    cursor: pointer;
}

.go_input_container select.form-select,
.form-select.is-invalid:not([multiple]):not([size]) {
    background-position: calc(100% - 14px) center;
}

.go_input_container .go_input_password .clear-input-btn {
    padding-right: 2.8rem;
}

.go_input_container .go_input input,
.go_input_container .go_textarea textarea {
    padding-right: 3rem !important;
}

.go_input_container .form-control.is-invalid,
.go_input_container .form-select.is-invalid {
    border-color: var(--input-error-border);
    transition: border-color 0.5s ease;
}

.go_input_container .form-control.is-invalid {
    background-image: none !important;
}

.go_input_container .form-select.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.go_input_container .invalid-feedback {
    line-height: 12px;
    font-size: 12px;
    padding-left: 0.75rem;
}

.go_input_container .go_textarea textarea {
    min-height: 70px;
}

.go_input_container .go_textarea .clear-input-btn {
    top: 0px !important;
    right: 0px !important;
    transform: none !important;
    z-index: 2;
}

.go_input_container .go_textarea label {
    top: 30%;
}

.go_input_container .go_textarea textarea {
    overflow: hidden;
    resize: none;
}

.go_input_select .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaa' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");
    padding-right: 2.5rem;
    appearance: none;
    background: none;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

.go_input_select .form-select.open {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaa' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 10.5l6-6 6 6'/%3E%3C/svg%3E");
}

.go_input_select .select-arrow {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    pointer-events: none;
    color: gray;
}

.go_input_select.open .select-arrow {
    transform: translateY(-50%) rotate(180deg);
}
/*  Custom Input Control */

/* Registration */
.register-view {
    color: var(--text-color);
    min-height: auto;
    padding: 2rem 0.5rem 2rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.register-view form {
    width: 100%;
    max-width: 500px;
}
.register-view-logo {
    display: inline-block;
    width: 200px;
    height: 40px;

    background-color: var(--logo-bg-color);

    -webkit-mask-image: var(--logo-bg-img);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;

    mask-image: var(--logo-bg-img);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}
.register-view .join-logo-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.register-view .join-logo-title .join-text {
    margin-right: 0.5rem;
    font-size: 1.5rem;
}
.register-view .join-logo-tagline {
    display: inline-flex;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-caption);
    line-height: 1.1;
    max-width: 400px;
}

.text-caption {
    color: var(--text-caption);
    font-size: 0.875rem;
}
/* End Registration */

/* Autofill input */
input:-webkit-autofill {
    letter-spacing: normal !important;
    -webkit-text-fill-color: var(--input-text-color) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--input-autofill-bg) inset !important;
    transition: background-color 9999s ease-in-out 0s;
}
/* End Autofill input */

/* Side Menu */
#sideMenuProfile,
#sideMainMenu {
    display: none;
}

.side-menu-header {
    padding-top: 2.8125rem;
    padding-bottom: 2.8125rem;
    padding-right: .9375rem;
    padding-left: .9375rem;
}

.header-new .nav-link {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    padding: 0 8px;
    line-height: 32px;
    cursor: pointer;
}

@media (max-width: 992px) {
    .navbar-light .navbar-toggler {
        color: #FFFFFF;
        padding: 0;
    }

    /* Menu that opens on the right */
    #sideMenuProfile {
        right: 0;
        transition: width 0.5s ease-in-out, right 0.5s ease-in-out;
    }
    #sideMenuProfile.show{
        width: 100vw;
        right: 0;
    }
    /* End Menu that opens on the right */

    /* Menu that opens on the left */
    #sideMainMenu {
        left: 0;
        transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
    }
    #sideMainMenu.show {
        width: 100vw;
        left: 0;
    }
    /* End Menu that opens on the left */

    #navbarNav, #sideMenuProfile, #sideMainMenu {
        margin-left: 0;
        padding-left: 0;
        position: fixed;
        top: 50px;
        z-index: 1000;
        background-color: rgba(27, 26, 30, 0.98);
        height: 100vh;
        top: 0;
        overflow: auto;
        width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
    }

    #sideMenuProfile .side-menu-container {
        justify-content: flex-start;
        padding-top: 14vh;
    }

    .mobile-side-menu {
        gap: 6px;
        flex-grow: 1;
        -webkit-box-flex: 1;
        justify-content: space-between !important;
    }
    .mobile_sport_category {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .header-new .nav-link {
        padding: 0 5px;
        font-size: 12px;
        line-height: 26px;
    }
    .mobile_sport_category a {
        text-transform: uppercase;
    }
    .mobile-side-menu .side-menu-container {
        align-items: flex-start;
        gap: 1vw;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        margin-top: 0;
        justify-content: center;
        flex: 1.5;
    }
    .mobile-side-menu .side-menu-container .side-menu-item a {
        text-align: left;
        padding: 0;
        padding-left: 50px !important;
        font-size: 15px;
        font-weight: 400;
        color: #ffffff;
        line-height: 37px;
        border: none;
        text-transform: uppercase;
    }
    .mobile-side-menu .side-menu-container .side-menu-item:last-child a::before{
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: #3D3C40;;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .mobile-side-menu .side-menu-container .side-menu-item {
        padding-left: 0 !important;
        width: 100vw;
    }

    /* Left Side - Main Menu */
    .main-menu-container .toggle-icon {
        transition: transform 0.3s ease;
    }

    .menu-item.open .toggle-icon {
        transform: rotate(180deg);
    }

    .main-menu-container .submenu {
        display: none;
        flex-direction: column;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

    .main-menu-container .menu-item.open .submenu {
        display: flex;
    }

    .main-menu-container .submenu li a {
        padding: 10px 55px;
        display: block;
        color: var(--color-0);
        text-decoration: none;
    }

    .main-menu-container .submenu li a:hover {
        background-color: #2a2a2a;
    }

    .mobile-side-menu .side-menu-container.main-menu-container
    {
        display: block;
    }

    .main-menu-container .side-menu ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .main-menu-container .side-menu .menu-item {
        border-bottom: 0px;
    }

    .main-menu-container .menu-toggle span {
        font-size: 18px;
        font-weight: 500;
    }

    .main-menu-container .menu-toggle {
        color: var(--color-0);
    }

    #sideMainMenu .side-menu .menu-item > .menu-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 20px 25px;
        background: none;
        border: none;
        font: inherit;
        cursor: pointer;
        text-align: left;
    }

    .main-menu-container .toggle-icon {
        margin-left: 8px;
        transition: transform 0.3s ease;
    }

    .main-menu-container .menu-item.open > .menu-toggle {
        color: var(--color-accent, #4da3ff);
    }

    .main-menu-container .submenu li:first-child {
        border-top: 1px solid var(--color-b-black);
    }

    .main-menu-container .submenu li:last-child {
        border-bottom: 1px solid var(--color-b-black);
    }

    .side-menu-logo img {
        display: block;
        height: 42px;
    }

    .btn-close-menu {
        background: none;
        border: none;
        font-size: 20px;
        color: white;
        cursor: pointer;
    }

    .close-icon {
        width: 20px;
        height: 20px;
        mask-image: url('/img/icons/close.svg');
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-size: cover;
        mask-repeat: no-repeat;
        background-color: currentColor;
        flex-shrink: 0;
        margin-right: 5px;
    }
    /* End Left Side - Main Menu */
}

/* Left Side - Main Menu - Tablet mode */
@media (max-height: 580px) {
    .main-menu-container {
        overflow-y: auto;
    }
    #sideMainMenu .side-menu .menu-item > .menu-toggle {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .main-menu-container .submenu li a {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .side-menu-header {
        padding-top: .9375rem;
        padding-bottom: 0px;
    }
}

/* mobile headera actions */
.mobile-header-actions {
    display: none;
}

@media (max-width: 992px) {
    .toggle-container .navbar-nav {
        flex-direction: row !important;
        align-items: center;
    }

    .toggle-container ul {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

@media (max-width: 991.8px) {
    .mobile-header-actions {
        display: unset;
    }
    .navbar-collapse .navbar-right {
        display: none;
    }
}

@media (max-width: 405px) {
    .header .nav.navbar-nav>li>a {
        padding: 8px 8px;
    }
}

@media (max-width: 377px) {
    .header .navbar-brand img, .footer .navbar-brand img {
        height: 22px;
    }
}
/* End Mobile Headera Actions */

/* Custom Bootstrap margin for row class*/
@media (max-width: 768px)
{
    .row {
        --bs-gutter-x: 10px;
    }
}
/* End Custom Bootstrap margin for row class*/

/* Tournament header */
.subhdrt {
    font-weight: 500;
    margin-bottom: 4px;
}

@media (min-width: 992px) {
    .share-button-container .share-button {
        display: none !important;
    }

    .left-spacer {
        display: block !important;
    }
}

@media (max-width: 992px) {
    .left-spacer,
    .right-share,
    .object_header .object_header_image {
        display: none !important;
    }

    .share-button-container .share-button {
        display: inline-flex !important;
    }
}
.object_header_title,
.object_header_image {
    width: 40%;
    padding-top: 20px;
}

.left-spacer {
    width: 10%;
}

.right-share {
    width: 12%;
    align-items: flex-start;
    padding-top: 5px;
}

.object_header .col-shrinkable {
    flex-shrink: 1 !important;
}

.w-auto {
    width: auto !important;
}
/* End Tournament header */

@media (min-width: 1067px) {
    #header-navbar {
        padding-left: 80px;
    }
}

body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.footer-copyright {
    z-index: 1029;
}

.header.navbar-inverse .navbar-nav .dropdown-menu .dropdown-item.logout-button {
    border-top: 1px solid var(--color-b-black);
    padding-bottom: 4px;
    padding-top: 8px;
}

.header.navbar-inverse .navbar-nav .dropdown-menu .dropdown-item.logout-button i {
    height: auto;
}

.choosePlayer {
    cursor: pointer;
}

.form-control::file-selector-button {
    background-color: var(--color-bg-file-selector-button);
}

/* Drag&Drop */
.file-upload-wrapper {
    position: relative;
    border: 2px dashed #ccc;
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.3s ease;
    cursor: pointer;
}

.file-upload-wrapper.dragover {
    border-color: #007bff;
    background-color: #aabdcf;
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}

.image-preview-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.image-preview {
    max-width: 100%;
    max-height: 300px;
    min-width: 100px;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
}

.clear-button {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
/* End Drag&Drop */

.h2h_select .player-name-row,
.h2h_select .h2h_select-player {
    width: max-content;
}

@media (max-width: 405px) {
    .match_div .match_main .info {
        justify-content: space-evenly;
    }
}

.player_requests .cancel-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
}

.player_requests .btn-danger {
    background-color: #b72e3f;
    border-radius: 15px;
}

.tournaments_container .submenu.nav .nav-link
{
    margin-right: 12px;
    margin-left: 12px;
}

.tournament-photo-container .go_input_container .form-group {
    margin-bottom: 0px;
}

.tournament_state_1 {
    background-color: var(--color-tournament-state-1-bg);
}
.tournament_state_2 {
    background-color: var(--color-tournament-state-2-bg);
}
.tournament_state_3 {
    background-color: var(--color-tournament-state-3-bg);
}
.tournament_state_4 {
    background-color: var(--color-tournament-state-4-bg);
}
.tournament_state_5 {
    background-color: var(--color-tournament-state-5-bg);
}
.tournament_state_6 {
    background-color: var(--color-tournament-state-6-bg);
}
.tournament_state_7 {
    background-color: var(--color-tournament-state-7-bg);
}

.tournament-video-row {
    background-color: var(--secondary-bg-color);
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px 15px 5px 15px;
}

.tournament-video-row .row-header .row-header-item {
    padding: 0px 10px;
}

.videos-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}

.videos-carousel-wrapper .carousel-scroll {
    scroll-behavior: smooth;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100%;
    padding-bottom: 14px;
    border-radius: 7px;
}

.videos-carousel-wrapper .carousel-scroll::-webkit-scrollbar {
    display: none;
}

.videos-carousel-wrapper .carousel-btn {
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    color: #000;
    font-size: 18px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    transition: background-color 0.2s;
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    z-index: 10;
}

.videos-carousel-wrapper .prev-btn {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    left: -8px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.videos-carousel-wrapper .next-btn {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    right: -8px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.videos-carousel-wrapper .prev-btn,
.videos-carousel-wrapper .next-btn {
    width: 24px;
    height: 90%;
    background-repeat: no-repeat;
    background-position: 50%;
}

.videos-carousel-wrapper .carousel-btn .carousel-btn-next-icon,
.videos-carousel-wrapper .carousel-btn .carousel-btn-prev-icon {
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
}

.videos-carousel-wrapper .carousel-btn:hover,
.videos-carousel-wrapper .carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.video-container.video--sm .video-caption {
    height: 33px;
}

.video-container.video--md .video-caption {
    height: 25px;
}

.videos-carousel-wrapper .video-container {
    box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.4);
}

.videos-carousel-wrapper .carousel-btn {
    display: none;
}

.tournament-video-row .tournament-date {
    font-size: 14px;
}

.tournament-video-row .rotate-icon {
    transform: scaleX(-1);
    display: inline-block;
}

.tournament-video-row .tournament-details {
    flex-direction: column;
}

.tournament-video-row .row-header {
    display: flex;
    flex-direction: row;
}

.tournament-video-row .tourn-info {
    display: flex;
    flex-direction: row;
    gap: .9375rem;
}

.tournament-video-row .tourn-info .row-header-item {
    display: flex;
    flex-direction: column;
    gap: .234375rem;
}

.tournament-video-row .video-count {
    min-width: 40px;
}

.tournament-video-row .video-count {
    color: var(--text-color);
}
.tournament-video-row .badge {
    color: var(--text-color);
}

@media (max-width: 576px) {
    .videos-carousel-wrapper .carousel-scroll .col-6 {
        width: 47%;
    }

    .tournament-video-row .tournament-details {
        flex-direction: column !important;
    }
    .tournament-video-row .row-header {
        flex-direction: column;
        gap: .234375rem;
    }
    .tournament-video-row .tourn-info {
        flex-direction: column;
        gap: .234375rem;
    }
    .tournament-video-row .tourn-info .tourn-info-state {
        flex-direction: row;
    }
    .tournament-video-row .tourn-info .row-header-item {
        gap: .234375rem;
    }
    .tournament-video-row .row-header-item.tourn-info-state {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .tournament-video-row .row-header-item.tourn-info-state > .badge {
        width: 30%;
    }
    .tournament-video-row .row-header-item.tourn-info-state > .tournament-date {
        width: 70%;
        text-align: right;
    }
}