@import './dv-constants.scss';

$mainColor: $mainColor1;
$mainBackgroundColor: $mainBackgroundColor1;
$inputPlaceholderColor: $inputPlaceholderColor1;
$subColor: $subColor1;
$sub2Color: $sub2Color1;
$selectedRowColor: $selectedRowColor1;
$lightColor: $lightColor1;
$light2Color: $light2Color1;
$titleColor: $titleColor1;
$tableDataColor: $subColor1;
$wholeBackgroundColor: $wholeBackgroundColor1;
$fontHighlightColor: $fontHighlightColor1;
$tableSecondaryColor: $secondary;

@for $i from 1 through 7 {
    @if ($i == 2) {
        $mainColor: $mainColor2;
        $mainBackgroundColor: $mainBackgroundColor2;
        $inputPlaceholderColor: $inputPlaceholderColor2;
        $subColor: $subColor2;
        $sub2Color: $sub2Color2;
        $selectedRowColor: $selectedRowColor2;
        $lightColor: $lightColor2;
        $light2Color: $light2Color2;
        $titleColor: $titleColor2;
        $tableDataColor: $subColor2;
        $wholeBackgroundColor: $wholeBackgroundColor2;
        $fontHighlightColor: $fontHighlightColor2;
    } @else if ($i == 3) {
        $mainColor: $mainColor3;
        $mainBackgroundColor: $mainBackgroundColor3;
        $inputPlaceholderColor: $inputPlaceholderColor3;
        $subColor: $subColor3;
        $sub2Color: $sub2Color3;
        $selectedRowColor: $selectedRowColor3;
        $lightColor: $lightColor3;
        $light2Color: $light2Color3;
        $titleColor: $titleColor3;
        $tableDataColor: $subColor3;
        $wholeBackgroundColor: $wholeBackgroundColor3;
        $fontHighlightColor: $fontHighlightColor3;
    } @else if ($i == 4) {
        $mainColor: $mainColor4;
        $mainBackgroundColor: $mainBackgroundColor4;
        $inputPlaceholderColor: $inputPlaceholderColor4;
        $subColor: $subColor4;
        $sub2Color: $sub2Color4;
        $selectedRowColor: $selectedRowColor4;
        $lightColor: $lightColor4;
        $light2Color: $light2Color4;
        $titleColor: $titleColor4;
        $tableDataColor: $subColor4;
        $wholeBackgroundColor: $wholeBackgroundColor4;
        $fontHighlightColor: $fontHighlightColor4;
    } @else if ($i == 5) {
        $mainColor: $mainColor5;
        $mainBackgroundColor: $mainBackgroundColor5;
        $inputPlaceholderColor: $inputPlaceholderColor5;
        $subColor: $subColor5;
        $sub2Color: $sub2Color5;
        $selectedRowColor: $selectedRowColor5;
        $lightColor: $lightColor5;
        $light2Color: $light2Color5;
        $titleColor: $titleColor5;
        $tableDataColor: $subColor5;
        $wholeBackgroundColor: $wholeBackgroundColor5;
        $fontHighlightColor: $fontHighlightColor5;
    } @else if ($i == 6) {
        $mainColor: $mainColor6;
        $mainBackgroundColor: $mainBackgroundColor6;
        $inputPlaceholderColor: $inputPlaceholderColor6;
        $subColor: $subColor6;
        $sub2Color: $sub2Color6;
        $selectedRowColor: $selectedRowColor6;
        $lightColor: $lightColor6;
        $light2Color: $light2Color6;
        $titleColor: $titleColor6;
        $tableDataColor: $subColor6;
        $wholeBackgroundColor: $wholeBackgroundColor6;
        $fontHighlightColor: $fontHighlightColor6;
    } @else if ($i == 7) {
        $mainColor: $mainColor7;
        $mainBackgroundColor: $mainBackgroundColor7;
        $inputPlaceholderColor: $inputPlaceholderColor7;
        $subColor: $subColor7;
        $sub2Color: $sub2Color7;
        $selectedRowColor: $selectedRowColor7;
        $lightColor: $lightColor7;
        $light2Color: $light2Color7;
        $titleColor: $titleColor7;
        $tableDataColor: $subColor7;
        $wholeBackgroundColor: $wholeBackgroundColor7;
        $fontHighlightColor: $fontHighlightColor7;
        $tableSecondaryColor: $mainBackgroundColor7;
        $borderColor: $borderColor7;
    }

    .dv-theme-#{$i} {
        background-color: $wholeBackgroundColor;
        color: $fontHighlightColor;
        #mainTitle {
            a span strong,
            .dv-title-logout
            .dv-title-logout span,
            .dv-title-logout a,
            .btn-setting {
                color: $titleColor;
            }
        }
        .axis {
            path,
            line {
                stroke: $subColor;
            }
            text {
                fill: $subColor;
            }
        }
        .table {
            tr {
                th,
                td {
                    border-color: $borderColor;
                }

                td {
                    background-color: $wholeBackgroundColor;
                    color: $tableDataColor;

                    &.td-red,
                    &.td-red .bg-input-row {
                        background-color: var(--red-300) !important;
                        color: $white !important;
                    }
                
                    &.td-gray,
                    &.td-gray .bg-input-row {
                        background-color: var(--gray-300) !important;
                        color: $mainColor !important;
                    }
                
                    &.td-yellow,
                    &.td-yellow .bg-input-row {
                        background-color: var(--yellow-200) !important;
                        color: $mainColor !important;
                    }
                
                    &.td-green,
                    &.td-green .bg-input-row {
                        background-color: var(--green-200) !important;
                        color: $mainColor !important;
                    }

                    &.td-disabled {
                        background-color: $disabledBackground;
                    }
                    &.dv-bom-root-row {
                        background-color: $lightColor;
                        font-weight: bold;
                    }
                    a {
                        color: $tableDataColor;
                    }
                }
                &.bg-select-row {
                    td {
                        background-color:$selectedRowColor!important;
                        color: $wholeBackgroundColor !important;
                        font-weight: bold;
                    }
                }
                &:hover {
                    td {
                        background-color: $light2Color;
                    }
                }
            }

            .custom-sm-tr.table-secondary td {
                background-color: $tableSecondaryColor;
            }
        }
        .clockSvg {
            stroke: $subColor;
        }
        #loginBox {
            border-color: $subColor !important;
            background-color: $light2Color;
            .foreground-theme {
                background-color: $light2Color;
                color: $subColor;
            }
            .p-divider-solid.p-divider-horizontal:before {
                border-color: $subColor;
            }
        }
        .p-autocomplete-panel {
            background-color: $wholeBackgroundColor;
            border: 1px solid $subColor;
            &.menu-search-panel .p-autocomplete-items .p-autocomplete-item {
                &:hover {
                    background-color: $subColor;
                }
                &.p-highlight {
                    background-color: $subColor;
                
                    a span {
                        color: $wholeBackgroundColor;
                    }
                }
            }
            .p-autocomplete-item {
                .nav-link {
                    span {
                        color: $fontHighlightColor;
                    }
                    &:hover {
                        background-color: $subColor;
                        span {
                            color: $wholeBackgroundColor;
                        }
                    }
                }
            }
            .p-autocomplete-items .p-autocomplete-item {
                color: $fontHighlightColor;
                &:hover {
                    color: $wholeBackgroundColor;
                    background-color: $subColor;
                    .nav-link {
                        background-color: $subColor;
                        span {
                            color: $wholeBackgroundColor;
                        }
                    }
                }
                &.p-highlight {
                    color: $wholeBackgroundColor;
                    background-color: $subColor;
                }
            }
        }
        .setting-panel.p-panel .p-panel-header {
            background-color: $sub2Color;
        }
        .dv-menubar {
            background-color: $wholeBackgroundColor;
            &.p-menubar {
                .p-menubar-root-list > .p-menuitem {
                    .p-menuitem-text {
                        color: $subColor;
                    }
                    &.selected {
                        &> .p-menuitem-link {
                            background-color: $sub2Color;
                            border: 2px solid;
                            border-bottom: 0;
                            border-color: $subColor;
                            .p-menuitem-text {
                                color: $titleColor;
                            }
                            &:hover {
                                span {
                                    color: $titleColor;
                                }
                            }
                        }
                    }
                    &.p-menuitem-active {
                        &> .p-menuitem-link {
                            background-color: $subColor;
                            .p-menuitem-text {
                                color: $wholeBackgroundColor;
                            }
                            &:hover {
                                span {
                                    color: $wholeBackgroundColor;
                                }
                            }
                        }
                        .p-menuitem-text {
                            color: $wholeBackgroundColor;
                        }
                        .p-submenu-list {
                            background-color: $wholeBackgroundColor;
                            border: 1px solid $subColor;
                            .p-menuitem {
                                a {
                                    .p-menuitem-icon,
                                    .p-menuitem-text {
                                        color: $subColor;
                                    }
                                }
                                &.p-menuitem-active {
                                    &> .p-menuitem-link {
                                        background-color: $subColor;
                                        .p-menuitem-icon,
                                        .p-menuitem-text {
                                            color: $wholeBackgroundColor;
                                        }
                                    }
                                    .p-menuitem-icon,
                                    .p-menuitem-text {
                                        color: $sub2Color;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        #mesMenu {
            .navbar {
                .nav-item {
                    &.active {
                        background-color: $sub2Color;
                    }
                }
            }
        }
        .dv-text-light {
            color: $titleColor;
        }

        .dv-dashboard {
            .row-top {
                .card {
                    .card-header {
                        background-color: $sub2Color;
                        border-color: $titleColor;
                        span, svg {
                            color: $titleColor !important;
                        }
                    }
                }
                .card-footer {
                    background-color: $sub2Color;
                    border-color: $subColor;
                    div, i.fas {
                        color: $titleColor;
                    }
                }
            }
            .row-chart {
                .card {
                    border-color: $subColor !important;
                    .card-header {
                        background-color: $sub2Color;
                        border-color: $subColor;
                        span, i.fas {
                            color: $titleColor;
                        }
                    }
                }
            }
        }
        .page-title {
            color: $fontHighlightColor;
        }
        .page-head {
            i.pi {
                color: $subColor;
            }

            .p-breadcrumb ul {
                li.p-breadcrumb-chevron,
                .p-menuitem-link .p-menuitem-text {
                    color: $fontHighlightColor;
                }
            }
        }
        .bg-input-row {
            background-color: $wholeBackgroundColor !important;
            color: $fontHighlightColor;
            div{
                color: $fontHighlightColor;
            }
        }
        ul.nav-tabs li.nav-item button.nav-link.bg-tab-title {
            &.active{
                color: $sub2Color;
                font-weight: bold;
            }
            &:not(.active){
                color: $lightGray;
            }
        }
        .my-tooltip-class {
            .tooltip-inner {
                background-color: $mainColor;
                color: $white;
                font-size: 10pt;
                border: 1px solid $mainBackgroundColor;
                padding: 3px;
            }
            .arrow::before {
                border-color: transparent;
           }
        }
        .p-tooltip {
            font-size: 10pt;
            border-radius: 5px;
            &.p-tooltip-top .p-tooltip-arrow {
                border-top-color: $mainColor;
            }
            &.p-tooltip-left .p-tooltip-arrow {
                border-left-color: $mainColor;
            }
            &.p-tooltip-right .p-tooltip-arrow {
                border-right-color: $mainColor;
            }
            &.p-tooltip-bottom .p-tooltip-arrow {
                border-bottom-color: $mainColor;
            }
            .p-tooltip-text {
                background-color: $mainColor;
                padding: 4px 8px;
                text-align: center;
            }
        }
        .bg-table-header {
            background-color: $sub2Color !important;
            color: $white!important;
            font-size: 10pt;
            font-weight: bold;
        }
        .bg-table-header-detail {
            background-color: $inputPlaceholderColor !important;
            color: $mainColor !important;
            border: 1px solid $inputPlaceholderColor;
            font-size:10pt;
        }
        body .ui-table .ui-table-thead > tr > th.bg-frozen-table-header {
            background-color:$inputPlaceholderColor!important;
            color: $mainColor!important;
            font-size: 10pt;
            font-weight: bold;
            padding-top: 0;
            padding-bottom: 0;
            height: 28px;
        }

        .bg-card-header {
            background-color:$sub2Color !important;
            color: $white;
            h6, svg {
                color: $white;
            }
        }
        .bg-dialog-header {
            background-color:$sub2Color!important;
            color: $titleColor;
            border: 1px solid $sub2Color;
        }
        .drop-down-box {
            color:$sub2Color!important;
            border: 1px solid $mainColor;
            .dropdown-item:hover {
                background-color:$sub2Color!important;
                color:white;
            }
        }
        .dropdown-divider {
            border-top-color: $subColor;
        }
        .drop-down-chart-box {
            background-color: $wholeBackgroundColor;
            color:$subColor !important;
            border: 1px solid $subColor;
            .dropdown-item:hover {
                background-color:$subColor !important;
                border-top: 1px solid $wholeBackgroundColor;
                color: $wholeBackgroundColor;
            }
        }
        .dashboard-chart-area {
            background-color:$sub2Color!important;
            
        }
        .main-title {
            border: 0.5px solid $mainColor;
            background-color:$mainColor!important;
        }
        .context-text-theme {
            background-color: $wholeBackgroundColor;
            .p-menuitem-link {
                .p-menuitem-icon,
                .p-menuitem-text {
                    min-width: 20px;
                    color:  $tableDataColor;
                }
            }
        }
        .icon-theme {
            color:  $subColor !important;
        }
        .select-menu-theme {
            background-color:  $sub2Color;
            color:  $white;
        }
        .menu-text-color {
            color:  $white;
        }
        .root-menu {
            height:38px;
            padding-left: 5px;
            padding-right: 5px;
            border-bottom: 2.0px solid $sub2Color;
            background-color:$white;
            min-width: 80px;
        }
        .input-select-control,
        .dropdown-component,
        .dv-menu-search-input {
            font-size: 10pt !important;
            border-color: $subColor;
            color: $subColor !important;
            height: 29px;
            min-height: 29px;
            background-color: $wholeBackgroundColor;
            &:focus {
                border-color: $mainColor;
                color: $subColor;
                -moz-box-shadow:    inset 0 0 5px $subColor;
                -webkit-box-shadow: inset 0 0 5px $subColor;
                box-shadow:         inset 0 0 5px $subColor;
            }
            &:hover {
                border-color: $selectedRowColor;
            }
        }
        .dropdown-component {
            &:not(.p-disabled).p-focus {
                box-shadow: 0 0 0 0.2rem $lightColor;
            }
            &.dropdown-outline {
                background-color: $subColor;
                
                &:hover {
                    border-color: transparent;
                }

                .p-dropdown-label {
                    color: $wholeBackgroundColor;
                }
            }
            .p-dropdown-item {
                &.p-highlight {
                    background: $lightColor;
                }
            }
            .p-dropdown-label {
                color: $subColor;
            }
            .p-dropdown-trigger {
                span {
                    color: $subColor;
                }
            }
        }
        // Scrollbar Handle
        .dvscrollbar,
        .main-contents {
            background-color: $wholeBackgroundColor!important;
            &::-webkit-scrollbar-thumb {
                background: $subColor;
                border-radius: 2px;
                &:hover {
                    background: $mainColor;
                }
            }
            &:hover {
                background: $mainColor;
            }
        }

        .p-dropdown:not(.p-disabled).p-focus {
            border-color: $selectedRowColor;
        }

        /* Track */
        ::-webkit-scrollbar {
            background-color: $wholeBackgroundColor!important;
            &:hover { 
                background: $mainColor;
            }
        }
        ::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px #ECEFF1;
            border-radius: 2px;
        }
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: $subColor;
            border-radius: 2px;
            &:hover {
                background: $mainColor;
            }
        }

        .bg-toolbar{
            border-top: 1.0px solid $sub2Color;
            // border-top: 1.0px solid $white;
            background-color:$sub2Color;
        }
        .main-status {
            background:$mainColor;
            // border-top:1px solid $mainColor;
            border-top:1px solid $white;
            font-size:11px;
            color:$white
        }
        .chart-bar {
            fill: $subColor;
        }
        .chart-grid {
            path,
            line {
                fill: none;
                stroke: $sub2Color;
                opacity: 1.0;
                stroke-opacity: 0.7;
                stroke-width: 0.5;
                stroke-dasharray: 5,3;
                shape-rendering: crispEdges;
                // vector-effect: non-scaling-stroke;
            }
            text {
                font-family: sans-serif;
            }
        }
        .chart-area {
            fill: $sub2Color;
        }
        .chart-draw-area {
            background-color: $wholeBackgroundColor;
            height:250px;
        }
        .chart-bar:hover {
            fill: $selectedRowColor;
            stroke: $selectedRowColor;
            stroke-width: 1;
        }
        .btn-outline,
        .dv-datepicker-component .p-button {
            border-color: $tableDataColor;
            color: $tableDataColor;
            background-color: $wholeBackgroundColor;
            &:hover {
                background-color:$tableDataColor;
                color:$wholeBackgroundColor;
                border-color: $wholeBackgroundColor;
            }
        }
        .td-white {
            .btn-outline {
                border-color: $wholeBackgroundColor;
                background-color: $selectedRowColor;
                color:$wholeBackgroundColor;
                &:hover {
                    border-color: $sub2Color;
                    color: $selectedRowColor;
                    background-color: $wholeBackgroundColor;
                }
            }
        }
        .btn-outline-light {
            border-color: $titleColor;
            color: $titleColor;
            &:hover {
                border-color: $sub2Color;
                color: $sub2Color;
                background-color: $titleColor;
            }
        }
        .split-btn-outline {
            button.p-button {
                &.p-splitbutton-defaultbutton,
                &.p-splitbutton-menubutton {
                    border-color: $sub2Color !important;
                    background-color: $white !important;
                    font-size: 9pt;
                    padding: 5px;
                    color: $sub2Color !important;
                    font-weight: bold;
                    &:hover {
                        background-color:$mainColor !important;
                        font-size: 9pt;
                        color:$white !important;
                        font-weight: bold;
                    }
                }
                &.p-splitbutton-menubutton {
                    width: inherit;
                    .p-button-icon {
                        font-size: 9pt;
                        font-weight: bold;
                    }
                }
                &.p-splitbutton-defaultbutton {
                    .p-button-icon {
                        font-size: 9pt;
                        margin-right: 5px;
                        font-weight: bold;
                    }
                }
            }
            ul li a.p-menuitem-link {
                padding: 10px 5px;
            }
        }
        .split-btn-outline ul li a.p-menuitem-link {
            padding: 10px 5px;
            &:hover .p-menuitem-text {
                color:  $sub2Color;
                font-weight: bold;
            }
            .p-menuitem-icon,
            .p-menuitem-text {
                min-width: 20px;
                font-size: 9pt;
                color:  $sub2Color;
                font-weight: bold;
            }
        }
        .btn-solid {
            border-color: $subColor !important;
            background-color: $sub2Color !important;
            color: $white !important;
            &:hover {
                background-color: $white !important;
                color: $sub2Color !important;
            }
        }
        .data-search-dynamic {
            background-color: $wholeBackgroundColor;
        }
        .input-group-menu {
            background-color: $mainColor;
        }
        .data-search-dynamic,
        .input-group-menu {
            button.dropdown-item {
                a.nav-link {
                    color: $subColor !important;
                }
                &.active {
                    background-color: $subColor !important;
                    a.nav-link {
                        background-color: $subColor !important;
                        color: $wholeBackgroundColor !important;
                    }
                }
            }
            input.dv-menu-search-input {
                &::placeholder {
                    color: $selectedRowColor;
                }
            }
        }
        .p-paginator {
            background-color: $wholeBackgroundColor;
            .p-paginator-pages .p-paginator-page.p-highlight {
                background: $selectedRowColor;
                border-color: $selectedRowColor;
                color: $wholeBackgroundColor;
                font-weight: bold;
            }
        }
        .p-tabview {
            .p-tabview-nav {
                background-color: $wholeBackgroundColor;
                li {
                    .p-tabview-nav-link {
                        background-color: $wholeBackgroundColor;
                        color: $subColor;
                        &:hover {
                            background-color: $lightColor;
                        }
                    }
                    &.p-highlight {
                        .p-tabview-nav-link {
                            color: $fontHighlightColor;
                            border-color: $selectedRowColor;
                        }
                        &:hover {
                            color: $wholeBackgroundColor;
                        }
                    }
                    .p-tabview-nav-link:not(.p-disabled):focus {
                        box-shadow: inset 0 0 0 0.2rem $lightColor;
                    }
                }
            } 
            .p-tabview-panels {
                background-color: $wholeBackgroundColor;
            }
        }
        .p-radiobutton .p-radiobutton-box {
            &.p-highlight {
                border-color: $mainColor;
                background-color: $mainColor;
            }
            &:not(.p-disabled) {
                &:hover {
                    border-color: $subColor;
                    background: $subColor;
                }
                &:not(.p-highlight):hover {
                    border-color: $selectedRowColor;
                }
            }
        }
        .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
            background: $lightColor;
            color: $sub2Color;
        }
        .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
            background: $lightColor;
        }
        .p-dropdown-items-wrapper {
            border: 1px solid $subColor;
            ul.p-dropdown-items {
                background-color: $wholeBackgroundColor;
                li.p-dropdown-item {
                    color: $subColor;
                }
            }
        }
        textarea {
            background-color: $wholeBackgroundColor;
            color: $subColor;
            &.form-control:disabled {
                background-color: $disabledBackground;
                color: $subColor;
            }
            &.form-control:focus {
                background-color: $wholeBackgroundColor;
                color: $subColor;
            }
        }
        input {
            background-color: $wholeBackgroundColor;
            color: $subColor;
            &.form-control:disabled {
                background-color: $disabledBackground;
                color: $subColor;
            }
            &.form-control:focus {
                background-color: $wholeBackgroundColor;
                color: $subColor;
            }
        }

        label,
        p {
            color: $fontHighlightColor;
        }

        /* WMS 실적 현황 */
        #divGraphContainer3 {
            .dv-schedule-title {
                fill: $sub2Color;
                stroke: $titleColor;
            }
            .dv-schedule-title-text {
                fill: $titleColor;
            }
            .dv-schedule-title-box {
                stroke: $titleColor
            }
            .dv-schedule-body {
                &.day-bg {
                    fill: $wholeBackgroundColor;
                    stroke: $subColor;
                    &.today {
                        fill: $light2Color;
                    }
                }
                &.day-text {
                    fill: $fontHighlightColor;
                    &.preday {
                        fill: $selectedRowColor;
                    }
                    &.sunday {
                        fill: red;
                    }
                }
            }
        }

        .table-bordered:not(caption)>*{
            border-width: 1px;
        }
        /* 개인정보 수정 */
        .setting-panel {
            .p-panel-content {
                background-color: $wholeBackgroundColor;
                color: $fontHighlightColor;
            }
        }
        /* 트리 */
        #dv-main_table-inv-stat {
            .p-tree {
                &.p-tree-selectable {
                    background-color: $wholeBackgroundColor;
                }
            }
            .p-treenode-content {
                .p-treenode-icon {
                    fill: $fontHighlightColor;
                }
                .p-treenode-label {
                    color: $fontHighlightColor;
                }
                &.p-highlight, &:hover {
                    &>.p-treenode-icon {
                        fill: $sub2Color;
                    }
                    &>.p-treenode-label {
                        color: $sub2Color;
                    }
                }
            }
        }
        /* 설정 드롭박스 */
        .dv-setting-layer {
            background-color: $wholeBackgroundColor;
            border: 1px solid $fontHighlightColor;
            .p-menu-list {
                .p-menuitem {
                    .p-menuitem-link {
                        .p-menuitem-icon, .p-menuitem-text {
                            color: $fontHighlightColor;
                        }
                        &:hover {
                            background-color: $subColor;
                            .p-menuitem-icon, .p-menuitem-text {
                                color: $wholeBackgroundColor;
                            }
                        }
                    }
                }
            }
        }
        /* Modal */
        .dv-modal {
            .p-dialog-header,
            .p-dialog-content,
            .p-dialog-footer {
                background-color: $wholeBackgroundColor;
                color: $fontHighlightColor;
            }

            .p-dialog-footer {
                border-top: 1px solid;
            }
        }

        /* 404 오류 페이지 */
        .dv-page-not-found {
            .card-header {
                background-color: $sub2Color;
                color: $titleColor;
            }
            .card-body, .card-footer {
                color: $fontHighlightColor;
            }
        }

        /* page loading */
        .dv-null-page {
            .card-header {
                span {
                    color: $titleColor;
                }
            }
            .card-body, .card-footer {
                color: $fontHighlightColor;
                background-color: $wholeBackgroundColor;
                border: 1px solid $fontHighlightColor;
            }
        }
        #company {
            &.foreground-theme {
                color: $fontHighlightColor;
            }
        }
        .dv-view-main {
            .list-group-item {
                background-color: $wholeBackgroundColor;
                color: $fontHighlightColor;
            }
            .bg-card-header {
                border: 1px solid $fontHighlightColor;
            }
        }

        /* Datepicker */
        .p-datepicker {
            color: $subColor;
            background-color: $wholeBackgroundColor;
            &:not(.p-disabled) {
                .p-yearpicker .p-yearpicker-year:not(.p-disabled),
                table td span:not(.p-highlight):not(.p-disabled),
                .p-monthpicker .p-monthpicker-month:not(.p-disabled) {
                    &:focus {
                        box-shadow: 0 0 0 0.2rem $inputPlaceholderColor;
                    }
                    &:hover {
                        color: $mainColor;
                    }
                }
            }
            .p-datepicker-group {
                .p-datepicker-header {
                    background-color: $wholeBackgroundColor;
                    select {
                        background-color: $wholeBackgroundColor;
                        color: $subColor;
                    }
                }
                .p-datepicker-calendar {
                    color: $subColor;
                    td span {
                        &:hover {
                            color: $sub2Color;
                            font-weight: bold;
                        }
                    }
                }
            }
            table td > span {
                &.p-highlight {
                    background: $lightColor;
                    font-weight: bold;
                }
            }
            .p-datepicker-header {
                color: $subColor;
                .p-datepicker-title {
                    .p-datepicker-month,
                    .p-datepicker-year {
                        color: $subColor;
                        &:hover {
                            color: $fontHighlightColor;
                        }
                    }
                }
            }

            .p-yearpicker .p-yearpicker-year,
            .p-monthpicker .p-monthpicker-month {
                &.p-highlight {
                    font-weight: bold;
                }
            }
        }

        /* pda-download-card */
        .pda-download-card {
            h4, p { color: $subColor; }
        }

        .dv-comment-card {
            background: $lightColor;
            color: $mainColor;
            p {
                color: $mainColor;
            }
        }

        .p-inputtext:enabled:hover,
        .p-inputtext:enabled:focus {
            border-color: $inputPlaceholderColor;
        }

        .p-link,
        .p-button,
        .p-datepicker table td > span,
        .p-datepicker .p-datepicker-header .p-datepicker-prev,
        .p-datepicker .p-datepicker-header .p-datepicker-next,
        .p-inputtext:enabled {
            &:focus {
                box-shadow: 0 0 0 1.5px $inputPlaceholderColor;
            }
        }

        .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link,
        .p-datatable .p-sortable-column {
            &:focus {
                box-shadow: inset 0 0 0 0.15rem $inputPlaceholderColor;
            }
        }

        .p-dialog .p-dialog-header {
            color: $white;
            background: $mainColor;

            .p-dialog-header-close {
                &:hover {
                    .p-dialog-header-close-icon {
                        color: $mainColor;
                    }
                }
                .p-dialog-header-close-icon {
                    color: $white;
                }
            }
        }

        .p-overlaypanel {
            .p-overlaypanel-close {
                background-color: $mainColor;
                &:enabled:hover {
                    background-color: $subColor;
                }
            }
            .p-overlaypanel-content {
                background-color: $wholeBackgroundColor;
            }
        }

        .p-checkbox {
            &:not(.p-checkbox-disabled) {
                .p-checkbox-box {
                    &:hover {
                        border-color: $mainColor;
                    }
                    &.p-focus {
                        box-shadow: 0 0 0 0.2rem $lightColor;
                        border-color: $subColor;
                    }
                    &.p-highlight:hover {
                        background: $mainColor;
                    }
                }
            }

            .p-checkbox-box.p-highlight {
                border-color: $subColor;
                background: $subColor;
            }
        }

        .p-inputgroup-addon:first-child {
            background: $wholeBackgroundColor;
            color: $selectedRowColor;
            border: 1px solid $mainColor;
            border-right: none;
        }

        .dv-list-group {
            .dv-list-group-item {
                background-color: $wholeBackgroundColor;
                border: 1px solid $subColor;
            }
        }
        #divHistogramControl1, #divHistogramControl2, #divNDControl1 {
            &.dp-on {
                border: 1px solid $subColor;
                border-width: 0px 1px 1px 1px;
            }
        }
        #divNDControl1 {
            &.dp-on {
                border: 1px solid $subColor;
                border-width: 0px 1px 1px 1px;
            }
            .line2 {
                stroke: $fontHighlightColor;
            }
        }
        #divGraphContainer1, #divGraphContainer2 {
            &.dp-on {
                border: 1px solid $subColor;
                border-width: 0px 1px 1px 1px;
            }
            svg {
                rect {
                    fill: $wholeBackgroundColor;
                }
                text {
                    stroke: $fontHighlightColor;
                }
                .chartControlLine {
                    stroke: $fontHighlightColor;
                }
                .chartControlLine2 {
                    stroke: $subColor7;
                }
            }
        }

        &:not(.dv-theme-7) {
            .p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon,
            .p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text,
            .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover,
            .p-datepicker table td > span.p-highlight {
                color: $tableDataColor;
            }

            .p-datepicker {
                .p-yearpicker .p-yearpicker-year,
                .p-monthpicker .p-monthpicker-month {
                    &.p-highlight {
                        color: $fontHighlightColor;
                        background: $lightColor;
                        font-weight: bold;
                    }
                }
            }
        }

        .dv-sidebar {
            .p-sidebar-header {
                .sidebar-header {
                    color: $white;
                    background: $mainColor;

                    .sidebar-header-icon,
                    .sidebar-header-icon span {
                        color: $white;
                    }
                }
            }

            .p-sidebar-content {
                border-left: 1px solid $fontHighlightColor;
                .sidebar-content {
                    background-color: $wholeBackgroundColor;
                    color: $fontHighlightColor;
                }
            }

            .p-sidebar-footer {
                .sidebar-footer {
                    background-color: $wholeBackgroundColor;
                    color: $fontHighlightColor;
                }
            }
        }

        .p-progressbar .p-progressbar-value {
            background: $mainColor;
        }

        .p-tree .p-tree-filter-container .p-tree-filter-icon {
            color: $tableDataColor;
        }
    }

    .dv-theme-7 {
        .bg-toolbar{
            // border-top: 1.0px solid $sub2Color;
            border-top: 1.0px solid $white;
            background-color:$sub2Color;
        }
        #dv-main_table-inv-stat .p-treenode-content.p-highlight
        , #dv-main_table-inv-stat .p-treenode-content:hover {
            &> .p-treenode-icon {
                color: $mainColor !important;
            }
            &> .p-treenode-label {
                font-weight: bold;
            }
        }
        #messageBody p {
            color: #282E33;
        }

        .dropdown-component.dropdown-outline.dv-dashboard-dropdown {
            border: none;
            background-color: #282E33;
        }
        .p-radiobutton .p-radiobutton-box.p-highlight {
            border-color: white;
        }
        .p-checkbox .p-checkbox-box .p-checkbox-icon {
            color: $mainColor;
        }
        .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
            .p-checkbox-icon {
                color: $tableDataColor;
            }
        }

        .p-tabview {
            .p-tabview-panels .page {
                color: white;
            }
            .p-tabview-nav li.p-highlight .p-tabview-nav-link:hover {
                color: $wholeBackgroundColor;
            }
        }

        .dv-dashboard .row-top .card {
            border: 1px solid;
        }

        // Scrollbar Handle
        .dvscrollbar,
        .main-contents {
            background-color: $wholeBackgroundColor!important;
            &::-webkit-scrollbar-thumb {
                background: #333;
                border-radius: 2px;
                &:hover {
                    background: #1d2226;
                }
            }
            &:hover {
                background: #1d2226;
            }
        }

        /* Track */
        ::-webkit-scrollbar {
            background-color: $wholeBackgroundColor!important;
            &:hover { 
                background: $selectedRowColor;
            }
        }
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 2px;
            border: 1px solid;
            &:hover {
                background: #1d2226;
            }
        }

        .table tr td.dv-bom-root-row {
            background-color: $lightColor;
            color: $mainColor;
            .fa-clone {
                color: $mainColor;
            }
        }

        
        .p-inputgroup-addon:first-child {
            border-color: $subColor;
        }
    }
}