@charset 'utf8';

:root {
    --NCacheColor01: #73879C;
    --NCacheColor02: #2A3F54;
}

/*h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 {
    color: var(#2A3F54);
}*/

body {
    overflow-x: hidden;
    background: #fff;
    /*font-size: 0.9rem;*/
}

.disableEvents {
    pointer-events: none;
}

.bg-lightgray {
    background-color: #c3c2c27d !important;
    border-color: lightgray;
    color: gray !important;
}

table.disabled {
    pointer-events: none;
    background: #fafafa;
}

    table.disabled tr th {
        background-color: #eee !important;
    }

    table.disabled tr button.dropdown-toggle {
        background: #999;
        border-color: #999;
    }

.form-group label, .form-check label {
    justify-content: flex-start;
    color: rgba(0,0,0,0.8);
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

.input-group-text {
    font-size: 0.75rem;
}

.modal-open .modal {
    z-index: 9999;
}
/*
body::-webkit-scrollbar {
    width: 0.75rem;
}

body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

body::-webkit-scrollbar-thumb {
    background: var(--NCacheColor01);
}

body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.container-fluid .title-row {
    box-shadow: #fff 0 0 1rem;
    background: f6f6f6;
    border-bottom: double 5px #f6f6f6;
}
    .container-fluid .title-row h1 {
        color: var(#2A3F54);
        font-size: 2.00rem;
        font-weight: normal;
    }

    .container-fluid .title-row .breadcrumb {
        padding: 0;
        background-color: inherit;
    }

    .container-fluid .title-row .breadcrumb li {
    }

div#Footer {
    text-align: right;
    color: #fff;
    background-color: var(#2A3F54);
    z-index: 9999;
}
*/
/* START - primary navbar */
#PrimaryNav {
    margin-left: 2.75rem;
    background-color: #2A3F54 /*#EDEDED*/;
    /*box-shadow: var(--NCacheColor01) 0.5rem 0 1rem;*/
    z-index: 9998;
    position: fixed;
}

    #PrimaryNav #UserProfileImage {
        height: 2rem;
    }

    #PrimaryNav .navbar-nav .dropdown .dropdown-menu {
        right: 0;
        left: auto;
    }

    #PrimaryNav .navbar-brand img {
        height: 2.5rem;
    }

.mobile-display {
    display: none;
}

@media (max-width: 768px) {
    .mobile-display {
        display: block;
    }

    .mobile-display-none {
        display: none;
    }
}

/* END - primary navbar */

/* START - Navigation Drawer */

#NavDrawer {
    position: fixed;
    width: 2.75rem;
    height: 100%;
    font-size: 1rem;
    padding: 0;
    background-color: #2A3F54;
    overflow: hidden;
    z-index: 9998;
    top: 0;
    line-height: 1.5;
    transition: width 0.15s ease-in-out;
    /*box-shadow: var(--NCacheColor01) 0 0 1rem;*/
}

    #NavDrawer.open {
        width: 12rem;
    }

    #NavDrawer .nav {
        width: 12rem;
        transition: height 1s ease-in-out;
    }

        #NavDrawer .nav .nav-item .nav-link {
            color: #fff;
            padding: 0.5rem 1rem;
            padding-left: 0.25rem;
            transition: height 1s ease-in-out;
        }

        #NavDrawer .nav .nav-item:first-child .nav-link {
            padding: 0.83rem 0.35rem;
        }

        #NavDrawer .nav .nav-item:first-child:hover {
            border-left: solid 0.3vw #2A3F54;
            background: none;
        }

        #NavDrawer .nav .nav-item span i.fa-chevron-down {
            font-size: 0.7rem;
        }

        #NavDrawer .nav .nav-item {
            border-left: solid 0.3vw #2A3F54;
            border-bottom: solid 0.1vw var(--NCacheColor01);
        }

            #NavDrawer .nav .nav-item i.fa {
                margin-right: 1rem;
                transition: font-size 0.15s ease-in-out;
            }

            #NavDrawer .nav .nav-item:hover {
                background-color: var(--NCacheColor01);
                border-left: solid 0.3vw white;
            }

            #NavDrawer .nav .nav-item:hover {
                border-left: solid 0.3vw white;
            }

/* END - Navigation Drawer */

/* START - Notification Panel and Drawer */

#NotificationPanel {
    position: fixed;
    right: 0;
    z-index: 10001;
    width: 18%;
    right: 1rem;
    padding-top: 1rem;
    transition: all 1s;
    word-wrap: break-word;
}

    #NotificationPanel > * {
        margin: 0;
        margin-bottom: 0.5rem;
        transition: opacity 0.15s;
        width: 100%;
        padding: 0.5rem;
        /*text-align: right;*/
    }

    #NotificationPanel .fa {
        top: 0.2rem;
        position: absolute;
        right: 0.2rem;
        cursor: pointer;
    }

        #NotificationPanel .fa:hover {
            font-weight: bold;
        }

    #NotificationPanel > *:hover {
    }

.notifications .header-custom {
    padding: 7px;
}


.notifications {
    padding: 0px;
    margin: 0px;
    font-size: 13px !important;
    width: 30%;
    height: 100%;
    /*border: solid 1px #aaa;*/
    position: fixed;
    right: 0;
    z-index: 10000;
    background: white;
    box-shadow: #666 0rem 0.5rem 1rem;
}

@media (max-width: 768px) {
    .notifications {
        width: 100%;
    }
}

.notifications .notifications-header h3 {
    font-size: large;
}

.notifications #NotificationsData .close-btn {
    margin: -0.5rem 0rem;
    opacity: 0.5;
}

    .notifications #NotificationsData .close-btn:hover {
        opacity: 1;
    }

    .notifications #NotificationsData .close-btn img {
        width: 0.8rem;
    }

.notifications .notifications-header a {
    cursor: pointer;
}

.notifications #NotificationsData {
    margin: 0;
    max-height: 83%;
    overflow: auto;
}

.notifications #ViewAllNotifsBtn {
    border-top-color: #999;
}

.notifications #NotificationsData::-webkit-scrollbar {
    width: 0.4rem;
}

.notifications #NotificationsData::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background-color: #ccc;
}

.notifications .notif {
    overflow: auto;
    padding: 0.5rem;
    background-color: #fff;
    border: solid 1px #eee;
    margin-bottom: 0.5rem;
    border-left: 0;
    border-right: 0;
}

    .notifications .notif:first-child {
        margin-top: 0;
        border-top-color: #fff;
    }

    .notifications .notif:last-child {
        border-bottom: none;
        margin-bottom: 0.3rem;
    }

    .notifications .notif.inbx_unread {
        background-color: f6f6f6;
    }

    .notifications .notif:hover {
        background-color: #f6f6f6;
    }

.notifications .notif-message {
    margin-bottom: 0;
}

.notifications .notif.inbx_unread .notif-message {
    /*font-weight: bold;*/
}

.notifications .notif-timestamp {
    float: right;
    margin-bottom: 0;
    color: #999;
    font-size: smaller;
    margin-top: 0.4rem;
}

.notifications .notif-read-btn, .notifications .notif-unread-btn {
    float: right;
    background-color: transparent;
    border: none;
    color: #999;
}

    .notifications .notif-read-btn:hover, .notifications .notif-unread-btn:hover {
        color: #000;
        cursor: pointer;
    }

