@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;
}
.bg-amarillo-app{
    background-color: #ffcc00;
}
.color-azul-app{
    color: #0000d4;
}
.bg-azul-app{
    background-color: #0000d4;
}
.color-verde-app{
    color: #090;
}
.bg-verde-app{
    background-color: #090;
}
.color-rojo-app{
    color:#fe0000;
}
.color-gris-app{
    color: #808080;
}
.bg-gris-app{
    background-color: #808080;
}
.color-negro{
    color: #000;
}
.font-futurist{
    font-family: futurist;
}




/*-----------------------------*/
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;
}
/*-------Perso bootStrap--------*/
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: rgba(255, 245, 176, 0.55);
    border-color: var(--bs-nav-tabs-link-active-border-color);
}
/*-----------------------------*/

body,html{
    font: normal 16px mispace;
}

.mouseover{
    cursor: pointer;
}
.fontweb {
    font-family: mispace;
}
.fontmono {
    font-family: Monospace;
}
.fontampher {
    font-family: amphersand;
}
::placeholder{
    color: #999;
    /*opacity: 0.6;*/
}
.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;
}
label{
    margin-bottom: 0 !important;color: #0000d4
}
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 12px mispace;padding-left: 0;height: 20px;
}
.input-form-txtarea{
    width: 100%;border: none;border-bottom: 2px solid black;font: normal 12px mispace;padding-left: 0;
}
.input-form-file{
    width: 100%;border: none;font: normal 12px space;padding-left: 0;height: 24px;
}
.input-form:focus{
    border: none;border-bottom: 2px solid #4dec4d;height: 20px;
}
.input-form-txtarea:focus{
    border: none;border-bottom: 2px solid #4dec4d
}
.vert-alg-5{
    vertical-align: 5px;
}
#textarea{
    resize: none;
}
/*----------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;
}

#div-index-logo{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
}
.font-8{
    font-size: 8px;
}
.font-10{
    font-size: 10px;
}
.font-12{
    font-size: 12px;
}
.font-14{
    font-size: 14px;
}
.font-16{
    font-size: 16px !important;
}
.font-26{
    font-size: 26px;
}
.font-30{
    font-size: 30px;
}
.capitalice{
    text-transform: capitalize;
}
/*-----------Btn cambiar telf-------------*/
#cambiatelf{
    border: 1px solid #fe0000;padding: 1px 2px;border-radius: 5px;color: #fff;cursor: pointer;background-color: #fe0000;
}
#cambiatelf:hover{
    border: none;color:#000;background-color: #fc0;
}
#cambiacelular{
    border: 1px solid #008800;padding: 1px 2px;border-radius: 5px;color: #fff;cursor: pointer;background-color: #080;
}
#cambiacelular:hover{
    border: none;color:#000;background-color: #fc0;
}
#btn-buscar-per, #vercitas, #btn-bus-per-nota, #btn-verlistadocitas, #btn-verlistadoperso, #btn-generar-pass{
     border: 1px solid #008800;padding: 1px 2px;border-radius: 5px;color: #fff;cursor: pointer;background-color: #080;
    font-weight: bold;
}
#btn-buscar-per:hover, #vercitas:hover, #btn-bus-per-nota:hover, #btn-verlistadocitas:hover, #btn-verlistadoperso:hover, #btn-generar-pass:hover{
    border: none;color:#000;background-color: #fc0;
}

#btn-backup{
    border: 1px solid #fc0;padding: 1px 2px;border-radius: 5px;color: #000;cursor: pointer;background-color: #fc0;
    font-weight: bold;height: 50px !important;
}
#btn-backup:hover{
    border: none;color:#fff;background-color: #ccc;
}

#btn-grabar-per, #btn-grabar-cita, #btn-grabar-expl, #btn-modusuario, #btn-addusuario{
     padding: 1px 2px;border-radius: 5px;color: #fff;cursor: pointer;background-color: #080;
     font-weight: bold; width: 100% !important;display: block;
 }
#btn-grabar-per:hover, #btn-grabar-cita:hover, #btn-grabar-expl:hover, #btn-modusuario:hover, #btn-addusuario:hover{
    border: none;color:#000;background-color: #fc0;
}
#gencode{
    border: 1px solid #fc0;padding: 1px 2px;border-radius: 5px;color: #000;cursor: pointer;background-color: #fc0;
}
#gencode:hover{
    color: #fff;
}
.btn-buscar{
    border: 1px solid #008800;padding: 1px 2px;border-radius: 5px;color: #fff;cursor: pointer;background-color: #080;
    font-weight: bold;
}
.btn-buscar:hover{
    border: 1px solid #fc0;color:#000;background-color: #fc0;
}
.btn-editar{
    border: 1px solid #0000d4;padding: 1px 2px;border-radius: 5px;color: #fff;cursor: pointer;background-color: #0000d4;
    font-weight: bold;
}
.btn-editar:hover{
    border: 1px solid #0000d4;color:#0000d4;background-color: transparent;
}
.btn-borrar{
    border: 1px solid #fe0000;padding: 1px 2px;border-radius: 5px;color: #fff;cursor: pointer;background-color: #fe0000;
    font-weight: bold;
}
.btn-borrar:hover{
    border: 1px solid #fe0000;color:#fe0000;background-color: transparent;
}
#btn-buscar-sinto{
    border: 2px solid #000;padding: 1px 2px;border-radius: 5px;color: #fe0000;cursor: pointer;background-color: #fff;
    font-weight: bold;
}
#btn-buscar-sinto:hover{
    border: 2px solid #fff;color:#000;background-color: transparent;
}

/*cell text overflow hidden , table must be set layout-fixed*/
.tabla-celloverflow{
    overflow: hidden;white-space: nowrap;
}
/*-----------MENU-----------------------*/
#div-iconosmenu{
    background-color: #eee;padding-left: 15px;
}
/*----------------------Footer fixed bottom----*/
#page-content {
    flex: 1 0 auto;
}

#footer {
    background-color: #ccc;position: sticky; bottom: 0;width: 100%;
}
.min-height{
    /*min-height: 83.35vh;*/
}
/*----------------Menu---------------------------------*/
#div-menu{
    /*background-color: #ddd;*/
}
.menu-item{
    cursor: pointer;
    float: left;margin-right: 10px;
    text-decoration: none !important;padding-left: 3px;padding-right: 3px;
}
/*----------------Sub menu-----------------------------*/
.item-submenu{
    text-decoration: none;width: 100%;float: left;clear: both;padding: 4px 5px;
}
.item-submenu:hover{
    background-color: #faf5d4;cursor: pointer;
}
.a-submenu{
    text-decoration: none!important;
}

#div-submenu{
    position: absolute;z-index: 4564664;background-color: #eeeeee;min-width: 120px;height: auto;display: none;padding: 3px 0;border: 1px solid #999;
    box-shadow: 0 4px 4px 1px rgba(0,0,0,0.45);
}
.divisor{
    border-bottom: 1px solid #999;float: left;clear: both;height: 3px;width: 100%
}
.contitemsmenu{
    display: none;
}


/*-----------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) {

}