@media only screen and (max-width: 320px) {

  /* //////////////////// [A] ////////////////////////*/
  
  a{ color:#2E7B2D; }
  .aide_login{ margin-left:-10px; }
  /*.aide_size img{ width:550%; }*/

  /* //////////////////// [B] ////////////////////////*/

  body{
    font-family : 'Open Sans',sans-serif;
    width:100%; 
    background-color: #EAEAEA;
    height:100%;
    margin: 0 auto;
    font-size:12px;
    position:absolute;
  }

  .body_index {
    background: url('../images/img_connect.jpg') center 0 no-repeat fixed;
    background-size:cover;
    z-index: 1;
    height: 100%;
    margin:0;
  }

  .border_bottom{
    border-bottom:1px solid black;
  }

  .border_right{
    border-right:1px solid black;
  }

  .border_left{
    border-left:1px solid black;
  }

  .border_top{
    border-top:1px solid black;
  }

  .bold{font-weight:bold;}

  .btn_login {
    text-align: center;
    width: 100px;
    display: inline-block;
    color: #ffffff;
    cursor: pointer;
    background-color: #46835A;
    border-radius: 30px;
    height: 30px;
    border:#2E7B2D 1px solid;
  }

  .btn {
    text-align: center;
    width: 100px;
    display: inline-block;
    color: #ffffff;
    cursor: pointer;
    background-color: #46835A;
    border-radius: 30px;
    height: 30px;
    margin-bottom: 25px;
    border:#2E7B2D 1px solid;
  }

  .btn_action{
    text-align: center;
    width: 60px;
    color: #ffffff;
    font: Bold 11px Open Sans !important;
    cursor: pointer;
    background: #46835A 0% 0% no-repeat padding-box;
    height: 20px;
    margin-bottom : 25px;
    border:#2E7B2D 1px solid;
  }

  .btn_save {
    text-align: center;
    width: 80px;
    color: #ffffff;
    font: Bold 11px Open Sans !important;
    cursor: pointer;
    background: #46835A 0% 0% no-repeat padding-box;
    border: 1px solid #fff;
    border:#2E7B2D 1px solid;
    height: 20px;
    margin-bottom : 25px;
  }

  .btn_ecriture {    
    color: #ffffff;
    font: Bold 11px Open Sans;
    cursor: pointer;
    background-color: #46835A;
    height: 20px;
    border:#2E7B2D 1px solid;
  }

  .btn_validation{
    color: #ffffff;
    background-color: #46835A;
    height: 20px;
    border:#2E7B2D 1px solid;
    font: Bold 11px Open Sans;
  }

  /* //////////////////// [C] ////////////////////////*/

  .center{text-align: center;}
  .color_erreur { color: red; }

  /* //////////////////// [D] ////////////////////////*/

  .display_none{
    display:none;
  }

  .display_block{
    display:block;
  }

  .display_inline_block{
    display:inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top: -18px;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .dropdown-content a:hover {background-color: #5AB228;}
  .dropdown:hover .dropdown-content { display: block; }

  .droite {
    display: inline-block;
    vertical-align: top;
    margin-left: 15px;
    margin-top:20px;
    background-color:#F5F5F5;
    width:90%;
  }

  .droite_milieu {
    display: inline-block;
    vertical-align: top;
    width:90%;
    height:120px;
    margin-top:10px;
    background-color:#F5F5F5;
    margin-left: 15px;
    font-size:12px;
  }
  
  .droite_bas {
    display: inline-block;
    vertical-align: top;
    margin-left:-5px;
    width:90%;
    height:80px;
    margin-top:10px;
    font-size:12px;
  }

  .div_gauche {
    vertical-align: top;
    margin-left: 5%;
    margin-top: 2%;
  }

  .div_droite {
    vertical-align: top;
    margin-left: 5%;
    margin-top: 2%;
  }

  .dv_centrale_main{
   width:96%;
   height:100%;
   margin:0 auto;
   position:relative;
   background-color: white;
  }

   #deconnexion{
    z-index:15;
    cursor:pointer;
  }

  .dropbtn_mois {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 4px 6px;
    text-decoration: none;
    z-index: 2;
    background-color: gray;
    color:#f5f5f5;
    border:1px solid white;
    font-size:12px;
  }

  .dropdown_mois {
    display: inline-block;
    z-index: 2;
    cursor:pointer;
  }

  .div_size{
    overflow-y:auto;
    max-height:400px;
  }

  .dropbtn_mois:hover {
    background-color: #46835A;
    color:#f5f5f5;
  }

   #div_recherche{
    margin-top:75px;
    position:fixed;
    margin-left:35px;
  }

   #div_fil_ariane {
    display:inline-block;
    width:90%;
    text-align:right;
  }

    #dv_region{
    height:130px;
    width:30%;
    margin:0 auto;
    margin-top:-30px;
  }

  /* //////////////////// [E] ////////////////////////*/

  .entete{
    border:1px solid gray;
    background-color: #5AB228;
    color:white;
    font-weight:bold;
    font-size:12px;
    height:20px;
    text-align:left;
  }

  .espace_auth{
    background-color: #5AB228;
    color:white;
    font-weight:bold;
    font-size:12px;
    text-align:center;
    border:#2E7B2D 1px solid;
  }

  /* //////////////////// [F] ////////////////////////*/
  
  .footer{
    background-color:#36363B;
    height:80px;
    position:fixed;
    bottom:0px;
    width:100%;
  }

  .footer img{
    margin-top:1%;
    float:right;
    margin-right:1%;
  }

  .footer_main {
    background-color: #36363B;
    height: 30px;
    position: fixed;
    bottom: 0px;
    width: 80%;
  }

  .footer_main img{
    margin-top:1%;
    float:right;
    margin-right:1%;
    width:15%;
  }

  .field_oblig, .ko{color:red; }

  .filtre_grille{
    text-align:center;
    margin-right:40%;
    margin-bottom:25px;
  }

  .form_auth{
    width:65%;
    height:53%;
    margin-left: 18%;
    margin-top:36%;
    border-spacing: 10px;
    text-align:center;
    background-color: white;
    z-index:5;
    position:fixed;
    background-color:#F5F5F5;
    border:2px solid #5AB228;
  }

  .form_auth td>input{
    width:100px;
  }

  .form_reinit {
    width:65%;
    height:53%;
    margin-left: 18%;
    margin-top:36%;
    border-spacing: 10px;
    text-align:center;
    background-color: white;
    z-index:5;
    position:fixed;
    background-color:#F5F5F5;
    border:2px solid #5AB228;
  }

  .form_reinit td {
    font-size:10px;
  }

  .form_reinit td > input {
    width: 85px;
  }
  
  .fond_rouge{
    background-color:red;
  }

  .fieldset{
    width:60%;
    margin:10px auto;
  }

  .fieldset table{
    margin:0 auto;
    text-align:center;
  }

  /* //////////////////// [G] ////////////////////////*/

  .gauche {
    display: inline-block;
    vertical-align: top;
    margin-top: 2%;
    margin-left: 15px;
    font-size:12px;
  }

  .gauche_milieu {
    display: inline-block;
    vertical-align: top;
    margin-left: 15px;
    width:90%;
    height:120px;
    padding-left:1%;
    margin-top:10px;
  }

  .gauche_bas {
    display: inline-block;
    vertical-align: top;
    margin-left: 15px;
    width:90%;
    height:150px;
    padding-left:1%;
    font-size:12px;
  }

   .gauche_bottom {
    display: inline-block;
    vertical-align: top;
    margin-left: 15px;
    width:90%;
    height:160px;
    padding-left:1%;
    background-color:#F5F5F5;
    margin-top:10px;
  }

  .gauche_top {
    display: inline-block;
    vertical-align: top;
    margin-top: 2%;
    margin-left: 15px;
    width:90%;
    height:350px;
    padding-left:1%;
  }

  /* //////////////////// [H] ////////////////////////*/

  .header{
    background-color:white;
    height:80px;
    position:fixed;
    top:0px;
    width:100%;
  }

  .header img {
    margin-top:1%;
    margin-left:1%;
    width:10%;
  }

   .header_main{
    background-color:white;
    height:60px;
    position:fixed;
    width:96%;
    text-align:left;
  }

  .header_main img {
    margin-top:1%;
    margin-left:1%;
    height:45%;
  }

  .header_titre{
    color:rgb(100, 105, 115);
    font-weight:bold;
    font-size:18px;
    vertical-align:middle;
    font-style:italic;
    top:-15px;
  }

   .header_main_top img {
    margin-top: 5px;
    margin-left: 1%;
    object-fit:contain;
    width:55%;
  }
  
  .header_main_top{
    display:flex;
    justify-content:space-between;
  }

   .header_main_bot{
    display:flex;
    justify-content:space-between;
  }

   .header_main_bot > div{
     flex:1;
   }

   .header_frais_top{
     display:flex;
     justify-content:space-between;
     align-items:center
   }

   .header_frais_bot{
     display:flex;
     flex-direction:column;
     align-items:center;
   }


  /* //////////////////// [I] ////////////////////////*/

  input{
    cursor:pointer;
  }

  input, textarea, select, span{
    font-family: 'Open Sans',sans-serif;
  }

  .info{
    color:steelblue;
  }

  .input_long{
    width:135px;
    font-size:11px;
  }

  .img_visible{
    visibility:visible;
  }

  .img_invisible{
    visibility:hidden;
  }
   
  .input_grille{
    /*width:90px;*/
    width:98%;
  }

  img{
    cursor:pointer;
  }

  /* //////////////////// [L] ////////////////////////*/

  .left{text-align:left;}

  .loading_ajax
  {
    background-color:white;
    border:1px solid rgb(100, 105, 115);
    height: 40px;
    right: 50%;
    bottom: 50%;
    z-index: 99999999999999;
    font-size: 14px;
    line-height: 1.6em;
    text-align: center;
    position: fixed;
    font-family : 'Open Sans',sans-serif;
    padding:5px;
  }

  .lbl_accueil {
    color: black;
    z-index: 10;
    text-align: center;
    width: 100%;
    font-size: 12px;
    margin-top:10px;
  }

  .li_menu {
    float: left;
  }

  .li_menu a, .dropbtn {
    display: block;
    color: white;
    text-align: left;
    padding: 4px 6px;
    text-decoration: none;
  }

  .li_menu a:hover, .dropdown:hover .dropbtn {
    background-color: #46835A;
    color:#f5f5f5;
  }

  .li_menu, .dropdown {
    display: block;
  }

  .li_ss_menu{ list-style-type: none; }

  .lignes_grille, .info_grille {
    text-align: left;
  }

  .logo{
    width:45%;
  }

  .lbl_nom_appli {
    z-index: 10;
    font-size: 11px;
  }

  #lbl_timer{
    width:99%;
    text-align:right;
    color:#46835A;
    font-size: 11px;
  }

   .lbl_annee{
    color:red;
    font-weight:bold;
    padding:2%;
    font-size:11px;
  }

  #lbl_info_validation{
    left:50px;
    position:fixed;
    font-size:9px;
    color:red;
    top:255px;
  }

  .lbl_info_ok{
    background-color:rgb(90, 178, 40);
    left:580px;
    position:fixed;
    font-size:13px;
    top:330px;
    padding-left:5px;
    padding-right:5px;
    color:black;
  }

  .lbl_info_ko{
    background-color:red;
    left:580px;
    position:fixed;
    font-size:13px;
    top:330px;
    padding-left:5px;
    padding-right:5px;
    color:black;
  }

  .lbl_ok{
    background-color:rgb(90, 178, 40);
    font-size:13px;
    color:black;
  }

  .lbl_ko{
    background-color:red;
    font-size:13px;
    color:black;
  }

  .lbl_info_aumonier{
    margin-top:-50px;
  }

  .lbl_info_user{
    margin-top:-20px;
  }

  #lbl_version{
    font-size:11px;
    color:#46835A;
    margin-left:25px;
  }

  #lst_region{
    text-align:center;
    padding-top:5px;
  }

  /* //////////////////// [M] ////////////////////////*/

  #mnu_icone{display:block; margin-top:20px;z-index:15}
  #menu{ display:none; width:100%;margin-top:50px;}
  #menu ul {width:80%;}
  .menu_mois{ display:none; }

  #mnu_entete {
   background-color:#5AB228;
   color: white;
   text-align:center;
   cursor:pointer;
   border-top:2px solid #46835A;
   border-bottom:2px solid #46835A;
   width:80%;   
   margin:0 auto;
   position:fixed;
   z-index:15;
 }

  /* //////////////////// [N] ////////////////////////*/
  /* //////////////////// [O] ////////////////////////*/

  .ok{color:green;}

  .overflow{
    overflow-y:auto;
    max-height:300px;
  }

  /* //////////////////// [P] ////////////////////////*/


  /* //////////////////// [R] ////////////////////////*/

  .right {text-align: right;} 
  #recherche{
    margin:0 auto;
  } 

  #resultat_recherche{
    max-height:400px;
    overflow-y:auto;
  }

  /* //////////////////// [T] ////////////////////////*/

  .taille_auto{
    width:auto;
  }

  .table_login{
    width:100%;
    height:30%;
    margin: 0 auto;
    border-spacing: 10px;
    text-align:center;
    font-size:12px;
  }

  .table_info{
    width:50%;
    height:50%;
    margin: 0 auto;
    border-spacing: 5px;
    text-align:center;
    font-size:12px;
    margin-top:-10px;
  }

  .tdb{
    width:85%!important;
    display:none;
  }

  .txt_etiquette{
    background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0));
    border-radius: 4px;  
    -moz-box-shadow: 0 0 5px;
    -webkit-box-shadow: 0 0 5px;
    box-shadow: 0 0 5px;    
    height:35px;
    position:absolute;
    top:0;
    padding: 5px 5px;
  }
  
   #tdb_mdp_oublie{
    margin:0 auto;
  }

  #table_critere{
    margin-top:-35px;
    font-size:10px;
  }
 
  .top{
    margin-top:10px;
  }

  .top_30{
    margin-top:30px!important;
  }

  #tdb_mdp{
    margin:50px auto;
  }

  #tbl_mdp_oblig{
    font-size:13px;
    margin:0px auto;
  }

  #tdb_aumonier{
    margin:15px auto;
  }

  #tdb_user{
    margin:30px auto;
  }

  #tdb_header_main{
    width:100%;
  }

  /* //////////////////// [U] ////////////////////////*/

  .ul_menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #5AB228;
    font-size:13px;
    z-index:20;
    position:fixed;
    width:80%;
  }

  .ui-dialog .ui-dialog-titlebar{
    background-color: #5AB228;
  }

  .ul_menu_mois {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    z-index: 2;
  }

  /* //////////////////// [W] ////////////////////////*/

  .width_100 {
    width: 100%;
  }

  .width_30 {
    width: 30%;
    margin:0 auto;
  }

  .width_42{
    width:42px;
  }
  
  /* //////////////////// [Z] ////////////////////////*/ 
 
   .zone_centrale_main {
    overflow-y: auto;
    font-size:13px;
    margin-top:130px;
  }
}