@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');

@font-face {
    font-family: "PretendardVariable";
    src: url('../css/open.iconic/font/fonts/PretendardVariable.ttf')
}

/*=============================DEVEXPRESS DEFAULT COLOR CHANGE=================================*/

.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter {
    background-color: var(--rz-grid-apply-filter-button-background-color) !important;
}

.rz-grid-table thead th .rz-column-title {
    justify-content: center !important;
    padding-inline-start: 0 !important;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #2e5283 !important;
}

/*.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #FFF;
    background-color: #1D365B;
    border: 1px solid #F3F3F5 !important;
}*/

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #FFF !important; /* 글자색 흰색 */
    background-color: #0077be !important; /* 배경색 */
    transition: all 0.3s ease !important; /* 부드러운 전환 효과 */
    font-weight: 600 !important; /* 글꼴 두께 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 강조 */
}

    .nav-pills .nav-link.active:hover,
    .nav-pills .show > .nav-link:hover {
        background-color: #2E5283 !important; /* 호버 시 배경색 변경 */
        border-color: #4A90E2 !important; /* 호버 시 테두리 색상 변경 */
        transform: translateY(-2px); /* 살짝 위로 이동 */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 강조 */
    }

.nav-link:hover {
    background-color: #2E5283 !important; /* 호버 시 배경색 변경 */
    border-color: #4A90E2 !important; /* 호버 시 테두리 색상 변경 */
    transform: translateY(-2px); /* 살짝 위로 이동 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 강조 */
}

/*=============================================================================================*/
/*=============================RADZEN DEFAULT COLOR CHANGE=================================*/
:root {
    --rz-input-height: 2rem !important;
    --rz-body-font-size: 0.8rem !important;
    --rz-input-padding-block: 0.3680rem !important;
    --rz-dropdown-item-padding: 7px !important;
    --rz-primary: #2e5283 !important;
    --rz-icon-size: 1.0rem !important;
    --rz-radio-label-margin-inline: 0.3rem !important;
    --rz-secondary-light: #de0024 !important;
    --rz-primary-light: #3c6db5 !important;
    --rz-primary-lighter: lightgray !important;
    --rz-grid-selected-color: black !important;
    --rz-on-primary-lighter: #2e5283 !important;
    --error-hue: 223;
    --error-bg: hsl(var(--error-hue),10%,90%);
    --error-fg: hsl(var(--error-hue),10%,10%);
    --error-primary: hsl(var(--error-hue),90%,45%);
    --error-primary-down: hsl(var(--error-hue),90%,65%);
    --error-trans-dur: 0.3s;
    --rz-fieldset-legend-font-size: 1rem !important;
}

.rz-datatable {
    border: var(--rz-border-width) solid var(--rz-base-400) !important;
}

.sidebar {
    background-color: var(--background-color-main-nav) !important;
}

.sframe-menu-group[open] {
    background-color: var(--background-color-sub-nav);
}

.nav-link {
    color: white !important;
}

.rz-selectable tbody tr.rz-data-row.rz-state-focused > td {
    background-color: transparent !important;
    color: black !important;
}

.rz-selectable tbody tr.rz-data-row.rz-state-focused .rz-cell-data {
    color: black !important;
}

/*.rz-cell-data .rz-chkbox {
    margin-left: 10px !important;
}*/
[class^="rz-cell-toggle-level"] {
    margin-right: 0.7rem;
}

.rz-datatable .rzi-chevron-circle-right:before {
    color: #de0024 !important;
    font-size: 24px !important;
    content: "folder" !important;
}

.rz-datatable .rzi-chevron-circle-down:before {
    color: #de0024 !important;
    font-size: 24px !important;
    content: "folder_open" !important;
}

.rz-grid-table thead th .rz-column-title-content {
    width: 100%;
    text-align: center;
}

#popup-viewer-DropDown {
    width: 600px !important;
}

.popup-button {
    width: 75px !important;
}



