/***************************************************************************************
 * Global
***************************************************************************************/

body {
    height: 100vh;
    background-color: var(--body-bg-color);
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--btn-bg-color);
    border: 1px solid var(--btn-border-color);
    border-radius: var(--btn-border-radius);
    font-size: 1rem;
    color: var(--btn-font-color);
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    height: 6vh;
    transition:
        background 0.1s ease,
        color 0.1s ease;
}

.btn[disabled],
.btn:disabled,
.btn[disabled]:hover,
.btn:disabled:hover {
    color: var(--btn-disabled-font-color);
    background-color: var(--form-btn-disabled-bg-color) !important;
    border: 1px solid var(--btn-disabled-border-color);
}

.btn[disabled] i,
.btn:disabled i {
    color: var(--btn-disabled-font-color);
}

.btn:hover {
    background-color: var(--btn-bg-hover-color);
    color: var(--btn-font-color);
    border: 1px solid var(--btn-border-color);
}

select {
    --spacing-tb: calc(var(--spacing-025) + 0.1225rem);
    --spacing-lr: calc(var(--spacing-100) - 0.35rem);

    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
    padding: var(--spacing-tb) var(--spacing-lr) !important;
    background-image: var(--dropdown-arrow-icon);
    background-repeat: no-repeat;
    background-position: calc(100% - var(--spacing-lr)) 50%;
    background-size: var(--dropdown-arrow-icon-size);
}

select:disabled,
select[disabled] {
    color: var(--input-disabled-font-color);
    background-image: var(--dropdown-arrow-icon-disabled);
}

input, label, select {
    transition:
        background-color var(--transition-mode-delay) ease,
        color var(--transition-mode-delay) ease,
        border var(--transition-mode-delay) ease,
        box-shadow var(--transition-mode-delay) ease !important;
}

label {
    color: var(--common-text-font-color);
}

input:disabled,
input[disabled] {
    color: var(--input-disabled-font-color);
}

input:not(:focus)::placeholder {
    color: var(--input-placeholder-font-color) !important;
}

input:not(:focus)::-webkit-input-placeholder {
    color: var(--input-placeholder-font-color) !important;
}

input:not(:focus)::-moz-placeholder {
    color: var(--input-placeholder-font-color) !important;
}

input:not(:focus):-ms-input-placeholder {
    color: var(--input-placeholder-font-color) !important;
}

textarea {
    caret-color: auto !important;
}

/* ############################ Input range ############################ */
.form-range-input {
    display: flex;
    align-items: center;
}

.range-input-wrapper {
    display: inline-flex;
    position: relative;
}

.range-input-progress {
    content: "";
    position: absolute;
    width: 0%;
    height: 12px;
    cursor: pointer;
    background: var(--input-range-picker-thumb-border-color);
    border-radius:
        var(--input-range-picker-base-border-radius)
        0 0 var(--input-range-picker-base-border-radius);
    pointer-events: none;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 10px;
    border-radius: var(--input-range-picker-base-border-radius);
    background: var(--input-range-picker-bg-color);
}

input[type=range]:hover {
    background: var(--input-range-picker-bg-hover-color);
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -0.15rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--input-range-picker-thumb-bg-color) !important;
    border: 2px solid var(--input-range-picker-thumb-border-color);
    cursor: pointer;
    transform: scale(1);
    transition: transform var(--transition-mode-delay) ease-in-out;
}

input[type=range]::-moz-range-thumb {
    -moz-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--input-range-picker-thumb-bg-color) !important;
    border: 2px solid var(--input-range-picker-thumb-border-color);
    cursor: pointer;
    transform: scale(1);
    transition: transform var(--transition-mode-delay) ease-in-out;
}

input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-moz-range-track {
    height: 10px;
    border-radius: var(--input-range-picker-base-border-radius);
}
/* #################################################################### */

/***************************************************************************************
 * General Class
***************************************************************************************/
.hidden {
    display: none !important;
}

a, a:hover, a:focus, a:active {
    text-decoration: none;
    outline: none;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bold {
    font-weight: bold;
}

.general_text_color {
    color: var(--common-text-font-color);
}

/* ==============================
Simple general list
============================== */
ul.list, ol.list  {
    padding-left: 2rem;
}

ul.list {
    list-style: initial;
}

ol.list {
    list-style: decimal;
}

/* ==============================
Stack layout
============================== */
.stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stack.flex-start {
    align-items: flex-start;
}

.stack.stack--sm {
    margin-bottom: var(--spacing-025);
}

.stack.stack--md {
    margin-bottom: var(--spacing-050);
}

.stack.stack--lg {
    margin-bottom: var(--spacing-100);
}

.stack.stack--xl {
    margin-bottom: calc(2 * var(--spacing-100));
}

.stack--sm > :not([hidden]) ~ :not([hidden]) {
    margin-top: var(--spacing-025);
}

.stack--md > :not([hidden]) ~ :not([hidden]) {
    margin-top: var(--spacing-050);
}

.stack--lg > :not([hidden]) ~ :not([hidden]) {
    margin-top: var(--spacing-100);
}

.stack--xl > :not([hidden]) ~ :not([hidden]) {
    margin-top: calc(2 * var(--spacing-100));
}

/* ==============================
Inline stack layout
============================== */
.inline-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.inline-stack.inline-stack--sm {
    margin-right: var(--spacing-025);
}

.inline-stack.inline-stack--md {
    margin-right: var(--spacing-050);
}

.inline-stack.inline-stack--lg {
    margin-right: var(--spacing-100);
}

.inline-stack.inline-stack--xl {
    margin-right: calc(2 * var(--spacing-100));
}

.inline-stack--sm > :not([hidden]) ~ :not([hidden]) {
    margin-left: var(--spacing-025);
}

.inline-stack--md > :not([hidden]) ~ :not([hidden]) {
    margin-left: var(--spacing-050);
}

.inline-stack--lg > :not([hidden]) ~ :not([hidden]) {
    margin-left: var(--spacing-100);
}

.inline-stack--xl > :not([hidden]) ~ :not([hidden]) {
    margin-left: calc(2 * var(--spacing-100));
}

/***************************************************************************************
 * Header
***************************************************************************************/

#header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    column-gap: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--header-bg-color);
    height: calc(100vh - var(--main-content-height));
    position: fixed;
    top: 0;
    width: 100%;
    transition:
        background var(--transition-mode-delay) linear,
        color var(--transition-mode-delay) linear;
    z-index: 2;
}

.header__left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    column-gap: var(--spacing-050);
}

.header__branding-container {
    display: flex;
    align-items: center;
}

.header__logo-link {
    display: inline-block;
    width: clamp(5.625rem, 3.2245vw + 1.4976rem, 2.25rem);
    height: 6vh;
    margin-right: 1rem;
}

.header__logo-image {
    width: inherit;
    height: inherit;
    background-image: url('/static/ABS/shared/img/company_logo/ABS_LOGO2_WHITE.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.25s ease;
}

.header__logo-image:hover {
    transform: scale(1.05);
}

.header__divider {
    border-left: 2px solid var(--header-lhs-divider-color);
    height: 2.5vh;
}

.header__company-name {
    display: flex;
    align-items: center;
    width: max-content;
    height: 3.5vh;
    padding-left: 0.65rem;
    font-size: 1.1rem;
    background: var(--header-lhs-company-name-font-color);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.header__user {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}

/***************************************************************************************
 * Responsive Design : Header
***************************************************************************************/
@media (max-width: 768px) {
    .header__divider, .header__company-name {
        display: none;
    }
}

@media (max-width: 450px) {
    .header__user {
        position: static !important;
    }
}

/***************************************************************************************
 * Main content
***************************************************************************************/
#main_application {
    position: fixed;
    top: calc(100vh - var(--main-content-height));
    height: var(--main-content-height);
    width: 100%;
    overflow: auto;
    background-color: var(--main-app-bg-color);
    transition: background-color var(--transition-mode-delay) linear;
}

#main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--main-content-height);
    background-color: var(--color-main-bg);
    transition:
        background var(--transition-mode-delay) linear,
        color var(--transition-mode-delay) linear;
}

#main::before {
    background-image: var(--main-new-design-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    position: absolute;
    top: 0;
    left: 0;    
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: var(--main-new-design-bg-image-opacity);
    transition: all var(--transition-half-second-delay) ease;
}

/*
#main::after {
    background-image: var(--abs-logo-image);
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: var(--company-logo-opacity);
}
*/

section.content {
    position: relative;
    width: auto;
    height: 100%;
    padding: 0;
    margin-left: var(--aside-sidebar-width);
    overflow: auto;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent !important;
    transition:
        background var(--transition-mode-delay) linear,
        color var(--transition-mode-delay) linear,
        margin-left var(--transition-half-second-delay) ease;
}

div.container {
    width: 100%;
    padding: var(--spacing-100);
}

.container__wrapper {
    height: 100%;
    padding: var(--spacing-075) calc(var(--spacing-100) + var(--spacing-075));
}

.section--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: calc(var(--spacing-100) + var(--spacing-075))
}

.container__wrapper .section--header:has(button.btn_download_result) {
    gap: 1.5rem;
}

.section--main-content {
    height: calc(100% - 3.25rem);
}

.section__text {
    display: flex;
    font-size: calc(var(--spacing-100) + var(--spacing-050));
    font-weight: bold;
    column-gap: var(--spacing-100);
}

.container__wrapper .section--header:has(button.btn_download_result) .section__text > span {
    width: max-content;
}

.section__text > i {
    color: var(--section-text-icon-color);
}

.section__text > span {
    color: var(--common-text-font-color);
}

/***************************************************************************************
 * Sidebar
***************************************************************************************/
.sidebar {
    position: fixed;
    top: calc(100vh - var(--main-content-height));
    z-index: 999;
    width: var(--aside-sidebar-width);
    height: var(--main-content-height);
    padding: 0;
    margin: 0;
    overflow: auto;
    background-color: var(--aside-sidebar-bg-color);
    white-space: nowrap;
    transition:
        background var(--transition-mode-delay) linear,
        color var(--transition-mode-delay) linear,
        width var(--transition-half-second-delay) ease;
}

/* Sidebar links */
.sidebar a {
    display: block;
    padding: var(--spacing-100);
    font-size: calc(var(--spacing-100) - 0.075rem);
    color: var(--aside-sidebar-tab-font-color);
    text-decoration: none;
    transition: all var(--transition-mode-delay) ease;
}

/* Active/current link */
.sidebar a.active,
.sidebar a:not(.disabled):hover {
    border-radius: 8px;
    background-color: var(--aside-sidebar-tab-active-color);
    font-weight: bolder;
    color: var(--aside-sidebar-tab-active-font-color);
}

.sidebar a:not(.disabled):hover img {
    filter: var(--aside-sidebar-tab-active-filter-color) !important;
}

.sidebar a.disabled,
.sidebar__main-menu > ul.disabled .sidebar__sub-menu > ul li a {
    opacity: var(--aside-sidebar-tab-disable-opacity);
    pointer-events: none;
}

#navbar {
    position: relative;
    height: 100%;
    max-height: calc(var(--main-content-height) - (calc(var(--spacing-100))*3 + 0.75rem));
    padding-right: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}

#main_sidebar {
    --main-pd-top: calc(var(--spacing-100) + var(--spacing-075));
    --main-pd-bottom: var(--main-pd-top);
    --main-pd-left: calc(var(--spacing-100) - var(--spacing-025));
    --main-pd-right: 0;
    --main-pd: var(--main-pd-top) var(--main-pd-right) var(--main-pd-bottom) var(--main-pd-left); 

    padding: var(--main-pd);
    overflow: hidden;
}

#main_sidebar span {
    line-height: 1.05;
}

#main_sidebar.collapsed {
    width: calc(var(--spacing-100) * 7 + var(--spacing-050));
}

#main_sidebar.collapsed + .content {
    margin-left: calc(var(--spacing-100) * 6 + 0.875rem);
}

.sidebar__toggle-btn {
    position: absolute;
    top: calc(var(--spacing-100) + 0.175rem);
    left: calc(var(--spacing-100)*12 + 1.225rem);
    z-index: 9999;
    padding: var(--spacing-025) calc(var(--spacing-100) - 0.6rem);
    border: none;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    background-color: var(--toggle-sidebar-btn-bg-color);
    transition:
        left var(--transition-half-second-delay) ease,
        background-color var(--transition-half-second-delay) ease;
}

#main_sidebar.collapsed .sidebar__toggle-btn {
    left: calc((calc(var(--spacing-100)*12 + 0.175rem) - calc(var(--spacing-100) * 6 + 0.875rem))) !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    transform: rotate(180deg);
}

.sidebar__toggle-btn:hover {
    background-color: var(--toggle-sidebar-btn-bg-hover-color);
}

.sidebar__toggle-btn img {
    width: calc(var(--spacing-100) + var(--spacing-050));
    height: calc(var(--spacing-100) + var(--spacing-050));
    filter: var(--toggle-sidebar-btn-icon-color);
    transition: filter var(--transition-half-second-delay) ease;
}

