.dark {
    --background-color: #172A46;
    --nav-bg-color: #0A192F;
    --light-bg: #444964;
    --dark-bg: #141C35;
    --hover-bg: #292f49;
    --skyblue-bg: rgba(128, 212, 255,0.4);
    --box-header-bg: #2c3760;
    --table-striped-bg: rgba(25,36,71,0.70);
    --border-color: #767C94;
    --text-color: #ccd6f6;
    --text-white: #ffffff;
}

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

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

.dark input[id^="txt"],
.dark input[type="text"],
.dark input[type="search"],
.dark input[type="password"],
.dark select,
.dark textarea,
.dark div[title="Select"],
.dark input.form-control {
    color: var(--text-color) !important;
    background: var(--dark-bg) !important;
} 

.dark body,
.dark .cke_inner,
.dark iframe body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders {
    color: var(--text-color) !important;
    background: var(--background-color) !important;
}

/*.dark input[type="submit"],
.dark input[type="button"] {
    border: 2px solid ;
    border-color: var(--border-color) !important;
}

.dark input[type="submit"]:hover,
.dark input[type="button"]:hover {
    color: #0089d4 !important;
    border-color: #0089d4 !important;
}*/

.dark .nav-item.active .nav-link {
    background: var(--nav-bg-color) !important;
}
.dark .nav-item.active .nav-link:hover {
    color: var(--text-color) !important;
}

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

.dark .menulist toggle-ul-ipas-hover,
.dark .toggle-div-mydesign,
.dark .ipas-header-color {
    background-color: var(--nav-bg-color) !important;
}

.dark .master-body {
    background-color: var(--background-color);
    color: #ccd6f6;
}

.dark .search-block,
.dark .down-up-block,
.dark .download-block {
    box-shadow: 10px 30px 41px 20px rgb(255 255 255 / 22%);
    background: rgba(10, 25, 47, 0.9) !important;
}

.dark .toggle-ul-ipas li {
    background-color: var(--nav-bg-color);
}

.dark .toggle-ul-ipas li a,
.dark .super-admin ul li a,
.dark .nav-tabs .nav-link {
    color: var(--text-color);
}

.toggle-ipas-admin li a:hover,
.toggle-ipas-admin:hover{
    color: red !important;
}

.dark .toggle-ul-ipas li.active {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.dark .nav-tabs .nav-link.active {
    color: var(--text-color);
    background-color: var(--dark-bg);
}

/*.dark .btn.btn-primary {
    color: var(--text-color) !important;
    /*background: linear-gradient(rgb(42,46,69), rgb(0,25,124), rgb(32,23,45)) !important;
    background: #34006c !important;
    background: rgba(10,25,47,0.9) !important;
}
*/

.dark .btn-primary-outline {
    background: linear-gradient(to bottom, var(--light-bg), var(--dark-bg)) !important;
    color: var(--text-color) !important;
    border: 1px solid #878787;
    transition: .2s;
}

.dark .btn-primary-outline:hover {
    transform: scale(1.05);
    border-color: var(--text-color);
    box-shadow: 0 0 4px var(--text-color);
}

.dark .table-desc {
    border: 1px solid var(--text-color);
    background-color: transparent;
}

.dark .table thead th {
    color: white !important;
    background: var(--light-bg) !important;
    border: 1px solid var(--dark-bg);
}

.dark .table-section td {
    border: 1px solid var(--background-color);
    border-bottom: 1px solid var(--background-color) !important;
    color: var(--text-color);
    background: var(--dark-bg) !important;
}

.dark .table-with-heading .table-side-box-heading,
.dark .table-responsive .table-side-box-heading {
    border: 1px solid var(--text-color);
}

.dark .pagination ul > li > a,
.dark .pagination ul > li > span {
    background-color: var(--light-bg);
    color: var(--text-white);
}

.dark #footer {
    color: var(--text-color);
    background-color: var(--nav-bg-color) !important;
}



/************* Preweigh Index Page Styles*/


/*.dark .master-body {
    background-color: #0A192F;
}
*/

