.ctn_dashboard {
    display: grid;
    grid-gap: 18px;
    margin: 40px 0 0;
    grid-template-rows: repeat(4, 170px);
    grid-auto-columns: 1fr;
    grid-template-areas: "account account account account account spaced spaced folios folios folios"
                         "account account account account account users users folios folios folios"
                         "plans plans plans plans roles roles roles folios folios folios"
                         "plans plans plans plans roles roles roles folios folios folios";
}
.div_card {
    background-color: var(--white-color);
    border-radius: 9px;
    width: 100%;
    padding: 20px;
}
.cuad_accounts {
    grid-area: account;
}
.cuad_spaced {
    grid-area: spaced;
}
.cuad_users {
    grid-area: users;
}
.cuad_folios {
    grid-area: folios;
}
.cuad_plans {
    grid-area: plans;
    display: grid;
    grid-template-rows: auto 1fr;
}
.cuad_roles {
    grid-area: roles;
}
.dash_tittle {
    font: normal normal bold 16px/20px Europa;
    color: var(--color-icons);
    margin-bottom: 35px;
}
.dash_user_icon {
    width: 50px;
    min-width: 50px;
    height: 57px;
    color: var(--first-color);
}
.dash_count_users {
    font: normal normal bold 42px/54px Europa;
    color: var(--color-icons);
}
.ctn_roles {
    overflow: auto;
    height: 220px;
    padding-right: 10px;
}
.ctn_role {
    color: var(--color-gray-1);
    font-size: 14px;
}
.px-12 {
    color: var(--color-gray-1);
    font-size: 14px;
}
.dash_figure {
    background-color: var(--first-color);
    color: var(--white-color);
    border-radius: 50%;
}
.dash_role_icon{
    width: 20px;
    min-width: 20px;
    height: 20px;
    color: var(--white-color);
    margin: 7px;
}
.dash-accounts-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
    color: var(--white-color);
    margin: 7px;
}
.dash_date_picker::placeholder, .dash_input_search::placeholder {
    color: var(--color-input);
}
.dash_account {
    background-color: var(--color-btn-delete);
}
.ui-datepicker-calendar {
    display: none;
}
.ui-datepicker {
    text-align: center;
    border: 1px solid var(--border-disabled);
    border-radius: 4px;
    padding: 5px;
    border-top: none;
    width: fit-content;
}
.ui-datepicker-prev, .ui-datepicker-next {
    display: none;
}
.dash_date_picker, .dash_input_search {
    border: 1px solid var(--border-disabled);
    border-radius: 4px;
    height: 30px;
    width: 125px;
    padding-left: 20px;
    font-size: 16px;
    color: var(--color-input);
}
.dash_date_picker ~ label {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.ctn_dash_date {
    position: relative;
    height: fit-content;
}
.dash_row {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-input);
}
.mini_loader {
    width: 30px;
    min-width: 30px;
    height: 30px;
}
.clear_filter {
    background-color: unset;
    border: none;
    outline: none;
    box-shadow: none;
    color: var(--first-color);
}
.dash_folios_text {
    line-height: 1;
}
.dash_br {
    padding-bottom: 30PX;
    margin-bottom: 50px;
    border-bottom: 2px solid var(--border-disabled);
}
.icon_document {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-right: 5px;
    font-size: 20px;
}
.dash_ctn_folios {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-bottom: 40px;
}
.dash_count_folio {
    color: var(--color-icons);
    font-size: 16px;
}
.dash_canva {
    max-height: 250px;
    max-width: 590px;
    width: 100%;
}
.dash_input {
    border: none;
    padding: 0;
}
.dash_icon {
    color: var(--color-icons);
}
.dash_ctn_input {
    width: 400px;
}
input:focus-visible {
    outline: 0;
}
progress {
    height: 10px !important;
    width: 100% !important;
    border-radius: 5px !important;
}
progress::-webkit-progress-bar {
    background-color: var(--color-bg-progressbar) !important;
    border-radius: 5PX !important;
}
progress::-webkit-progress-value {
    background-color: var(--dark-green) !important;
    border-radius: 5PX !important;
}
progress::-moz-progress-bar {
    background-color: var(--dark-green) !important;
    border-radius: 5PX !important;
}
#ctn-accounts {
    height: 160px;
    overflow: auto;
}
.box {
    color: var(--color-icons);
}
.chart {
    position: relative;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box canvas {
position: relative;
top: 0;
left: 0;
width: 100%;
}
.circle-green, .circle-ligth {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.circle-green {
    background-color: var(--color-card);
}
.circle-ligth {
    background-color: var(--color-bg-progressbar);
}
.ctn-text-space {
    color: var(--color-gray-1);
    font-size: 12px;
}
.dash_ctn_accounts {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.dash_ctn_text_circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: max-content;
}
.dash_img_account {
    width: 38px;
    height: 38px;
    min-width: 38px;
}
.dash_img_account img {
    border-radius: 50%;
    width: 100%;
}

@media only screen and (max-width: 1700px) {
    .ctn_dashboard {
        grid-template-areas: "account account account account spaced spaced spaced folios folios folios"
                             "account account account account users users users folios folios folios"
                             "plans plans plans plans roles roles roles folios folios folios"
                             "plans plans plans plans roles roles roles folios folios folios";
    }

    .dash_ctn_input {
        max-width: max-content;
    }
}

@media only screen and (max-width: 1550px) {
    .dash_ctn_accounts {
        flex-direction: column;
    }
    .dash_inputs {
        display: grid !important;
        grid-template-columns: 1fr auto;
    }
    .dash_ctn_input {
        width: 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 1300px) {
    .ctn_dashboard {
        grid-template-rows: auto;
        grid-template-areas: "account account account account account account spaced spaced spaced spaced"
                             "account account account account account account users users users users"
                             "plans plans plans plans plans roles roles roles roles roles"
                             "plans plans plans plans plans roles roles roles roles roles"
                             "folios folios folios folios folios folios folios folios folios folios";
    }
    .div_card {
        padding: 15px;
    }
}

@media only screen and (max-width: 900px) {
    .ctn_dashboard {
        grid-template-areas: "account"
                             "spaced"
                             "users"
                             "plans"
                             "roles"
                             "folios";
    }
    .cuad_spaced div, .cuad_users div {
        justify-content: center;
    }
    #ctn-accounts {
        height: auto;
        max-height: 500px;
    }
    .ctn_roles {
        height: auto;
    }
    .cuad_spaced {
        padding-bottom: 30px;
    }
    .div_card {
        width: 100%;
        max-width: 90vw;
        box-shadow: 0px 0px 9px var(--color-box-shadow-3);
    }
}

@media only screen and (max-width: 400px) {
    .dash_inputs {
        grid-template-columns: 1fr;
    }
    .ctn_dash_date {
        width: fit-content;
        margin-left: auto;
    }
}