/**
INSTRUCCIONES
Está estructurado para meter a todos los jugadores y que al avanzar o retroceder con las flechas haga ya varias cosas por CSS, manteniendo casi toda la estructura y cambiando pocas clases. Sólo vamos a hacer con js lo siguiente al movernos entre rondas:
    <div class="pairing">
        <div res="4" class="player winner">player3</div>
        <div res="3" class="player looser">player4</div>
    </div>

* Los divs de los "players" tendrán además la clase winner, looser o gone, según sean ganadores en la ronda a la que nos estamos desplazando, perdedores o hayan perdido en rondas anteriores, respectivamente.

También pueen ser "players" a secas cuando ya hayan ganado la anterior pero no tengan resultado en la ronda a la que nos estamos desplazando

* Si nos estamos moviendo hacia adelante, en la capa con la clase "round" le haremos un toggle de las clases "forwards" hacia adelante, "backwards", si me estoy moviendo hacia atrás o nada si es la ronda inicial

* Si nos movemos a la ronda inicial, a la capa con la clase "round" habrá que añadirle, la clase ._1, la segunda, ._2, etc, logicamente voy quitando y poniendo esta clase. esto hace varias cosas internamente en el css


*El atributo "res" de cada div "player" tiene el resultado match de cada jugador en esa ronda concreta, por ejemplo su es 3 & 2 es porque el ganador lleva 3 de ventaja a falta de 2 hoyos, por tanto el winner tendrá 3 y el looser 2 en el atribi¡uto res, eso hay que actualizarlo al cambiar de ronda

*Cambiamos el texto según la ronda, sea cuartos, octavos, etc. Para eso hay que saber logicamente cuantos jugadores tenemos y la ronda en la que estamos.

*El botón de avanzar desaparece sólo en la última ronda y el de retroceder en la primera, podemeos ponerle una clase o lo que sea más cómodo para esto, no me ha dando tiempo
**/

:root {
    --color1: #fbdd22;
    --color2: #1e539b;
    --color21: #1e539bef;
    --color3: #FFAD05;
    --color4: #3A7D44;
    --color5: #254D32;
    --color6: #f8be0c;
    --color7: #ff3333;
    --color8: #9ac9a2;
}

.logo {
    width: 5em;
    position: absolute;
    top:-3em;
    color: var(--color1);
    opacity: .2;
}

.matchHead {
    /*filter:url(#duo);*/
    display: flex;
    justify-content: center;
    opacity: 1;
    /*padding: 1em;*/
    margin: 0 1em;
}

/*.matchHead > div{*/
/*    margin:1em;*/
/*}*/

.matchHead svg {
    fill: currentColor;
    color: #ffffff;
}

.fedLogo {
    color: white;
    position: absolute;
    top:0;
    display: flex;
    justify-content: center;
    left: 0;
    width: 100%;
    opacity: .2;
    z-index: -1;
}

.fedLogo svg {
    display: block;
    width: 100vw;
    opacity: 0.3;
    position: absolute;
    top: -2em;
    z-index: -1;
}

.dates {
    /*backdrop-filter:blur(10px);*/
    padding-bottom: 0.7em;
}

.knockout-text-bg {
    fill: var(--color5);
}

#knockout-text text {
    font-size:1.4em;
    color:red;
}

body {
    margin: 0;
    background: var(--color2);
    background: #d6ff13;
    font-family: "Lexend", sans-serif;
    background-size: cover;
    background-repeat: no-repeat;
}

.container {
    /*     display: flex; */
    /*     flex-direction: column; */
    max-width: 700px;
    margin: auto;
    overflow: hidden;
    padding-top: 1em;
}

