/* ==  Gestion des styles pour les mobiles == */

@media screen and (max-width: 768px) {

    /*  <== Module Assiduité ==> */
    #ajout-assiduite-etud .description>textarea,
    #ajout-justificatif-etud .raison>textarea {
        width: 90%;
    }

    #modimpl,
    #moduleimpl_select {
        max-width: 200px;
    }

    #timeline {
        flex-wrap: wrap-reverse;
    }

    .time-buttons {
        display: flex;
        justify-content: space-evenly;
    }

    #timeline .inputs {
        flex-direction: row;
        justify-content: space-evenly;
        width: 100%;
        padding: 8px;
    }

    #timeline .inputs>input {
        width: 100%;
        text-align: center;
    }

    .timeline-container .period-handle::before {
        width: 40px !important;
        height: 100% !important;
        content: "";
        display: block;
        background-color: red;
        border-radius: 12px;
        opacity: 0.5;
        position: absolute;
        top: 0;

        mix-blend-mode: color-dodge;

    }

    .timeline-container .period-handle.left::before {
        transform: translateX(-50%);
        left: 0;
    }

    .timeline-container .period-handle.right::before {
        transform: translateX(50%);
        right: 0;
    }

    .selectors .infos {
        flex-direction: column;
    }

    .selectors .infos .date-input {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .mass-selection {
        flex-wrap: wrap;
    }

    .mass-selection .rbtn {
        --size: 35px;
        width: var(--size) !important;
        height: var(--size) !important;
    }

    .etud_row {
        grid-template-columns: 2% 20% auto 25% !important;
        max-width: 350px;
        gap: 8px;
    }

    .etud_row .assiduites_bar {
        grid-column: 4 !important;
        grid-row: 1;
    }

    .etud_row .btns_field.single {
        grid-column: 3 !important;
        grid-row: 1;
    }

    .rbtn::before {
        --size: 35px;
        width: var(--size) !important;
        height: var(--size) !important;
    }

    div.formsemestre_status {
        padding: 0;
    }

}