/* Échec de l'agrandissement. Renvoi du contenu non agrandi.
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
(32,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
(184,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
(203,32): run-time error CSS1039: Token not allowed after unary operator: '-logo-color'
(208,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
(212,32): run-time error CSS1039: Token not allowed after unary operator: '-light-bg-color'
(216,36): run-time error CSS1039: Token not allowed after unary operator: '-logo-color'
(220,36): run-time error CSS1039: Token not allowed after unary operator: '-light-bg-color'
(233,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
(251,32): run-time error CSS1039: Token not allowed after unary operator: '-logo-color'
(256,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
(261,28): run-time error CSS1039: Token not allowed after unary operator: '-light-grey'
(272,17): run-time error CSS1039: Token not allowed after unary operator: '-logo-color'
(389,22): run-time error CSS1039: Token not allowed after unary operator: '-grey-gradient'
(407,28): run-time error CSS1039: Token not allowed after unary operator: '-light-grey'
(424,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
(453,28): run-time error CSS1039: Token not allowed after unary operator: '-light-grey'
(465,36): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
(482,40): run-time error CSS1039: Token not allowed after unary operator: '-light-grey'
(488,44): run-time error CSS1039: Token not allowed after unary operator: '-logo-color'
(520,28): run-time error CSS1039: Token not allowed after unary operator: '-light-grey'
(532,17): run-time error CSS1039: Token not allowed after unary operator: '-logo-color'
(545,28): run-time error CSS1039: Token not allowed after unary operator: '-light-grey'
(607,36): run-time error CSS1039: Token not allowed after unary operator: '-logo-color'
(623,28): run-time error CSS1039: Token not allowed after unary operator: '-light-grey'
(653,28): run-time error CSS1039: Token not allowed after unary operator: '-light-bg-color'
(983,23): run-time error CSS1036: Expected expression, found '['
(984,28): run-time error CSS1036: Expected expression, found '['
(985,20): run-time error CSS1036: Expected expression, found '['
(986,25): run-time error CSS1036: Expected expression, found '['
(1095,27): run-time error CSS1046: Expect comma, found '105'
(1095,35): run-time error CSS1046: Expect comma, found '/'
(1419,28): run-time error CSS1039: Token not allowed after unary operator: '-light-grey'
(1485,28): run-time error CSS1039: Token not allowed after unary operator: '-light-bg-color'
 */
* {
    box-sizing: border-box;
}

:root {
    --bg-color: #414141;
    --light-bg-color: #616161;
    --logo-color: #911f1f;
    --light-grey: #f8f8f8;
    --light-grey-rgb: 248, 248, 248;
    --grey-gradient: linear-gradient(45deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.8) 100%);
}

html {
    background-color: var(--bg-color);
}

body {
    margin: 0;
    font-family: Arial;
    color: white;
    background: url("/Content/images/BG_LINE_LOGIN.png") no-repeat fixed center;
    background-size: cover;
    min-height: 100vh;
    position: relative;
    padding-bottom: 0;
}

@media screen and (min-width: 1920px) {
    /* Passage � une couleur de fond pour les �crans large */
    body {
        background: var(--bg-color);
    }
}

a {
    color: black;
    text-decoration: unset;
}

p {
    margin: 0;
}

h1 {
    font-weight: bold;
    text-align: center;
}

a:hover {
    color: black;
    text-decoration: underline;
    cursor: pointer;
}

.wrapper-center {
    min-width: 100vw;
    min-height: 100vh;
}

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

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

.no-wrap {
    white-space: nowrap;
}

.normal-wrap {
    white-space: normal !important;
}

.space-evenly {
    justify-content: space-evenly !important;
}

.width-100 {
    width: 100%;
}

.no-margin {
    margin: 0 !important;
}

