html {
    --dark-gray: rgb(90, 90, 90);
    --light-gray: rgb(148, 148, 148);
    --focus-blue: rgb(69, 159, 189);
}

.flex-container {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    margin: 20px 5px 5px 5px;
    gap: 5px;
    align-items: center;
}

table.games {
    border-collapse: collapse;
}


.games tr:hover>td {
    background-color: rgba(69, 130, 152, 0.73) !important;
}

.games tr.phase-header:hover>td {
    background-color: unset !important;
}

.games {
    width: 100%;
    max-width: 1000px;
    border: solid 1px gray;
    box-shadow: 0 2px 2px gray;

    background: linear-gradient(rgba(30, 64, 110, 0.9), rgba(30, 64, 110, 0.8));
    color: white;
}

.games th>a {
    color: white;
}

.games td, .games th {
    padding: 3px 5px 3px 5px;
}

.games th {
    border-bottom: solid 2px black;
    background-color: #333;
}

@media (min-width: 1900px) {
    .games {
        max-width: 1500px;
        font-size: 1.6em;
        & td {
            padding: 7px !important;
        }
    }

    .live {
        width: 20px !important;
        height: 20px !important;
        top: 7px !important;
    }
}

.games>tbody>tr.running {
/*    background-color: rgb(220, 213, 99, 0.1);*/
}

.games>tbody>tr.finished {
/*    background-color: rgba(84, 195, 67, 0.2);*/
}

.games td.winner {
    background-color: rgba(77, 133, 80, 0.73) !important;
    font-weight: bold;
}

.games>tbody>tr:nth-of-type(10n) {
    border-top: solid 2px black;
}

.games>tbody>tr {
    border-top: solid 1px #333;
}

.games>tbody>tr.phase-header {
    background-color: #333;
}

.highlight {
    font-weight: bold;
    /*background-color: rgba(9, 165, 129, 0.76) !important;*/
    background-color: rgba(69, 130, 152, 0.73) !important;
}

@media (max-width: 1000px) {
    .flex-container {
        margin-left: unset;
        margin-right: unset;
    }

    table.games {
        border-right: unset;
        border-left: unset;
        box-shadow: unset;
    }
}

@media (max-width: 900px) {
    table.games td:nth-child(3),
    table.games td:nth-child(9),
    table.games th:nth-child(3),
    table.games th:nth-child(9)
    {
        display: none; /* Hide the column */
    }

    .phase-links-mobile {
        display: flex;
    }

    ul.navbar>li.phase-links {
        display: none;
    }
}

@media (max-width: 700px) {
    table.games td:nth-child(12),
    table.games th:nth-child(12)
    {
        display: none; /* Hide the column */
    }
    .games {
        font-size: 0.9em;
    }

    .games>thead>tr>th {
        padding: 1px 3px 1px 3px;;
    }

    .games>tbody>tr>td {
        padding: 1px 3px 1px 3px;
    }

}

@media (max-width: 500px) {
    table.games td:nth-child(1),
    table.games th:nth-child(1),
    table.games td:nth-child(2),
    table.games th:nth-child(2) {
        display: none; /* Hide the column */
    }
    table.games td.phase-header {
        display: table-cell;
    }
    .games {
        font-size: 0.8em;
    }
}

@media (max-width: 400px) {
    table.games td:nth-child(10),
    table.games th:nth-child(10) {
        display: none; /* Hide the column */
    }
    .navbar-icon {
        display: none;
    }
}


.player-group {
    cursor: pointer;
}

.player:hover, .player-group:hover {
    font-weight: bold;
}

button.vote-button {
    background-color: unset;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.1em;
}

button.vote-button>svg {
    fill: rgba(255,255,255, 0.62);
}

button.vote-button:hover>svg {
    fill: white;
}

.hint {
    margin-left: 10px;
    font-size: 1.3em;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}

