:root {
    --fss: 12px;
    --fsn: 14px;
    --fsg: 16px;
    --fvs: 10px;
}

.anchor {
    display: block;
    height: 130px;
    /*same height as header*/
    margin-top: -130px;
    /*same height as header*/
    visibility: hidden;
}

.partie-titre {
    background-color: white;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    height: 20px;
    display: flex;
}

.partie-titre {
    background-color: white;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    height: 20px;
    display: flex;
}

.partie-titre>* {
    flex: 1;
    padding-left: 5px;
    padding-right: 5px;
    font-size: var(--fsn);
    font-weight: bold;
}

.partie-ouverture {
    padding-left: 5px;
    background-color: white;
    border-top: 1px solid black;
    border-bottom: 0px solid black;
    border-right: 1px solid black;
    height: 15px;
    font-style: italic;
    font-size: var(--fvs);
    display: flex;
}

.partie-ouverture>* {
    flex: 1;
    padding-left: 5px;
    padding-right: 5px;
    font-size: var(--fvs);
    font-style: italic;
}

.partie-ouvreur {
    text-align: right;
}

.partie-titre-mj {
    text-align: right;
}

.partie-titre-vide {
    background-color: darkgrey;
    border-left: 1px solid darkgrey;
    border-top: 1px solid darkgrey;
    border-bottom: 1px solid black;
    border-right: 1px solid darkgrey;
    margin: 0px 0px 0px -1px;
    height: 20px;
}

.partie-type {
    outline: 1px black;
    border-top: 1px solid black;
    border-right: 1px solid black;
    padding-left: 5px;
    height: 17px;
}

.campagne {
    background-color: dodgerblue;
}

.campagne-so {
    background-color: #86e3c5;
}

.libre {
    background-color: white;
}

.evenement {
    background-color: yellow;
}

.annule {
    background-color: red;
}

.partie-content {
    display: flex;
    flex-flow: row wrap;
    flex: 1;
}

.simple {
    background-color: #ffcc99;
}

.semaine {
    display: flex;
    background-color: darkgrey;
    flex-direction: row;
    margin: 10px;
}

.semaine>* {
    font-family: 'Tahoma';
    font-size: var(--fss);
}

.semaine-numero {
    display: flex;
    background-color: white;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    width: 25px;
}

.sessions {
    display: flex;
    background-color: darkgrey;
    flex-direction: column;
}

.session {
    display: flex;
    background-color: darkgrey;
    margin: 10px;
}

.partie-liste {
    display: flex;
    background-color: darkgrey;
    flex-wrap: wrap;
    margin: 10px;
}

.ouverture-ok {
    background-color: lightgreen;
}

.ouverture-warning {
    background-color: orange;
}

.ouverture-ko {
    background-color: #FE2E2E;
}

.session-date {
    display: flex;
    flex-direction: column;
    max-width: 90px;
    min-height: 210px;
}

.session-date-heure {
    flex: 1;
    padding: 5px;
    padding-top: 55px;
    font-size: var(--fsn);
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px dashed black;
}

