.container-fluid {
    padding-left: 0px !important;
    padding-right: 0px !important;
}


body {
    /*font-family: 'Montserrat', sans-serif;*/
    /*font-size: 0.8rem;*/
    padding-bottom: 20px;
    overflow-x: hidden; /*Para evitar el zoom al darle click a un textbox*/

    background-color: #F8FBFC !important;
}

b, strong {
    font-weight: bold !important;
}

.navbar {
    /*Para que se vea una sombra debajo del navbar:*/
    /*  box-shadow: 0 0 1px 1px rgba(20,23,28,.1), 0 3px 1px 0 rgba(20,23,28,.1);*/
}

.navbar-brand {
    /*font-family: 'Pacifico', cursive;*/
    font-family: 'K2D', sans-serif !important;
    font-size: 1.5rem;
    font-weight: 600 !important;
}

body, h1, h2, h3, h4, h5, h6, p, a {
    /*font-family: 'Pacifico', cursive !important;*/
    /*  font-family: 'K2D', sans-serif !important;*/
    /* Use Lato font:*/
    /* font-family: 'Lato', sans-serif !important;*/
    font-family: 'Lato' !important;
    font-weight: 400 !important;
}

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

                            New AWILDA branding styling 2024: 

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


/*@*Para que pantalla no haga zoom automaticamente en la version mobile al seleccionar un textbox:*@ */
input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="textarea"], input[type="time"], input[type="url"], input[type="week"], select:focus, textarea {
    font-size: 14px !important;
}


/*@*Para que pantalla no tenga espacio de mas en el footer:*@*/
.main-panel > .content {
    min-height: calc(94vh - 123px) !important;
}


