.alert-processing,
.bg-processing {
    background-color: #ffe6d6;
    border-color: #ff6900;
    color: #ff6f00;
}
:root {
    --color-primary: #308436;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

.menu-vertical .app-brand {
    padding-top: 30px;
    padding-bottom: 30px;
}

.color-primary {
    color: var(--bs-primary);
}

.avatar {
    border-radius: 100%;
}

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

.mar-rb-10 {
    margin-right: 10px;
    margin-bottom: 10px;
}

.pointer {
    cursor: pointer;
}

.file-wrap, .filed-wrap {
    padding: 20px;
    border: 2px dashed #d9dee3;
    border-radius: 10px;
}

#list-file {
}

.box-img {
    text-transform: unset;
    position: relative;
}

.box-img-del {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    background: #ff3e1d;
    text-transform: uppercase;
    font-size: 8px;
    top: -5px;
    right: -5px;
    cursor: pointer;
}

.app-brand-logo img, .app-brand-logo svg {
    width: 50px;
}

.image-organization {
    width: 120px;
    height: 50px;
    object-fit: fill;
    border-radius: 12px;
}

.app-brand-text {
    text-transform: uppercase;
}

.status {
    padding: 2px 7px;
    display: inline-block;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 700;
}

.status-0 {
    background-color: #ffe0db !important;
    color: #ff3e1d !important;
}

.status-1 {
    background-color: #e4f9e5 !important;
    color: var(--bs-primary) !important;
}

.status-2 {
    background-color: #d7f5fc !important;
    color: #03c3ec !important;
}

.status-3 {
    background-color: #fff2d6 !important;
    color: #ffab00 !important;
}

.status-4 {
    background-color: #e7f3ff !important;
    color: var(--bs-success) !important;
}

.status-5 {
    background-color: var(--bs-danger-light);
    color: var(--bs-danger);
}

.status-6 {
    background-color: #e4f9e5 !important;
    color: var(--bs-primary) !important;
}

textarea.form-control[readonly] {
    background: unset;
}

.select2-container--bootstrap-5 .select2-selection {
    padding: 0.375rem !important;
}

#loading,
#table_loading,
#pie_charts_loading,
#render_PieChartAboutAllOfDepartment_chart_loading,
#DonutChartAboutRating_loading,
#UserWithNameAndData_loading,
#DonutChartAboutWaiting_loading,
#column_department_charts_loading,
#column_status_charts_loading,
#column_level_charts_loading,
#column_charts_loading,
#statusChart_loading,
#ratingChart_loading,
#topUserChart_loading,
#departmentChart_loading,
#statusChart_loading,
#userDepartmentChart_loading,
#topUserChart_loading {
    position: absolute;
    z-index: 1000;
    background: #fdfdfdab;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    top: 0;
}

    #loading.hide,
    #table_loading.hide,
    #pie_charts_loading.hide,
    #column_charts_loading.hide,
    #UserWithNameAndData_loading.hide,
    #DonutChartAboutRating_loading.hide,
    #DonutChartAboutWaiting_loading.hide,
    #column_department_charts_loading.hide,
    #column_status_charts_loading.hide,
    #column_level_charts_loading.hide,
    #render_PieChartAboutAllOfDepartment_chart_loading.hide,
    #statusChart_loading.hide,
    #ratingChart_loading.hide,
    #topUserChart_loading.hide {
        display: none;
    }

#system_notification {
    position: fixed;
    top: 60px;
    right: 8px;
    width: min(100vw - 16px, 350px);
    z-index: 10000;
}

.rating {
    font-size: calc(1.325rem + 0.9vw);
}

    .rating i:hover,
    .rating i.selected {
        font-size: 3rem !important;
        color: var(--bs-primary);
    }

@media(min-width: 1200px) {
    .rating {
        font-size: 2rem;
    }

        .rating > i:hover,
        .rating > i.selected {
            font-size: 3rem !important;
        }
}

/* CSS styles used by custom infobox template */
.customInfobox {
    background-color: var(--bs-dark);
    color: var(--bs-light);
    max-width: 300px;
    border-radius: 10px;
    padding: 10px;
    font-size: 12px;
    pointer-events: auto !important;
}

    .customInfobox .title {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
    }

a.customInfoboxCloseButton:link, a.customInfoboxCloseButton:visited {
    color: white;
    text-decoration: none;
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 14px;
}

.bg-content {
    background-color: var(--bs-gray-100);
    border-radius: 0.375rem;
    padding: 1rem;
    min-height: 200px;
    white-space: pre-line;
    overflow: auto;
}

.wrap-home {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f9;
    max-width: 600px;
    margin: 0 auto;
}

    .wrap-home .home {
        background: white;
        text-align: center;
        border-radius: 5px;
        overflow: hidden;
    }

    .wrap-home .home-content {
        padding: 20px;
    }

.img-logo {
    width: 120px;
}

.bg-success {
    background-color: rgba(113, 221, 55) !important;
}

@media(min-width: 576px) {
    .w-sm-25 {
        width: 25% !important;
    }
}


.required::after {
    content: " (*)";
    color: var(--bs-danger);
    font-weight: 700;
}


.cursor-pointer {
    cursor: pointer;
}

    .cursor-pointer:hover i {
        background-color: rgba(67, 89, 113, .08) !important;
    }

.position-relative {
    position: relative;
}

.page-item {
    cursor: pointer;
}

.box-dark {
    padding: 15px;
    background: #2b2c40;
    color: white;
    overflow: hidden;
    overflow-x: auto;
}

.max-height-200 {
    max-height: 200px;
    overflow-y: auto;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-header .del {
    padding: 10px;
    color: red;
}

.context-menu {
    position: fixed;
    background: #f8f9fa;
    border: 1px solid #ced4da;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: none;
}

    .context-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .context-menu ul li {
            padding: 8px 16px;
            cursor: pointer;
        }

.table-hover tr{
    cursor: pointer;
}


.require::after{
    content: "(*)";
    color: var(--bs-danger);
    font-weight: 700;
    margin-left: 4px;
}

tr.request.active td {
    --bs-table-accent-bg: #d2d2d2 !important;
    background: #d2d2d2 !important;
    color: var(--bs-table-hover-color) !important;
}

.quick-handle-checked {
    background: #e4f9e4;
    border: #e4f9e4 1px solid;
}

.highcharts-credits{
    display: none!important;
}

ul.pagination{
    margin-bottom:unset;
}


.img-avatar-frame{
    height: 200px;
    width: 175px;
}

.image-avatar-question {
    height: 170px;
    width: 170px;
}

.frame-fit-content{
    height: fit-content;
    width: fit-content;
}


.table-hover tbody tr[rowspan]:hover,
.table-hover tbody tr[rowspan]:hover + tr {
    background-color: var(--bs-table-hover-bg) !important;
}

.img-icon{
    width: 24px;
    height: 24px;
}

.timeline {
  position: relative;
  padding-left: 1.5rem;
}
.timeline .timeline-item{
    padding-left: 2rem;
}
.timeline-item {
  position: relative;
    padding-bottom: 1rem;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--bs-primary);
}
.timeline-item.pending::before {
  background-color: var(--bs-gray-100);
  box-shadow: 0 0 0 2px  var(--bs-gray-100);
}