@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Overpass:400,700&display=swap');

:root {
    /*--primary-color: #50ae32;
    --primary-color-alt: #3e9822;*/
    --primary-color: #00aeef;
    --primary-color-caution: #c9252c;
    --primary-color-alt: #129ace;
    --primary-color-caution-alt: #b01f26;
    --background-color: #231f20;
    --background-color-alt: #a3a3a3;
    --background-color-header: #eeeeee;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    min-height: 100vh;
    color: var(--background-color);
}

input, select, textarea {
    font-family: 'Roboto', sans-serif;
}

.body-login {
    display: flex;
}

a.lien, a.lien:visited {
    color: var(--primary-color);
}

    a.lien:hover {
        color: var(--primary-color-alt);
    }

.login-pane {
    background: #3e3e3e;
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #ffffff;
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000' viewBox='0 0 800 800'%3E%3Cg fill='none' %3E%3Cg stroke='%23043e76' stroke-width='17'%3E%3Cline x1='-8' y1='-8' x2='808' y2='808'/%3E%3Cline x1='-8' y1='792' x2='808' y2='1608'/%3E%3Cline x1='-8' y1='-808' x2='808' y2='8'/%3E%3C/g%3E%3Cg stroke='%23043b72' stroke-width='16'%3E%3Cline x1='-8' y1='767' x2='808' y2='1583'/%3E%3Cline x1='-8' y1='17' x2='808' y2='833'/%3E%3Cline x1='-8' y1='-33' x2='808' y2='783'/%3E%3Cline x1='-8' y1='-783' x2='808' y2='33'/%3E%3C/g%3E%3Cg stroke='%2304386d' stroke-width='15'%3E%3Cline x1='-8' y1='742' x2='808' y2='1558'/%3E%3Cline x1='-8' y1='42' x2='808' y2='858'/%3E%3Cline x1='-8' y1='-58' x2='808' y2='758'/%3E%3Cline x1='-8' y1='-758' x2='808' y2='58'/%3E%3C/g%3E%3Cg stroke='%23043569' stroke-width='14'%3E%3Cline x1='-8' y1='67' x2='808' y2='883'/%3E%3Cline x1='-8' y1='717' x2='808' y2='1533'/%3E%3Cline x1='-8' y1='-733' x2='808' y2='83'/%3E%3Cline x1='-8' y1='-83' x2='808' y2='733'/%3E%3C/g%3E%3Cg stroke='%23043264' stroke-width='13'%3E%3Cline x1='-8' y1='92' x2='808' y2='908'/%3E%3Cline x1='-8' y1='692' x2='808' y2='1508'/%3E%3Cline x1='-8' y1='-108' x2='808' y2='708'/%3E%3Cline x1='-8' y1='-708' x2='808' y2='108'/%3E%3C/g%3E%3Cg stroke='%23042f60' stroke-width='12'%3E%3Cline x1='-8' y1='667' x2='808' y2='1483'/%3E%3Cline x1='-8' y1='117' x2='808' y2='933'/%3E%3Cline x1='-8' y1='-133' x2='808' y2='683'/%3E%3Cline x1='-8' y1='-683' x2='808' y2='133'/%3E%3C/g%3E%3Cg stroke='%23042c5c' stroke-width='11'%3E%3Cline x1='-8' y1='642' x2='808' y2='1458'/%3E%3Cline x1='-8' y1='142' x2='808' y2='958'/%3E%3Cline x1='-8' y1='-158' x2='808' y2='658'/%3E%3Cline x1='-8' y1='-658' x2='808' y2='158'/%3E%3C/g%3E%3Cg stroke='%23032a58' stroke-width='10'%3E%3Cline x1='-8' y1='167' x2='808' y2='983'/%3E%3Cline x1='-8' y1='617' x2='808' y2='1433'/%3E%3Cline x1='-8' y1='-633' x2='808' y2='183'/%3E%3Cline x1='-8' y1='-183' x2='808' y2='633'/%3E%3C/g%3E%3Cg stroke='%23032753' stroke-width='9'%3E%3Cline x1='-8' y1='592' x2='808' y2='1408'/%3E%3Cline x1='-8' y1='192' x2='808' y2='1008'/%3E%3Cline x1='-8' y1='-608' x2='808' y2='208'/%3E%3Cline x1='-8' y1='-208' x2='808' y2='608'/%3E%3C/g%3E%3Cg stroke='%2302244f' stroke-width='8'%3E%3Cline x1='-8' y1='567' x2='808' y2='1383'/%3E%3Cline x1='-8' y1='217' x2='808' y2='1033'/%3E%3Cline x1='-8' y1='-233' x2='808' y2='583'/%3E%3Cline x1='-8' y1='-583' x2='808' y2='233'/%3E%3C/g%3E%3Cg stroke='%2302214b' stroke-width='7'%3E%3Cline x1='-8' y1='242' x2='808' y2='1058'/%3E%3Cline x1='-8' y1='542' x2='808' y2='1358'/%3E%3Cline x1='-8' y1='-558' x2='808' y2='258'/%3E%3Cline x1='-8' y1='-258' x2='808' y2='558'/%3E%3C/g%3E%3Cg stroke='%23011f47' stroke-width='6'%3E%3Cline x1='-8' y1='267' x2='808' y2='1083'/%3E%3Cline x1='-8' y1='517' x2='808' y2='1333'/%3E%3Cline x1='-8' y1='-533' x2='808' y2='283'/%3E%3Cline x1='-8' y1='-283' x2='808' y2='533'/%3E%3C/g%3E%3Cg stroke='%23011c43' stroke-width='5'%3E%3Cline x1='-8' y1='292' x2='808' y2='1108'/%3E%3Cline x1='-8' y1='492' x2='808' y2='1308'/%3E%3Cline x1='-8' y1='-308' x2='808' y2='508'/%3E%3Cline x1='-8' y1='-508' x2='808' y2='308'/%3E%3C/g%3E%3Cg stroke='%2300193f' stroke-width='4'%3E%3Cline x1='-8' y1='467' x2='808' y2='1283'/%3E%3Cline x1='-8' y1='317' x2='808' y2='1133'/%3E%3Cline x1='-8' y1='-333' x2='808' y2='483'/%3E%3Cline x1='-8' y1='-483' x2='808' y2='333'/%3E%3C/g%3E%3Cg stroke='%2300173b' stroke-width='3'%3E%3Cline x1='-8' y1='342' x2='808' y2='1158'/%3E%3Cline x1='-8' y1='442' x2='808' y2='1258'/%3E%3Cline x1='-8' y1='-458' x2='808' y2='358'/%3E%3Cline x1='-8' y1='-358' x2='808' y2='458'/%3E%3C/g%3E%3Cg stroke='%23001437' stroke-width='2'%3E%3Cline x1='-8' y1='367' x2='808' y2='1183'/%3E%3Cline x1='-8' y1='417' x2='808' y2='1233'/%3E%3Cline x1='-8' y1='-433' x2='808' y2='383'/%3E%3Cline x1='-8' y1='-383' x2='808' y2='433'/%3E%3C/g%3E%3Cg stroke='%23013' stroke-width='1'%3E%3Cline x1='-8' y1='392' x2='808' y2='1208'/%3E%3Cline x1='-8' y1='-408' x2='808' y2='408'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    -webkit-box-shadow: 5px 0px 6px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 0px 6px 0px rgba(0,0,0,0.75);
    box-shadow: 5px 0px 6px 0px rgba(0,0,0,0.75);
    */
}