.header {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.tourInfo {
    /*overflow: hidden;*/
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #3a7d44;
    /* height: 8vh; */
    /* border-bottom:1px solid #ffffff40; */
    padding: 0 1rem;
    text-align: center;
}

.tourInfo img {
    filter: url(#duoWhiteLowOpacity);
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
    object-fit: cover;
    opacity: 0.3;
}

.tourCue {
    height: 2em;
    bottom: 0;
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: fixed;
    z-index: 3;
    width: 100%;
    font-size: 2em;
    box-shadow: 0 -10px 15px -3px rgb(0 0 0 / 10%),
    0 -8px 6px -2px rgb(0 0 0 / 5%);
    overflow: hidden !important;
    background: var(--color4);
}

.left,
.right {
    height: 2em;
    width: 2em;
    color: #103e17;
    bottom: 0;
    position: fixed;
    max-height: 2em;
    z-index: 10;
}

.right{
    right:0;
}

.left.hidden,
.right.hidden {
    visibility: hidden;
}

.round-selector-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
    color: #d6ff13;
    overflow: hidden;
}

/* CSS transition applied when translation of items happen */
.round-selector-transition {
    transition: transform 0.4s ease-in-out;
}

/* .round-selector-transition-aux {
    transition: transform 0.4s ease-in-out;
} */

.round-selector{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;
    width:100%;
    flex-shrink:0;
}

.rounds {
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    position: relative;
    backdrop-filter: blur(10px) contrast(3.5);
    border-radius: 2.25em;
    display: flex;
    max-width: 100vw;
    box-shadow: 0 -10px 12px -3px rgb(5 24 3 / 0%),
    0 -4px 6px -2px rgb(51 111 59 / 21%);

    padding-top: 6.5em;
    padding-bottom: 3em;

    background: var(--color4);

    min-height: 50vh;
}

.round {
    width: 100vw;
    font-size: 2em;
}

/* Cuando een el pairing ya no queda ninguno de los dos jugadores, le añado dead, se lo quito cuando no sea así */
.dead.pairing{
    height: 0!important;
}

.pairing {
    display: flex;
    position: relative;
    flex-direction: column;
    /*     overflow: hidden; */
    outline: 1px solid white;
    transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) all;
    margin: 0 1em 1.5em;
}

.pairing:after{
    width: 0em;
    content:"";
    background:white;
    height:10em;
    position:absolute;
    right:0;
}

/* Cuando avanzo de ronda en el selector, le añado forwards y le quito backwards si lo tiene */
/* .round.forwards .pairing:after{ animation:leaving 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;}
.round.forwards .pairing {
    animation: going 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
} */

/* Cuando retrocedo de ronda en el selector, le añado backwards y le quito forwards si lo tiene */
/* .round.forwards .pairing:before{ animation:leaving 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1 reverse;}
.round.backwards .pairing {
    animation: going 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1 reverse;
} */

.round .pairing:nth-of-type(2n) {
    background:var(--color3);
}

.player {
    visibility:visible;
    transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) all;
    height: 3.2em;
    max-height: 3.2em;
    position: relative;
    font-size: 0.55em;
    flex-shrink: 0;
    padding: 0 1em;
    flex-grow: 1;
    display: flex;
    align-items: center;
    /* margin-left: 1.618em; */
    background: #f1f1f1;
    color: #333;
}

.player:after{
    content: "";
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding-right: 0.2em;
    padding-left: 0.2em;
    animation-delay: 1s;
    background: var(--color3);
}

