@import url('./css/layout.css');

body {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;
    min-height: 100%;
    height: 100%;
}

html {
    min-height: 100%;
    height: 100%;
}

.center {
    text-align: center;
}

.pre-formatted {
    white-space: pre-wrap;
}

.menu .societe {
    padding: 20px;
    text-align: center;
}

.menu .societe .societe_nom {
    font-weight: bold;
    font-size: 1.2em;
}

.menu .formateur {
    padding: 20px;
    text-align: center;
}

.menu .formateur .formateur_nom {
    font-weight: bold;
    font-size: 1.2em;
    background-color: black;
    color: white;
}

.menu .menu_entry a {
    text-decoration: none;
    color: black;
    display: inline-block;
    width: 100%;
    text-align: left;
    line-height: 30px;
    padding-left: 30px;
}

.menu .menu_entry a:hover {
    color: #377971;
}

.menu .menu_entry a.disabled {
    color: #999;
}

.menu .menu_entry.subentry a {
    padding-left: 60px;
    font-style: italic;
}

.menu .lien_ics {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 0.8em;
}

#logout {
    display: inline-block;
    width: 40px;
    line-height: 40px;
    background-color: #dc3545;
    color: white;
    text-align: center;
}

#hamburger {
    display: inline-block;
    width: 40px;
    line-height: 40px;
    background-color: #377971;
    color: white;
    text-align: center;
    cursor: pointer;
}

.vw-100 {
    width: 100vw;
}

h2 {
    font-size: 1.8em;
    border-bottom: 1px solid #CCC;
    margin-bottom: 20px;
}

h3 {
    font-size: 1.4em;
    border-bottom: 1px solid #CCC;
    margin-bottom: 20px;
}

div.auth-box {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    min-height: 200px;
    text-align: center;
    z-index: 100;
    transition: 0.5s all;
    top: -600px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .18);
}

div.auth-box header {
    color: #363636;
    margin-bottom: 10px;
    font-size: 1.5em;
    padding: 10px;
}

div.auth-box .body {
    padding: 20px;
}

.formation_stagiaire {
    border: 0px;
    background-color: transparent;
}

.formation_stagiaire.email,
.formation_stagiaire.little,
span.email {
    font-size: 0.8em;
    font-style: italic;
    color: #444;
    font-weight: normal;
}

div.container.large {
    max-width: 1800px;
}

.zone-ajout-formation {
    padding: 10px 5px;
    border: 1px solid #DDD;
    background-color: #EEE;
}

.zone-ajout {
    padding: 10px 5px;
    border: 1px solid #DDD;
    background-color: #EEE;
}


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

img.signature {
    max-height: 50px;
    max-width: 50px;
}

td.nottoday,
th.nottoday {
    opacity: 0.5;
}

.table.dataTable .thead-dark th.nottoday,
.table .thead-dark th.nottoday {
    border-bottom: 0px;
    border-color: #CCC;
}

table.dataTable .fit,
table .fit {
    width: 100px;
    max-width: 100px;
}

table.dataTable tr.past,
table tr.past {
    background-color: #EEE;
    color: #444;
}

table.dataTable tr.now,
table tr.now {
    color: green;
}

div.tableau-reservation {
    display: table;
    border-collapse: collapse;
}

div.materiel {
    display: table-row;
    margin-bottom: 5px;
}

div.materiel .c {
    display: table-cell;
    box-sizing: border-box;
}

div.materiel .c.lib {
    text-align: left;
    padding: 5px;
}

div.materiel div.res {
    min-width: 40px;
    min-height: 40px;
    border: 1px solid #CCC;
    vertical-align: bottom;
    font-size: 0.7em;
    text-align: center;
    color: #AAA;
    position: relative;
}

div.materiel div.res.today {
    border: 1px solid #FF0000;
}

div.materiel div.res.weekend {
    opacity: 0.5;
}

div.materiel div.res.fom {
    border-left: 2px solid black;
}

div.materiel div.res:hover {
    background-color: #EEE;
    cursor: pointer;
    color: #555;
}

div.materiel div.res.reserved {
    background-color: tomato;
    color: white;
}

