/*~*#*~*#*~*#*~*/
/*   DOCUMENT  */
/*~*#*~*#*~*#*~*/
/**********/
/* GLOBAL */
/**********/
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: Lucida, sans-serif;
}

body {
    margin: auto;
    background-color: MidnightBlue;
    --area-inactive: Wheat;
    --area-active: Orange;
    --joker-inactive: Wheat;
    --joker-active: Orange;
    --header: MidnightBlue;
    --header--icon: RoyalBlue;
    --footer: White;
    --player-color: RoyalBlue;
    --field-color: DarkOrange;
    --joker-color: DarkOrange;
    --button-inactive: RoyalBlue;
    --button-hovered: DarkOrange;
    --button-clicked: Red;
}

main {
    background-color: White;
    padding-bottom: 3em;
}

/**********/
/* HEADER */
/**********/
header {
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--header);
    color: white;
    overflow: hidden;
    font-size: 1.5em;
}

.header__title {
    flex: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}

@media (max-width: 800px) {
    .header__title {
        font-size: 0.5em;
    }
}

.header__username {
    height: 100%;
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 1em;
    padding-left: 1em;
    background-color: DarkOrange;
    text-align: center;
}

@media (max-width: 800px) {
    .header__username {
        font-size: 0.5em;
        padding-right: 0.2em;
        padding-left: 0.2em;
    }
}

.header__icon {
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 1em;
    padding-left: 1em;
    background-color: var(--header--icon);
    transition: 0.2s;
}

@media (max-width: 800px) {
    .header__icon {
        font-size: 0.8em;
        padding-right: 0.2em;
        padding-left: 0.2em;
    }
}

.header__icon:hover {
    background-color: Grey;
}

.header__icon a {
    text-decoration: none;
    color: white;
}

.header__icon img {
    height: 1em;
}

.header_image {
    height: 80%;
    padding: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 1em;
    padding-left: 1em;
    background-color: var(--header);
    transition: 0.2s;
}

/**********/
/* FOOTER */
/**********/
footer {
    min-height: 6em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--footer);
    color: DarkOrange;
    overflow: hidden;
    font-size: 1.2em;
    padding-top: 1em;
    text-align: center;
    font-weight: bold;
}

@media (max-width: 800px) {
    footer {
        font-size: 1em;
    }
}

.footer__image {
    height: 9em;
    width: auto;
    margin-right: 3em;
}

/*~*#*~*#*~*/
/*  LOGIN  */
/*~*#*~*#*~*/

.main-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
}