.sidebar__section:first-child .sidebar__main-topic {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-100) + var(--spacing-075));
}

.sidebar__section > ul {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-075);
    padding-bottom: var(--spacing-100);
}

#sidebar_full_version .sidebar__section > ul li:has(> a.hidden){
    display: none;
}

.sidebar__section:not(:last-child) > ul {
    border-bottom: 1px solid var(--aside-sidebar-section-separated-line-color);
}

.sidebar__main-topic {
    display: flex;
    align-items: center;
    column-gap: var(--spacing-050);
    margin: calc(var(--spacing-100) + var(--spacing-050)) 0 var(--spacing-100) 0;
    padding-left: var(--spacing-100);
    font-size: calc(var(--spacing-100) - 0.035rem);
    font-weight: bold;
    color: var(--aside-sidebar-main-topic-font-color);
}

.sidebar__main-topic > span:first-child {
    align-self: center;
}

.sidebar__main-menu {
    position: relative;
}

.sidebar__main-menu:not(.nested) .sidebar__toggle-arow-icon {
    display: none;
}

.sidebar__main-menu:has(.lock-sidebar) {
    margin-top: var(--spacing-075)
}

.sidebar__main-menu a {
    display: inline-flex;
    align-items: center;
    column-gap: var(--spacing-100);
    width: 100%;
    padding: var(--spacing-100);
    border-radius: 6px;
}

.sidebar__main-menu a > div:first-child,
.sidebar__main-menu a > div:nth-child(2) {
    display: flex;
}

.sidebar__main-menu a > div:first-child {
    column-gap: var(--spacing-100);
    width: 55%;
}

.sidebar__main-menu a > div:nth-child(2) {
    width: 45%;
}

.sidebar__main-menu > ul {
    position: relative;
    display: grid;
    grid-template-columns: calc(var(--spacing-100)*2) 1fr;
}

.sidebar__main-menu > ul .sidebar__linked-line {
    position: relative;
    left: calc(var(--spacing-100) + 0.25rem);
}

.sidebar__main-menu > ul .sidebar__linked-line:before {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    max-height: calc(100% - calc(var(--spacing-100) + 0.125rem));
    border: 1px solid var(--aside-sidebar-submenu-navigated-line-color);
}

.sidebar__sub-menu .asidebar_menu {
    padding: var(--spacing-075);
}

.sidebar__sub-menu > ul {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-050);
}

.sidebar__sub-menu > ul > li {
    position: relative;
    padding-left: var(--spacing-075);
}

.sidebar__sub-menu > ul > li:has(.asidebar_menu.hidden) {
    display: none;
}

.sidebar__sub-menu > ul > li:not(:has(.asidebar_menu.hidden))::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc((-1)*(var(--spacing-100) - 0.25rem));
    width: 9.5%;
    border: 1px solid var(--aside-sidebar-submenu-navigated-line-color);
}

.sidebar__main-tab {
    display: inline-flex;
    align-items: center;
    column-gap: var(--spacing-050);
    width: 100%;
    margin-bottom: var(--spacing-050);
}

.sidebar__main-tab:has(~ .lock-sidebar) {
    margin-bottom: 0 !important;
}

.sidebar__main-tab i {
    color: var(--aside-sidebar-main-menu-icon-color);
}

.sidebar__main-tab.menu_collapsed:has(+ ul .asidebar_menu.active) i,
.sidebar__main-tab.menu_collapse:has(+ ul .asidebar_menu.active) .sidebar__menu-name,
.sidebar__main-tab:has(+ ul .asidebar_menu.active) i,
.sidebar__main-tab:has(+ ul .asidebar_menu.active) .sidebar__menu-name,
.sidebar__main-tab:not(.disabled):hover i,
.sidebar__main-tab:not(.disabled):hover .sidebar__menu-name,
.sidebar__main-tab:not(.disabled).active i,
.sidebar__main-menu  > a.active .sidebar__menu-name,
.asidebar_menu:hover:has(.sidebar__menu-name) .sidebar__menu-name {
    color: var(--aside-sidebar-tab-active-font-color);
}

.sidebar__main-tab.tab_special_function:has(+ ul .asidebar_menu.active) i,
.sidebar__main-tab.tab_special_function:has(+ ul .asidebar_menu.active) .sidebar__menu-name,
.sidebar__main-tab.tab_special_function:not(.disabled):hover i {
    color: var(--it-app-tab-active-font-color);
}

.sidebar__main-tab:has(+ ul .asidebar_menu.active) .sidebar__menu-name,
.sidebar__main-tab:not(.disabled):hover .sidebar__menu-name {
    font-weight: bold;
}

.sidebar__main-tab.menu_collapsed:has(+ ul .asidebar_menu.active) .sidebar__menu-icon img,
.sidebar__main-tab:has(+ ul .asidebar_menu.active) .sidebar__menu-icon img,
.sidebar__main-tab:hover .sidebar__menu-icon img,
.sidebar__main-tab.active .sidebar__menu-icon img,
.asidebar_menu.active .sidebar__menu-icon img,
.asidebar_menu:hover:has(.sidebar__menu-icon) .sidebar__menu-icon img {
    filter: var(--aside-sidebar-tab-active-filter-color);
}

/* --- reset style disabled tab after cal/generate (LIC, LRC, ETL) --- */
.sidebar__main-tab.disabled:has(+ ul .asidebar_menu.enable_after_cal:not(.hidden)),
.sidebar__main-tab.disabled:has(+ ul .asidebar_menu.enable_after_generate:not(.hidden)) {
    opacity: 1 !important;
    cursor: pointer !important;
}

.sidebar__menu-name {
    font-size: calc(var(--spacing-100));
    color: var(--aside-sidebar-main-menu-name-font-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-weight var(--transition-mode-delay) ease;
}

.sidebar__menu-icon {
    width: calc(var(--spacing-100) + 0.050rem);
    font-size: calc(var(--spacing-100) + 0.050rem);
    text-align: center;
}

.sidebar__menu-icon i {
    width: inherit;
}

.sidebar__menu-icon img {
    width: calc(var(--spacing-100) + 0.050rem);
    height: calc(var(--spacing-100) + 0.050rem);
}

.sidebar__menu-icon img {
    filter: var(--aside-sidebar-main-menu-filter-icon-color);
}

.sidebar__toggle-arrow-icon {
    margin-left: auto;
    transition: transform var(--transition-mode-delay) ease;
}

.sidebar__main-tab:has(.batch-pro) .sidebar__toggle-arrow-icon {
    margin-left: 0 !important;
}

.sidebar__toggle-arrow-icon.rotate_toggled {
    transform: rotate(180deg);
}

/* --- Collapsed sidebar version --- */
#sidebar_collapsed_version {
    position: absolute;
    top:0;
    display: none;
    width: 100%;
    height: 100%;
    padding-right: 0.75rem;
}

#sidebar_collapsed_version .sidebar__section:first-child .sidebar__group-tab {
    margin-top: calc(var(--spacing-100) * 3 - var(--spacing-025));
}

#sidebar_collapsed_version .sidebar__group-tab {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-100);
    padding: var(--spacing-100) 0;
    border-top: 1px solid var(--aside-sidebar-tab-group-separated-line-color);
}

#sidebar_collapsed_version .sidebar__section:only-child .sidebar__group-tab {
    margin-top: calc(var(--spacing-100) * 3 - (var(--spacing-100) + var(--spacing-025))) !important;
    border-top: none;
}

#sidebar_collapsed_version .sidebar__tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: var(--spacing-050);
    position: relative;
    padding: var(--spacing-075) 0;
    white-space: wrap;
    text-align: center;
}

#sidebar_collapsed_version .sidebar__tab:has(.lock-sidebar) {
    margin-top: 3rem;
}

#sidebar_collapsed_version .sidebar__tab.active img {
    filter: var(--aside-sidebar-tab-active-filter-color);
}

#sidebar_collapsed_version .sidebar__tab img {
    width: calc(var(--spacing-100) + var(--spacing-075));
    height: calc(var(--spacing-100) + var(--spacing-075));
    filter: var(--aside-sidebar-main-menu-filter-icon-color);
}

#sidebar_collapsed_version .sidebar__tab i {
    font-size: calc(var(--spacing-100) + var(--spacing-075));
}

#sidebar_collapsed_version .sidebar__sub-tab-name {
    position: absolute;
    top: var(--spacing-050);
    right: calc((-1)*(var(--spacing-025) - var(--spacing-050)));
    width: 50%;
    padding: var(--spacing-025) var(--spacing-050);
    border-radius: 16px;
    font-size: calc(var(--spacing-075) - 0.10rem);
    color: var(--aside-sidebar-sub-tab-label-font-color);
    background-color: var(--aside-sidebar-sub-tab-label-bg-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar_collapsed_version .sidebar__tab--main.tab_special_function_collapsed .sidebar__sub-tab-name {
    color: var(--aside-sidebar-sub-tab-special-function-label-font-color);
    background-color: var(--aside-sidebar-sub-tab-special-function-label-bg-color);
}

#sidebar_collapsed_version .sidebar__sub-tab-name:empty {
    display: none;
}

/* --- IT App (Collapsed sidebar version) --- */
#sidebar_collapsed_version .sidebar__section--it-app > .sidebar__group-tab {
    position: relative;
    row-gap: var(--spacing-075) !important;
}

#sidebar_collapsed_version .batch-pro {
    position: absolute;
    top: var(--spacing-025) !important;
    right: var(--spacing-025);
    top: 0;
    margin-left: 0;
    font-size: calc(var(--spacing-100) - 0.35rem);
}

.sidebar__sub-menu--collapsed {
    position: absolute;
    z-index: 9999;
    width: 12rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--aside-sidebar-submenu-border-color);
    border-radius: 10px;
    background-color: var(--aside-sidebar-submenu-bg-color);
}

.sidebar__sub-menu--collapsed > a {
    padding: var(--spacing-100);
    color: var(--aside-sidebar-tab-font-color);
    transition:
        font-weight var(--transition-mode-delay) ease,
        color var(--transition-mode-delay) ease,
        background-color var(--transition-mode-delay) ease;
}

.sidebar__sub-menu--collapsed a.active, .sidebar__sub-menu--collapsed a:hover {
    font-weight: bold;
    color: var(--aside-sidebar-tab-active-font-color);
    border-left: 4px solid var(--aside-sidebar-tab-active-font-color);
    background-color: var(--aside-sidebar-tab-active-color);
}

.sidebar__sub-menu--collapsed.premium a.active, .sidebar__sub-menu--collapsed.premium a:hover {
    border-left-color: var(--it-app-tab-active-font-color);
    color: var(--it-app-tab-active-font-color);
    background-color: var(--it-app-tab-active-bg-color);
}

.sidebar__sub-menu--collapsed a.active:first-child,
.sidebar__sub-menu--collapsed a:hover:first-child
{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.sidebar__sub-menu--collapsed a.active:last-child,
.sidebar__sub-menu--collapsed a:hover:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/***************************************************************************************
 * Responsive Design : Main Content
***************************************************************************************/
@media (max-width: 900px) {
    body:has(#main_area.content--etl) .header__divider,
    body:has(#main_area.content--etl) .header__company-name {
        display: none !important;
    }

    #main_application {
        overflow: visible !important;
    }

    section.content.content--etl {
        margin-left: 0 !important;
    }

    section.content:not(.is_have_hamburger_menu) {
        height: var(--main-content-height) !important;
    }

    section.content.is_have_hamburger_menu {
        height: calc(var(--main-content-height) - var(--aside-sidebar-sticky-height)) !important;
        position: fixed;
        width: 100%;
        top: calc(
            calc(100vh - var(--main-content-height)) + 
            var(--aside-sidebar-sticky-height)
        );
    }

    section.content:not(.is_have_hamburger_menu) #container_logo,
    section.content:not(.is_have_hamburger_menu) #container_logo:before {
        height: var(--main-content-height) !important;
    }

    section.content.is_have_hamburger_menu #container_logo,
    section.content.is_have_hamburger_menu #container_logo:before {
        height: var(--main-content-height) !important;
    }

    .sidebar.sidebar--etl.collapsed {
        width: 100% !important;
    }

    .sidebar.sidebar--etl {
        position: fixed;
        top: calc(100vh - var(--main-content-height));
        display: none;
        width: 100%;
        height: var(--aside-sidebar-sticky-height);
        padding: 0.5rem !important;
    }

    .sidebar.sidebar--etl #sidebar_full_version, 
    .sidebar.sidebar--etl .sidebar__toggle-btn {
        display: none;
    }

    .sidebar.sidebar--etl #sidebar_collapsed_version {
        display: flex !important;
        justify-content: center;
        column-gap: var(--spacing-100);
        top: auto;
    }

    .sidebar.sidebar--etl #sidebar_collapsed_version .sidebar__section:first-child .sidebar__group-tab {
        margin-top: 0 !important;
    }

    .sidebar.sidebar--etl #sidebar_collapsed_version .sidebar__tab {
        max-height: var(--aside-sidebar-tab-responsive-max-height) !important;
        white-space: nowrap !important;
        padding: var(--spacing-100) !important;
    }

    .sidebar.sidebar--etl #sidebar_collapsed_version .sidebar__group-tab {
        flex-direction: row;
        column-gap: var(--spacing-100);
        height: 100%;
        margin-top: 0;
        padding: 0;
        border-top: 0;
    }
}

