:root {
    --neutre: #afbec5;
    --secondaire: #b2e3e6;
    --couleur-fond-v6: #00a4ae;
    --GaucheGrilleHoraire: "0px";
    --LargeurGrilleHoraire: "100px";
    --CouleurFondConflit: lightyellow;
    --CouleurTexteConflit: #D1212E;
    --FontWeightConflit: 700;
    --CouleurFondFauxConflit: lightyellow;
    --CouleurTexteFauxConflit: #D1212E;
    --FontWeightFauxConflit: 700;
}

/**************************************************
 Libellé
**************************************************/
.libelle {
    display: block;
    margin: 5px;
    color: #333;
    font-size: 12px;
    /* NOTE(PERE): Modifier la taille de ".input-container[data-size-compact] > .field" si on change cette taille (ajouter une variable css éventuellement) */
}

.horaire {    
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
}

.horaire__selecteur__courant {
    position: absolute;
    display: flex;
    background-color: red;
    height: 2px;
    z-index: 1;
    left: var(--GaucheGrilleHoraire);
    width: var(--LargeurGrilleHoraire);
}

.horaire__button {
    border: none;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    user-select: none;
    color: var(--couleur-fond-v6);
    padding-left: 0px;
    padding-right: 0px;
}

.horaire__center__div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.horaire__checkbox__check {
    background: var(--couleur-fond-v6) !important;
}

.horaire__checkbox {
    font-size: 19px;
    color: white;
    background-color: white;
    border: 2px solid #484848;
    border-radius: 3px;
}

.horaire__l, .horaire__l__clone {
    border-collapse: collapse;
    border: 1px solid transparent;
    box-sizing: border-box;
    /*overflow: hidden;*/
    margin: 0px;
    padding: 0px;
    /*table-layout: fixed;*/
    /*width: fit-content;*/
}

    .horaire__row__l:nth-child(2n-1) > td:not(:first-child) {
        background-color: #fafafa;
}

    .horaire__row__l:last-child td:not(:first-child) {
        border-bottom: 1px solid #f0f0f0;
    }

    .horaire__row__l:first-child td:not(:first-child) {
        border-top: 1px solid #f0f0f0;
    }

    .horaire__row__l td:first-child {
        border-right: 1px solid #f0f0f0;
    }

    .horaire__row__l > td:last-child {
        border-right: 1px solid #f0f0f0;
    }

.horaire__row__s {
}
    .horaire__row__S:nth-child(2n-1) > td:not(:first-child) {
        background-color: #fafafa;
    }
    .horaire__row__s[data-first] > .horaire__case {
        border-top: 1px solid #eee;
    }

.horaire__row > td {
}

.horaire__headerrow > th {
}

.horaire__topleft__l {
    border-width: 1px 1px 1px 0;
    font-size: 0.91em;
    text-align: center;
    padding: 2px;
    overflow: hidden;
    width: 1px;
    border-style: solid;
    border-color: #DFDFDF;
    border-width: 1px 0 1px;
    background-color: rgba(255,255,255,1);
}

.horaire__topleft__s {
    border-width: 1px 1px 1px 0;
    font-size: 0.91em;
    text-align: center;
    padding: 2px;
    overflow: hidden;
    width: 1px;
    border-style: solid;
    border-color: #DFDFDF;
    border-width: 0 0 1px;
    background-color: rgba(255,255,255,1);
}

.horaire__enteteper_l {
    /*font-size: 12px;
    vertical-align: top;
    color: #555;
    padding: 2px;*/

    border-right-width: 0;
    border-left-color: #DFDFDF;
    font-size: 12px;
    text-align: right;
    width: 45px;
    padding: 2px 4px 0px;
    color: #3f3f3f;
    background: #fafafa;
    border: solid 1px #DFDFDF;
    border-width: 0px 1px 1px 0;
    vertical-align: top;
    white-space: nowrap;
}

.horaire__enteteper_s {
    /*font-size: 12px;
    vertical-align: top;
    color: #555;*/

    border-right-width: 0;
    border-left-color: #DFDFDF;
    font-size: 12px;
    text-align: right;
    width: 45px;
    padding: 2px 4px 0px;
    color: #3f3f3f;
    background: #fafafa;
    border: solid 1px #DFDFDF;
    border-width: 0px 1px 1px 0;
    vertical-align: top;
    white-space: nowrap;
}

.horaire__entetejour_l {
    /*font-size: 12px;
    font-weight: normal;
    color: #555;
    letter-spacing: 0.5px;
    text-align: left;
    padding-left: 2px;*/

    font-weight: normal;
    color: black;
    background: #eeeeee;
    border-style: solid;
    border-color: #DFDFDF;
    border-width: 1px 1px 1px 0;
    padding: 12px 4px;
    text-align: center;
    vertical-align: top;
    cursor: default;
    overflow: hidden;
    white-space: nowrap;
}

.horaire__entetejour_s {
    /* color: #555;
    letter-spacing: .5px;
    box-sizing: border-box;
    padding: 6px 2px;
    background-color: white;*/

    font-weight: normal;
    color: black;
    background: #eeeeee;
    border-style: solid;
    border-color: #DFDFDF;
    border-width: 1px 1px 1px 0;
    padding: 12px 4px;
    text-align: center;
    vertical-align: top;
    cursor: default;
    overflow: hidden;
    white-space: nowrap;
}