.player.winner,
.player.pending {
    background: white;
    color: var(--color5);
    z-index: 2;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.player.looser {

}

.player.gone{
    opacity:0;
    height:0;

    /* visibility: hidden; */
    display: none;
}

/*.winner:before {*/
/*    clip-path: polygon(0 0, 100% 0, 100% 100%, 1em 100%);*/
/*    background:  var(--color4);*/
/*    color: white;*/
/*}*/

/*.player:before {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    content: attr(data-res);*/
/*    position: absolute;*/
/*    right: 0;*/
/*    top: 0;*/
/*    height: 100%;*/
/*    padding-right: 1.1em;*/
/*    padding-left: 1.6em;*/
/*    animation-delay:1s;*/
/*}*/

/*.pending:before {*/
/*    clip-path: polygon(0 0, 100% 0, 100% 100%, 1em 100%);*/
/*    background:  var(--color8);*/
/*    font-size: 0.6em;*/
/*    color: white;*/
/*    content: "- -";*/
/*}*/

.looser:before {
    display: none!important;
    padding-left: 0.6em;
    color: #ccc;
}

/*-- cuando retrocedo de ronda en el selector, le añado backwards y le quito forwards si lo tiene --*/
.round.forwards .winner:before {
    animation: resforwards 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
}

.round.backwards .winner:before {
    animation: resbackwards 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
}

@keyframes resforwards {
    0% {
        -webkit-transform: translateX(-1em);
        transform: translateX(-1em);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes resbackwards {
    0% {
        -webkit-transform: translateX(1em);
        transform: translateX(1em);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes going {
    0% {
        height: 300px;
    }

    100% {
        height: 3.2em;
    }
}

@keyframes leaving {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* RESULTADO SIMPLE CSS */
.res-container {
    margin-top: 0;
    padding: 0 1em;
    text-align: center;
    font-family: "Verdana", sans-serif;
}

.res-container label{
    color: white;
}

/*.select-css {
    font-family: 'Verdana', sans-serif;
    font-weight: 400;
    color: #444;
    line-height: 1.3;
    padding: 1em;
    font-size: 14px;
    min-width: 100%;
    max-width: 100%;
    margin: 20px auto;
    border: 1px solid #aaa;
    -webkit-box-shadow: 0 1px 0 1px rgba(0, 0, 0, .03);
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .03);
    border-radius: .3em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7));
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), -o-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.select-css::-ms-expand {
    display: none;
}

.select-css:hover {
    border-color: #888;
}

.select-css:focus {
    border-color: #aaa;
    -webkit-box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222;
    outline: none;
}

.select-css option {
    font-weight: normal;
}

.select-css option[selected] {
    background-color: orange;
}*/

#toast {
    visibility: hidden;
    height: 50px;
    color: #fff;
    margin: auto 5px;
    text-align: center;
    border-radius: 2px;
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    top: 35px;
    font-size: 17px;
}

#toast div{
    color: #fff;
    padding: 16px;
    display: none;
    border-radius: 1em;
    -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 10px 1px rgba(0,0,0,0.8);
    box-shadow: 0 0 10px 1px rgba(0,0,0,0.8);
}

#toast #success{
    background-color: green;
}

#toast #error{
    background-color: red;
}

#toast #problem{
    background-color: red;
}

#toast #no-photo{
    background-color: orange;
}

#toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.85s;
    animation: fadein 0.85s;
}

#toast.fadeout {
    visibility: hidden;
    -webkit-animation: fadeout 0.85s;
    animation: fadeout 0.85s;
}

@-webkit-keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }
    to {
        top: 35px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }
    to {
        top: 35px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top: 35px;
        opacity: 1;
        visibility: visible;
    }
    to {
        top: 0;
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes fadeout {
    from {
        top: 35px;
        opacity: 1;
        visibility: visible;
    }
    to {
        top: 0;
        opacity: 0;
        visibility: hidden;
    }
}

button,
.button {
    background-color: #fbfbfb;
    border: none;
    color: #444;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 16px;
    border-radius: 0.75em;
    font-family: "Verdana", sans-serif;
    transition: 0.2s;
    margin-inline: auto;
}

button {
    width: 100%;
}

button:active{
    background-color: #444;
    color: #fbfbfb;
}

.float {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 0;
    right: 0;
    background-color: #d5ff13;
    color: #051803;
    border-radius: 50px;
    text-align: center;
    z-index: 1000;

    background-color: var(--color5);
    color: var(--color1);
}

/* CSS GRUPOS */
#grupos {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 90%;
    font-size: 1.25em;
}

#grupos .grupo{
    border-radius: 0.25em;
    background-color: white;
    overflow: hidden;
    margin-bottom: 1em;
}

#grupos .row {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5em;
}

#grupos .header.row {
    padding-top: 0.5em;
    padding-bottom: 0.2em;
}

#grupos .row:last-child {
    padding-bottom: 0.5em;
}

.header.row {
    background-color: #fed100;
}

.anotation {
    color: rgba(52, 211, 153, 1);
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: center;
}

.mailto {
    background-color: orange;
}

.select-container {
    margin: 1.5em 0;
}

.select-container .sub.header {
    color: white;
    font-size: 1.1rem;
}


/* SELECT 2 */
#container-aux {
    min-height: 68px;
    width: 100%;
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.select2-container {
    /* The container where the selectbox is housing*/
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    height: 3rem;
    margin: 0.25rem 0.25rem 1.75rem 0.25rem;
}

.select2-container .select2-selection--single {
    /* Selection box itself */
    box-sizing: border-box;
    display: block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    /* DIV inside Selection box with text, clear button and arrow down*/
    display: block;
    height: 2.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 0.25rem;
    padding-right: 1.5rem;
}

.select2-container .select2-selection--single .select2-selection__clear {
    /* The DIV where the X is housing to clear the chosen option */
    position: relative;
    margin: -0.25rem;
}

.select2-container .select2-selection--multiple{
    box-sizing: border-box;
    display: block;
    height: -moz-fit-content;
    height: fit-content;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow: hidden;
}

