/*  A CONSERVER Pour essais  */

    :root__{
        --couleur-principale: brown;
            --marge-principale:50px 0px 25px 0px;
        --padding-de-base:6px;
        --couleur-fond-01: red;
    }

     #test1___{
        color:var(--couleur-principale); 
        /* var(--couleur-fond-01)*/
    }



/* ================================================================ */
    /* Commun pour toutes les pages */
/* ================================================================ */

* {box-sizing: border-box;}

html {font-size: 62.5%;} 

#body {font-family: Verdana;}

#body {font-size: 1.2rem;}

#containerGlobal{max-width: 1180px; margin: 0 0 0 240px ; padding: 0px 8px 0px 8px;}

#containerGlobal h1 {font-size: 24px; font-size: 2.4rem; margin: 0rem 0rem;}

#main {margin-top: 0px;}

#titrePage span {font-size: 1.8rem; color: blue;}

/* ================================================================ */
    /* PAGE MAINTENANCE */
/* ================================================================ */

/* ??? */
img.maintenance.center {display: block; margin-left: auto; margin-right: auto;}

/* ================================================================ */
    /* Mises en forme diverses */
/* ================================================================ */

/* Autres boutons */

ul>li.btn {
    padding: 0 1rem; 
    border: 1px solid blue; 
    line-height: 18px; 
    border-radius: 5px; 
    font-size: 1rem; 
    text-align: center;
}

ul>li.btn:not(.read-only) {
    cursor: pointer; 
    background-color: white;
}

ul>li.btn:not(.read-only) {
    cursor: pointer; 
    background-color: white;
}
ul>li.btn:not(.read-only) {
    cursor: pointer; 
    background-color: white;
}

input.read-only, select.read-only, textarea.read-only, td.read-only, li.read-only {
    background-color: #DCDCDC!important;
    cursor: not-allowed !important;
}

input.read-only-02, select.read-only-02, textarea.read-only-02, td.read-only-02, li.read-only-02 {
    background-color: #DCDCDC!important;
    cursor: not-allowed !important;
}

input.read-only-03, select.read-only-03, textarea.read-only-03, td.read-only-03, li.read-only-03 {
    background-color: #DCDCDC!important;
    cursor: not-allowed !important;
}

/*.msg-infos {margin: 0 0 1rem 0; padding: 0 1rem; border: 1px solid blue; min-height: 22px; border-radius: 5px; font-size: 1rem;}*/


/* Boutons d'onglets */
ul.btn>li.btn-suggere:not(.read-only) {background-color: blue !important; color: white !important;}


.masque {display: none !important;}
.masque-01 {display: none !important;}
.masque-02 {display: none !important;}
.masque-03 {display: none !important;}


/* Couleurs et mises en forme */

.fond-rouge {background-color: #FF4500 !important;}

.fond-orange {background-color: #FFA500 !important;}

select.forcage-rouge, input.forcage-rouge {color: red !important;}

.nok {text-decoration: line-through;}

.gras {font-weight: bold;}

input {font-family: verdana;}

/* Croix de fermeture de la box de modification */
/* Inutile ?? */
.fermer-box {font-size: 2rem; margin:0; padding:0; position: absolute; top:0px; right: 5px; cursor: pointer;}


/* Input, TextArea, Select */

div:not(.style-02)>input, div:not(.style-02)>textarea, div:not(.style-02)>select, ul:not(.style-02)>li>input, ul:not(.style-02)>li>textarea, ul:not(.style-02)>li>select {
    border: 1px solid #87CEFA;
}


/* ================================================================ */
    /* Navigation entre pages du site */
/* ================================================================ */


#btn-site ul {
    margin: 0 0 0 0 ;
    padding: 1px 4px 4px 6px;
    background-color: #e9e9e9;
/*    border: 1px solid #dddddd;*/
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-width: 0;
}

#btn-site li {
    line-height: 18px; 
    cursor: pointer; 
/*    vertical-align: middle;*/
    list-style: none;
    float: left;
    padding: 0.2em 1em 0.2em 1em;
    font-family: Arial;
    font-size: 1.1em;
    color: #454545;
}

#btn-site li:not(.icone) {
    background-color: #f6f6f6;
    margin-top: 3px;
/*    border: 1px #c5c5c5 solid;*/
/*    border-bottom-width: 0;*/
/*    border-top-right-radius: 3px;*/
/*    border-top-left-radius: 3px;*/
}

#btn-site li.icone {
    font-size: 25px;
    margin-left: 20px;
    padding: 0;
}

#btn-site>ul>li:hover {
    border: 1px #cccccc solid;
    border-bottom-width: 0;
    background-color: #ededed;
    color: #2b2b2b;
}

