/*=====================================================================*/
/* Definition des couleurs */
/*=====================================================================*/

:root {
    --couleur-background: #fff;

    --couleur-bord-gris: #ced4da;
    --radius-bouton: 0.25rem;
    
    --couleur-recherche: rgb(0,155,9);

    --couleur-succes: rgb(78,159,89);
    --couleur-succes-clair: rgb(78,159,89,0.15);

    --couleur-danger: rgb(236,5,13);
    --couleur-danger-clair: rgba(236,5,13,0.15);

    --couleur-info: #d1ecf1; /* #004085; */
    --couleur-info-clair: #cce5ff;
    --couleur-info-fonce: #bee5eb;
    --couleur-info-txt: #0c5460;

    --couleur-desactive: rgb(125,125,125);
    --couleur-desactive-clair: rgba(125,125,125,0.15);

    --couleur-primary: #007bff;
    --couleur-primary-hover: #0069d9;

    --couleur-warn: #ffeeba;
    --couleur-warn-fonce: #fff3cd;

    
    --couleur-tab-s-seconde: #ddd;

    --couleur-gael-bleu: #0057a3;
    --couleur-gael-bleu-fonce: #1e3261;
    --couleur-gael-bleu-tres-fonce: #132652;

    --couleur-label-faible: #777;

    --couleur-stat: #fbb03b;           /* rgb(251,176,59) */
    --couleur-stat-fonce: #da8d16;
    --couleur-stat-disable: rgba(251,176,59,0.5);


    --couleur-aide: #810097;
    --couleur-aide-fond: #fadeff;
    --couleur-aide-bord: #ad41bf;
    --couleur-aide-icon: #2a0031;

    --radius-cadre: 0.25rem;
    
}


/*=====================================================================*/


.div_inlineBlock > div {
    display: inline-block;
}

.alert-primary {
    position: relative;
    background-color:  #AACCF6;
    margin:  .8em 2em .8em 2em;
    padding: .5em 1em .5em 1em;
}

.encart_titre {
    font-size: 1.0em;
    text-align: left;
    margin:  .8em 2em .3em 2em;
    padding: .5em 1em .5em 1em;
}

.encart_titre + .encart {
    margin-top: 0.3em;
}

.flex_container {
    display: flex;
    flex-flow: row wrap;
}


/* Ajout de style specifique aux tableaux de la page disponibilitees. */

.table_dispo td {
    padding: .5em 1.5em .5em 1.5em; 
    margin: 0em 0 0 0;
    text-align: center;
}

.table_dispo td[class='cl_observations'] {
    text-align: left;
}
.table_dispo td[class='cl_observations'] div {
    max-width: 30em;
    border: none;
}
.table_dispo td[class='cl_observations'] div span {
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
}

.table_dispo label {
    width: auto;
    float: none;
    padding: 0.1em;
    margin: 0.1em;
}

.table_dispo .saisieDispo td {
    padding-top: 0em;
    padding-bottom: 0em;
}

.table_dispo tr[class~='cl_fondVert'] {
    background-color: #d4edda;
}

.table_dispo tr[class~='cl_fondRouge'] {
    background-color: #f8d7da;
}

.table_dispo caption {
    font-size: 1.5em;
    text-align: left;
    margin: 1em 1em 1em 2em;
}

.table_dispo[class~='c1-align-left'] tbody td:first-child {
    text-align: left;
}

.cadre-epais-arrondi {
    width: auto;
    padding: 1em;
    border-radius: 1em;
    border: 2px solid #aaccf6;
}


/* style compact pour afficher une liste sous forme d'un
   tableau de checkbox avec label ***/

table[class~='compact'] {
    width: auto;
    margin: 1em;
    padding: .5em 1em;
}

.compact tbody {

}

.compact tr {
    margin: 0;
    padding: 0;
}

.compact td {
    margin: 0;
    padding: 0.2em;
}

.compact input {
    padding: 0;
    margin: 0 0.3em;
    vertical-align: bottom;
}

.compact label {
    width: auto;
    padding: 0;
    margin: 0 0.5em;
}