.margin-top-5 {
    margin-top: 5px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-20 {
    margin-top: 20px !important;
}

.margin-top-30 {
    margin-top: 30px !important;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.margin-r-10-last-child div:not(:last-child) {
    margin-right: 10px;
}

.margin-r-20-last-child div:not(:last-child) {
    margin-right: 20px;
}

.margin-r-10 {
    margin-right: 10px;
}

.margin-r-20 {
    margin-right: 20px;
}

.margin-l-10 {
    margin-left: 10px;
}

.margin-l-20 {
    margin-left: 20px;
}

.gap-20 {
    gap: 20px;
}

.padding-10 {
    padding: 10px;
}

.padding-20 {
    padding: 20px;
}

.fit-content {
    width: fit-content !important;
}

.margin-w-auto {
    margin: 0 auto;
}

.width-90 {
    width: 90%;
}

.color-white {
    color: white !important;
}

.space-between {
    justify-content: space-between;
}

.btn-form {
    border: none;
    text-align: center;
    padding: 8px 30px;
    color: white;
    background-color: var(--bg-color);
    font-size: 20px;
    border-radius: 10px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .2s ease-in-out;
    white-space: nowrap;
}

    .btn-form a {
        color: white;
    }

        .btn-form a:hover {
            text-decoration: none;
        }

    .btn-form:hover {
        cursor: pointer;
        background-color: var(--logo-color);
    }

    .btn-form:disabled {
        cursor: unset;
        background-color: var(--bg-color);
    }

    .btn-form.lite {
        background-color: var(--light-bg-color);
    }

        .btn-form.lite:hover {
            background-color: var(--logo-color);
        }

        .btn-form.lite:disabled:hover {
            background-color: var(--light-bg-color);
        }

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

.btn-petit {
    all: unset;
    text-align: center;
    padding: 5px 8px;
    color: white;
    background-color: var(--bg-color);
    font-size: 15px;
    border-radius: 10px;
    text-transform: uppercase;
    transition: all .2s ease-in-out;
    white-space: nowrap;
}

    .btn-petit a {
        color: white;
    }

        .btn-petit a:hover {
            text-decoration: none;
        }

    .btn-petit:hover {
        cursor: pointer;
        background-color: var(--logo-color);
    }

    .btn-petit:disabled {
        cursor: unset;
        background-color: var(--bg-color);
    }

.wrapper-light-grey-pad10 {
    padding: 10px;
    background-color: var(--light-grey);
    text-align: center;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}

.text-logo-color {
    color: var(--logo-color);
}

address {
    margin-bottom: 0;
}

.message-succes {
    padding: 10px;
    background-color: darkgreen;
    color: white;
    text-align: center;
    display: none;
}

.message-erreur {
    padding: 10px;
    background-color: darkred;
    color: white;
    text-align: center;
    display: none;
}

.btnSauvegarder {
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    height: 18px;
    width: 18px;
    background-image: url("../../Content/images/icons_liste_planning/cassette_noir.png");
    background-color: unset;
}

.btnSupprimer {
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    height: 18px;
    width: 18px;
    background-image: url("../../Content/images/icons_liste_planning/poubelle_noir.png");
    background-color: unset;
    cursor: pointer;
}

.btnAnnuler {
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    height: 18px;
    width: 18px;
    background-image: url("../../Content/images/icons_liste_planning/croix_noir.png");
    background-color: unset;
}

.btnSignatureFormateur {
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    height: 18px;
    width: 18px;
    background-image: url("../../Content/images/icons_liste_planning/stylo_noir.png");
    background-color: unset;
}

.btnSignatureStagiaireSMS {
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    height: 18px;
    width: 18px;
    background-image: url("../../Content/images/icons_liste_planning/sms_noir.png");
    background-color: unset;
}

.btnSignatureStagiaireMail {
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    height: 18px;
    width: 18px;
    background-image: url("../../Content/images/icons_liste_planning/mail_noir.png");
    background-color: unset;
}

.btnSignatureStagiaire2 {
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    height: 18px;
    width: 18px;
    background-image: url("../../Content/images/icons_liste_planning/stylo_noir.png");
    background-color: unset;
}

button:disabled {
    opacity: .35;
}

button.btn-retour {
    border: none;
    background-color: unset;
}

    button.btn-retour:hover {
        background-color: unset;
    }

.wrapper-gradient-90 {
    width: 90%;
    border-radius: 20px;
    background: var(--grey-gradient);
    padding: 15px;
    color: black;
}

.break-640 {
    flex-direction: column;
}

@media screen and (min-width: 640px) {
    .break-640 {
        flex-direction: row;
    }
}

/* TABLEAUX */
/* Desktop */
.tableau-noir-blanc-desktop {
    background-color: var(--light-grey);
    border-radius: 15px;
    color: black;
    display: none;
}

    .tableau-noir-blanc-desktop th {
        padding: 5px;
        text-align: center;
    }

    .tableau-noir-blanc-desktop td {
        padding: 5px;
        text-align: center;
    }

    .tableau-noir-blanc-desktop tbody tr:nth-child(odd) {
        background-color: var(--bg-color);
        color: white;
        border: solid 10px transparent;
    }

        .tableau-noir-blanc-desktop tbody tr:nth-child(odd) td:first-child {
            border-radius: 10px 0 0 10px;
        }

        .tableau-noir-blanc-desktop tbody tr:nth-child(odd) td:last-child {
            border-radius: 0 10px 10px 0;
        }

        .tableau-noir-blanc-desktop tbody tr:nth-child(odd) i {
            color: white !important;
        }

        .tableau-noir-blanc-desktop tbody tr:nth-child(odd) button.btnSupprimer {
            background-image: url("../../Content/images/icons_liste_planning/poubelle_blanc.png");
        }

@media screen and (min-width: 1000px) {
    .tableau-noir-blanc-desktop {
        display: inline-table;
    }
}

/* Mobile */
.tableau-noir-blanc-portable {
    background-color: var(--light-grey);
    color: black;
    width: 95%;
    border-radius: 15px;
    overflow: hidden;
}

    .tableau-noir-blanc-portable > div {
        padding: 15px;
    }

        .tableau-noir-blanc-portable > div:nth-child(even) {
            background-color: var(--bg-color);
            color: white !important;
        }

            .tableau-noir-blanc-portable > div:nth-child(even) i {
                color: white !important;
            }

            .tableau-noir-blanc-portable > div:nth-child(even) button.btnSupprimer {
                background-image: url("../../Content/images/icons_liste_planning/poubelle_blanc.png");
            }

            .tableau-noir-blanc-portable > div:nth-child(even) button.btnSignatureFormateur {
                background-image: url("../../Content/images/icons_liste_planning/stylo_blanc.png");
            }

            .tableau-noir-blanc-portable > div:nth-child(even) .btn-form {
                background-color: var(--light-grey);
                color: black;
                font-weight: 500;
            }

                .tableau-noir-blanc-portable > div:nth-child(even) .btn-form:hover {
                    background-color: var(--logo-color);
                    color: white;
                    font-weight: 500;
                }

@media screen and (min-width: 1000px) {
    .tableau-noir-blanc-portable {
        display: none;
    }
}
/* CACHE MOBILE */
.cache {
    display: none;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    background-color: black;
    opacity: .5;
    z-index: 2;
}

/* HEADER LINKS */

.wrapper-header-burger {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 3;
    border-radius: 10px;
    overflow: hidden;
    width: 42.5px;
    background-color: var(--light-grey);
}

.header-space-mobile {
    height: 90px;
    display: block;
}

.header-burger,
.header-burger-cross {
    padding: 10px;
    font-size: 25px;
    color: var(--logo-color);
    cursor: pointer;
}

.header-burger-cross {
    display: none;
}

.wrapper-header-links {
    display: none;
    position: fixed;
    text-align: center;
    color: black;
    background-color: var(--light-grey);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    max-width: 95%;
    font-size: 20px;
    border-radius: 17px;
    justify-content: space-evenly;
    font-weight: bold;
    z-index: 3;
}

.header-link {
    margin: 20px 0;
    white-space: nowrap;
}

@media screen and (min-width: 1000px) {
    .wrapper-header-burger {
        display: none;
    }

    .header-space-mobile {
        display: none;
    }

    .wrapper-header-links {
        display: flex;
        flex-direction: row;
        transform: unset;
        margin: 20px auto 60px;
        width: 90%;
        max-width: unset;
        padding: 5px;
        font-size: 16px;
        position: unset;
        border-top-right-radius: unset;
        border-bottom-right-radius: unset;
        border-radius: 15px;
    }

        .wrapper-header-links button {
            font-size: 15px;
            white-space: nowrap;
            padding: 5px;
        }

            .wrapper-header-links button a {
                margin: 5px;
            }

    .header-link {
        margin: 0 5px;
        padding: 5px 0;
        transition: all .2s;
        width: 100%;
        border-radius: 10px;
        white-space: initial;
    }

        .header-link:hover {
            background-color: var(--logo-color);
            color: white;
            text-decoration: none;
        }
}

/* FIN HEADER LINKS */

/* FOOTER COPYRIGHT*/

.footer-copyright {
    color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 14px;
    background-color: var(--light-grey);
    padding: 10px;
    text-align: center;
    width: 100%;
    border-top-left-radius: 15px;
    margin-top: 60px;
    border-top-right-radius: 15px;
}

.div-img-avis-google{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img-avis-google {
    width: 75px;
    height: 50px;
}

/* FIN FOOTER COPYRIGHT */

/* POPUPS */

.popup-supprimer,
.popup-supprimerP {
    width: 60%;
    display: none;
    max-width: 300px;
    background-color: var(--light-bg-color);
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

    .popup-supprimer::after,
    .popup-supprimerP::after {
        content: "";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100vh;
        width: 100vw;
        background-color: black;
        opacity: .5;
        z-index: -1;
    }

    .popup-supprimer p,
    .popup-supprimerP p {
        margin-bottom: 10px;
    }

    .popup-supprimer button:nth-child(1),
    .popup-supprimerP button:nth-child(1) {
        margin-right: 20px;
    }

/* FIN POPUPS */

.wrapper-center-ver {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button-mobile-size {
    height: 25px;
    width: 25px;
    background-size: contain;
}

.msgUpdatePlanning {
    padding: 10px;
    width: 100%;
    z-index: 2;
    position: fixed;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.affichageMessageErreurMAJ {
    background-color: darkred;
}

.messageSuccesMAJ {
    position: fixed;
    font-weight: bold;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    width: 100%;
    background-color: darkgreen;
    text-align: center;
}

.headerImage {
    margin-top: 25px;
}

    .headerImage img {
        width: 100%;
    }

    .headerImage h2 {
        text-align: center;
    }

.logoBT,
.imagePage1 {
    width: 100%;
}

.p-page1 {
    font-weight: bold;
    letter-spacing: 3px;
}

#barreProgression {
    margin: 0 auto;
    width: 300px;
    height: 25px;
    border: 3px outset black;
    border-radius: 10px;
    display: flex;
    bottom: 10%;
    right: 10%;
    left: 10%;
}

.barreProgression-element {
    padding: 0px;
    width: 20%;
    height: 20px;
    border: 1px outset black;
    border-top: none;
    border-bottom: none;
    background-color: lightgray;
}

.btn1 {
    padding: 10px 20px;
    background-color: #676c6d;
    color: white;
    font-weight: bold;
    font-size: 1.05em;
    letter-spacing: 3px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px 0;
    width: 100%;
}

.btnDeconnexion {
    width: auto;
}

    .btnDeconnexion .btnDeconnexionLien {
        color: white;
    }

.btnSuiv,
.btnPrec {
    width: 150px;
    font-size: .9em;
}

.btnCommencer:hover {
    box-shadow: 5px 5px 5px #676c6d;
}

.btnPS {
    position: fixed;
    width: calc(100% - 30px);
    bottom: 15px;
    left: 0;
    display: flex;
    justify-content: space-evenly;
    margin: 0 15px;
}

.btnPS2 {
    flex-direction: row;
}

.btnPS div:nth-child(2) {
    display: flex;
    justify-content: space-around;
}

.fBas::after {
    content: '';
    display: block;
    height: 20px;
    background: url(/Content/images/fBas.svg);
    background-repeat: no-repeat;
    text-align: center;
    /* background-position: center; */
    background-position: bottom;
    background-size: 25px;
    filter: invert(1);
    opacity: .5;
}

#myCanvas,
#myCanvasInitiales {
    border: 4px solid #ef796d;
    border-radius: 5px;
    cursor: crosshair;
    max-width: 100%;
}

.affichageMessageErreur {
    background-color: darkred;
    padding: 10px;
    color: white;
    display: none;
}

#formu {
    display: flex;
    align-items: center;
}

.div-formu-element {
    margin: auto;
}

#val.cache {
    opacity: .3;
    cursor: default;
}

#formu section:not(.actu) {
    display: none;
    background-color: grey;
}

section,
#section1,
#sectionCoordonnees,
#sectionFormation,
#sectionObjectifs,
#sectionPedagogiques,
#sectionAnimation,
#sectionAccueil,
#sectionCommentaireLibre,
#sectionSignature,
#sectionSignatureFinale {
    position: relative;
    animation-name: sectionAnim;
    animation-duration: 1.25s;
    overflow: auto;
}

