:root {
    
    --top-size: max(33vh, 16rem);

    /* bs-primary in PHP */

    --bs-link-color: var(--bs-secondary);
    --bs-link-hover-color: var(--bs-primary);

    --bs-body-bg: #1c212b;
    --bs-body-bg-rgb: 28, 33, 43;

    --bs-secondary-bg: #232c3b;
    --bs-secondary-bg-rgb: 35, 44, 59;

    --bs-tertiary-bg: #313a48;
    --bs-tertiary-bg-rgb: 49, 58, 72;

    --bs-quaternary-bg: #6e6e6e;
    --bs-quaternary-bg-rgb: 110, 110, 110;
    
    --nav-color: var(--bs-tertiary-bg);

    --bs-primary-bg-subtle: #3D5A80;

    --bs-success: #4ab602;
    --bs-success-rgb: 74, 182, 2;

    --hr-color: rgba(255,255,255,.2);

}

body {
    /* font-family: sans-serif; */
    font-family: "PT Sans", sans-serif;
    background: var(--bs-body-bg);
}

.accordion-body {
    background: var(--bs-tertiary-bg);
}

.accordion-button {
    --bs-accordion-btn-bg: var(--bs-secondary-bg);
    --bs-accordion-active-bg: var(--bs-secondary-bg);
}

.alert-info {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary);
    border-color: var(--bs-primary);
}

.navbar-brand {
    font-family: "Handjet", sans-serif;
    font-size: 2rem;
    line-height: 1;
    color: var(--bs-secondary);
}

.navbar-brand:hover {
    color: var(--bs-primary);
}

.overflow-x-auto {
    overflow-x: auto;
}

.navbar-sections {
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: auto;
    background-color: var(--bs-secondary-bg) !important;
}

@media (max-width: 991.98px) {

    .navbar-sections li:last-child {
        padding-right: 1rem;
    }

}

.hero {
    position: relative;
    /* background: url('img/ranking-bg.webp'); */
    background: url('img/stadium.webp');
    background-position: center center;
    background-size: cover;
    /* transition: all .5s; */
    /* transition-delay: .5s; */
    --padding-y: 3rem;
    padding: var(--padding-y) 0;
}

@media (max-width: 991.98px) {

    .hero {
        --padding-y: 1rem;
    }

}

@media (min-width: 1200px) {

    .hero {
        /* background-position: center top -7rem; */
    }

    body {
        /* padding-top: var(--top-size); */
    }

    .hero {
        /* position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 999; */
        width: 100%;
    }

    .scrolled .hero {
        /* height: auto; */
        /* --padding-y: 1rem; */
    }

    .scrolled .hero h1 {
        /* visibility: hidden;
        height: 0;
        margin: 0 !important; */
    }

}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
}

.hero .container {
  position: relative; /* żeby był nad overlay */
}

.bg-body-quaternary {
    background-color: var(--bs-quaternary-bg);
}

.lead {
    font-size: 1.125rem;
}

.lead strong {
    font-weight: 600;
}

.table {
    max-height: 100vh;
    overflow: auto;
    /* --bs-table-bg: var(--bs-tertiary-bg); */
    --bs-table-bg: var(--bs-secondary-bg);
}

.table tr {
    vertical-align: middle;
}

.table tr[class*="text-"] td:not([class*="text-"]) {
    color: inherit;
}

.table td[data-bs-toggle="tooltip"] {
    cursor: help;
}

.table-responsive .table {
    margin: 0;
}

.highlight-UCL {
    --bs-table-bg: #121063;
}

.highlight-UEL {
    --bs-table-bg: #633c10;
}

.highlight-UECL {
    --bs-table-bg: #106329;
}

/* .table-competition .highlight-country {
    color: var(--bs-warning);
} */

/* .table-rankings .highlight-country {
    color: var(--bs-warning);
} */

.highlight-text-0,
.highlight-text-0 td {
    --color: var(--bs-primary) !important;
    color: var(--color) !important;
}

.highlight-text-1,
.highlight-text-1 td  {
    --color: var(--bs-info) !important;
    color: var(--color) !important;
}

.highlight-text-2,
.highlight-text-2 td  {
    --color: var(--bs-orange) !important;
    color: var(--color) !important;
}

.table-rankings .table-warning,
.table-rankings .table-success,
.table-rankings .table-info,
.table-rankings .table-danger {
    --color: var(--bs-table-color);
}

.table-rankings .table-warning.highlight-country,
.table-rankings .table-success.highlight-country,
.table-rankings .table-info.highlight-country {
    --color: var(--bs-danger) !important;
    color: var(--color) !important;
}

.table-competition .highlight-country td, /*:not([class*="text-"]) */
.table-rankings .highlight-country td {
    color: inherit !important;
}

