@CHARSET "UTF-8";

:root {

    /*--default-bgcolor: #ECECF2;*/
    --main-bgcolor: #F3F3F7;
    --second-bgcolor: #2C2274;

    --default-color: #424242;
    --main-color: #2C2274;
    --second-color: #EB5A77;

    --onglet-color: #2C2274;
    --icone-color:#2C2274;
    --icone-hover-color:#EB5A77;

    --datatable-entete-bgcolor:  #F3F3F7;
    --datatable-entete-color: #424242;
    --datatable-row-bg-color:  #FDECEF;

    --btn-default-bgcolor : #f2f2f2;
    --btn-default-hover-bgcolor : #e7e7e7;
    --btn-default-color : #2C2274;
    --btn-default-border-color : #2C2274;

    --btn-primary-bgcolor : #2C2274;
    --btn-primary-hover-bgcolor : #181340;
    --btn-primary-color : #FFF;
    --btn-primary-border-color : #2C2274;

    --btn-warning-bgcolor : #2C2274;
    --btn-warning-hover-bgcolor : #181340;
    --btn-warning-color : #FFF;
    --btn-warning-border-color : #2C2274;

    --btn-danger-bgcolor : #FFF;
    --btn-danger-hover-bgcolor : #FFF;
    --btn-danger-color : #EB5A77;
    --btn-danger-border-color : #EB5A77;

    --btn-success-bgcolor : #2C2274;
    --btn-success-hover-bgcolor : #181340;
    --btn-success-color : #FFF;
    --btn-success-border-color : #2C2274;
}

[class^="Arche-"]::before, [class*=" Arche-"]::before {
    color: var(--icone-color);
}

html, body {
    color: var(--default-color);
    background-color: var(--main-bgcolor);
    font-family: 'Poppins', 'Source Sans Pro',sans-serif;
}

h1 {
    color: var(--main-color);
}

h2 {
    color: var(--main-color);
}

.h2 {
    color: var(--main-color);
    width: 30%;
    margin-left: 5px;
}

.h3 {
    color: var(--default-color);
    font-size: 20px;
    line-height: 2em;
    /*margin-bottom: 50px;*/
    /*margin-top: 0;*/
    margin-left: 15px;
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
    font-family: 'Poppins', 'Source Sans Pro',sans-serif;
    margin-top: 10px;
    margin-bottom: 10px;
    /*color: var(--default-color);*/
}

.textPresence {
    color: var(--main-color);
    width: 66%;
    margin-left: 3px;
    text-align: justify;

}

.textPresenceCor {
    color: var(--main-color);
    width: 20%;
    position: absolute;
    right: 10px;
    margin-left: 3px;
    text-align: justify;
}

.bold {
    font-weight: bold;
}

a {
    color: var(--main-color);
}

a:hover,
a:active,
a:focus {
    outline: none;
    text-decoration: none;
    /*color: var(--second-color);*/
}

.text-align-left {
    text-align: left;
}

.text-right {
    text-align: left;
}

.iconeMessageHeader:before {
    vertical-align: bottom;
    font-size: 26px;
    color: #FCFCFD;
}

.iconeUserHeader:before {
    font-size: 26px;
    color: #FCFCFD;
}

.iconeLogoutHeader:before {
    font-size: 22px;
    color: #FCFCFD;
}

.iconeClipboard:before {
    font-size: 30px;
    color: #FCFCFD;
}

.btnIcone {
    font-size: 18px;
    margin-left: 5px;
    margin-right: 5px;
}

.iconeAction {
    cursor: pointer;
}

.iconeAction:hover:before, .iconeMessageHeader:hover:before, .iconeClipboard:hover:before, .iconeLogoutHeader:hover:before, .iconeUserHeader:hover:before {
    color: var(--icone-hover-color);
}

/*!**/
/* * Component: Box*/
/* * --------------*/
/* *!*/
.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.box-header {
    color: #444;
    display: block;
    /*padding: 10px;*/
    position: relative;
}

.box-body {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

.box-header:before,
.box-body:before,
.box-footer:before,
.box-header:after,
.box-body:after,
.box-footer:after {
    content: " ";
    display: table;
}

.box-header > .box-tools [data-toggle="tooltip"] {
    position: relative;
}
.box-header > .box-tools.pull-right .dropdown-menu {
    right: 0;
    left: auto;
}
.btn-box-tool {
    padding: 5px;
    font-size: 12px;
    background: transparent;
    color: #97a0b3;
}
.open .btn-box-tool,
.btn-box-tool:hover {
    color: #606c84;
}
.btn-box-tool.btn:active {
    box-shadow: none;
}

.box h3.box-title {
    font-size: 17px;
    color: var(--default-color);
}

/*
Donne l'apparence d'un lien à un simple texte
*/

.link {
    color: #3c8dbc;
    text-decoration: underline;
    cursor: pointer;
}

/*.row {*/
/*    margin-left: 0;*/
/*    margin-right: 0;*/
/*}*/

.borderColor {
    border: 3px solid #7391af;
    border-radius: 10px;
}

#barreSup {
    height: 4em;
    margin-bottom: 25px;
}

#barreSupGauche {
    text-align: left;
}

.barreSupGlyphicon {
    padding: 5px;
    color: #ed9400;
    font-size: 1em;
    background-color: transparent;
    border: none;
}

.glyphiconMessage {
    padding-left: 19px;
    background-color: transparent;
    border: none;
}

.glyphiconMessage:focus, .glyphiconMessage:hover {
    color: #E40424;
}

.barreSupGlyphicon:focus, .barreSupGlyphicon:hover {
    color: #E40424;
    text-decoration: none;
    background-color: transparent;
    border: none;
    font-weight: bold;
}

.btnGlyphicon {
    font-size: 1em;
}

.glyphicon {
    top: 0;
    margin: 5px;
}

.btnGlyphicon:hover {
    cursor: pointer;
}

/************************************
     Utilitaires d'espacement
     inspirés de Bootstrap 4
*************************************/
.m-5 {
    margin: 5px;
}

.m-10 {
    margin: 10px;
}

.m-15 {
    margin: 15px;
}

.m-20 {
    margin: 20px;
}

.m-30 {
    margin: 30px;
}

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

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

.my-15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.my-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}

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

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

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-80 {
    margin-top: 80px;
}

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

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

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mx-5 {
    margin-left: 5px;
    margin-right: 5px;
}

.mx-10 {
    margin-left: 10px;
    margin-right: 10px;
}

.mx-15 {
    margin-left: 15px;
    margin-right: 15px;
}

.mx-20 {
    margin-left: 20px;
    margin-right: 20px;
}

.mx-30 {
    margin-left: 30px;
    margin-right: 30px;
}

.ml-5 {
    margin-left: 5px;
}

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

.ml-15 {
    margin-left: 15px;
}

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

.ml-30 {
    margin-left: 30px;
}

.mr-5 {
    margin-right: 5px;
}

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

.mr-15 {
    margin-right: 15px;
}

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

.mr-30 {
    margin-right: 30px;
}

.p-5 {
    padding: 5px;
}

.p-10 {
    padding: 10px;
}

.p-15 {
    padding: 15px;
}

.p-20 {
    padding: 20px;
}

.p-30 {
    padding: 30px;
}

.py-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

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

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.pt-5 {
    padding-top: 5px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pb-5 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

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

.pb-20 {
    padding-bottom: 20px;
}

.pb-30 {
    padding-bottom: 30px;
}

.px-5 {
    padding-left: 5px;
    padding-right: 5px;
}

.px-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.px-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.px-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.pl-5 {
    padding-left: 5px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-30 {
    padding-left: 30px;
}

.pr-5 {
    padding-right: 5px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}

.pr-30 {
    padding-right: 30px;
}

/************************************
        vignette.jspf
*************************************/
.vignette {
    margin-top: 60px;
    color: #000000;
}

.vignette h3 {
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.vignette p {
    font-size: 14px;
    font-weight: bold;
    padding-top: 20px;
}

.infoVignette {
    font-style: italic;
    font-size: 12px;
}

.footerVignette {
    vertical-align: bottom;
    font-size: 14px;
}

/***********************************
        mentionsLegales.jspf
***********************************/

#modal-mentions-legales-title,
#modal-versions-title {
    text-align: center;
}

#modalMentionsLegales .modal-content,
#modalVersions .modal-content {
    margin: 10% auto;
}

#modalMentionsLegales .modal-content,
#modalTrajet .modal-content,
#modal-dialog-mentions-legales,
#modalVersions .modal-content,
#modal-dialog-versions {
    height: 88%;
    width: 75%;
}