.select2-container .select2-selection--multiple .select2-selection__rendered{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 0.5rem;
}

.select2-container .select2-search--inline {
    /* Search box*/
    float: left;
    width: 100%;
}

.select2-container .select2-search--inline .select2-search__field{
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    box-sizing: border-box;
    width: 100% !important;
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
    padding-left: 0.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.select2-dropdown {
    /* Dropdown area when the arrow down is clicked */
    position: absolute;
    z-index: 50;
    float: left;
    box-sizing: border-box;
    display: block;
    width: auto;
    border-width: 1px;
    border-style: solid;
    border-color: var(--color6);
}

.select2-results__options{
    margin: 0;
    list-style-type: none;
    padding: 0;
}

.select2-results__option {
    /* The rows with results that you see after dropdown.
    Increase p-1 to p-2 to have more space between results */
    --tw-text-opacity: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: 0.25rem;
    line-height: 1.25rem;
}

.select2-results__option[aria-selected]{
    cursor: pointer;
}

.select2-container--open .select2-dropdown {
    /* Dropdown container opened and results are shown*/
    left: 0;
}

.select2-container--open .select2-dropdown--above {
    /* The left and right borders of the option rows */
    border-radius: 0.25rem;
    --tw-border-opacity: 1;
    border-color: var(--color6);
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.select2-container--open .select2-dropdown--below {
    /* The left and right borders of the option rows */
    border-radius: 0.25rem;
    --tw-border-opacity: 1;
    border-color: rgba(156, 163, 175, var(--tw-border-opacity));
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.select2-search--dropdown {
    /* Search dropdown element*/
    display: block;
    padding: 0.5rem;
}

.select2-search--dropdown .select2-search__field {
    /* Search box itself where you can enter text*/
    box-sizing: border-box;
    height: 2.5rem;
    border-radius: 0.25rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: var(--color6);
    padding: 0.25rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
    width: 100%;
}

.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{
    -webkit-appearance: none;
    appearance: none;
}

.select2-search--dropdown.select2-search--hide{
    display: none;
}

.select2-close-mask{
    margin: 0;
    display: block;
    min-width: 100%;
    padding: 0;
    border: 0;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 99;
    background-color: #fff;
    filter: alpha(opacity = 0);
}

.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

.select2-container--default .select2-selection--single {
    /* Selection bar - Self */
    height: 3rem;
    border: none;
    background-color: var(--color6);
    padding: 0.5rem;
    font-weight: 400;
}

/* Fin Select2 a mano */

#title-final, #title-tercercuarto {
    margin: 0;
    text-align: center;
    color: #d6ff13;
    font-size: 1.3rem;
    background-color: var(--color4);
    font-weight: normal;
    padding: .5em 0;
}

.message {
    background: #ffffffa8;
    padding: 4em;
    border-radius: .5em;
}

.bando.player {
    white-space: nowrap;
    /*overflow-x: hidden;*/
    text-overflow: ellipsis;
    display:block;
    padding: .1em 1em;
    align-content: center;
}

.couple-round .bando.player {
    height: 4.5em;
}

.individual-round .bando.player {
    height: 3.5em;
}

.teeTime {
    content: attr(data-teetime);
    color: #000;
    background: var(--color8);

    transform: translatey(-3em) translateX(-.4em);

    padding: .3em .4em;
    border-radius: .2em;
    box-shadow: rgba(17, 17, 26, 0.05) 2px 1px 3px;
    letter-spacing: .12em;
    display:flex;

    z-index:999999;

    font-weight: bold;
    font-size: .6em;

    position: absolute;
    top:1.7em;
    align-items: center
}

.teeTime .teeDate{
    background: white;
    color: green;
    font-weight: bold;
    margin-right: .4em;
    border-radius: .4em;
    padding: 0 .3em;
    display:flex;
}

.bando.player .teeTime {
    display:none;
}

.bando.player:nth-of-type(odd) .teeTime {
    display: flex;
}

.hole-status.has-result {
    top: 50%;
    transform: translate(0, -50%);
    left: -1.5em;
}

.round-name {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: #3a7d44;
    padding: 0 1em;
    text-align: center;
    width: 100%;
}

.pairing .bando .result.winner-badge {
    background: #3d652e;
    color: white
}

.round-name-header {
    margin: 2em 0;
}

.flex-column-reverse{
    flex-direction: column-reverse;
}