.text-emphasis td {
    color: inherit;
}

table a {
    color: inherit;
    text-decoration: none;
}

table tr td:hover a .team-name-in-table {
    /* --color: var(--color, var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)))); */
    --parent-color: var(--color, white);
    /* border-bottom: 1px dashed var(--parent-color); */
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-underline-offset: 2px;
}

.highlight-country .team-name-in-table {
    font-weight: 600;
}

.single-phase-col table .team-name-in-table {
    display: block;
}

table .team-name-in-table,
table .team-name-in-table:hover {
    color: var(--color, var(--bs-emphasis-color));
}

[class*="highlight-text-"] .team-name-in-table,
.team-a-color .team-name-in-table,
.team-b-color .team-name-in-table {
    /* color: inherit !important; */
}

table {
    font-size: .9rem;
}

table + small {
    font-size: .6rem;
}

.smaller {
    font-size: .75em;
}

.smaller2 {
    font-size: .65em;
}

@media (max-width: 991.98px) {

    .smaller2 {
        font-size: .5em;
    }

    .single-phase-col {
        /* width: 75vw; */
    }

    .single-phase-col table {
        width: 100%;
    }

    .single-phase-col table .team-name-in-table {
        /* max-width: 33vw; */
    }

}

@media (min-width: 768px) and (max-width: 991.98px) {

    table {
        font-size: .7rem;
    }

    .single-phase-col table .team-name-in-table {
        /* max-width: 90px; */
    }

}

@media (min-width: 992px) {

    .single-phase-col table .team-name-in-table {
        /* max-width: 115px; */
    }

}

@media (min-width: 1200px) {

    .single-phase-col table .team-name-in-table {
        /* max-width: 175px; */
    }

}

.radio-outer {
    width: 2rem;
}

.accordion-button:not(.collapsed) {
    /* --bs-accordion-active-color: #FFF !important; */
    --bs-accordion-active-color: var(--bs-accordion-btn-color);
}

table th {
    background-color: var(--bs-primary-bg-subtle) !important;
    /* color: var(--bs-secondary) !important; */
    color: #FFF !important;
}

.card-header {
    background-color: var(--bs-primary-bg-subtle);
}

.nav-link:focus, .nav-link:hover {
    color: var(--bs-primary);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

/* Tła */
.bg-primary,
.btn-primary,
.badge.bg-primary,
.alert-primary,
.list-group-item-primary,
.table-primary,
.progress-bar.bg-primary,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.pagination .page-item.active .page-link,
.offcanvas-header.bg-primary,
.navbar.bg-primary {
  background-color: var(--bs-primary) !important;
  --bs-btn-hover-border-color: var(--bs-primary);
}

/* Obramowania */
.border-primary,
.btn-outline-primary,
.btn-outline-primary:hover {
  border-color: var(--bs-primary) !important;
}

/* Przyciski outline */
.btn-outline-primary {
  color: var(--bs-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

.btn-primary,
.btn-primary:hover {
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-color: var(--bs-secondary-bg) !important;
    --bs-btn-hover-color: var(--bs-secondary-bg) !important;
}

.btn-primary:hover {
    border-color: var(--bs-primary-bg-subtle) !important;
}

.bg-transparent {
    background: transparent;
}

/* Teksty */
.text-primary,
.link-primary {
  color: var(--bs-primary);
}

a {
  color: var(--bs-secondary);
}

.text-emphasis {
    color: var(--bs-emphasis-color) !important;
}

/* Focus ring (Bootstrap 5) */
.btn-primary:focus,
.btn-primary:focus-visible,
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 25%, transparent) !important;
}

/* Checkboxy i radio buttons */
.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-check-input:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 25%, transparent) !important;
}

.table-sm>:not(caption)>*>* {
    padding: .25rem .33rem;
}

@media (max-width: 767.98px) {

    .table-sm>:not(caption)>*>* {
        padding: .75rem .33rem;
    }

}

p a {
    color: inherit;
}

.table-group-divider {
    border-top-color: rgba(255, 255, 255, .5);
    border-top-width: 2px;
}

[data-phase="LS"] .table-group-divider {
    border-top-color: rgba(255, 255, 255, .75);
}

.divider-dotted {
    border-top-style: dotted;
}

.divider-dashed {
    border-top-style: dashed;
}

.divider-match {
    border-top: 5px solid var(--bs-tertiary-bg);
}

.form-control-sm.probability-control {
    font-size: .75rem;
}

.probability-control optgroup,
.probability-control option {
    color: black;
    /* text-align: left; */
}

[data-bs-theme="dark"] .page-content {
    color: #dee1e4;
}