.session-date-heure-2 {
    flex: 1;
    padding: 5px;
    padding-top: 55px;
    font-size: var(--fsn);
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

.session-date-nom {
    text-align: center;
    vertical-align: middle;
    min-width: 80px;
}

.partie {
    display: flex;
    flex-direction: column;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    margin: 5px 0px 0px 5px;
    background-color: white;
}

.partie-description {
    display: flex;
    width: 200px;
    flex-direction: column;
}

.partie-description-haut {
    display: flex;
    flex: 1;
}

.partie-description-haut-protege {
    display: flex;
    flex: 1;
    background-image: url("../images/protection.png");
    background-position: right top;
    background-size: 25px;
    background-repeat: no-repeat;
}

.partie-description-file-attente {
    display: flex;
    flex: 1;
    background-image: url("../images/sablier.png");
    background-position: right top;
    background-size: 25px;
    background-repeat: no-repeat;
}

.partie-image {
    margin: auto;
    max-width: 74px;
    max-height: 96px;
}

.partie-image-covid {
    margin-top: 20px;
    max-width: 64px;
    max-height: 64px;
}

.partie-image-covid-petit {
    display: none;
    margin-left: 10px;
    margin-top: 5px;
    max-width: 16px;
    max-height: 16px;
}

.partie-notes {
    display: flex;
    flex-direction: row;
}

.partie-notes>* {
    flex: 1;
    text-align: center;
    vertical-align: middle;
}

.partie-nom {
    margin: auto;
    font-size: var(--fsn);
    font-weight: bold;
    background-color: white;
    max-width: 100px;
    text-align: center;
}

.partie-nom-description {
    margin: auto;
    font-size: var(--fsn);
    font-weight: normal;
}

.participants {
    display: flex;
    border-left: 1px solid black;
    flex-direction: column;
    background-color: darkgrey;
    flex: 1;
}

.border-right {
    border-right: 1px solid black;
}

.joueur {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    padding: 2px;
    min-height: 24px;
    font-size: var(--fss);
    min-width: 150px;
}

* {
    box-sizing: border-box;
}

.joueur>img {
    margin-right: 5px;
}

.joueur-first {
    border-top: 0px dashed black;
}

.joueur-middle {
    border-top: 1px dashed black;
}

.joueur-last {
    border-bottom: 1px solid black;
}

.small-btn {
    padding: 2px 10px;
    font-size: var(--fss);
}

.vertical-text {
    transform: rotate(-90deg);
    transform-origin: left top 0;
    font-size: 18px;
    margin-left: 70px;
    margin-top: 90px;
}

.mois-petit {
    display: none;
    background-color: darkgrey;
    border: 0px;
    display: flex;
    padding: 10px;
}

.mois-petit>* {
    flex: 1;
    margin: auto;
    max-width: 100px;
}

.mois {
    background-color: darkgrey;
    border: 0px;
    display: flex;
    padding: 10px;
}

.mois>* {
    flex: 1;
    margin: auto;
    max-width: 200px;
}

.ajoute-partie {
    margin-right: 10px;
    margin-left: 10px;
}

.supprime-partie {
    margin-right: 10px;
    margin-left: 10px;
    max-height: 18px;
    padding: 1px;
}

@media screen and (min-width: 600px) {
    .mois-petit {
        display: none;
    }
}

@media screen and (max-width: 599px) {
    .sessions {
        flex-basis: 100%;
    }
    .semaine-numero {
        margin-left: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .vertical-text {
        margin-left: 65px;
    }
    .semaine {
        margin: 0px;
    }
    .session {
        display: flex;
        background-color: darkgrey;
        margin: 10px;
        flex-direction: column;
    }
    .session-date {
        display: flex;
        flex-direction: row;
        flex: 1;
        min-width: 100%;
        min-height: 25px;
        max-height: 25px;
        height: 25px;
    }
    .session-date-heure {
        padding: 5px;
        font-size: var(--fsn);
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        border-right: 1px dashed black;
        border-bottom: 0px;
        flex: 1;
    }
    .session-date-nom {
        text-align: center;
        vertical-align: middle;
        padding: 5px;
    }
    .partie-liste {
        Margin: 0px;
    }
    .partie {
        margin: 5px 0px 5px 0px;
        flex-basis: 100%;
    }
    .participants {
        border-left: 0px solid black;
        border-top: 1px solid black;
        flex-basis: 100%;
    }
    .partie-description {
        flex: 1;
        flex-direction: column;
    }
    .partie-image {
        margin: 15px;
    }
    .partie-description-haut {
        flex: 1;
    }
    .partie-content {
        border-right: 1px solid black;
    }
    .partie-type {
        border-top: 0px solid black;
    }
    .mois {
        display: none;
    }
    .mois-petit {
        display: flex;
    }
    .partie-image-covid-petit {
        display: flex;
    }
    .partie-image-covid {
        display: none;
    }
    .border-right {
        border-right: 0px solid black;
    }
}