.notifications .list-group {
    max-height: 276px;
    overflow: auto;
}

    .notifications .list-group .list-group-item {
        padding: .4rem 1rem;
        background-color: transparent;
    }

        .notifications .list-group .list-group-item:hover {
            color: unset;
        }

        .notifications .list-group .list-group-item.inbx_unread:hover {
            background-color: #e1f5ff;
        }

        .notifications .list-group .list-group-item.inbx_unread {
            background-color: #f1faff;
            color: #333;
            font-weight: bold;
        }

        .notifications .list-group .list-group-item .message {
            float: left;
            /*width: 95%;*/
            text-align: justify;
            line-height: 1rem;
        }

        .notifications .list-group .list-group-item .close-btn {
            float: right;
            padding: 0.1rem 0.3rem;
            text-align: right;
            background-color: #ddd;
            margin-left: 0.5rem;
            margin-bottom: 0.5rem;
            border-radius: 0.2rem;
        }

            .notifications .list-group .list-group-item .close-btn:hover {
                background-color: #E00;
                color: #fff;
            }

.notifications-btn {
    background-color: transparent;
    color: #999;
    transition: none;
}

    .notifications-btn.active {
        background-color: #121c27;
    }

    .notifications-btn:focus {
        box-shadow: unset;
    }

.notifications-btn-container {
    transition: all 0.15s;
}

.manager-settings-btn {
    background-color: transparent;
    color: #999;
    transition: none;
}

    .manager-settings-btn:focus {
        box-shadow: unset;
    }

.notifications-btn-container.active, .notifications-btn-container:hover, .manager-settings-btn-container.active, .manager-settings-btn-container:hover {
    color: white !important;
}

.notifications-btn.active, .notifications-btn:hover, .manager-settings-btn.active, .manager-settings-btn:hover {
    color: white !important;
}

.notifications-btn .badge, .notifications-btn .badge {
    background-color: #f50c0c;
    color: #f3f7f7;
}

.notifications-btn:hover .badge, .notifications-btn.active .badge {
    background-color: #f50c0c;
    color: #f3f7f7;
}

.nav-text {
    color: white;
    margin-left: 0.5em;
    font-size: large;
    flex-grow: 1;
}

.divider-nav {
    border-left: 1px solid #7cb2e875;
    height: 37px;
    flex-grow: 0;
}

/* END - Notification Panel and Drawer */
/* START - Main Container */
#MainContainer {
    margin-left: 2.75rem;
    overflow: hidden;
    transition: margin-left 0.15s ease-in-out;
    position: relative;
    margin-top: 3.2rem;
    min-height: 32rem;
    overflow-x: hidden;
}

    #MainContainer.slide {
        margin-left: 12rem;
    }

.top_nav {
    transition: all 0.15s;
}

    .top_nav.slide {
        margin-left: 9rem;
    }

#MainContainer > .container-fluid {
    overflow-y: hidden;
    opacity: 1;
    transition: all 0.15s ease-in-out;
}

    #MainContainer > .container-fluid.back {
    }

/* END - Main Container */

/* START - Progress Loader */

.loader-container {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    z-index: 9999;
    align-items: center;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

.scheduleBox {
    width: 800px;
}

.spin {
    animation: spin 2s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* END - Progress Loader */

/* START - Step container controls */


.wizard-select {
    height: 24px !important;
    width: auto;
    padding: 0px;
}

input.not-validated:focus, input:focus:invalid, select:focus:invalid {
    border-color: #ff8080;
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
}

input:focus:valid, select:focus:valid {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* END - Step container controls */

/* START - Details Page Clustered Cache */

.cache-status {
    color: #73879C;
}

#DetailsAdvanceControlPanel {
    position: fixed;
    top: 0;
    height: 92.2%;
    background: rgba(255,255,255,1);
    width: 97%;
    z-index: 9997;
    margin-top: 3.2rem;
    right: 0;
    overflow-y: auto;
}

    #DetailsAdvanceControlPanel > .close-btn {
        font-size: 0.8rem;
        color: #666;
        border: solid 1px #ccc;
        padding: 0.1rem 0.4rem;
        background: #eee;
        margin: 0.7rem;
    }

        #DetailsAdvanceControlPanel > .close-btn:hover {
            background: #ff5252;
            color: #fff;
            border: solid 1px #ff5252;
        }

    #DetailsAdvanceControlPanel > div {
        background: #fff;
        /*border: solid 1px #eee;*/
        padding: 0.5rem;
    }

        #DetailsAdvanceControlPanel > div .panel-title {
            border-bottom: solid 1px #eee;
            padding-bottom: 0.5rem;
            padding-top: 0.2rem;
            margin-bottom: 1rem;
        }

        #DetailsAdvanceControlPanel > div .panel-body {
            color: #333;
            margin-top: 3rem;
        }

        #DetailsAdvanceControlPanel > div .configuration-buttons {
            width: 97%;
            position: absolute;
            bottom: 1rem;
        }

    #DetailsAdvanceControlPanel input, #DetailsAdvanceControlPanel select {
        font-size: inherit;
    }

        #DetailsAdvanceControlPanel input[type=text]:focus:valid {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }

        #DetailsAdvanceControlPanel input[type=text]:focus:invalid {
            border-color: #ff8080;
            box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
        }


#CCDetailsAdvanceControlPanel {
    position: fixed;
    top: 0;
    height: 92.2%;
    background: rgba(255,255,255,1);
    width: 97%;
    z-index: 9997;
    margin-top: 3.2rem;
    right: 0;
    overflow-y: auto;
}

    #CCDetailsAdvanceControlPanel > .close-btn {
        font-size: 0.8rem;
        color: #666;
        border: solid 1px #ccc;
        padding: 0.1rem 0.4rem;
        background: #eee;
        margin: 0.7rem;
    }

        #CCDetailsAdvanceControlPanel > .close-btn:hover {
            background: #ff5252;
            color: #fff;
            border: solid 1px #ff5252;
        }

    #CCDetailsAdvanceControlPanel > div {
        background: #fff;
        /*border: solid 1px #eee;*/
        padding: 0.5rem;
    }

        #CCDetailsAdvanceControlPanel > div .panel-title {
            border-bottom: solid 1px #eee;
            padding-bottom: 0.5rem;
            padding-top: 0.2rem;
            margin-bottom: 1rem;
        }

        #CCDetailsAdvanceControlPanel > div .panel-body {
            color: #333;
            margin-top: 3rem;
        }

        #CCDetailsAdvanceControlPanel > div .configuration-buttons {
            width: 97%;
            position: absolute;
            bottom: 1rem;
        }

    #CCDetailsAdvanceControlPanel input, #CCDetailsAdvanceControlPanel select {
        font-size: inherit;
    }

        #CCDetailsAdvanceControlPanel input[type=text]:focus:valid {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }

        #CCDetailsAdvanceControlPanel input[type=text]:focus:invalid {
            border-color: #ff8080;
            box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
        }


.advance-control-panel-configuration-buttons {
}

.advance-control-panel-action-btn-container {
    text-align: right;
    margin-top: 1rem;
}

#ReadThruProviderFileInputLabel {
}

#ReadThruLibraryInput, #WriteThruLibraryInput, #CustomDependencyLibraryInput {
    cursor: pointer;
}

#ReadThruBackingSourceTable, #SameNode #WriteThruBackingSourceTable, #CompactSerializationAttributesTable, #AddModuleTable, #CustomDependencyTable {
    table-layout: fixed;
}

    #ReadThruBackingSourceTable tr th, #WriteThruBackingSourceTable tr th, #CompactSerializationAttributesTable tr th, #AddModuleTable tr th, #CustomDependencyTable tr th {
        text-align: center;
        background-color: #e4f1ff;
        padding: 0.5rem;
    }

#SecurityTable tr th {
    text-align: left;
    background-color: #e4f1ff;
    padding: 0.5rem;
}

#SameNodeTable tr th {
    text-align: left;
    background-color: #e4f1ff;
}