.login {
    display: flex;
    flex-direction: column;
    width: 50vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.login-titre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 3em;
    color: #000000;
}

    .login-titre img {
        max-width: 500px;
    }

.login p {
    margin: 0;
}

.login form {
    padding: 2em;
    min-width: 500px;
    color: var(--background-color-alt);
    background: #ffffff;
}

.login .button {
    border: 0;
    font-size: 1.2em;
    padding: 0.5em 1em;
    margin-top: 1em;
    width: 100%;
}

.login .validation-summary-valid ul, .login .validation-summary-valid li {
    margin: 0;
    padding: 0;
}

form button {
    cursor: pointer;
}

.button + .button, .button + .button-group, .button-group + .button {
    margin-left: 1em;
}

.button {
    font-size: 1em;
    text-decoration: none;
    padding: 0.5em 1em;
    display: inline-block;
    cursor: pointer;
    outline: none;
}

    .button i {
        margin-right: 0.5em;
    }

.button {
    border: 0;
    background: var(--primary-color);
    color: #ffffff;
    transition: background ease-in-out 200ms;
    border-radius: 4px;
    position: relative;
}

    .button i, .button span {
        position: relative;
        z-index: 2;
    }

    .button:after {
        content: "";
        position: absolute;
        background: var(--primary-color-alt);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 4px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform ease-in-out 125ms;
        z-index: 1;
    }

    .button:hover:after, .button:active:after, .button:focus:after {
        transform: scaleX(1);
    }

.button-white {
    background: #eeeeee;
    color: #3e3e3e;
}

    .button-white:hover, .button-white:focus, .button-white:active {
        color: #ffffff;
    }


    .button-white:after {
        background: var(--primary-color-alt);
    }

.button-alt {
    background: #eeeeee;
    color: #3e3e3e;
}

    .button-alt:after {
        background: #e4e4e4;
    }

.button-caution {
    background: var(--primary-color-caution);
    color: #ffffff;
}

    .button-caution:after {
        background: var(--primary-color-caution-alt);
    }

.button-small {
    font-size: 0.8em;
    font-weight: bold;
}

.button-shake {
    animation: wiggle 150ms infinite;
    animation-timing-function: linear;
    animation-iteration-count: 3;
}

@keyframes wiggle {
    0% {
        transform: translate(2px, 0);
    }

    50% {
        transform: translate(-2px, 0);
    }

    100% {
        transform: translate(2px, 0);
    }
}

