body
{
    /*background-color : #b9eaa3;*/
    background-color:lightskyblue;
    font-family : arial, serif;
    font-size : 15px;
    width : 850px;
    margin-left: 100px;
}
header{position: relative;}
nav{position: relative; z-index: 9;}
main{position: absolute; z-index: 1;}

.ligneListe:nth-child(even){background-color: #a1f0f1}
.ligneListe:nth-child(odd){background-color:whitesmoke }

fieldset{
    border : 2px solid black;
    border-bottom-style:  groove;
    border-color:  #3111c4;
    padding: 10px;
    background-color :  #96adfa;
    line-height : 1.5em;
    margin-top : 30px;
}
legend{
    background-color : white;
    border : 1px solid black;
    padding :   5px ;
    font-size: 1.2em;
    font-weight: bold     
}

/* formulaire*/
.formulaire, form{
    border : 1px solid black;
    padding: 15px;
    background-color : #a1f0f1;
    line-height : 1.5em;
    margin-top : 10px;
}
.formulaire .rouge {color : red; font-style : italic;}
.formulaire .libelle { width : 100px; text-align : left; padding-right : 13px;}
.formulaire .valeur { padding-right : 3px;}
.formulaire .nombre, .formulaire .montant {text-align: right;width : 80px;}
.formulaire .nocompte {width : 60px;}
.formulaire .titre{
    font-size: 1.3em;
    font-weight: bold;
    background-color: aqua;
    text-align: center;
}
.formulaire .datemvt{width : 80px;}

#erreur{
	width : 300px;
        text-align: left;
        font-size: 0.8em;
	font-weight:bold;
        color: palevioletred;
}

/********************* boutons **********************/
input[type=button], input[type=submit], input[type=reset], button, .button {
    margin: 3px 4px;
    display: inline-block;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    background: #4095ff;
    background: linear-gradient(top, #4095ff 0%, #277ce6 100%);
    border: 2px solid #338bf6;
    border-radius: 5px;
    box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.50);
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .button:hover {
    background: linear-gradient(top, #5aafff 0%, #4095ff 100%);
}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active, button:active, .button:active{
    opacity:0.8;
}

/*********** entête ********/
.entete{
    width : 850px;
    height : auto;
    color : #451e00;
    margin-top : -40px;
}
.entete .titre {font-size : 3em; text-align : center;}
.entete .bienvenue{
    font-size:1.2em; 
    display: flex;
    flex-direction: row;
    justify-content:  space-around;
    background-color: #d7cf8f;
}
.entete .mois{font-weight: bold;}
.entete .datejour, .entete .util {font-style: italic; font-size: 0.9em;padding-top: 3px;}

/***** Menu ***********/
nav{
    background-color: #244302;
    font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px; /* hauteur du texte : 12 pixels */
    width : 850px;
    height : 30px;
}
#menuDeroulant{
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
#menuDeroulant li{
    float: left;
    width: 110px;
    margin: 0;
    padding: 2px;
    border: 2px solid transparent;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited{
    display: block;
    height: 1%;
    color: #FFF;
    background: #3B4E77;
    margin: 0;
    padding: 4px 8px;
    border-right: 1px solid #fff;
    text-decoration: none;
}
#menuDeroulant li a:hover, .sousMenu li a:hover{ background-color: white;color: #3B4E77 }
#menuDeroulant li a:active { background-color: white;color: #3B4E77; }

#menuDeroulant .sousMenu{
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
#menuDeroulant .sousMenu li{
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 149px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited{
    display: block;
    color: #FFF;
    margin: 0;
    border: 0;
    text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover,#menuDeroulant .sousMenu li ul li a:hover{
    background-image: none;
    background-color: #3B4E77;
}
#menuDeroulant li:hover > .sousMenu { display: block; }


#message{
	height : 200px;
	width : 300px;
	position : absolute; left : 400px; top : 350px;
	border : 2px solid black;
	color : red;
	font-size : 12px;
	text-align : center;
}

.fini
{
	margin : 10px;
	color : green;
	font-weight : bold;
}

.choix_cpte,  .creer_compte{width : 300px;}

.choix_dep_rec, .choix_facture{
	width : 850px;
	border : 2px solid black;
	margin-bottom : 20px;
	padding-left: 15px;
	background-color : #a1f0f1;
	line-height : 1.5em;
	margin-top : 100px;
}


/*liste des mouvements compte*/
#listeMvt{
    width: 750px;
    font-size : 0.8em;
    line-height :0.8em;
}
#listeMvt .titre{
    text-align : center;
    font-size : 1.2em;
    font-weight : bold;
    width :530px;
    height : 25px;
    margin-left : 50px;
    margin-top : -40px;
    padding-top : 10px;
}
#listeMvt .ligneListe {padding-top : -10px}
.nomvt{width : 2em;text-align : center;padding : 0.3em;}
.datemvt{width : 7em;text-align: center;}
.nocompte {width : 50px; text-align : left; padding-left : 0.5em;}
.saisienocompte{width : 150px;}
.libelle{width : 20em;padding-left: 0.5em;}
.montant{text-align : right;width : 7em;padding-right : 0.5em;}

