@font-face {
    font-family: "futurist";
    src: url("/static/css/fonts/Methanerse.ttf") format('truetype');
}
@font-face {
    font-family: amphersand;
    src: url("/static/css/fonts/Expansiva.otf");
    font-weight: 400;
}
@font-face {
    font-family: mispace;
    src: url("/static/css/fonts/space_me.ttf");
}
/*--------application colors---------------------*/
.color-amarillo-app{
    color: #ffcc00;
}
.color-azul-app{
    color: #0000d4;
}
.color-rojo-app{
    color:#fe0000;
}
.color-gris-app{
    color: #808080;
}
.font-futurist{
    font-family: futurist;
}
.font-app{
    font-family: mispace;
}




/*-----------------------------*/
hr {
    margin: -0.9em 0 0.3em 0;
    border-top:1px solid #a3a3a3;
}
a:link{
    text-decoration: none;
    color: #000;
}
a:visited{
    text-decoration: none;
    color: #000;
}
a:hover{
    text-decoration: underline;
    color: #fe0000 !important;
}
a:active{
    text-decoration: none;
    color: #000;
}

/*-----------------------------*/

body,html{
    font: normal 16px mispace;
    min-height: 95vmin !important;
}
#mibody{
    min-height: 91.2vh;
}

.mouseover{
    cursor: pointer;
}
.fontweb {
    font-family: mispace;
}
.subrayado-doble {
    text-decoration: underline;
    text-decoration-style: double;
}
.subrayado {
    text-decoration: underline;
}
.negrita{
    font-weight: bold;
}
.disp-none{
    display: none;
}
.monospace{
    font-family: monospace;
}
input, select{
    outline: none !important;
    /*border: 1px solid #999;*/
    box-shadow: none !important;font-family: monospace;
    height: 24px;
    background-color: transparent;
}
textarea{
    outline: none !important;
    /*border: 1px solid #999;*/
    box-shadow: none !important;font-family: monospace;
    background-color: transparent;
}
.input-form{
    width: 100%;border: none;border-bottom: 2px solid black;font: normal 14px monospace;padding-left: 0;
}
.input-form:focus{
    border: none;border-bottom: 2px solid #ff0000;
}
.vert-alg-5{
    vertical-align: 5px;
}
.btn-buscar{
    background-color: #080; padding: 4px;color: #FFF;border-radius: 3px;
}
.btn-buscar:hover{
    background-color: #fc0 !important; padding: 4px;color: #000;cursor: pointer;
}
.btn-anular{
    border:1px solid #f00; padding: 4px;color: #F00;border-radius: 3px;
}
.btn-anular:hover{
    background-color: #f00;color: #fff;cursor: pointer;font-weight: bold;
}
.msgerror{
    text-align: center;display: none;color: #fff;
    outline: none;border-radius: 3px;
}
.border-fontcolor{
    -webkit-text-stroke: 2px whitesmoke;
}
/*----------Calendar-------------*/
.flecha:hover{
    cursor: pointer; color: #ffcc00;
}
.dia-calen:hover{
    background-color: #fc0 !important;cursor: pointer;
}
.hoy{
    color: #f00;text-decoration: underline;text-decoration-style: double;font-weight: bold;
}
.selecthoy{
    background-color: #fc0 !important;
}

/*-----------Ventana Modal--------*/
.mimodal{
    padding: 0;background-color: rgba(163, 161, 161, 0.68);position: fixed;width: 100%;min-height: 100%;z-index: 35353535;left:0;
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
    scroll-behavior: unset;
}

.mimodal .ventana{
    position: absolute;top: 0;left: 0;margin: 20% 30% 33% 30%;width: 40%;height: auto;background-color: white; border-radius: 7px;padding: 10px 20px;
}
.mimodal .ventana .titulo{
    position: relative;text-decoration: underline;color: #aa8800;font: bold 20px "futurist";width: 100%;height: 30px;letter-spacing: 3px;
}
.mimodal .ventana .titulo .img-titulo{
    position:absolute;left:5px;width:40%;
}
.mimodal .ventana .titulo .texto-titulo{
    position:absolute;right:5px;width:40%;text-align: right;font-weight: bold;text-decoration: underline #000099;font-family: "futurist";
}
.mimodal .ventana .texto{
    position: relative;width:100%;height: auto;border-bottom:1px dashed #a80;text-align: center;margin-top: 10px;
}
.mimodal .ventana .cerrar{
    float: right;text-align: right; margin-top: 10px;margin-left: 10px;
}
.mimodal .ventana .aceptar{
    float: right;text-align: right; margin-top: 10px;margin-left: 10px;
    color: #a80;
}
.mimodal .ventana .aceptar #bt-aceptar-modal{
    display: none;
    color: #000;
}


/*--------Medias querys------------*/
@media (min-width: 360px) and (max-width: 575px) {
    .mimodal .ventana .titulo{
        font-size: 10px;padding-right: 0;
    }
    .mimodal .ventana {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .inpt-modal{
        width: 100px;
    }
    #hearth, #loto{
        max-width: 300px;
    }
    #healindex, #loveindex{
        font: normal 16vw futurist  !important;
    }
    #amphindex{
        font: normal 8vw amphersand !important;
    }
}

/* Larger than mobile */
@media (min-width: 576px) and (max-width: 767px) {
    .mimodal .ventana .titulo{
        font-size: 10px;padding-right: 0;
    }
    .mimodal .ventana {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .inpt-modal{
        width: 100px;
    }
    #healindex, #loveindex{
        font: normal 16vw futurist  !important;
    }
    #amphindex{
        font: normal 8vw amphersand !important;
    }
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 768px) and (max-width: 991px){
    .mimodal .ventana .titulo{
        font-size: 14px;
    }
    .mimodal .ventana {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
    #healindex, #loveindex{
        font: normal 16vw futurist  !important;
    }
    #amphindex{
        font: normal 8vw amphersand !important;
    }
}

/* Larger than tablet */
@media (min-width: 992px) and (max-width: 1199px){
    .mimodal .ventana .titulo{
        font-size: 19px;
    }
}

/* Larger than desktop */
@media (min-width: 1200px) and (max-width: 1569px){

}

@media (min-width: 1570px) {

}