@media (min-width: 900px) {
    .sidebar.sidebar--etl {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .sidebar:not(.sidebar--etl) {
        display: block !important;
    }
}

@media (max-width: 768px) {
    section.content:not(.content--etl) {
        margin-left: 0 !important;
    }

    .sidebar:not(.sidebar--etl).collapsed {
        width: 100% !important;
    }

    .sidebar:not(.sidebar--etl) {
        position: fixed;
        top: calc(100vh - var(--main-content-height));
        display: none;
        width: 100%;
        height: var(--aside-sidebar-sticky-height);
        padding: 0.5rem !important;
    }

    .sidebar:not(.sidebar--etl) #sidebar_full_version, 
    .sidebar:not(.sidebar--etl) .sidebar__toggle-btn {
        display: none;
    }

    .sidebar:not(.sidebar--etl) #sidebar_collapsed_version {
        display: flex !important;
        justify-content: center;
        column-gap: var(--spacing-100);
        top: auto;
    }

    .sidebar:not(.sidebar--etl) #sidebar_collapsed_version .sidebar__section:first-child .sidebar__group-tab {
        margin-top: 0 !important;
    }

    .sidebar:not(.sidebar--etl) #sidebar_collapsed_version .sidebar__tab {
        max-height: var(--aside-sidebar-tab-responsive-max-height) !important;
        white-space: nowrap !important;
        padding: var(--spacing-100) !important;
    }

    .sidebar:not(.sidebar--etl) #sidebar_collapsed_version .sidebar__group-tab {
        flex-direction: row;
        column-gap: var(--spacing-100);
        height: 100%;
        margin-top: 0;
        padding: 0;
        border-top: 0;
    }

    .lock-sidebar--bg {
        max-height: var(--aside-sidebar-tab-responsive-max-height);
    }

    .lock-sidebar-icon-collapsed {
        margin-top: 0 !important;
    }

    .lock-sidebar-icon-collapsed .lock-sidebar--banner > div {
        top: 0 !important;
    }

    #navbar {
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    .sidebar #sidebar_collapsed_version {
        justify-content: flex-start !important;
    }

    .tab_special_function_collapsed .sidebar__tab-name {
        white-space: nowrap !important;
    }

}

@media (max-width: 250px) {
    #result_sub_menu_collapsed {
        left: 48vw !important;
    }
}

/* --------------------- Hamburger Button --------------------- */
.button__hamburger {
    position: relative;
    width: calc(var(--spacing-100) * 2.5);
    height: calc(var(--spacing-100) * 2.5);
    padding: 0;
    border: none;
    background-color: var(--aside-sidebar-hamburger-btn-bg-color);
}

.button__hamburger:after {
    transition: all var(--transition-mode-delay) ease;
}

.button__hamburger.active:after,
.button__hamburger:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--aside-sidebar-hamburger-btn-bg-hover-color);
    border-radius: 50%;
    opacity: 0.10;
    z-index: -1;
}

.button__hamburger i {
    font-size: calc(var(--spacing-100) + 0.15rem);
    color: var(--aside-sidebar-hamburger-btn-icon-color);
}

/***************************************************************************************
 * Responsive Design : Hamburger button
***************************************************************************************/
@media screen and (min-width: 900px) {
    .button__hamburger.button__hamburger--etl-module {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    .button__hamburger.button__hamburger--etl-module {
        display: block !important;
    }
}

@media screen and (min-width: 768px) {
    .button__hamburger:not(.button__hamburger--etl-module) {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .button__hamburger:not(.button__hamburger--etl-module) {
        display: block !important;
    }
}

/***************************************************************************************
 * General id/class css for all pages
***************************************************************************************/
#main {
    display: block;
    opacity: 1;
    padding: 0rem;
    margin: 0rem;
}

.div_table {
    display: block;
    margin: 0rem;
    border: 0rem;
    padding: 0rem;
}

.div_main_table {
    display: block;
    margin: 0rem;
    border: 0rem;
    padding: 0rem;
}

.section--box-container {
    width: 100% !important;
    padding: 2.25rem;
    border: 1px solid var(--box-container-border-color);
    border-radius: var(--box-container-border-radius);
    background-color: var(--box-container-bg-color);
    transition: all var(--transition-mode-delay) ease;
}

.div_table.section--box-container {
    padding-top: calc(var(--spacing-100) + var(--spacing-050));
    padding-bottom: calc(var(--spacing-100) + var(--spacing-050));
}

/***************************************************************************************
 * New BG Design LIC/LRC
***************************************************************************************/
#container_logo::before {
    background-image: var(--main-new-design-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
    opacity: var(--main-new-design-bg-image-opacity);
}

#container_logo::after {
    background-color: var(--color-main-bg);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
    opacity: 1;
    transition:
        background var(--transition-mode-delay) linear,
        color var(--transition-mode-delay) linear;
}

#container_logo {
    width: 100%;
    height: var(--main-content-height);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    opacity: 0.8;
}

.container_abs17_image {
    width: 37.5vw;
    height: var(--main-content-height);
    background-image: var(--abs17-logo-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0;
    margin: 0;
    margin-bottom: 2vw;
}

.container_logo_text {
    width: 14vw;
    height: 14vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: var(--logo-bg-color);
    border-radius: 50%;
    font-size: 5.5vw;
    font-weight: bolder;
    padding: 0;
    margin: 0;
    margin-top: 2vw;
    transition:
        background var(--transition-mode-delay) linear,
        color var(--transition-mode-delay) linear;
}

/***************************************************************************************
 * Pro batch // lock icon
***************************************************************************************/
.batch-pro {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0.375rem;
    border: 1px solid var(--transparent);
    border-radius: var(--btn-border-radius);
    font-size: calc(var(--spacing-100) - 0.20rem);
    font-weight: bold;
    color: var(--batch-pro-font-color);
    background: var(--batch-pro-bg-color);
    overflow: hidden;
    animation: pulse-glow 2s ease-in-out infinite;
}

.batch-pro::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 25%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.3) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(25deg);
    animation: shine 1s linear infinite;
}

.pro-banner {
    position: relative;
    display: inline-block;
    width: 100%;
}

.pro-banner__content {
    position: relative;
    padding: 0.85rem 1.5rem;
    border: 2px solid var(--it-app-pro-banner-border-color);
    border-radius: 10px;
    background: var(--it-app-pro-banner-bg-color);
}

.pro-banner__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

.pro-banner__text {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: var(--it-app-pro-banner-font-color);
}

.sidebar__main-topic-batch-pro-section {
    padding: 0;
    margin: 1rem 0;
}

.crown-icon {
    margin-left: 0.25rem;
    animation: subtle-bounce 1.5s ease-in-out infinite;
}

@keyframes shine {
    0% {
        left: -50%;
    }
    100% {
        left: 150%;
    }
}

@keyframes subtle-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

.unlock-icon {
    --main-size: 2.1875rem;
    --main-fs: 1.15em;
    --main-pd-tb: calc(var(--spacing-050) - 0.10rem);
    --main-pd-lr: calc(var(--spacing-050) - 0.10rem);
    --main-spacing: var(--main-pd-tb) var(--main-pd-lr);

    width: var(--main-size);
    height: var(--main-size);
    position: absolute;
    padding: var(--main-spacing);
    font-size: var(--main-fs);
    color: var(--primary-white);
    background-color: var(--it-app-lock-icon-bg-color);
    border: 2px solid var(--it-app-lock-icon-border-color);
    border-radius: 50%;
    transition:
        background-color var(--transition-mode-delay) ease, 
        border-color var(--transition-mode-delay) ease;
}

.lock-sidebar--bg {
    position: absolute;
    border-radius: 6px;
    inset: 0;
    background: var(--aside-sidebar-lock-general-bg-color);
    cursor: not-allowed;
}

.lock-sidebar--bg.premium {
    background: var(--aside-sidebar-lock-pro-bg-color);
}

.lock-sidebar--banner > div {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.1rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--primary-white);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background: var(--aside-sidebar-lock-header-bg-color);
}

.lock-sidebar--banner > div,
.lock-sidebar-icon-collapsed .lock-sidebar--banner > div {
    top: -0.75rem;
    left: 0;
    z-index: 2;
}

.lock-sidebar--banner > div > span {
    display: flex;
    align-items: center;
}

.lock-sidebar--banner > div > i {
    margin-bottom: 0.15rem;
}

.lock-sidebar-icon-collapsed {
    position: relative;
    margin-top: var(--spacing-075);
}

/***************************************************************************************
 * Setup input for LIC/LRC
***************************************************************************************/
#container_setup section.section__setup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "setup-1 setup-2"
    "setup-3 setup-4";
}

.section__setup > :nth-child(1) {
    grid-area: setup-1;
}

.section__setup > :nth-child(2) {
    grid-area: setup-2;
}

.section__setup > :nth-child(3) {
    grid-area: setup-3
}

.container_it_app_setup {
    --spacing-pd: 3.5rem 4.5rem 1.5rem 2.5rem;
    --spacing-mg: 1.5rem 1rem 0;

    position: relative;
    padding: var(--spacing-pd) !important;
    margin: var(--spacing-mg);
    border: 2px solid var(--setup-input-it-app-border-color);
    border-radius: var(--box-container-border-radius);
    background: var(--setup-input-it-app-bg-color);
}

.container_it_app_setup.disabled {
    background-color: var(--setup-input-it-app-disabled-bg-color);
    border-color: var(--input-border-color);
}

.container_it_app_setup.disabled label,
.container_it_app_setup.disabled label > i {
    color: var(--input-disabled-font-color) !important;
}

.container_it_app_setup .batch-pro {
    --spacing-pos: 2vh;

    position: absolute;
    top: var(--spacing-pos);
    right: var(--spacing-pos);
    padding: 0.01rem 0.5rem !important
}

.container_inner_it_app_setup,
.lock_icon_wrapper {
    position: relative;
}

.lock_icon_wrapper {
    pointer-events: none;
    z-index: 5;
}

.container_inner_it_app_setup .unlock-icon {
    --pos-top: 6.25vh;
    --pos-right: -5.5vh;

    position: absolute;
    top: var(--pos-top);
    right: var(--pos-right);
}

.lock_icon_wrapper .unlock-icon {
    --pos-top: 10%;
    --pos-left: calc(50% - 0.65rem * 2 + 0.5rem);

    top: var(--pos-top);
    left: var(--pos-left);
    right: auto !important;
    z-index: 2;
    padding: var(--main-pd-lr) calc(var(--main-pd-lr) + 0.075rem);
    background-color: var(--setup-input-it-app-lock-icon-bg-color);
    border-color: var(--setup-input-it-app-lock-icon-border-color);
}

.lock_icon_wrapper select {
    font-size: 0 !important;
}

/***************************************************************************************
 * Input Setup for LIC/LRC
***************************************************************************************/
.form_label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--common-text-font-color);
}

.form_label i {
    color: var( --form-label-icon-color);
}

.form_input {
    width: 100%;
    padding: 0.8rem 0.65rem;
    border-radius: 0.275rem;
    margin-bottom: 1rem;
    border: 0.08rem solid var(--input-border-color);
    background-color: var(--input-bg-color);
    color: var(--input-font-color);
    transition:
        border var(--transition-mode-delay) ease,
        background-color var(--transition-mode-delay) ease,
        box-shadow var(--transition-mode-delay) ease,
        color var(--transition-mode-delay) ease;
}

.form_input:focus {
    outline: none !important;
    border-color: var(--input-border-focus-color);
    box-shadow: 0 0 0 0.225rem var(--input-bg-focus-color);
}

.not_allow_input,
.form_input:disabled {
    background-color: var(--input-disabled-bg-color) !important;
    cursor: not-allowed !important;
}

form.setup_input_form,
form.journal_input_form {
    line-height: 2rem;
    width: 100%;
}

form.journal_input_form {
    max-width: 70rem;
    margin: auto;
    padding-top: 2.25rem;
}

div.form_container,
div.form_container_inner {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem;
}

div.col_space {
    flex: 50%;
    padding: 0 1rem;
}

div.browse_files {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0rem;
}

.browse_files_input {
    width: 70%;
    border-radius: 0.275rem 0 0 0.275rem;
    color: var(--input-placeholder-font-color);
    margin: 0rem;
    padding: 0.425rem 0.65rem;
    cursor: pointer;
}