.phase-links {
    position: sticky;
    top: 48px;
    z-index: 110;
    box-shadow: 0 2px 2px gray;
    background-color: black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    & a {
        color: white;
        font-weight: unset;
    }
    & a:hover {
        text-decoration: none;
        font-weight: bold;
    }
}

:target {
    scroll-margin-top: 130px;
}

.player-search
{
    & input {
        padding: 3px;
        font-size: 1.1em;
    }

    & button {
        background-color: #333;
        color: white;
        border-radius: 5px;
        padding: 5px 10px;
        border: none;
        cursor: pointer;
    }
}

.searchbox {
    --target-size: 48px; /* https://web.dev/accessible-tap-targets/ */
    --box-height: var(--target-size);
    --border-radius: calc(var(--box-height) / 2);
    --border-width: 2px;
    --icon-size: calc(var(--box-height) * 3/4 );
    --side-margin: calc(var(--border-radius) / 2);
    --icon-vertical-margin: calc( ( var(--box-height) - var(--icon-size) ) / 2 );
}

/* shaping the box */
.searchbox {
    height: var(--box-height);
    max-width: 561px; /* to follow the search box of google.com */
}
.searchbox input[type="search"] {
    border: var(--border-width) solid var(--dark-gray);
    border-radius: var(--border-radius);
    height: 100%;
    width: 100%;
}

/* Styling each component */
.searchbox svg {
    fill: var(--dark-gray);
    height: var(--icon-size);
    width: var(--icon-size);
}
.searchbox input[type="search"] {
    -webkit-appearance: none; /* to prevent Safari from ignoring font-size */
    color: var(--dark-gray);
    /*    font-family: 'Noto Sans', Verdana, sans-serif; */
    font-family: "JetBrains Mono", "Roboto", "Cascadia Mono", monospace, monospace;
    font-size: 1rem;
}
.searchbox input[type="search"]::placeholder {
    color: var(--light-gray);
    opacity: 1; /* to override the default of Firefox */
}

/* positioning inner elements */
.searchbox {
    position: relative;
}
.searchbox svg {
    position: absolute;
    left: var(--side-margin);
    top: var(--icon-vertical-margin);
    bottom: var(--icon-vertical-margin);
}
.searchbox input[type="search"] {
    padding-left: calc( var(--side-margin) + var(--icon-size) + 4px);
    padding-right: var(--side-margin);
}
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; /* Remove the left padding inside the box for Safari; see https://github.com/filipelinhares/ress/blob/master/ress.css */
}

.searchbox {
    z-index: 1;
}

/* Ensuring that tapping the icon focuses the search box */
.searchbox svg {
    z-index: -1;
}

.searchbox input[type="search"] {
    background: transparent;
}

/* Styling focus state */
.searchbox input[type="search"]:focus {
    border-color: var(--focus-blue);
    box-shadow: 0px 0px 5px var(--focus-blue);
    outline: 1px solid transparent; /* fallback for forced color modes; see https://www.sarasoueidan.com/blog/focus-indicators/#tips-for-styling-focus-indicators */
    /* it also removes the default focus ring imposed by browsers */
}

/* Custom-style the delete button that appears once the user enters text (Chrome and Safari only); see https://css-tricks.com/webkit-html5-search-inputs/#aa-styling-search-graphical-widgets */
.searchbox input[type="search"]::-webkit-search-cancel-button {
    /* Remove default */
    -webkit-appearance: none;
    /* Now your own custom styles */
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(148, 148, 148)' %3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z' /%3E%3C/svg%3E%0A");
    height: calc(var(--box-height) / 2);
    width: calc(var(--box-height) / 2);
}

input[type="search"] {
    -webkit-tap-highlight-color: transparent; /* Otherwise, tapping will show a flash of grey background on iOS Safari; see https://twitter.com/masa_kudamatsu/status/1429387005658468356 */
}


/* Positioning the search box */
body .searchbox {
    width: 90%;
    margin: 0 auto;
}