.graph-container-col {
    max-width: 1000px;
    margin: 0 auto;
}

div.card-body > canvas[data-graph] {
    height: auto !important;
    width: 100% !important;
    aspect-ratio: 16/9;
}


#mask-create-user-level, #mask_form_plan {
    /* background-color: rgba(var(--main-theme-color-rgb), .7); */
    background-color: rgba(230, 122, 41, .9);
}

#mask-create-user-level {
    z-index: 1001;
}

/*
Estilos para extender bootstrap
*/
.min-content {
    width: min-content !important;
}

.fit-content {
    width: fit-content !important;
}

.max-100 {
    max-width: 100px;
}

.max-w-75 {
    max-width: 75%;
}

.max-500 {
    max-width: 500px;
}

.aspect-ratio-16-9 {
    aspect-ratio: 16/9;
}

.max-h-400 {
    max-height: 400px;
}

.overflow-x-auto {
    overflow-x: auto !important;
}

.overflow-y-visible {
    overflow-y: visible !important;
}

@media screen and (min-width: 576px) {
    .w-sm-full {
        width: 100%;
    }
}

.d-flex--good {
    display: flex;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.column-gap-5 {
    column-gap: 1.5rem;
}

/*
Fin de estilos para extender bootstrap
*/

.mask-filters-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 2000;
    width: 100%;
    background-color: rgba(0, 0, 0, .9);
}

.mask-filters-container.hide {
    display: none;
}

.input-date-filter {
    position: relative;
    z-index: 10;
    min-width: 130px;
    border: 1px solid #000;
}

.input-date-filter:not([type="date"]) {
    border-radius: 5px;
}

.mask-filters-date {
    opacity: 0;
    z-index: 0;
    position: absolute;
    height: calc(100% + 6px);
    width: calc(100% + 5px);
    border-radius: 5px;
    bottom: -5px;
    margin: auto;
    background-color: rgba(100, 100, 100, .5);
    transition: opacity .2s ease-in-out;
}

.inputs-date-filter-father {
    opacity: 1;
    transition: opacity .2s ease-in-out;
}

.inputs-date-filter-father.disabled {
    opacity: .5;
}

.inputs-date-filter-father.disabled input {
    background-color: #555;
}

.inputs-date-filter-father.disabled > .mask-filters-date {
    opacity: .5;
    z-index: 100;
}

.dt-buttons {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.orderable-option-select {
    width: 100%;
    gap: 10px;
}

.orderable-option-select > {
    flex-grow: 1;
    background-color: #efefef;
}

#datatable-father {
    min-height: 400px;
}

.modal--cards {
    background-color: rgba(250, 250, 250, .8);
}

.h-90vh {
    height: 90vh !important;
}

.center {
    vertical-align: middle;
    text-align: center;
}

.max-h-80 {
    position: relative;
    max-height: 80% !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

.w-30-details {
    width: 30% !important;
}

.w-70-details {
    width: 70% !important;
}

.w-40-details {
    width: 40% !important;
}

.w-60-details {
    width: 60% !important;
}

.w-25-details {
    width: 25% !important;
}

.w-50-details {
    width: 50% !important;
}

.w-75-details {
    width: 75% !important;
}

@media screen and (max-width: 991px) {
    .modal--cards {
        flex-direction: column;
        flex-wrap: wrap !important;
    }

    .w-25-details {
        width: auto !important;
    }

    .w-50-details {
        width: auto !important;
    }

    .w-75-details {
        width: auto !important;
    }

    .w-30-details {
        width: auto !important;
    }

    .w-70-details {
        width: auto !important;
    }

    .w-40-details {
        width: auto !important;
    }

    .w-60-details {
        width: auto !important;
    }

    .border-md-bottom {
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }

    .border-end {
        border-right: none !important;
    }

}

.modal--img {
    max-width: 300px;
    max-height: 500px;
}

/*
========================================
============= ACTIONS MODAL ============
========================================
*/

.actionsmodal--header.annulate {
    background-color: #A83A3A;
}

.actionsmodal--header.conciliate {
    background-color: #1E8C99;
}

.actionsmodal--img {
    object-fit: contain;
    height: 100%;
    max-height: 200px;
    width: 100%;
    max-width: 200px;
}

.actionsmodal--closebtn {
    position: absolute;
    right: 1rem;
    color: #fff;
}

#form-actions-modal.hide {
    display: none !important;
}

#actions-details-content-details.hide, #actions-details-content-movements.hide {
    display: none !important;
}


/*
========================================
============= DATE LOCKER ==============
========================================
*/

#dateFilter {
    position: relative;
    border-radius: 2rem;
    transition: background-color .5s, opacity .5s;
}

#dateLocker {
    inset: 0;
    z-index: -1000;
    position: absolute;
    height: 100%;
    width: 100%;
}

#FilterAdviseMask {
    transition: opacity .5s ease-in-out;
}

#FilterAdviseMask p {
    text-align: justify;
    font-size: 1.20rem;
}

.date-filter-appearence {

    border-radius: 2rem;
    
}

.date-filter-locker {
    inset: 0;
    z-index: 1000 !important;
}


.fa-2xl {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 3.5rem;
    color: rgb(0, 140, 255);
}

.icon-of-filteres {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    width: 70px;
}

.filter-advise {
    text-align: center;
    padding: 0.25rem;
    border-radius: 1rem;
    border: 0.25rem solid rgb(0, 140, 255);
    background-color: rgb(196, 255, 255);
    font-weight: bold;
    min-width: 100%;
    min-height: 100%;
    
}

.mask-filters-disabled {
    opacity: 0% !important;
    transition: opacity .5s !important;
}

.filter-advise-reveal {
    opacity: 100%;
    transition: opacity .5s !important;
}

.filter-advise-hidden {
    opacity: 0%;
    transition: opacity .5s !important;
}

.select-input-standar {
    cursor: pointer;
}

.select-input-standar::after {
    content: "";
    display: block;
    height: 100px;
    width: 100px;
    background-color: red;
}

/*
========================================
======== MISSING DATA WARNING ==========
========================================
*/

.none {
    background-color: orange;
    border-radius: .5rem;
    padding: .25rem;
}

#edit-reference-form.hide {
    display: none !important;
}


.on-top {
    z-index: 999999999999;
}