#modal-body-mentions-legales,
#modal-body-versions {
    margin: 3% 5%;
    text-align: justify;
}

/***********************************
        enfant.jspf
***********************************/
.bandeauEnfant {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin-top: 30px;
    text-align: left;
}

.bandeauEnfant:first-child {
    padding-left: 0;
}

.bandeauEnfantGauche {
    text-align: left;
    padding-left: 0;
    padding-bottom: 0;
}

.bandeauEnfantCentre {
    text-align: justify;
}

.bandeauEnfantDroite {
    height: auto;
}

.commentairePresence {
    text-align: left;
    font-weight: normal;
    color: var(--main-color);
}

#commentairePresenceCorrespondant {
    background-color: #EEE;
    padding-top: 5px;
    margin-top: 5px;
    text-align: left;
    font-weight: normal;
    color: var(--main-color);
    font-size: 12px;
}

.commentairePresence textarea {
    margin-bottom: 20px;
}

.commentairePresence input {
    margin-bottom: 20px;
}

.accordion {
    background-color: #ffffff;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

/*************************************
    Calendrier saisie des présences
*************************************/

.fc-toolbar {
    display: none;
}

.fc .fc-col-header-cell-cushion {
    padding-left: 0;
    padding-right: 0;
}

#calendarDeclare, #calendarPaye {
    margin-bottom: 10px;
    margin-top: 30px;
}

#calendarDeclare.fc table.fc-col-header,
#calendarPaye.fc table.fc-col-header,
#calendarIntegre.fc table.fc-col-header,
#calendarDeclare.fc table.fc-scrollgrid-sync-table,
#calendarPaye.fc table.fc-scrollgrid-sync-table,
#calendarIntegre.fc table.fc-scrollgrid-sync-table {
    font-size: 0.9em;
}

#calendarEnCours h2, #calendarDeclare h2, #calendarPaye h2 {
    font-size: 24px;
}

#calendarEnCours button, #calendarDeclare button, #calendarPaye button {
    font-size: 12px;
}

/* Changement de l'apparence du curseur au survol des cases modifiables */
#calendarEnCours .fc-day, #calendarEnCours .fc-day-number {
    cursor: pointer;
}

.fc-day-header {
    font-size: 0.8em;
}

/*Le fond des jours sélectionnés dans le calendrier*/
.fc-highlight {
    /*background-color: #ffffff;*/
    opacity: 0;
}

.fc-h-event .fc-event-title {
    white-space: normal;
    margin-right: 18px;
}

.tab-content > .inactive {
    display: none;
    visibility: hidden;
}

.hiddenTab {
    position: absolute;
    top: -200%;
}

.fc-head.active {
    color: #ED9400;
}

#contenuAccueil h4 {
    color: #424242;
}

.error-color,
#erreurLogin {
    color: #da4431;
}

.logoAccueil {
    max-width: 30%;
}

.logoLogin {
    max-width: 55%;
}

.logoWA {
    background: url('../../image/infodb/webaccueillant_arche_blanc.svg') no-repeat left;
    float: left;
    display: block;
    width: 200px;
    height: 50px;
    background-size: contain;
}

.logoWABlack {
    background: url('../../image/infodb/webaccueillant_arche_bleu.svg') no-repeat left;
    width: 100%;
    margin-top: 10%;
    margin-bottom: 10px;
    padding-top: 70px;
}

.top {
    width: 100%;
    /*position: fixed;*/
    background: none repeat scroll 0 0 var(--second-bgcolor);
    min-height: 70px;
    max-height: 70px;
    color: #fff;
    font-size: 14px;
    padding: 10px 15px 6px;
    /*z-index: 10;*/
}

.top a {
    color: #fff;
}

.top .loader {
    position: absolute;
    left: 20px;
    top: 15px;
}

.logoSolis {
    position: absolute;
}

.ongletsPresences ul {
    border-bottom: none;
}

.ongletsPresences li {
    width: 30%;
    float: left;
}

.ongletsPresences li > a > span {
    margin-right: 15px;
}

.ongletsPresences .glyphicon-pencil {
    color: #fff;
}

.justificatif-remove .glyphicon.glyphicon-remove {
    margin: 0;
    font-size: 12px;
}

.signaturePresences input[type="checkbox"] {
    margin-right: 10px;
}

#commentairePresence .labelForm {
    padding-left: 0;
}

.legende {
    padding-left: 0;
    margin-top: 20px;
}

.legendecare {
    padding-top: 20px;
    padding-left: 20px;

}

.legende table td:nth-child(2n+1) {
    height: 20px;
    padding-left: 0;
    padding-right: 0;
}

.present, .absent, .horsContrat, .ecart {
    height: 20px;
    width: 20px;
    border: solid #002144 thin;
    background-color: #fff;
}

.barreAg {

    border: solid var(--main-color) 2px;
    margin-left: 15px;
    margin-right: 10px;
}

#barreAgent {
    font-size: 1.2em;
    border-bottom: 3px solid var(--second-color);
    padding-bottom: 10px;
}

.present {
    background-color: rgb(140, 205, 234);
}

.ecart {
    border: 3px #ff0000;
}

.horsContrat {
    background-color: rgb(193, 193, 193);
}

.fc-day-number {
    background-color: transparent;
}


#iconeMessage {
    margin-top: -10px;
}

.barreCivilite {
    font-size: 1.3em;
}

@media (min-width: 1200px) {
    .conteneur-principal {
        margin-left: 8.33333333%;
        width: 83.33333333%;
    }
}

.classBody {
    background: #fff;
    text-align: center;
    min-height: 728px;
    /*margin-top: 70px;*/
    padding: 0 15px 1%;
    box-shadow: 0 3px 10px 0 rgba(50, 50, 50, 0.56);
}

.classBody .fc-head {
    color: #ED9400;
}

.classBody .fc-boby {
    color: #5C5B5A;
}

#commentaireConsultationCalendrier {
    width: 302px;
    height: 45px;
}

.detailPresence {
    padding-bottom: 20px;
    margin-top: -19px;
}

.detailsPresences {
    background-color: #ffffff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.detailsPresences h2 {
    margin-top: 0;
}

.detailsPresences .notifyjs-wrapper {
    z-index: 3; /* Affichage de la notification */
}

#ficheEnfant, #ficheAccueillant, #fichePlacements, #ficheConges,
#detailsPresencesCorrespondant {
    text-align: left;
    font-size: 12px;
}

#ficheEnfant {
    padding-left: 70px;
}

#ficheAccueillant {
    padding-left: 54px;
}

#fichePlacements {
  margin-bottom: 10px;
}

#verrouPresences {
    text-align: center;
    color: #ed9400;
    padding-top: 10px;
    font-size: 28px;
}

#verrouPresences:hover {
    cursor: pointer;
}

.verrouPresences:hover {
    cursor: pointer;
}

#nameChildMonth, #nameChildAll {
    top: 20px;
    margin-bottom: 30px;
}

#nameChildMonth.active, #nameChildAll.active {
    display: block;
}

#nameChildMonth.inactive, #nameChildAll.inactive {
    display: none;
}

.bandeauIdentite {
    background-color: #eeeeee;
    border-radius: 10px;
    padding: 5px 15px;
}

.moisAnnee {
    color: var(--main-color);
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
}