/*~*#*~*#*~*/
/* ACCUEIL */
/*~*#*~*#*~*/
.tile-area {
    margin: auto;
    margin-top: 2em;
    width: 50vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

@media (max-width: 800px) {
    .tile-area {
        width: 90vw;
    }
}

.tile-area__application {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: DarkOrange;
    width: 6em;
    height: 6em;
    padding: 0.5em;
    margin: 0.5em;
    border-radius: 1.5em 0.5em 1.5em 0.5em;
    text-decoration: none;
    text-align: center;
    color: white;
    font-size: 1.2em;
    transition: 0.5s;
}

@media (max-width: 800px) {
    .tile-area__application {
        font-size: 1em;
        padding: 0.5em;
        margin: 0.2em;
    }
}

.tile-area__application:hover {
    background-color: RoyalBlue;
}

.tile__image {
    max-height: 80%;
    max-width: 80%;
}

/*~*#*~*#*~*#*~*#*~*#*~*#*~*/
/*  PAGE FERMER LES ZONES  */
/*~*#*~*#*~*#*~*#*~*#*~*#*~*/
/**********/
/* GLOBAL */
/**********/
.sub-title {
    height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2em;
    margin: auto;
    width: calc(13.40vw * 5);
    text-align: center;
    padding: 0.1em;
}

@media (max-width: 800px) {
    .sub-title {
        font-size: 1em;
    }
}

/***********/
/* PLAYERS */
/***********/
.players {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: calc(13.40vw * 5);
}

.sub-title-player {
    background-color: var(--player-color);
    color: white;
    border-radius: 2em 2em 0.5em 0.5em;
    margin-top: 1em;
}

.players__player {
    height: calc(0.3em * 5);
    font-size: calc(0.23em * 5);
    width: calc(13.40vw * 2);
    flex: 1;
    text-align: center;
    border: 2px solid RoyalBlue;
    border-radius: 2em;
    padding: 0.3em;
    margin: 0.6em;
    text-align: center;
    color: RoyalBlue;
}

@media (max-width: 800px) {
    .players__player {
        font-size: 1em;
        border-radius: 1em;
        border: none;
        padding: 0.1em;
        margin: 0.2em;
    }
}

.players__score {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(0.3em * 5);
    font-size: calc(0.25em * 5);
    font-weight: bold;
    width: calc(13.40vw * 2);
    color: RoyalBlue;
    font-size: 2em;
}

/*********/
/* FIELD */
/*********/
.field {
    margin: auto;
    width: calc(17.40vw * 5);
    height: calc(5.18vw * 5);
}

.sub-title-field {
    background-color: var(--field-color);
    color: white;
    border-radius: 2em 2em 0 0;
    margin-top: 1em;
}

.field__side {
    position: absolute;
    width: calc(6.7vw * 5);
    height: calc(5.18vw * 5);
}

.side__area {
    position: absolute;
    transition: 0.5s;
    transition-property: background-color;
    box-sizing: border-box;
    border: 0.02vw solid black;
}

.side__area--inactive {
    background-color: var(--area-inactive);
}

.side__area--active {
    background-color: var(--area-active);
}

.side__player-body {
    position: absolute;
    transition: 0.5s;
    transition-property: background-color;
    box-sizing: border-box;
    border: none;
    z-index: 10;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.side__player-body--inactive {
    background-color: none;
    background-image: url('../img/player.png');
}

.side__player-body--active {
    background-color: var(--area-active);
    background-image: url('../img/player-aimed.png');
}

.field__net {
    position: absolute;
    height: calc(4.82vw * 5);
    margin-left: calc(8.52vw * 5);
    border: 1vw solid black;
    z-index: 1;
}

/* LEFT SIDE */
.field__l-side {
    border-right: 0.2vw solid red;
}

.l-side__net-area {
    width: calc(1.98vw * 5);
    height: calc(5.18vw * 5);
    margin-left: calc(6.72vw * 5);
}

.l-side__rsc-area {
    width: calc(3.96vw * 5);
    height: calc(2.59vw * 5);
    margin-left: calc(2.76vw * 5);
    margin-top: calc(2.59vw * 5);
}

.l-side__lsc-area {
    width: calc(3.96vw * 5);
    height: calc(2.59vw * 5);
    margin-left: calc(2.76vw * 5);
}

.l-side__rbc-area {
    width: calc(0.76vw * 5);
    height: calc(2.59vw * 5);
    margin-top: calc(2.59vw * 5);
    margin-left: calc(2vw * 5);
}

.l-side__lbc-area {
    width: calc(0.76vw * 5);
    height: calc(2.59vw * 5);
    margin-left: calc(2vw * 5);
}

.l-side__player-body {
    width: calc(2vw * 5);
    height: calc(5.18vw * 5);
}

/* RIGHT SIDE */
.field__r-side {
    margin-left: calc(8.7vw * 5);
}

.r-side__net-area {
    width: calc(1.98vw * 5);
    height: calc(5.18vw * 5);
}

.r-side__rsc-area {
    width: calc(3.96vw * 5);
    height: calc(2.59vw * 5);
    margin-left: calc(1.98vw * 5);
}

.r-side__lsc-area {
    width: calc(3.96vw * 5);
    height: calc(2.59vw * 5);
    margin-left: calc(1.98vw * 5);
    margin-top: calc(2.59vw * 5);
}

.r-side__rbc-area {
    width: calc(0.76vw * 5);
    height: calc(2.59vw * 5);
    margin-left: calc(5.94vw * 5);
}

.r-side__lbc-area {
    width: calc(0.76vw * 5);
    height: calc(2.59vw * 5);
    margin-left: calc(5.94vw * 5);
    margin-top: calc(2.59vw * 5);
}

.r-side__player-body {
    width: calc(2vw * 5);
    height: calc(5.18vw * 5);
    margin-left: calc(6.7vw * 5);
}

/**********/
/* JOKERS */
/**********/
.jokers {
    margin: auto;
    width: calc(13.40vw * 5);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0.5em;
}

.sub-title-joker {
    background-color: var(--joker-color);
    color: white;
    border-radius: 0.5em 0.5em 2em 2em;
    margin-top: -1.2em;
    margin-bottom: 1em;
}

.jokers__pjok {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.pjok_joker {
    width: calc(1.5vw * 5);
    height: calc(1.5vw * 5);
    border-radius: calc(1.5vw * 5);
    margin-left: calc(0.1vw * 5);
    margin-right: calc(0.1vw * 5);
    transition: 0.5s;
    transition-property: background-color;
}

.pjok_joker--inactive {
    background-color: var(--joker-inactive);
}

.pjok_joker--active {
    background-color: var(--joker-active);
}

/**********/
/* SENDER */
/**********/
.sender {
    margin: auto;
    margin-top: 2em;
    width: calc(13.40vw * 5);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0.5em;
    font-size: calc(0.3em * 5);
    text-align: center;
}

.sender__button {
    font-size: calc(0.15em * 5);
    border-radius: calc(0.3vw * 5);
    padding: calc(0.1em * 5);
    margin-left: calc(0.1vw * 5);
    margin-right: calc(0.1vw * 5);
    transition: 0.5s;
    transition-property: background-color;
}

.sender__button--inactive {
    background-color: var(--button-inactive);
    transition: 0.5s;
    transition-property: background-color;
    color: white;
}

.sender__button--hovered {
    background-color: var(--button-hovered);
    transition: 0.5s;
    transition-property: background-color;
}

.sender__button--clicked {
    background-color: var(--button-clicked);
    transition: 0.5s;
    transition-property: background-color;
}

/**********/
/* TIMER */
/**********/
.timer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 0.5vw;
    padding: 0.5vw;
    border-radius: calc(0.5vw * 5) calc(0.1vw * 5) calc(0.5vw * 5) calc(0.1vw * 5);
    width: 50vw;
    background-color: orange;
}

@media (max-width: 800px) {
    .timer {
        width: 80vw;
    }
}

.timer div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.params__btn {
    width: calc(1vw * 5);
    border-radius: calc(1.5vw * 5);
    margin-left: calc(0.1vw * 5);
    margin-right: calc(0.1vw * 5);
    transition: 0.5s;
    transition-property: background-color, color;
    background-color: RoyalBlue;
    font-size: 2em;
    font-weight: bold;
}

@media (max-width: 800px) {
    .params__btn {
        width: calc(3vw * 5);
        font-size: 1.2em;
    }
}

.params__btn:hover {
    background-color: #6ad;
}

.control__start, .control__pause {
    width: calc(3vw * 5);
    border-radius: calc(0.1vw * 5);
    margin-left: calc(0.1vw * 5);
    margin-right: calc(0.1vw * 5);
    transition: 0.5s;
    transition-property: background-color, color;
    background-color: RoyalBlue;
    font-size: 2em;
    font-weight: bold;
}

@media (max-width: 800px) {
    .control__start, .control__pause {
        width: calc(6vw * 5);
        font-size: 1.6em;
    }
}

.control__start:hover, .control__pause:hover {
    background-color: #6ad;
}

.timer__display {
    width: calc(7vw * 5);
    transition: 0.5s;
    font-size: 4em;
    font-weight: bold;
    font-size: 2.4em;
}

/*~*#*~*#*~*#*~*#*~*#*~*#*~*#*~*#*~*/
/* PAGE FERMER LES ZONES (ANALYSE) */
/*~*#*~*#*~*#*~*#*~*#*~*#*~*#*~*#*~*/
h1 {
    color: darkred;
    text-align: center;
    margin-top: 1em;
}

table {
    font-size: 1.2em;
    margin: auto;
    margin-top: 1em;
    width: 90vw;
    background-color: rgb(255, 205, 205);
}

@media (max-width: 800px) {
    table {
        font-size: 0.6em;
    }
}

th {
    background-color: darkred;
    color: white;
}

tr:nth-child(2n+1) {
    background-color: rgb(255, 205, 205);
}

tr:nth-child(2n) {
    background-color: rgb(255, 225, 225);
}

td, th {
    min-width: 2em;
    text-align: center;
}

.table__succes {
    color: green;
}

.table__fail {
    color: red;
}

.delete-one-form {
}

.delete-one-form__button {
    background-color: inherit;
    border: 2px solid rgb(255, 255, 255, 0);
    color: DarkRed;
    font-size: 1em;
    width: 1.3em;
    height: 1.3em;
    transition: 0.2s;
    border-radius: 50%;
    box-sizing: border-box;
}

.delete-one-form__button:hover {
    color: Red;
    border: 2px solid red;
}

.delete-all-form {
    margin: auto;
    width: 90vw;
    text-align: right;
    margin-top: 2em;
}

.delete-all-form__button, .csv-export-btn {
    background-color: DarkRed;
    padding: 0.5em;
    border-radius: 0.5em;
    border: none;
    color: White;
    transition: 0.2s;
    min-width: 15em;
}

.delete-all-form__button:hover, .csv-export-btn:hover {
    background-color: Red;
}

.csv_header, .csv_matchs, .csv_stats {
    font-size: 0;
}

.table_button {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5em;
    width: 95vw;
}