:root{
  --div_user:#ffffff;
  --col_head:#848484;
  --div_menu:#515151;
  --div_news:#ff0000; 
  --div_main:#90ee90;
  --col_foot:#848484;
  --txt_sub:#616161;
  --txt_col0:#000000;
  --txt_col1:#0075fa;
  --txt_col2:#ff0000;
  --txt_col3:#009700;
  --txt_col4:#d04bfc;
  --txt_col_act:#686868;
  --div_menu_ht:#949494;
  --div_menu_hb:#616161;
  --tr_even:#d9d9d9;        /*lightgrey (242,242,242)*/
  --tr_odd:#f2f2f2;       /*very lightgrey (208,208,208)*/
  --col_shadow:#616161;
  --col_shad_stat0:#fffc52;
  --col_shad_stat1:#5c61ff;
  --col_shad_stat2:#5fff77;
  --col_shad_stat3:#f57575;
  --col_shad_stat4:var(--col_shadow);
  --disabled:#808080;
  --licenceClub: #e6ffe6;
  --licenceClubNon: #e6e6e6;
  --licenceOnly: #ffe6ff;
  --obsolete: #ffe6ff;
}
body{
/*  font-family:Calibri,Arial,sans-serif;*/
  font-family:Helvetica,Arial,sans-serif;
  font-size: 0.8rem;
}

button,
input,
select,
textarea {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: inherit;
  padding: 6px;
  padding: 0.428571429rem;
}
button,
input {
  line-height: normal;
  cursor: pointer;
}
.needCtrl,
.esign,
.action,
.valide,
.admin,
.cancel{
  margin:3px;
  box-shadow: 3px 3px 3px #9c9c9c;
  -webkit-box-shadow: 3px 3px 3px #9c9c9c;
  -moz-box-shadow: 3px 3px 3px #9c9c9c;
  -o-box-shadow: 3px 3px 3px #9c9c9c;
}
.needCtrl{color:var(--disabled);}
textarea {
  overflow: auto;
  vertical-align: top;
}
/* button */
.btnLink{
  border: none;
  background: none;
  font-style: italic;
  color:var(--txt_col1);
  text-decoration: underline;
  -webkit-text-decoration: underline;
}
.btnMenuFake,
.btnSubMenu,
.btnMenu{
  margin: 0px 10px;
  height: 50px;
  border: none;
  background: linear-gradient(var(--col_head),var(--div_menu));
  font-size: large;
  color:var(--div_user);
}
.btnMenuFake{
  cursor:auto;
}
.btnSubMenu{
  height:auto;
  width:fit-content ;
  color:#cccccc;
  background:#efefef ;
  text-align: left;
  width:200% ;
}
input.btnMenu:hover{background: linear-gradient(#c9c9c9,#414141);}
input.btnSubMenu:hover{color:#444444;background: #e3e3e3;}
input.valide:hover:enabled{color:green;background:lightgreen;}
input.cancel:hover{color:red;background:pink;}
input.action:hover:enabled{color:blue;background:lightskyblue;}
input.admin:hover{color:white;background: black;}
input.esign:hover{color:black;background: yellow;}

.hrefLien{
  font-size: 0.785714286rem;
}
/* Menu */
#menu1, #menu1 ul{
  padding:0;
  margin:0;
  list-style:none;
  }
#menu1 li{
  display:inline-block;
  position:relative;
  }  
#menu1 ul li{
  display:inherit;
  border-radius:0;
  }
#menu1 ul li:hover{
  border-radius:0;
  }
#menu1 ul{
  position:absolute;
  z-index: 1000;
  max-height:0;
  left: 0;
  right: 0;
  overflow:hidden;
  }
#menu1 li:hover ul{
  max-height:fit-content ;
  width:fit-content;
  }
/* div */        
div#primary{
  padding:20px;
}
div#user{
  float: right;
  width:300px;
  height: 100px;
  background-color: var(--div_user);
  color:var(--txt_col1);
  border: 1px solid var(--col_head);
  border-radius:0px 10px 0px 0px;
  padding:5px;
} 
div#header{
/*  clear:both;*/
  width:100%;