.signaturePresences {
    margin-top: 20px;
    text-align: left;
}

.signaturePresences label {
    font-weight: 100;
}

.ongletsPresences {
    padding-left: 0;
    background-color: #fff;
}

.messageRouge {
    text-align: center;
    color: #ed0b05;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
}

.messageNoir {
    text-align: center;
    color: #000000;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
}

.messageArche {
    text-align: center;
    color: var(--main-color);
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
}

.messageVert {
    text-align: center;
    color: #008d4c;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
}

.messageSecondColor {
    text-align: center;
    color: var(--second-color);
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
}

/*ul li.active .messageArche {*/
/*    color: #FCFCFD;*/
/*}*/

/********* Fenêtre modal détail présence  ***************/

.modal-header {
    border: none;
}

.modal-large {
    width: 1024px;
}

#identiteAccueillant {
    padding-left: 0;
}

#nomAccueillant {
    padding-left: 0;
    text-align: left;
}

#nomAccueillant, #nomEnfant {
    color: var(--main-color);
    font-size: 20px;
    padding-top: 1.5%;
}

#autresPlacements, #demandesConges {
    font-size: 20px;
    padding-top: 1.5%;
}

#adresseAccueillant {
    padding-left: 0;
    text-align: left;
}

.modal-height {
    max-height: 930px
}

.modal-height-presence {
    height: 930px;
    min-width: 888px;
}

.modal-dialog {
    margin: 10px auto;
}

.modal-dialog-trajet {
    margin: 40px auto;
    width: 60%;
}

.modal-backdrop {
    opacity: 0.5 !important;
}

#labelCalendarDeclare, #labelCalendarPaye {
    margin-top: 2px;
}

#choixIntegrationAbsence {
    padding-top: 20px;
}

/* Couleur des événements */

.colorEvenement {
    background-color: rgb(58, 135, 173);
    border: rgb(58, 135, 173);
}

.colorEvenementEcart {
    background-color: orange;
    border: orange;
}

.fc-daygrid-day-top * {
    color: rgb(58, 135, 173);
}

#legendeCalendrier {
    text-align: left;
    float: left;
    font-size: 14px;
}

.titreCalendrier {
    text-align: center;
    font-size: 18px;
    color: #337ab7;
}

#legendePlacement, #legendePresences, #legendeAbsences {
    text-align: left;
}

#calendriersPresences {
    padding-bottom: 20px;
    border-bottom: solid 2px #d3d3d3;
}

#calendriersPresences #calendarDeclare, #calendriersPresences #calendarPaye {
    margin-bottom: 15px;
    margin-top: 0;
}

#calendriersPresences #calendarDeclare .fc-view-container, #calendriersPresences #calendarPaye .fc-view-container {
    margin-top: 10px;
}

#legendePlacement *, #legendePresences *, #legendeAbsences * {
    padding-bottom: 5px;
}

.vignetteLegende, .colorPresence, .colorAbsence, .colorEcart, #legendeAbsences .col-sm-2 {
    height: 20px;
    width: 40px;
    padding: 0 5px 0 5px;
}

#legendeAbsences .col-md-2 {
    margin-bottom: 10px;
}

#legendeAbsences .colorEvenement, #legendeAbsences .colorEvenementEcart {
    height: 10px;
    top: 5px;
    border-radius: 3px;
}

.colorPresence {
    background-color: #8CCDEA;
}

.colorAbsence {
    border: thin solid #000;
}

.colorEcart {
    border: 3px solid #C94129;
}

#popUpLegende {
    display: none;
    position: fixed;
    left: 65%;
    top: 75%;
    z-index: 1000;
    background-color: #EEEEEE;
    border-radius: 10px;
    border: solid 1px #606262;
    padding: 10px;
}

.vignetteLegende:hover #popUpLegende {
    display: block;
}

#btnModal {
    position: absolute;
    bottom: 17px;
    right: 26px;

}

#commentaireCalendrier {
    text-align: left;
}

#commentaireCalendrier label {
    font-weight: 400;
}

.nbPresent {
    margin-top: 10px;
}

.nbPresent, .nbAbsent {
    color: #337ab7;
    font-weight: bold;
}

/**********************************************************/

.central img {
    width: 100%;
}

.navbar {
    background: #f7f7f7;
    height: 250px;
    margin-bottom: 0;
    box-shadow: 0 3px 10px 0 rgba(50, 50, 50, 0.56);
}

.navbar-header {
    font-size: large;
    z-index: 1000;
}

.error {
    color: #da4431;
    width: 90%;
    margin-top: 10px;
}

.conteneur.index {
    margin-bottom: 3%;
}

.index .bandeauSup {
    height: 700px;
}

.bandeauSup {
    padding-bottom: 30px;
    text-align: center;
}

.bandeauSup img {
    text-align: left;
}

#bandeauGauche {
    padding-top: 20px;
}

#bandeauGauche .h3 {
    margin-left: 0;
    font-size: 18px;
    text-align: left;
}

#bandeauGauche .h2 {
    font-size: 22px;
}

#bandeauGauche .row {
    margin-left: -15px;
    margin-right: -15px;
}

.contenu {
    background: #fff;
    height: auto;
    min-height: 750px;
    width: 85%;
    margin-left: 7.5%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

/* menu */
#nav {
    padding-top: 6px;
}

#nav > li {
    float: left;
    list-style: none;
    padding-left: 0;
    text-align: center;
}

#nav > li > a {
    border-radius: 0;
    text-decoration: none;
    color: #555;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 43px;
    margin-bottom: -20px;
    text-transform: uppercase;
    transition: color 1s, font-weight 1s;
}

#nav > li > a.active, .navbar-nav > li > a.active:hover, .navbar-nav > li > a.active:focus {
    color: #fec254;
    font-weight: bold;
}

#nav > li.active > a:before, .navbar-nav > li > a:hover:before, .navbar-nav > li > a:focus:before,
.extra-nav-class a.dropdown-toggle:before {
    border-bottom: 6px solid #f54828;
    border-right: 6px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: -4px;
    top: 0;
    transition: all 0.2s ease-in-out 0s;
    width: 0;
}

#nav > li a:hover, .navbar-nav > li a:focus {
    color: #fec254;
    font-weight: bold;
}

#nav > li.active > a, .navbar-nav > li.active > a:hover, .navbar-nav > li.active > a:focus {
    background-color: #fec254;
}

#nav > li.active > a:before, .navbar-nav > li > a:hover:before, .navbar-nav > li > a:focus:before,
.extra-nav-class a.dropdown-toggle:before {
    border-bottom: 6px solid #fec254;
}

.identite {
    padding-top: 10px;
    float: right;
    margin-right: 20px;
}

.identite .btn span {
    padding-top: 5px;
}

.identite:first-child {
    color: #337ab7;
}

#formulaire {
    padding-right: 30px;
    padding-top: 200px;
    float: right;
}

#identite {
    color: #555;
    font-weight: bold;
    font-size: 1.5em;
    height: 55px;
    padding-left: 21px;
}

#donneesAssfam {
    padding-top: 30px;
}

#donneesAssfam .col-md-12 > ul > li > ul > li > span > span:nth-child(3) {
    margin-left: 50px;;
}

#donneesAssfam .col-md-12 > ul > li > ul > li > span > span:nth-child(2n+1) {
    font-weight: bold;
}

#donneesAssfam_1 {
    margin-bottom: 40px;
}

#vehiculesAssfam {
    margin-top: 40px;
    width: 90%;
}

#formVehicule {
    margin-bottom: 50px;
}

#vehicule td:last-child, #vehicule td:nth-last-child(2), #vehicule td:nth-last-child(3) {
    text-align: center;
}

#placementsAssfam {
    padding-top: 30px;
}

#placementsAssfam .k-grid {
    margin-top: 30px;
}

#placements {
    box-shadow: -9px 3px 28px 2px #bdbdbd;
}