.button-group {
    display: flex;
    position: relative;
}

    .button-group .button, .button-group .button:after {
        border-radius: 0;
        margin: 0;
    }

        .button-group .button:first-of-type, .button-group .button:first-of-type:after {
            border-radius: 4px 4px 4px 4px;
        }

        .button-group .button:last-of-type, .button-group .button:last-of-type:after {
            border-radius: 4px 4px 4px 4px;
        }

.button-combo-liste {
    position: absolute;
    top: 27px;
    left: 0;
    border: 2px solid var(--primary-color);
    z-index: 10;
    background: #ffffff;
    transform: scaleY(0);
    transition: transform ease-in-out 100ms;
    transform-origin: top;
    max-height: 300px;
    overflow: auto;
}

.button-combo-liste__open {
    transform: scaleY(1);
}

.button-combo-liste .button {
    border-radius: 0 !important;
    display: block;
    width: 100%;
    white-space: nowrap;
    text-align: left;
}
/* Layout console */
.main h2 {
    margin: 1em 0;
    text-transform: uppercase;
    font-size: 1.25em;
}

.actions {
    margin: 1em;
    text-align: right;
}

/* Listes */
.table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

    .table th {
        background: var(--primary-color-alt);
        color: #ffffff;
        font-weight: normal;
        padding: 0.25em 0.5em;
        border-bottom: 1px solid #ffffff;
    }

        .table th + th {
            border-left: 1px solid #ffffff;
        }

    .table td {
        padding: 0.5em 0.5em;
    }

        .table td + td {
            border-left: 1px solid var(--primary-color);
        }

tr.tr-hover:hover td {
    background: #e9f1f6;
    cursor: pointer;
}

table.strip tr:nth-child(even) {
    background-color: #f5f5f5;
}

.table-multiple tr {
    background-color: transparent;
}

.table-multiple th {
    padding: 0.25em;
    font-size: 0.8em;
}

.input-field {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    margin: 1em 0;
}

.validation-summary-errors ul {
    margin: 1em 0;
    padding: 0;
}

    .validation-summary-errors ul li {
        justify-content: flex-start;
        display: flex;
        color: #ff0000;
        font-size: 0.8em;
    }

.field-validation-error {
    margin: -0.75em 0 1em 0;
    justify-content: flex-start;
    display: flex;
    color: #ff0000;
    font-size: 0.8em;
}

.input-field label, .input-liste-checkbox-label, .input-liste-checkbox > label {
    font-weight: bold;
    font-size: 0.8em;
    margin-bottom: 0.5em;
}

.input-field input, .input-field select, .input-field textarea {
    width: 100%;
    padding: 0.3em 0.5em;
    border: 0;
    border-bottom: 1px solid #808080;
    outline: 0;
    font-size: 1em;
    font-weight: 700;
    background: #ffebce;
}

.input-liste-checkbox {
    display: flex;
    flex-direction: column;
}

.input-field-checkbox {
    display: flex;
    align-items: center;
    background: #ffebce;
    padding: 0.3em 0.5em;
}

    .input-field-checkbox + .input-field-checkbox {
        margin-top: 0.25em;
    }

    .input-field-checkbox label {
        order: 2;
        cursor: pointer;
        margin-left: 0.5em;
        font-size: 1em;
        font-weight: 700;
    }

    .input-field-checkbox input {
        order: 1;
    }

.input-validation-error {
    border-color: #ff0000;
}

form {
    max-width: 60%;
}

.modalbox form {
    max-width: none !important;
}

.form-action {
    display: flex;
    max-width: 800px;
    justify-content: space-between;
    align-items: center;
    margin-top: 1em;
}

.indicateurs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
}

.indicateurs-item {
    background-color: #eeeeee;
    color: #3e3e3e;
    padding: 0.5em;
    flex: 1 1 0px;
    text-align: center;
    font-weight: bold;
}

.indicateurs-item-titre {
    font-size: 1em;
}

.indicateurs-item-montant {
    font-size: 1.5em;
}

.indicateurs-item + .indicateurs-item {
    margin-left: 1em;
}

.liste-projets {
    list-style: none;
    margin: 0;
    padding: 0;
}

.liste-projets-item {
    margin-bottom: 2em;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "titre prix" "liste liste";
}