/*  height: 250px;*/
  background-color: var(--col_head);
  border-radius: 10px 10px 0px 0px;
} 
div#menu{
    width:100%;
    min-height:50px;
    height:auto;
    background: linear-gradient(var(--col_head),var(--div_menu)) ;
    color:white;
    vertical-align: middle;
    box-shadow: 0px 5px 5px #9c9c9c;
    -webkit-box-shadow: 0px 5px 5px #9c9c9c;
    -moz-box-shadow: 0px 5px 5px #9c9c9c;
    -o-box-shadow: 0px 5px 5px #9c9c9c;

    border-radius: 0px 0px 10px 10px;
    margin-bottom:10px;
}
div#news{
    float: right;
    width:20%;
    font-weight: bold;
  /*  background-color: var(--div_news);*/
}
div#main{
  width:75%;
  background-color: var(--div_user);
}
div#footer{
    width:100%;
    height:40px;
    margin-top: 10px;
    clear:both;
    background:white;
    border-top:1px solid var(--col_foot);
    color:var(--txt_col1);
    font-style: italic;
    vertical-align: sub;
}
#gototop{
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  font-weight: bold;
  height: 30px;
  width:30px; 
  text-align: center;
  vertical-align: middle;
  border: none;
  outline: none;
  background-color: black;
  color: white;
  cursor: pointer;
  padding:0px 0px 2px;
  border-radius: 30px;
  box-shadow: 3px 3px 3px var(--col_shadow);
  -webkit-box-shadow: 3px 3px 3px var(--col_shadow);
  -moz-box-shadow: 3px 3px 3px var(--col_shadow);
  -o-box-shadow: 3px 3px 3px var(--col_shadow);
}
#gototop:hover {
  background-color: blue;
}