#ReadThruBackingSourceTable tr td, #SameNode tr td, #WriteThruBackingSourceTable tr td, #AddModuleTable tr td, #CustomDependencyTable tr td {
    vertical-align: middle;
    word-break: break-word;
}

#CustomDependencyProviderFileInputLabel {
}

.advance-settings-remove-row-btn {
    cursor: pointer;
}

#CompactTypeSelect {
}

    #CompactTypeSelect option {
        padding: 0.2rem;
        margin: 0;
    }

#CompactSerializationAttributesTable {
    text-align: center;
}

    #CompactSerializationAttributesTable tbody tr {
        cursor: pointer;
    }

        #CompactSerializationAttributesTable tbody tr:hover {
            background-color: #eee;
        }

        #CompactSerializationAttributesTable tbody tr.selected {
            background-color: #eee;
        }



/* END - Details Page Clustered Cache */
/* START - Settings Control */
#SettingsControlContainer {
}

    #SettingsControlContainer .nav-tabs {
        border-bottom: none;
    }

    #SettingsControlContainer .nav-tabs-color {
        background-color: unset;
    }

    #SettingsControlContainer .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
    }

        #SettingsControlContainer .nav-tabs .nav-item.show .nav-link, #SettingsControlContainer .nav-tabs .nav-link.active {
            border-color: #dee2e6 #fff #dee2e6 #dee2e6;
            z-index: 1;
            font-weight: bold;
        }

    #SettingsControlContainer input, #SettingsControlContainer select {
        color: #000;
    }

    #SettingsControlContainer .input-desc {
        font-size: small;
        color: #666;
    }



/* END - Settings Control*/

/* START - Monitor Styles */

body {
    background: #eee;
}

#MonitorDashboardPanel {
    margin-left: 0.5rem;
}

#MonitorDashboardScreens {
    border-left: 1px solid #ccc;
    border-right: solid 1px #2A3F54;
    position: fixed;
    background: #fafafa;
    height: 100%;
    width: 12.51rem;
    transition: margin-right 0.15s ease-in-out;
    z-index: 9995;
    right: 0;
    box-shadow: #2a3f54 2px 0px 10px;
}

    #MonitorDashboardScreens.close-panel {
        margin-right: -12.51rem;
    }

    #MonitorDashboardScreens .nav-tabs .nav-item a {
        border-color: var(--NCacheColor01);
        border-top: 0;
        border-radius: 0;
        color: #fff;
        padding: 0.5rem 1.32rem;
        background-color: #2A3F54;
    }

        #MonitorDashboardScreens .nav-tabs .nav-item a.active {
            border-color: var(--NCacheColor01) var(--NCacheColor01) #fff;
            background-color: #fff;
            color: var(--NCacheColor01);
        }

    #MonitorDashboardScreens .nav-tabs .nav-item:first-child a {
        border-left: 0;
    }

    #MonitorDashboardScreens .nav-tabs .nav-item:last-child a {
        border-right: 0;
    }

    #MonitorDashboardScreens .nav-tabs .nav-item a:hover {
        opacity: 0.8;
    }

    #MonitorDashboardScreens .tab-content {
        overflow-y: auto;
    }

        #MonitorDashboardScreens .tab-content::-webkit-scrollbar {
            width: 5px;
        }

        #MonitorDashboardScreens .tab-content::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        #MonitorDashboardScreens .tab-content::-webkit-scrollbar-thumb {
            background: var(--NCacheColor01);
        }

        #MonitorDashboardScreens .tab-content:hover::-webkit-scrollbar-thumb {
            background: #2A3F54;
        }

        #MonitorDashboardScreens .tab-content::-webkit-scrollbar-thumb:hover {
            background: #2A3F54;
        }


    #MonitorDashboardScreens .monitor-screens-container .card .card-header, #MonitorDashboardScreens .monitor-screens-container .card .card-header i {
        cursor: pointer;
        background: #fdfdfd;
        transition: transform 0.15s;
        transform: rotate(0deg);
    }

    #MonitorDashboardScreens #servermonitors .card .card-header.collapsed i {
        transform: rotate(180deg);
    }

    #MonitorDashboardScreens #servermonitors .collapse {
        max-height: 21rem;
        overflow-y: auto;
    }

        #MonitorDashboardScreens #servermonitors .collapse::-webkit-scrollbar {
            width: 0.4rem;
        }



    #MonitorDashboardScreens .tab-pane {
        padding: 0;
    }

.monitor-screens-container .card-header img {
    width: 1.5rem;
    float: right;
}

#MonitorDashboardScreens .tab-pane .nav .nav-item .nav-link {
    font-size: 0.8rem;
    color: var(--gray);
    border-bottom: dotted 1px #eee;
    background-color: #fff;
}

    #MonitorDashboardScreens .tab-pane .nav .nav-item .nav-link:hover {
        background: #fafafa;
        color: #2A3F54;
    }

#MonitorDashboardScreenCollapse {
    position: fixed;
    right: 0;
    height: 100%;
    /*width: 1.5rem;*/
    margin-right: 12.51rem;
    display: flex;
    align-items: center;
    padding: 0.1rem;
    text-align: center;
    transition: margin-right 0.15s ease-in-out;
    z-index: 9995;
    /*flex-direction: column;*/
    justify-content: space-between;
}

    #MonitorDashboardScreenCollapse a.close-btn {
        text-orientation: upright;
        writing-mode: vertical-rl;
        text-transform: uppercase;
        align-self: center;
        color: white;
        padding: 2rem 0;
        /*margin-right: -0.1rem;*/
        background-color: #2A3F54;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
        transition: background-color 0.15s ease-in-out;
        /*box-shadow: #aaa 5px 0px 10px;*/
    }

    #MonitorDashboardScreenCollapse a.pin-view {
        align-self: flex-start;
        padding: 0.9rem 0;
        margin-top: 2rem;
        text-orientation: upright;
        writing-mode: vertical-rl;
        text-transform: uppercase;
        color: white;
        margin-right: -0.1rem;
        background-color: #2A3F54;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
        transition: background-color 0.15s ease-in-out;
    }

    #MonitorDashboardScreenCollapse a:hover {
        background-color: var(--NCacheColor01);
    }

    #MonitorDashboardScreenCollapse.close-panel {
        margin-right: 0rem;
    }

#MonitorDashboardPanel {
    overflow-x: hidden;
    float: left;
    width: 98%;
}

    #MonitorDashboardPanel .nav-link {
        display: block;
        padding: .5rem .5rem;
    }

    #MonitorDashboardPanel .nav .nav-item {
        position: relative;
        margin-bottom: 0rem;
    }

        #MonitorDashboardPanel .nav .nav-item i {
        }

        #MonitorDashboardPanel .nav .nav-item:hover i {
            opacity: 0.8;
            color: #2A3F54;
        }

        #MonitorDashboardPanel .nav .nav-item:hover .nav-link.active i {
            color: #fff;
            opacity: 1;
        }

    #MonitorDashboardPanel .nav #NewDashboardBtnContainer i {
        opacity: 1;
    }

    #MonitorDashboardPanel.close-panel {
        width: 81.5% !important;
    }

@media only screen and (min-width: 1000px) {
    div#MonitorDashboardPanel.close-panel {
        width: 76.7% !important;
    }
}

@media only screen and (min-width: 1450px) {
    div#MonitorDashboardPanel.close-panel {
        width: 87.7% !important;
    }
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--dark);
}