.dark .label-margin {
    color: #fff;
}

.dark .label-size {
    color: var(--text-color);
}

.dark .outer-rect-orange,
.dark .outer-rect-blue,
.dark .outer-rect-lightblue,
.dark .outer-rect-dark-org {
    background-color: var(--background-color);
    /*border: 1px solid #CCD6F6;*/
    border-radius: 10px;
    transition: .3s;
}

.dark .outer-rect-orange:hover,
.dark .outer-rect-blue:hover,
.dark .outer-rect-lightblue:hover,
.dark .outer-rect-dark-org:hover {
    box-shadow: 5px 5px 5px 0 #606165 !important;
}

.dark table {
    background: var(--dark-bg) !important;
}

.dark .calendar-row-td-style {
    background: transparent !important;
}

.dark .table-content-style {
    background: var(--background-color) !important;
}


/*.dark .btn {
    background: linear-gradient(to bottom,#6bbbff,#76d2ff) !important;
}*/

.dark .p-instructions,
.dark .well,
.dark .info-block,
.dark .table-striped tbody tr:nth-of-type(odd),
.dark table:nth-child(4n-1),
.dark tr:nth-child(4n-3),
.dark tr:nth-child(odd) {
    background: var(--dark-bg) !important;
}

.dark .well {
    box-shadow: none !important;
}

.dark .table .table-striped {
    background: var(--table-striped-bg) !important;
}

.dark thead tr {
    color: var(--text-color);
}

.dark .nav > li > a:focus,
.dark .nav > li > a:hover {
    background: var(--hover-bg) !important;
}

.dark .black {
    color: var(--text-white) !important;
}

.dark .table-bordered td {
    border: 1px solid #525252 !important;
}

.dark .table-bordered tr {
    background: var(--dark-bg) !important;
    border: 1px solid #525252 !important;
}

.dark .box {
    background: var(--nav-bg-color);
    box-shadow: none !important;
}

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

.dark .lside-box,
.dark .rside-box {
    box-shadow: none !important;
}

/* staging > configure kanban > configure kanban bins */
.dark .k-full-modules .tab-content {
    background: var(--background-color) !important;
}

.dark .k-outerDiv {
    background: var(--dark-bg) !important;
}

.dark .k-bin-materialDiv {
    color: var(--text-color) !important;
    background-color: var(--background-color) !important;
}

.dark .k-upperDiv {
    background-color: var(--nav-bg-color);
}

.dark .wrapper-dropdown {
    color: inherit;
}

.dark #searchBlock input {
    border: 1px solid var(--text-color) !important;
    background: transparent !important;
}

.dark .list-group-item {
    background: var(--dark-bg) !important;
}

.dark .select2-dropdown {
    background-color: var(--background-color);
    color: var( --text-color);
}

.dark .select2-container--default .select2-selection--single {
    color: var(--text-color) !important;
    background: var(--dark-bg) !important;
}

.dark .select2-container--default .select2-selection--single span {
    color: var(--text-color) !important;
}

.dark .functiondropdown {
    background: var(--dark-bg) !important;
    box-shadow: none !important;
    color: var(--text-color) !important;
}

.dark td.bg-red {
    background: #f03211 !important;
}

.dark .table-side-box-heading {
    background: #2c3760 !important;
}

.dark .information-block,
.dark .information-block-two {
    background: var(--dark-bg) !important;
    color: var(--text-color) !important;
}

.dark .table tbody tr.info > td {
    background-color: var(--background-color) !important;
}


/* manufacture > confirm bulk */

.dark .bg-graylighter {
    border-top: none !important;
    background: var(--background-color) !important;
}

.dark .custom-gradient-two {
    background: var(--background-color) !important;
    color: var(--text-color) !important;
    border-bottom-color: #9df !important;
}

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

.dark .modal-content {
    padding-top: 10px;
    background: var(--dark-bg) !important;
    border: 1px solid var(--border-color);
}

.dark button.close {
    color: #ff4d4d !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.dark .dropdown-menu {
    color: var(--text-color) !important;
    background: var(--dark-bg) !important;
    border-color: var(--border-color) !important;
}