#files_input {
    width: 0rem;
    height: 0rem;
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.btn_browse_files {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 30%;
    min-width: 5rem;
    padding: 0 0.65rem;
    border-radius: 0 0.275rem 0.275rem 0;
    background-color: var(--form-btn-bg-color);
    border: 0.1rem solid var(--form-btn-bg-color);
    color: var(--form-btn-font-color);
    margin: 0rem;
    cursor: pointer;
}

.btn_browse_files:hover {
    background-color: var(--form-btn-bg-color-hover);
    border: 0.1rem solid var(--form-btn-bg-color-hover);
    color: var(--form-btn-font-color-hover);
}

.loading-container {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.loading-container .spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 0.2em solid var(--form-btn-processing-ring-bg-color);
    border-top: 0.2em solid var(--form-btn-processing-ring-rotate-bg-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.disable_browse,
.disable_browse:hover {
    background-color: var(--form-btn-bg-color);
    border: 0.1rem solid var(--form-btn-bg-color);
    color: var(--form-btn-font-color);
    opacity: 0.75;
    cursor: not-allowed;
    pointer-events: all;
}

.disable_status_upload {
    opacity: 0.75;
    cursor: not-allowed;
    pointer-events: all;
}

.flex_btn {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    justify-items: center;
}

.div_btn_journal {
    padding-top: 2rem;
}

button.btn_submit {
    text-align: center;
    width: 100%;
    height: 3rem;
    min-width: 11rem;
    display: block;
    padding: 0.725rem;
    margin: auto 0 1rem 0;
    color: var(--form-btn-font-color);
    background-color: var(--form-btn-bg-color) !important;
    border: 1px solid var(--transparent) !important;
    transition: background-color var(--transition-mode-delay) ease;
}

button.btn_submit:not(:disabled):hover {
    background-color: var(--form-btn-bg-color-hover) !important;
    border: 0.1rem solid var(--form-btn-bg-color-hover) !important;
    color: var(--form-btn-font-color-hover) !important;
}

button.btn_submit:not(:disabled) {
    color: var(--form-btn-font-color) !important;
}

button.btn_submit:enabled:hover {
    background-color: var(--form-btn-bg-color-hover);
    color: var(--form-btn-font-color-hover);
}

button.btn_submit:enabled:hover i {
    color: var(--form-btn-font-logo-color-hover);
}

button.btn_submit:disabled {
    opacity: 0.75;
    cursor: not-allowed;
    pointer-events: all !important;
}

.btn-form--primary {
    display: flex !important;
    min-width: 0 !important;
    height: 6vh !important;
    margin: 0 !important;
    text-align: center;
}

.btn-form--secondary,
.btn-form--secondary:hover,
.btn-form--secondary:focus,
.btn-form--secondary:active {
    color: var(--form-btn-bg-color);
    border-color: var(--form-btn-bg-color);
    background: var(--primary-white);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/***************************************************************************************
 * Responsive Design : Setup tab
***************************************************************************************/
@media (min-width: 768px) and (max-width: 1195px) {
    .container_inner_it_app_setup {
        flex-direction: column;
    }

    .container_inner_it_app_setup .unlock-icon:not(.lock_icon_wrapper .unlock-icon) {
        top: calc(var(--pos-top) + 7vh);
    }
}

@media (max-width: 800px) {
    div.form_container {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    #container_setup section.section__setup {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: none;
    }

    .section__setup > * {
        grid-area: auto !important;
    }

    .container_inner_it_app_setup .unlock-icon {
        top: calc(var(--pos-top) - 0.25vh);
    }
}

@media (max-width: 450px) {
    .container_inner_it_app_setup {
        flex-direction: column;
    }

    .container_inner_it_app_setup .unlock-icon:not(.lock_icon_wrapper .unlock-icon) {
        top: calc(var(--pos-top) + 7vh);
        right: calc(var(--pos-right) + 1.5vh);
    }
}

@media (max-width: 320px) {
    div.form_container_inner {
        flex-direction: column;
    }
}

/***************************************************************************************
 * Input Table for LIC/LRC/ETL
***************************************************************************************/
#container_actuarial_analysis {
    padding-top: 0;
    padding-bottom: 0;
}

.container:has(.div__tab-header) .section--main-content {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-100);
}

.div__tab-wrapper {
    width: 100%;
}

.div__tab-header {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    width: 100%;
}

.div__tab-header .button__tab:first-child {
    border-left: 1px solid var(--tab-header-border-color);
}

.div__tab-header > .button__tab {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    max-width: calc(var(--spacing-100) * 13);
    min-height: calc(var(--spacing-100)*5 + var(--spacing-050));
    padding: var(--spacing-100) calc(var(--spacing-100)*2);
    border: none;
    border-right: 1px solid var(--tab-header-border-color);
    color: var(--tab-header-btn-font-color);
    text-align: center;
    background-color: var(--tab-header-bg-color);
    transition:
        background-color var(--transition-half-second-delay) ease,
        color var(--transition-half-second-delay) ease,
        transform var(--transition-half-second-delay) ease;
}

.div__tab-header.not_expanded {
    flex: 0 1 auto !important;
}

.div__tab-header > .button__tab.selected,
.div__tab-header > .button__tab:hover {
    position: relative;
    font-weight: bolder;
    color: var(--tab-header-btn-active-font-color);
    background-color: var(--tab-header-btn-active-bg-color);
    transition:
        background-color var(--transition-half-second-delay) ease,
        color var(--transition-half-second-delay) ease,
        transform var(--transition-half-second-delay) ease;
}

.div__tab-header > .button__tab.selected:before,
.div__tab-header > .button__tab:hover:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 5px;
    background-color: var(--tab-header-btn-active-border-color);
}

/***************************************************************************************
 * Download TAB for LIC/LRC
***************************************************************************************/
#container_download {
    padding-top: 0;
    padding-bottom: 0;
}

.section__download-container {
    display: grid;
    grid-template-columns: repeat(2, 1.5fr) 1fr;
    grid-template-rows: repeat(2, 400px);
    grid-template-areas:
    "left-border-box journal-posting additional-results"
    "trial-balance chart-of-account additional-results";
    gap: calc(var(--spacing-100) + var(--spacing-025));
    height: 100%;
}

.section__download {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: calc(var(--spacing-100) + var(--spacing-050));
    border: 1px solid var(--download-results-section-download-border-color);
    border-radius: 8px;
    background-color: var(--download-results-section-download-bg-color);
    transition: all var(--transition-mode-delay) ease;
}

.section__download--lic-account,
.section__download--lrc-lc-account {
    grid-area: left-border-box;
}

.section__download--journal-posting {
    grid-area: journal-posting;
}

.section__download--additional-results {
    grid-area: additional-results;
}

.section__download--trial-balance {
    grid-area: trial-balance;
}

.section__download--chart-of-account {
    grid-area: chart-of-account;
}

.section__download span {
    color: var(--common-text-font-color);
}

.section__group-file-name {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding: calc(var(--spacing-100) + var(--spacing-025));
    font-size: calc(var(--spacing-100) + 0.20rem);
    font-weight: bold;
    text-align: center;
    color: var(--download-results-group-file-name-font-color) !important;
    border-top-left-radius: var(--box-container-border-radius);
    border-top-right-radius: var(--box-container-border-radius);
    background-color: var(--download-results-group-file-name-bg-color);
    transition: background-color var(--transition-mode-delay) ease;
}

.section__group-multiple-file {
    align-self: center;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--download-results-single-file-download-width), 1fr);
    gap: calc(var(--spacing-100) + var(--spacing-050));
    max-width: min(50vh, 30vw);
    padding: var(--spacing-100);
    margin-top: calc(var(--spacing-100) * 3);
    margin-bottom: calc(var(--spacing-100) + var(--spacing-025));
    overflow: auto;
    overflow-y: hidden;
}

.section__group-multiple-file--add-rs {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    overflow-y: auto;
    height: 100%;
}

.section__group-multiple-file--add-rs > button {
    margin-right: var(--spacing-100);
}

.btn_download_result.located_in_header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--spacing-100);
    font-size: calc(var(--spacing-100) + 0.15rem);
    padding: var(--spacing-100);
    color: var(--primary-white);
    font-weight: 600;
    border-radius: 12px;
    transition: background var(--transition-mode-delay) ease;
}

.btn_download_result.located_in_header i {
    font-size: 1.5rem;
}

.btn_download_result.located_in_header > * {
    z-index: 3;
}

.btn_download_result.located_in_header > span {
    width: max-content;
}

.btn_download_result.located_in_header:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    outline-offset: -3.5px;
    opacity: 0;
    transition: opacity var(--transition-half-second-delay) ease;
}

.btn_download_result.located_in_header:hover:after {
    opacity: 1;
}

.btn--download-all-results {
    border: 1px solid var(--download-results-btn-border-color);
    background-image: var(--download-results-btn-bg-color);
}

.btn--download-all-results:after {
    outline: 0.25px solid var(--download-results-btn-outline-hover-color);
    background-image: var(--download-results-btn-bg-hover-color);
    -webkit-box-shadow: 0px 0px 14px 0px var(--download-results-btn-box-shadow-hover-color);
    -moz-box-shadow: 0px 0px 14px 0px var(--download-results-btn-box-shadow-hover-color);
    box-shadow: 0px 0px 14px 0px var(--download-results-btn-box-shadow-hover-color);
}

.btn--download-special-function {
    border: 1px solid var(--download-special-function-btn-border-color);
    background-image: var(--download-special-function-btn-bg-color);
    color: var(--download-special-function-btn-font-color) !important;
}

.btn--download-special-function:after {
    background-image: var(--download-special-function-btn-bg-hover-color);
    -webkit-box-shadow: 0px 0px 14px 0px var(--download-special-function-btn-box-shadow-hover-color);
    -moz-box-shadow: 0px 0px 14px 0px var(--download-special-function-btn-box-shadow-hover-color);
    box-shadow: 0px 0px 14px 0px var(--download-special-function-btn-box-shadow-hover-color);
}

.btn--download-single-file {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    column-gap: var(--spacing-075);
    padding: var(--spacing-100);
    font-weight: bold;
    color: var(--download-results-btn-download-single-file-font-color);
    border: none;
    border-radius: 8px;
    background-color: var(--download-results-btn-download-single-file-bg-color);
    transition: all var(--transition-half-second-delay) ease;
}

.btn--download-single-file:hover {
    background-color: var(--download-results-btn-download-single-file-bg-hover-color);
}

.btn--download-single-file-sm {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: calc(var(--spacing-100) + var(--spacing-050));
    width: var(--download-results-single-file-download-width) !important;
    padding: var(--spacing-100);
    margin-bottom: calc(var(--spacing-100) + var(--spacing-050)); 
    border: 1px solid var(--download-results-single-file-download-icon-border-color);
    border-radius: var(--box-container-border-radius);
    background-color: var(--download-results-single-file-download-icon-bg-color);
    box-shadow: var(--download-results-single-file-download-icon-box-shadow);
}

.btn--download-single-file-sm .overlay-bg-download {
    position: absolute;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: var(--spacing-100) calc(var(--spacing-100) + var(--spacing-025));
    font-size: calc(var(--spacing-100)*2);
    background-color: var(--download-results-single-file-overlay-bg-color);
    backdrop-filter: var(--download-results-single-file-overlay-blur);
    border-radius: var(--box-container-border-radius);
    opacity: 0;
    transition: opacity var(--transition-mode-delay) ease;
}

.btn--download-single-file-sm .overlay-bg-download i {
    padding: var(--spacing-100) calc(var(--spacing-100) + var(--spacing-025));
    font-size: calc(var(--spacing-100)*2);
    color: var(--download-results-file-upload-icon-color);
    border-radius: 50%;
    background-color: var(--download-results-file-upload-icon-bg-color);
}

.btn--download-single-file-sm:hover .overlay-bg-download {
    opacity: 1;
}

.section__single-file-icon-container {
    position: relative;
    width: 100%;
    padding: var(--spacing-100);
    border: 1px solid var(--download-results-single-file-icon-container-border-color);
    border-radius: 8px;
    background-color: var(--download-results-single-file-icon-container-bg-color);
}

.section__single-file-icon-container i {
    font-size: calc(var(--spacing-100)*3);
    color: var(--download-results-single-file-icon-color);
    text-shadow: var(--download-results-single-file-icon-box-shadow);
}

.section__single-file-download-text {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    column-gap: var(--spacing-050);
    font-size: 0.9em;
    color: var(--download-results-single-file-download-text-color) !important;
}

.section__file-text-floating {
    position: absolute;
    top: 4.5vh;
    left: 5vh;
    padding: var(--spacing-025);
    font-size: 0.75em;
    color: var(--download-results-single-file-floating-font-color) !important;
    background-color: var(--download-results-single-file-floating-bg-color);
}