/*.rz-state-focused {
    background-color: #2e5283 !important;
    color: white !important;
}

.rz-state-focused .rz-cell-data {
      color: white !important;
}*/
.rz-state-highlight {
    background-color: lightgray !important;
    color: white !important;
}

    .rz-state-highlight.rz-menuitem,
    .rz-state-highlight.rz-autocomplete-list-item,
    .rz-state-highlight.rz-multiselect-item,
    .rz-autocomplete-items li.rz-state-highlight,
    .rz-dropdown-items li.rz-state-highlight,
    .rz-multiselect-items li.rz-state-highlight,
    .rz-dropdown-item.rz-state-highlight {
        background-color: var(--rz-color-highlight) !important;
        color: var(--rz-color-componant) !important;
    }

    .rz-state-highlight .rz-cell-data {
        color: black !important;
    }

.rz-dropdown-chips {
    height: var(--rz-input-height) !important;
}

.rz-card.rz-variant-filled {
    border: var(--rz-boder-variant-filled) !important;
}

.rz-dropdown {
    width: 10.2rem;
}

.rz-radio-button-list-horizontal {
    height: var(--rz-input-height);
    align-items: center;
    align-content: center;
}

/*.rz-datepicker {
    width: 10.8rem;
}*/

.viewer-contents {
    transition: height 240ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: height;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .viewer-contents {
        transition: none;
    }
}