.page-content a:not([class]) {
    color: inherit;
    /* color: var(--bs-secondary); */
    text-decoration: none;
}

.page-content a:not([class]):hover {
    color: var(--bs-primary);
}

.page-content > * {
    order: 5;
}

.table-rankings a:hover {
    color: inherit !important;
    /* border-bottom: 1px dashed var(--color); */
}

/* headings */

.h2, h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.h3, h3 {
    font-size: 1.125rem;
    font-weight: 600;
}

.h4, h4 {
    font-size: 1.05rem;
    font-weight: 600;
}

.fs-5 {
    font-size: 1rem !important;
}

.flag {
    --size: 1.5em;
    height: var(--size);
    width: var(--size);
    border: 1px solid rgba(0, 0, 0, .5);
    display: inline-block;
}

.hero .flag {
    --size: 1em;
}

.hero h1 > .flag {
    display: inline-block;
    margin-right: .5rem;
}

.nav-item .flag {
    --size: 1em;
    position: relative;
    top: -0.1em;
}

.dropdown-toggle > .flag {
    /* vertical-align: sub; */
}

.hero {
    text-shadow: 0 0 .25rem black;
}

.hero h1 {
    display: flex;
    align-items: center;
}

[data-bs-theme="dark"] .navbar {
    background: var(--nav-color);
}

dl, ol, ul {
    padding-left: 1rem;
}

p:last-child,
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

nav .pagination {
    margin: 1rem 0;
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-active-color: var(--bs-secondary-bg);
}

.breadcrumb {
    --bs-breadcrumb-divider: '›';
    font-size: .9rem;
}

.breadcrumb a {
    color: var(--bs-navbar-color);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--bs-secondary);
    text-decoration: none;
}

.bottom-menu a {
    color: var(--bs-secondary-color) !important;
    text-decoration: none;
}

.bottom-menu a:hover {
    color: var(--bs-primary) !important;
}

.chartjs {
    /* min-height: 50vh; */
    max-height: min(300px, 75vh);
    /* object-fit: contain; */
    object-fit: scale-down;
    width: 100% !important;
    position: relative;
}

@media (min-width: 992px) {

    .chartjs-bar {
        max-height: max(250px, 33vh);
    }

    .chartjs-countries-comparison {
        max-height: 66vh;
    }

    .chartjs-pie {
        height: min(500px, 85vh) !important;
        max-height: 99vh;
    }

}

td.only-divider {
    --h: .25rem;
    padding-top: 0 !important;
    padding-bottom: var(--h) !important;
}

@media (max-width: 767.98px) {

    td.only-divider {
        --h: .5rem;
    }

}

.match-wide-td {
    /* white-space: nowrap; */
}

.match-wide-td .name-fixed-width {
    display: inline-block;
    min-width: 20vw;
}

.single-match-row,
.match-wide-td .name-fixed-width {
    white-space: nowrap;
}

@media (min-width: 768px) {

    .match-wide-td .name-fixed-width {
        min-width: 12vw;
    }   

}

@media (min-width: 992px) {

    .match-wide-td {
        /* width: 20vw; */
    }

}

@media (min-width: 1400px) {

    /* .match-wide-td { */
        /* width: 30%; */
    /* } */

    .match-wide-td .name-fixed-width {
        min-width: 10vw;
    }

}

@media (max-width: 991.98px) {

    .table-rankings td {
        white-space: nowrap;
    }

}

.table-responsive + .single-article,
.single-article + .single-article {
    margin-top: 1.5rem;
}

.single-article + .single-article.small {
    margin-top: 1rem;
}

.accordion-button.hide-switcher::after {
    display: none;
}

.navbar-nav .nav-link {
    --bs-nav-link-font-size: var(--fs);
}

.nav-item.dropdown .dropdown-menu {
    --bs-dropdown-font-size: var(--fs);
}

.navbar-nav .dropdown-toggle::after {
    vertical-align: .155em;
}

@media (min-width: 992px) and (max-width: 1199.98px) {

    .navbar-nav {
        --fs: .75rem;
    }

}

@media (min-width: 1200px) and (max-width: 1399.98px) {

    .navbar-nav {
        --fs: .85rem;
    }

}

hr {
    color: var(--hr-color);
    opacity: 1;
    /* color: transparent; */
    /* border-top: 1px solid var(--hr-color); */
}

.single-section {
    /* --offset: 2rem; */
    --offset: 1.5rem;
}

.single-section-sm {
    /* --offset: 1rem; */
}

.single-section:first-child {
    padding-top: var(--offset);
}

.single-section + .single-section,
.single-section-b {
    margin-top: var(--offset);
    padding-top: var(--offset);
    border-top: 1px solid var(--hr-color);
}

