.modal {
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    left:0;
    top:0;
    z-index:10000;
    display:none;
    align-items: center;
    justify-content: center;
}
.modal ventana {
    width:80%;
    height:100%;
    top:0px;
    background-color: white;
    animation-name: ani-modal;
    animation-duration: 0.2s;
    animation-timing-function: ease;
    position: relative;
    display:flex;
    flex-direction: column;
}
.modal ventana header {
    width:100%;
    height:40px;  
    background-color: #1c2531;
    color: white !important;
    padding:5px;
    padding-left:15px;
    display: flex;

    justify-content: space-between;
}
.modal ventana header h1 {
    margin:0px;
    padding:0px;
    color: white !important;
}
.modal ventana content {
    flex-grow: 1;
    background-color: white;
    overflow-y: scroll;
    padding: 8px;
}
@keyframes ani-modal {
    0%{ 
        top:-50px;
        opacity:0;
        
        }
    100%{ top:0px;
    opacity:1;}
}

/*VENTANA MODAL FULL*/
.ventana-modal-full{
    width:100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
    background-color: white;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation-name: aniVentanaModalFull;
    animation-timing-function: ease;
    animation-duration: 0.6s;   
    z-index: 500;
}
.ventana-modal-full titulo {
    width:100%;
    height:50px;
    background-color: navy;
    color:white;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    padding:50px;
    font-size: 16px;
    align-items: center;
}
.ventana-modal-full contenido {
    max-width: 90%;
}
@keyframes aniVentanaModalFull{
    from{ top:-50px;}
    to{ top:0px;}
}

@media only screen and (max-width: 600px) {
    .modal ventana {
        width:100%;
    }
}
.winMessage{
    top:0;
    left:0;
    position:fixed;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    display:flex;
    justify-content: center;
    align-items: center;
}
.winMessage contenido{
    width:300px;
    height:200px;
    background-color:white;
    border-radius: 15px;
    padding:20px;
    display:flex;
    align-items: center;
    flex-direction: column;
}


/*VENTANA MODAL DESDE ABAJO*/
.modal-from-bottom{
    width:100%;
    height:100%;
    background-color: rgba(0,0,0, 0.7);
    position:fixed;
    display:flex;
    flex-direction: column;
    opacity: 1;
    display:none;
    z-index:1;
    /*animation-name: ani-modal-from-bottom;*/
    /*animation-duration: 0.6s;*/
    /*animation-timing-function: ease;*/
    /*animation-fill-mode: both;*/
}
.modal-from-bottom ventana{
    width:100%;
    height:60%;
    bottom:0;
    position: fixed;
    display:flex;
    flex-direction: column;
    overflow-y: auto;
    
    background-color: white;
    border-top: thin solid gray;
    
    border-radius: 20px 20px 0px 0px;
    padding-top: 35px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 100px;
/*    animation-name: ani-modal-from-bottom-ventana;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-fill-mode: both;*/
}
.modal-from-bottom ventana button{
    margin-top: 4px;
    margin-bottom: 4px;
}
@keyframes ani-modal-from-bottom{
    from{ opacity:0;}
    to{ opacity:1;}
}
@keyframes ani-modal-from-bottom-ventana{
    from{ 
        bottom: -10px;}
    to{
        bottom:0px;
    }
}
.modal-info{
    width:100%;
    height: 100%;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.5);    
    position: fixed;
    justify-content: center;
    align-items: center;
    display:flex;
    z-index: 10000;
}
.modal-info info{
    width:200px;
    height: 150px;
    background-color: white;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    display:flex;
}
.modal-info-mensaje{
    width:  100%;
    height: 100%;
    top:0;
    left:0;
    background-color: white;
    position: fixed;
    justify-content: center;
    align-items: center;
    display:flex;
    z-index: 10000;
}