.popover-details {
    width: 20px;
    float: right;
}

.iconeConges {
    border-radius: 3px;
    color: white;
    float: left;
    font-size: 1em;
    height: 50px;
    padding-top: 15px;
    text-align: center;
    width: 50px;
    margin-right: 25px;
    box-shadow: -10px 3px 25px 2px #b3b3b3;
}

#demandesConges, #demandesFraisKM, #historiqueFraisKM {
    padding-top: 30px;
}

#historiqueFraisKM {
    margin-bottom: 50px;
}

.title, .saisieFrais .title {
    font-weight: bold;
    color: #444;
    float: left;
    height: 50px;
    padding-top: 17px;
}

.titreDetails {
    text-decoration: underline;
    margin-top: 15px;
    margin-left: 30px;
}

.details {
    margin-left: 30px;
}

.glyphicon-small {
    font-size: 1.40em;
}

.glyphicon-medium {
    font-size: 1.70em;
}

.glyphicon-big {
    font-size: 2em;
}

.glyphicon-remove {
    color: #da4431;
}

.glyphicon-pencil {
    color: #f1b547;
}

.glyphicon-paperclip {
    color: var(--main-color);
}

#formConge label {
    margin-bottom: 15px;
}

#enfantsConcernes {
    margin-top: 40px;
}

#enfantsConcernes span {
    margin-right: 35px;
}

#enfantsConcernes .btn-group {
    display: block;
}

#validerConges {
    margin-top: 20px;
    float: right;
}

#historiqueConges {
    margin-top: 40px;
}

.saisieConge, .saisieFrais {
    margin-top: 40px;
    margin-bottom: 30px;
    margin-left: -17px;
}

.checkbox input[type="checkbox"] {
    margin-right: 5px;
}

.checkbox label {
    margin-left: 5px;
}

#enfantsConcernes span, #trajet-enfants span, #frais-enfants span {
    font-weight: bold;
    font-size: 14px;
}

#enfantsConcernes p {
    margin-top: 15px;
}

.petiteImage {
    margin-left: 5px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

#editConges {
    padding-bottom: 60px;
}

.checkbox {
    margin-top: 0;
}

#imageGauche {
    height: 100%;
    background: url('../../image/infodb/imageAccueil.svg') no-repeat center;
    background-size: contain;
    width: 80%;
    max-width: 500px;
    margin: -100px 35% auto auto;
}

.logo-dp {
    background: no-repeat center;
    background-size: contain;
    height: 45px;
}

#bandeauDroit {
    position: relative;
    top: 20%;
    height: 80%;
}

#formulaireLogin {
    margin-bottom: 25px;
    text-align: left;
}

#formulaireLogin .form-group {
    margin-bottom: 26px;
    border-radius: 2px;
}

#formulaireLogin .commentaire {
    font-style: italic;
    color: #515151;
    margin-top: 13%;
    font-size: 12px;
    text-align: left;
}

#login, #password {
    box-shadow: -9px 3px 28px 2px #bdbdbd;
}

#formulaireLogin .btn {
    box-shadow: -9px 3px 28px 2px #bdbdbd;
    float: right;
}

#bandeauIcones {
    margin-top: -90px;
    margin-left: 39px;
}

#presentation {
    margin-top: -50%;
    margin-bottom: 22px;
}

#presentation > ul > li {
    list-style: none;
}

.titreAccueil {
    width: 100%;
    margin-top: 10%;
    padding-left: 5%;
}

#titreAccueil h4 {
    padding-left: 4%;
}

#accueilDonnees {
    background-color: #2c75f5;
}

#accueilConge {
    background-color: #01cc73;
}

#contenuAccueil {
    margin-left: 30%;
    margin-top: -10%;
    height: auto;
    max-width: 50%;
}

#accueilFrais {
    background-color: #da4431;
}

.rectangleRouge {
    background-color: #da4431;
    margin-right: 30px;
    margin-bottom: 5px;
}

.step {
    background-color: #f3f3f3;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
}

#donneesInfos {
    background-color: #da4431;
    margin-right: 30px;
    margin-bottom: 5px;
}

#donneesReferent {
    background-color: #fec254;
    margin-right: 30px;
    margin-bottom: 5px;
}

#donneesContrat {
    background-color: #2c75f5;
    margin-right: 30px;
    margin-bottom: 5px;
}

#donneesVehicules {
    background-color: #01cc73;
    margin-right: 30px;
    margin-bottom: 5px;
}

#placementsEnCours {
    background-color: #da4431;
}

#demandesEnCours {
    background-color: #01cc73;
    margin-left: 3px;
}

#historiqueDemande {
    background-color: #fec254;
    margin-left: 3px;
}

#saisieDemandeConge {
    background-color: #2c75f5;
    margin-left: 3px;
}

#saisieFraisKM {
    background-color: #2c75f5;
    margin-left: 17px;
}

#trajetComments, #trajetFavori, #periode, #commentairesConges,
#typeConge, #trajetDistance {
    margin-top: 2%;
}

.addEtape {
    padding-top: 7px;
    text-align: center;
}

.removeEtape {
    padding-top: 7px;
    text-align: center;
}

#ulEtape, #validFormKM {
    margin-top: 30px;
}

#vehiculeTrajet, #favorisCkeck, #labelNomTrajet, #typeConge,
#enfantsConcernes {
    padding-left: 0;
}

#validFormKM {
    margin-bottom: 50px;
}

#communeEtape {
    padding-left: 0;
}

#newVehicule {
    height: 60px;
    padding-top: 30px;
    float: left;
}

#alert {
    margin-top: 5%;
}

.numEtape {
    color: #2c75f5;
    padding-top: 5px;
}

.texteIcone {
    color: #fff;
    font-weight: lighter;
    font-size: 14px;
}

.bandeauInf {
    height: 100px;
    width: 100%;
}

.copyright {
    margin-top: 5%;
}

.divDonnees {
    background-color: #eceff4;
    min-height: 200px;
    padding: 15px;
    color: #555;
    width: 30%;
    margin-left: 1.5%;
    margin-right: 1.8%;
    float: left;
}

.divDonnees p {
    margin-left: 10px;
}

.divDonnees p span:FIRST-CHILD {
    font-weight: bold;
}

#donneesAssfam .k-grid {
    height: auto;
}

#ajoutVehicule {
    margin-top: 20px;
}

#vehiculeForm {
    width: 100%;
}

#vehiculeForm th {
    padding: 25px 0 7px;
}

#vehiculeForm td {
    color: #da4431;
}

#vehiculeForm .form-control {
    width: auto;
}

.iconeDonnees {
    border-radius: 3px;
    color: white;
    float: left;
    font-size: 1.8em;
    height: 75px;
    padding-top: 15px;
    text-align: center;
    width: 75px;
    margin-right: 180px;
    box-shadow: -10px 3px 25px 2px #b3b3b3;
}

#donneesAssfam h3 {
    margin-bottom: 50px;
    font-size: 19px;
}

.popover {
    width: 100%;
    max-width: 270px;
    border-radius: 0;
    color: #89C8E5;
    padding: 5px;
    background: repeat scroll 0 0 #EEEEEE;
    box-shadow: 17px 18px 59px 2px #999;
}

.popover-title {
    background-color: transparent;
}

.popover-content {
    padding: 0;
}

.popover dt {
    font-size: 14px;
    margin: 0;
    color: #c7e2e9;
    padding: 8px 14px;
}

.popover.right > .arrow:after {
    border-right-color: #444;
}

.popover dd {
    margin-left: 17px;
}

/*CSS pour les pr�sences  */

#presencesAssfam {
    padding-top: 30px;
}

.vignette .glyphicon {
    font-size: 40px;
    color: #F78B26;
}

.title-central {
    font-size: 30px;
    color: #fff;
}

.central .col-lg-12 {
    padding-bottom: 15px;
}