/* fourmulaire dpenses recettes *************/
#dep_rec{
    width: 800px;
    font-size : 0.8em;
    line-height :0.8em;
}
#dep_rec .titre{
    background-color : white;
    text-align : center;
    font-size : 1.2em;
    font-weight : bold;
    height : 25px;
    border : 1px solid black;
    margin-left : 50px;
    margin-top : -40px;
    padding-top : 10px;
}
#dep_rec .datemvt{
	width : 50px;
	text-align: center;
}
#dep_rec .nocompte {width : 100px; text-align : left; padding-left : 0.5em;}
#dep_rec .libelle{width : 50px;padding-left: 0.5em;}
#dep_rec  .montant{text-align : right;width : 50px;padding-right : 0.5em;}
#dep_rec .nopiece{text-align : right;width : 15px;padding-right : 0.5em;}


/****balance****/
.datearret{margin-top : 20px;}
.baltitrecol{background-color:#b9eaa3; }

#balance{
    width: 50em;
    padding: 2px 2px 2px 2px;
}
.baltitre{font-size : 1.7em; font-weight : bold; text-align : center;}
.balnocompte {width : 6em; text-align : left; padding-left : 0.5em;}
.ballibelle{width : 35em;padding-left: 0.5em;}
.balmontant{text-align : right;width : 7em;padding-right : 0.5em;}
.baltotal{font-weight : bold;background-color: #b9eaa3;}

/*****Charges mois **********/
#chargesMois{font-size: 0.8em;}
#chargesMois .baltotal{font-size: 1em;}
#chargesMois .balmontant{width: 6em;}
#chargesMois .ballibelle{width: 20em;}

/** releve  ***/
#majReleve{
    font-size: 0.8em;
    margin-top: 20px;
    height: 700px;
    overflow-y: scroll;
    line-height: 1em;
}
#majReleve .relligne:nth-child(even){background-color: #a1f0f1}
#majReleve .relligne:nth-child(odd){background-color:whitesmoke }
#majReleve img{width: 25px;}
#majReleve .libelle{width: 400px;}
#majReleve .noCompte{width: 200px;}

/******************************provisions**********************/
#tabprov, #abon{
    font-size : 0.8em;
    margin : 30px 30px 30px 30px;
    padding: 2px 2px 2px 2px;
    width: 500px;
}
#tabprov .titre{text-align:center;}
#tabprov .provmtAS ,#tabprov .provmtNS,#tabprov .abonne,#tabprov .totAbonne,#tabprov .totprovAS, #tabprov .totprovNS, #tabprov .totMtMvt,#tabprov .mtmvt, #abon .mtabon{
    text-align : right;
    width:60px;
    border : none;
}
#tabprov .totprovNS, #tabprov .totprovAS, #tabprov .totAbonne ,#tabprov .totMtMvt {font-weight:bold}
#tabprov .nocpte, #abon .nocpte {width:35px; text-align:center; border: none;}

/**************** factures ****************/
#listeFactures{
    height: 35em;
    overflow-y: scroll;
    font-size : 0.8em;
    float: left; 
    line-height: 1.2em;
}

/**************** journal *****************/
#journal{
    height: 53em;
    overflow-y: scroll;
    font-size : 0.8em;
}
#journal .montant{
    width: 5em;
    text-align: right;
    padding-right: 3px;
}
#journal .libelle{
    width: 25em;
}
#journal .nomvt{
    text-align: center;
}
#journal .nopiece{
    text-align: center;
}
#journal .datemvt{
    width: 8em;
    text-align: center;
}
/***************** scroll **********/
.cRetour {
  border-radius:3px;
  padding:10px;
  font-size:15px;
  text-align:center;
  color:#fff;
  background:rgba(0, 0, 0, 0.25);
  z-index:99999;
  transition:all ease-in 0.2s;
  position: absolute;
  cursor: pointer;
  bottom: 1em;
  right: 20px;
 display: none; 
}
.cRetour:before{ content: "\25b2"; }
.cRetour:hover{
  background:rgba(0, 0, 0, 1);
  transition:all ease-in 0.2s;
}

#recherche
{
	width : 750px;
	border : 2px solid black;
	margin-bottom : 20px;
	padding-left: 15px;
	background-color : #a1f0f1;
	line-height : 1.5em;
	margin-top : 100px;
}

#recherche .col {width : 250px;}