.dark .custom-gradient {
    background-color: var(--nav-bg-color) !important;
}

.dark .drpdownbody {
    background-color: var(--dark-bg) !important;
}

.dark .dropdown-menu > li > a {
    color: var(--text-color) !important;
}

.dark fieldset.col-xs-12.p-x-0.push-up.info-block.bottom-gap {
    color: var(--text-color);
}

.dark .col-xs-12.info-block.bottom-gap {
    color: var(--text-white);
}

.dark .bottom-gap.table-responsive.heading-gap {
    color: var(--text-color);
}


/*calender styles*/

.dark .ui-state-default,
.dark .ui-widget-content .ui-state-default,
.dark .ui-widget-header .ui-state-default {
    color: #fff;
    text-align: center;
    background: var(--nav-bg-color);
}

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

.dark .ui-state-active, .dark .ui-widget-content .ui-state-active {
    background-color: #0089d4 !important;
}
/*   Calendar   */
.dark .ui-datepicker .ui-datepicker-header {
    background: var(--background-color) !important;
}

.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 {
    background: #0089d4 !important;
    color: var(--text-white) !important;
}

.dark .ui-state-highlight,
.dark .ui-widget-content .ui-state-highlight,
.dark .ui-widget-header .ui-state-highlight {
    background: #42579c !important;
    border: none;
}
/*calender styles ended*/


.dark .section-box, .dark .custom-gradient {
    background: var(--background-color) !important;
}

.dark .section-box .box-heading {
    background: var(--background-color) !important;
}

.dark .label-border1 {
    background: var(--dark-bg) !important;
}

.dark .heading-color {
    background: var(--dark-bg);
    border: 1px solid var(--text-color);
}

.dark input[type="text"]:disabled {
    border-color: var(--light-bg) !important;
    cursor: no-drop !important;
    color: gray !important;
}

.dark input:not(.btn):disabled,
.dark input[readonly],
.dark select[disabled],
.dark select[readonly],
.dark textarea[disabled],
.dark textarea[readonly] {
    background-color: var(--dark-bg) !important;
}

.dark input[name="fileupload"]{
    background: var(--dark-bg) !important;
}

.dark .pagination ul > li > a.active {
    background-color: #0089d4 !important;
}
.dark .popover,
.dark .popover-title{
    background: var(--dark-bg) !important;
}
.dark .popover{
    border: 2px solid var(--text-color) !important;
}

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

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

.dark .popover-content {
    background: var(--dark-bg) !important;
    color: var(--text-color) !important;
}


.dark .n-sendmail-content{
    background: var(--dark-bg);
}

.dark .btn-cancel {
    background: #ba2933 !important;
}
.dark .btn-cancel:hover {
    background-color: #f00010 !important;
}

.dark .btn-success {
    background: #00b851 !important;
}
.dark .btn-success:hover {
    background: #008038 !important;
}


/* Dialog Box Style */
.dark div#confirmModal {
    background: var(--dark-bg) !important;
    color: var(--text-color) !important;
}

.dark .ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix {
    background: var(--dark-bg) !important;
    margin: auto;
}

.dark .ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle {
    background: var(--dark-bg);
}
/*---------------*/


.dark .bin-loc_color{
    background: transparent !important;
}

.dark .pro-plan .dropdown-menu li:hover {
    background: var(--background-color);
    color: var(--text-white);
}

.dark .bg-white,
.dark .m-info-borders {
    background: var(--dark-bg) !important;
    color: var(--text-color) !important;
}

.dark .ui-widget-content,
.dark .ui-widget-header {
    background: var(--dark-bg) !important;
    color: var(--text-color) !important;
}

.dark .bg-lightblue {
    background: var(--backgroud-color) !important;
}

.dark .table.heading-gap.scroll-y {
    background: transparent;
}
.dark a#btnPrevious , .dark a#btnNext {
    background: var(--background-color) !important;
    border: 1px solid var(--text-color);
}
.dark .p-listing .c-newphase {
    background: var(--dark-bg);
}

