@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&family=Lato:wght@700&family=Montserrat+Alternates:wght@400;700&family=Open+Sans:wght@600&display=swap');

.debug{border: 1px solid red;}

:root{
    --default-font : 'Montserrat';
    --default-alert-color: #EFDE07;
    --default-background-color: #181413; 
    --default-color: white;
    --font-bootstrap: 'Helvetica-Neue';
    --default-border-color: black;
}

.btn{ width: 135px; height: 52px;color: white;background-color:#EFDE07;
    color: black;border: none;outline: none;font-weight: bold;border-radius: 20px;cursor: pointer;
}

.btn-small{height: 20px; border-radius: 5px; display: flex; justify-content: center; align-items: center;font-size: 10px;}

.btn-sm{height: 20px; border-radius: 5px; display: flex; justify-content: center; align-items: center;font-size: 10px;}

.btn-page{width: 20px;height: 20px; color: black;border: none;outline: none;font-weight: bold;font-size: 0.8em;
            background-color: white; border: 1px solid #b4abab; cursor: pointer;
}

.btn-page:hover{
    background-color: #1F2A4B;
    color: var(--default-color);
}

.btn-medium{width: 120px;height: 40px;font-size: 0.8em;}

.btn:active{transform: scale(95%);}

.btn:hover{transition: 0.3s;opacity: 0.9;}

.btn-square-small{
    width: 30px;height:30px;
    border-radius:5px;
}

.btn-square-small img{
    width: 20px;
    height: 20px;

}

.important{color: #EFDE07;}

/* form-controls */
.form-control{width: 150px;height: 40px;border: none;border-bottom: 1px solid var(--default-border-color);
    background-color: transparent;outline: none;font-family: var(--default-font);}

.form-control-text-area{width: 90%;height: 80px;margin-bottom: 10px;border: 1px solid white;}

.form-control-radio{
    -webkit-appearance: none; -moz-appearance: none; appearance: none;border-radius: 00%;
    width: 24px;height: 24px;border: 2px solid #999;transition: 0.2s all linear;
    margin-right: 5px;position: relative;top: 4px;
}

input.form-control-radio:checked {border: 12px solid var(--default-alert-color);}
/* Form controls */

/* item-list */
.item-list{width: 100%; height: 30px; border-bottom: 1px solid var(--default-color);cursor: pointer; transition: all 0.2s ease;}
.item-list:hover{transform: scale(90%); color: var(--default-alert-color);}
/* item-list */

/* Spinner */
div.loader{width: 100px;height: 100px;float: left;margin: auto auto;margin-top: 10%;margin-left: calc(50% - 50px);}

div.small{width: 50px;height: 50px; margin-left: calc(50% - 25px);}

section.loaderSection{width: 90%;height: 90%;border-top: 1px solid transparent;border: 4px solid #EFDE07;border-radius: 50%;border-top: 4px solid #148a76;animation: girar 1s ease infinite;}

@keyframes girar {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
/* Spinner */

/* Loader page */
div#loaderScreen{
    width: 100%;
    height: 100%;
    /* max-height: 760px; */
    position: fixed;
    background-color: #1e1e1eee;
    display: none;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    z-index: 9999999999;
}

div#loaderScreen img{
    margin-top: 100px;
}

div#loaderScreen p{
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 59px;
    color: #FFFFFF;
}

.loader {
    position: relative;
    width: 186px;
    height: 186px;
    display: flex;
    justify-content: center;
    align-items:center;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    color: #999999;
  }
  
  .loader:before , .loader:after{
    content: '';
    border-radius: 50%;
    position: absolute;
    inset: 0;
    box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.3) inset;
  }
  .loader:after {
    box-shadow: 0 6px 0 #FF3D00 inset;
    animation: rotate 2s linear infinite;
  }
  
  @keyframes rotate {
    0% {  transform: rotate(0)}
    100% { transform: rotate(360deg)}
  }
/* Loader page */

/* Alerts */
div.alert{
    position: fixed;
    z-index: 999999;
    width: 80%;
    max-width: 900px;
    max-height: 350px;
    display: flex;
    opacity: 0;
    z-index: -1;
    flex-direction: column;
    -webkit-box-shadow: 0px 3px 15px 5px #3d3d3d; 
    box-shadow: 0px 3px 15px 5px #3d3d3d;
    padding: 10px;
    margin: 20px auto;
    float:left;
    left: 0;
    right: 0;
    border-radius:10px;
    overflow-y: Scroll;
    transition: all 0.3s ease-in-out;
}

.alert-tittle{
    width: 100%;
    text-align:center;
}
/* Alerts */

.row{
    display: flex;
    flex-direction: row;
}

.col{
    display: flex;
    flex-direction: column;
}