#selectionEnfant {
    color: #5c5b5a;
    font-size: 16px;
    padding-top: 5px;
    text-align: center;
    position: absolute;
    top: 175%;
    left: 68%;
    background-color: #eeeeee;
    border-radius: 10px;
    box-shadow: 5px -5px 3px 1px #eeeeee;
}

#selectionEnfant b {
    font-size: 20px;
    color: #ed9400;
}

#selectionEnfant .barreSupGlyphicon {
    font-size: 2em;

}

#calendarEnCours.fc-right {
    display: none;
}

.calendarNavigation {
    float: left;
    margin-top: -435px;
    margin-left: -280px;
}

#labelCalendarLeft, #labelCalendarRight {
    position: absolute;
    margin-top: 100px;
}

#labelCalendarLeft {
    margin-left: 1px;
}

#labelCalendarRight {
    margin-left: 50%;
}

#calendarDeclare .fc-left {
    margin-top: -10px;
}

.navNext, .navPrevious {
    width: 50px;
    float: left;
    color: var(--main-color);
}

.navPrevious {
    float: left;
}

.labelCalendar {
    text-align: left;
    color: #7F8C8D;
}

#calendarDeclare .fc-view-container, #calendarPaye .fc-view-container {
    margin-top: 40px;
}

/*.btn-default:active, .btn-default:hover, .btn-default:focus {*/
/*    background: none;*/
/*}*/

.labelForm {
    text-align: justify;
}

.label-info {
    background-color: var(--main-color);
}

.label-warning {
    background-color: #ECBF00;
}

.label-success {
    background-color: #55BDBE;
}

/* Onglets */

.tabbed {
    margin: 0 auto 0;
    overflow: hidden;
    transition: border 250ms ease 0s;
}

.tabbed ul {
    margin: 0;
    overflow: hidden;
    float: left;
    padding: 0 0 0 15px;
    list-style-type: none;
}

.tabbed ul * {
    margin: 0;
    padding: 0 20px 0 20px;
}

.tabbed ul li {
    display: block;
    float: right;
    padding: 10px 20px 8px;
    background-color: #FFF;
    margin-right: 10px;
    z-index: 2;
    position: relative;
    cursor: pointer;
    color: #777;

    text-transform: uppercase;
    font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif;

    transition: all 250ms ease;
}

.tabbed ul li:hover,
.tabbed ul li:hover:before,
.tabbed ul li:hover:after {
    color: #FDECEF;
}

.tabbed ul li.active {
    z-index: 3;
}

.tabbed ul li.active,
.tabbed ul li.active:before,
.tabbed ul li.active:after {
    background-color: #000;
    color: #fff;
}

/* Bordure sous la ligne des onglets */
.tabbed.skin-asbestos {
    border-bottom: 1px solid #E5E4EE;
}

/* Couleur des onglets inactifs d'une table et bordure pour chaque onglet */
.tabbed.skin-asbestos ul li,
.tabbed.skin-asbestos ul li:before,
.tabbed.skin-asbestos ul li:after {
    background-color: #F3F3F7;
    border: 1px solid #E5E4EE;
    border-bottom: 0;
    float: left;
}

/* Couleur d'un onglet inactif d'une table lorsque l'on passe le curseur dessus */
.tabbed.skin-asbestos ul li:hover,
.tabbed.skin-asbestos ul li:hover:before,
.tabbed.skin-asbestos ul li:hover:after {
    background-color: #E5E4EE;
}

/* Couleur du titre de l'onglet d'une table lorsque l'on passe le curseur dessus */
.tabbed.skin-asbestos ul li a:hover,
.tabbed.skin-asbestos ul li span:hover{
    color: #A5B2B3;
}

/* Couleur de l'onglet actif d'une table */
.tabbed.skin-asbestos ul li.active,
.tabbed.skin-asbestos ul li.active:before,
.tabbed.skin-asbestos ul li.active:after {
    background-color: #A5B2B3;
    float: left;
}

/* Couleur du titre de l'onglet actif d'une table lorsque l'on passe le curseur dessus */
.tabbed.skin-asbestos ul li.active a:hover,
.tabbed.skin-asbestos ul li.active span:hover {
    color: #F3F3F7;
}

.tabbed[class*="skin-"] ul li {
    color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
}

/* Round Tabs */
.tabbed.round ul li {
    border-radius: 8px 8px 0 0;
}

.tabbed.round ul li:before {
    border-radius: 0 8px 0 0;
}

.tabbed.round ul li:after {
    border-radius: 8px 0 0 0;
}

/* Accordéon */

/* Vertical Accordion Style */
.va-container {
    position: relative;
    margin: 40px auto 0 auto;
}

.va-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.va-slice {
    cursor: pointer;
    position: absolute;
    width: 100%;
    left: 0;
    overflow: hidden;
}

.va-slice-color-1 {
    background-color: #97c5eb;
}

.va-slice-color-2 {
    background-color: #68ace5;
}

.va-slice-color-3 {
    background-color: #0072cf;
}

.va-slice-color-4 {
    background-color: #0039a6;
}

.va-slice-color-5 {
    background-color: #00338e;
}

.va-slice-color-6 {
    background-color: #002c76;
}

.va-slice-color-7 {
    background-color: #002144;
}

.va-title {
    font-family: 'Open Sans Condensed', sans-serif;
    text-transform: uppercase;
    font-size: 60px;
    margin-left: 20px;
    color: #fff;
    text-shadow: 0 0 1px white;
}

.va-content {
    display: none;
    margin-left: 25px;
}

.va-slice p {
    font-size: 22px;
    font-style: italic;
    font-family: Georgia, serif;
}

.va-slice ul {
    margin-top: 15px;
}

.va-slice ul li {
    float: left;
    margin: 0 2px;
}

.va-slice ul li a {
    color: #000;
    padding: 3px 6px;
    font-size: 14px;
    font-family: 'PT Sans', sans-serif;
    text-transform: uppercase;
}

.va-slice ul li a:hover {
    color: #fff;
    text-shadow: none;
}

.va-nav span:hover {
    opacity: 1.0;
}

/* Correspondant Présences Accueil */

.bandeauTitre {
    position: relative;
    margin-bottom: 10px;
    margin-left: 0;
    margin-top: 0;
    padding-bottom: 20px;
    padding-top: 20px;
    box-shadow: 10px 10px 20px #dfcfcf;
}

.bandeauTitre .compteur {
    position: absolute;
    right: 5px;
    width: 150px;
}

.bandeauTitre h1 {
    color: #606262;
    font-size: 1.5em;
    font-weight: 500;
    text-align: center;
}

.bandeauTitre .compteur + h1 {
    padding-left: 150px;
    padding-right: 150px;
}

.classBody.controleur {
    padding-top: 0;
}

#fichesEnEcart, #fichesNonVerrouillees, #fichesSansEcart {
    text-align: left;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
}

#fichesEnEcart, #fichesEnEcart a {
    color: #ED9400;
}

.wa-primary {
    font-weight: bold;
    color: var(--main-color);
    font-size: 18px;
}

.wa-secondary {
    font-weight: bold;
    color: var(--default-color);
    font-size: 18px;
}

.wa-secondary > small {
    margin-left: 4px;
}

.wa-formulaire-section {
    font-weight: bold;
    color: #ED9400;
    font-size: 18px;
    text-align: left;
}

.wa-formulaire-section-synchronise {
    font-weight: normal;
    color: #5C5B5A;
    font-size: 14px;
    text-align: left;
}

.wa-formulaire-donnee {
    font-weight: bold;
    color: #5C5B5A;
    font-size: 14px;
    text-align: left;
}

.wa-formulaire-radio {
    margin: 10px !important;
}

#fichesSansEcart, #fichesSansEcart a {
    color: #7DB943;
}

#fichesNonVerrouillees, #fichesNonVerrouillees span {
    color: #8CCDEA;
}

.nbFiches {
    padding-top: 25px;
}

#tabs-1.controleur, #tabs-2.controleur {
    padding: 20px;
}