#btn-site>ul>li.actif {
    border: 1px #003eff solid;
    border-bottom-width: 0;
    background-color: #007fff;
    color: #ffffff;
}

#btn-site li+li {
    margin-left: 3px;
}


/* ================================================================ */
    /* Pagination */
/* ================================================================ */

#box-pagination.opacity-04 {opacity: 0.4;}


/* ================================================================ */
    /* Messages info et défaut */
/* ================================================================ */

#msg {
    position: fixed; 
    z-index: 31; 
    display: block; 
    top: 500px; 
}

#msg h4 {margin: 0 0 5px 0; text-align: center;}

#msg p {margin: 0 0 5px 0;}

#msg>.defaut>p {margin: 0; padding-top: 5px;}

#msg>.info>p {margin: 0;}

#msg>.defaut {border-color: red; background-color: rgba(255, 181, 51, 0.95); color: black;}

/* ================================================================ */
    /* specifique pour box-ligne de mails */
/* ================================================================ */



/* ================================================================ */
    /* specifique pour box-ligne-ajout */
/* ================================================================ */

#box-ligne-ajout li.liste-doublons>select {background-color: red;}

/* ================================================================ */
    /* Box (ex: pour explorateur) avec titre et croix de fermeture */
/* ================================================================ */


.box-01 {
    border: 2px solid blue; 
    border-radius: 5px; 
    padding: 1rem; 
    background-color: #FFF8DC;
}

.box-01 div.header, .box-01 div.titre-02 {
    height: 20px; 
    line-height: 20px; 
    background-color: #DDDDDD; 
    padding: 0px 5px; 
    font-family: 'Trebuchet MS', sans-serif; 
    font-weight: bold; 
    text-transform: uppercase;
    border-radius: 5px; 
    /*overflow: auto;*/ /* Evite ajout clear: both */
}

/*.box-01 div.header div.cmdCancel, #box-ligne>p.cmdCancel, #box-ligne-ajout>p.cmdCancel {*/
.box-01 div.header div.cmdCancel, aside.box-ligne>p.cmdCancel, #box-ligne-ajout>p.cmdCancel {
    background-color: red; 
    color: white; 
    float: right; 
    cursor: pointer; 
    padding: 0px 5px; 
    border-radius: 5px; 
    font-weight: bold; 
    margin-left: 5px;
}

.box-01 div.header div.cmdCancel:hover, #box-ligne>p.cmdCancel:hover, #box-ligne-ajout>p.cmdCancel:hover {
    background-color: white; 
    color: red;
}

/*#box-ligne>p.cmdCancel, #box-ligne-ajout>p.cmdCancel {*/
aside.box-ligne>p.cmdCancel, #box-ligne-ajout>p.cmdCancel {
    margin-top: 0; 
    margin-bottom: 0;
}

.box-01 div.header>i {
    font-size: 20px; 
    float: right; 
    cursor: pointer; 
    padding: 0px 5px; 
    line-height: 20px; 
    margin-left: 5px;
}


#box-fonctions {
    position: fixed;
    top: 0;
    left: 0;
/*    width: 100%;*/
    z-index: 21;
    background-color: white;
}

#box-connexion{
    position: fixed; 
    top: 200px; 
    z-index: 20;
}


#box-inscription{
    position: fixed; 
    top: 200px; 
    z-index: 20;
}

/* Pour masquer si terminal desk */
/* VOIR SI UTILE */
.masque-desk {display: none !important;}




/* ================================================================ */
    /* Bouton spécifique page + box box-btn-page */
/* ================================================================ */

#box-btn-page {
    /*position: absolute; z-index: 21; */
    position: absolute; z-index: 25; 
    max-width: 1200px;
}

#box-btn-page>.box2>h4, #box-btn-page>.box2>p {
    margin: 6px 0;
}
#box-btn-page>.box1>h4 {
    margin: 6px 20px 6px 0;
}

#btn-page.nav-02>p, #btn-page.nav-02>div>p {
    margin: 0 0; 
    padding-top: 6px; 
}

#btn-page {width: 100%;}

#btn-page>hr, #btn-page>div>hr {
/*    color: blue; 
    height: 2px; 
    background-color: yellow; 
    margin: 6px 0 0px 0;
*/}





/*.box-ligne div.inline-block {
    display: inline-block; 
    vertical-align: top;
}


.box-ligne>div.margin-left-6 {margin-left: 6px;}
*/


/* ================================================================ */
    /* Onglets */
/* ================================================================ */








.onglets .nav li{position: relative; float: left; list-style: none; padding: 0px 5px 5px; margin-right: 5px; border: 1px solid #1175AE; cursor: pointer; 
    background-color: #EEEEEE; 
    z-index: 1; 
}

