/* Error de minimización. Devolviendo el contenido no minimizado.
(25,1): run-time error CSS1019: Unexpected token, found '@import'
(25,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500&family=Nunito:wght@200;300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')'
 */
/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500&family=Nunito:wght@200;300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    background-color: #f7f7f7 !important;
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
}
h1,h2,h3,h4,h5,h6,p {
    margin:0;
}

.primary {
    color: #C8102E;
}

.gray {
    color: #707372;
}
.bue {
    color: #69B3E7;
}
.contenedor {
    width: 90%;
    margin: 0 auto;
}
/*.contenido {
    width: 100%;
    display: flex;
}*/
/*BODY CONTENT*/
.content-page {
    margin-top:105px;
    margin-top: 50px;
    flex-direction: column;
    gap: 5px;
}
.padding {
    padding: 40px 50px;
}
.shadow {
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
}
.rounded {
    border-radius: 5px 5px 5px 5px;
}
.bg-white {
    background-color: white;
}
.flex-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.flex {
    display: flex;
    gap: 15px;
    flex-flow:wrap;
}
/*TEXT*/
.title {
    font-weight: 600;
}
.subtitle{

}
/*NAVBAR*/
.top-nav {
    background-color: white;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    border-radius: 0px 0px 10px 10px;
    margin-bottom: 20px;
    background-color: #fcfcfc;
    display: flex;
    left: 50%;
    transform: translate(-50%, 0);
    height: 100px;
    top: 0;
    position: fixed;
    z-index: 10;
}

.linkMenu {
    background: none !important;
    border: 0 !important;
    color: #162436 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

    .linkMenu a:hover,
    .linkMenu a:hover * {
        text-decoration: underline !important;
    }

.menu {
    padding: 25px 25px;
    margin: 0 auto;
}

.image-menu {
    padding: 25px 25px;
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}

.cardLayout {
    position: relative;
    height: 200px !important;
    width: 250px !important;
}

.cardFlex {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 270px !important;
    text-align: center;
    justify-content: space-between;
    /*gap :30px;*/
    padding: 0px 20px;
    /*margin: 20px 0px;*/
}

.titleCard {
    font-size: large;
    font-weight:600;
    letter-spacing: 0.5px;
}
.material-symbols-outlined {
    font-weight: 200 !important;
    font-size: 40px !important;
}

.info-card {
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content:center;
    padding: 20px;
    border: 2px solid rgba(200,16,46,0.2);
    border-radius: 5px;
    /*box-shadow: 0px 5px 15px -3px rgba(0,0,0,0.1);*/
}

.border {
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
}
.shadow {
    box-shadow: 0px 5px 15px -3px rgba(0,0,0,0.1);
}

.center {
    align-items: center;
}
.text-center{
    text-align:center;
}
.styleContainerLogin {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*width: 50%;
    height: 50%;*/
    /*position: relative;
    margin-top: 5px;
    padding: 15px 5%;*/
    background-color: white;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    border-radius: 5px 5px 5px 5px;
}
.loginFlex {
    display: flex;
    flex-direction: column;
    padding: 100px 100px;
    gap: 50px;
}
.alert h5 {
    font-family: Quicksand;
    font-weight: bold;
}

.alert {
    width: 50%;
    /*margin: 30px auto;*/
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    display: none;
    justify-content: space-between;
    position: absolute;
    top: 25%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -25%);
}

.alert-login {
    width: 90%;
    top: 6%;
}

.alert-success {
    background-color: #a8f0c6;
    border-left: 5px solid #178344;
}

.alert-error {
    background-color: #f7a7a3;
    border-left: 5px solid #8f130c;
}
.displayBlock {
    display: flex !important;
}
.boxImageLogin {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 1855px) {
    /*.contenido {
        width: 800px;
    }*/

    .facturacion {
        zoom: 0.86;
    }

    .grafo {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 1600px) {
    .contenedor {
        width: 90%;
    }

    .contenido {
        width: 100%;
    }
}

@media (max-width: 1368px) {
    .contenedor {
        width: 80%;
    }

    .contenido {
        width: 100%;
    }
}

@media screen and (max-width: 1105px) {
    .contenido {
        width: 200px;
    }
}

@media (min-width: 768px) {
    .contenedor {
        width: 85%;
    }
    .contenido {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .top-nav {
        left: 0;
        transform: translate(0, 0);
        width: 100%;
    }

    .image-menu {
        display: none;
    }

    .menu {
        width: 100%;
    }
}