.dark .box-shadow {
    box-shadow: none;
}

.dark .label-heading {
    background: var(--dark-bg);
}

.dark .breadcrumb {
    background-color: var(--background-color) !important;
    background-image: none !important;
}

label.form-control-label.nomarginleft.labelname{
    color:var(--text-color) !important;
}

.dark .searchbox {
    background: var(--dark-bg) !important;
    background-image: none;
    border-style: none;
}

.dark .ui-dialog .ui-dialog-content {
    color: var(--text-color) !important;
    background: var(--dark-bg) !important;
}

.dark .n-attachtem-body .n-rect {
    background: var(--background-color);
}

.dark .table-green-box-heading.row {
    background: var(--dark-bg) !important;
    color: var(--text-color) !important;
    border: none;
}

.dark .imgmouseover .imgmouseovercontent {
    background: var(--dark-bg) !important;
}

.dark .imgmouseover .imgmouseoverheading {
    background: var(--background-color) !important;
}

.dark .info-block-custom {
    background: var(--background-color) !important;
}

.dark .bg-graylight {
    background: var(--dark-bg) !important;
    color: inherit !important;
    border: 1px solid var(--light-bg);
}

.dark .cust-nav > .nav-tabs > .nav-item > .active {
    color: var(--text-color) !important;
}

.dark .regional-content, .dark .site-label, .dark .site-block {
    background:var(--dark-bg) !important;
}

.dark div#divPopOverPosition {
    color: var(--text-color) !important;
    background: var(--dark-bg) !important;
}

.dark .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #5897fb;
}
/*user profile styles*/
.dark .super-admin-toggle li a {
    color: var(--text-color) !important;
}

.dark .super-admin-toggle {
    background-color: var(--dark-bg) !important;
}

.dark .super-admin-toggle li:hover .super-admin-atag {
    color: #fff;
    background-color: var(--background-color) !important;
}
/*user profile styles ended*/

.dark .mul-select {
    background-color: var(--background-color);
}

.dark .dropdown-item:hover {
    color: var(--text-color);
    background-color: var(--background-color);
}
.dark .dropdown-item{
    color:var(--text-color) !important;
}

.dark .table {
    background: var(--dark-bg) !important;
}

.dark .btn-primary:disabled, .dark .btn-gray-disable {
    background-color: transparent !important;
    border-color: #c6c6c6 !important;
    color: #fffcfc !important;
}

.dark .table-striped tbody tr:nth-of-type(even) {
    background: var(--table-striped-bg) !important;
}

.dark .remote {
    background: var(--dark-bg) !important;
}

.dark .ui-priority-secondary,
.dark .ui-widget-content .ui-priority-secondary,
.dark .ui-widget-header .ui-priority-secondary {
    background-color: var(--dark-bg) !important;
}

.dark .label-heading {
    color: var(--text-color) !important;
}

.dark .btn-secondary.active,
.dark .btn-secondary:active {
    color: var(--text-color) !important;
    background: linear-gradient(var(--dark-bg), var(--background-color)) !important;
}

.dark .btn-secondary.active:focus,
.dark .btn-secondary.active:hover {
    color: var(--text-white) !important;
    background: var(--light-bg) !important;
}

.dark .toggle-ul-ipas li.active a {
    color: #ff3434;
}

.dark .toggle-ul-ipas li:hover a {
    color: red !important;
    background: transparent !important;
}

.dark table tbody th{
    background : var(--light-bg) !important;
    color: var(--text-white)!important;
}

.dark .calendar-table .table th {
    color: var(--text-white) !important;
}

.dark .nav-tabs .nav-link.active {
    color: var(--text-color) !important;
    background-color: var(--dark-bg) !important;
}

.dark .nav-tabs > .active > a {
    color: var(--text-color);
    background-color: var(--dark-bg) !important;
    border-bottom-color: transparent !important;
    cursor: default;
    border: 1px solid var(--text-color);
}

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

.dark .btn-secondary {
    color: var(--text-color);
    background-color: var(--dark-bg);
    border-color: #ccc;
}