/*VOIR SI UTILE*/
.onglets ul.nav li.actif{border-bottom: none; font-weight: bold; z-index: 10;}

/*On met en bleu le btn du tableau actif*/
nav.btn-page li.tableau.actif {color: blue;}
nav.btn-page li.tableau {font-weight: bold;}
/*nav.btn-page li.tableau {background-color: green;}*/


.onglets ul.nav {margin-top: 0px;}

.onglets .contenu{
clear: both;
position: relative;
border: 1px solid #0D5995;
z-index: 5;
top: -6px;
}

.onglets .item {padding: 0 5px 5px 5px; min-width: 800px;}


.box-ligne .item div.nav-02>ul>li+li {margin-left: 5px;}

.box-ligne h4 {margin-top: 0px; margin-bottom: 5px;}


/* ================================================================ */
    /* Pour onglets */
/* ================================================================ */


.ligne-verticale
{
    width:5px;
    border-left: 2px solid red;
    /*height:100%;*/
    padding: 0;
}


a.boutonpdf, li.btn-pdf:not(.btn-texte), div.boutonpdf, li.boutonpdf {
    background: url("../img/btn-pdf.jpg") no-repeat;
    display: block;
    /*width: 59px;*/
    height: 52px;
}

li.btn-csv>i {
    font-size: 40px;
}

section.editions>div>ul>li.btn-csv {
    padding-left: 13px;
}

section.editions>div>ul>li {
    width: 100%;
    cursor: pointer;
}

section.editions>div>ul>li.btn-pdf>span, section>div>ul>li.boutonpdf>span {
    margin-left: 60px;
    line-height: 75px;
}

section.editions>div>ul>li.btn-csv>span {
    margin-left: 17px;
}





/* ================================================================ */
    /* Pour infos connexion */
/* ================================================================ */


#box-connexion .container{display: flex; width: 100%; justify-content: center;
    border: 1px blue solid;}

#no-adh {max-width: 50px;}
#niv-adh {max-width: 15px;}
#infos-adh>li {display: inline-block;}
#infos-adh>li.niv-adh {float: right;}

#infos-ecran:not(.masque):not(.masque-01):not(.masque-02):not(.masque-03) {display: flex; flex-direction: column;}

#infos-ecran-02 {max-width: 130px;}
#infos-ecran>li {display: inline-block;}
/*#infos-terminal>li.hauteur-ecran {float: right;}*/

#infos-div-02 {max-width: 130px;}

#infos-connexion .container{margin: auto; padding:  0 10px; max-width: 1200px;}

/* ================================================================ */
    /* Cadre flexbox */
/* ================================================================ */

aside.style-cadre-02:not(.masque):not(.masque-01):not(.masque-02):not(.masque-03) {
    display: flex;
    flex-direction: column;
}

aside.style-cadre-02 {
    background-color: #FFF;
    border: 2px solid blue;
    border-radius: 5px;
    padding: 1rem;
    /*padding: 8px;*/
    margin: 5px;
}

aside.style-cadre-02>div:not(:last-child) {
    margin-bottom: 20px;
}


aside.style-cadre-02>div.header {
    line-height: 20px;
    background-color: #DDDDDD;
    padding: 0px 5px;
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
}

aside.style-cadre-02 div.espace{flex-grow: 1;}

aside.style-cadre-02 div>ul {
    margin: 0;
    padding: 0;
}

aside.style-cadre-02 div>ul>li {
    margin: 0.3rem 0 0 0;
    padding: 0;
    list-style-type: none;
}

aside.style-cadre-02 div>ul>li.input {border-bottom: 1px red solid;}

aside.style-cadre-02 div>ul>li.lien {text-align: center; font-size: 13px; color: #0000ff; cursor: pointer;} /*2276f4*/

aside.style-cadre-02 div>ul>li.ou{text-align: center}

ul>li.btn-02:not(.read-only), div.btn01 {
    padding: 0 1rem;
    border: 1px solid blue;
    line-height: 18px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    color: #0000ff;
}

#box-btn-page div.btn01 {margin-top: 5px;}

#box-btn-page div>div.btn:not(.read-only) {
    background-color: white;
}