table[class~='compact'][class~='cadre-epais-arrondi'] {
    border-collapse: separate;
}


/* Une class pour aligner les div horizontalement...*/

.Hf_btn-barre-gauche {
    display: flex;
    flex-flow: row wrap;
    align-items: start;
    column-gap: 1rem;
}

.Hf_btn-barre-droite {
    display: flex;
    flex-flow: row wrap;
    align-items: end;
    column-gap: 1rem;
}

.hori-flex-wrap {
    display: flex;
    flex-flow: row wrap;
    align-items: start;
    margin: .5em;
}

.hori-flex-wrap > div {
    margin: 1em 0.5em;

}
.hori-flex-wrap label {
    width: auto;
    margin: 0;
    padding:0 0.25em;
    margin:0;
}

.hori-flex-wrap label input {
    vertical-align: middle;
}

div[class~='hori-flex-wrap'] ul {
    margin: 0 1em;
}

/* pour aligner les icon des calendrier avec le input associe */
span[class='date'] img {
    vertical-align: middle;
}


/* pour standardiser facon bootstrap */

.cl_text-alert {
    color: #cf0000;
}

div[class~='text-alert'] {

    padding: 1em;
    border: 1px solid #f5c6cb;
    color: #721c24;
    background-color: #f8d7da;
    border-radius: .3em;
}

/*=====================================================================*/
/* Class couleur de texte pour emuler les couleurs de bootstrap*/

