/*-----------------------------------------------------------------------------
    Theme.css
    Planning 2025
    rev. 13.5.25
-----------------------------------------------------------------------------*/


body {
    background-color: #767676;
}


header {
    margin-right: 0px;
    padding: .5rem;
    padding-bottom: 1rem;
    padding-top: 0rem;
}



.divChapeau {
    position: relative;
    top: 2.5em;
    z-index: 100;    
}

.divChapeau img {
    width: 95%;
}


.fndMenu,
.divHeadSearch {
    background-color: rgba(222, 226, 230, 1) !important;
}



h1, h2, h3, h4, h5, h6 {
  color: #333;
}



/* menu gauche */
/* Générateur de gradient https://cssgradient.io/    https://www.w3schools.com/colors/colors_gradient.asp*/

#menuGauche a {
    position: relative;
}

#menuGauche .article {
    font-weight: bold;
    height: 3rem;
    padding-top: .75rem;
    margin-bottom: .25rem;
    border: solid;
    border-width: 1px;
    border-radius: 0.2rem;
}


#menuGauche .accueil {
    border-color: #e6d7cd;
    background: linear-gradient(0deg, rgba(214,196,184,1), rgba(255,255,255,1));
}

#menuGauche .accueil:hover {
    background: linear-gradient(0deg, rgba(255,255,255,1), rgba(214,196,184,1));
}

#menuGauche .accueil-select {
    background: linear-gradient(0deg, rgba(194,178,169,1) 0%, rgba(214,196,184,1) 50%, rgba(194,178,169,1) 100%);
}


.fndPersonne {
    background-color: #FFB58C;
}

#menuGauche .personne {
    border-color: #f7d0ba;
    background: linear-gradient(0deg, rgba(209,140,105,1), rgba(255,255,255,1) );
}

#menuGauche .personne:hover {
    background: linear-gradient(0deg, rgba(255,255,255,1), rgba(209,140,105,1) );
}

#menuGauche .personne-select {
    background: linear-gradient(0deg, rgba(209,140,105,1) 0%, rgba(249,227,216,1) 50%, rgba(209,140,105,1) 100%);
}


/*.vacances-color {
    background-color: #a8eff9;
}*/

#menuGauche .vacances {
    border-color: #f7d0ba;
    background: linear-gradient(0deg, rgba(168,239,249,1), rgba(255,255,255,1));
}

#menuGauche .vacances:hover {
    background: linear-gradient(0deg, rgba(255,255,255,1), rgba(168,239,249,1));
}

#menuGauche .vacances-select {
    background: linear-gradient(0deg, rgba(132,180,179,1) 0%, rgba(168,239,249,1) 50%, rgba(132,180,179,1) 100%);
}


#menuGauche .planning {
    border-color: #b8e0ff;
    background: linear-gradient(0deg, rgba(172,196,213,1), rgba(255,255,255,1));
}

#menuGauche .planning:hover {    
    background: linear-gradient(0deg, rgba(255,255,255,1), rgba(172,196,213,1));
}

#menuGauche .planning-select {    
    background: linear-gradient(0deg, rgba(171,203,224,1) 0%, rgba(168,239,249,1) 50%, rgba(171,203,224,1) 100%);
}

#menuGauche .congehebdo {
    border-color: #f3eebd;
    background: linear-gradient(0deg, rgba(252,246,195,1), rgba(255,255,255,1));
}

#menuGauche .congehebdo:hover {
    background: linear-gradient(0deg, rgba(255,255,255,1), rgba(252,246,195,1));
}

#menuGauche .congehebdo-select {
    background: linear-gradient(0deg, rgba(227,222,178,1) 0%, rgba(252,246,195,1) 50%, rgba(227,222,178,1) 100%);
}


#menuGauche .ferie {
    border-color: #e7d4de;
    background: linear-gradient(0deg, rgba(224,203,223,1), rgba(255,255,255,1));
}

#menuGauche .ferie:hover {    
    background: linear-gradient(0deg, rgba(255,255,255,1), rgba(224,203,223,1));
}

#menuGauche .ferie-select {    
    background: linear-gradient(0deg, rgba(203,186,205,1) 0%, rgba(224,203,223,1) 50%, rgba(203,186,205,1) 100%);
}

#menuGauche .client {
    border-color: #e7d4de;
    background: linear-gradient(to bottom, #ffffff 0%, #d3f48c 100%);
}

    #menuGauche .client:hover {
        background: linear-gradient(to bottom, #d3f48c 0%, #ffffff 100%);
    }

#menuGauche .client-select {
    background: linear-gradient(0deg, #d3f48c 0%, #ffffff 50%, #d3f48c 100%);
}


#menuGauche .options {
    border-color: #ffcbc4;
    background: linear-gradient(0deg, rgba(254,189,181,1), rgba(255,255,255,1));
}

#menuGauche .options:hover {
    background: linear-gradient(0deg, rgba(255,255,255,1), rgba(254,189,181,1));
}

#menuGauche .options-select {    
    background: linear-gradient(0deg, rgba(226,172,167,1) 0%, rgba(254,189,181,1) 50%, rgba(226,172,167,1) 100%);
}


