.ui-mobile.dark {
    --background-color: #172A46;
    --nav-bg-color: #0A192F;
    --light-bg: #444964;
    --dark-bg: #141C35;
    --border-color: #767C94;
    --text-color: #ccd6f6;
    --text-white: #ffffff;
    --text-gray: #808080;
}

.dark body {
    color: var(--text-color) !important;
    background: var(--background-color) !important;
}

.dark .ui-overlay-a,
.dark .ui-page-theme-a,
.dark .ui-page-theme-a .ui-panel-wrapper {
    background-color: var(--background-color) !important;
    border: none !important;
    color: var(--text-color) !important;
    text-shadow: none !important;
}

.dark .header-main-div,
.dark .mainFooter {
    background-color: var(--dark-bg) !important;
    color: var(--text-color) !important;
}

/* Menu Bar */
.dark .header-div > .header-ul > .menuActive {
    background-color: var(--dark-bg) !important;
}

.dark .header-div > .header-ul > .menuActive a {
    color: #ff3434 !important;
}

.dark .header-menu-box a:hover,
.dark .header-menu-box:hover {
    color: #ff3434 !important;
    background: transparent !important;
}

.dark .header-div{
    background-color: var(--background-color) !important;
}

.dark .header-menu-box a{
    color: var(--text-color) !important;
}
/* Menu Bar END*/
.dark .ui-alt-icon.ui-icon-bars:after,
.dark .ui-alt-icon .ui-icon-bars:after,
.dark .ui-alt-icon.ui-icon-user:after,
.dark .ui-alt-icon .ui-icon-user:after,
.dark .ui-alt-icon.ui-icon-home:after,
.dark .ui-alt-icon .ui-icon-home:after {
    background-color: var(--text-color) !important;
}

.dark .leftMenu,
.dark .admin-button a,
.dark .admin-button {
    background-color: var(--dark-bg) !important;
}

.dark .admin-button a {
    color: var(--text-color) !important;
}

.dark .header-menu-box-inner {
    border: 1px solid var(--border-color);
    background: var(--dark-bg);
}

.dark .header-menu-box-inner ul li:hover .header-menu-hover {
    background: var(--background-color) !important;
    color: Red !important;
}

.dark .box {
    background: var(--background-color);
    box-shadow: none;
}

.dark .box:hover {
    background: var(--background-color) !important;
    box-shadow: 5px 5px 5px 0 #606165 !important;
}

.dark .box div h4 {
    color: var(--text-color);
}

/* All Input Box */
.dark .ui-input-text input,
.dark .ui-input-search input,
.dark textarea{
    color: var(--text-color) !important;
    background: var(--background-color) !important;
    border: 1px solid var(--text-white);
    text-shadow: none !important;
}

.dark .ui-page-theme-a .ui-body-inherit {
    background-color: unset;
    border-color: unset;
}

.dark input[type=text]:disabled,
.dark input[type=tel]:disabled,
.dark textarea[readonly],
.dark textarea[readonly]:hover {
    background-color: var(--background-color) !important;
    color: var(--text-gray) !important;
    border-color: var(--text-gray) !important;
    cursor: no-drop !important;
}
/* All Input Box END */

/* Dialog Box */
.dark .ZebraDialog .ZebraDialog_Title {
    color: var(--text-color);
    background: var(--dark-bg);
}

.dark .ZebraDialog .ZebraDialog_BodyOuter {
    background: var(--background-color);
}

.dark .ZebraDialog .ZebraDialog_Body {
    color: var(--text-color);
}

.dark .ZebraDialog .ZebraDialog_ButtonsOuter {
    background: var(--dark-bg);
    padding: 10px 5px 10px 10px;
}
/* Dialog Box END*/


.dark .ui-page-theme-a .ui-select .ui-btn {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    text-shadow: none !important;
}

.dark .ui-select .ui-btn select {
    background: var(--background-color) !important;
    color: var(--text-color);
}

.dark .ui-icon-carat-d:after {
    background-color: transparent !important;
}