.text-primary { color: #007bff; }
.text-danger { color: #dc3545; }
.text-success { color: var(--couleur-succes); }
.text-info { color: var(--couleur-info); }

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

/*=====================================================================*/
/* Class alert */

div.alert-danger, p.alert-danger {
    font-family: verdana;
    font-size: .8rem;
    font-weight: bold;
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #dc3545;
    border-radius: .25em;
    padding: 1em 1em;
    margin: 0 0 .25em 0;
}

div.alert-warning, p.alert-warning {
    font-family: verdana;
    font-size: .8rem;
    font-weight: bold;
    color: #8a6a0c;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: .25em;
    padding: 1em 1em;
    margin: 0 0 .25em 0;
}

div.alert-info, p.alert-info, .alert-info {
    font-family: arial; /*verdana;*/
    font-size: .8rem;
    /* font-weight: bold; */
    color: var(--couleur-info-txt);
    background-color: var(--couleur-info-clair);
    border: 1px solid #b8daff;
    border-radius: .25em;
    padding: 1em 1em;
    margin: 0 0 .25em 0;
}

/*=====================================================================*/
/* Emulation des classes bootstrap: btn, btn-success, btn-danger... pour l'element <a> */

a.btn {
    display: inline-block;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    padding: .375rem .5rem;
    margin: 0; }

button.btn {
    display: inline-block;
    font-size: .96rem;
    line-height:1.5;
    text-align: center;
    border-radius: .25rem;
    border-width: 0;
    padding: .375rem .5rem;
    margin: 0; }

span.btn {
    display: inline-block;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    padding: .375rem .5rem;
    margin: 0; }

.btn-primary {
    color: white;
    background-color: var(--couleur-primary);
}
.btn-primary:hover {
    color: white;
    background-color: var(--couleur-primary-hover);
    text-decoration: none;
}
.btn-secondary {
    color: white;
    background-color: #6c757d;
}
.btn-secondary:hover {
    color: white;
    background-color: #5a6268;
    text-decoration: none;
}
.btn-success {
    color: white;
    background-color: #28a745; }
.btn-success:hover {
    color: white;
    background-color: #218838;
    text-decoration: none; }

.btn-danger {
    color: white;
    background-color: #dc3545; }
.btn-danger:hover {
    color: white;
    background-color: #c82333;
    text-decoration: none; }

.btn-warning {
    color: black;
    background-color: #ffc107; }
.btn-warning:hover {
    color: black;
    background-color: #e0a800;
    text-decoration: none; }

.btn-info {
    color: white;
    background-color: #17a2b8; }
.btn-info:hover {
    color: white;
    background-color: #138496;
    text-decoration: none; }

.btn-light {
    color: #212529;
    background-color: #f8f9fa; }
.btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    text-decoration: none; }

.btn-dark {
    color: white;
    background-color: #343a40; }
.btn-dark:hover {
    color: white;
    background-color: #23272b;
    text-decoration: none; }

.btn-dark {
    color: white;
    background-color: #343a40; }
.btn-dark:hover {
    color: white;
    background-color: #23272b;
    text-decoration: none; }


/*--------------------------------------------------------------------------------
  btn-file : specifique au input[type='file'] 
--------------------------------------------------------------------------------*/

input[type='file'].btn-file::file-selector-button {
    font-size: .96rem;
    line-height:1.5;
    text-align: center;
    border-radius: .25rem;
    border-width: 0;
    padding: .375rem .5rem;
    margin: 0 .25rem 0 0;
}

input[type='file'].btn-file-primary::file-selector-button {
    font-size: .96rem;
    line-height:1.5;
    text-align: center;
    border-radius: .25rem;
    border-width: 0;
    padding: .375rem .5rem;
    margin: 0 .25rem 0 0;
    color: white;
    background-color: var(--couleur-primary);
}
 
input[type='file'].btn-sm::file-selector-button {
    font-size: .8rem;
}
 
input[type='file'].btn-file-primary::file-selector-button:hover {
    color: white;
    background-color: var(--couleur-primary-hover);
    text-decoration: none;
}


/* btn-outline-... */

.btn.btn-outline-primary {
    color: var(--couleur-primary);
    border: 1px solid var(--couleur-primary);
    background-color: white; }
.btn.btn-outline-secondary:hover {
    color: white;
    background-color: var(--couleur-primary); }

.btn.btn-outline-secondary {
    color: #6c757d;
    border: 1px solid #6c757d;
    background-color: transparent; }
.btn.btn-outline-secondary:hover {
    color: var(--couleur-background);
    background-color: #6c757d; }

a.btn-sm { font-size: .8rem; }
button.btn-sm { font-size: .8rem; }
span.btn-sm { font-size: .8rem; }


/* Pour l'homogeneite des boutons "clictous". Mais chrom pose probleme...
-------------------------------------------------*/

.btn-clictous {
/*    font-size: 1.5em;*/
    padding: .125em;
    line-height:1;
    border: none;
    border-radius: .15em;
    /* color: #28a745; */
    color: #1bb700;
    background-color: white;
}

/* Pour ajuster la taille des icons (fontawesome) par le biais d'une classe facon bootstrap
-------------------------------------------------*/

.icon-s10 { font-size: 1em; }
.icon-s11 { font-size: 1.1em; }
.icon-s12 { font-size: 1.2em; }
.icon-s13 { font-size: 1.3em; }
.icon-s14 { font-size: 1.4em; }
.icon-s15 { font-size: 1.5em; }
.icon-s16 { font-size: 1.6em; }
.icon-s17 { font-size: 1.7em; }
.icon-s18 { font-size: 1.8em; }
.icon-s19 { font-size: 1.9em; }
.icon-s20 { font-size: 2em; }
.icon-s22 { font-size: 2.2em; }
.icon-s24 { font-size: 2.4em; }
.icon-s26 { font-size: 2.6em; }



/* Tableau simple : tableau de base nouveau style epuré */

table.tab-s {
    width: auto;
    border: 1px solid var(--couleur-background);
}

table.tab-s thead {
    border: 1px solid var(--couleur-tab-s-seconde);
    border-bottom: 1px solid black;
}

table.tab-s tbody {
    border-bottom: 1px solid black;
}

table.tab-s td {
    background-color: var(--couleur-background);
    color: black;
}

table.tab-s th {
    background-color: var(--couleur-tab-s-seconde);
    color: black;
}

table.tab-s tbody tr:hover td {
    background-color: var(--couleur-background);
}

table.tab-s tbody tr:hover th {
    background-color: var(--couleur-tab-s-seconde);
}