@import url("../css/anim.css");
 a{
outline: 0;

}
 /* Full-width input fields */


/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn1 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer1 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container1 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal1 {

         
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  

    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content1{
    background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


  .container_modal_parametre i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer1 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close1 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close1:hover,
.close1:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content1{

  width: 80%;
}


}

/*--------------end modal compte principal---------->*/




/*--------------modal save sous compte---------->*/
.cancelbtn2 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer2 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container2 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal2 {

         
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  

    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content2{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


  .container_modal_parametre i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer2 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close2 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close2:hover,
.close2:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content2{

  width: 80%;
}


}
/*--------------end modal save sous compte---------->*/





/*--------------modal save fournisseur---------->*/
.cancelbtn3 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer3 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container3 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal3 {

         
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  

    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content3{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


  .container_modal_parametre i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer3 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close3 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close3:hover,
.close3:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content3{

  width: 80%;
}


}
/*--------------end modal save fournisseur---------->*/



/*--------------modal set products---------->*/
.cancelbtn4 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer4 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container4 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal4 {

         
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  

    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;




  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content4{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_modal_parametre i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer4 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close4 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close4:hover,
.close4:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content4{

  width: 80%;
}


}
/*--------------end modal set products---------->*/


/*--------------modal set montant total encaissement---------->*/
.cancelbtn5 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content5{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_modal_montant_encaissement i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5:hover,
.close5:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5{

  width: 80%;
}


}
/*--------------end modal set montant total encaissement---------->*/



/*--------------modal afficher liste de compte---------->*/
.cancelbtn5_1 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_1 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_1 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_1 {

 

-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




    /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_1{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 80%; /* Could be more or less, depending on screen size */
     height:auto;
    padding: 20px;


  border-radius:7px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_1 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_1 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}

/* The Close Button (x) */
.close5_1 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_1:hover,
.close5_1:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }

}

@media (max-width:400px) {

.modal-content5_1{

  width: 80%;
}


}
/*--------------end afficher liste de compte---------->*/


/*--------------modal afficher journal encaissement---------->*/
.cancelbtn5_2 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_2 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_2 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_2 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_2{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
     height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_2 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_2 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_2 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_2:hover,
.close5_2:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_2{

  width: 80%;
}


}
/*--------------end modal afficher journal encaissement---------->*/



/*--------------modal set montant total decaissement---------->*/
.cancelbtn5_3 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_3 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_3 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_3 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content5_3{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_modal_montant_decaissement i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_3 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_3 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_3:hover,
.close5_3:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_3{

  width: 80%;
}


}
/*--------------end modal set montant total DECAISSEMENT---------->*/




/*--------------modal afficher journal decaissement---------->*/
.cancelbtn5_4 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_4 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_4 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_4 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_4{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
     height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_4 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_4 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_4 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_4:hover,
.close5_4:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_4{

  width: 80%;
}


}
/*--------------end modal afficher journal decaissement---------->*/





/*--------------modal set montant total debit opdiv---------->*/
.cancelbtn5_5 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_5 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_5 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_5 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content5_5{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_modal_montant_debit_opdiv i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_5 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_5 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_5:hover,
.close5_5:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_5{

  width: 80%;
}


}
/*--------------end modal set montant total debit opdiv---------->*/





/*--------------modal set montant total credit opdiv---------->*/
.cancelbtn5_6 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_6 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_6 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_6 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content5_6{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_modal_montant_credit_opdiv i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_6 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_6 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_6:hover,
.close5_6:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_6{

  width: 80%;
}


}
/*--------------end modal set montant credit opdiv---------->*/



/*--------------modal afficher journal operation diverse---------->*/
.cancelbtn5_7 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_7 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_7 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_7 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_7{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
     height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_7 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_7 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_7 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_7:hover,
.close5_7:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_7{

  width: 80%;
}


}
/*--------------end modal afficher journal opdiv---------->*/





/*--------------modal afficher journal centralisateur---------->*/
.cancelbtn5_8 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_8 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_8 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_8 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_8{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
     height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_8 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_8 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_8 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_8:hover,
.close5_8:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_8{

  width: 80%;
}


}
/*--------------end modal afficher journal centra---------->*/






/*--------------modal afficher journal grand livre---------->*/
.cancelbtn5_9 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_9 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_9 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_9 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_9{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
     height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_9 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_9 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_9 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_9:hover,
.close5_9:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_9{

  width: 80%;
}


}
/*--------------end modal afficher journal grdl---------->*/


/*--------------modal etat grabd livre par compte--------->*/

.cancelbtn5_99 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_99 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_99 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_99 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_99{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  
z-index: 100;
  
  }


.modal-content5_99 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_99 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_99 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_99:hover,
.close5_99:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_99{

  width: 80%;
}


}
/*--------------end modal grand livre par compte---------->*/


/*--------------modal save sous compte---------->*/
.cancelbtn5_10 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_10 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_10 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

  .modal5_10 {

  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  

    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content5_10{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 700px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }

  .save_client_left{


    width: 300px;

    height: 0 auto;

    display: inline-block;

margin:20px;
  }

    .save_client_right{

width: 150px;

    height: 0 auto;

    float: right;


  }



  .container_modal_parametre i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_10 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_10 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_10:hover,
.close5_10:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_10{

  width: 80%;
}


}
/*--------------end modal save client---------->*/



/*--------------modal afficher liste de client---------->*/

.cancelbtn5_11 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_11 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_11 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_11 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_11{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 950px; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_11 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_11 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_11 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_11:hover,
.close5_11:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_11{

  width: 80%;
}


}
/*--------------end modal afficher liste de client---------->*/







/*--------------modal afficher etat client---------->*/

.cancelbtn5_12 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_12 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_12 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_12 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_12{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_12 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_12 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_12 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_12:hover,
.close5_12:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_12{

  width: 80%;
}


}
/*--------------end modal afficher etat client---------->*/





/*--------------modal mvt client---------->*/

.cancelbtn5_13 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_13 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_13 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_13 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_13{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_13 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_13 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_13 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_13:hover,
.close5_13:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_13{

  width: 80%;
}


}
/*--------------end modal mvt client---------->*/





/*--------------modal etat creancier general---------->*/

.cancelbtn5_14 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_14 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_14 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_14 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_14{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  
z-index: 100;
  
  }


.modal-content5_14 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_14 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_14 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_14:hover,
.close5_14:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_14{

  width: 80%;
}


}
/*--------------end modal etat creancier genere---------->*/




/*--------------modal etat creancier par client---------->*/

.cancelbtn5_144 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_144 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_144 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_144 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_144{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  
z-index: 100;
  
  }


.modal-content5_144 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_144 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_144 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_144:hover,
.close5_144:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_144{

  width: 80%;
}


}
/*--------------end modal etat creancier par client---------->*/