.single-section[id] {
    scroll-margin-top: calc(1.5 * var(--offset));
}

.single-section:last-child {
    padding-bottom: var(--offset);
}

.team-a-color {
    color: var(--color, var(--bs-secondary)) !important;
}

.team-b-color {
    color: var(--color, var(--bs-primary)) !important;
}

.team-a-color td,
.team-b-color td {
    color: inherit;
}

.match-result,
.match-prob,
.team-a-color,
.team-b-color {
  --stroke-color: rgba(0,0,0,.75);
  --stroke-size: 1px;

  text-shadow:
    calc(-1 * var(--stroke-size)) calc(-1 * var(--stroke-size)) 0 var(--stroke-color),
    var(--stroke-size) calc(-1 * var(--stroke-size)) 0 var(--stroke-color),
    calc(-1 * var(--stroke-size)) var(--stroke-size) 0 var(--stroke-color),
    var(--stroke-size) var(--stroke-size) 0 var(--stroke-color),
    0 calc(-1 * var(--stroke-size)) 0 var(--stroke-color),
    0 var(--stroke-size) 0 var(--stroke-color),
    calc(-1 * var(--stroke-size)) 0 0 var(--stroke-color),
    var(--stroke-size) 0 0 var(--stroke-color);
}

.match-result,
.match-prob {
    color: white !important;
    font-size: inherit;
}

.match-result.text-muted,
.match-prob.text-muted {
    opacity: .75;
}

.badge.team-a-color,
.match-prob.team-a-color {
    background-color: var(--color, var(--bs-secondary)) !important;
    color: white !important;
}

.badge.team-b-color,
.match-prob.team-b-color {
    background-color: var(--color, var(--bs-primary)) !important;
    color: white !important;
}



/* scrollowana tabel */

/* Cała tabela */
table.table-may-be-scrolled {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Nagłówek */
table.table-may-be-scrolled > thead {
  display: table;
  width: 100%;
  /* table-layout: fixed; */
}

table.table-may-be-scrolled > thead > tr {
  display: table;
  width: 100%;
  /* table-layout: fixed; */
}

/* Scrollowany tbody */
table.table-may-be-scrolled > tbody.tbody-scrolled {
  display: block;
  width: 100%;
  max-height: min(200px, 50vh);
  overflow-y: auto;
}

/* Chrome, Edge, Safari (WebKit) */
table.table-may-be-scrolled > tbody.tbody-scrolled::-webkit-scrollbar {
  width: 6px;              /* to jest kluczowe - szerokość paska */
}

table.table-may-be-scrolled > tbody.tbody-scrolled::-webkit-scrollbar-track {
  background: transparent;
}

table.table-may-be-scrolled > tbody.tbody-scrolled::-webkit-scrollbar-thumb {
  background-color: var(--bs-secondary);
  border-radius: 4px;
}

table.table-may-be-scrolled > tbody.tbody-scrolled > tr {
  display: table;
  width: 100%;
  /* table-layout: fixed; */
}

table.table-may-be-scrolled .team-name-td {
    /* width: 50%; */
}

table.table-may-be-scrolled .competition-td,
table.table-may-be-scrolled .country-td {
    width: 2.25rem;
}

table.table-may-be-scrolled .perc-td {
    width: 6rem;
}

select[disabled] {
    cursor: not-allowed;
}

.badge.elo-change,
.badge.elo-change:hover {
    cursor: default;
    color: white !important;
    position: relative;
    overflow: hidden;
    display: block;
}

.badge.elo-change a,
.badge.elo-change button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    opacity: 0;
}

@media (max-width: 767.98px) {

    .badge.elo-change a,
    .badge.elo-change button {
        display: none;
    }

}

@media (min-width: 768px) {

    .tooltip-inner .btn-load-details {
        display: none;
        visibility: hidden;
    }

}

.cursor-default {
    cursor: default;
}

.perc-td[title],
.perc-td[data-bs-original-title] {
    cursor: help;
}

tr:not(:hover) .badge.elo-change {
    opacity: .33;
}

.chartjs.loaded + .chart-loader {
    display: none;
}

.search-input-group {
    position: relative;
}

.team-search-results {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;

    z-index: 1055;
    max-height: 33vh;
    overflow-y: auto;

    border-top: 0;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);

    box-shadow: 0 .5rem 1rem rgba(0,0,0,.25);
}

.search-input-group input.search-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.team-search-results li {
    cursor: pointer;
}

.list-group {
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
    --bs-list-group-action-active-color: var(--nav-color);
    --bs-list-group-active-color: var(--nav-color);
}

.list-group .flag {
    --size: 1rem;
    display: inline-block;
    margin-right: .25rem;
    margin-top: -4px;
}