@keyframes sectionAnim {
    0% {
        opacity: 0;
        bottom: 500px;
    }

    100% {
        bottom: 0;
        opacity: 1;
    }
}

#formu section.prem.actu ~ .btnPS {
    display: none;
}

.p-respect-donnees {
    text-align: justify;
    letter-spacing: 1px;
}

.inputFormu,
.inputSignature {
    padding: 15px;
    font-size: 18px;
    border: 5px outset #ef796d;
    border-left: none;
    border-right: none;
    width: 100%;
}

.wrapper {
    padding: 0;
    margin: 0;
    color: #1a1f36;
    box-sizing: border-box;
    word-wrap: break-word;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
    background-color: #ffffff;
    margin-top: 16px;
}

h1 {
    letter-spacing: -1px;
}

a {
    text-decoration: unset;
}

.login-root {
    background: #fff;
    display: flex;
    overflow: hidden;
}

.loginbackground {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 108px;
    z-index: 0;
    overflow: hidden;
}

.flex-flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.center-center {
    align-items: center;
    justify-content: center;
}

.box-root {
    box-sizing: border-box;
}

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

.loginbackground-gridContainer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: [start] 1fr [left-gutter] (86.6px)[16] [left-gutter] 1fr [end];
    grid-template-columns: [start] 1fr [left-gutter] repeat(16,86.6px) [left-gutter] 1fr [end];
    -ms-grid-rows: [top] 1fr [top-gutter] (64px)[8] [bottom-gutter] 1fr [bottom];
    grid-template-rows: [top] 1fr [top-gutter] repeat(8,64px) [bottom-gutter] 1fr [bottom];
    justify-content: center;
    margin: 0 -2%;
    transform: rotate(-12deg) skew(-12deg);
}