/*--------------modal searc paie bus par eleve---------->*/

.cancelbtn5_1444 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_1444 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_1444 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_1444 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_1444{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  
z-index: 100;
  
  }


.modal-content5_1444 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_1444 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_1444 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_1444:hover,
.close5_1444:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_1444{

  width: 80%;
}


}
/*--------------end modal searc paie bus par eleve---------->*/








/*--------------modal searc paie bus par eleve/mois---------->*/

.cancelbtn5_14444 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_14444 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_14444 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_14444 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_14444{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  
z-index: 100;
  
  }


.modal-content5_14444 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_14444 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_14444 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_14444:hover,
.close5_14444:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_14444{

  width: 80%;
}


}
/*--------------end modal searc paie bus par eleve/mois---------->*/






/*--------------modal afficher edit compte---------->*/

.cancelbtn5_15 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_15 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_15 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_15 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


  /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_15{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 700px; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_15 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_15 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_15 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_15:hover,
.close5_15:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_15{

  width: 80%;
}


}
/*--------------end modal afficher edit compte---------->*/



/*--------------modal afficher balance de verifiaction---------->*/
.cancelbtn5_16{
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_16{
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_16 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_16 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_16{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  
z-index: 100;
  
  }


.modal-content5_16 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_16 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_16 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_16:hover,
.close5_16:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_16{

  width: 80%;
}


}
/*--------------end modal afficher journal balance de verifiaction---------->*/




/*--------------modal afficher edit journal encaissement---------->*/

.cancelbtn5_17 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_17 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_17 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_17 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_17{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 700px; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_17 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_17 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_17 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_17:hover,
.close5_17:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_17{

  width: 80%;
}


}
/*--------------end modal afficher eddit journal encaiisement---------->*/







/*--------------modal afficher edit journal decaissement---------->*/

.cancelbtn5_18 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_18 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_18 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_18 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_18{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 700px; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_18 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_18 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_18 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_18:hover,
.close5_18:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_18{

  width: 80%;
}


}
/*--------------end modal afficher eddit journal decaissemnt---------->*/





/*--------------modal afficher edit journal opdiv---------->*/

.cancelbtn5_19 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_19 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_19 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_19 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_19{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 700px; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_19 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_19 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_19 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_19:hover,
.close5_19:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_19{

  width: 80%;
}


}
/*--------------end modal afficher eddit journal opdiv---------->*/






/*--------------modal afficher edit client debit---------->*/

.cancelbtn5_20 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_20 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_20 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_20 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_20{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 700px; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content5_20 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_20 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_20 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_20:hover,
.close5_20:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_20{

  width: 80%;
}


}
/*--------------end modal afficher eddit client debit---------->*/


/*--------------modal afficher bilan initial---------->*/
.cancelbtn5_21{
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_21{
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_21 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal5_21 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;




     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
   /*  background-color: rgb(0,0,0); /* Fallback color */
   /*  background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_21{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  
z-index: 100;
  
  }


.modal-content5_21 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_21 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_21 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_21:hover,
.close5_21:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_21{

  width: 80%;
}


}
/*--------------end modal afficher journal bilan initial---------->*/



/*--------------modal afficher livre de caisse---------->*/
.cancelbtn5_22{
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_22{
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_22 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal5_22 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_22{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  
z-index: 100;
  
  }


.modal-content5_22 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_22 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_22 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_22:hover,
.close5_22:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_22{

  width: 80%;
}


}
/*--------------end modal afficher livre de caisse---------->*/





/*--------------modal afficher bilan en cours---------->*/

.cancelbtn5_23{
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_23{
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_23 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal5_23 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_23{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  
z-index: 100;
  
  }


.modal-content5_23 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_22 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_23 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_23:hover,
.close5_23:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_23{

  width: 80%;
}


}
/*--------------end modal afficher bilan en cour---------->*/





/*--------------modal afficher tfr---------->*/

.cancelbtn5_24{
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer5_24{
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container5_24 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal5_24 {

 
-webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


     /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



@-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 



  }


/* Modal /Box */
.modal-content5_24{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:auto;
    padding: 20px;

overflow: auto;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  
z-index: 100;
  
  }


.modal-content5_24 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer5_24 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close5_24 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close5_24:hover,
.close5_24:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content5_24{

  width: 80%;
}


}
/*--------------end modal afficher modal tfr---------->*/





/*--------------modal SET client---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn6 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer6 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer6 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container6 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal6 {

         
   
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
  


 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* black w/ opacity */
    padding-top:45px;
    z-index: 10;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }


/* Modal /Box */
.modal-content6{
    background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:400px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;

  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px 0px 10px 10px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);

 font-family:times;
  
  }

/* The Close Button (x) */
.close6 {
    position: absolute;
    right: -10px;
    top:-27px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close6:hover,
.close6:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal SET CLIENT---------->*/




/*--------------modal SET client picture---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn7 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer7 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer7 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container7 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal7 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* black w/ opacity */
    padding-top:45px;
    z-index: 10;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }


/* Modal /Box */
.modal-content7{
    background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;

  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px 0px 10px 10px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close7 {
    position: absolute;
    right: -10px;
    top:-27px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close7:hover,
.close7:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal SET CLIENT picture---------->*/




/*--------------modal afficher facture---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn8 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer8 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer8 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container8 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal8 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* black w/ opacity */
    padding-top:5px;
    z-index: 10;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }


/* Modal /Box */
.modal-content8{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:500px; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close8 {
    position: absolute;
    right: -10px;
    top:-27px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close8:hover,
.close8:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher ---------facture->*/





/* modal rapport */

.cancelbtn9 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer9 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer9 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container9 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal9 {

         
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  


 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* black w/ opacity */
    padding-top:45px;
    z-index: 10;

  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content9{
    background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;

  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px 0px 10px 10px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close9 {
    position: absolute;
    right: -10px;
    top:-27px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close9:hover,
.close9:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

/*--------------end modal rapports---------->*/



/*--------------modal afficher view facture---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn10 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer10 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer10 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container10 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal10 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* black w/ opacity */
    padding-top:5px;
    z-index: 100;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }


/* Modal /Box */
.modal-content10{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:500px; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close10 {
    position: absolute;
    right: -10px;
    top:-27px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close10:hover,
.close10:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher view facture---------facture->*/






/*--------------modal afficher view facture by date---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn11 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer11 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer11 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container11 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal11 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* black w/ opacity */
    padding-top:5px;
    z-index: 10;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }


/* Modal /Box */
.modal-content11{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:700px; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close11 {
    position: absolute;
    right: 10px;
    top:-16px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close11:hover,
.close11:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher view facture by date---------facture->*/





/*--------------modal afficher paiyement facture---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn12 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer12 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer12 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container12 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal12 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }


/* Modal /Box */
.modal-content12{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:800px; /* Could be more or less, depending on screen size */
    height:340px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close12 {
    position: absolute;
    right: 10px;
    top:-16px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close12:hover,
.close12:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher paiyement facture---------facture->*/


/*--------------modal afficher daily cash by date---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn13 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer13 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer13 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container13 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal13 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }


/* Modal /Box */
.modal-content13{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:90%; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close13 {
    position: absolute;
    right: 10px;
    top:-16px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close13:hover,
.close13:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher pdaily cash by date---------facture->*/








/*--------------modal afficher liste de compte clients---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn14 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer14 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer14 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container14 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal14 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }


/* Modal /Box */
.modal-content14{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:80%; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close14 {
    position: absolute;
    right: 10px;
    top:-16px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close14:hover,
.close14:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal liste de compte clients---------facture->*/




/*--------------modal afficher edit client by id ---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn15 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer15 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer15 i{

font-size:25px;
margin-bottom: 7px;

margin-top: -10px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container15 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal15 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }


/* Modal /Box */
.modal-content15{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:800px; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close15 {
    position: absolute;
    right: 10px;
    top:-16px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close15:hover,
.close15:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal edit client by id ---------facture->*/






/*--------------modal afficher etat client  ---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn16 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer16 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer16 i{

font-size:25px;
margin-bottom: 7px;

margin-top: -10px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container16 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal16 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }

/* Modal /Box */
.modal-content16{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:80%; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close16 {
    position: absolute;
    right: 10px;
    top:-5px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close16:hover,
.close16:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher client etat ---------facture->*/




/*--------------modal afficher etat creancier par client ---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn17 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer17 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer17 i{

font-size:25px;
margin-bottom: 7px;

margin-top: -10px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container17 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal17 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }

/* Modal /Box */
.modal-content17{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:80%; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close17 {
    position: absolute;
    right: 18px;
    top:-6px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close17:hover,
.close17:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher etat creancier par client ---------facture->*/




/*--------------modal afficher fiche de renseignement  ---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn18 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer18 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer18 i{

font-size:25px;
margin-bottom: 7px;

margin-top: -10px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container18 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal18 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }

/* Modal /Box */
.modal-content18{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:700px; /* Could be more or less, depending on screen size */
    height:550px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close18 {
    position: absolute;
    right: 18px;
    top:-6px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close18:hover,
.close18:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher fiche de renseignement ---------facture->*/








/*--------------modal afficher livre de caisse  ---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn19 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer19 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer19 i{

font-size:25px;
margin-bottom: 7px;

margin-top: -10px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container19 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal19 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }

/* Modal /Box */
.modal-content19{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:800px; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close19 {
    position: absolute;
    right: 18px;
    top:-6px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close19:hover,
.close19:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher livre de caisse---------facture->*/






/*--------------modal save compte princi ---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn20 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer20 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer20 i{

font-size:25px;
margin-bottom: 7px;

margin-top: -10px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container20 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal20 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }

/* Modal /Box */
.modal-content20{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
     width: 380px; /* Could be more or less, depending on screen size */
    height:370px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close20 {
    position: absolute;
    right: 18px;
    top:-6px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close20:hover,
.close20:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher livre de caisse---------facture->*/






/*--------------modal save sous  compte princi ---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn21 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer21 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer21 i{

font-size:25px;
margin-bottom: 7px;

margin-top: -10px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container21 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal21 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }

/* Modal /Box */
.modal-content21{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width: 380px; /* Could be more or less, depending on screen size */
    height:370px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close21 {
    position: absolute;
    right: 18px;
    top:-6px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close21:hover,
.close21:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher sous compte---------facture->*/




/*--------------modal afficher facture solde---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn22 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer22 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer22 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container22 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal22 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* black w/ opacity */
    padding-top:5px;
    z-index: 10;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }


/* Modal /Box */
.modal-content22{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:500px; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close22 {
    position: absolute;
    right: -10px;
    top:-27px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close22:hover,
.close22:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher facteure solde ---------facture->*/


/*--------------modal utilisateur---------->*/

 /* Full-width input fields */


/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn23 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer23 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer23 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container23 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal23 {

         
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  


 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* black w/ opacity */
    padding-top:45px;
    z-index: 10;

  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content23{
    background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;

  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px 0px 10px 10px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close23 {
    position: absolute;
    right: -10px;
    top:-27px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close23:hover,
.close23:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

/*--------------end modal utilisateur---------->*/



/*--------------modal ajouter un utilisateur---------->*/

 /* Full-width input fields */


/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn24 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer24 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer24 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container24 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal24 {

         
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  


 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* black w/ opacity */
    padding-top:5px;
    z-index: 10;

  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content24{
    background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;



  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px 0px 10px 10px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close24 {
    position: absolute;
    right: -10px;
    top:-27px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close24:hover,
.close24:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

/*--------------end ajouter utlisateur---------->*/




/*--------------modal afficher table utilisateur---------->*/

 /* Full-width input fields */


/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn25 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer25 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer25 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container25 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal25 {

         
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  


 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* black w/ opacity */
    padding-top:5px;
    z-index: 10;

  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content25{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:600px; /* Could be more or less, depending on screen size */
    height:400px;
    padding: 20px;

overflow:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  }

/* The Close Button (x) */
.close25 {
    position: absolute;
    right: 0px;
    top:-16px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}
.close25:hover,
.close25:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

/*--------------afficher table utlisateur---------->*/



/*--------------modal afficher edit user ---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn26 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer26 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer26 i{

font-size:25px;
margin-bottom: 7px;

margin-top: -10px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container26 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal26 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* black w/ opacity */
    padding-top:0px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }

  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }


/* Modal /Box */
.modal-content26{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:400px; /* Could be more or less, depending on screen size */
    height:400px;
    padding: 10px;
    padding-top: 20px;

overflow:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close26 {
    position: absolute;
    right: 10px;
    top:-16px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close26:hover,
.close26:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal edit user---------facture->*/



/*--------------modalafficher chosse livre de caisse---------->*/

 /* Full-width input fields */


/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn27 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer27 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer27 i{

font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container27 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal27 {

         
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  


 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:5px;
    z-index: 10;

  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content27{
    background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width: 320px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;

  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px 0px 10px 10px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close27 {
    position: absolute;
    right: -10px;
    top:-27px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close27:hover,
.close27:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

/*--------------end modal afficher chosse livre de caisse---------->*/




/*--------------modal afficher livre de caisse_current  ---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn28 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer28 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer28 i{

font-size:25px;
margin-bottom: 7px;

margin-top: -10px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container28 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal28 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }

/* Modal /Box */
.modal-content28{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:800px; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close28 {
    position: absolute;
    right: 18px;
    top:-6px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close28:hover,
.close28:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher livre de caisse_current---------facture->*/




/*--------------modal afficher livre de caisse_jr  ---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn29 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer29 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer29 i{

font-size:25px;
margin-bottom: 7px;

margin-top: -10px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container29 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal29 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:5px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }

/* Modal /Box */
.modal-content29{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:800px; /* Could be more or less, depending on screen size */
    height:500px;
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close29{
    position: absolute;
    right: 18px;
    top:-6px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close29:hover,
.close29:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*--------------end modal afficher livre de caisse_jr---------facture->*/



/*--------------modal afficher calculate reduction charge  ---------->*/
 /* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */
.cancelbtn30 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer30 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}

.imgcontainer30 i{

font-size:25px;
margin-bottom: 7px;

margin-top: -10px;

color: #1A5276;

}


img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container30 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

.modal30 {

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  
 display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* black w/ opacity */
    padding-top:10px;
    z-index: 20;

@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 


  }

/* Modal /Box */
.modal-content30{
    background-color:#e5e7e9;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 2px solid #515A5A;
    width:500px; /* Could be more or less, depending on screen size */
    
    padding: 20px;

overflow-y:auto;
  box-shadow: 0px 0px 2px 2px #566573;
  border-radius: 0px;
  
  -webkit-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
-moz-box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
box-shadow: inset 0px 10px 0px -1px rgba(66,73,73,1);
  
  }

/* The Close Button (x) */
.close30{
    position: absolute;
    right: 18px;
    top:-6px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close30:hover,
.close30:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}




/*-------------- modal inscription choose---------->*/
.cancelbtn32 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer32 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container32 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal32 {

 
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
     z-index: 5000;  /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content32{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 400px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;



margin-top: 10px;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d6eaf8 0, #d6eaf8 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d6eaf8 0, #d6eaf8 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  
text-decoration-line: none;
  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #2e86c1;


}

.imgcontainer32 i{
font-size:25px;
margin-bottom: 7px;

color: #2e86c1;




}

/* The Close Button (x) */
.close32 {
    position: absolute;
    right: 4px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close32:hover,
.close32:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content32{

  width: 97%;
}


}
/*--------------end modal inscription choose---------->*/




/*-------------- modal inscription bus---------->*/
.cancelbtn33 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer33 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container33 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal33 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content33{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 395px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;

margin-top: 10px;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #85c1e9 0, #85c1e9 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #85c1e9 0, #85c1e9 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;

}

.imgcontainer33 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close33 {
    position: absolute;
    right: -4px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;


}




.close33:hover;
.close33:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content33{

  width: 97%;
}


}
/*--------------end modal inscription bus---------->*/



/*-------------- modal result travaux---------->*/
.cancelbtn69 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer69 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container69 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal69 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content69{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 395px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;

text-align: left;


}

.imgcontainer69 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close69 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close69:hover,
.close69:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content69{

  width: 96%;
}


}
/*--------------end modal choose select result travaux---------->*/


/*-------------- modal result bulletin---------->*/
.cancelbtn69x {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer69x {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container69x {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal69x {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content69x{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 395px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;

text-align: left;


}

.imgcontainer69x i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close69x {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close69x:hover,
.close69x:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content69x{

  width: 96%;
}


}
/*--------------end modal choose select resultat bulletin---------->*/


/*-------------- modal display result travaux---------->*/
.cancelbtn70 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer70 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container70 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal70 {

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content70{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width:95%; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;

text-align: left;


}

.imgcontainer70 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close70 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close70:hover,
.close70:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content37{

  width: 96%;
}


}
/*--------------end modal result travux display---------->*/



/*-------------- modal display result bulletin---------->*/
.cancelbtn70x {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer70x {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container70x {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal70x {

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content70x{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width:95%; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;
    overflow: auto; 

  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;

text-align: left;


}

.imgcontainer70x i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close70x {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close70x:hover,
.close70x:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content37x{

  width: 96%;
}


}
/*--------------end modal result bulletin---------->*/

/*-------------- modal search num recu paie---------->*/
.cancelbtn45 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer45 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container45 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal45 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content45{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 500px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer45 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}

/* The Close Button (x) */
.close45 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close45:hover,
.close45:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content45{

  width: 80%;
}


}
/*--------------end modal search num de recu jr paiement---------->*/



/*-------------- modal calendrier---------->*/
.cancelbtn34 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer34 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container34 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal34 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content34{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width:400px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;

margin-top: 10px;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back_w i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;






}

.cal i{

float: left;

text-align: left;


}

.imgcontainer34 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close34 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close34:hover,
.close34:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content34{

  width: 97%;
}


}
/*--------------end modal calendrier---------->*/



/*-------------- modal paiement---------->*/
.cancelbtn35 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer35 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container35 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal35 {

 
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content35{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 395px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;

text-align: left;


}

.imgcontainer35 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close35 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close35:hover,
.close35:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content35{

  width: 97%;
}


}
/*--------------end modal paiement---------->*/


/*-------------- modal gerence eleve---------->*/
.cancelbtn36 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer36 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container36 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal36 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content36{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 400px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;

text-align: center;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_paiement_check {
font-size:17px;
}

.imgcontainer36 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;

}

/* The Close Button (x) */
.close36 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close36:hover,
.close36:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content36{

  width:96%;
}


}
/*--------------end modal gerence eleves---------->*/


/*-------------- modal choose etat creancier type---------->*/
.cancelbtn37 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer37 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container37 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal37 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content37{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 395px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;

text-align: left;


}

.imgcontainer37 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close37 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close37:hover,
.close37:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content37{

  width: 96%;
}


}
/*--------------end modal choose etat creancier type---------->*/



/*-------------- modal frais scolaire---------->*/
.cancelbtn38 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer38 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container38 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

        .modal38 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content38{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 400px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;

text-align: center;
  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_result_check {

font-size:17px;

}

.imgcontainer38 i{
font-size:25px;
margin-bottom: 7px;
color: #1A5276;

}

/* The Close Button (x) */
.close38 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close38:hover,
.close38:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content38{

  width: 96%;
}


}
/*--------------end modal frais scolaire---------->*/




/*-------------- modal frais bus scolaire---------->*/
.cancelbtn39 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer39 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container39 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal39 {

 

  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
     z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content39{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 395px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;

text-align: left;


}

.imgcontainer39 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close39 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close39:hover,
.close39:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content39{

  width: 96%;
}


}
/*--------------end modal frais bus scolaire---------->*/




/*-------------- modal autre frais---------->*/
.cancelbtn40 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer40 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container40 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal40 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content40{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 90%; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer40 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close40 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close40:hover,
.close40:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content40{

  width: 80%;
}


}
/*--------------end modal autre frais---------->*/



/*-------------- modal display video---------->*/
.cancelbtn401 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer401 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container401 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal401 {

 

  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content401{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 90%; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer401 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close401 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close401:hover,
.close401:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content401{

  width: 80%;
}


}
/*--------------end modal display video---------->*/


/*-------------- modal acceuille---------->*/
.cancelbtn400 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer400 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container400 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal400 {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,3); /* black w/ opacity */
    padding-top:0px;
    z-index: 100000;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content400{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 90%; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;


  border-radius:0px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer400 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close400 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close400:hover,
.close400:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content400{

  width: 80%;
}


}
/*--------------display welcome---------->*/



/*-------------- modal photo voir---------->*/
.cancelbtn4001 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer4001 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container4001 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

       .modal4001 {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;


    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* black w/ opacity */
    padding-top:0px;
    z-index: 100000;



  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 


  }


/* Modal /Box */
.modal-content4001{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width:395px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 30px;


  border-radius:0px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.container_back i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}




.imgcontainer4001 i{
font-size:25px;
margin-bottom: 7px;
color: #1A5276;

}

/* The Close Button (x) */
.close4001 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close4001:hover,
.close4001:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content4001{

  width: 80%;
}


}
/*--------------display photo voir---------->*/


/*--------------modal save parametrage autre frais---------->*/
.cancelbtn41 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer41 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container41 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

  .modal41 {

  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  

    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content41{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 400px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }

  .save_client_left{


    width: 300px;

    height: 0 auto;

    display: inline-block;

margin:20px;
  }

    .save_client_right{

width: 150px;

    height: 0 auto;

    float: right;


  }



  .container_modal_parametre i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer41 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close41 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close41:hover,
.close41:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content41{

  width: 80%;
}


}
/*--------------end modal save parametrage autre frais---------->*/




/*--------------modal save decaissement---------->*/
.cancelbtn42 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer42 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container42 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

  .modal42 {

  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  

    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content42{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 400px; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }

  .save_client_left{


    width: 300px;

    height: 0 auto;

    display: inline-block;

margin:20px;
  }

    .save_client_right{

width: 150px;

    height: 0 auto;

    float: right;


  }



  .container_modal_parametre i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer42 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close42 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close42:hover,
.close42:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content42{

  width: 80%;
}


}
/*--------------end modal save decaissement---------->*/




/*--------------modal liste de abonne bus---------->*/
.cancelbtn43 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer43 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container43 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

  .modal43 {

  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  

    
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content43{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content43 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}


  .container_modal_parametre i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer43 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close43 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close43:hover,
.close43:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content43{

  width: 80%;
}


}
/*--------------end modal liste abonne bus--------->*/



/*--------------modal paiement bus general---------->*/
.cancelbtn44 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer44 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container44 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

  .modal44 {

  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  

    
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content44{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content44 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}


  .container_modal_parametre i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer44 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close44 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close44:hover,
.close44:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content44{

  width: 80%;
}


}
/*--------------end modal liste abonne bus--------->*/






/*--------------modal paie recu---------->*/
.cancelbtn46 {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer46 {
    text-align:;
    margin: 24px 0 12px 0;
    position: relative;
}



img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container46 {
      padding: 10px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */

  .modal46 {

  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  

    display: none;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
    padding-top:0px;
    z-index: 10;



  @-webkit-keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 


  }


/* Modal /Box */
.modal-content46{
   background-color:#eaecee;
    margin: 10px auto ; /* 5% from the top, 15% from the bottom and centered */
   
    width: 95%; /* Could be more or less, depending on screen size */
    height:0 auto;
    padding: 20px;


  border-radius:10px;

  background: 
        -webkit-radial-gradient(-19% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, #d7dbdd 0, #d7dbdd 124px, transparent 50px)  #f4f6f6
;
    background-clip: padding-box;
  

  
  }


.modal-content46 i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}


  .container_modal_parametre i{

font-size:25px;
margin-bottom:15px;

color: #1A5276;


}

.imgcontainer46 i{
font-size:25px;
margin-bottom: 7px;

color: #1A5276;




}

/* The Close Button (x) */
.close46 {
    position: absolute;
    right: 5px;
    top:-40px;
    color:red;
    font-size: 50px;
    font-weight: bold;
}

.close46:hover,
.close46:focus {
    color: red;
    cursor: pointer;
}


/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }



}


@media (max-width:400px) {

.modal-content46{

  width: 80%;
}


}
/*--------------end modal paie recu--------->*/


/*--------------end modal calculate reduction charge---------facture->*/