/***************************************************************************************
 * Responsive Design : Download results tab
***************************************************************************************/
@media (min-width: 1050px) and (max-width: 1475px) {
    .section__group-multiple-file {
        overflow-y: auto !important;
        grid-auto-flow: row;
    }

    .btn--download-single-file-sm {
        justify-self: center !important;
        padding: 1.5rem;
        margin-right: 1rem;
    }
}

@media (max-width: 1050px) {
    .section__download-container {
        grid-template-areas: none !important;
        grid-template-rows: auto auto !important;
        grid-template-columns: 1fr;
    }

    .section__download-container > * {
        grid-area: auto !important;
    }

    .section__group-multiple-file {
        max-width: clamp(40vh, 60vw, 100vh);
    }

    .section__download--additional-results {
        order: 5;
    }

    .section__group-multiple-file--add-rs {
        flex-direction: row;
        justify-content: flex-start;
        order:5;
    }

    .section__single-file-name {
        width: calc(100%);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 768px) {
    #container_download {
        max-width: none !important;
    }

    .section__group-multiple-file {
        max-width: 65vw !important;
        margin: 3rem auto 0 auto;
    }

    .section__download {
        row-gap: 1.5rem;
    }
}

@media (max-width: 600px) {
    .container__wrapper .section--header:has(button.btn_download_result) {
        flex-direction: column;
    }

    .btn_download_result.located_in_header {
        width: 100%;
        padding: 1.5rem;
    }
}


/***************************************************************************************
 * DataTables Main for LIC/LRC/ETL
***************************************************************************************/
table {
    border-collapse: separate !important; /* "separate" or "collapse" */
    border-spacing: 0 !important;
    width: 100% !important;
}

th {
    box-sizing: border-box !important; /* fix css for datatable vertical scrolling */
    text-align: center !important;
    padding: calc(var(--spacing-100) + var(--spacing-025)) !important;
    font-weight: normal !important;
    font-size: calc(var(--spacing-100) - 0.025rem) !important;
    background-color: var(--table-th-bg-color) !important;
    color: var(--table-th-font-color) !important;
    white-space: nowrap !important;
    border-bottom: 0 !important;
}

td {
    text-align: center !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.815rem !important;
    border: 0.1rem solid var(--table-border-color) !important;
    color: var(--table-td-font-color) !important;
}

tr:nth-child(even) {
    background-color: var(--table-td-bg-even-color) !important;
}

tr:nth-child(odd) {
    background-color: var(--table-td-bg-odd-color) !important;
}

/* *************************************************************** */

/* ************************* DataTable Design ************************* */
/* dataTables_filter = search box */
/* dataTables_length = show ... entries box */
/* dataTables_info = Showing ... to ... of ... entries box*/
/* dataTables_paginate = page number box*/
/* paginate_button current = page number button */
/* dt-button -> download btn */

.dataTables_wrapper th:not(:first-child) {
    border-left: 0.1rem solid var(--table-border-color) !important;
}

.dataTables_wrapper th:not(:last-child) {
    border-right: 0.1rem solid var(--table-border-color) !important;
}

.dataTables_scroll
{
    height: 100% !important;
    border: 0 !important;
    overflow: auto !important;
    clear: both !important;
}

.dataTables_scroll,
.dataTables_scroll .dataTables_scrollHead {
    border-top-left-radius: var(--table-th-border-radius) !important;
    border-top-right-radius:  var(--table-th-border-radius) !important;
}

.dataTable.no-footer {
    border: 0 !important;
}

.dataTables_custom_top_wrapper {
    display: flex;
}

.dataTables_custom_top_wrapper:has(:only-child) {
    justify-content: flex-end !important;
}   

div.dt-buttons, .dataTables_length, .dataTables_filter {
    float: none !important;
}

div.dt-buttons {
    height: 100% !important;
    padding: 0.5rem 0 !important;
}

button.dt-button {
    /* display: block !important; */
    color: var(--table-btn-font-color) !important;
    background-color: var(--table-btn-bg-color) !important;
    border: 0rem !important;
    border-radius: 0.4rem !important;
    padding: 0.5rem !important;
    font-size: 0.9rem !important;
    margin: 0.25rem !important;
    width: 5rem !important;
    text-align: center !important;
}

button.dt-button:hover {
    color: var(--table-btn-font-color-hover) !important;
    background-color: var(--table-btn-bg-color-hover) !important;
    font-weight: bolder;
}

button.dt-button > span > img {
    width: calc(var(--spacing-100) + var(--spacing-050));
    filter: invert(100);
}

.dataTables_filter {
    margin: 0rem;
    margin-left: auto !important;
}

.dataTables_filter input {
    background-image: var(--search-icon) !important;
    background-size: 1rem !important;
    background-position: 0.8rem 0.8rem !important;
    background-repeat: no-repeat !important;
    width: 15vw !important;
    max-width: 15rem !important;
    min-width: 5.5rem !important;
    /* Full-width */
    font-size: 1rem !important;
    padding: 0.625rem 1.25rem 0.625rem 2.5rem !important;
    margin: 0.75rem 0.2rem !important;
}

.dataTables_filter input,
.dataTables_length label select {
    border-radius: 0.3rem !important;
    border: 0.08rem solid var(--input-border-color) !important;
    color: var(--input-font-color) !important;
    background-color: var(--input-bg-color) !important;
}

.dataTables_filter input:focus,
.dataTables_length label select:focus {
    outline: none !important;
    border: 0.08rem solid var(--input-border-focus-color) !important;
    box-shadow: 0 0 0 0.225rem var(--input-bg-focus-color);
}

body.dark_mode .dataTables_filter input:focus {
    background-image: var(--search-icon-focus) !important;
}

.dataTables_length label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    column-gap: calc(var(--spacing-100) - 0.35rem);
    padding: 1.2rem 0 0.6rem var(--spacing-100) !important;
    font-size: var(--spacing-100) !important;
    color: var(--common-text-font-color) !important;
}

.dataTables_length {
    padding-bottom: var(--spacing-100);
}

.dataTables_info {
    font-size: 1rem !important;
    margin: 0rem !important;
    padding-top: 1rem;
    color: var(--common-text-font-color) !important;
}

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

.dataTables_paginate {
    padding-top: var(--spacing-100) !important;
}

.dataTables_paginate .paginate_button {
    padding: 0.5em 0.8em !important;
    border-radius: 8px !important;
    color: var(--datatable-paginate-button-font-color) !important;
}

.dataTables_paginate span a {
    margin: 0.2rem !important;
}

.dataTables_paginate span span.ellipsis {
    margin: 0 0.2rem !important;
    padding: 0 !important;
    color: var(--datatable-about-pagination-ellipsis-color);
}

.dataTables_paginate .paginate_button.disabled {
    color: var(--datatable-paginate-button-disabled-font-color) !important;
}

.dataTables_paginate a.paginate_button.current,
.dataTables_paginate a.paginate_button:not(.disabled):hover,
.dataTables_paginate span a.paginate_button:hover {
    border: 1px solid var(--datatable-about-pagination-color) !important;
    color: var(--datatable-paginate-button-active-font-color) !important;
    background: var(--datatable-paginate-button-bg-color) !important;
}

table.dataTable tbody tr:nth-child(even)>.dtfc-fixed-left,
table.dataTable tbody tr:nth-child(even)>.dtfc-fixed-right {
    background-color: var(--table-td-bg-even-color) !important;
}

table.dataTable tbody tr:nth-child(odd)>.dtfc-fixed-left,
table.dataTable tbody tr:nth-child(odd)>.dtfc-fixed-right {
    background-color: var(--table-td-bg-odd-color) !important;
}

/***************************************************************************************
 * Responsive Design : Datatables
***************************************************************************************/
@media (max-width: 992px) {
    .dataTables_custom_paginate_wrapper {
        flex-direction: column;
        margin-top: 1rem;  
        gap: 0.5rem;
    }

    .dataTables_custom_top_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 1rem;
        margin-bottom: 1rem;
    }

    .dataTables_length {
        padding: 0 !important;
    }

    .dataTables_length label {
        padding: 0 !important;
    }

    .dataTables_filter {
        margin-top: 0 !important;
        margin-left: 0 !important;
    }

    .dataTables_filter input {
        width: 45vw !important;
        max-width: none !important;
    }
}

@media (max-width: 350px) {
    .dataTables_paginate > span {
        display: flex;
        flex-wrap: wrap;
    }
}

/* ######################################## */
/* Remove padding for scroll body (All table LIC/LRC) */
.dataTables_scrollBody table thead tr th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/***************************************************************************************
 * IT APP
***************************************************************************************/
.tab_special_function.active,
.tab_special_function_collapsed.active,
.tab_special_function:hover,
.tab_special_function_collapsed.active,
.tab_special_function_collapsed:hover {
    color: var(--it-app-tab-active-font-color) !important;
    background-color: var( --it-app-tab-active-bg-color) !important;
}

.tab_special_function.active  .sidebar__menu-icon,
.tab_special_function.active .sidebar__menu-name,
.tab_special_function:hover .sidebar__menu-icon,
.tab_special_function:hover .sidebar__menu-name,
.tab_special_function_collapsed.active i,
.tab_special_function_collapsed.active .sidebar__tab-name,
.tab_special_function_collapsed:hover i,
.tab_special_function_collapsed:hover .sidebar__tab-name {
    color: var(--it-app-tab-active-font-color) !important;
}

.section--it-app {
    --grid-row-ratio: 0.75fr 1.35fr;

    display: grid;
    grid-template-rows: var(--grid-row-ratio);
    width: 100%;
    row-gap: var(--spacing-100);
}

.section--it-app .section--box-container {
    --main-spacing: calc(var(--spacing-100) + var(--spacing-025));

    position: relative;
    padding-top: var(--main-spacing);
    padding-bottom: var(--main-spacing);
    background: var(--it-app-box-container-bg-color);
    border: 1px solid var(--it-app-box-container-border-color);
}

.section--download-file-container {
    --main-spacing: calc(var(--spacing-100) + var(--spacing-050));

    position: relative;
    display: flex;
    justify-content: center;
    gap: var(--main-spacing) calc(var(--main-spacing) * 3);
    flex-flow: row wrap;
    transition: background var(--transition-mode-delay) ease, border var(--transition-half-second-delay) ease;
}

.section--journal-conversion-setting.disabled,
.section--download-file-container:has(> button[disabled]:nth-of-type(2)):not(:has(> button:not([disabled]))) {
    background: var(--it-app-disabled-box-container-bg-color);
    border: 1px solid var(--it-app-disabled-box-container-border-color);
}

.section--journal-conversion-setting .batch-pro,
.section--download-file-container .batch-pro {
    --pos-top: 1.5vh;
    --pos-right: 2vh;
    --main-spacing: var(--spacing-050);

    position: absolute;
    top: var(--pos-top);
    right: var(--pos-right);
    padding: calc(var(--main-spacing)) var(--main-spacing);
}

.section--download-file-container > button {
    --main-border-radius: 6px;
    --main-spacing: var(--spacing-100);

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: var(--main-spacing);
    padding: var(--main-spacing) calc(var(--main-spacing) + var(--spacing-050));
    background-color: var(--it-app-download-file-btn-bg-color);
    border: 1px solid var(--it-app-download-file-btn-border-color);
    border-radius: var(--main-border-radius);
    transition:
        background var(--transition-mode-delay) ease,
        border var(--transition-half-second-delay) ease;
}

.section--download-file-container > button:hover {
    background-color: var(--it-app-download-file-btn-bg-hover-color);
}

.section--download-file-container > button > div {
    --main-size: 125px;
    --main-spacing: calc(var(--spacing-100) + var(--spacing-050));
    
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--main-size);
    height: var(--main-size);
    margin: 0 var(--main-spacing);
    background: var(--blue-denim);
    border-radius: 50%;
    transition: background var(--transition-mode-delay) ease;
}

.section--download-file-container > button > span {
    --main-spacing: var(--spacing-025);
    --main-fs: 0.95em;

    display: inline-flex;
    flex-direction: column;
    row-gap: var(--main-spacing);
    font-size: var(--main-fs);
    font-weight: bold;
    transition: color var(--transition-mode-delay) ease;
}

.section--download-file-container > button > div > img {
    --main-w: 5.75rem;
    --main-h: 9vh;

    width: var(--main-w);
    height: var(--main-h);
    transition: filter var(--transition-mode-delay) ease;
}

.section--download-file-container button:disabled,
.section--download-file-container button[disabled] {
    background-color: var(--it-app-disabled-download-file-btn-bg-color);
    border-color: var(--it-app-disabled-download-file-btn-border-color);
    cursor: not-allowed;
    transition:
        background var(--transition-mode-delay) ease, 
        border-color var(--transition-mode-delay) ease, 
        color var(--transition-mode-delay) ease;
}

.section--download-file-container button:disabled > div,
.section--download-file-container button[disabled] > div {
    background-color: var(--it-app-disabled-download-file-btn-behind-bg-color);  
}