.box-divider--light-all-2 {
    box-shadow: inset 0 0 0 2px #e3e8ee;
}

.box-background--blue {
    background-color: #5469d4;
}

.box-background--white {
    background-color: #ffffff;
}

.box-background--blue800 {
    background-color: #212d63;
}

.box-background--gray100 {
    background-color: #e3e8ee;
}

.box-background--cyan200 {
    background-color: #7fd3ed;
}

.padding-bottom--64 {
    padding-bottom: 64px;
}

.padding-bottom--40 {
    padding-bottom: 40px;
}

.padding-top--24 {
    padding-top: 24px;
}

.padding-top--48 {
    padding-top: 48px;
}

.padding-bottom--24 {
    padding-bottom: 16px;
}

.padding-horizontal--48 {
    padding: 30px;
}

.padding-horizontal--10 {
    padding: 10px;
}

.padding-bottom--15 {
    padding-bottom: 15px;
}


.flex-justifyContent--center {
    -ms-flex-pack: center;
    justify-content: center;
}

.formbg {
    margin: 0px auto;
    width: 100%;
    max-width: 766px;
    background: white;
    border-radius: 4px;
    -webkit-box-shadow: 5px -2px 11px 3px rgba(198,32,63,0.42);
    box-shadow: 5px -2px 11px 3px rgba(198,32,63,0.42);
    border-radius: 20px;
}