#MonitorDashboardPanel .monitor-dashboard-screens {
    margin-bottom: 1rem;
    margin-right: 0.20rem;
    min-height: 23rem;
    align-content: flex-start;
}

    #MonitorDashboardPanel .monitor-dashboard-screens > div {
        /*transition: all 0.1s linear;*/
    }

    #MonitorDashboardPanel .monitor-dashboard-screens .card .card-header {
        padding: 0.2rem;
        background: transparent;
        border: 0;
        margin-bottom: 0.2rem;
    }

    #MonitorDashboardPanel .monitor-dashboard-screens .card .screen-title {
        font-weight: bold;
        color: #2A3F54;
    }

    #MonitorDashboardPanel .monitor-dashboard-screens .card .card-position-control {
        opacity: 0.5;
        margin-left: 0.3rem;
    }

        #MonitorDashboardPanel .monitor-dashboard-screens .card .card-position-control:hover {
            opacity: 1.0;
        }

        #MonitorDashboardPanel .monitor-dashboard-screens .card .card-position-control a {
            color: var(--gray);
        }

            #MonitorDashboardPanel .monitor-dashboard-screens .card .card-position-control a:hover {
                color: var(--graydark);
            }

    #MonitorDashboardPanel .monitor-dashboard-screens .card {
        border-radius: 0;
        border: 0;
        box-shadow: #aaa 0px 3px 10px;
    }

    #MonitorDashboardPanel .monitor-dashboard-screens .quick-view {
        background-color: #f6f6f6;
        border: solid 1px #eee;
        display: flex;
        flex-direction: column;
        padding-bottom: 0.75rem;
    }

        #MonitorDashboardPanel .monitor-dashboard-screens .quick-view .card {
            margin-top: 0;
            box-shadow: none;
            border: none;
            flex: 1;
        }

            #MonitorDashboardPanel .monitor-dashboard-screens .quick-view .card .card-body {
                display: flex;
                align-items: center;
                justify-content: center;
            }


    #MonitorDashboardPanel .monitor-dashboard-screens > div {
        /*padding-right: 0;*/
        padding: 0.2rem;
        transition: width 0.15s;
    }

        #MonitorDashboardPanel .monitor-dashboard-screens > div[data-monitorid='api-logging'] {
            margin-bottom: 1rem;
        }

            #MonitorDashboardPanel .monitor-dashboard-screens > div[data-monitorid='api-logging'] div,
            #MonitorDashboardPanel .monitor-dashboard-screens > div[data-monitorid='api-logging'] table,
            #MonitorDashboardPanel .monitor-dashboard-screens > div[data-monitorid='api-logging'] tbody {
                height: inherit;
            }

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--NCacheColor01);
}

    ::-webkit-scrollbar-thumb:hover {
        background: #2A3F54;
    }

#MonitorDashboardPanel .monitor-tab-content {
    color: #333 !important;
    margin-top: 3.5rem;
}

    #MonitorDashboardPanel .monitor-tab-content > .container-fluid {
        /*padding-left: 0.5rem;
    padding-right: 0.5rem;*/
        padding-right: 0;
    }

#MonitorDashboardPanel .monitor-dashboard-screens > div > .card > .card-body {
    padding: 0.2rem;
    height: 15rem;
}

#MonitorDashboardPanel .overall-status .progress {
    margin-bottom: 0.5rem;
}

    #MonitorDashboardPanel .overall-status .progress div {
        height: auto;
        border: none;
        font-size: 0.7rem;
    }

#MonitorDashboardPanel .overall-status {
    height: 100%;
}

    #MonitorDashboardPanel .overall-status .monitor-usage-number .big {
        font-size: 1rem;
        font-weight: bold;
    }

#MonitorDashboardPanel .cluster-health tbody {
    display: block;
    /*max-height: 13.3rem;*/
    overflow: auto;
    transition: height 0.15s ease-in-out;
}

    #MonitorDashboardPanel .cluster-health tbody::-webkit-scrollbar-thumb {
        background: #dee2e6;
    }

    #MonitorDashboardPanel .cluster-health tbody::-webkit-scrollbar {
        width: 0.5rem;
    }

    #MonitorDashboardPanel .cluster-health tbody:hover::-webkit-scrollbar-thumb, #MonitorDashboardPanel .cluster-health tbody::-webkit-scrollbar-thumb:hover {
        background: #aaa;
    }

    #MonitorDashboardPanel .cluster-health thead tr th:nth-child(1), #MonitorDashboardPanel .cluster-health tbody tr td:nth-child(1) {
        width: 5%;
        display: none;
    }

    #MonitorDashboardPanel .cluster-health thead tr th:nth-child(2), #MonitorDashboardPanel .cluster-health tbody tr td:nth-child(2) {
        width: 30%;
    }

    #MonitorDashboardPanel .cluster-health thead tr th:nth-child(3), #MonitorDashboardPanel .cluster-health tbody tr td:nth-child(3) {
        width: 16%;
    }

    #MonitorDashboardPanel .cluster-health thead tr th:nth-child(4), #MonitorDashboardPanel .cluster-health tbody tr td:nth-child(4) {
        width: 20%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    #MonitorDashboardPanel .cluster-health thead tr th:nth-child(5), #MonitorDashboardPanel .cluster-health tbody tr td:nth-child(5) {
        width: 15%;
    }

    #MonitorDashboardPanel .cluster-health thead, #MonitorDashboardPanel .cluster-health tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

#MonitorDashboardPanel .cluster-health th {
    border-top: none;
    padding: 0;
    padding-bottom: 0.25rem;
}

#MonitorDashboardPanel .cluster-health td {
    vertical-align: middle;
    border: none;
    padding: 0.35rem 0;
}

/* BS5 sets color on each cell from --bs-table-color*, so the row color must go through the vars */
#MonitorDashboardPanel .cluster-health tr.success {
    color: #419800;
    --bs-table-color: #419800;
    --bs-table-hover-color: #419800;
}

    #MonitorDashboardPanel .cluster-health tr.success .status-color {
        background-color: var(--green);
    }

#MonitorDashboardPanel .cluster-health tr.warning {
    color: #987200;
    --bs-table-color: #987200;
    --bs-table-hover-color: #987200;
}

    #MonitorDashboardPanel .cluster-health tr.warning .status-color {
        background-color: var(--yellow);
    }

#MonitorDashboardPanel .cluster-health tr.danger {
    color: #980000;
    --bs-table-color: #980000;
    --bs-table-hover-color: #980000;
}

    #MonitorDashboardPanel .cluster-health tr.danger .status-color {
        background-color: var(--red);
    }


#MonitorDashboardPanel .cluster-health {
    text-align: center;
    padding: 1rem 0.75rem;
    width: 100%;
    margin-bottom: 0;
}