.liste-projets-item-titre {
    grid-area: titre;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 0.25em;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

.statut-projet {
    font-size: 0.6em;
    background: var(--primary-color);
    color: #ffffff;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    margin-right: 1em;
    letter-spacing: 1px;
    font-weight: 700;
}

.liste-projets-item-montant {
    grid-area: prix;
    text-align: right;
    font-weight: 700;
}

.liste-projets-item-formations {
    grid-area: liste;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 0.5em;
}

.formation-item {
    border-left: 2px var(--background-color-alt) solid;
    padding: 0.5em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #eeeeee;
    margin-bottom: 4px;
}

    .formation-item > div {
        flex: 1 1 0px;
        margin-right: 0.5em;
    }

    .formation-item i {
        margin-right: 0.5em;
        color: #808080;
    }

.dashboard-liste-sections {
    display: grid;
    grid-template-columns: 2fr 4em 1fr;
    grid-template-areas: "traiter . derniers";
}

.dashboard-section-atraiter {
    grid-area: traiter;
}

.dashboard-section-derniers {
    grid-area: derniers;
}


.arianne {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 1em;
    margin: -1.5em -1.5em 0 -1em;
}

.arianne-link {
    text-decoration: none;
    color: #3e3e3e;
    font-size: 0.8em;
    text-transform: uppercase;
    position: relative;
    transition: color ease-in-out 125ms;
    padding: 0.5em;
    display: flex;
    align-items: center;
}

    .arianne-link > * {
        position: relative;
        z-index: 2;
    }

    .arianne-link:after {
        content: "";
        position: absolute;
        background: var(--primary-color);
        left: -0.4em;
        right: -0.4em;
        bottom: -0.25em;
        top: -0.25em;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform ease-in-out 125ms;
        z-index: 1;
        border-radius: 4px;
    }

    .arianne-link:hover {
        color: #ffffff;
    }

        .arianne-link:hover:after {
            transform: scaleX(1);
        }

    .arianne-link i {
        margin-right: 0.5em;
    }

    .arianne-link + .arianne-link {
        margin-left: 1em;
    }

.titre-action {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
    justify-content: space-between;
}

    .titre-action h2 {
        margin: 0;
    }

    .titre-action .actions {
        text-align: right;
    }

.letter {
    background: var(--primary-color);
    color: #ffffff;
    border-radius: 4px;
    padding: 0.1em 0.25em;
    margin-right: 0.5em;
}

.letter_formation {
    background: #3e3e3e;
}

.projet-creator {
    font-size: 0.8em;
    margin-top: -2em;
}

.fiche-formateur-infos-competences-libelle, .infos-adresse-label, .liste-emails-label {
    font-weight: bold;
    font-size: 0.8em;
    margin-bottom: 0.5em;
    display: block;
}

.fiche-formateur-infos-competences-description {
    margin: 0.5em 0;
    line-height: 1.25em;
}

.fiche-formateur-infos-adresse {
    margin-top: 1em;
}

.liste-emails {
    margin-top: 1em;
}

.liste-emails-item-label {
    margin-right: 1em;
}

.liste-emails-item-adresse {
    padding-left: 1em;
}

.block-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}

.block-info-libelle {
    font-weight: bold;
    font-size: 0.8em;
    margin-bottom: 0.5em;
    display: block;
}

.block-info-value {
    display: flex;
    align-items: center;
}

    .block-info-value > i {
        margin-right: 0.5em;
    }

.actions-sous-titre {
    margin-bottom: 1em;
    margin-top: -0.5em;
}

.infos-aucune {
    margin: 1em 0;
    padding: 0.5em;
    background: #eeeeee;
    color: var(--background-color);
    border-radius: 4px;
    font-size: 0.8em;
}

.infos-adresse {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "libelle libelle" "adresse adresse" "codepostal ville";
}

.infos-adresse-label {
    grid-area: libelle;
}

.infos-adresse-adresse {
    grid-area: adresse;
    text-transform: uppercase;
}

.infos-codepostal {
    grid-area: codepostal;
}

.infos-ville {
    grid-area: ville;
    text-transform: uppercase;
}

.infos-codepostal + .infos-ville {
    margin-left: 1em;
}

/* Listes drag and drop */
.liste-selection {
    flex: 1;
    padding: 0em;
}

.liste-selection-item {
    padding: 0.5em;
    background: #eeeeee;
    color: #3e3e3e;
    cursor: pointer;
    border: 2px solid #eeeeee;
}

    .liste-selection-item span {
        font-weight: bold;
        font-size: 1em;
    }

    .liste-selection-item:hover {
        background: #dbdbdb;
    }

    .liste-selection-item + .liste-selection-item {
        margin-top: 0.5em;
    }

    .liste-selection-item i {
        visibility: hidden;
        margin-right: 0.5em;
    }

.parcours-principal, .parcours-secondaire {
    margin-left: 1em;
    display: none;
}

.liste-selection-item__doubleselection {
    background: #f3fff5;
    border: 2px solid #a8e0b3;
}

    .liste-selection-item__doubleselection .parcours-principal {
        display: inline-block;
    }

    .liste-selection-item__doubleselection i.fa-check-double {
        color: #16c239;
        visibility: visible;
    }

    .liste-selection-item__doubleselection:hover {
        background: #f3fff5;
    }

.liste-selection-item__selection {
    background: #f3fff5;
    border: 2px solid #a8e0b3;
}

    .liste-selection-item__selection .parcours-secondaire {
        display: inline-block;
    }

    .liste-selection-item__selection i.fa-check {
        color: #16c239;
        visibility: visible;
    }

    .liste-selection-item__selection:hover {
        background: #f3fff5;
    }

.filtres {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.filtres-roles {
    align-items: stretch;
}

    .filtres-roles .button {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 0.9em;
    }

    .filtres-roles .button i {
        font-size: 1.5em;
        margin-right: 0;
    }

    .filtres-roles .button-group {
        align-items: stretch;
    }

.flex-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.listes-display {
    text-align: right;
}

    .listes-display .btn-display i {
        margin: 0;
    }

/* Recherche */
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 0px;
}