.label {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    display: block;
}

input {
    border-width: 0px;
}

.reset-pass > a {
    text-align: right;
    margin-bottom: 10px;
}

.grid--50-50 {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}

.field input {
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 100%;
    min-height: 44px;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / 0.5);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    background-color: #f8f8f8;
}

/*input[type="submit"] {
    background-color: #676c6d;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgb(237,178,177) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(237,178,177,0.08) 0px 2px 5px 0px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

    input[type="submit"]:hover {
        background-color: gray;
    }*/

.field-checkbox input {
    width: 20px;
    height: 15px;
    margin-right: 5px;
    box-shadow: unset;
    min-height: unset;
}

.field-checkbox label {
    display: flex;
    align-items: center;
    margin: 0;
}

a.ssolink {
    display: block;
    text-align: center;
    font-weight: 600;
}

.footer-link span {
    font-size: 14px;
    text-align: center;
}

.listing a {
    color: #697386;
    font-weight: 600;
    margin: 0 10px;
}

#Commentaire {
    height: 100px;
    padding: 12px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}

.spanDemandeConge {
    width: 120px;
}

#resp-table {
    width: 100%;
    display: table;
}

#resp-table-caption {
    display: table-caption;
    text-align: center;
    font-weight: bold;
    margin-bottom: 16px;
}

