/*CSS MODAL*/




.modal_fade {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    z-index: 9999;	
	position: fixed;
    display: none;
    margin-top:0px;
	background: rgba(0,0,0,.8);
	
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}
 


.modal_title{
    color:#000;
    top:0%;
    word-wrap: break-word;
    width:100%;
    height:50px;
    border-bottom: 1px solid rgb(229,229,229);
    display: flex;
    margin-bottom: 5px;
font-size: 20px;
padding:10px;

}




.modal_footer{
    color:#000;
    top:0%;
    word-wrap: break-word;
    width:100%;
    height:50px;
    border-top: 1px solid rgb(229,229,229);
    display: flex;
    margin-top: 5px;
font-size: 15px;
padding:10px;

}


.modal_20 {
	width: 20%;
    height:auto 20%;
	background: #FFF;
    margin: 70px auto;
	position: relative;
	border-radius: 8px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}


.modal_40 {
	width: 40%;
    height:auto 40%;
	background: #FFF;
    margin: 70px auto;
	position: relative;
	border-radius: 8px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}


.modal_60 {
	width: 60%;
    height:auto 60%;
	background: #FFF;
    margin: 70px auto;
	position: relative;
	border-radius: 8px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}


 
.modal_80 {
	width: 80%;
    height:auto 75%;
	background: #FFF;
    margin: 5% auto;
	position: relative;
	border-radius: 8px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);

}

 
.modal_90 {
	width: 90%;
    height:auto 80%;
	background: #FFF;
    margin: 5% auto;
	position: relative;
	border-radius: 8px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);

}


.modal_close{
    position: absolute;
    top:-15px;
    right:-15px;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color:#9ba4b4;
    font-size:20px;
    font-weight:normal;
    background: #e3e4e5;
    z-index: 1;
    
}


.modal_close:hover{
    color:#686868;
 
}

.text-info-alert{
    font-size:10px;
    font-family:'roboto', serif;

    
    }
    





.modal-barra-title{
background-color: #14274E;
color: #FFF;
font-size:16px;
font-family:'Roboto', sans-serif;
padding:10px;
border-top-left-radius:5px;
border-top-right-radius:5px;


}


/*/////Media Query/////////////////////*/
@media only screen and (max-width : 1080px)
{
.modal_close{
    position: absolute;
    top: -15px;
    right:-15px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color:#9ba4b4;
    font-size:15px;
    font-weight:normal;
    background: #e3e4e5;
    z-index:1;
    
}


.modal_title{
    position:relative;
    color:#000;
    top:0%;
    word-wrap: break-word;
    width:100%;
    height:40px;
    border-bottom: 1px solid rgb(229,229,229);
    display: flex;
    margin-bottom: 5px;
    font-size:15px;
    padding:10px;

}




.modal_20,.modal_40,.modal_60, .modal_80,.modal_90{
    margin: 20px auto;
    width: 90%;
    height:auto 100vh;
}




.modal_footer{
    color:#000;
    top:0%;
    word-wrap: break-word;
    width:100%;
    height:40px;
    border-top: 1px solid rgb(229,229,229);
    display: flex;
    margin-top: 5px;
    font-size:10px;
    padding:10px;

}



.modal_close{
    position: absolute;
    top:-15px;
    right:-15px;
    max-width: 40px;
    max-height: 40px;
    width: 20%;
    height: 20%;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color:#9ba4b4;
    font-size:15px;
    font-weight:normal;
    background: #e3e4e5;
    z-index: 1;
    
}


.modal_close:hover{
    color:#686868;
 
}


          

.modal-barra-title{
    background-color: #14274E;
    color: #FFF;
    font-size:12px;
    font-family:'Roboto', sans-serif;
    padding:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    
    
    }
    



}


/*INPUTS MODAL*/


.border-login-input{
    border-top-left-radius:100px;
    border-bottom-left-radius:100px;
    height:40px;
    background:#fff;
    border-right:0px solid #e9ecef;
    border-top:1px solid #e9ecef;
    border-left:1px solid #e9ecef;
    border-bottom:1px solid #e9ecef;

  }

  .border-login-input i{
color:#14274e;
  }



  /* BOTONES MODAL*/

  .boton-register{
    background:#394867;
    color: #f1f6f9;
    width:100%;
    font-family:'Varela Round', sans-serif;
    }
    
    
    .boton-register:hover{
      background:#14274e;
      color: #f1f6f9;
      width:100%;
      }
      


      .boton-login{
        background:#14274e;
        color: #f1f6f9;
        width:100%;
        border-radius:100px;
        font-family:'Varela Round', sans-serif;
        }
        
        
        .boton-login:hover{
          background:#394867;
          color: #f1f6f9;
          width:100%;
          }
          



          

      .boton-login-cancel{
        background:#FA1926;
        color: #ffffff;
        width:100%;
        border-radius:100px;
        font-family:'Varela Round', sans-serif;
        }
        
        
        .boton-login-cancel:hover{
          background:#E73641;
          color: #ffffff;
          width:100%;
          }
        
          .recovery-pass{
            font-size:12px;
            font-family:'Varela Round', sans-serif;
                color:#14274e;
          }
        


          .img-login{
            width:60px;
            height:60px;
          }
       

          .tituloModal{
            font-size:30px;
            font-family:'roboto', sans-serif;
            font-weight:500;
            color: #14274e;
            }