#zone_recherche {
    border-color: #218fcf;
    border-width: 3px;
}


.ui-menu-item .ui-state-active,
.ui-menu-item .ui-widget-content .ui-state-active,
.ui-menu-item .ui-widget-header .ui-state-active,
.ui-menu-item .ui-button:active,
.ui-menu-item .ui-button.ui-state-active:hover,
.ui-menu-item:active, .ui-menu-item:hover {
    background: #e9f1f6 !important;
    border-color: transparent !important;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #e9f1f6 !important;
    border-color: transparent !important;
}


.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    margin-bottom: -1em;
    padding: 0;
    list-style: none;
    background-color: #fff;
    border-radius: 0;
    font-size: 16px;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: none;
}

li.breadcrumb-item a {
    font-size: 14px;
    line-height: 30px;
    color: #1F2C52;
    text-decoration: none;
}

    li.breadcrumb-item a:hover {
        text-decoration: underline;
    }

li.breadcrumb-item.item-home a {
    line-height: 25px;
}

.breadcrumb > li:last-child > a {
    color: #53A9FF;
    text-decoration: none;
}

    .breadcrumb > li:last-child > a:hover {
        text-decoration: none;
    }

.lien-vide {
    text-decoration: none !important;
}

    .lien-vide:hover {
        text-decoration: none !important;
    }

.breadcrumb-item + .breadcrumb-item {
    padding-left: 13px;
}

.raz-margins {
    margin-top: 0 !important;
}

#btn_scroll_top {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    outline: none; /* Remove outline */
}

a.liste-selection-item {
    text-decoration: none;
}

.actions-left {
    margin-top: 1em;
}

.liste-plus-item {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #231f20;
    position: relative;
    margin-bottom: 0.5em;
    background: #f5f5f5;
    font-weight: bold;
    border: 2px #f5f5f5 solid;
}

    .liste-plus-item a.lien {
        flex: 1;
        text-align: left;
        padding: 0.5em 1em;
        display: block;
        text-decoration: none;
        color: #231f20;
        transition: background ease-in-out 50ms;
        overflow: hidden;
    }

        .liste-plus-item a.lien:hover {
            background: #e4e4e4;
        }

    .liste-plus-item button {
        margin-right: 0;
        border-radius: 0;
    }

        .liste-plus-item button:after {
            border-radius: 0;
        }

        .liste-plus-item button i {
            margin-right: 0;
        }

.modalbox .input-field {
    margin: 0;
    padding: 1em 0;
}

.modalbox .field-validation-error {
    margin: 10px 0 0 0;
}

.recherche-plus {
    border: 3px solid #218fcf !important;
    background: #ffffff !important;
    border-radius: 5px;
    padding: 0.5em !important;
    font-weight: normal !important;
    font-size: 0.8em !important;
    width: 500px !important;
    display: block !important;
}

.modalbox-content {
    display: none;
}

h2 i, h3 i {
    margin-right: 0.25em;
}

.onglet-button i {
    margin-right: 0.25em;
}

.h2-sous-titre {
    display: block;
    font-size: 0.75em;
    font-weight: normal;
    padding-left: 2em;
    font-style: italic;
}

.compteur-lignes {
    font-weight: bold;
    margin: 0;
}

.table-previsionnel {
    border-collapse: collapse;
}

    .table-previsionnel td {
        padding: 0.75em 1em;
        background: #ffffff;
        border-bottom: 1px solid #eeeeee;
        border-top: 1px solid #eeeeee;
        border-left: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
    }

.item-remplissage, .remplissage {
    position: relative;
}