#resp-table-header {
    display: table-header-group;
    background-color: gray;
    font-weight: bold;
    font-size: 25px;
}

.table-header-cell {
    display: table-cell;
    padding: 10px;
    text-align: justify;
    font-size: 16px;
}

#resp-table-body {
    display: table-row-group;
}

.resp-table-row {
    display: table-row;
}

.table-body-cell {
    display: table-cell;
    text-align: center;
}

/* *** FIRST MOBILE *** */
@media screen and (min-width: 640px) {

    .headerImage {
        margin-top: 50px;
        display: flex;
        flex-direction: column;
    }

        .headerImage img {
            align-self: center;
            width: 500px;
        }

    #formu {
        width: 450px;
        margin: auto;
    }

    .logoBT,
    .imgPage1 {
        width: auto;
    }
}

/*      /!\ A CLASSER /!\      */

/*.affichageMessageErreur {
    display: none;
    background-color: darkred;
    color: white;
    padding: 15px;
    font-weight: bold;
    margin-top: 5px;
}*/

.fa-solid {
    align-self: center;
    cursor: pointer;
}

.btnLogin {
    font-weight: bold;
    background-color: rgb(239,122,110);
    color: white;
    font-size: 25px;
    padding: 5px;
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
}

.containerLogin {
    display: block;
    align-self: center;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: ruby;
}

    /* Hide the browser's default checkbox */
    .containerLogin .checkboxLogin,
    .containerLogin .radioBoxLogin {
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmarkLogin,
.radiomarkLogin {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border: 2px solid #ef796d;
    border-radius: 3px;
    background-color: white;
}

.radiomarkLogin {
    border-radius: 45%;
}

/* On mouse-over, add a grey background color */
.containerLogin:hover .checkboxLogin ~ .checkmarkLogin,
.containerLogin:hover .radioBoxLogin ~ .radiomarkLogin {
    background-color: #ccc;
}

/* When the checkbox is checked, add a coral background */
.containerLogin .checkboxLogin:checked ~ .checkmarkLogin,
.containerLogin .radioBoxLogin:checked ~ .radiomarkLogin {
    background-color: #ef796d;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkLogin:after,
.radiomarkLogin:after {
    content: "";
    position: absolute;
    display: none;
}

/* Style the checkmark/indicator */
.containerLogin .checkmarkLogin:after,
.containerLogin .radiomarkLogin:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Show the checkmark when checked */
.containerLogin .checkboxLogin:checked ~ .checkmarkLogin:after,
.containerLogin .radioBoxLogin:checked ~ .radiomarkLogin:after {
    display: block;
}

.p-login {
    align-self: start;
}

.imgLogin {
    width: 100%;
    height: 75px;
}

.div-formateurIntranetLogin, #site_nom, #salle_info {
    margin: 30px 0px;
    padding: 5px;
    border-radius: 15px;
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    background-color: rgb(237,178,177);
    width: 300px;
    height: 100px;
    align-self: center;
}

.div-formateurIntranetLogin {
    height: 100px;
}

    .div-formateurIntranetLogin p {
        margin: 0px;
    }

/***** DOSSIERS EN COURS / FINIS ET PLANNING INDIVIDUELLE ******/
#tableDossierEnCours,
#tableDossierFinis,
#tableListePlanning {
    display: none;
}