#MonitorDashboardPanel .event-logs {
    table-layout: fixed;
}

    #MonitorDashboardPanel .event-logs tbody {
        display: block;
        max-height: 13.3rem;
        overflow: auto;
        transition: height 0.15s ease-in-out;
    }

        #MonitorDashboardPanel .event-logs tbody:hover::-webkit-scrollbar-thumb, #MonitorDashboardPanel .event-logs tbody::-webkit-scrollbar-thumb:hover {
            background: #aaa;
        }

        #MonitorDashboardPanel .event-logs tbody tr th:nth-child(1), #MonitorDashboardPanel .event-logs tbody tr td:nth-child(1) {
            width: 7rem;
        }

        #MonitorDashboardPanel .event-logs tbody tr th:nth-child(2), #MonitorDashboardPanel .event-logs tbody tr td:nth-child(2) {
            width: 6rem;
        }

        #MonitorDashboardPanel .event-logs tbody tr th:nth-child(3), #MonitorDashboardPanel .event-logs tbody tr td:nth-child(3) {
            width: 6rem;
        }

        #MonitorDashboardPanel .event-logs tbody tr th:nth-child(4), #MonitorDashboardPanel .event-logs tbody tr td:nth-child(4) {
            width: 6rem;
        }

        #MonitorDashboardPanel .event-logs tbody tr th:nth-child(5), #MonitorDashboardPanel .event-logs tbody tr td:nth-child(5) {
            width: 6rem;
        }

        #MonitorDashboardPanel .event-logs tbody tr th:nth-child(6), #MonitorDashboardPanel .event-logs tbody tr td:nth-child(6) {
            width: 6rem;
        }

        #MonitorDashboardPanel .event-logs tbody tr th:nth-child(7), #MonitorDashboardPanel .event-logs tbody tr td:nth-child(7) {
            width: 28rem;
        }

        #MonitorDashboardPanel .event-logs tbody::-webkit-scrollbar-thumb {
            background: #dee2e6;
        }

        #MonitorDashboardPanel .event-logs tbody::-webkit-scrollbar {
            width: 0.5rem;
            height: 0.5rem;
        }

        #MonitorDashboardPanel .event-logs thead, #MonitorDashboardPanel .event-logs tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            padding-left: 0.2rem;
        }

    #MonitorDashboardPanel .event-logs th {
        border-top: none;
        padding: 0;
        padding-bottom: 0.25rem;
    }

    #MonitorDashboardPanel .event-logs td {
        vertical-align: top;
        padding: 0.5rem;
    }

#MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body, #MonitorDashboardPanel .report-view > .monitor-dashboard-screens > div > .card > .card-body {
    padding: 0.6rem;
    height: 100%;
    overflow: auto;
    position: relative;
    min-height: 20rem;
}

#MonitorDashboardPanel #reportdashboard table, #MonitorDashboardPanel .report-view table {
    table-layout: fixed;
    /*overflow-x: auto;
    overflow-y: hidden;*/
    display: block;
    /*padding-bottom: 1rem;*/
    margin-bottom: 0;
    scroll-behavior: smooth;
}

    #MonitorDashboardPanel #reportdashboard table tr, #MonitorDashboardPanel .report-view table tr {
        display: block;
    }

    #MonitorDashboardPanel #reportdashboard table thead tr, #MonitorDashboardPanel #reportdashboard table tbody tr, #MonitorDashboardPanel .report-view table thead tr, #MonitorDashboardPanel .report-view table tbody tr {
        display: block;
        width: max-content;
        table-layout: fixed;
        padding-left: 0.2rem;
        /*word-break: break-all;*/
    }



    #MonitorDashboardPanel #reportdashboard table::-webkit-scrollbar-thumb, #MonitorDashboardPanel .report-view table::-webkit-scrollbar-thumb {
        background: #dee2e6;
    }

    #MonitorDashboardPanel #reportdashboard table::-webkit-scrollbar, #MonitorDashboardPanel .report-view table::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
    }

#MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr td, #MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr th, #MonitorDashboardPanel .report-view > .monitor-dashboard-screens > div > .card > .card-body table tr td, #MonitorDashboardPanel .report-view > .monitor-dashboard-screens > div > .card > .card-body table tr th {
    width: 6.5rem;
}

    #MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr td:first-child, #MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr th:first-child, #MonitorDashboardPanel .report-view > .monitor-dashboard-screens > div > .card > .card-body table tr td:first-child, #MonitorDashboardPanel .report-view > .monitor-dashboard-screens > div > .card > .card-body table tr th:first-child {
        width: 4rem;
        opacity: 0.3;
    }

    #MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr th:first-child, #MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr td:first-child {
        display: none;
    }

        #MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr td:first-child:hover, #MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr th:first-child:hover, #MonitorDashboardPanel .report-view > .monitor-dashboard-screens > div > .card > .card-body table tr td:first-child:hover, #MonitorDashboardPanel .report-view > .monitor-dashboard-screens > div > .card > .card-body table tr th:first-child:hover {
            opacity: 1.0;
        }

    #MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr td:first-child, #MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr th:first-child {
        display: none;
    }

    #MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr td:nth-of-type(2), #MonitorDashboardPanel #reportdashboard > .monitor-dashboard-screens > div > .card > .card-body table tr th:nth-of-type(2), #MonitorDashboardPanel .report-view > .monitor-dashboard-screens > div > .card > .card-body table tr td:nth-of-type(2), #MonitorDashboardPanel .report-view > .monitor-dashboard-screens > div > .card > .card-body table tr th:nth-of-type(2) {
        width: 10rem;
        text-align: left;
    }

#MonitorDashboardPanel #reportdashboard table tr td:first-child, #MonitorDashboardPanel #reportdashboard table tr th:first-child, #MonitorDashboardPanel .report-view table tr td:first-child, #MonitorDashboardPanel .report-view table tr th:first-child {
    font-weight: bold;
    border-right: solid 1px #e9e9e9;
    text-align: left;
}

#MonitorDashboardPanel #reportdashboard table tr td, #MonitorDashboardPanel #reportdashboard table tr th, #MonitorDashboardPanel .report-view table tr td, #MonitorDashboardPanel .report-view table tr th {
    text-align: right;
    padding: 0.2rem 0.5rem;
}

/* Client Cache Report tab: the Statistics page's table look, full width, one row per client cache;
   the body scrolls on its own once it is taller than about 18 rows */
#MonitorDashboardPanel #clientcachereport > .monitor-dashboard-screens > div > .card > .card-body {
    padding: 0.6rem;
    overflow: auto;
    min-height: 20rem;
}

#MonitorDashboardPanel #clientcachereport table {
    table-layout: fixed;
    width: 100%;
    margin-bottom: 0;
}

    #MonitorDashboardPanel #clientcachereport table thead, #MonitorDashboardPanel #clientcachereport table tbody {
        display: block;
    }

    #MonitorDashboardPanel #clientcachereport table tbody {
        max-height: 38rem;
        overflow-y: auto;
    }

    #MonitorDashboardPanel #clientcachereport table thead tr, #MonitorDashboardPanel #clientcachereport table tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #MonitorDashboardPanel #clientcachereport table th, #MonitorDashboardPanel #clientcachereport table td {
        vertical-align: middle;
        padding: 0.4rem 0.5rem;
        text-align: left;
    }

    #MonitorDashboardPanel #clientcachereport table th, #MonitorDashboardPanel #clientcachereport table td:first-child {
        font-weight: bold;
    }

    #MonitorDashboardPanel #clientcachereport table th:first-child, #MonitorDashboardPanel #clientcachereport table td:first-child {
        width: 14%;
    }

    /* shading starts on the heading row and alternates from there */
    #MonitorDashboardPanel #clientcachereport table thead th {
        background-color: #ddd;
    }

    #MonitorDashboardPanel #clientcachereport table.table-striped tbody tr:nth-of-type(odd) {
        background-color: transparent;
    }

    #MonitorDashboardPanel #clientcachereport table.table-striped tbody tr:nth-of-type(even) {
        background-color: rgba(0, 0, 0, 0.05);
    }

#MonitorDashboardPanel .report-counter-drop-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96%;
    height: 95%;
    border: solid 0.2rem #ccc;
    font-size: x-large;
    color: #666;
    position: absolute;
    background: rgba(255,255,255,0.8);
}

#MonitorDashboardPanel .graphical-counter-drop-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 99%;
    height: 99%;
    border: solid 0.2rem #ccc;
    font-size: x-large;
    color: #666;
    position: absolute;
    background: rgba(255,255,255,0.8);
    z-index: 1;
}

.nav-link.show img.icon-img {
    display: inline;
}

.nav-link img.icon-img {
    display: none;
}