.remplissage-avancement {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.remplissage, .item-remplissage {
    border: 2px solid #d0d0d0;
    background: #ffffff;
    height: 20px;
    border-radius: 3px;
}

.remplissage-avancement {
    border: 2px solid #ffffff;
    height: 16px;
    background: #ffffff;
    transform: scaleX(1);
    transition: transform ease-out 500ms;
    transform-origin: left;
}

.remplissage-avancement__empty {
    background: #ffffff;
}

.remplissage-avancement__low {
    background: #c9252c;
}

.remplissage-avancement__medium {
    background: #fac720;
}

.remplissage-avancement__full {
    background: #15dc0c;
}

.remplissage-avancement__animate {
    transform: scaleX(0);
    transition: none;
}

.liste-selection.liste-lignes .liste-selection-item.previsionnel {
    display: grid;
    grid-template-columns: 50% 130px 150px 130px auto;
    grid-template-rows: auto;
    grid-template-areas: "label heuresp remplissage heurest";
}

    .liste-selection.liste-lignes .liste-selection-item.previsionnel .item-previsionnel-label {
        grid-area: label;
    }

    .liste-selection.liste-lignes .liste-selection-item.previsionnel .item-previsionnel-heures-previsionnelles {
        grid-area: heuresp;
        margin-right: 20px;
        text-align: right;
        white-space: nowrap;
    }

    .liste-selection.liste-lignes .liste-selection-item.previsionnel .remplissage {
        grid-area: remplissage;
    }

    .liste-selection.liste-lignes .liste-selection-item.previsionnel .item-previsionnel-heures-totales {
        grid-area: heurest;
        text-align: right;
        white-space: nowrap;
    }


.liste-selection.liste-tuiles .liste-selection-item.previsionnel {
    display: grid;
    grid-template-columns: 115px 1fr 115px;
    grid-template-rows: auto 10px auto;
    grid-template-areas: "label label label" "heuresp remplissage heurest";
}

    .liste-selection.liste-tuiles .liste-selection-item.previsionnel .item-previsionnel-label {
        grid-area: label;
        margin-bottom: 1em;
    }

    .liste-selection.liste-tuiles .liste-selection-item.previsionnel .item-previsionnel-heures-previsionnelles {
        grid-area: heuresp;
        margin-right: 20px;
        text-align: left;
        white-space: nowrap;
    }

    .liste-selection.liste-tuiles .liste-selection-item.previsionnel .remplissage {
        grid-area: remplissage;
    }

    .liste-selection.liste-tuiles .liste-selection-item.previsionnel .item-previsionnel-heures-totales {
        grid-area: heurest;
        text-align: right;
        white-space: nowrap;
    }

.ligne-grise {
    background: #f5f5f5 !important;
}

    .ligne-grise td {
        border: 2px #e4e4e4 solid !important;
        padding: 0.25em;
        cursor: pointer;
    }

    .ligne-grise.hover {
        background: #e4e4e4 !important;
    }

    .ligne-grise:hover {
        background: #e4e4e4 !important;
    }

.saisie-valide {
    background: #ffebce !important;
}

/* Services */
.liste-selection.liste-lignes .liste-selection-item.service {
    display: grid;
    grid-template-columns: 50px 50% 130px 150px 130px auto;
    grid-template-rows: auto;
    grid-template-areas: "checkbox label heuresp remplissage heurest";
}

    .liste-selection.liste-lignes .liste-selection-item.service .item-checkbox {
        grid-area: checkbox;
        text-align: center;
        border-right: #ffffff 3px solid;
        margin-right: 1em;
    }

        .liste-selection.liste-lignes .liste-selection-item.service .item-checkbox i.fa-square {
            visibility: visible;
            color: #d1d1d1;
            font-size: 1.25em;
        }

        .liste-selection.liste-lignes .liste-selection-item.service .item-checkbox i.fa-check {
            visibility: visible;
            color: #5dcb1a;
            font-size: 1.25em;
        }

    .liste-selection.liste-lignes .liste-selection-item.service .item-service-label {
        grid-area: label;
    }

    .liste-selection.liste-lignes .liste-selection-item.service .item-service-heures-previsionnelles {
        grid-area: heuresp;
        margin-right: 20px;
        text-align: right;
        white-space: nowrap;
    }

    .liste-selection.liste-lignes .liste-selection-item.service .remplissage {
        grid-area: remplissage;
    }

    .liste-selection.liste-lignes .liste-selection-item.service .item-service-heures-totales {
        grid-area: heurest;
        text-align: right;
        white-space: nowrap;
    }


.liste-selection.liste-tuiles .liste-selection-item.service {
    display: grid;
    grid-template-columns: 50px 115px 1fr 115px;
    grid-template-rows: auto 10px auto;
    grid-template-areas: "checkbox label label label" ". heuresp remplissage heurest";
}

    .liste-selection.liste-tuiles .liste-selection-item.service .item-checkbox {
        grid-area: checkbox;
        text-align: center;
        border-right: #ffffff 3px solid;
        margin-right: 1em;
        margin-bottom: 1em;
    }

        .liste-selection.liste-tuiles .liste-selection-item.service .item-checkbox i.fa-square {
            visibility: visible;
            color: #d1d1d1;
            font-size: 1.25em;
        }

        .liste-selection.liste-tuiles .liste-selection-item.service .item-checkbox i.fa-check {
            visibility: visible;
            color: #5dcb1a;
            font-size: 1.25em;
        }

    .liste-selection.liste-tuiles .liste-selection-item.service .item-service-label {
        grid-area: label;
        margin-bottom: 1em;
    }

    .liste-selection.liste-tuiles .liste-selection-item.service .item-service-heures-previsionnelles {
        grid-area: heuresp;
        margin-right: 20px;
        text-align: left;
        white-space: nowrap;
    }

    .liste-selection.liste-tuiles .liste-selection-item.service .remplissage {
        grid-area: remplissage;
    }

    .liste-selection.liste-tuiles .liste-selection-item.service .item-service-heures-totales {
        grid-area: heurest;
        text-align: right;
        white-space: nowrap;
    }

/*Liste paiements*/
.liste-selection.liste-lignes .liste-selection-item.paiement {
    display: grid;
    grid-template-columns: 50px 50% 130px 150px 130px auto;
    grid-template-rows: auto;
    grid-template-areas: "checkbox label heuresp remplissage heurest";
}

    .liste-selection.liste-lignes .liste-selection-item.paiement .item-checkbox {
        grid-area: checkbox;
        text-align: center;
        border-right: #ffffff 3px solid;
        margin-right: 1em;
    }

        .liste-selection.liste-lignes .liste-selection-item.paiement .item-checkbox i.fa-square {
            visibility: visible;
            color: #d1d1d1;
            font-size: 1.25em;
        }

        .liste-selection.liste-lignes .liste-selection-item.paiement .item-checkbox i.fa-check {
            visibility: visible;
            color: #5dcb1a;
            font-size: 1.25em;
        }

    .liste-selection.liste-lignes .liste-selection-item.paiement .item-label {
        grid-area: label;
    }

    .liste-selection.liste-lignes .liste-selection-item.paiement .item-remplissage-effectue {
        grid-area: heuresp;
        margin-right: 20px;
        text-align: right;
        white-space: nowrap;
    }

    .liste-selection.liste-lignes .liste-selection-item.paiement .item-remplissage {
        grid-area: remplissage;
    }

    .liste-selection.liste-lignes .liste-selection-item.paiement .item-remplissage-total {
        grid-area: heurest;
        text-align: right;
        white-space: nowrap;
    }


.liste-selection.liste-tuiles .liste-selection-item.paiement {
    display: grid;
    grid-template-columns: 115px 1fr 115px;
    grid-template-rows: auto 10px auto;
    grid-template-areas: "label label label" "heuresp remplissage heurest";
}

    .liste-selection.liste-tuiles .liste-selection-item.paiement .item-label {
        grid-area: label;
        margin-bottom: 1em;
    }

    .liste-selection.liste-tuiles .liste-selection-item.paiement .item-remplissage-effectue {
        grid-area: heuresp;
        margin-right: 20px;
        text-align: left;
        white-space: nowrap;
    }

    .liste-selection.liste-tuiles .liste-selection-item.paiement .item-remplissage {
        grid-area: remplissage;
    }

    .liste-selection.liste-tuiles .liste-selection-item.paiement .item-remplissage-total {
        grid-area: heurest;
        text-align: right;
        white-space: nowrap;
    }

/**/
.label {
    background: #ffffff;
    color: #00aeef;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
}

.fc-event .button {
    display: none;
}

.fc-event:hover .button {
    display: inline-block;
}

.fc-event {
}

    .fc-event .fc-content {
        position: initial !important;
    }

.pop-horaires {
    position: absolute;
    z-index: 200;
    display: flex;
    flex-direction: column;
    left: 0px;
    right: 0px;
    top: 30px;
    height: 100px;
    overflow: auto;
}

    .pop-horaires .button {
        width: 100%;
        display: inline-block;
        margin: 0 !important;
    }

.button-horaire {
    font-size: 0.75em;
    text-align: left;
}

.intervenant-not-draggable {
    font-size: 0.85em;
}

.intervenant-a-valider {
    background: #fb7f26;
    border-color: #ff9b54;
}

.boule {
    width: 13px;
    height: 13px;
    background: #ffffff;
    border-radius: 13px;
    position: relative;
}

    .boule + .boule {
        margin-left: 2px;
    }

    .boule:after {
        content: " ";
        position: absolute;
        z-index: 1;
        width: 9px;
        height: 9px;
        background: orange;
        border-radius: 9px;
        top: 2px;
        left: 2px;
    }

    .boule.boule-blanche:after {
        background: #ffffff;
    }

    .boule.boule-jaune:after {
        background: #c9252c;
    }

    .boule.boule-verte:after {
        background: #00ca00;
    }

    .boule.boule-orange:after {
        background: #ffa500;
    }

.no-interaction {
    cursor: default !important;
}

    .no-interaction:hover {
        background: #eeeeee !important;
    }

.ligne-no-interaction td {
    cursor: default !important;
}

.ligne-no-interaction:hover td {
    background: #f5f5f5 !important;
}

.liste-selection-item__selection.no-interaction:hover {
    background: #f3fff5 !important;
}

.custom-event-infos {
    display: none;
    border: 1px solid #dedede;
    padding: 1em;
    border-radius: 0.5em;
    background: #ffffff;
    position: absolute;
    width: 500px;
    z-index: 2;
    box-shadow: 0 0 10px rgba(204, 204, 204, 0.8);
    -webkit-box-shadow: 0 0 10px rgba(204, 204, 204, 0.8);
    -moz-box-shadow: 0 0 10px rgba(204, 204, 204, 0.8);
}

.button-transparent {
    background: #ffffff;
    color: #3e3e3e;
    border: 0;
    padding: 0.5em 0.7em;
    border-radius: 0.5em;
    cursor: pointer;
}

    .button-transparent:hover {
        background: var(--primary-color);
        color: #ffffff;
    }

    .button-transparent i {
        margin: 0;
    }

.button-inactive {
    background: #ffffff;
    color: #cbcbcb;
    border: 0;
    padding: 0.5em 0.7em;
    border-radius: 0.5em;
    cursor: default;
}

    .button-inactive i {
        margin: 0;
    }

.enseignement-mutualise {
    cursor: pointer;
}

    .enseignement-mutualise:hover {
        font-weight: bold;
    }

.fc-event {
    cursor: pointer !important;
}

.fc-time-grid-event {
    transition: left 0.12s ease-out, right 0.12s ease-out, box-shadow 0.12s ease-out;
}

.fc-time-grid-event:hover {
    z-index: 200 !important;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}

.fc-time-grid-event.fc-evt-left:hover {
    right: 15px !important;
}

.fc-time-grid-event.fc-evt-right:hover {
    left: 15px !important;
}

.section-semestre {
    border-bottom: 2px solid #e8e8e8;
}

    .section-semestre:last-child {
        border-bottom: 0px solid #e8e8e8;
    }

.SumoSelect .CaptionCont {
    background: #ffebce;
    padding: 0.3em 0.5em;
    font-weight: 700;
    border: 0;
    border-bottom: 1px solid #808080;
}

    .SumoSelect .CaptionCont label {
        background: transparent;
        text-align: right;
    }

    .SumoSelect .CaptionCont .placeholder {
        color:#d3d3d3;
        font-weight:normal;
    }

    .SumoSelect .CaptionCont label i {
        color: #3e3e3e;
    }
.SumoSelect:focus > .CaptionCont, .SumoSelect:hover > .CaptionCont {
    box-shadow: none;
    border-bottom: 1px solid #808080;
}


.error {
    background: #0e5ba5;
}

.ok {
}

.rouge {
    color: red;
}

.warning {
    background: #0e5ba5;
}


.tuile {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "titre" "contenu" "bouton";
    margin-bottom: 20px;
    display: block;
    background: #f8f8fa;
    cursor: pointer;
}

    .tuile .tuile-titre {
        text-align: left;
        font-weight: bold;
        font-size: 20px;
        padding: 28px 28px 20px 28px;
        display: block;
        grid-area: titre;
        align-items: center;
    }

    .tuile .tuile-contenu {
        padding: 0 28px 20px 28px;
        display: block;
        grid-area: contenu;
    }

    .tuile .tuile-contenu-alert {
        color: #f93232;
        font-weight: bold;
        display: block;
        text-align: center;
    }

    .tuile .tuile-contenu-infos {
        display: flex;
    }

    .tuile .tuile-contenu-info {
        font-weight: normal;
        display: block;
        text-align: center;
    }

.tuile-bouton {
    padding: 14px 18px;
    font-size: 16px;
    line-height: 20px;
    display: inline-block;
    align-items: center;
    font-family: 'Gilroy-Bold';
    box-sizing: border-box;
    border-radius: 6px;
    background: #0E5BA5;
    color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0px 8px 15px rgba(6, 35, 63, 0.15);
    transition: 0.3s;
    border: none;
    margin: 0 28px 28px 28px;
    grid-area: bouton;
}

    .tuile-bouton:hover {
        background: #1F2C52;
        transition: 0.3s;
    }


.accueil-tuiles {
}

.accueil-tuiles-nav-wrapper {
    width: 35%;
    margin-right: 2em;
}

.accueil-tuiles-liste {
    display:flex;
    flex-direction:column;
    grid-gap:20px;
}

.accueil-tuiles-nav {
    padding: 1em 2em;
    background: #f8f8fa;
    position: sticky;
    top: 160px;
}
.accueil-tuile {
    padding: 20px;
    background: #eeeeee;
}
    .accueil-tuile:hover {
        background: #dbdbdb;
    }
.accueil-tuile h1{
    font-size:20px;
    margin:0 0 10px 0;
}
.accueil-tuile-chiffres {
    font-size: 36px;
    font-weight: bold;
    color: #00aeef;
}
.accueil-tuile-cliquable {
    cursor:pointer;
}

.liste-tuiles {
    margin: 0;
    padding: 0;
    list-style: none;
}

.liste-tuiles-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    color: #0E5BA5;
    font-weight: bold;
    margin: 1em 0;
}

    .liste-tuiles-item img {
        margin-right: 1em;
        width: 24px;
        height: 24px;
    }

    .liste-tuiles-item i {
        margin-right: 0.5em;
    }

.tuile_offset:before {
    content: "";
    display: block;
    height: 14px;
    margin-top: -14px;
}

.tuile-message__warning {
    background: #e8f0fb;
    border: 1px solid #848ea7;
    color: #1F2C52;
    padding: 1em;
    display: inline-block;
    margin-bottom: 1em;
    border-radius: 5px;
}

.tuile-message__error {
    background: #f9e4e6;
    border: 1px solid #fc8c8d;
    color: #1F2C52;
    padding: 1em;
    display: inline-block;
    margin-bottom: 1em;
    border-radius: 5px;
}

    .tuile-message__warning i, .tuile-message__error i {
        margin-right: 0.5em;
    }
}

.fc-bgevent {
    background: #ffc84e;
    opacity: .5;
}
.copy-text {
    cursor: pointer;
    color: #231f20;
}
.copy-text-copie {
    font-size: 0.8em;
    font-weight: bold;
    color: #231f20;
    visibility: hidden;
}