#dateControle {
    padding-top: 30px;
    font-size: 22px;
    text-transform: uppercase;
    color: var(--main-color);
}

.classBody.controleur {
    height: 650px;
}

.iconeMenuControleur {
    padding-top: 20px;
    float: left;
    padding-right: 10px;
}

#fichesEnEcart .labelMenuControleur {
    padding-top: 20px;
}

.labelMenuControleur {
    float: left;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding-top: 28px;
    color: #606262;
    font-weight: normal;
}

#fichesEnEcart .labelMenuControleur {
    margin-top: 10px;
}

.fichesTraitees {
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
}

#fichesTraitees {
    color: #ED9400;
    text-align: left;
    padding: 30px 30px 30px 5px;
}

.fichesTraitees .accesListe {
    display: block;
}

.accesListe {
    cursor: pointer;
}

.liste-fiches {
    background: #fff;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.impressionListe {
    text-align: right;
    padding: 30px 0 30px 0;
    color: #ED9400;
}

.retourListe {
    color: #ED9400;
    padding: 0 0 30px 0;
    text-align: right;
}

#fiches_filter, #fiches_length {
    margin-bottom: 20px;
}

#fiches_filter input, #fiches_length select {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 35px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
}

#listeDate {
    color: var(--main-color);
    font-size: 20px;
    text-align: left;
    padding-top: 35px;
    margin-left: 40px;
}
.bold,
.notification-TODO {
    font-weight: bold;
}

.notification-nb {
    color: white;
    position: relative;
    right: 12px;
    top: 2px;
}

#message-integration {
    font-size: 14px;
}

.centerTxt {
    text-align: center;
}

/*Administration*/

.menuAdmin {
    padding-top: 50px;
}

.iconeMenuAdmin {
    display: block
}

span.imgRepartition:before {
    content: url("../../image/infodb/repartition.png");
}

span.imgUtilisateur:before {
    content: url("../../image/infodb/utilisateur.png");
}

/*Aministration - repartition*/
span.imgMadame:before {
    content: url("../../image/infodb/femme.png");
}

span.imgMonsieur:before {
    content: url("../../image/infodb/homme.png");
}

span.imgMiniMadame:before {
    content: url("../../image/infodb/femme.mini.png");
}

span.imgMiniMonsieur:before {
    content: url("../../image/infodb/homme.mini.png");
}

span.imgEnfantMONSIEUR:before {
    content: url("../../image/infodb/garcon.png");
}

span.imgEnfantMADAME:before {
    content: url("../../image/infodb/fille.png");
}

span.imgMiniEnfantMONSIEUR:before {
    content: url("../../image/infodb/garcon.mini.png");
}

span.imgMiniEnfantMADAME:before {
    content: url("../../image/infodb/fille.mini.png");
}

span.imgReinitialiser:before {
    content: url("../../image/infodb/submit-btn.png");
}

.ligneUserRepartition {
    background-color: #F3F3F7;
    border-radius: 10px;
    margin-bottom: 20px;
    vertical-align: middle;
    padding: 5px 15px;
    min-height: 60px;
    box-shadow: 10px 10px 12px #CCCBCA
}

.ligneUserRepartitionGauche {
    min-height: 60px;
    text-align: left;
    vertical-align: middle;
}

.ligneUserRepartitionCentre {
    text-align: left;
    margin-top: 20px;
}

.ligneUserRepartitionDroite {
    margin-top: 15px;
    text-align: right;
}

.cbx-active {
    color: #ed9400;
}

.vignetteCorrespondant {
    border-radius: 10%;
    background-color: #eeeeee;
    height: 120px;
    position: relative;
    box-shadow: 5px 5px 5px #CCCBCA
}

.vignetteCorrespondantCheck {
    border: solid 3px #ED9400;
    box-shadow: 0 3px 10px 0 #ffa400;
}

.vignetteBodyCorrespondantBoxUncheck {
    border: solid 3px RGBA(255, 255, 255, 0);
}

.vignetteBodyCorrespondantBoxCheck {
    border: solid 3px #ED9400;
    box-shadow: 0 3px 10px 0 #ffa400;
}

.cercle, .imgMonsieur, .imgMadame {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    top: 0;
    left: 0;
}

.cercle {
    top: 5px;
    left: 7px;
}

.circle-text {
    width: 19%;
}

.circle-text:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background: #d30d11;
    border-radius: 50%;
}

.circle-text div {
    float: left;
    width: 100%;
    padding-top: 50%;
    line-height: 1em;
    margin-top: -0.5em;
    text-align: center;
    color: white;
}

.btnRetour {
    margin-top: 35px;
}

.btnRetour a {
    text-align: right;
}

#listeCorrespondants ul {
    vertical-align: middle;
}

#listeCorrespondants li {
    display: inline-block;
    float: none;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#btnAffecteRepartition {
    margin-bottom: 15px;
    margin-top: 7px;
    color: #ED9400;
}

#btnAffecteRepartition.glyphicon {
    font-size: 2em;
}

.btn .glyphicon {
    vertical-align: middle;
}

/*formulaire trajet*/
.module {
    display: block;
    background-color: #e1e1e1;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #CCCBCA;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 15px;
}

.checkboxEnfants {
    padding-top: 10px;
}

.checkboxEnfant {
    min-height: 45px;
}

.bandeauSup {
    background-color: #fff;
    padding-bottom: 30px;
    text-align: center;
}

.formTrajet {
    vertical-align: middle;
}

#wa-confirm-message {
    display: none;
}

#map {
    padding: 0;
}

.onglet {
    padding: 15px;
}

.tableauBg {
    border-radius: 13px;
    background-color: #FFF;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 15px;
}

.ligne-boutons {
    margin-bottom: 15px;
}

.ligne-boutons::before,
.ligne-boutons::after {
    content: " ";
    display: table;
}

.ligne-boutons::after {
    clear: both;
}

.group {
    border-radius: 13px;
    background-color: #f2f2f2;
    padding: 15px;
}

.blueColor {
    color: #009fda;
}

.greenColor,
.greenColor:hover,
.greenColor:active,
.greenColor:focus,
.greenColor:before {
    color: #55BDBE;
}

.orangeColor {
    color: #ECBF00;
}

.yellowColor {
    color: #fff600;
}

.redColor {
    color: #E40424;
}

.greyColor {
    color: #959595
}

.whiteColor,
.whiteColor:before {
    color: #ffffff;
}

.cyanColor,
.cyanColor:before {
    color: #8CCDEA;
}

.greyBgColor {
    background-color: #959595;
}

.whiteBgColor, .cbx-icon {
    background-color: #ffffff;
}

.blueBgColor {
    background-color: #009fda;
}

.noPointer:hover {
    cursor: default;
}

button .glyphicon {
    top: 45%;
}

.dataTables_wrapper {
    margin: 10px 0;
}

.dataTables_wrapper .dt-row {
    display: flex;
    justify-content: space-between;
}

.dataTables_wrapper .dt-row label {
    margin-bottom: 0;
}

.dataTables_wrapper .dt-top-row {
    align-items: flex-end;
}

.dataTables_wrapper .dt-row + .dt-row {
    margin-top: 10px;
}

.dataTables_wrapper .dt-bottom-row {
    align-items: flex-start;
}

.dataTables_wrapper .dt-lb > * {
    display: inline-block;
}

.dataTables_wrapper .dt-lb > .dt-buttons {
    margin-left: 20px;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    bottom: 50%;
    margin-bottom: -8px;
}

table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    opacity: 1;
}

.tabDatatables.dataTable {
    text-align: center;
    background: #fff;
    width: 100%;
}

.tabDatatables.dataTable thead {
    background-color: var(--datatable-entete-bgcolor);
    color: var(--datatable-entete-color);
    text-align: center;
    font-size: 1.1em;
    line-height: 1;
    padding-left: 0;
}

.tabDatatables.dataTable th {
    font-weight: bold;
    padding: 10px 18px;
}