.dark .ui-widget-header {
    background: var(--dark-bg) !important;
}

.dark .pane--table2{
    background: var(--background-color) !important;
}

/*popup close button styles*/
.dark .modal.cust .close {
    color: var(--text-color);
    text-shadow: none !important;
    opacity: 1;
}

.dark .modal.cust .close .text {
    color: var(--text-color) !important;
    text-shadow: none !important;
    opacity: 1;
}

/*scrollbar styles*/
.dark ::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border-radius: 10px;
    background: var(--dark-bg) !important;
}

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

.dark ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--light-bg);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

.dark ::-webkit-scrollbar-button:single-button {
    width: 15px;
    height: 15px;
    border-style: solid;
    background: var(--dark-bg);
}

.dark ::-webkit-scrollbar-button:single-button:hover {
    background: var(--light-bg);
}

/* Scrollbar Up Arrow Button */
.dark ::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #9a9fba transparent;
}
/* Scrollbar Down Arrow Button */
.dark ::-webkit-scrollbar-button:single-button:vertical:increment {
    border-width: 8px 8px 0 8px;
    border-color: #9a9fba transparent transparent transparent;
}
/* Scrollbar Left Arrow Button */
.dark ::-webkit-scrollbar-button:single-button:horizontal:decrement {
    border-width: 8px 8px 8px 0;
    border-color: transparent #9a9fba transparent transparent;
}
/* Scrollbar Right Arrow Button */
.dark ::-webkit-scrollbar-button:single-button:horizontal:increment {
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #9a9fba;
}


/*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;
}

/*managetruck navabr icon styles*/
.truck-nav {
    right: 7% !important;
}


/* Default Button */
.dark .btn-default {
    color: var(--text-color) !important;
    background: linear-gradient(to bottom, var(--light-bg), var(--dark-bg)) !important;
    text-shadow: none !important;
    transition: 0.3s;
    border: 1px solid #878787;
}

.dark .btn-default:hover {
    transform: scale(1.05);
    border-color: var(--text-color);
    box-shadow: 0 0 4px var(--text-color);
}
.dark .table-bordered {
    border-left: 1px solid #cdd2d2 !important;
}

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

/* For Checkbox Table*/

.dark table.checkbox,
.dark table.checkbox tbody tr{
    background: transparent !important;
}

/*icons and text white*/

.dark .fa-trash-o:before,
.dark .fa-edit:before,
.dark .fa-pencil-square-o:before {
    color: var(--text-white) !important;
}

.dark .i-action {
    opacity: .8;
}


.dark .blue{
    color: var(--text-white) ;
}
.dark .fa-suitcase {
    color: #0089d4;
}
/*blue text color to white*/
.dark a {
    color: #fff;
}

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

.dark .linkcolor{
    color: var(--text-white);
}

.dark .icon-muted {
    opacity: 0.4;
}


/**** Date Range Picker Dark Styles ****/

.dark .daterangepicker {
    background: var(--dark-bg);
    border-color: var(--border-color);
}

    .dark .daterangepicker .calendar-table .next span,
    .dark .daterangepicker .calendar-table .prev span {
        border-color: var(--text-white);
    }

    .dark .daterangepicker .calendar-table {
        background: var(--dark-bg);
        border-color: var(--dark-bg);
    }

    .dark .daterangepicker .ranges li:hover,
    .dark .daterangepicker td.available:hover,
    .dark .daterangepicker th.available:hover {
        background: var(--hover-bg);
        color: var(--text-white);
    }

    .dark .daterangepicker td.off,
    .dark .daterangepicker td.off.in-range,
    .dark .daterangepicker td.off.start-date,
    .dark .daterangepicker td.off.end-date {
        background-color: var(--dark-bg);
        color: #818181;
    }

    .dark .daterangepicker td.in-range {
        background: var(--skyblue-bg);
        color: var(--text-white);
    }

    .dark .daterangepicker .ranges li.active,
    .dark .daterangepicker td.active,
    .dark .daterangepicker td.active:hover {
        background-color: #0089bd;
    }