ul>li.btn-02.actif:not(.read-only) {color: white; background-color: #0c67f1;}

aside.style-cadre-02 div>ul>li>input{border: none; outline: none;}


aside.style-cadre-02 div>ul>li>input[type=text] {padding: 0; width: 230px;}
aside.style-cadre-02 div>ul>li>input[type=password] {padding: 0; width: 230px;}


/*Croix de fermeture */

aside.style-cadre-02 div.header div.cmdCancel {
    background-color: red;
    color: white;
    float: right;
    cursor: pointer;
    padding: 0px 5px;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 5px;
}




/* ================================================================ */
    /* Spécifique box-filtre */
/* ================================================================ */



/* ================================================================ */
    /* Pour infos inscription */
/* ================================================================ */




div.masque {display: none;}

/* ================================================================ */
    /* Couleurs */
/* ================================================================ */

tr.normal {background-color: white;}

tr.alternate  {background-color: #DDDBCF;}

tr.vert-alternate {background-color: #EAF1CC;}

tr.vert-normal  {background-color: #CAE09C;}

tr.bleu-alternate {background-color: #E7EAF6;}

tr.bleu-normal {background-color: #BAC6E5;}

tr.nbleu-alternate {background-color: #DAEBEB;}

tr.nbleu-normal {background-color: #A5BED2;}

tr.ngris-alternate {background-color: #FBF9FC;}

tr.ngris-normal {background-color: #E7E7E5;}

tr.jaune-alternate {background-color: #FFFBCC;}

tr.jaune-normal {background-color: #FFF687;}




/* =============================================================================================================================== */
    /* Infos selon le type de terminal et l'orientation */
/* =============================================================================================================================== */

/* ================================================================ */
    /* Pour barre en tête de page */
/* ================================================================ */


#flexbox-02>div {border: 3px green solid;}

#info-site-validation {
    background-color: red;
    text-align: center;
    font-weight: bold;
}

div.navbar-header{display: flex; align-items: center;}
div.navbar-header{width: 100%;}   

div.navbar-header>div.nom-site{margin: 0 10px;}

div.navbar-header>div.info-site-validation{margin: 0 10px; padding: 4px 10px; background-color: yellow; color: red;}

header.header div.No3{flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}

/*.navbar-not-logged, .navbar-logged, div.btn-menu-fonctions {display: flex; align-items: center;}*/

.navbar-not-logged>p, .navbar-logged>p, .navbar-header p {margin: 0 4px;}
.navbar-not-logged>p:not(.separateur), .navbar-logged>p:not(.separateur):not(.infos), .navbar-header p {cursor: pointer;}
.navbar-logged>p.infos {background-color: #007fff; color: white; padding: 0 5px;}


    /*$("div.navbar-header").on("click", "p.btn-filtre", function() {*/



#body[data-terminal="1"] div.navbar-header>div.nom-site {background-color: yellow;}
#body[data-terminal="2"] div.navbar-header>div.nom-site {background-color: red;}
#body[data-terminal="3"] div.navbar-header>div.nom-site {background-color: cyan;}



@media (max-width: 1024px) {



}


/* ================================================================ */
    /* Onglet informations */
/* ================================================================ */

#data-onglet-informations {min-width: 650px; vertical-align: top;}

textarea[id$="_Memo"] {min-width: 650px !important; vertical-align: top;}

textarea[id$="_Titre"] {min-width: 650px !important; vertical-align: top;}

textarea[id$="_Descriptif"] {min-width: 650px !important; vertical-align: top;}





/* ================================================================ */
    /* Menu pour mobile */
/* ================================================================ */

#T01 {overflow: auto;}


#box-menu {
    position: fixed;
    top: 0;
    left: 0;
/*    width: 100%;*/
    /*min-height: 200px;*/
    z-index: 21;
    background-color: white;
    /*max-width: 500px;*/
}


#box-menu {border: 3px red solid;}

#box-fonctions {border: 3px green solid;}


#box-menu div.header div.cmdCancel, #box-fonctions div.header div.cmdCancel {background-color: red; color: white; float: right; cursor: pointer; padding: 0px 5px; border-radius: 5px; font-weight: bold; margin-left: 5px; margin-right: 10px;}

#box-menu>ul, #box-fonctions>ul {
    padding-left: 5px;

}

#box-menu>ul>li, #box-fonctions>ul>li {
    line-height: 18px; 
    cursor: pointer; 
    /*vertical-align: middle;*/
    list-style: none;
    /*float: left;*/
    padding: 0.5em 1em 0.2em 1em;
    font-family: Arial;
    font-size: 1.1em;
    color: #454545;
}

#box-fonctions>ul>li.masque-02 {
    display: none;
}

#box-fonctions>ul>li>ul.tableau.actif>li:first-child {
    background-color: #007fff;
    /*color: #ffffff;*/
}

#box-fonctions>ul>li>ul.tableau>li:first-child {font-weight: bold;}






/* POUR MOBILE */


#box-ligne div.contenu section.informations {
    display: flex;
    flex-direction: row;
}





.unselectable {
    user-select: none;
}

/* PROVISOIRE POUR TESTER */


/* Adresses mail par défaut pour connexion */
div.adresses-par-defaut>span {
    display: block;
}