.tabDatatables.dataTable th:last-child {
    border-right: none;
}

.tabDatatables.dataTable tr.even td {
    background-color: var(--datatable-row-bg-color);
}

table.dataTable tbody td {
    font-size: 1.1em;
    padding: 4px 8px;
}

/*table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {*/
/*    background-color: var(--main-color);*/
/*}*/

li:hover > span,
.tabbed li:hover > a {
    /*background-color: rgb(255, 224, 179);*/
    /*color: #3c8dbc;*/
}

#fiches_wrapper {
    padding-bottom: 15px;
}

.flip-glyphicon {
    transform: scaleX(-1);
}

.notification-SEEN a {
    color: #009fda;
}

a#listeCorrespondants, a:hover#listeCorrespondants, a:focus#listeCorrespondants {
    color: #009fda;
}

.leftInputEtape {
    margin-top: 10px;
    line-height: 64px;
    vertical-align: middle;
}

.paddingRight0 {
    padding-right: 0;
}

.margin-right-1-em {
    margin-right: 1em;
}

.sCompletion {
    z-index: 1051 !important;
}

.paddingLeft0 {
    padding-left: 0;
}

.lblCommune, .lblAdresse {
    line-height: 34px;
}

#btnEnregistrerTrajet, #btnSoumettreTrajet, #btnAnnulerTrajet {
    margin-top: 26px;
}

#trajets-favoris {
    width: 100%;
    padding-bottom: 50px;
}

button#trajet-favori {
    height: 50px;
}

.favori {
    padding-bottom: 10px;
    border-bottom: 1px solid #f4f4f4;
}

#trajet-favori-texte span {
    overflow: hidden;
}

#enfants {
    text-align: left;
}

.bottom-line-arche {
    border-bottom: 2px solid var(--main-color);
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.top-line-arche {
    border-top: 2px solid var(--main-color);
    padding-top: 10px;
    padding-bottom: 10px;
}

.champObligatoire {
    color: #FF0000;
}

#modal-dialog-header {
    height: 60px;
}

#modal-dialog-body {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

#modal-dialog {
    z-index: 1051 !important;
}

.up-center {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
    vertical-align: middle;
}

.tooltip-inner {
    background-color: #5F5B57;
    border: 2px solid #ED9400;
    color: #FFFFFF;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #5F5B57;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #5F5B57;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #5F5B57;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #5F5B57;
}

.a-underline {
    text-decoration: underline;
}

.text-size-16, .icon-size-16 {
    font-size: 16px !important;
}

.text-size-20, .icon-size-20 {
    font-size: 20px !important;
}

.text-size-24, .icon-size-24 {
    font-size: 24px !important;
}

.text-size-28, .icon-size-28 {
    font-size: 28px !important;
}

.text-size-32, .icon-size-32 {
    font-size: 32px !important;
}

.text-size-40, .icon-size-40 {
    font-size: 40px !important;
}

.text-size-48, .icon-size-48 {
    font-size: 48px !important;
}

.text-size-56, .icon-size-56 {
    font-size: 56px !important;
}

.text-size-64, .icon-size-64 {
    font-size: 64px !important;
}

.text-size-72, .icon-size-72 {
    font-size: 72px !important;
}

.glyphicon-big {
    font-size: 2em;
}

.col-lg-offset-both-1 {
    margin-right: 8.33333333%;
    margin-left: 8.33333333%;
}

.col-lg-offset-both-2 {
    margin-right: 16.66666667%;
    margin-left: 16.66666667%;
}

.col-lg-offset-both-3 {
    margin-right: 25%;
    margin-left: 25%;
}

.box-shadow {
    box-shadow: 8px 8px 0 #aaa;
}

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

.padding-top-1em {
    padding-top: 1em;
}

.pe {
    font-size: 25px;
}

.up {
    font-size: 25px;
}

.up50 {
    font-size: 50px;
}

.upModal {
    font-size: 20px;
}

.upVignette {
    color: #ED9400;
    font-size: 80px;
    box-shadow: 10px 10px 5px 2px #bdbdbd;
    background-color: #eceaea;
}

.upVignetteTitre {
    padding-top: 15px;
}

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

.breadcrumb > .activeWa {
    color: var(--second-color);
    font-weight: bold;
}

.form-control {
    color: var(--default-color);
    border-radius: 20px;
}

.input-group .form-control:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.input-group.date .input-group-addon {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.input-group-addon {
    border-radius: 12px;
}

.inputDate {
    height: 25px;
    width: 100px;
}

.datePickerJour, .datePickerMois {
    /*width: auto !important;*/
    padding-right: 20px !important;
}

.pointer {
    cursor: pointer;
}

.container-center {
    position: relative;
    height: 14rem;
}

.element-middle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.footer img {
    margin-top: -7px;
    margin-left: 10px;
}

.footer {
    padding-right: 1%;
    padding-top: 1%;
    padding-bottom: 2%;
    text-align: center;
    height: 11%;
    margin-top: 2%;
    color: #C1210D;
}

.modal-content {
    overflow-y: auto;
    max-height: 99vh;
}

#btnIntegration, #btnIntegrationAbsence {
    margin-top: 10px;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

#accueilBody {
    padding-top: 20px;
}

#accueilBody .box-body .text-info,
#accueilBody .box-body .text-danger {
    min-height: 20px;
}

.text-info {
    color: var(--main-color);
}

.texteExplicatif {
    color: #000000;
    font-size: 12px;
}

.liste-acces .titre {
    padding-top: 10px;
    text-align: left;
    font-size: 16px;
    color: var(--main-color);
}

.modalDatatable tbody tr td {
    font-size: 1.0em;
}

.modalDatatable thead {
    font-size: 1.0em;
}

.toolbar {
    float: left;
}

.fc-widget-content:first-of-type {
    /*border-style: solid !important;*/
    /*border-width: 1px !important;*/
    border-left: 1px solid #b6b6b6 !important;
}

.fc-widget-content:last-of-type {
    /*border-style: solid !important;*/
    /*border-width: 1px !important;*/
    border-right: 1px solid #b6b6b6 !important;
}

.fc-content-skeleton td {
    border-color: #ddd !important;
}

.color-icon {
    color: var(--icone-color);
}

.color-icon:hover {
    color: var(--icone-hover-color);
}

.topImage {
    background: no-repeat center;
    background-size: contain;
    height: 50px;
}

.loader {
    background-image: url('../../image/infodb/loader.gif');
    display: block;
    width: 40px;
    height: 40px;
    margin-left: 70px;
    background-size: contain;
}

.placementsMultiples, .isDemandeConge {
    font-size: 1.5em;
    padding-left: 5px;
    padding-right: 5px;
}

.vmapi-completion.autocompleteVM {
    z-index: 9999 !important;
}

/* to-do: ajouter une couleur differente pour le hover */

.btn {
    border-radius: 12px;
}

/*.btn-default, .btn-default.focus, .btn-default.hover {*/
/*    !*color: var(--main-color);*!*/
/*    background-color: #FFF;*/
/*    !*border-color: var(--main-color);*!*/
/*}*/

/*.btn-danger, .btn-danger:focus, .btn-danger:hover,.btn-danger:active:focus {*/
/*    color: var(--main-color);*/
/*    background-color: #FFF;*/
/*    border-color: var(--main-color);*/
/*}*/

/*.btn-success, .btn-warning, .btn-success:focus, .btn-warning:focus, .btn-success:hover, .btn-warning:hover, .btn-success:active:focus, .btn-warning:active:focus{*/
/*    color: #FFF;*/
/*    background-color: var(--main-color);*/
/*    border-color: var(--main-color);*/
/*}*/

.btn-toolbar {
    margin-top: 20px;
}

.btn-default {
    background-color: var(--btn-default-bgcolor);
    border-color: var(--btn-default-border-color);
    color: var(--btn-default-color);
    border-radius: 12px;
}