.sidebar {
    background-color: #F8FBFC !important;
    z-index: 1000 !important; /* Ensure this value is higher than the z-index of .topNav */
    height: 100vh; /* Ensure the sidebar takes up the full viewport height */
    overflow: hidden; /* Prevent overflow issues */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .sidebar .nav p {
        font-weight: 600 !important;
    }

.sidebar-mini {
    font-weight: 600 !important;
}

.sidebar-normal {
    font-weight: 600 !important;
}

.sidebar .sidebar-background:after {
    /*             background-image: url("/Content/images/Sidebar_AwildaPattern.png") !important;*/
    /* background-image: url("/Content/images/Sidebar_AwildaPatternV3.png") !important;*/
    /*  background-image: url("/Content/images/Sidebar_AwildaPatternV4.png") !important;*/
    background-image: url("/Content/images/Sidebar_AwildaPatternV5.png") !important;
    filter: opacity(0.50);
    background-size: cover;
    background-position: bottom;
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    opacity: 1;
    bottom: 0; /* Position the background at the bottom */
}

.sidebar-wrapper {
    overflow: hidden; /* Ensure no scrolling */
    flex: 1;
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
    justify-content: start;
}

/* Additional styles to ensure the sidebar looks good */
.logo img {
    max-width: 150px;
    max-height: 150px;
    margin-bottom: 20px;
}

.nav-item.active > a, .nav-item.active > a i {
    color: #ffffff !important;
    background-color: #354F8E !important;
}

.nav-item.active .subitem > a, .nav-item.active .subitem > a i {
    background-color: #8F81EF !important;
}








.topNav {
    /*    background-color: #eeeeee8a !important;*/
    background-color: #F8FBFC !important;
    box-shadow: none;
    z-index: 999 !important; /* Lower than .sidebar */
}

.sidebar[data-background-color=black] {
    /* background: #354F91 !important; */
    /* background: rgb(53,79,145); */
    /* background: linear-gradient(90deg, rgba(53,79,145,1) 0%, rgba(252,70,107,1) 100%); */
    /* background: rgb(53,79,145); */
    /* background: linear-gradient(90deg, rgba(53,79,145,1) 35%, rgba(36,53,97,1) 100%); */
    background: rgb(42,62,113);
    /* background: linear-gradient(90deg, rgba(42,62,113,1) 35%, rgba(53,79,145,1) 100%); */
}


.sidebar[data-background-color=white] {
    /* background: #354F91 !important; */
    /* background: rgb(53,79,145); */
    /* background: linear-gradient(90deg, rgba(53,79,145,1) 0%, rgba(252,70,107,1) 100%); */
    /* background: rgb(53,79,145); */
    /* background: linear-gradient(90deg, rgba(53,79,145,1) 35%, rgba(36,53,97,1) 100%); */
    /* background: rgb(42,62,113);*/
    /* background: linear-gradient(90deg, rgba(42,62,113,1) 35%, rgba(53,79,145,1) 100%); */
}

.awildaLogo {
    max-width: 150px;
    max-height: 150px;
    margin-bottom: 20px;
}

.awildaLogoText {
    font-family: K2D;
    font-weight: 600 !important; /* Esto corresponde a Semibold */
    color: #354F8E !important;
    font-size: 46px;
    line-height: 1.2;
}

.awildaLogoText_small {
    font-family: K2D;
    font-weight: 600 !important; /* Esto corresponde a Semibold */
    color: #354F8E !important;
    font-size: 12px;
    line-height: 1.2;
}


.PageTitle {
    color: #354F8E !important;
    font-size: 2.25rem;
}

/*Marcar en el menu principal la pantalla seleccionada: */
.sidebar .nav li.active > a, .sidebar .nav li.active > a i {
    color: #ffffff !important;
    background-color: #354F8E !important;
}

.sidebar .nav li.active .subitem > a, .sidebar .nav li.active .subitem > a i {
    background-color: #8F81EF !important;
}


.alert-primary {
    background-color: #354F8E !important;
    border-color: #354F8E !important;
}

.alert-danger {
    background-color: #FF7C5C !important;
    border-color: #FF7C5C !important;
}

.alert-success {
    background-color: #3AC3CF !important;
    border-color: #3AC3CF !important;
}


/* Ensure the button styles are applied correctly */
.btn.btn-success {
    background-color: #3AC3CF !important;
    border-color: #3AC3CF !important;
    color: white !important;
}

.btn.btn-outline-success {
    color: #3AC3CF !important;
    background-color: transparent !important;
    border-color: #3AC3CF !important;
}


.btn.btn-primary {
    background-color: #354F8E !important;
    border-color: #354F8E !important;
}

.btn.btn-outline-primary {
    color: #354F8E !important;
    background-color: transparent !important;
    border-color: #354F8E !important;
}



.btn.btn-danger {
    background-color: #FF7C5C !important;
    border-color: #FF7C5C !important;
}

.btn.btn-outline-danger {
    color: #FF7C5C !important;
    background-color: transparent !important;
    border-color: #FF7C5C !important;
}


.btn.btn-warning {
    background-color: #FFB647 !important;
    border-color: #FFB647 !important;
}

.badge-primary {
    background-color: #354F8E !important;
    border-color: #354F8E !important;
}

.badge-danger {
    background-color: #FF7C5C !important;
    border-color: #FF7C5C !important;
}

.badge-success {
    background-color: #3AC3CF !important;
    border-color: #3AC3CF !important;
}



.btn-warning .badge-warning {
    background-color: #FFB647 !important;
    border-color: #FFB647 !important;
}


.btn.btn-outline-secondary {
    color: #455A64 !important;
    background-color: transparent !important;
    border-color: #999999 !important;
}

.btn.btn-secondary {
    background-color: #EEECFC !important;
    border-color: #EEECFC !important;
}

/* Awilda Brand Secondary Button */
.btn.btn-awilda-secondary {
    background-color: var(--awilda-indigo, #A59AF2) !important;
    border-color: var(--awilda-indigo, #A59AF2) !important;
    color: #fff !important;
    font-family: 'K2D', sans-serif;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn.btn-awilda-secondary:hover, .btn.btn-awilda-secondary:focus {
    background-color: var(--awilda-indigo-alt, #8F81EF) !important;
    border-color: var(--awilda-indigo-alt, #8F81EF) !important;
    color: #fff !important;
    outline: none;
}

.btn.btn-outline-awilda-secondary {
    color: var(--awilda-indigo, #A59AF2) !important;
    background-color: transparent !important;
    border-color: var(--awilda-indigo, #A59AF2) !important;
    font-family: 'K2D', sans-serif;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn.btn-outline-awilda-secondary:hover, .btn.btn-outline-awilda-secondary:focus {
    background-color: var(--awilda-indigo, #A59AF2) !important;
    border-color: var(--awilda-indigo, #A59AF2) !important;
    color: #fff !important;
    outline: none;
}


.text-charge {
    color: #FF7C5C !important;
}

.bg-danger {
    background-color: #FF7C5C !important;
}


.bg-success {
    background-color: #3AC3CF !important;
}

.card .card-header-success .card-icon {
    background: linear-gradient(60deg, #c5eef1, #3AC3CF) !important;
}


.text-discount {
    color: #FFB647 !important;
}

.text-payment {
    color: #3AC3CF !important;
}

.text-primary {
    color: #354F8E !important;
}

.schoolName {
    color: #283050 !important;
    font-weight: 600 !important;
}


.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu a:hover, .dropdown-menu a:focus, .dropdown-menu a:active {
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
    background-color: #9c27b0;
    color: #354F8E;
}



.alert-warning {
    background-color: #FFB647 !important;
}

.bg-dark {
    background-color: #283050 !important;
}


.card-text, .card-icon {
    background-color: #A59AF2 !important;
}

.badge-secondary {
    background-color: #A59AF2 !important;
}

.btn-default {
    background-color: #A59AF2 !important;
}


.pagination > .active > a {
    background-color: #FFB647 !important;
    border-color: #FFB647 !important;
    color: white !important;
}

.pagination > li > a {
    color: #FFB647 !important;
}

p > a {
    color: #FFB647 !important;
    text-decoration: none;
}

.dropdown-menu a:hover {
    /*   background-color: #9c27b0;
    color: #354F8E;*/

    color: #ffffff !important;
    background-color: #354F8E !important;
}


/* Para evitar que en versión móvil se vea el sidebar con fondo oscuro al abrirlo: */
@media (max-width: 991px) {
    .sidebar::before, .off-canvas-sidebar nav .navbar-collapse::before {
        background-color: transparent !important;
    }
}




/* FIN DE NEW BRANDING*/

.btn {
    text-transform: none;
}



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

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}




/*Pantalla de login*/
.form-signin {
    width: 100%;
    max-width: 400px;
    padding: 15px;
    padding-top: 25px;
    margin: auto;
}

/* CSS a utilizarse para columna que contiene los enlaces de 'Edit | Details | Delete' */
.edit-column {
    /*min-width: 160px;*/
    text-align: right;
}


.bmd-form-group {
    padding-top: 13px !important;
    padding-bottom: 20px !important;
}

/* Estilo para Dropdown deshabilitado */
select:disabled {
    background-color: #f2f2f2; /* Cambia el color de fondo */
    color: #808080; /* Cambia el color del texto */
    cursor: not-allowed; /* Cambia el cursor del mouse a 'no permitido' */
    /* Otros estilos personalizados según tus preferencias */
}



/*   --------------------------------------------------------------------------------------------------------------
     12/mar/2024 - mejorar diseno visual entre los estudiantes y su monto a pagar en pantalla de registro de pagos:
     --------------------------------------------------------------------------------------------------------------
 */

.bmd-label-static {
    font-weight: 600 !important;
}

/* Styles for student section headers */
.student-section-header p {
    background-color: #354F8E;
    color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 30px !important;
    font-size: 18px;
    font-weight: 600;
    padding-left: 20px !important;
}

/* Styles for dividers between students */
/*.student-divider {
        border: 0;
        height: 2px;*/
/*background-image: linear-gradient(to right, transparent, #007bff, transparent);*/
/*margin-top: 30px;*/ /* Adds space above the divider */
/*margin-bottom: 30px;*/ /* Adds space below the divider */
/*}*/

/* Additional styling for the .row class to ensure proper spacing */
.row {
    margin-bottom: 15px;
}

/* Style for input groups to align items vertically */
.input-group {
    align-items: center;
}



/* Make sure inputs and labels are properly aligned and have spacing */
.payAmt,
.payComment {
    margin-top: 10px;
}

/* Style for input fields to make them stand out */
input.form-control {
    /*border: 1px solid #ced4da;
        box-shadow: none;*/ /* Removes the default bootstrap shadow */
}


.balance-display {
    text-align: left;
    padding-left: 40px;
    margin-top: 5px; /* Small space from the input field */
}

.balance-label {
    font-weight: 600;
    font-size: 11px;
}



.balance-amount {
    color: #ff6f50; /* Red color for the balance amount */
    font-weight: 600;
    /*Display the balance amount inside a grey card:*/
    background-color: #f8f9fa; /* Light grey background */
    padding: 5px 10px; /* Small padding for the balance amount */
    border-radius: 5px; /* Rounded corners for the balance amount */
}


.clickable {
    cursor: pointer; /* Changes the cursor to indicate it's clickable */
}


.balance-divider {
    position: relative; /* Needed for pseudo-element positioning */
    padding-bottom: 20px; /* Add some space below the divider */
}


    .balance-divider::after {
        content: '';
        display: block;
        margin: 0 auto; /* Center the element */

        margin-top: 20px;
        width: 90%;
        height: 2px;
        /* background: linear-gradient(to right, #007bff, #004485);*/
        background: linear-gradient(to right, #ffc98166, #ffc981, #ffc98166);
    }

.gray-footer {
    /*Add Padding to the top and bottom of 20px:*/
    padding: 20px 0 !important;
    background-color: #EEEEEE !important
}

.totalAmtLabel {
    font-weight: 600;
    font-size: 18px;
}

.totalAmtValue {
    padding-left: 10px;
    font-weight: 800;
    font-size: 20px;
    /*Display value inside a blue card:*/
    background-color: #00bcd4;
    color: white;
    padding: 5px 10px; /* Small padding for the balance amount */
    border-radius: 5px; /* Rounded corners for the balance amount */
    margin-left: 10px;
}


/* Para que los textbox habilitados tengan un fondo gris claro: */
.form-control {
    background-color: #f5f5f58c !important;
}


/* Para que los textbox deshabilitados tengan un fondo gris: */
.form-control[disabled], fieldset[disabled] .form-control, .form-group .form-control[disabled], fieldset[disabled] .form-group .form-control {
    background-color: #F5F5F5;
    /*    cursor: not-allowed;
    border-bottom: 1px dotted #d2d2d2;
    background-repeat: no-repeat;*/
}









/* responsive text queries */
@media screen and (min-width:993px) {

    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        max-width: 280px;
    }


    .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
        width: 300px;
    }

    h2 {
        font-size: 1.7rem;
    }
}

@media screen and (max-width: 992px) {
    /*a, p, .btn, input, div, span, h4 {
        font-size: 95%;
    }*/

    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 22px !important;
    }

    h3 {
        font-size: 18px !important;
    }
}

@media screen and (max-width: 768px) {
    /*a, p, .btn, input, div, span, h4 {
        font-size: 90%;
    }*/

    h1 {
        font-size: 20px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    h3 {
        font-size: 16px !important;
    }
}



/*PARA QUE BOTONES Y DIV NO PIERDAN EL COLOR DE BACKGROUND AL IMPRIMIR LA PANTALLA*/
@media print {

    body {
        -webkit-print-color-adjust: exact;
    }

    table .bg-dark {
        background-color: #343a40 !important;
    }

    .badge {
        border: none !important;
    }
}

/* Desarrollar la opcion de grid XXL: */
@media (min-width: 1400px) {
    .col-xxl-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxl-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxl-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxl-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxl-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxl-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxl-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxl-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxl-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxl-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .offset-xxl-0 {
        margin-left: 0;
    }

    .offset-xxl-1 {
        margin-left: 8.333333%;
    }

    .offset-xxl-2 {
        margin-left: 16.666667%;
    }

    .offset-xxl-3 {
        margin-left: 25%;
    }

    .offset-xxl-4 {
        margin-left: 33.333333%;
    }

    .offset-xxl-5 {
        margin-left: 41.666667%;
    }

    .offset-xxl-6 {
        margin-left: 50%;
    }

    .offset-xxl-7 {
        margin-left: 58.333333%;
    }

    .offset-xxl-8 {
        margin-left: 66.666667%;
    }

    .offset-xxl-9 {
        margin-left: 75%;
    }

    .offset-xxl-10 {
        margin-left: 83.333333%;
    }

    .offset-xxl-11 {
        margin-left: 91.666667%;
    }

    .order-xxl-first {
        order: -1;
    }

    .order-xxl-last {
        order: 13;
    }

    .order-xxl-0 {
        order: 0;
    }

    .order-xxl-1 {
        order: 1;
    }

    .order-xxl-2 {
        order: 2;
    }

    .order-xxl-3 {
        order: 3;
    }

    .order-xxl-4 {
        order: 4;
    }

    .order-xxl-5 {
        order: 5;
    }

    .order-xxl-6 {
        order: 6;
    }

    .order-xxl-7 {
        order: 7;
    }

    .order-xxl-8 {
        order: 8;
    }

    .order-xxl-9 {
        order: 9;
    }

    .order-xxl-10 {
        order: 10;
    }

    .order-xxl-11 {
        order: 11;
    }

    .order-xxl-12 {
        order: 12;
    }
}

/* =============================
   Awilda SweetAlert2 Brand Styles
   ============================= */
.swal2-popup.awilda-alert {
    border-radius: 12px;
    font-family: 'K2D', sans-serif;
    color: var(--awilda-navy-alt, #354F8E);
    box-shadow: 0 8px 32px rgba(40,48,80,0.12);
    padding: 32px 24px 24px 24px;
    max-width: 420px;
}
.swal2-title.awilda-title {
    color: var(--awilda-navy, #283050);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
    font-family: 'K2D', sans-serif;
}
.swal2-html-container.awilda-body, .swal2-content.awilda-body {
    color: var(--awilda-navy-alt, #354F8E);
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-family: 'K2D', sans-serif;
}
.swal2-confirm.awilda-btn {
    background: var(--awilda-primary-teal, #3AC3CF) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-family: 'K2D', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 10px 32px;
    border: none;
    box-shadow: none;
    transition: background 0.2s;
    margin: 5px;
}
.swal2-confirm.awilda-btn:hover, .swal2-confirm.awilda-btn:focus {
    background: var(--awilda-primary-teal-alt, #58CCD6) !important;
    color: #fff !important;
    outline: none;
}
.swal2-confirm.awilda-btn-danger {
    background: var(--awilda-coral, #FF947A) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-family: 'K2D', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 10px 32px;
    border: none;
    box-shadow: none;
    transition: background 0.2s;
    margin: 5px;
}
.swal2-confirm.awilda-btn-danger:hover, .swal2-confirm.awilda-btn-danger:focus {
    background: var(--awilda-coral-alt, #FF7C5C) !important;
    color: #fff !important;
    outline: none;
}
.swal2-cancel.awilda-btn-secondary {
    background-color: #fff !important;
    color: var(--awilda-indigo, #A59AF2) !important;
    border: 2px solid var(--awilda-indigo, #A59AF2) !important;
    border-radius: 8px !important;
    font-family: 'K2D', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 10px 32px;
    box-shadow: none;
    transition: all 0.2s;
    margin: 5px;
}
.swal2-cancel.awilda-btn-secondary:hover, .swal2-cancel.awilda-btn-secondary:focus {
    background-color: var(--awilda-indigo, #A59AF2) !important;
    border-color: var(--awilda-indigo, #A59AF2) !important;
    color: #fff !important;
    outline: none;
}
.swal2-icon.swal2-warning {
    border-color: var(--awilda-coral, #FF947A) !important;
    color: var(--awilda-coral, #FF947A) !important;
    background: #FF947A22 !important;
}