.section--download-file-container button:disabled > span,
.section--download-file-container button[disabled] > span {
    color: var(--it-app-disabled-download-file-btn-font-color);  
}

.section--download-file-container button:disabled > div > img,
.section--download-file-container button[disabled] > div > img {
    filter: saturate(15%)
}


#container_it_app button:disabled .unlock-icon.fa-solid.fa-lock,
#container_it_app button[disabled] .unlock-icon.fa-solid.fa-lock,
.section--journal-conversion-setting.disabled i.fa-lock {
    color: var(--it-app-lock-icon-font-color);
    background-color: var(--setup-input-it-app-lock-icon-bg-color);
    border-color: var(--setup-input-it-app-lock-icon-border-color);
}

.section--download-file-container .unlock-icon {
    --main-pos: 1vh;

    top: var(--main-pos);
    right: var(--main-pos);
}

.section--journal-conversion-setting .unlock-icon {
    --main-pos: 1vh;

    top: var(--main-pos);
    right: calc(var(--spacing-100) * 6 + var(--spacing-025));
}

.section--journal-conversion-setting .unlock-icon.fa-lock {
    padding: var(--main-pd-tb) calc(var(--main-pd-lr) + 0.075rem);
}

.section--journal-conversion-setting .form_input {
    border-color: var(--blue-glacier);
    transition: border var(--transition-mode-delay) ease;
}

.section--journal-conversion-setting > p {
    --main-fs: calc(var(--spacing-100) + 0.275rem);

    font-size: var(--main-fs);
    font-weight: bold;
    color: var(--it-app-journal-conversion-font-color);
    transition: color var(--transition-mode-delay) ease;
}

.section--journal-conversion-setting .div_btn_journal {
    --main-spacing: calc(var(--spacing-100) + var(--spacing-050));

    display: flex;
    justify-content: center;
    align-items: center;
    row-gap: var(--main-spacing);
}

.section--journal-conversion-setting .div_btn_journal > .col_space {
    flex: none !important;
}

.section--journal-conversion-setting.disabled > p {
    color: var(--it-app-disabled-download-file-btn-font-color);
    transition: color var(--transition-mode-delay) ease;
}

.section--journal-conversion-setting.disabled .form_label,
.section--journal-conversion-setting.disabled .form_label > i {
    color: var(--it-app-disabled-download-file-btn-font-color);
    transition: color var(--transition-mode-delay) ease;
}

.section--journal-conversion-setting.disabled .form_input {
    color: var(--it-app-disabled-download-file-btn-font-color);
    background-color: var(--input-disabled-bg-color);
    border-color: var(--it-app-disabled-download-file-btn-border-color);
    pointer-events: none;
    transition:
        color var(--transition-mode-delay) ease,
        background-color var(--transition-mode-delay) ease,
        border var(--transition-mode-delay) ease;
}

.section--journal-conversion-setting.disabled select {
    background-image: var(--dropdown-arrow-icon-disabled);
}

.section--journal-conversion-setting.disabled input,
.section--journal-conversion-setting.disabled select {
    pointer-events: none;
}

.btn_submit_it_app {
    --main-fs: calc(var(--spacing-100) + 0.075rem);
    --main-spacing: calc(var(--spacing-100) * 2);

    padding: calc(var(--main-spacing) - 0.3rem) var(--main-spacing);
    font-size: var(--main-fs);
    color: var(--primary-white);
}

#btn_journal_generate {
    background-color: var(--it-app-journal-conversion-btn-generate-bg-color);
    transition: background-color var(--transition-mode-delay) ease;
}

#btn_journal_generate:not(:disabled):hover {
    color: var(--primary-white);
    background-color: var(--it-app-journal-conversion-btn-generate-bg-hover-color);
}

#btn_journal_export {
    background-color: var(--it-app-journal-conversion-btn-export-bg-color);
    transition: background-color var(--transition-mode-delay) ease;
}

#btn_journal_export:not(:disabled):hover {
    color: var(--primary-white);
    background-color: var(--it-app-journal-conversion-btn-export-bg-hover-color);
}

/***************************************************************************************
 * Responsive Design : It App Tab
***************************************************************************************/
@media (max-width: 768px) {
    .section--download-file-container {
        flex-direction: column;
        padding: calc(var(--main-spacing) + var(--spacing-075)) !important;
    }

    .section--download-file-container > button:first-child {
        margin-top: calc(var(--main-spacing) + var(--spacing-050));
    }

    .section--journal-conversion-setting .div_btn_journal > .col_space,
    .section--journal-conversion-setting .div_btn_journal button {
        width: 100%;
    }
}

@media (max-width: 350px) {
    .section--download-file-container {
        flex-direction: row !important;
    }
}

/* Datepicker ********************************************************* */
.datepicker {
    z-index: 9999 !important;
}

.datepicker table th {
    font-size: calc(var(--spacing-100) - 0.10rem) !important;
    padding: var(--spacing-100) !important;
}

.datepicker table td {
    font-size: calc(var(--spacing-100) - 0.20rem) !important;
    padding: var(--spacing-100) !important;
}

.datepicker table tr td span:not(.disabled):hover,
.datepicker table tr td.day:hover {
    color: var(--primary-black) !important;
}

.datepicker table th.prev,
.datepicker table th.next,
.datepicker table th.datepicker-switch,
.datepicker table th.dow {
    color: var(--datepicker-table-cell-header-font-color) !important;
    background-color: var(--datepicker-table-cell-header-bg-color) !important;
}

.datepicker table tr:nth-child(2n - 1) {
    background-color: var(--table-td-bg-odd-color);
}

body.dark_mode .datepicker table tr:nth-child(2n - 1) {
    background-color: var(--table-td-bg-even-color) !important;
}

.datepicker table tr:nth-child(2n) {
    background-color: var(--table-td-bg-even-color) !important;
}

.datepicker table td span.active.month,
.datepicker table td span.active.month:hover,
.datepicker table td span.active.year,
.datepicker table td span.active.year:hover,
.datepicker table td.active.day,
.datepicker table td.active.day:hover {   
    color: var(--datepicker-table-cell-active-font-color) !important;
    background-color: var(--datepicker-table-cell-active-bg-color) !important;
    background-image: none !important;
}

.datepicker table td.old,
.datepicker table td.new {
    color: var(--datepicker-table-cell-old-new-day-font-color) !important;
}

.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
    color: var(--datepicker-table-cell-disabled-font-color);
    cursor: not-allowed;
}

/***************************************************************************************
 * Error list
***************************************************************************************/
.errorlist {
    display: block;
    position: relative;
    margin-bottom: 1rem;
    padding: 0.25rem 2rem 0.25rem 2rem;
    font-size: 0.815rem;
    color: var(--error-list-font-color);
    list-style: none;
    border-left: 4px solid var(--error-list-border-color);
    background-color: var(--error-list-bg-color);
}

.errorlist > li {
    --icon-warning-spacing: 1.5rem;

    display: grid;
    grid-template-columns: var(--icon-warning-spacing) 1fr;
    column-gap: 0.5rem;
}

.errorlist > li:before {
    display: inline-block;
    width: var(--icon-warning-spacing);
    content: "\f071"; /* FontAwesome Unicode */
    font-family: FontAwesome;
    margin-left: -1.25rem;
}

/***************************************************************************************
 * Toggle theme button
***************************************************************************************/
#toggle-theme {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
}

.switch-wrapper > label {
    position: relative;
    display: flex;
    align-items: center;
    width: 64px;
    height: 34px;
    padding: 4px;
    margin-bottom: 0;
    border-radius: 25px;
    border: 1px solid var(--toggle-theme-btn-container-border-color);
    background-color: var(--toggle-theme-btn-container-bg-color);
    cursor: pointer;
}

.theme-icon {
    position: absolute;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:
        transform var(--transition-mode-delay) ease,
        background-color var(--transition-mode-delay) ease,
        color var(--transition-mode-delay) ease;
    font-size: 1.2rem;
    color: var(--toggle-theme-btn-icon-color);
}

.theme-icon.current {
    background-color: var(--toggle-theme-btn-icon-current-bg-color);
    color: var(--toggle-theme-btn-icon-current-font-color) !important;
}

.theme-icon.move_to_right {
    transform: translateX(30px) !important;
}

.theme-icon.move_to_left {
    transform: translateX(-30px) !important;
}

.switch-wrapper .icon-left {
    display: flex;
    left: 0.2rem;
    transform: translateX(0);
    z-index: 2;
    animation: fade-in var(--transition-mode-delay) ease-in-out;
}

.switch-wrapper .icon-right {
    display: flex;
    right: 0.2rem;
    transform: translateX(0);
    animation: fade-in var(--transition-mode-delay) ease-in-out;
}

/***************************************************************************************
 * Processing icon
***************************************************************************************/
.processing {
    position: relative;
}

div:where(.swal2-container) div:where(.swal2-loader) {
    border: none !important;
}

.processing::after,
div:where(.swal2-container) div:where(.swal2-loader)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    background: var(--processing-blur-bg-color);
    pointer-events: all;
    opacity: 1;
    transition: opacity var(--transition-mode-delay) ease;
}

.processing::before,
div:where(.swal2-container) div:where(.swal2-loader)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11;
    width: 2.5rem;
    height: 2.5rem;
    margin: -1.25rem 0 0 -1.25rem;
    border: 4px solid var(--processing-ring-bg-color);
    border-top-color: transparent;
    border-radius: 50%;
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--transition-mode-delay) ease;
    animation: spin 1s linear infinite;
}

.processing.hidden::after,
.processing.hidden::before {
    opacity: 0;
    pointer-events: none;
}

/***************************************************************************************
 * Custom Modal
***************************************************************************************/
dialog {
    display: none;
    width: min(600px, 100%);
    padding: 0 !important;
    color: var(--swal-alert-general-font-color);
    border: 1px solid var(--swal-alert-border-color);
    border-radius: 0.3125rem;
    background-color: var(--swal-alert-bg-color);
    box-shadow: 1px 1px 6px 1px var(--swal-alert-box-shadow-color);
    opacity: 0;
    transform: translateY(1.25rem);
    transition-property: display opacity;
    transition-duration: var(--transition-mode-delay);
    transition-behavior: ease;
}

dialog[open] {
    display: block;
    opacity: 1;

    @starting-style {
        opacity: 0;
        transform: translateY(0);
    }
}

dialog::backdrop {
    background-color: var(--swal-alert-backdrop-bg-color);
}

.custom-modal-header {
    position: relative;
    padding: 1.25rem 1.65rem;
}

.custom-modal-body {
    padding: 1rem 1.65rem 1.25rem 1.65rem;
}

.custom-modal-action-btn-container {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap-reverse;
    gap: 1rem;
    padding: 0 2rem 1.65rem 2rem;
}

.custom-modal-action-submit-btn.btn_submit {
    display: flex !important;
    min-width: 0 !important;
    height: 6vh !important;
    padding: 1.25rem 1.5rem !important;
    margin: 0 !important;
}

.custom-modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    text-align: center;
    border: none;
    background: none;
}

.custom-modal-close-btn i {
    color: var(--common-text-font-color);
}

/* ---- For form popup --- */
.swal2-popup.swal2-modal.custom-form-popup {
    width: min(550px, calc(100% - 2 * 1.25em)) !important;
}

.swal2-popup.swal2-modal.custom-form-popup .swal2-html-container {
    max-height: 95vh;
}

.form-popup-container {
    font-size: 1rem;
    text-align: left;
}

.form-popup-container > :not([hidden]) ~ :not([hidden]),
.form-popup-body > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1.25rem;
}

.form-popup-container .form-popup-header {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.form-popup-body .form_input {
    padding: 0.65rem 0.75rem !important;
    margin-bottom: 0;
}

.form-popup-footer {
    display: flex;
    gap: 1rem;
}

.form-popup-footer.dir-lr {
    justify-content: space-between;
}

.form-popup-footer.dir-r {
    justify-content: flex-end;
}

.form-popup-footer.dir-r > div:nth-child(1),
.form-popup-footer.dir-lr > div:nth-child(2) {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.form-popup-footer .btn:has(i) {
    column-gap: 0.75rem;
}

.form-popup-container .btn_submit {
    width: auto !important;
}

/* --- custom modal alert popup (like sweetalert) -- */
.custom-modal-alert-container .custom-modal-body {
    min-height: 40vh;
}

.custom-modal-alert-container .custom-modal-body .icon {
    display: flex;
}

.custom-modal-alert-container h2 {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0.8em 1em 0;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word;
    cursor: initial;
}

.custom-modal-alert-container .custom-modal-content {
    z-index: 1;
    justify-content: center;
    margin: 0;
    padding: 1em 1.6em 0.3em;
    font-size: 1.125em;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    word-wrap: break-word;
    word-break: break-word;
    cursor: initial;
    overflow: auto;
}

.custom-modal-alert-container .button-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.25em auto 0;
}

.custom-modal-alert-container .button-actions .btn-confirm-custom-modal-alert {
    margin: 0.3125em;
    padding: 0.625em 1.1em;
    background: initial;
    background-color: initial;
    background-color: var(--swal-alert-confirm-btn-bg-color);
    font-size: 1em;
    font-weight: 500;
    color: var(--primary-white);
    border: 0;
    border-radius: 0.25em;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0);
    transition: box-shadow 0.1s;
}