.horaire__s {
    table-layout: fixed;
    width: 100%;
    border: none;    
}

.horaire__case {
    background-color: #fff;
    border: 1px solid #eee;
    border-top: none;
}

    .horaire__case[data-today] {
        /*background-color: lum(var(--neutre), 0.25);*/
        background-color: var(--neutre) !important;
    }

    .horaire__case[data-now] {
        /*background-color: lum(var(--secondaire), 0.35);*/
        background-color: var(--secondaire) !important;
    }

.horaire__case__vide {
    background: linear-gradient(45deg, #bebebe 3.75%, #fafafa 3.75%, #fafafa 46.25%, #bebebe 46.25%, #bebebe 53.75%, #fafafa 53.75%, #fafafa 96.25%, #bebebe 96.25%);
    background-size: 8px 8px;
    background-position: 50px 50px;
}

.horaire__renc {
    font-weight: normal;
    display: inline-block;
    padding: 5px;
    position: absolute;
    box-sizing: border-box;
    background-color: transparent;
    color: #555;
    font-size: 12px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    overflow: hidden;
}

    .horaire__renc[data-action] {
        cursor: pointer;
    }

    .horaire__renc[data-today] {        
        background-color: var(--neutre) !important;
        /*z-index: 1;*/
    }

    .horaire__renc[data-now] {        
        background-color: var(--secondaire) !important;
        border-color: var(--secondaire) !important;
        /*z-index: 1;*/
    }


.horaire__renc__conflit {
    background-color: var(--CouleurFondConflit);
    color: var(--CouleurTexteConflit);
}

    .horaire__renc__conflit[data-today] {
        background-color: var(--neutre) !important;        
    }

    .horaire__renc__conflit[data-now] {
        background-color: var(--secondaire) !important;
        border-color: var(--secondaire) !important;    
    }

.horaire__renc__fauxconflit {
    background-color: var(--CouleurFondFauxConflit);
    color: var(--CouleurTexteFauxConflit);
}

    .horaire__renc__fauxconflit[data-today] {
        background-color: var(--neutre) !important;
    }

    .horaire__renc__fauxconflit[data-now] {
        background-color: var(--secondaire) !important;
        border-color: var(--secondaire) !important;
    }

.horaire__renc__info__divicone {
    /*	//opacity: 0;*/
    /*pointer-events: none;*/
    cursor: pointer;
}

.horaire__renc__edit__divicone {
    cursor: pointer;
    pointer-events: auto;
}

.horaire__renc__popUpInfo {
    position: fixed;
    background-color: white;
    color: black;
    /*font: 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;*/
    box-shadow: 10px 10px 60px rgb(82, 82, 82);
    height: auto;
    width: max-content;
    min-width: 15%;
    vertical-align: middle;
    border-radius: 3px;
    padding: 25px;
    transition: 750ms all;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
}


.horaire__renc__titre {
    font-size: 12px;    
}

.horaire__renc__titre__conflit {
    font-weight: var(--FontWeightConflit);
}

.horaire__renc__titre__fauxconflit {
    font-weight: var(--FontWeightFauxConflit);
}

.horaire__renc__data {
    color: #555;
    /*font-size: 11px;*/
    opacity: 0.65;
    font-size: 0.91em;
}

.horaire__renc__data__popUpInfo {    
    width: max-content;
}

.navigateurDate {
    background: var(--primaire);
}

@media only screen and (min-width : 769px) {
    .horaire {
        overflow-x: auto;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
    }

    /* quand on est en mode horaire normal (pas celui vertical), on rapetisse un peu le contenu des cases, et on squeeze les lettres un peu pour gagner le max d'espace */
    .horaire__renc {
        font-size: 11.5px;
        letter-spacing: -0.5px;
    }
}

.seldate {
    margin: 5px;
    max-width: 600px;
    display: flex;
    align-items: center;
    /* taille requise pour 30 septembre, le texte le plus long, comme ça les flèches bougent pas d'un mois à l'autre */
    min-width: 235px;
    justify-content: space-between;
    flex-grow: 1;
}

.seldate__entete {
}



.cacher {
    display: none !important;
}

.horaire__resizer__periode {
    left: 0px;
    bottom: 0px;
    height: 5px;
    position: absolute;
    cursor: row-resize;
    user-select: none;
    right: 0px;
    border-right: 0px solid #aaa;
}

    .horaire__resizer__periode:after {
        content: "";
        height: 2px;
        width: 100%;
        /*background: #aaa;*/
        display: block;
        margin-top: 5px;
        pointer-events: none;
        user-select: none;
    }

    .horaire__resizer__periode:hover:after {
        /*background-color: #dfdfdf;*/
    }

.horaire__resizer__jour {
    top: 0px;
    right: 0px;
    width: 5px;
    position: absolute;
    cursor: col-resize;
    user-select: none;
    bottom: 0px;
    border-right: 0px solid #aaa;
}

    .horaire__resizer__jour:after {
        content: "";
        width: 2px;
        height: 100%;
        background: #aaa;
        display: block;
        margin-left: 5px;
        pointer-events: none;
        user-select: none;
    }

    .horaire__resizer__jour:hover:after {
        background-color: #eee;
    }