div.res span.flod {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 0.7em;
}

div.res span.form {
    display: none;;
}

div.res.reserved span.form {
    position: absolute;
    top: -3px;
    right: 0px;
    font-size: 1.2em;
    display: inline-block;
}

div.res.reserved span.form.attributed {
    color: #0069D9;
}

div.res.reserved span.form:hover {
    transform: scale(1.2);
}

div.materiel.nodispo div.res {
    background-color: #000;
}

div.lib {
    height: 40px;
    min-width: 80px;
    text-align: center;
    border: 0px solid #CCC;
    vertical-align: middle;
    font-weight: bold;

}

div.vertical span {
    line-height: normal;
}

span#MAT_id {
    font-weight: bold;
}

span#RES_date {
    font-weight: bold;
}

.parent_affectation {
    height: 100px;
}

.pave {
    position: relative;
    max-width: 400px;
    width: 100%;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 50px;
    background-color: #FFFFFF;
    border-radius: 0.125rem;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%),
    0 3px 1px -2px rgb(0 0 0 / 20%),
    0 1px 5px 0 rgb(0 0 0 / 12%);
}

.pave header {
    background-color: #0069D9;
    max-width: 100%;
    padding: 0.25em;
    text-align: center;
    color: white;
    font-weight: bold;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    
    & .content {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

.pave header span.distanciel {
    position: absolute;
    top: 4px;
    left: 4px;
}

.pave.reservation {
    clear: both;
}

.pave.today_formation header {
    background-color: #f04949;
}

.pave.finished_formation header {
    background-color: #5a5a5a;
}

.pave.finished_formation .select_status {
    position: absolute;
    z-index: 10000;
    transform: translateY(-50%);
    background-color: #FFF;
    display: none;
}

.pave.finished_formation .select_status.displayed {
    display: block;
}

.pave.finished_formation .select_status span.status {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.pave.finished_formation .select_status span.status:hover {
    cursor: pointer;
    filter: brightness(1.05);
}

.pave.inactif header {
    background-color: #5a5a5a;
}

.pave.provisoire {
    opacity: 0.7;
    transition: 0.3s all;
}

.pave.provisoire:hover {
    opacity: 1;
}

.pave.not_displayed {
    display: none;
}

.pave.autre_centre {
    background-color: #d9edff;
}

.pave_fichier {
    background-color: #F1F1F1;
    display: block;
    padding: 5px;
    border: 1px solid #CCC;
    position: relative;
    margin: 2px;
     
    & span.delete_ressource {
        color: red;
        position: absolute;
        right: 3px;
        top: 1px;
        font-size: 20px;
        cursor: pointer;
    }
    
    & span.edit_ressource {
        color: black;
        position: absolute;
        right: 28px;
        top: 1px;
        font-size: 20px;
        cursor: pointer;
    }

    & span.change_type {
        color: black;
        position: absolute;
        right: 63px;
        top: 1px;
        font-size: 20px;
        cursor: pointer;
    }
}

.pc.reachable {
    color: green;
}

.pc.unreachable {
    color: red;
}


.container_picto {
    display: inline-block;
    position: relative;
}

.nb_connection {
    position: absolute;
    top: 2px;
    left: 6px;
    font-size: 0.7em;
    font-weight: bold;
}

.pave.modele_evaluation.disabled {
    opacity: 0.7;
}

div.modele_evaluation_ligne {
    background-color: #FFF;
    line-height: 40px;
    padding: 3px 5px;
    margin-bottom: 3px;
    position: relative;
    cursor: pointer;
}

div.categorie_container {
    border: 1px solid #CCC;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #EEE;
    border-radius: 2px;
}

div.categorie {
    font-weight: bold;
    font-size: 1.2em;
    line-height: 2em;
    background-color: #FFF;
    padding: 2px 5px;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    column-gap: 4px;
}

div.categorie input[type=text],
div.critere input[type=text] {
    border: 0px;
    width: 100%;
    background-color: transparent;
    line-height: 2em;
}

div.critere_container {
    margin-left: 20px;
    line-height: 2em;
}

div.critere {
    background-color: #FFF;
}

div.critere .form-check,
div.critere .form-radio {
    padding-bottom: 5px;
    padding-top: 5px;
    margin-left: 40px;
    position: relative;
    display: block;
    padding-left: 1.25rem;
}

div.critere .ligne1 {
    margin-bottom: 2px;
    padding: 2px 5px;
    position: relative;
    display: flex;
}

div.critere .ligne2 {
    & .choix {
        display: flex;
        column-gap: 5px;
        align-items: center;
        justify-content: flex-end;
    }

    & .choix .libelle {
        font-size: 0.9em;
        margin-right: 5px;
    }

    & .choix .del {
        cursor: pointer;
        color: red;
        filter: opacity(0.7);
        transition: 0.3s all;
    }

    & .choix .del:hover {
        filter: opacity(1);
    }

    & input[type=text] {
        width: 100%;
        border: 0px;
        background-color: transparent;
        text-align: right;
    }

    & input[type=text]::placeholder {
        text-align: right;
    }
}

div.critere.NOTE {
    background-color: rgb(255, 250, 250);
    border-bottom: 1px solid rgb(219, 146, 146);
}

div.critere.LIBRE {
    background-color: rgb(250, 255, 250);
    border-bottom: 1px solid rgb(131, 182, 131);
}

div.critere.QCU {
    background-color: rgb(249, 239, 252);
    border-bottom: 1px solid rgb(147, 77, 179);
}

div.critere.QCM {
    background-color: rgb(232, 249, 252);
    border-bottom: 1px solid rgb(45, 146, 171);
}

.buttons-right {
    height: 100%;
}

div.reorder_container {
    flex-shrink:1;
    width: 1em;
    text-align:center;
}

div.reorder {
    line-height: 0.5em;
    border: 1px solid #CCC;
    cursor: pointer;
}

.categorie_container:first-child .reorder.cat.up {
    visibility:hidden;
}

.categorie_container:nth-last-child(2) .reorder.cat.down {
    visibility: hidden;
}

.critere:first-child .reorder.cri.up {
    visibility: hidden;
}

.critere:nth-last-child(2) .reorder.cri.down {
    visibility: hidden;
}

.legende_mail {
    display: none;
    font-size: 0.8em;
    margin-bottom: 1em;
}

.legende_mail.displayed {
    display:block ;
}

.cursor-pointer {
    cursor: pointer;
    user-select: none;
}

.form-group {
    margin-top: 30px;
    background-color: #FFFFFF;
    position: relative;
    border-bottom: 1px solid rgb(179, 220, 179);
}

.form-group.invalid {
    background-color: rgb(255,250,250);
    border-bottom: 1px solid rgb(219, 146, 146);
}

.form-group label {
    position: absolute;
    font-size: 0.8em;
    top: -15px;
}

.form-group input {
    background-color: transparent;
    border: 0px;
    line-height: 40px;
    padding-left: 5px;
}

span.status {
    padding: 3px;
    border-radius: 3px;
}

span.status.status_1 {background-color: #CCC;}
span.status.status_2 {background-color: rgb(243, 197, 137);}
span.status.status_3 {background-color: rgb(125, 231, 134);}
span.status.status_4 {background-color: rgb(84, 199, 228);}

.prog_l1 {
    font-weight: bold;
    margin-bottom: 5px;
}

.prog_l2 {
    padding-left: 20px;
    margin-bottom: 3px;
}

.prog_jour {
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    border-bottom: 1px solid #CCC;
    background-color: #EEE;
    padding: 5px;
    font-size: 1.2em;
}

.zone_grise {
    background-color: #EEE;
    border: 1px solid #CCC;
    padding: 10px;
}

.zone-upload-dragndrop {
    border: 2px dashed #555;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    margin-top: 30px;
    margin-bottom: 30px;
    min-height: 200px;
    background-color: #EEE;
    max-width: 900px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    transition: 0.3s all;

    &.dragover {
        background-color: #CCC;
    }
}

@media screen and (max-width: 640px) {
    .pave {
        width: 100%;
        margin: 10px 0;
    }
}