.custom-modal-alert-container .button-actions .btn-confirm-custom-modal-alert:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}

.custom-modal-alert-container .button-actions .btn-confirm-custom-modal-alert:focus {
    box-shadow: 0 0 0 3px rgba(100, 150, 200, 0.5);
}

@media (min-width: 375px) {
    .custom-modal-action-btn-container > button {
        width: auto !important;
    }
}

@media (max-width: 375px) {
    .custom-modal-action-btn-container > button {
        width: 100% !important;
    }
}

/***************************************************************************************
 * Custom Accordion
***************************************************************************************/
.custom-accordion-item {
    margin-bottom: 0.5rem;
    border: 1px solid var(--custom-accordion-item-border-color);
    border-radius: 4px;
}

.custom-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--custom-accordion-header-bg-color);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-mode-delay) ease;
}

.custom-accordion-header:hover {
    background: var(--custom-accordion-header-bg-hover-color);
}

.custom-accordion-header.disabled {
    color: var(--grey-silver-sand);
    background: var(--custom-accordion-header-disabled-bg-color);
    cursor: not-allowed;
}

.custom-accordion-header > span:first-child {
    margin-right: 1rem;
}

.custom-accordion-header > span:first-child .group-text.has-icon > i {
    width: 1.125rem;
    margin-right: 0.5rem;
}
    
.custom-accordion-content .group-text {
    font-size: 1.125rem;
}

.custom-accordion-header .important-text {
    color: var(--custom-accordion-header-important-text-color);
}

.custom-accordion-header .arrow {
    border: solid var(--custom-accordion-header-arrow-color);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transition: transform 0.3s ease;
    transform: rotate(45deg);
}

.custom-accordion-header[data-isopen="true"] .arrow {
    transform: rotate(-135deg);
}

.custom-accordion-content {
    max-height: 0;
    padding: 0 1rem;
    overflow: auto;
    transition:
        max-height var(--transition-mode-delay) ease-in-out,
        padding var(--transition-mode-delay) ease-in-out;
}

.custom-accordion-content.open {
    max-height: 19rem;
    padding: 1rem;
}

/***************************************************************************************
 * Custom Radio
***************************************************************************************/
.custom-input-radio {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem;
}

.custom-input-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-input-radio .custom-input-radio-label {
    position: relative;
    padding-left: 2rem;
    font-size: 1rem;
    line-height: 1.4rem;
    cursor: pointer;
    user-select: none;
}

.custom-input-radio .custom-input-radio-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1.4rem;
    height: 1.4rem;
    border: 2px solid var(--input-border-color);
    border-radius: 50%;
    background-color: var(--input-bg-color);
    box-sizing: border-box;
    transform: translateY(-50%);
    transition: all var(--transition-mode-delay) ease;
}

.custom-input-radio input[type="radio"]:focus + .custom-input-radio-label::before {
    border-color: var(--input-border-focus-color);
    box-shadow: 0 0 0 0.225rem var(--input-bg-focus-color);
}

.custom-input-radio .custom-input-radio-label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.35rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: var(--input-checkbox-color);
    transform: translateY(-50%) scale(0);
    transition: transform var(--transition-mode-delay) ease;
}

.custom-input-radio input[type="radio"]:checked + .custom-input-radio-label::after {
    transform: translateY(-50%) scale(1);
}

.custom-input-radio input[type="radio"]:disabled + .custom-input-radio-label::before {
    border-color: var(--input-border-color);
    background-color: var(--input-disabled-bg-color);
    cursor: not-allowed;
}

.custom-input-radio input[type="radio"]:disabled + .custom-input-radio-label {
    color: var(--input-disabled-font-color);
    cursor: not-allowed;
}

/***************************************************************************************
 * Custom checkbox
***************************************************************************************/
.custom-input-checkbox {
    display: flex;
    align-items: center;
    padding: 0.5rem;
}

.custom-input-checkbox-label {
    padding-left: 0.675rem;
}

.custom-input-checkbox input[type="checkbox"] {
    position: relative;
    appearance: none;
    box-sizing: content-box;
    overflow: hidden;
    outline: none;
    background-color: var(--input-bg-color);
}

.custom-input-checkbox input[type="checkbox"]:before {
    content: '';
    display: block;
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    border: 2px solid var(--input-border-color);
    border-radius: 4px;
    transition: border-color var(--transition-mode-delay) ease;
}

.custom-input-checkbox input[type="checkbox"]:checked:before {
    border-color: var(--input-border-focus-color);
    transition: border-color var(--transition-mode-delay) ease;
}

.custom-input-checkbox input[type="checkbox"]:not(:checked):not(:disabled):before {
    border-color: var(--input-border-color);
    transition: border-color var(--transition-mode-delay) ease;
}

.custom-input-checkbox input[type="checkbox"]:disabled:before {
    border-color: var(--input-border-color);
    background-color: var(--input-disabled-bg-color);
}

.custom-input-checkbox input[type="checkbox"]:after {
    content: '';
    position: absolute;
    display: block;
    box-sizing: content-box;
    top: 50%;
    left: 50%;
    width: 9.6px;
    height: 16px;
    border-radius: 0;
    background-color: var(--transparent);
    box-shadow: 4px 4px 0px 0px var(--input-checkbox-color);
    transform: translate(-50%, -85%) scale(0) rotate(45deg);
    transform-origin: 50% 50%;
}

.custom-input-checkbox input[type="checkbox"]:checked:after {
    animation: toggleOnCheckbox 0.2s ease forwards;
}

.custom-input-checkbox input[type="checkbox"]:not(:disabled):hover:before {
    border-color: var(--input-checkbox-color);
}

.custom-input-checkbox:focus-within input[type="checkbox"]:not(:disabled)::before {
    border: 2px solid var(--input-border-focus-color);
    box-shadow: 0 0 0 0.225rem var(--input-bg-focus-color);
}

@keyframes toggleOnCheckbox {
    0% {
        opacity: 0;
        transform: translate(-50%, -85%) scale(0) rotate(45deg);
    }

    70% {
        opacity: 1;
        transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
    }

    100% {
    transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
    }
}

/***************************************************************************************
 * Custom Multiselect
***************************************************************************************/
.custom-input-multiselect-container {
    min-height: 2.645rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px;
    border: 1px solid var(--input-border-color);
    border-radius: 0.275rem;
    background-color: var(--input-bg-color);
    transition:
        background-color var(--transition-mode-delay) ease,
        color var(--transition-mode-delay) ease, border var(--transition-mode-delay) ease,
        box-shadow var(--transition-mode-delay) ease;
}

.custom-input-multiselect-container.disabled {
    cursor: not-allowed;
    color: var(--input-disabled-font-color);
    background-color: var(--input-disabled-bg-color) !important;
}

.custom-input-multiselect-container:focus-within {
    outline: none !important;
    border-color: var(--input-border-focus-color);
    box-shadow: 0 0 0 0.225rem var(--input-bg-focus-color);
}

.custom-input-multiselect-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    margin: 0.125rem 0.3125rem;
    color: var(--primary-black);
    border-radius: 3px;
    background-color: var(--grey-mercury);
}

.custom-input-multiselect-tag.disabled {
    color: var(--input-disabled-font-color);
    background-color: var(--input-disabled-bg-color);
    cursor: not-allowed;
}

.custom-input-multiselect-tag-remove {
    font-size: 1rem;
    font-weight: bold;
    color: #666;
    cursor: pointer;
}

.custom-input-multiselect-tag.disabled .custom-input-multiselect-tag-remove {
    cursor: not-allowed;
}

.custom-input-multiselect {
    width: min(15rem, 100%);
    padding: 5px;
    color: var(--input-font-color);
    border: none;
    background: var(--input-bg-color);
    outline: none;
}

.custom-input-multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    display: none;
    list-style: none;
    max-height: 200px;
    padding: 0 !important;
    margin: 0;
    border: 1px solid var(--input-border-color);
    background: var(--input-bg-color);
    box-shadow: 0 0 4px var(--select-option-options-box-shadow-color);
    list-style: none;
    overflow-y: auto;
}

.custom-input-multiselect-dropdown li {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.custom-input-multiselect-dropdown li:hover,
.custom-input-multiselect-dropdown li.active {
    background-color: var(--select-option-options-bg-hover-color);
}

/***************************************************************************************
 * Feature: Cancel calculation
***************************************************************************************/
#btn_cancel_calculation {
    background-color: var(--btn-error-bg-color) !important;
    transition: var(--transition-mode-delay) ease;
}

#btn_cancel_calculation > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.375rem;
}

#btn_cancel_calculation > span i {
    font-size: 0.895rem;
}

#btn_cancel_calculation:hover {
    background-color: var(--cancel-process-btn-bg-color) !important;
}

.popup-cancel-calculation .swal2-title {
    padding: 0.75rem 0.75rem 0.5rem 0.75rem !important;
}

/***************************************************************************************
 * Feature: Resource Monitoring
***************************************************************************************/
.popup-cancel-calculation.has-resource-monitoring-comp {
    width: min(750px, 100%) !important;
}

.popup-cancel-calculation.has-resource-monitoring-comp .swal2-html-container {
    padding: 0 !important;
}

.popup-cancel-calculation.has-resource-monitoring-comp .swal2-footer {
    margin: 0 !important;
    padding-top: 0 !important;
}

.popup-cancel-calculation.has-resource-monitoring-comp .swal2-actions.swal2-loading {
    height: 3.75rem;
    margin: 0.35rem 0 !important;
    opacity: 1;
    transition:
        height var(--transition-mode-delay) ease,
        opacity var(--transition-mode-delay) ease,
        margin var(--transition-mode-delay) ease;
}

.popup-cancel-calculation.has-resource-monitoring-comp .swal2-actions.swal2-loading.slide-up {
    height: 0.75rem;
    margin: 0 !important;
    opacity: 0;
}

.popup-cancel-calculation .swal2-title:has(+ .swal2-actions.swal2-loading.add) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.system-resources-wrapper {
    margin: 2rem 0;
}

.resource-monitor {
    margin: 0.75rem 2rem 0.65rem 2rem;
    padding: 1.25rem 1.25rem 1rem 1.25rem;
    background: var(--resource-monitoring-container-bg-color);
    border-radius: 4px;
    border-left: 3px solid var(--resource-monitoring-container-ribbon-color);
}

.resource-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.975rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--resource-monitoring-title-font-color);
}

.resource-title:has(+ #resources-content.collapsed) {
    margin-bottom: 0;
}

.resource-title .chevron {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.resource-title .chevron.rotated {
    transform: rotate(180deg);
}

.resource-btn-wrapper {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.resource-toggle-btn,
#resource-config-settings {
    padding: 0.5rem 0.6rem;
    color: var(--resource-monitoring-toggle-btn-font-color);
    border: none;
    border-radius: 4px;
    background: var(--resource-monitoring-toggle-btn-bg-color);
    cursor: pointer;
    transition: background-color var(--transition-mode-delay) ease;
}

.resource-toggle-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.875rem;
}

.resource-toggle-btn:hover,
#resource-config-settings:hover {
    background: var(--resource-monitoring-toggle-btn-bg-hover-color);
}

.resource-toggle-btn span:first-child {
    margin-right: 0.275rem;
}

.resource-tab-container,
.line-chart-sub-tab-container {
    display: flex;
    gap: 0.25rem;
    padding: 0.125rem;
    border-radius: 4px;
    background: var(--resource-monitoring-tab-bg-color);
}

.line-chart-sub-tab-container {
    margin-bottom: 0.5rem;
}

.resources-content:not(:has(.resource-tab-container)) .line-chart-sub-tab-container {
    margin-bottom: 1.5rem;
}

.resource-tab-btn,
.resources-content:not(:has(.resource-tab-container)) .line-chart-sub-tab-btn {
    padding: 0.675rem 0.5rem;
    font-size: 0.80rem;
}

.line-chart-sub-tab-btn {
    padding: 0.425rem 0.5rem;
    font-size: 0.725rem;
}