.connectUser{
  font-size: 0.785714286rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--txt_sub);/*#636363;*/
}
table#connectUser th{
  color: var(--col_head);
}
table#connectUser td{
/*  border:1px solid black;*/
  font-style: italic;
  color:var(--txt_col1);
}
.txtSub{
  color: var(--txt_sub);
}
.avatar{
  width: 70px;
  height: 85px;
  border-radius: 5px;
  border: 1px solid black;
}
.headerTitle{
  font-size: xx-large;
  text-shadow: 2px 2px #000000;
  color:white;
  text-align:center;
  vertical-align: middle;
}
.newsAct{
  font-weight: bold;
  color:var(--txt_col_act);
  padding-bottom: 10px;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: absolute; /* fixed Stay in place */
  z-index: 10; /* 0 Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full height */ 
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(255,255,255); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
/*  border:1px solid;*/
}
.modalclose {
  color: #9c9c9c;
  text-align: center;
  float: right;
  width: 25px;
  text-decoration: none;
  -webkit-text-decoration: none;
  font-weight: bold;
}
.modalclose:hover { color: #ff0000; }

/* Modal Content */
.modaltitre,.modalcontent,.modalbottom,
.modalmessage,.modalErreur{
  background-color: #fff;
  margin: auto;
  padding: 10px;
  width: 500px;
}
.modaltitre {
/*  font-weight: bold;*/
  border-radius: 10px 10px 0px 0px;
  text-align: center;
}
.modalcontent {
/*  border-top:1px solid lightgrey;*/
  color:var(--txt_col0);
}
.modalbottom{
/*  border-top:1px solid lightgrey;*/
  border-radius: 0px 0px 10px 10px;
}
.modalmessage{
  text-align: center;
  border-radius: 0px 0px 10px 10px;
}
.modalerror{
  color:red;
}
.modalsucces{
  color:green;
}
.modalErreur{
  background-color: #ff0000;
}
table.tabFormLarge {
  width:80% ;
  padding:5px;
  text-align: left;
}
.tabOddEven th {
  /*color:var(--txt_col1);*/
  background-color:window;
}
.tabOddEven tr:nth-child(odd){color:black;background-color:var(--tr_odd);}
.tabOddEven tr:nth-child(even){color:black;background-color:var(--tr_even);}
.tabOddEven td {padding:5px;}
.thRequis{
  color: var(--txt_col2);
}
.C_action{
  color: var(--txt_col2);
}
.M_action{
  color: var(--txt_col1);
}
.MessageAccueil{
  margin:0 auto;
  width:50%;
  border-top: 1px lightgrey solid;
  border-left: 1px lightgrey solid;
  border-radius: 5px;
  box-shadow: 6px 6px 6px grey;
  -webkit-box-shadow: 6px 6px 6px grey;
  -moz-box-shadow: 6px 6px 6px grey;
	-o-box-shadow: 6px 6px 6px grey;
  background-image: url("images/fond-papier.jpg");
}
.MessageAccueilTitre{
  font-family:'Brush Script MT',cursive;
  font-size:2em;
  font-weight:bold;
  font-style:italic;
  text-align:center;
  }
.MessageAccueilTexte{
  font-weight:bold;
  text-align:center;
  }
.messagePaiements{
  text-align: center;
  font-size: 85%;
  color: var(--txt_col1);
}
.tableAvecOmbre,  
.tableAdherents,
.tableArticles,
.cptRebours{
  font-size: 0.8rem;
  margin:6px 6px;
  border: 1px solid var(--col_foot);
  border-radius: 5px;
  padding: 10px;
  box-shadow: 6px 6px 6px var(--col_shadow);
  -webkit-box-shadow: 6px 6px 6px var(--col_shadow);
  -moz-box-shadow: 6px 6px 6px var(--col_shadow);
  -o-box-shadow: 6px 6px 6px var(--col_shadow);
}
.statut0{
  box-shadow: 6px 6px 6px var(--col_shad_stat0);
  -webkit-box-shadow: 6px 6px 6px var(--col_shad_stat0);
  -moz-box-shadow: 6px 6px 6px var(--col_shad_stat0);
  -o-box-shadow: 6px 6px 6px var(--col_shad_stat0);
}
.statut1{
  box-shadow: 6px 6px 6px var(--col_shad_stat1);
  -webkit-box-shadow: 6px 6px 6px var(--col_shad_stat1);
  -moz-box-shadow: 6px 6px 6px var(--col_shad_stat1);
  -o-box-shadow: 6px 6px 6px var(--col_shad_stat1);
}
.statut2{
  box-shadow: 6px 6px 6px var(--col_shad_stat2);
  -webkit-box-shadow: 6px 6px 6px var(--col_shad_stat2);
  -moz-box-shadow: 6px 6px 6px var(--col_shad_stat2);
  -o-box-shadow: 6px 6px 6px var(--col_shad_stat2);
}
.statut3{
  box-shadow: 6px 6px 6px var(--col_shad_stat3);
  -webkit-box-shadow: 6px 6px 6px var(--col_shad_stat3);
  -moz-box-shadow: 6px 6px 6px var(--col_shad_stat3);
  -o-box-shadow: 6px 6px 6px var(--col_shad_stat3);
}
.statut4{
  box-shadow: 6px 6px 6px var(--col_shad_stat4);
  -webkit-box-shadow: 6px 6px 6px var(--col_shad_stat4);
  -moz-box-shadow: 6px 6px 6px var(--col_shad_stat4);
  -o-box-shadow: 6px 6px 6px var(--col_shad_stat4);
}
.dateFin{
  color:var(--col_head);
  font-size: 75%;
}
.cptReboursTag{
  width:10px;
  color:var(--col_head);
  font-size: 60%;
  transform: rotate(180deg);
  writing-mode: vertical-lr;
  text-align: center;
}
.cptReboursVal{
  width:20px;
  border:2px solid var(--col_head);
  font-size: 150%;
  font-weight: bold;
}
.cptReboursLink{
  font-size: 80%;
}
.cptReboursFoot{
  border-bottom:1px solid var(--col_foot);
 /* margin-top: 20px;
  padding-top: 3px;*/
}
.cptReboursCloses{
  color:red;
  font-style: italic;
}
.tableAdherents{
  border-collapse: separate;
  border-spacing: 8px;
}/**/
.tableAdherents td{
  width:240px;
  padding: 5px;
  text-align: center;
}
.ficheT{
  font-size: 0.8rem;
  border: 1px solid var(--col_foot);
  border-radius: 5px;
  /*box-shadow: 6px 6px 6px var(--col_shadow);
  -webkit-box-shadow: 6px 6px 6px var(--col_shadow);
  -moz-box-shadow: 6px 6px 6px var(--col_shadow);
  -o-box-shadow: 6px 6px 6px var(--col_shadow);*/
}
.ficheT td{
  border: none;
}
.nomAdh{
  font-weight: bold;
}
.adhStatus{
  font-size: 80%;
}
.barre{
  margin: 0 auto;
  font-size: 0.75rem;
  padding:3px;
  text-align:center;
}
/*fiches adhérents  */
.non-inscrit{
  font-style:italic;
  font-weight:normal;
  text-decoration:line-through grey;
  -webkit-text-decoration:line-through grey;
}
.adherent,
.inscription_en_cours,
.licence,
.passager,
.complet{
  font-style:normal;
  font-weight:bold;
}
.inscription_en_cours{
  text-decoration:underline wavy;
  -webkit-text-decoration:underline wavy;
}
.licence{
  text-decoration:underline overline double;
  -webkit-text-decoration:underline overline double;
}
.passager{
  text-decoration:underline;
  -webkit-text-decoration:underline;
}
.convention{
  text-decoration: underline dotted;
  -webkit-text-decoration: underline dotted;
}
.licenceClub{
  background-color: var(--licenceClub);
}
.licenceClubNon{
  background-color: var(--licenceClubNon);
}
.licenceOnly{
  background-color: var(--licenceOnly);
}
.obsolete{
  background-color: var(--obsolete);
}
.caciOK{
  color:black;
}
.caciOut{
  color:white;
  background-color: red;
}
.caciUnMois{
  color:white;
  background-color: blue;
}
.photo {
  display:block;
  border:1px solid black;
  width:80px;
  height: 90px;
  margin:0px auto;
  position:relative;
  z-index:1;
  border-collapse: collapse;
}
.vignette {
  display:block;
  border:1px solid black;
  height: 80px;
  margin:0px auto;
  position:relative;
  z-index:1;
  border-collapse: collapse;
  background-color: inherit;
}

.menuPage,
.menuPageAdherents{
  font-size: 0.785714286rem;
}
.menuSectionTop{
  border-top:1px solid var(--col_foot);
  text-align: center;
}
/* tabs */
.tabs {
  font-family: 'Lucida Sans', sans-serif;
  font-size: 14px;
}

.tabs .tab-registers {
  display: flex;
  background-color: RGB(255, 255, 255);
}

.tabs button {
  padding: 0.5em;
  background-color: RGB(255, 255, 255);
  border:  1px solid var(--col_foot);
  border-bottom: none;
  font: inherit;
  margin-right: 0.5em;
  border-radius: 3px 3px 0 0;
}

.tabs .tab-registers button:hover {
  cursor: pointer;
  color:var(--coul_1);background:rgb(183, 227, 254);
}

.tabs .tab-bodies {
  padding: 0.5em;
  background-color: RGB(255, 255, 255);
  flex-grow: 1;
  overflow-y: auto;
/*    border: 0.1px solid var(--coul_1); */
}

.tabs button.active_tab {
color:var(--coul_1);background:lightskyblue;
}
.tr_visible{
  background-color: #ffffff;
  display: block;
}
.tr_nonvisible{
  background-color: #ffffff;
  display: none;
}
.coDirEchu{
  color: var(--txt_col2);
  font-weight: bold;
}
.titreArticle{
  height: 50px;
  font-size: x-large;
}
.texteArticle{
  height: 40px;

}
.exMoniteur{
  font-style: italic;
  color: var(--disabled);
}
.th_paiement{
  font-weight: bold;
  color: var(--txt_col1);
}
.adh_small_paiement{
  font-size: 75%;
}
.paiement_echu,
.facture{
  color: var(--txt_col1);
}
.paiement_depasse{
  color: var(--txt_col2);
  font-weight: bold;
}
.paiement_valide,
.solde{
  color: var(--txt_col3);
}
.nonActif,
.activiteCloture{
  color: var(--disabled);
  font-style: italic;
}
.benefice{
  color: var(--txt_col3);
}
.deficit{
  color: var(--txt_col2);
}
.colClub{
  color: var(--txt_col4);
}
.bilan{
  text-align: right;
}
.prestNA{
  display: none;
}
.prestOrigine{
  color: var(--txt_col3);
}
.prestSpecifique
{
  font-weight: bold;
  color: var(--txt_col2);
}
.prestMod{
  font-style: italic;
  text-decoration: underline;
}
.pwdToggle-Vis_dis{
  width: 20px;
  height: 20px;
  background-image: url('images/pwdVis_dis.jpg');
  background-size: cover;
  border: none;
}.pwdToggle-Vis{
  width: 20px;
  height: 20px;
  background-image: url('images/pwdVis.jpg');
  background-size: cover;
  border: none;
}.pwdToggle-Pwd_dis{
  width: 20px;
  height: 20px;
  background-image: url('images/pwdPwd_dis.jpg');
  background-size: cover;
  border: none;
}.pwdToggle-Pwd{
  width: 20px;
  height: 20px;
  background-image: url('images/pwdPwd.jpg');
  background-size: cover;
  border: none;
}