#menuGauche div {    
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 1.25rem;
    height: 2.85rem;
}


#menuGauche #linkAccueil div.puce {
    background: linear-gradient(0deg, rgba(159,147,140,1) 0%, rgba(214,196,184,1) 50%, rgba(159,147,140,1) 100%);
}

#menuGauche #linkPersonne div.puce {
    background: linear-gradient(0deg, rgba(156,105,80,1) 0%, rgba(249,227,216,1) 50%, rgba(156,105,80,1) 100%);
}

#menuGauche #LinkCongeHebdo div.puce {
    background: linear-gradient(0deg, rgba(185,182,147,1) 0%, rgba(252,246,195,1) 50%, rgba(185,182,147,1) 100%);
}

#menuGauche #linkVacances div.puce {
    background: linear-gradient(0deg, rgba(62,89,89,1) 0%, rgba(168,239,249,1) 50%, rgba(62,89,89,1) 100%);
}

#menuGauche #linkPlanning div.puce {
    background: linear-gradient(0deg, rgba(141,168,186,1) 0%, rgba(168,239,249,1) 50%, rgba(141,168,186,1) 100%);
}

#menuGauche #linkPlanningJour div.puce {
    background: linear-gradient(0deg, rgba(141,168,186,1) 0%, rgba(168,239,249,1) 50%, rgba(141,168,186,1) 100%);
}

#menuGauche #linkJoursFeries div.puce {
    background: linear-gradient(0deg, rgba(167,153,170,1) 0%, rgba(224,203,223,1) 50%, rgba(167,153,170,1) 100%);
}

#menuGauche #linkOptions div.puce {
    background: linear-gradient(0deg, #a27da8 0%, rgba(254,189,181,1) 50%, rgba(186,142,138,1) 100%);
}

#menuGauche #linkClient div.puce {
    background: linear-gradient(0deg, #8dbf20 0%, #d3f48c 50%, #8dbf20 100%);
}




.btn-outline-dark {
    background-image: linear-gradient(to bottom, white, lightgray);
}


.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-image: linear-gradient(to bottom, lightgray, white);
    color: black !important;
}


.rappel {
    background-color: yellow;
    color: black;
    background-image: none;
}

    .rappel:hover {
        background-color: #ffff50;
        background-image: none;
        color: black;
    }



.indicViewPlanning {
    position: relative;
    top: -.5rem;
    left: 3rem;
}

.indicViewPlanning img {
    position: relative;
    width: 2rem;
}


/* couleur des zone de texte */
.form-control {
    color: black;
}



/* Home */

.divVacancesMoniteur {
    background-color: white;
}

.fndHome {
    background-color: #EEEAE7;
}


/* vacances */
.fndVacances {
    background-color: #CAF0FB;
}

.fndConge0 {
    background-color: #EDFAFE;
}

.fndConge1 {
    background-color: #DBF5FD;
}

.fndCongeSelect {
    background-color: #ffffcc;
}

.fndListeActivite {
    background-color: white;
}

.divListePersonne .liste {
    border-bottom-style: solid;
    border-width: 1px;
    border-color: lightgray;
}

.chkbox-top75 {
    margin-top: .75em;
}


/* Planning */

.fndPlanning {
    background-color: wheat;
}

.divCadrePlanning {
    background-color: white;
}

#divFiltrePlanning {
    border-bottom-style: solid;
    border-color: gray;
    border-width: 1px;
}

.divVacancesMoniteur td.c,
#divPlanning td.c {
    text-align: center;
}

.divVacancesMoniteur td.l,
#divPlanning td.l {
    padding-left: .25rem;
}

/* Fériés */

.fndFerie {
    background-color: #e7d4de;
}

.fndJour0 {
    background-color: #FFF;
}

.fndJour1 {
    background-color: #F8F1F4;
}

.divJourFerie .divListeFerie {
    border-color: whitesmoke;
    border-style: solid;
    border-width: 1px;
}




/* Fériés proposés */
#DlgFeriesProposes .cadre {
    border-style: solid;
    border-width: 1px;
    border-radius: 7px !important;
    border-color: #e7d4de;
}

#DlgFeriesProposes .cadre-jour {
    max-height: 250px;
    overflow-y: scroll;
}

#DlgFeriesProposes .form-check {
    padding-left: 2em;
}

#DlgFeriesProposes .fndFeriePropose {
    background-color: #faf787;
}

#DlgFeriesProposes .fndFerieSelect {
    background-color: yellowgreen;
}




/* fond modal perso */
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: grey;
}


/* Congés hebdomadaires */
.fndHebdo {
    background-color: #fbf9e6;
}


.divCongeHebdo .groupe {
    /*max-width: 16em;*/
    /*min-height: 25em;*/
    max-width: 100%;
    background-color: white;
    padding: .5em;
    border-radius: .2em;
}


/* Clients */
.fndClient {
    background-color: #d3f48c;
}



#MsgModalAbsencePeriode .ligne-sep {
    border-top: 1px solid #e9ecef
}

.bord-msg-vert {
    border-style: solid;
    border-width: 1px;
    border-color: green;
    padding: .5em;
    border-radius: .2em;
}