.resource-tab-btn,
.line-chart-sub-tab-btn {
    flex: 1;
    font-weight: 500;
    color: var(--resource-monitoring-tab-font-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 3px;
    background: none;
    cursor: pointer;
    transition: all var(--transition-mode-delay) ease;
}

.resource-tab-btn.active,
.line-chart-sub-tab-btn.active {
    color: var(--resource-monitoring-tab-active-font-color);
    background: var(--resource-monitoring-tab-active-bg-color);
    box-shadow: 0 1px 3px var(--resource-monitoring-tab-active-box-shadow-color);
}

.resource-tab-btn:hover:not(.active),
.line-chart-sub-tab-btn:hover:not(.active) {
    background: var(--resource-monitoring-tab-hover-bg-color);
    color: var(--resource-monitoring-tab-hover-font-color);
}

.graph-container {
    position: relative;
    margin: 1rem 0.25rem;
}

.resources-content:not(:has(.resource-tab-container)) .graph-container {
    margin-top: 0.5rem;
}

.resources-content {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.resources-content.collapsed {
    max-height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
}

.resource-item {
    display: flex;
    flex-direction: column;
    row-gap: 0.75rem;
    margin: 1rem 0;
}

.resource-item:first-child {
    margin-top: 0;
}

.resource-item:last-child {
    margin-bottom: 0;
}

.resource-row {
    display: flex;
    align-items: center;
}

.resource-label {
    color: var(--resource-monitoring-label-font-color);
    font-weight: 500;
    font-size: 0.925rem;
    min-width: 140px;
    text-align: left;
}

.resource-bar-wrapper {
    flex: 80%;
    position: relative;
    display: inline-block;
    width: 100%;
    margin-right: 0.75rem;
}

.resource-bar {
    height: 0.875rem;
    background: var(--resource-monitoring-hr-bar-bw-bg-color);
    border-radius: 2px;
    overflow: hidden;
}

.resource-bar-wrapper .tooltip {
    position: absolute;
    left: 50%;
    bottom: 165%;
    z-index: 10;
    padding: 0.375rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--resource-monitoring-tooltip-font-color);
    background-color: var(--resource-monitoring-tooltip-bg-color);
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    transition:
        opacity var(--transition-mode-delay) ease,
        transform var(--transition-mode-delay) ease;
}

.resource-bar-wrapper .tooltip:empty {
    display: none;
}

.resource-bar-wrapper:hover .tooltip,
.resource-bar-wrapper:focus-within .tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.resource-fill {
    height: 100%;
    border-radius: 2px;
    transition: width var(--transition-mode-delay) ease;
}

.resource-fill.initial {
    width: 0%;
}

.cpu-fill {
    background: var(--resource-monitoring-hr-bar-cpu-bg-color);
}
.ram-fill {
    background: var(--resource-monitoring-hr-bar-ram-bg-color);
}
.vram-fill {
    background: var(--resource-monitoring-hr-bar-vram-bg-color);
}

.resource-value {
    flex: 20%;
    min-width: 5.25rem;
    font-size: 0.925rem;
    font-weight: 500;
    text-align: right;
    color: var(--resource-monitoring-value-font-color);
}

.hbar-container,
.hbar-container.active {
    display: block;
}

#cpu-chart,
#ram-and-vram-chart {
    height: 19rem !important;
}

.y-axis-control {
    display: inline-flex;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1rem;
}

.y-axis-title {
    font-size: 0.925rem;
    color: var(--resource-monitoring-label-font-color);
    font-weight: 500;
    margin-right: 0.75rem;
}

.range-value {
    min-width: 3.75rem;
    font-size: 0.925rem;
    color: var(--input-range-picker-value-font-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.resource-configs-body {
    max-height: 70vh;
    overflow-y: auto;
}

.resource-config-settings-section {
    margin-top: 0.75rem;
}

.resource-config-settings-section .section-title {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: left;
    border-bottom: 2px solid var(--resource-monitoring-settings-line-color);
}

.resource-config-settings-section .setting-item-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 0.25rem 0.75rem 0;
    font-weight: normal;
    border-bottom: 1px solid var(--resource-monitoring-settings-line-color);
}

.resource-config-settings-section .setting-item-right {
    width: min(85px, 100%);
    text-align: right;
}

.resource-config-settings-section .setting-item-right .setting-select {
    margin-bottom: 0 !important;
    font-size: 0.925rem;
}

.resource-config-settings-section .setting-item-container:last-child {
    border-bottom: none;
}

.resource-config-settings-section .setting-label {
    font-size: 0.925rem;
    font-weight: normal;
    text-align: left;
}

.resource-config-settings-section .setting-description {
    margin-top: 0.25rem;
    font-size: 0.80rem;
    color: var(--resource-monitoring-settings-desc-font-color);
    line-height: 1.4;
    text-align: left;
}

#resource-config-modal .custom-modal-action-btn-container .btn {
    height: 6vh;
}

#resource-config-modal .custom-modal-header {
    text-align: center;
    border-bottom: 1px solid var(--resource-monitoring-settings-line-color);
    background: var(--custom-modal-header-bg-color);    
}

#resource-config-modal h3 {
    font-size: 1.20rem;
    font-weight: bold;
    color: var(--swal-alert-general-font-color);
}

/***************************************************************************************
 * Feature: Disclosure & XML Input Period Warnings
***************************************************************************************/
.alert-warning.alert-input-disclosure-xml-period .topics-container .topics-layout > .topic-list {
    max-height: 30vh;
}

.alert-warning.alert-input-disclosure-xml-period .alert-footer > div {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.alert-warning.alert-input-disclosure-xml-period .alert-footer > div > div {
    display: grid;
}

.alert-warning.alert-input-disclosure-xml-period .alert-footer > div:has(.is-allowed-disclosure-period) > div,
.alert-warning.alert-input-disclosure-xml-period .alert-footer > div:has(.is-allowed-xml-period) > div {
    grid-template-columns: 2.25rem 14.5rem 1rem auto;
}

.alert-warning.alert-input-disclosure-xml-period .alert-footer > div:has(.is-allowed-disclosure-xml-period) > div {
    grid-template-columns: 2.25rem 18rem 1rem auto;
}

.alert-warning.alert-input-disclosure-xml-period .alert-footer > div > div span:nth-child(4) {
    width: fit-content;
}

@media (max-width: 600px) {
    .alert-warning.alert-input-disclosure-xml-period .alert-footer > div {
        margin-bottom: 1.5rem;
    }

    .alert-warning.alert-input-disclosure-xml-period .alert-footer > div > div {
        grid-template-columns: 2.25rem repeat(3, auto) !important;
        grid-template-areas:
        "icon label" 
        ".    input-value";
    }

    .alert-warning.alert-input-disclosure-xml-period .alert-footer > div > div span:first-child {
        grid-area: icon;
    }

    .alert-warning.alert-input-disclosure-xml-period .alert-footer > div > div span:nth-child(2) {
        grid-area: label;
        margin-bottom: 0.5rem;
    }

    .alert-warning.alert-input-disclosure-xml-period .alert-footer > div > div span:nth-child(3) {
        display: none;
    }

    .alert-warning.alert-input-disclosure-xml-period .alert-footer > div > div span:nth-child(4) {
        grid-area: input-value;
    }
}

/***************************************************************************************
 * Feature: Summary Before successful calculation
***************************************************************************************/
.alert-summary-before-run-cal .custom-accordion-header {
    font-weight: bold;
}

.alert-summary-before-run-cal .custom-accordion-content {
    font-size: 1.05rem;
}

.alert-summary-before-run-cal .custom-accordion-content.open {
    max-height: 8.5rem;
}

#summary-before-run-cal .custom-accordion-content .content-item {
    /* Shared custom css variable */
    --hyphen-spacing: 1.5rem;

    display: grid;
    grid-template-columns: var(--hyphen-spacing) 12rem 1.25rem auto;
    align-items: center;
    margin-bottom: 0.75rem;
}

#summary-before-run-cal .custom-accordion-content .content-item.show-only-label {
    grid-template-columns: var(--hyphen-spacing) auto;
}

#summary-before-run-cal .custom-accordion-content .content-item.depth-1 {
    margin-left: calc(var(--hyphen-spacing) * 1);
}

#summary-before-run-cal .custom-accordion-content .content-item.essential-note {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#summary-before-run-cal .custom-accordion-content .content-item.essential-note > span:first-child {
    font-weight: bold;
    text-decoration: underline;
}

#summary-before-run-cal .custom-accordion-content .content-item.essential-note .note-highlight {
    font-weight: bold;
    color: var(--custom-accordion-header-important-text-color);
}

#summary-before-run-cal
    .custom-accordion-item:nth-child(2)
    .content-item:not(.essential-note) {
    grid-template-columns: 1.5rem 16rem 1.25rem auto;
}

#summary-before-run-cal .custom-accordion-content .content-item:only-child,
#summary-before-run-cal .custom-accordion-content .content-item:last-child {
    margin-bottom: 0;
}

#summary-before-run-cal .custom-accordion-content .content-item .content-display-text.highlight,
#summary-before-run-cal .custom-accordion-content .content-item .content-value.highlight {
    width: fit-content;
}

@media (max-width: 600px) {
    #summary-before-run-cal .custom-accordion-content .content-item {
        grid-template-columns: 1.5rem auto;
        grid-template-areas:
            "dash key"
            ". value";
    }

    #summary-before-run-cal .custom-accordion-content .content-item > span:nth-child(1) {
        grid-area: dash;
    }

    #summary-before-run-cal .custom-accordion-content .content-item > span:nth-child(2):not(.note-content) {
        grid-area: key;
        font-weight: bold;
    }

    #summary-before-run-cal .custom-accordion-content .content-item.show-only-label > span:nth-child(2) {
        font-weight: normal;    
    }

    #summary-before-run-cal .custom-accordion-content .content-item > span:nth-child(3) {
        display: none;
    }

    #summary-before-run-cal .custom-accordion-content .content-item > span:nth-child(4) {
        grid-area: value;
        padding: 1rem 1.5rem 0.5rem 0;
    }
}

/***************************************************************************************
 * Feature: Resource Summary After successful calculation
***************************************************************************************/
.popup-resource-summary {
    width: min(835px, 100%) !important;
}

.popup-resource-summary.double-component {
    width: min(675px, 100%) !important;
}

.popup-resource-summary.single-component {
    width: min(450px, 100%) !important;
}

.summary-wrapper .total-time {
    margin-bottom: 2rem;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-height: 20rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.metric-card {
    position: relative;
    padding: 1.75rem;
    text-align: center;
    transition: all var(--transition-mode-delay) ease;
    border: 1px solid var(--resource-summary-metric-card-border-color);
    border-radius: 1.25rem;
    background: var(--resource-summary-metric-card-bg-color);
    overflow: hidden;
}

.metric-card:nth-child(1) {
    animation-delay: 0.1s;
}
.metric-card:nth-child(2) {
    animation-delay: 0.2s;
}
.metric-card:nth-child(3) {
    animation-delay: 0.3s;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--resource-summary-metric-card-wink-bg-color);
    transition: left calc(var(--transition-mode-delay) + 0.45s) ease;
}

.metric-card:hover::before {
    left: 100%;
}

.metric-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 1px 1px var(--resource-summary-metric-card-box-shadow-hover-color);
}

.metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    margin: 0 auto 1.25rem;
    font-size: 1.75rem;
    font-weight: bold;
    border-radius: 1rem;
    animation: iconFloat 3s ease-in-out infinite;
}

.cpu-icon {
    background: var(--resource-summary-icon-cpu-bg-color);
}

.ram-icon {
    background: var(--resource-summary-icon-ram-bg-color);
}

.vram-icon {
    background: var(--resource-summary-icon-vram-bg-color);
}

.metric-title {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--resource-summary-metric-title-font-color);
}

.metric-values {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--primary-white);
}

.metric-row {
    display: flex;
    justify-content: space-between;
    column-gap: 1rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--resource-summary-metric-row-border-bottom-color);
}

.metric-row:last-child {
    border-bottom: none;
}

.metric-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--resource-summary-metric-label-font-color);
}

.metric-value {
    padding: 0.25rem 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
}

.min-value {
    background: var(--resource-summary-metric-min-value-bg-color);
}

.max-value {
    background: var(--resource-summary-metric-max-value-bg-color);
}

.avg-value {
    background: var(--resource-summary-metric-average-value-bg-color);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

@media (max-width: 800px) {
    .popup-resource-summary .swal2-html-container {
        overflow: visible !important;
    }

    .metrics-grid {
        display: block;
        padding: 2rem;
        overflow: scroll;
    }

    .metrics-grid > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1.5rem;
    }
}

@media (max-width: 550px) {
    .metric-card {
        padding: 1.25rem !important;
    }

    .y-axis-title {
        margin-right: 0rem;
        margin-bottom: 0.5rem;
    }

    #ram-and-vram-line-chart-container .form-range-input,
    .y-axis-control {
        flex-direction: column;
    }
}

@media (max-width: 450px) {
    .metrics-grid {
        padding: 1rem;
    }

    .metric-card {
        padding: 0.875rem !important;
    }

    .resource-config-settings-section .setting-item-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .resource-config-settings-section .setting-item-right {
        align-self: center;
    }
}

@media (max-width: 350px) {
    #ram-and-vram-y-axis-range {
        width: 100%;
    }
}

/***************************************************************************************
 * for security - set header
***************************************************************************************/
.cursor_pointer {
    cursor: pointer !important;
}

.clear_padding_margin_border {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}