/*
    responsiveness
*/

@media (max-width: 768px) {

    #MonitorDashboardPanel .nav-pills {
        position: unset !important;
        width: 99% !important;
    }

    #MonitorDashboardPanel .monitor-tab-content {
        margin-top: 1rem !important;
    }

    .new-dashboard, .custom-view, .monitor-test-stress {
        left: -50%;
    }

    #MonitorDashboardPanel .monitor-dashboard-screens > div {
        width: 50% !important;
    }

    #MonitorDashboardPanel .report-view .monitor-dashboard-screens > div, .monitor-dashboard-screens > div[data-monitorid='c-process-stats'], .monitor-dashboard-screens > div[data-monitorid='system-alerts'], .monitor-dashboard-screens > div[data-monitorid='cluster-health'] {
        width: 100% !important;
        min-width: 100%;
    }

    #MonitorDashboardPanel .monitor-dashboard-screens .card .card-position-control {
        display: none;
    }

    #MonitorDashboardScreenCollapse {
        display: none;
    }

    .group-statistics thead th {
        padding: 0.2rem;
    }
}

@media (max-width: 425px) {
    #MonitorDashboardPanel .nav-pills {
        position: unset !important;
        width: 97% !important;
    }

    #MonitorDashboardPanel .monitor-dashboard-screens > div {
        width: 99% !important;
        min-width: 99%;
    }

    #NewDashboardBtnContainer {
        margin-right: 8rem !important;
    }
}

/* END - Monitor Style */

/* START - API Logs Table */

#MonitorDashboardPanel .api-logs {
    table-layout: fixed;
}

    #MonitorDashboardPanel .api-logs tbody {
        display: block;
        /*max-height: 17.2rem;*/
        overflow: auto;
        transition: height 0.15s ease-in-out;
    }

        #MonitorDashboardPanel .api-logs tbody:hover::-webkit-scrollbar-thumb, #MonitorDashboardPanel .api-logs tbody::-webkit-scrollbar-thumb:hover {
            background: #aaa;
        }

        #MonitorDashboardPanel .api-logs tbody tr th:nth-child(1), #MonitorDashboardPanel .api-logs tbody tr td:nth-child(1) {
            width: 7rem;
        }

        #MonitorDashboardPanel .api-logs tbody tr th:nth-child(2), #MonitorDashboardPanel .api-logs tbody tr td:nth-child(2) {
            width: 6rem;
        }

        #MonitorDashboardPanel .api-logs tbody tr th:nth-child(3), #MonitorDashboardPanel .api-logs tbody tr td:nth-child(3) {
            width: 6rem;
        }

        #MonitorDashboardPanel .api-logs tbody tr th:nth-child(4), #MonitorDashboardPanel .api-logs tbody tr td:nth-child(4) {
            width: 6rem;
        }

        #MonitorDashboardPanel .api-logs tbody tr th:nth-child(5), #MonitorDashboardPanel .api-logs tbody tr td:nth-child(5) {
            width: 6rem;
        }

        #MonitorDashboardPanel .api-logs tbody tr th:nth-child(6), #MonitorDashboardPanel .api-logs tbody tr td:nth-child(6) {
            width: 6rem;
        }

        #MonitorDashboardPanel .api-logs tbody tr th:nth-child(7), #MonitorDashboardPanel .api-logs tbody tr td:nth-child(7) {
            width: 6rem;
            display: none;
        }

        #MonitorDashboardPanel .api-logs tbody tr th:nth-child(8), #MonitorDashboardPanel .api-logs tbody tr td:nth-child(8) {
            width: 28rem;
            display: none;
        }

        #MonitorDashboardPanel .api-logs tbody::-webkit-scrollbar-thumb {
            background: #dee2e6;
        }

        #MonitorDashboardPanel .api-logs tbody::-webkit-scrollbar {
            width: 0.5rem;
            height: 0.5rem;
        }

        #MonitorDashboardPanel .api-logs thead, #MonitorDashboardPanel .api-logs tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            padding-left: 0.2rem;
        }

        #MonitorDashboardPanel .api-logs tbody tr {
            cursor: pointer;
        }

    #MonitorDashboardPanel .api-logs th {
        border-top: none;
        padding: 0;
        padding-bottom: 0.25rem;
        padding-left: 0.5rem;
    }

    #MonitorDashboardPanel .api-logs td {
        vertical-align: middle;
        padding: 0.5rem;
    }

/* END - API Logs Table */

/* START - New Dashboard  Create */

#newDashboardBtn, #customDashboardViewBtn, #StressTestButton {
    cursor: pointer;
}

    #customDashboardViewBtn.active, #newDashboardBtn.active, #StressTestButton.active {
        background-color: #e0e0e0;
    }

.new-dashboard, .custom-view {
    position: absolute;
    right: 0rem;
    z-index: 9990;
    width: 15rem;
    padding: 0.5rem;
    background-color: #f7f7f7;
    border: solid 1px #ccc;
    /*border-top: 0;*/
}


.monitor-test-stress {
    position: absolute;
    z-index: 9990;
    width: 16rem;
    padding: 0.4rem;
    background-color: #f7f7f7;
    border: solid 1px #ccc;
}

    .monitor-test-stress label {
        padding-right: 1rem;
        margin-left: 0.5rem;
    }

    .monitor-test-stress select {
        width: 9rem;
    }

.test-stress-statistics {
    position: absolute;
    margin-top: 2.3rem;
    z-index: 9990;
    width: 16rem;
    padding: 0.4rem;
    background-color: #f7f7f7;
    border: solid 1px #ccc;
    display: none;
    margin-left: 7.3rem
}

    .test-stress-statistics label {
        padding-right: 1rem;
        margin-left: 0.5rem;
    }

    .test-stress-statistics select {
        width: 9rem;
    }

.test-stress {
    position: absolute;
    z-index: 9990;
    width: 16rem;
    padding: 0.4rem;
    background-color: #f7f7f7;
    border: solid 1px #ccc;
    display: none;
}


    .test-stress label {
        padding-right: 1rem;
        margin-left: 0.5rem;
    }

    .test-stress select {
        width: 9rem;
    }

.test-stress-detail {
    position: absolute;
    z-index: 9990;
    width: 16rem;
    padding: 0.2rem;
    background-color: #f7f7f7;
    border: solid 1px #ccc;
    display: none;
    margin-top: 2.4rem;
}

    .test-stress-detail label {
        padding-right: 1rem;
        margin-left: 0.5rem;
    }

    .test-stress-detail select {
        width: 9rem;
    }


.test-stress-local {
    position: absolute;
    z-index: 9990;
    width: 16rem;
    padding: 0.2rem;
    background-color: #f7f7f7;
    border: solid 1px #ccc;
    display: none;
    margin-top: 2.4rem;
}

    .test-stress-local label {
        padding-right: 1rem;
        margin-left: 0.5rem;
    }

    .test-stress-local select {
        width: 9rem;
    }








.new-dashboard .form-control, .new-dashboard button, .custom-view .form-control, .custom-view button {
    padding: 0.4rem 0.3rem !important;
    height: auto !important;
    font-size: 13px;
}

.new-dashboard input, .custom-view input {
    padding: 0.1rem 0.3rem !important;
}