/* Menu flotante */
div.float-menu{
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 0px;
    position: absolute;
    width: 120px;
    min-height: 116px;
    background: #FFFFFF;

    border: 1px solid #F2F3F5;
    box-shadow: 0px 4px 4px rgba(169, 174, 184, 0.24);
    border-radius: 4px;
}

div.float-menu .floatMenuItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 16px;
    gap: 8px;
    width: calc(100% - 32px);
    height: 20px;
    background: #FFFFFF;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #4E5969;
    cursor: pointer;
}

div.float-menu .floatMenuItem:hover {
    /* border-bottom: 1px solid rgb(193, 206, 13); */
    /* background: #a7a7a7c9; */
}
/* Menu flotante */

/*Modals*/
.manuModal{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 0 0 0;
    background-color: #000000a4;
    z-index: 999999;
    display: none;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

div.modalContentContainer{
    width: 60%;
    padding: 20px;
    background-color: var(--default-color);
    margin: auto auto;
    border-radius: 10px;
    font-family: var(--default-font);
}

div.modalContentContainer-flat{
    padding: 20px;
    width: 40%;
    background-color: var(--default-color);
    margin: auto auto;
    border-radius: 10px;
    font-family: var(--default-font);
}

div.modalHeader{
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    font-family: var(--default-font);
}

.modalTitle{
    width: 100%;
    height:100%;
    font-size: 24px;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close{
    width: 10%;
    background-color: var(--default-color);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 90%;
    font-size: 24px;
    cursor: pointer;
}

div.modalContent{
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-left: 5%;
    height: calc(100% - 120px);
    justify-content: center;
    vertical-align: center;
}

div.modalContentBook{
    height: calc(100% - 260px);
}

div.modal-body{
    max-height: 400px;
    overflow-y: scroll;
}

div.modalFoter{
    display: flex;
    width: 100%;
    height: 60px;
    border-radius: 10px;
    text-align: right;
    justify-content: flex-end;
    vertical-align: center;
    align-items: center;
}

div.mh-small{
    width: 500px;
    height: 180px;
    /* border: 1px solid red; */
}
/* Modals */

/* Tarjetas (cards) */
    div.card{
        min-width: 150px;
        max-width: 250px;
        min-height: 200px;
        -webkit-box-shadow: 2px 1px 17px -3px rgba(0,0,0,0.1); 
        box-shadow: 2px 1px 17px -3px rgba(0,0,0,0.1);
        border-radius: 10px;
        /* border: 1px solid red; */
    }

    div.cardHeader{
        width: 100%;
        height: 40px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    div.cardHeader .card-title{
        width: 100%;
        height: 100%;
        margin-top: 0;
        display: flex;
        justify-content:center;
        align-items:center;
    }

    div.cardBody{
        padding: 10px;
        width: calc(100% - 20px);
    }
/*  */

/* Notificaciones (Tarjetas de notificaciones) */
div.cvrNotifyCard{
    /* border: 1px solid red; */
    position: absolute;
    width: 300px;
    height: 130px;
    padding: 10px;
    text-align: center;
    margin-left: calc(100% - 325px);
    border-radius: 5px;
    background-color: aliceblue;
    color: #181413;
    justify-content: justify;
    z-index: 10000;
    margin-top: -150px;
    transition: all 1s ease;
    font-family: var(--default-font);
}

div.closeButtom{
    width: 20px;
    height: 20px;
    margin-left: calc(100% - 22px);
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
}

.btnCloseManuModal{
    cursor: pointer;
}

div.notifyContentContainer{
    /* border: 1px solid red; */
    margin-top: 2px;
}
/* Notificaciones (Tarjetas de notificaciones) */

/*Tamaños*/
.w-20{width: 20%;} .w-25{ width: 25%; } .w-30{width: 30%;} .w-35{width: 35%;} .w-40{ width: 40%;} .w-45{width: 45%;} .w-50{ width: 50%; } .w-55{width: 55%;} .w-60{width: 60%;} .w-65{width: 65%;} .w-70{ width: 70%; } .w-75{width: 75%;} .w-80{ width: 80%; } .w-85{width: 85%;} .w-90{width: 90%;} .w-95{width: 95%;} .w-100{ width: 100%; }
.h-20{height: 20%;} .h-25{height: 25%;} .h-40{height: 40%;} .h-50{height: 50%;} .h-60{height: 60%;} .h-80{height: 80%;} .h-100{height: 100%;}

.w-100-px{width: 100px;}
.h-20-px{height: 20px} .h-50px{height: 50px} .h-100px{height: 100px} .h-150px{height: 150px} .h-200px{height: 200px}
/* Tamaños */

/* Colores */
.c-white{color: white;}

.c-green{color: #148a31;}

.c-blue{color: #148a76;}

.c-black{color: #000000;}

.bg-default{background-color: var(--default-background-color); color: var(--default-color)}

.bg-blue{background-color: #148a76;color: white;}

.bg-dark-blue{background-color: #1F2A4B;color: white;}

.bg-dark{background-color:#181413; color: white}

.bg-gray{background-color: #b4abab;color: black;}

.bg-green{background-color: #148a31;color: white;}

.bg-light-green{background-color: #2dc07c;color: white;}

.bg-orange{background-color: #b1770c;color: white;}

.bg-purpple{background-color: #430c9c;color: white;}

.bg-red{background-color: #811f1f;color: white;}

.bg-white{background-color: #ffffff;color: black;}

.bg-yellow{background-color: #e5e90c;color: rgb(0, 0, 0);}


/* Colores */

/* Display */
.d-none{display: none;}  
/*  */

/* Flex */
.d-flex{display: flex;}
.d-grid{display: grid;}
.f-end{justify-content: flex-end;}
.f-center{text-align: center; justify-content: center;}
.f-start{ justify-content: start;}
.f-d-column{flex-direction: column;}
.p-i-center{place-items: center;}
/* Flex */

/* Margenes */
.m-auto{margin:  auto auto;}
.m-l-5px{margin-left: 5px;}
.m-l-10px{margin-left: 10px;}
.m-l-20px{margin-left: 20px;}
.m-l-30px{margin-left: 30px;}
.m-l-40px{margin-left: 40px;}
.m-l-50px{margin-left: 50px;}

.m-l-p-5{margin-left: 5%;}
.m-l-p-10{margin-left: 10%;}
.m-l-p-15{margin-left: 15%;}
.m-l-p-20{margin-left: 20%;}
.m-l-p-25{margin-left: 25%;}
.m-l-p-30{margin-left: 30%;}
.m-l-p-35{margin-left: 35%;}
.m-l-p-40{margin-left: 40%;}
.m-l-p-45{margin-left: 55%;}
.m-l-p-50{margin-left: 50%;}


.m-r-10px{margin-right: 10px;}

h4.m-t-0px{margin-top: 0;}
.m-t-0px{margin-top: 0px;}
.m-t-10px{margin-top: 10px;}
.m-t-20px{margin-top: 20px;}
.m-t-30px{margin-top: 30px;}
.m-t-40px{margin-top: 40px;}
.m-t-50px{margin-top: 50px;}

.m-b-0px{margin-bottom: 0px;}
.m-b-5px{margin-bottom: 5px;}
.m-b-10px{margin-bottom: 10px;}
.m-b-20px{margin-bottom: 20px;}
/* Margenes */

/* Padding */
.p-10px{padding: 10px;}
.p-r-10px{padding-right: 10px;}
/* Padding */

/* Float */
.f-left{float:left;}
/* Float */

/* Borders */
.resalt{border: 1px solid red;}
.bordered{border: 1px solid var(--default-border-color)}
/* Borders */

/* overFlow */
.ov-y-hidde{overflow-y: hidden;}

.ov-y-scroll{overflow-y: scroll;}

.scrollBarOff::-webkit-scrollbar {
    display: none;
}

.scrollBarOff{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* overFlow */

/* Text align */
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}
/* Text align */

/* Tex size */
.textSize-m{
    font-size: 12px;
}

.f-s-10px{font-size: 10px;} .f-s-12px{font-size: 12px;}
/* Tex size */

/* Bloques de modulos */
.module{
    -webkit-box-shadow: 0px 3px 15px 5px #B3B3B3; 
    box-shadow: 0px 3px 15px 5px #B3B3B3;
}
/* Titles */

/* Titles */

/* Cursores */
.c-pointer{cursor: pointer;}
/* Cursores */

/* Lista de seleccion */
div.selectList{
    width: calc(100% - 20px);
    min-height: 3px;
    max-height: 100%;
    overflow-y: scroll;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
}

p.selectListItem{
    width: calc(100% - 10px);
    height: 40px;
    padding-left: 10px;
    border-bottom: 1px solid #ccc;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

p.selectListItem:hover{
    opacity: 0.8;
}

.bold{font-weight: bold;}
/* Lista de seleccion */

/* Fuentes */
@font-face {
    font-family: 'exo2' ;
    src: url('./fonts/Exo2-Regular.otf');
}

@font-face {
    font-family: 'Helvetica-Neue' ;
    src: url('./fonts/HelveticaNeueW0166MediumIt.ttf');
}

.f-s-12px{font-size: 12px;}
/*fuentes */

@media screen and (max-width:600px) {
    div.modalContentContainer-flat{
        width: 95%;
        height: 95%;
        margin-left: 2.5%;
    }
}