.viewer-top {
    padding: 0.35rem !important;
    background-color: #F3F3F5 !important;
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
    transition: grid-template-rows 420ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

    .viewer-top > .condition-main-stack-theme {
        min-height: 0;
        overflow: hidden;
    }

    .viewer-top.hide {
        grid-template-rows: 0fr;
        opacity: 0;
        transform: translateY(-2px);
        pointer-events: none;
        visibility: hidden;
    }

    .viewer-top.expanded {
        grid-template-rows: 1fr;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
    }

.viewer-label {
    font-weight: 500 !important;
    color: #3E3E3E !important
}

.rz-primary {
    background-color: #2e5283 !important;
}

.rz-data-grid.rz-density-compact {
    --rz-grid-cell-line-height: 1.3rem !important;
}

.rz-grid-table thead th .rz-column-title {
    /*color: #556477 !important;*/
    color: #556477 !important;
    font-weight: 600 !important;
}




/*=============================================================================================*/
html, body {
    font-family: 'PretendardVariable', Helvetica, Arial, sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
}

.page {
    height: 100vh !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.cursor-pointer {
    cursor: pointer;
}

@media (min-width: 769px) {
    .rz-footer.fixed {
        position: fixed !important;
    }
}

@media (max-width: 768px) {
    .rz-footer.fixed {
        position: sticky !important;
    }
}


@media (max-width: 1200px) {
    .sframe-grid:not(.page-layout) {
        display: block !important;
    }
}

@media (min-width: 1201px) {
    .sframe-grid:not(.page-layout) {
        display: grid !important;
    }
}

/*.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    transition: all 0.3s ease-in-out;
    overflow: auto;
    max-height: 100vh;
}

.popup-overlay.hidden {
    display: none;
}

.popup-container {
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 768.5px) {
    .popup-container {
        background: white;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        position: absolute;
        height: auto !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 768px) {
    .popup-container {
        width: 85vw !important;
        min-width: unset !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default;
    font-size: 14px;
    font-weight: 550;
    padding: 5px 5px 3px 10px;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.popup-header-light {
    background-color: #d3d3d3;
    color: black;
}

.popup-header-dark {
    background-color: #38474e;
    color: white;
}

.popup-body {
    padding: 10px 5px;
}

.popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 5px;
    border-top: 1px solid #ddd;
}*/

.close-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.btn-save {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-close {
    background-color: #ccc;
    color: black;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

.rz-chkbox-label {
    margin-inline: 5px 10px !important;
}


/* ====================================
               static Page
   ==================================== */

.btn-list {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 5px; /* 버튼 간의 간격 조정 */
}

    .btn-list .button {
        background-color: var(--background-color-main-button) !important;
        border: var(--border-color-main-button) !important;
        outline: var(--outline-main-button) !important;
        /*
        background-color: #2e5283;
        border: none;
        outline: 3px #2e5283 solid;
        */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 17px 15px;
        height: 1px;
        gap: 15px;
        width: 7rem;
        outline-offset: -3px;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 0.1rem;
        transition: 400ms;
    }

        .btn-list .button:hover {
            background-color: var(--background-color-main-button-hover) !important;
            outline: var(--outline-main-button-hover) !important;
        }

    .btn-list p {
        margin-top: 0;
        margin-bottom: 0;
    }

    .btn-list .button .text {
        color: var(--common-color-white-dark) !important;
        font-weight: 700;
        font-size: 0.95em;
        transition: 400ms;
    }
    /*
        .btn-list .button .text:hover {
            color: var(--common-color-dark-white) !important;
        }
        */
    .btn-list .button svg path {
        transition: 400ms;
    }

/*
    .btn-list .button:hover {
        background-color: transparent;
    }

        .btn-list .button:hover .text {
            color: #2e5283;
        }

        .btn-list .button:hover svg path {
            fill: #2e5283;
        }
    */
#viewer-main {
}

.viewer-heading {
    display: flow-root;
    padding: 0px;
    color: #3E3E3E !important;
    border-bottom: 2px solid #2e5283;
}

    .viewer-heading > span > form > button.item-btn,
    .viewer-heading > span > button.item-btn {
        vertical-align: middle;
        width: 70px;
    }

    .viewer-heading .breadcrumb > li + li:before {
        padding: 0px 0px 0px 1px;
        margin-right: 10px;
    }

.pull-right {
    float: right !important;
}

.pull-left {
    float: left;
    /* padding: 0.6rem;*/
    font-size: 14px;
}

.breadcrumb-wrapper {
    align-self: flex-end;
    padding: 0.6rem;
    display: inline-block;
}

.breadcrumb {
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    margin-bottom: 0;
    background-color: var(--background-color-title) !important;
    color: var(--common-color-dark-white) !important;
}

.item-btn {
    background-color: #2e5283;
    vertical-align: middle;
    border: none;
    width: 80px;
    padding: 5px 11px 5px 11px;
    margin: 5px 0px 0px 0px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 5px 5px 5px 5px;
    font-size: 13px;
}

    .item-btn:hover {
        background-color: #101d30;
    }

.gridlayout-item {
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column; /* 수직 방향으로 배치 */
    align-items: stretch; /* 자식 요소들이 넓이를 맞추도록 */
}

    .gridlayout-item:before {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

.pull-right {
    float: right !important;
}


.viewer-grid-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* RadzenDataGrid와의 간격 조정 */
}

.viewer-grid-title {
    padding-left: 0.3rem;
    font-weight: 550;
    color: #3E3E3E;
}

.btn-list-content {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 10px; /* 버튼 간의 간격 조정 */
}

    .btn-list-content .button-content {
        background-color: var(--background-color-sub-button) !important;
        border: var(--border-color-sub-button) !important;
        outline: var(--outline-sub-button) !important;
        /*
        background-color: #16A085;
        border: none;
        outline: 3px #16A085 solid;
        */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 13.8px 15px;
        height: 1px;
        gap: 15px;
        /*width: 7rem;*/ /*JKLEE 주석*/
        outline-offset: -3px;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 0.2rem;
        transition: 400ms;
    }

        .btn-list-content .button-content:hover {
            background-color: var(--background-color-sub-button-hover) !important;
            outline: var(--outline-sub-button-hover) !important;
        }

    .btn-list-content p {
        margin-top: 0;
        margin-bottom: 0;
    }

    .btn-list-content .button-content .text {
        color: white;
        font-weight: 500;
        font-size: 0.8em;
        transition: 400ms;
    }

    .btn-list-content .button-content svg path {
        transition: 400ms;
    }

/*
    .btn-list-content .button-content:hover {
        background-color: transparent;
    }

        .btn-list-content .button-content:hover .text {
            color: #16A085;
        }

        .btn-list-content .button-content:hover svg path {
            fill: #16A085;
        }
        */
.viewer-grid-title {
    padding-left: 0.3rem;
    font-weight: 550;
    background-color: var(--background-color-title) !important;
    color: var(--common-color-dark-white) !important;
}

/* ====================================
              Theme Color
   ==================================== */
:root {
    /* Common Color */
    --common-color-white-dark: #FFF;
    --common-color-dark-white: #333333;
    /* nav-main */
    --background-color-main-nav: #2e5283;
    /* nav-sub */
    --background-color-sub-nav: #26446F;
    /* line */
    --background-border-bottom: 2px solid #2e5283;
    /* main background */
    --background-color-main: #F8F8FA;
    /* main title */
    --background-color-title: #F8F8FA;
    /* main header */
    --background-color-header-button: #FFF;
    --text-color-header-button: black;
    --text-color-header: none;
    --box-shadow-header-line: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
    --rz-menu-item-hover-background-color: #f0f0f0;
    /* main common button */
    --background-color-main-button: #2e5283;
    --border-color-main-button: none;
    --outline-main-button: 3px #2e5283 solid;
    --background-color-main-button-hover: #091A2C;
    --outline-main-button-hover: 2px #091A2C solid;
    /* setting button */
    --background-color-set-button: #6C757D;
    --border-color-set-button: none;
    --outline-set-button: 3px #6C757D solid;
    --background-color-set-button-hover: #242729;
    --outline-set-button-hover: 2px #242729 solid;
    /* favorite button */
    --background-color-favorite-x-button: #6C757D;
    --border-color-favorite-x-button: none;
    --outline-favorite-x-button: 3px #6C757D solid;
    --background-color-favorite-x-button-hover: #242729;
    --outline-favorite-x-button-hover: 2px #242729 solid;
    --background-color-favorite-o-button: #FFC107;
    --border-color-favorite-o-button: none;
    --outline-favorite-o-button: 3px #FFC107 solid;
    --background-color-favorite-o-button-hover: #D9A407;
    --outline-favorite-o-button-hover: 2px #D9A407 solid;
    --fill-favorite-o-svg: white;
    --fill-favorite-x-svg: #333333;
    /* sub common button */
    --background-color-sub-button: #16A085;
    --border-color-sub-button: none;
    --outline-sub-button: 3px #16A085 solid;
    --background-color-sub-button-hover: #07352C;
    --outline-sub-button-hover: 2px #07352C solid;
    /* common main stack */
    --background-color-main-stack: none;
    --margin-main-stack: none;
    --padding-main-stack: none;
    /* PassChange */
    --color-validation-message: red;
    --background-color-password-change-button: #2e5283;
    /* Radzen Component */
    --rz-color-componant: none;
    --rz-color-tabview-selected: none;
    --rz-color-textarea: darkgreen;
    --sf-color-textarea: darkgreen;
    --rz-color-fieldset-border: 1px solid #D2D2D2;
    --rz-color-tabview-panels: #D2D2D2;
    --rz-boder-variant-filled: 1px solid #dfdada;
    --rz-color-highlight: lightgray;
    /* Dx Component */
    --dx-background-color-modal-header: none;
    /* Common Setting 화면 Content Info Layout Design*/
    --background-color-gridlayout: #DC3545;
    --opacity-gridlayout: 0.4;
    /* ViewSettingRolePage */
    --background-color-grid-td-y: #9CDBC0;
    --background-color-grid-td-n: #FB9C9C;
    /* Scheduler color*/
    --scheduler-highlight-background-color: #085783;
    --scheduler-highlight-color: #FFF;
    --scheduler-today: #ffffd9;
    --scheduler-weekend: red;
    --scheduler-before-month: #e7e7e7;
    --scheduler-current-month: black;
    --scheduler-status-plan: #085786;
    --scheduler-status-wait: #e0a800;
    --scheduler-status-confirm: #218838;
    --scheduler-status-return: #c82333;
    /* Tab color*/
    --tab-no-focus-color: #B5B5B5;
    --tab-no-focus-hover-color: #436490;
    --tab-no-focus-border-bottom-color: #26446F;
    --tab-on-focus-color: #0077BE;
    --tab-on-focus-border-bottom-color: #26446F;
}

    :root[data-theme="material"] {
        /* Common Color */
        --common-color-white-dark: #FFF;
        --common-color-dark-white: #333333;
        /* nav-main */
        --background-color-main-nav: #2e5283;
        /* nav-sub */
        --background-color-sub-nav: #26446F;
        /* line */
        --background-border-bottom: 2px solid #2e5283;
        /* main background */
        --background-color-main: #F8F8FA;
        /* main title */
        --background-color-title: #F8F8FA;
        /* main header */
        --background-color-header-button: #FFF;
        --text-color-header-button: black;
        --text-color-header: none;
        --box-shadow-header-line: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
        --rz-menu-item-hover-background-color: #f0f0f0;
        /* main common button */
        --background-color-main-button: #2e5283;
        --border-color-main-button: none;
        --outline-main-button: 3px #2e5283 solid;
        --background-color-main-button-hover: #091A2C;
        --outline-main-button-hover: 2px #091A2C solid;
        /* setting button */
        --background-color-set-button: #6C757D;
        --border-color-set-button: none;
        --outline-set-button: 3px #6C757D solid;
        --background-color-set-button-hover: #242729;
        --outline-set-button-hover: 2px #242729 solid;
        /* favorite button */
        --background-color-favorite-x-button: #6C757D;
        --border-color-favorite-x-button: none;
        --outline-favorite-x-button: 3px #6C757D solid;
        --background-color-favorite-x-button-hover: #242729;
        --outline-favorite-x-button-hover: 2px #242729 solid;
        --background-color-favorite-o-button: #FFC107;
        --border-color-favorite-o-button: none;
        --outline-favorite-o-button: 3px #FFC107 solid;
        --background-color-favorite-o-button-hover: #D9A407;
        --outline-favorite-o-button-hover: 2px #D9A407 solid;
        --fill-favorite-o-svg: white;
        --fill-favorite-x-svg: white;
        /* sub common button */
        --background-color-sub-button: #16A085;
        --border-color-sub-button: none;
        --outline-sub-button: 3px #16A085 solid;
        --background-color-sub-button-hover: #07352C;
        --outline-sub-button-hover: 2px #07352C solid;
        /* common main stack */
        --background-color-main-stack: none;
        --margin-main-stack: none;
        --padding-main-stack: none;
        /* PassChange */
        --color-validation-message: red;
        --background-color-password-change-button: #2e5283;
        /* Radzen Component */
        --rz-color-componant: none;
        --rz-color-tabview-selected: none;
        --rz-color-textarea: darkgreen;
        --sf-color-textarea: darkgreen;
        --rz-color-fieldset-border: 1px solid #D2D2D2;
        --rz-color-tabview-panels: #D2D2D2;
        --rz-boder-variant-filled: 1px solid #dfdada;
        --rz-color-highlight: lightgray;
        /* Dx Component */
        --dx-background-color-modal-header: none;
        /* Common Setting 화면 Content Info Layout Design*/
        --background-color-gridlayout: #DC3545;
        --opacity-gridlayout: 0.4;
        /* ViewSettingRolePage */
        --background-color-grid-td-y: #E8F9EE;
        --background-color-grid-td-n: #FB9C9C;
        /* Scheduler color*/
        --scheduler-highlight-background-color: #085783;
        --scheduler-highlight-color: #FFF;
        --scheduler-today: #ffffd9;
        --scheduler-weekend: red;
        --scheduler-before-month: #e7e7e7;
        --scheduler-current-month: black;
        --scheduler-status-plan: #085786;
        --scheduler-status-wait: #e0a800;
        --scheduler-status-confirm: #218838;
        --scheduler-status-return: #c82333;
    }

    :root[data-theme="dark"] {
        /* Common Color */
        --common-color-white-dark: #333333;
        --common-color-dark-white: #FFF;
        /* nav-main */
        --background-color-main-nav: #121212;
        /* nav-sub */
        --background-color-sub-nav: #1E1E1E;
        /* line */
        --background-border-bottom: 2px solid #D3D3D3;
        /* main background */
        --background-color-main: #333333;
        /* main title */
        --background-color-title: #333333;
        /* main header */
        --background-color-header-button: #1E1E1E;
        --text-color-header: #FFF;
        --text-color-header-button: #FFF;
        --outline-header-button: 2px #FFC107 solid;
        --box-shadow-header-line: 0px 2px 6px 0px rgba(255, 255, 255, 0.12);
        --rz-menu-item-hover-background-color: #383838;
        /* main common button */
        --background-color-main-button: #FFC107;
        --border-color-main-button: #666666;
        --outline-main-button: 2px #FFC107 solid;
        --background-color-main-button-hover: #FFF8E1;
        --outline-main-button-hover: 2px #FFF8E1 solid;
        /* setting button */
        --background-color-set-button: #DC3545;
        --border-color-set-button: #666666;
        --outline-set-button: 3px #DC3545 solid;
        --background-color-set-button-hover: #E77883;
        --outline-set-button-hover: 2px #E77883 solid;
        /* favorite button */
        --background-color-favorite-x-button: #6C757D;
        --border-color-favorite-x-button: none;
        --outline-favorite-x-button: 3px #6C757D solid;
        --background-color-favorite-x-button-hover: #9C9FA1;
        --outline-favorite-x-button-hover: 2px #9C9FA1 solid;
        --background-color-favorite-o-button: #DC3545;
        --border-color-favorite-o-button: none;
        --outline-favorite-o-button: 3px #DC3545 solid;
        --background-color-favorite-o-button-hover: #E77883;
        --outline-favorite-o-button-hover: 2px #E77883 solid;
        --fill-favorite-o-svg: white;
        --fill-favorite-x-svg: white;
        /* sub common button */
        --background-color-sub-button: #006400;
        --border-color-sub-button: #666666;
        --outline-sub-button: 2px #006400 solid;
        --background-color-sub-button-hover: #559755;
        --outline-sub-button-hover: 2px #559755 solid;
        /* common main stack */
        --background-color-main-stack: #1E1E1E;
        --margin-main-stack: -7px;
        --padding-main-stack: 7px;
        /* PassChange */
        --color-validation-message: #FFF;
        --background-color-password-change-button: #FFC107;
        /* Radzen Component */
        --rz-color-componant: #FFF;
        --rz-color-tabview-selected: #FFC107;
        --rz-color-textarea: #FFF;
        --sf-color-textarea: forestgreen;
        --rz-color-fieldset-border: 1px solid #999999;
        --rz-color-tabview-panels: #999999;
        --rz-boder-variant-filled: 1px solid #666666;
        --rz-color-highlight: #0077BE;
        /* Dx Component */
        --dx-background-color-modal-header: red;
        /* Common Setting 화면 */
        --background-color-gridlayout: #0077BE;
        --opacity-gridlayout: 1;
        /* ViewSettingRolePage */
        --background-color-grid-td-y: #2E5283;
        --background-color-grid-td-n: indianred;
        /* Scheduler color*/
        --scheduler-highlight-background-color: #0077BE;
        --scheduler-highlight-color: #FFF;
        --scheduler-today: slateblue;
        --scheduler-weekend: #DC3545;
        --scheduler-before-month: #6C6C6C;
        --scheduler-current-month: #E0E0E0;
        --scheduler-status-plan: #2196f3;
        --scheduler-status-wait: #ffc107;
        --scheduler-status-confirm: #2E6F40;
        --scheduler-status-return: #DC3545;
    }

/* Header */
.header-theme {
    background-color: var(--background-color-header-button) !important;
    box-shadow: var(--box-shadow-header-line) !important;
}

.header-button-theme {
    background-color: var(--background-color-header-button) !important;
    color: var(--text-color-header-button) !important;
}

#proFavorite > li.rz-navigation-item > div.rz-navigation-item-wrapper > div.rz-navigation-item-link {
    background-color: var(--background-color-header-button) !important;
    color: var(--text-color-header-button) !important;
}

#proFavorite .icon-favorite {
    fill: var(--text-color-header-button);
}

.header-text-theme {
    color: var(--text-color-header) !important;
}

/* MainLayOut */
.main-theme {
    background-color: var(--background-color-main) !important;
}
/*
    ViewerContentsPage
    ViewerPage
*/
.title-theme {
    background-color: var(--background-color-title) !important;
    color: var(--common-color-dark-white) !important;
}

/*
    ViewerPage
    static Page
*/
.main-button-theme {
    background-color: var(--background-color-main-button) !important;
    border: var(--border-color-main-button) !important;
    outline: var(--outline-main-button) !important;
}


.setting-button-theme {
    background-color: var(--background-color-set-button) !important;
    border: var(--border-color-set-button) !important;
    outline: var(--outline-set-button) !important;
}

.setting:hover {
    background-color: var(--background-color-set-button-hover) !important;
    outline: var(--outline-set-button-hover) !important;
}


.sub-button-theme {
    background-color: var(--background-color-sub-button) !important;
    border: var(--border-color-sub-button) !important;
    outline: var(--outline-sub-button) !important;
}

.favorite-o {
    background-color: var(--background-color-favorite-o-button) !important;
    outline: var(--outline-favorite-o-button) !important;
}

    .favorite-o:hover {
        background-color: var(--background-color-favorite-o-button-hover) !important;
        outline: var(--outline-favorite-o-button-hover) !important;
    }

    .favorite-o > svg {
        fill: var(--fill-favorite-o-svg);
    }

.favorite-x {
    background-color: var(--background-color-favorite-x-button) !important;
    outline: var(--outline-favorite-x-button) !important;
}

    .favorite-x > svg {
        fill: var(--fill-favorite-x-svg);
    }

    .favorite-x:hover {
        background-color: var(--background-color-favorite-x-button-hover) !important;
        outline: var(--outline-favorite-x-button-hover) !important;
    }


/*
    ViewerContentsPage
    ViewerPage
    static Page
*/
.button-text-theme {
    color: var(--common-color-white-dark) !important
}
/*
    ViewerPage
*/
.button-image-theme {
    fill: var(--common-color-white-dark) !important
}

/* ViewerConditionsPage */
.condition-main-stack-theme {
    background-color: var(--background-color-main-stack) !important;
    margin: var(--margin-main-stack) !important;
    padding: var(--padding-main-stack) !important;
}

/* RenderPopup */
.popup-body-theme, .popup-footer-theme {
    background-color: var(--common-color-white-dark) !important;
}

/* ViewerSiteMap */
.wrapper-content, .menu-group, .menu-item-content {
    background-color: var(--common-color-white-dark) !important;
}

.sitemap-header-icon, .sitemap-header-text, .menu-icon, .root-menu-label {
    color: var(--common-color-dark-white) !important;
}


/* RenderChangePasswordComponent */
.password-change-container-theme {
    background-color: var(--common-color-white-dark) !important;
}

.password-change-title-theme, .password-change-field-theme {
    color: var(--common-color-dark-white) !important;
}

.validation-message-theme {
    color: var(--color-validation-message) !important;
}

.password-change-button-theme {
    background-color: var(--background-color-password-change-button) !important;
    color: var(--common-color-white-dark) !important;
}


/* Radzen Component */
.rz-label, .rz-radiobutton-label, .rz-dropdown-item, .rz-column-title-content, .rz-display-flex, .rz-multiselect-item, .rz-multiselect-filter-container, .rz-link-text, .rz-html-editor-dialog-item {
    color: var(--rz-color-componant) !important;
}

.rz-radiobutton-box {
    background-color: var(--rz-color-componant) !important;
    /* border-color: var(--rz-color-componant) !important; */
}

.rz-variant-outlined {
    background-color: var(--common-color-white-dark) !important;
}

.rz-fieldset {
    border: var(--rz-color-fieldset-border) !important;
}

.rz-tabview-selected {
    color: var(--rz-color-tabview-selected) !important;
    border-bottom-color: var(--rz-color-tabview-selected) !important;
}

.rz-tabview-panels {
    border-block-start-color: var(--rz-color-tabview-panels) !important;
}

.rz-textarea {
    color: var(--rz-color-textarea) !important;
}

.sf-textarea-precedure {
    color: var(--sf-color-textarea) !important;
}
/* DX Component */
.dxbl-modal-content {
    background-color: var(--common-color-white-dark) !important;
}

.dxbl-modal-header {
    background-color: var(--dx-background-color-modal-header) !important;
    color: var(--common-color-dark-white) !important;
}

/* Alarm */
/* 확인창(SweetAlert2)은 항상 맨 위. 기본 z-index 1060 이라 입력 항목 설정 패널(1500)과 그 덮개(1499) 아래로 깔려
   "저장하시겠습니까?" 의 OK·Cancel 을 누를 수 없었다. 갤러리 확대창·로딩 표시·재연결 안내(9999~10000)보다는 아래. (2026.09.22) */
.swal2-container {
    z-index: 1600 !important;
}

.swal2-popup {
    background-color: var(--common-color-white-dark) !important;
}

.swal2-title, .swal2-html-container {
    color: var(--common-color-dark-white) !important;
}

/* Error Page */
.error-title, .error-message {
    color: var(--common-color-dark-white) !important;
}

.gridlayout-select:before {
    background-color: var(--background-color-gridlayout) !important;
    opacity: var(--opacity-gridlayout) !important;
}

/* ViewSettingRolePage */
.grid-td-y {
    background-color: var(--background-color-grid-td-y) !important;
}

.grid-td-n {
    background-color: var(--background-color-grid-td-n) !important;
}


.badge-today {
    background-color: var(--scheduler-today);
}

.badge-weekend > .rz-slot-title {
    color: var(--scheduler-weekend) !important;
}

.badge-before-month > .rz-slot-title {
    color: var(--scheduler-before-month) !important;
}

.badge-current-month > .rz-slot-title {
    color: var(--scheduler-current-month) !important;
}

.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active,
.rz-button .rz-button-md .rz-variant-filled .rz-primary .rz-shade-default .rz-state-active {
    /*background-color: var(--background-color-main-button) !important;
    border: var(--border-color-main-button) !important;
    color: var(--common-color-white-dark) !important;
    outline: var(--outline-main-button) !important;*/
    /*border: var(--border-color-main-button) !important;*/
    background-color: var(--background-color-main-button) !important;
    color: var(--common-color-white-dark) !important;
}

.rz-scheduler-grid-highlight {
    background-color: var(--scheduler-highlight-background-color) !important;
}

    .rz-scheduler-grid-highlight > span.rz-cell-data {
        color: var(--scheduler-highlight-color) !important;
    }

.popup-overlay.fade-in {
    opacity: 1;
    pointer-events: auto;
    animation: fadeIn 0.2s forwards;
    visibility: visible !important;
}

.popup-overlay.fade-out {
    visibility: hidden !important;
    opacity: 0;
    pointer-events: none;
    animation: fadeOut 0.2s forwards;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        display: none;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fs-7 {
    font-size: 0.875rem !important;
}

/* Free native CSS grid and accessible navigation. */
.sframe-menu-group { padding: .35rem .75rem; }
.sframe-menu-group summary { cursor:pointer; padding:.5rem 0; }
.sframe-menu-group .sframe-menu-group { margin-left:.75rem; }
.app-sidebar { color:#fff; }
.app-sidebar .nav-link { color:inherit; border-radius:4px; display:block; padding:.65rem .75rem; }
.app-sidebar .nav-link.active { background:var(--rz-primary-lighter,#e1e7ff); color:var(--rz-primary,#334fbc) !important; }
.app-sidebar summary .nav-link { display:inline; padding:0; }
.sframe-grid { min-width:0; min-height:0; }
.sframe-tree-grid { min-width:100%; border-collapse:collapse; table-layout:fixed; }
.sframe-tree-grid th, .sframe-tree-grid td { padding:6px 8px; overflow-wrap:anywhere; border-bottom:1px solid var(--rz-base-300,#ddd); }
.sframe-tree-grid th { position:relative; }
.sframe-tree-grid th > button:first-child { background:none; color:inherit; border:0; font-weight:600; }
.sframe-column-resize { position:absolute; top:0; right:0; height:100%; width:8px; cursor:col-resize; border:0; background:transparent; padding:0; touch-action:none; }
.sframe-tree-toggle { display:inline-block; width:20px; flex:none; padding:0; margin-right:4px; background:none; border:0; color:inherit; }
.sframe-tree-highlight { background:#fde9d9; outline:2px solid #c33; }

.sframe-tree-key { position:relative; }
.sframe-tree-label { display:flex; align-items:center; min-height:24px; }
.sframe-tree-line { position:absolute; top:0; bottom:0; width:20px; pointer-events:none; }
.sframe-tree-line:not(.sframe-tree-gap)::before { content:""; position:absolute; left:9px; top:0; bottom:0; border-left:1px solid #969da5; }
.sframe-tree-last::before { bottom:50% !important; }
.sframe-tree-branch::after, .sframe-tree-last::after { content:""; position:absolute; left:9px; right:0; top:50%; border-top:1px solid #969da5; }