/* END - New Dashboard  Create */
/* START - Statistics */
#StatisticsView .monitor-dashboard-screens {
    margin-bottom: 1rem;
    min-height: 23rem;
}

    #StatisticsView .monitor-dashboard-screens > div {
        /*transition: all 0.1s linear;*/
    }

    #StatisticsView .monitor-dashboard-screens .card .card-header {
        padding: 0.2rem;
        background: transparent;
        border: 0;
    }

    #StatisticsView .monitor-dashboard-screens .card .screen-title {
        font-weight: bold;
        color: #2A3F54;
    }

    #StatisticsView .monitor-dashboard-screens .card .card-position-control {
        opacity: 0.5;
    }

        #StatisticsView .monitor-dashboard-screens .card .card-position-control:hover {
            opacity: 1.0;
        }

        #StatisticsView .monitor-dashboard-screens .card .card-position-control a {
            color: var(--gray);
        }

            #StatisticsView .monitor-dashboard-screens .card .card-position-control a:hover {
                color: var(--graydark);
            }

    #StatisticsView .monitor-dashboard-screens .card {
        border-radius: 0;
        border: 0;
        box-shadow: #aaa 0px 3px 10px;
        width: 100%;
    }

    #StatisticsView .monitor-dashboard-screens .quick-view {
        background-color: #f6f6f6;
        border: solid 1px #eee;
        display: flex;
        flex-direction: column;
        padding-bottom: 0.75rem;
    }

        #StatisticsView .monitor-dashboard-screens .quick-view .card {
            margin-top: 0;
            box-shadow: none;
            border: none;
            flex: 1;
        }

            #StatisticsView .monitor-dashboard-screens .quick-view .card .card-body {
                display: flex;
                align-items: center;
                justify-content: center;
            }


    #StatisticsView .monitor-dashboard-screens > div {
        transition: width 0.15s;
        padding: 0.5rem;
        display: flex;
    }

    #StatisticsView .monitor-dashboard-screens .chart-view {
        display: none;
    }

    #StatisticsView .monitor-dashboard-screens > div [data-col-size] {
        padding: 0.5rem;
        float: left;
    }

#StatisticsView .inner-card {
    box-shadow: unset !Important;
}

    #StatisticsView .inner-card .card-header {
        text-align: center;
    }

    #StatisticsView .inner-card .table {
        margin-bottom: 0;
        position: relative;
    }



        #StatisticsView .inner-card .table tbody td {
            padding: 0.5rem;
            vertical-align: middle;
        }

            #StatisticsView .inner-card .table tbody td:first-child {
                font-weight: bold;
                text-align: left;
            }

        #StatisticsView .inner-card .table tbody td {
            text-align: center;
        }

        #StatisticsView .inner-card .table tbody .lead-row th, #StatisticsView .inner-card .table tbody .lead-row td, #AddPerfmonPanel table tbody .lead-row th, #AddPerfmonPanel table tbody .lead-row td {
            border-top: none;
        }

#StatisticsView table, #AddPerfmonPanel table {
    table-layout: fixed;
}

    #StatisticsView table thead, #StatisticsView table tbody, #AddPerfmonPanel table thead, #AddPerfmonPanel table tbody {
        display: block;
        overflow: auto;
        transition: height 0.15s ease-in-out;
    }

        #StatisticsView table tbody:hover::-webkit-scrollbar-thumb, #StatisticsView table tbody::-webkit-scrollbar-thumb:hover, #AddPerfmonPanel table tbody:hover::-webkit-scrollbar-thumb, #AddPerfmonPanel table tbody::-webkit-scrollbar-thumb:hover {
            background: #aaa;
        }

        #StatisticsView table thead tr th, #StatisticsView table tbody tr td {
            width: 6rem;
        }

        #StatisticsView table thead tr th, #StatisticsView table tbody tr:hover {
            background-color: #ddd;
        }

        #StatisticsView table tbody::-webkit-scrollbar-thumb, #AddPerfmonPanel table tbody::-webkit-scrollbar-thumb {
            background: #aaa;
        }

        #StatisticsView table tbody::-webkit-scrollbar, #AddPerfmonPanel table tbody::-webkit-scrollbar {
            width: 0.5rem;
            height: 0.5rem;
        }

        #StatisticsView table thead, #StatisticsView table tbody tr, #AddPerfmonPanel table thead, #AddPerfmonPanel table tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            padding-left: 0.2rem;
        }

    #StatisticsView table th, #AddPerfmonPanel table th {
        border-top: none;
        padding: 0;
        padding-bottom: 0.25rem;
    }

    #StatisticsView table td, #AddPerfmonPanel table td {
        vertical-align: middle;
        padding: 0.2rem;
        text-align: right;
    }

        #StatisticsView table td:first-child, #AddPerfmonPanel table td {
            text-align: left;
        }

    #StatisticsView table tr img {
        width: 1rem;
        cursor: pointer;
        vertical-align: text-bottom;
        opacity: 0.3;
    }

    #StatisticsView table tr:hover img {
        opacity: 1;
    }

    #StatisticsView table td .hidden-title {
        color: rgb(170, 170, 170);
        font-style: italic;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70px;
        float: right;
        display: none;
    }

    #StatisticsView table td .stats {
        float: right;
    }

    #StatisticsView table td.highlight {
        background-color: #d9d9d9;
    }

    #StatisticsView table .lead-row, #AddPerfmonPanel table .lead-row {
        background: #e6e6e6;
        font-weight: bold;
        position: sticky;
        top: 0;
    }

#StatisticsView .report-view textarea[readonly], #StatisticsView .report-view textarea[readonly]:focus {
    background-color: white;
    border: none;
    box-shadow: none;
    resize: none;
}

/* END - Statistics */

/* START - Add Perfmon Counter */

#AddPerfmonPanel {
    margin-top: 2rem;
}

    #AddPerfmonPanel table {
        margin-bottom: 0;
        margin-top: 0.5rem;
    }

    #AddPerfmonPanel .perfmon-heading {
        font-weight: bold;
        margin-bottom: 0.2rem;
    }



    #AddPerfmonPanel select[multiple], #AddPerfmonPanel #CategorySelect {
        height: 18.8rem;
        overflow-y: auto;
        padding: 0;
        border-radius: 0;
    }

    #AddPerfmonPanel .row.disableEvents select[multiple], #AddPerfmonPanel .row.disableEvents #CategorySelect {
        background-color: #eee;
    }

    #AddPerfmonPanel table thead tr th, #AddPerfmonPanel table tbody tr td {
        width: 6rem;
        word-break: break-all;
        padding: 0.3rem;
    }

        #AddPerfmonPanel table thead tr th, #AddPerfmonPanel table tbody tr td:first-child {
            padding-left: 0;
        }

        #AddPerfmonPanel table thead tr th, #AddPerfmonPanel table tbody tr td:last-child {
            padding-right: 0;
        }

    #AddPerfmonPanel select[multiple] option, #AddPerfmonPanel #CategorySelect option {
        padding: 0.3rem;
    }

    #AddPerfmonPanel select[multiple]::-webkit-scrollbar, #AddPerfmonPanel #CategorySelect::-webkit-scrollbar {
        width: 0.5rem;
    }

    #AddPerfmonPanel select[multiple]::-webkit-scrollbar-track, #AddPerfmonPanel #CategorySelect::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    #AddPerfmonPanel select[multiple]::-webkit-scrollbar-thumb, #AddPerfmonPanel #CategorySelect::-webkit-scrollbar-thumb {
        background: #aaa;
    }

        #AddPerfmonPanel select[multiple]::-webkit-scrollbar-thumb:hover, #AddPerfmonPanel #CategorySelect::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

    #AddPerfmonPanel .modal-dialog {
        max-width: 75%;
    }

    #AddPerfmonPanel .loader {
        width: 1.2rem;
        height: 1.2rem;
        border-width: 0.2rem;
        animation: spin 1s linear infinite;
    }

/* END - Add Perfmon Counter */

.text-titleCase {
    text-transform: capitalize;
}