.tableListeClient {
    margin-bottom: 50px;
}

    .tableListeClient, .tableListeClient th, .tableListeClient td {
        border: 3px solid black;
        border-collapse: collapse;
    }

        .tableListeClient th, .tableListeClient td {
            padding: 15px;
        }

        .tableListeClient td {
            color: black;
        }

button.iconePlanning {
    border: none;
    background-color: transparent;
    padding-inline: 0;
}

    button.iconePlanning:disabled > i {
        cursor: no-drop;
    }

.container {
    position: relative;
}
/*
.div-dossierCoursInfo {
    display: flex;
    justify-content: end;
}*/

.div-dossierCoursInfo-elements:nth-child(1) {
    padding-bottom: 5px;
}

.inputDossier {
    width: 100%;
    padding: 5px;
    border: none;
    border-radius: 10px;
    font-size: 12px;
}

/* POPUPS */

.div-envoiSMSMail {
    display: none;
    color: black;
    flex-direction: column;
    padding: 10px;
    background-color: var(--light-grey);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    max-width: 400px;
    border-radius: 10px;
}

    /*.div-envoiSMSMail .btn-close {
        padding: 8px 15px;
        align-self: end;
    }*/

    .div-envoiSMSMail label {
        font-weight: bold;
        font-size: 20px;
    }

    .div-envoiSMSMail textarea {
        height: 200px;
        font-family: Arial;
        font-size: 15px;
    }

#affichageMessageMail,
#affichageMessageSMS {
    display: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    background-color: darkred;
    color: white;
    padding: 20px;
    font-weight: bold;
    text-align: center;
    z-index: 3;
}

.popup,
.popupAnnuler,
.popupSignFormateur,
.popupSignClient,
.popupClient {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.popup-content,
.popupAnnuler-content,
.popupSignFormateur-content,
.popupSignClient-content,
.popupClient-content,
.popupEnvoiMailSMS-content {
    background-color: var(--light-bg-color);
    width: 90%;
    position: fixed;
    max-width: 400px;
    top: 50%;
    left: 50%;
    opacity: 1;
    padding: 10px;
    text-align: center;
    transform: translate(-50%, -50%);
}

.popupAnnuler-content,
.popupEnvoiMailSMS-content {
    text-align: start;
}

/*
.btnSupprimerPlanning {
    text-decoration: none;
    margin: 5px 0;
    width: 75px;
    font-size: 12px;
    padding: 10px 20px;
    border: 2px solid #676c6d;
    background-color: #676c6d;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
}*/

.inputEnvoiMail {
    padding: 5px;
    margin-bottom: 20px;
    font-size: 15px;
    border: 1px solid black;
}

.btn1.btnFermerSMSMail {
    text-decoration: none;
    width: 54px;
    text-align: center;
    align-self: end;
    margin-bottom: 25px;
}

#texteCommAnnulation {
    width: 100%;
    max-width: 100%;
    height: 150px;
    font-family: Arial;
}

.div-coordonneesFormateur {
    display: flex;
    flex-direction: column;
}

.inputCoordonneesFormateur, .inputDemandeConge {
    padding: 10px;
    border: 3px solid white;
}

.messageErreurCoordonneesFormateur {
    display: none;
    background-color: darkred;
    color: white;
    padding: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    border-radius: 6px;
}