.dark table,
.dark table tbody {
    color: var(--text-color);
    background: var(--dark-bg);
}

.dark table thead {
    background: var(--light-bg);
    color: var(--text-white);
}

/* Manufacture */
.dark .ui-page-theme-a .ui-btn {
    background-color: var(--nav-bg-color);
    border-color: #ddd;
    color: var(--text-color);
    text-shadow: none !important;
}

.dark .ui-btn.ui-checkbox-off:after,
.dark .ui-btn.ui-checkbox-on:after,
.dark .ui-btn.ui-radio-off:after,
.dark .ui-btn.ui-radio-on:after {
    background: var(--light-bg);
}

.dark .ui-page-theme-a .ui-btn-active {
    background: #38c;
    border-color: #38c;
    color: #fff;
}

.dark .dropdown-menu {
    background-color: var(--dark-bg);
    box-shadow: 0 0 15px 0px #00000087;
}

.dark .bucket-round-corner.div-resource-inner {
    background: var(--background-color) !important;
    box-shadow: inset -3px -6px 46px 0 var(--dark-bg) !important;
}


/* Calendar Styles */
.dark .ui-datepicker select.ui-datepicker-month,
.dark .ui-datepicker select.ui-datepicker-year {
    background: var(--dark-bg);
    color: var(--text-color);
}

.dark .ui-state-default,
.dark .ui-widget-content .ui-state-default,
.dark .ui-widget-header .ui-state-default {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: var(--dark-bg);
    color: var(--text-color);
}

.dark .ui-state-hover,
.dark .ui-widget-content .ui-state-hover,
.dark .ui-widget-header .ui-state-hover,
.dark .ui-state-focus,
.dark .ui-widget-content .ui-state-focus,
.dark .ui-widget-header .ui-state-focus {
    border: 1px solid #49abff;
    background: #007fff;
    color: #ffffff;
}

.dark .ui-datepicker-calendar tbody,
.dark .ui-widget-content,
.dark .ui-widget-header {
    background: var(--background-color);
    color: var(--text-color);
}

.dark .ui-widget-header {
    border: none;
}
.dark .ui-state-active,
.dark .ui-widget-content .ui-state-active,
.dark .ui-widget-header .ui-state-active {
    background: #007fff !important;
}
/******Calendar Styles END***********/

.dark table tbody tr {
    background: var(--dark-bg);
}

.dark tr[style="background-color: white;"], 
.dark tr[style="background-color: whitesmoke;"] {
    background-color: var(--dark-bg) !important;
}

.dark tr[style="background-color: yellow;"],
.dark tr[style="background-color: skyblue;"],
.dark tr[style="background-color: orange;"],
.dark tr[style="background-color: pink;"],
.dark tr[style="background-color:LightGray"],
.dark tr[style="background-color:LightGreen"] {
    color: #000 !important;
}

.dark tr.row-active {
    background-color: #87ceeb !important;
    color: #000 !important;
}

.dark .bucket-round-corner.div-resource-inner.filled-box {
    background: linear-gradient(to bottom,#82c4e4 0,#82c4e4 50%,#82c4e4 100%) !important;
    color:#000 !important;
}


/*scrollbar styles*/
.dark ::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    cursor: pointer;
}

.dark ::-webkit-scrollbar-track {
    border-radius: 10px;
    background: var(--dark-bg) !important;
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--light-bg) !important;
    border-radius: 10px;
}
/*autofill input color-profile styles*/
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active,
.dark select:-webkit-autofill,
.dark select:-webkit-autofill:hover,
.dark select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px var(--dark-bg) inset !important;
    -webkit-text-fill-color: var(--text-color) !important;
}

.dark #divMainNotificationContent {
    background-color: var(--background-color);
}

.dark #notification-back-btn {
    background: var(--background-color);
}

.dark .mobile-notification {
    background: var(--dark-bg);
}

@media (min-width: 900px){
    .dark .table-bordered thead {
        width: 100%;
    }
}