.h7 {
    font-size: 0.9rem;
}

.height1p5 {
    height: 1.5rem !important;
}

.btn .badge {
    top: -11px !important;
    left: -7px !important;
}

.badge {
    font-size: 66% !important;
    border-radius: 1.25rem !important;
}

.wh_16 {
    width: 16px;
    height: 16px;
}

.step-container-div {
    min-height: 22.5rem;
}


/*@media only screen and (min-width:45rem) and (orientation: portrait) {
    .step-container-div {
        height: 61.25rem;
    }
}

@media only screen and (min-width:48rem) and (orientation: portrait)  {
    .step-container-div {
        min-height: 48.75rem;
    }
}

@media only screen and (min-width:64rem) and (orientation: landscape) {
    .step-container-div {
        min-height: 32.5rem;
    }
}       
        
@media only screen and (min-width:80rem){
    .step-container-div {
        min-height: 23.75rem;
    }
}

@media only screen and (min-width:85.375rem) {
    .step-container-div {
        min-height: 22.5rem;
    }
}       
        
@media only screen and (min-width:90rem){
    .step-container-div {
        min-height: 32.5rem;
    }
}       
        
@media only screen and (min-width:103.75rem){
    .step-container-div {
        min-height: 43.75px;
    }
}

@media only screen and (min-width:120rem) {
    .step-container-div {
        min-height: 50px;
    }
}*/



/* START - Help panal  and Drawer */




.help .header-custom {
    padding: 7px;
}


.help {
    padding: 0px;
    margin: 0px;
    font-size: 13px !important;
    width: 25%;
    height: 100%;
    /*border: solid 1px #aaa;*/
    position: fixed;
    right: 0;
    z-index: 10000;
    background: white;
    box-shadow: #666 0rem 0.5rem 1rem;
}

@media (max-width: 768px) {
    .help {
        width: 100%;
    }
}

.help .help-header h3 {
    font-size: large;
}

.help #helpdata .close-btn {
    margin: -0.5rem 0rem;
    opacity: 0.5;
}

    .help #helpdata .close-btn:hover {
        opacity: 1;
    }

    .help #helpdata .close-btn img {
        width: 0.8rem;
    }

.help .help-header a {
    cursor: pointer;
}

.help #helpdata {
    margin: 0;
    max-height: 83%;
    overflow: auto;
}


    .help #helpdata::-webkit-scrollbar {
        width: 0.4rem;
    }

    .help #helpdata::-webkit-scrollbar-thumb {
        border-radius: 1rem;
        background-color: #ccc;
    }

.help .list-group {
    max-height: 276px;
    overflow: auto;
}

    .help .list-group .list-group-item {
        padding: .4rem 1rem;
        background-color: transparent;
    }

        .help .list-group .list-group-item:hover {
            color: unset;
        }

        .help .list-group .list-group-item.inbx_unread:hover {
            background-color: #e1f5ff;
        }

        .help .list-group .list-group-item.inbx_unread {
            background-color: #f1faff;
            color: #333;
            font-weight: bold;
        }

        .help .list-group .list-group-item .message {
            float: left;
            /*width: 95%;*/
            text-align: justify;
            line-height: 1rem;
        }

        .help .list-group .list-group-item .close-btn {
            float: right;
            padding: 0.1rem 0.3rem;
            text-align: right;
            background-color: #ddd;
            margin-left: 0.5rem;
            margin-bottom: 0.5rem;
            border-radius: 0.2rem;
        }

            .help .list-group .list-group-item .close-btn:hover {
                background-color: #E00;
                color: #fff;
            }

.help-btn {
    background-color: transparent;
    color: #999;
    transition: none;
}

    .help-btn.active {
        background-color: #121c27;
    }

    .help-btn:focus {
        box-shadow: unset;
    }

.help-btn-container {
    transition: all 0.15s;
}


    .help-btn-container.active, .help-btn-container:hover {
        color: white !important;
    }

.help-btn.active, .help-btn:hover {
    color: white !important;
}

.help-btn .badge, .help-btn .badge {
    background-color: var(--light);
    color: var(--dark);
}

.help-btn:hover .badge, .help-btn.active .badge {
    background-color: var(--light);
    color: var(--dark);
}

.help a {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    margin-left: 2.3rem;
    color: blue;
}

    .help a:hover, a:focus {
        color: #f58555;
    }

.helpcontent {
    margin-top: 1.5rem !important;
}

    .helpcontent .btn-link {
        font-size: 13px !important;
        border: 1px solid tan !important;
        color: blue !important;
    }

        .helpcontent .btn-link:hover {
            color: #f58555 !important;
            text-decoration: none !important;
        }




.step1Configure {
    /* border-left: 4px solid #73879C;*/
    margin-top: 20px;
    margin-bottom: 20px;
}

.step2Configure {
    /*   border-left: 4px solid #73879C;*/
    margin-top: 20px;
    margin-bottom: 20px;
}

.step2Configure {
    display: none; /* Start with Card2 hidden */
    transition: opacity 0.5s ease; /* Add transition for opacity */
}

/* Add styles to separate the steps visually */

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

/* Style each item in the dropdown list */
.ui-menu-item {
    padding: 2px 3px;
    cursor: pointer;
}

/* Style the selected item in the dropdown list */
.ui-state-active,
.ui-state-focus {
    background-color: #ccc;
    color: black;
}

/* Style the input field */
.ui-autocomplete-input, .ui-menu-item-wrapper {
    padding: 6px 12px;
    border-bottom: 1px solid #ccc;
}
/* Style for the highlighted letters in the suggestions */
.highlighted {
    background-color: black;
    font-weight: bold;
}

.suggestion-item {
    border: 1px solid #73879C;
}

.login-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.login-form {
    width: 440px;
    padding: 30px 20px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.login-form .logo {
    text-align: center;
}

.login-form .logo img {
    max-width: 100%;
}

.login-form .form-group {
      position: relative;
      margin-bottom: 20px;
}

.login-form .form-group .icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 10px;
}

.login-form .form-control {
        padding-left: 40px;
        margin-top:25px;
}

.login-button {
    margin-top:5px;
    padding: 10px 20px;
    width: 100%;
    background-color: #2a3f54;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
    font-weight: 500;
}

.login-button:hover {
        background-color: #1d2d3c;
    }

.login-button:active {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.login_LockIcon {
    width: 16px;
    height: 13px;
}

.loginHeading {
    font-size: 24px !important;
    font-weight: 400 !important;
    color: black !important;
    text-align: center !important;
    margin-bottom: 20px;
}
.loginError {
    margin-top: 25px !important;
    
    font-size:15px;
    text-align:justify;
}
.login_username {
    font-size: 15px;
    align-self: center;
    color: white;
    font-weight: 500;
    transition: all 0.15s;
}
.profile-circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease-in-out;
    background-color: #ffffff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-right: 5px;
    cursor: pointer;
    margin-top: 9px;
    margin-left: 14px;
}

.dropdown-menu {
    box-shadow: #666 0rem 0.5rem 1rem;
    width: 263px;
}


    .dropdown-menu .user-info {
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem;
        justify-content: center;
    }

.username {
    margin-left: 10px;
    font-weight: bold;
}

/* Keep the default Bootstrap active color */
.dropdown-item:active {
    background: #e5e5e5;
    !important;
    color: black;
}

.detail-profile-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0px 0px 10px #7daee4;
    transition: background-color 0.3s ease-in-out;
    background-color: #2a3f54;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.dropdown-username {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #e3dbdb;
    padding-bottom: 20px;
}

.dropdown-logout {
    margin-top: 7px;
    cursor: pointer;
    color: black;
    font-weight: 500;
}