.msgDatePlanning {
    position: fixed;
    left: 50%;
    top: 40%;
}

.divPlanningInfos {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.lienSessionFormation {
    text-decoration: none;
    color: black;
}

.formParametres {
    margin-bottom: 50px;
}

/*.divSignatureFormateur {
    overflow: auto;
    min-height: 700px;
}

    .divSignatureFormateur p {
        margin: 0;
    }*/

.divCanvas {
    position: relative;
    width: fit-content;
}

#myCanvas, .myCanvas {
    border: 4px solid #ef796d;
    border-radius: 5px;
    cursor: crosshair;
    max-width: 100%;
}
/*
.div-infos-signaturesStagiaire {
    display: flex;
    justify-content: end;
}

    .div-infos-signaturesStagiaire div {
        align-self: end;
    }*/


/*
.div-signatures-formateur {
    display: flex;
    justify-content: space-around;
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    background-color: rgb(237,178,177);
    width: 100%;
    border-radius: 15px;
}*/

/*.div-signatures-formateur div {
        align-self: center;
    }


        .div-signatures-formateur div:nth-child(4) {
            border-left: 3px solid black;
            padding-left: 14px;
        }*/

.div-infosPlanning {
    flex-wrap: nowrap;
    height: 120px;
    overflow-x: auto;
    width: 100%;
    font-size: 13px;
}

.btnEnvoiSMSMailPlanning {
    margin: 5px;
    font-size: 12px;
    text-align: center;
    padding: 5px 10px;
    background-color: #676c6d;
    color: white;
    font-weight: bold;
    letter-spacing: 3px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.hr-planning {
    display: none;
}

.hidden-mobile {
    display: none;
}

.hidden-desktop {
    display: block;
}

@media screen and (min-width: 1000px) {
    .hidden-mobile {
        display: block;
    }

    .hidden-desktop {
        display: none;
    }
}

@media screen and (min-width: 640px) {
    .div-login-element {
        flex-direction: row;
    }

    /*.affichageMessageErreur {
        margin-left: 150px;
        width: 500px;
    }*/

    .containerLogin {
        margin-top: 0;
    }

    .div-input {
        width: 450px;
    }

    .btnLogin {
        margin-left: 25%;
        font-size: 25px;
        width: 300px;
    }

    .imgLogin {
        height: auto;
    }

    #tableDossierEnCours,
    #tableDossierFinis,
    #tableListePlanning {
        display: inline-table;
    }

    .div-formateurIntranetLogin {
        display: flex;
        flex-direction: column;
        width: 400px;
    }

    #site_nom, #salle_info {
        height: 90px;
    }

    .btnSupprimerPlanning {
        font-size: 15px;
    }

    .inputCoordonneesFormateur, .inputDemandeConge {
        padding: 12px;
    }

    .inputCoordonneesFormateur, .inputDemandeConge {
        width: 400px;
    }

    .msgDatePlanning {
        left: 40%;
    }

    .divPlanningInfos {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    #h2DatePopup, #nom_formation, #titre_signatures_formateur {
        font-size: 25px;
        color: black;
    }

    .divSignatureFormateur {
        height: auto;
        padding: 0px;
        margin: 25px;
        position: fixed;
        left: 50%;
        transform: translate(-75%, 10%);
    }

    .hr-planning {
        display: block;
        margin: 0;
        padding: 0;
        height: 3px;
        background-color: black;
        opacity: 1;
    }

    .div-infosPlanning {
        font-size: 14px;
        height: 125px;
        overflow-y: hidden;
    }

    .btnEnvoiSMSMailPlanning {
        font-size: 0.85em;
        width: 100%;
    }
}

@media screen and (min-width: 900px) {
    .div-dossierCoursInfo-elements {
        display: flex;
        justify-content: space-between;
    }

        .div-dossierCoursInfo-elements label {
            align-self: end;
            padding-right: 15px;
        }


    .div-infos-signaturesStagiaire {
        justify-content: space-between;
    }
}