.btn-default:hover, .btn-default:focus, .btn-default:active {
    background-color: var(--btn-default-hover-bgcolor);
    border-color: var(--btn-default-border-color);
    color: var(--btn-default-color);
}

.btn-primary {
    background-color: var(--btn-primary-bgcolor);
    border-color: var(--btn-primary-border-color);
    color: var(--btn-primary-color);
    border-radius: 12px;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--btn-primary-hover-bgcolor);
    border-color: var(--btn-primary-border-color);
    color: var(--btn-primary-color);
}

.btn-warning {
    background-color: var(--btn-warning-bgcolor);
    border-color: var(--btn-warning-border-color);
    color: var(--btn-warning-color);
    border-radius: 12px;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background-color: var(--btn-warning-hover-bgcolor);
    border-color: var(--btn-warning-border-color);
    color: var(--btn-warning-color);
}

.btn-danger {
    background-color: var(--btn-danger-bgcolor);
    border-color: var(--btn-danger-border-color);
    color: var(--btn-danger-color);
    border-radius: 12px;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger:before {
    background-color: var(--btn-danger-hover-bgcolor);
    border-color: var(--btn-danger-border-color);
    color: var(--btn-danger-color);
}

.btn-success {
    background-color: var(--btn-success-bgcolor);
    border-color: var(--btn-success-border-color);
    color: var(--btn-success-color);
    border-radius: 12px;
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: var(--btn-success-hover-bgcolor);
    border-color: var(--btn-success-border-color);
    color: var(--btn-success-color);
}



.btn-group-sm>.btn, .btn-sm {
    border-radius: 10px;
}

@media (max-width: 768px) {

    #bandeauGauche {
        padding-top: 80px;
    }

    #logoWA {
        background-size: 80%;
        margin-top: 100px;
    }

    /* Texte sur l'entête de la page d'accueil sur mobiles et tablettes */
    .topTexte {
        font-size: 19px !important;
        padding: 0 !important;
    }

    /*.top .identite {
        margin-top: 50px;
    }*/

}

/* Evenements du calendrier */

.detailsPresences .wrap {
    /*width: 1100px;*/
    margin: 10px auto 20px auto;
    z-index: 2; /* Dragabble des motifs d'absence sur mobile */
}

.external-events {
    padding: 10px;
    border: 1px solid #ccc;
    background: #eee;
    text-align: left;
}

.external-events h4 {
    font-size: 16px;
    margin-top: 0;
    /*padding-top: 1em;*/
    font-weight: 600;
    color: var(--main-color);
}

.external-events h4 span {
    font-size: 15px;
    font-weight: normal;
    font-style: italic;
}

.external-events .fc-event {
    margin: 5px;
    cursor: pointer;
    display: inline-block;
    padding: 0 10px;
    border-radius: 15px;
}

.external-events p {
    margin: 1.5em 0;
    font-size: 11px;
    color: #666;
}

.external-events p input {
    margin: 0;
    vertical-align: middle;
}

.fc-day-other .fc-daygrid-day-frame {
    background-color: #606262;
}

.close {
    opacity: .4;
    margin-right: 5px;
}

.close:hover {
    opacity: 1;
}

/* Permet de supprimer un événement sur écran tactile */
.fc-h-event.fc-selected::before {
    position: relative; /* Voile sur l'événement */
}

.fc-event.fc-selected .fc-resizer::before {
    width: 0; /* Taille du resize */
}

/* Permet que le symbole de champ valide ou non n'apparaisse pas sur le bouton de la liste déroulante sur firefox */
.form-control-feedback {
    text-align: left;
    margin: 0 5px;
}

.input-group-addon > .upModal {
    font-size: 19px;
}

#trajet-enfants div {
    min-height: 50px;
}

/* Fin Evenements du calendrier */

.couleurDelegataire {
    color: var(--main-color);
}

/* Réécriture bootstrap-select.min.css */

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select .btn.btn-default {
    color: var(--main-color);
    background-color: #fff;
    border-color: #adadad;
}

.bootstrap-select .dropdown-menu > li > a {
    color: rgb(51, 51, 51);
}

/* Permet de changer les couleurs du calendrier bootstrap */
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover:active {
    color: #fff;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

/* Couleur de la case selectionnee de la pagination d'une table */
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: var(--btn-primary-bgcolor);
    border-color: var(--btn-primary-color);
}

/* Couleur des elements de numerotation de la pagination d'une table */
.pagination>li>a,
.pagination>li>span {
    color: var(--default-color);
}

/* Couleur autour du bouton rechercher sur une table */
.form-control:focus {
    border-color: var(--btn-primary-border-color);
    box-shadow: 0 0 5px var(--btn-primary-color);
}

/* Tableau compteurs des demandes de congés */
#tableau-conge {
    border-collapse: collapse;
    border: 2px solid black;
    background-color: #ffffff;
    float: right;
    margin: 0 15px 5px 15px;
}

#tableau-conge caption {
    font-weight: bold;
    font-size: 16px;
    padding: 3px;
    color: black;
    text-align: center;
}

#tableau-conge td {
    border: 2px solid black;
    font-weight: bold;
    font-size: 16px;
}

#tableau-conge td.libelle-tableau-conge {
    text-align: left;
    padding: 2px 25px 2px 2px;
}

#tableau-conge td.valeur-tableau-conge {
    text-align: center;
    padding: 2px 5px;
}

/* Ecran Liste des présences par période */
#modalListePresencePeriode #accueillant {
    width: 100%;
}

#btnGenereListePresencePeriode {
    margin: 35px auto;
}

.list-align,
#modalListePresencePeriode .form-inline .form-group {
    display: flex;
    align-items: center;
}

/* Ecran Disponibilite ou Déclaration de places disponibles des assistants familiaux */

/*
Empeche la coloration du texte en cas de succes
*/
.form-group.has-success label.disponibilite-age,
.form-group.has-success label.radio-inline {
    color: inherit;
}

/*
Marges pour un bloc constitué de boutons radios
*/
.wa-formulaire-radio {
    margin: 10px;
}

/*
Marge pour un label de bouton radio et suppression du gras du label
*/
.enum-formulaire-radio {
    font-weight: normal;
}

/*
Mise en forme des formulaires, en complément des styles bootstrap
 */
@media (min-width: 992px) {
    .md-decalage-titre {
        margin-top: 35px;
    }
}

/*
Margin-top quand la largeur de l'écran est inférieure au niveau medium, sert à espacer les boutons radios sous forme de liste
*/
@media not all and (min-width: 992px) {
    .md-radio-margin-top {
        margin-top: 10px;
    }
}

/*
Taille et marges pour un input de type number présent dans un texte, suppression du gras du label associé à l'input
*/
.text-with-input-number {
    font-weight: normal;
    width: 50px;
    margin: 0 5px 0 5px;
}

/* Ecran demande de congés des assistants familiaux */

/*
Apparence info "warning" pour un texte
*/
.text-warning {
    color: #FFFFFF;
    background-color: orange;
    border-radius: 6px;
}

/*
Apparence info "ok" pour un texte
*/
.text-success {
    color: #FFFFFF;
    background-color: #00a65a;
    border-radius: 6px;
}

#messageBienvenue{
    font-size: 25px;
}

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1100;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
}

.ui-autocomplete > li > div {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333333;
    white-space: nowrap;
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
    cursor: pointer;
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*.leaflet-control-geocoder-ban-alternatives {*/
/*    display: block;*/
/*    width: inherit;*/
/*    max-height: 400px;*/
/*    list-style: none;*/
/*    padding: 0;*/
/*    margin: 0;*/
/*    overflow: auto;*/
/*}*/

/* Custom Autocomplete CSS */
.ui-autocomplete {
    display: block;
    width: inherit;
    max-height: 400px;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: auto;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.ui-menu-item {
    width: inherit;
    cursor: pointer;
    border-top: 1px solid #d0d0d0;
}

.ui-menu-item:hover {
    background-color: #d0d0d0;
}