.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999999;/* Sit on top */
left: 0;
top: 0;
width: 100%;
height: 100%;
color:black;
overflow: hidden;
background-color: rgba(0,0,0,0.4);
}

.modal-content {
max-width: 700px;
width: 80%;
background-color: #fefefe;
margin: 10% auto auto auto;
border: 1px solid #888;
padding: 0px;
}
.imgcontainer{
height: 1px;
background-color: #32c6ff;
}
.modal_title{
width: 100%;
height: 50px;
font-size: 30px;
font-weight: bolder;
text-align: center;
padding-top: 5px;
background-color: #32c6ff;
color:white;
border-bottom: 1px solid var(--action_color);
}
.title_warning{
background-color: #ffde8b;
color:black;
}

/* The Close Button (x) */
.close {
visibility: visible;
display: block;
float:right;
color:#787878;
margin-right:10px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color:#a0a0a0;
cursor: pointer;
}
.container {
  padding: 16px;
}
/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
  display: block;
  float: none;
}
}
/* Extra styles for the cancel button */

.cancelbtn {
width: 100%;
cursor: pointer;
padding: 10px;
margin-top: 20px;
background-color: #f44336;
border:none;
}

.validbtn{
width: 100%;
cursor: pointer;
padding: 10px;
margin-top: 20px;
color: white;
font-weight: bolder;
font-size: 16px;
background-color: var(--action_color);
border:none;
}
.validbtn:hover{
background-color: var(--action_color_less);
}
/****************  MODAL CONNECTION  ******************/
#modal_connection .modal-content{
max-width: 500px;
width: 80%;
overflow-y: scroll;
text-align: center;
}
#connection_success p{
background-color: #DFF2BF;
padding: 5px;
margin-top: 0px;
color: black;
z-index: 1;
}
#connection_warning p{
background-color: #feefb4;
padding: 5px;
margin-top: 0px;
color: black;
z-index: 1;
}
#connection_info p{
background-color: #bee6f8;
padding: 5px;
margin-top: 0px;
color: black;
}
#modal_connection .cancelbtn{
background-color: var(--action_color_less);
font-size: 18px;
font-weight: bolder;
}
#modal_connection .cancelbtn{
background-color: #4ac757;
}
#modal_connection .cancelbtn:hover{
background-color: #40a94b;
}
#modal_connection input[type="submit"]{
width: 90%;
height: auto;
margin: 20px 0px 10px 0px;
border-radius: 30px;
padding: 10px;
text-align: center;
font-weight: bold;
font-size: 18px;
outline: none;
color:white;
background-color: var(--action_color_less);
border:1px solid var(--action_color);
}

#modal_connection a{
text-align: right;
font-size: 16px;
margin-right:5%; 
}
#modal_connection .inscription_btn{
font-size: 20px;
font-weight: bold;
}
/****************  MODAL D'ENVOI DE JUSTIFICATIF D'IDENTITE  ******************/
#modal_send_justif{
overflow-y: scroll;
}
#modal_send_justif #btn_submit_id{
margin-top: 20px;
}

/****************  MODAL presentation interactif  ******************/
#presentation{
display: none;
position: absolute;
z-index: 2;
width: 600px;
text-align: center;
border-radius: 9px;
padding: 0px;
background-color: rgba(119, 119, 119, 0.95);
color: white;
top: 40px;
}
#presentation_text{
padding: 20px;
text-align: left;
font-weight: bold;
}
/****************  MODAL Confirmation Agence  ******************/
#modal_confirmation{
overflow: auto;
}
#modal_confirmation .modal-content{
max-width: 800px;
margin-top: 20px;
overflow: auto;
}

@media (min-width: 768px) and (max-width: 1200px) {

} 

/* tablets horizontale */
@media (min-width: 768px) and (max-width: 1024px) {
#modal_sign .modal-content{
  width: 90%;
  }
  .btn_explication{
    display:none;
  }
}

/* only small tablets vertical*/
@media (min-width: 768px) and (max-width: 991px) {
  .btn_explication{
    display:none;
  }
}

/* Only horizontal mobile */
@media only screen and (max-width: 767px){
  .btn {
    font-size: 10px;
    padding: 5px 20px;
    margin: 5px;
  }
  .btn_explication{
    display:none;
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape){ 
  #modal_sign .modal-content{
    height: 95%;
    margin: 1% auto 1% auto;
  }
  #sig-canvas{
    width: 80%;
    border:1px solid black;
  }
  .btn_explication{
    display:none;
  }
}  
/* Only vertical mobile  */
@media (min-width: 320px) and (max-width: 480px) {
  .btn_explication{
    display:none;
  }
  #modal_send_justif .btn_second_action{
    font-size: 8px; 
    padding-left: 8px;
    padding-right: 8px;
  }

}