@media screen {

    :root {

        --color-dark:                       #000000;
        --color-dark-hl:                    #323232;
        --color-light:                      #dddddd;
        --color-light-hl:                   #e0e0e0;
        --color-background:                 #282828;
        --color-foreground:                 #dddddd;
        --color-page:                       #b8becc;

        --color-table-border:               #101010;
        
        --color-table-row:                  #dbdbdb;
        --color-table-row-hl1:              #dbdbdb;
        --color-table-row-hl2:              #dbdbdb;
        --color-table-row-hl3:              #dbdbdb;

        --color-table-row-hover:            #888888;
        --color-table-row-hl1-hover:        #6c6c6c;
        --color-table-row-hl2-hover:        #6c6c6c;
        --color-table-row-hl3-hover:        #6c6c6c;
        
        --color-table-row-odd:              #c0c0c0;
        --color-table-row-odd-hl1:          #c0c0c0;
        --color-table-row-odd-hl2:          #c0c0c0;
        --color-table-row-odd-hl3:          #c0c0c0;

        --color-table-row-odd-hover:        #888888;
        --color-table-row-odd-hl1-hover:    #6c6c6c;
        --color-table-row-odd-hl2-hover:    #6c6c6c;
        --color-table-row-odd-hl3-hover:    #6c6c6c;

        --color-table-row-repair:           #bad0e4;
        --color-table-row-repair-odd:       #a7c7e4;

        --color-table-row-pastdue:           #e4baba;
        --color-table-row-pastdue-odd:       #e4a7a7;

        --light:            var(--color-light) !important;
        --dark:             var(--color-dark) !important;

        --font:             'Arial','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        --fontSize:         11pt;
        --menuFontSize:     12pt;
        --menuLineHeight:   28px;
    }

    html, body {
        top:        0px;
        left:       0px;
        width:      100%;
        height:     100%;
        padding:    0px;
        margin:     0px;

        /*background-color:   var(--color-page);*/
        background-color:   #e8e8e8;
        color:              var(--color-dark);

        font-family:        var(--font);
        font-size:          var(--fontSize);
        overflow:           hidden;
    }

    a,
    a:active,
    a:visited,
    a:hover {
        text-decoration: none !important;
    }

    /** Application **/

        #page_viewport {
            height:             100%;
            width:              100%;
        }


        #modal_viewport, #modal_blur {
            position:   fixed;
            height:     100%;
            width:      100%;
            top:        0px;
            left:       0px;

            display:            none;
            margin:             0px;
            padding:            0px;
            border:             none;
        }

        #modal_viewport {
            z-index:        1000;
        }

        #modal_container {
            z-index:        1200;
        }

        .toast-wrapper {
            position:       fixed;
            top:            0px;
            min-height:     1px;
            right:          0px;
            min-width:      300px;
            z-index:        100;

            display:            flex;
            flex-direction:     column;
            justify-content:    end;
            height:             fit-content;

            transition:         height 1s;
            -webkit-transition: height 1s;
        }

        .banner {
            position:       fixed;
            margin:         auto;
            top:            5%;
            left:           5%;
            right:          5%;
            height:         auto;
            max-height:     250px;
            padding:        25px;
            font-size:      120%;
            z-index:        2200;

            color:          #e8e8e8;
            border:         solid 1px #40404040;
            border-radius:  5px !important;
            box-shadow:     #00000088 0px 4px 8px -2px;
        }

        #header header {
            position:           fixed;
            top:                0px;
            left:               0px;
            right:              0px;
            height:             48px;

            background-color:   var(--color-background);
            color:              var(--color-light);
            padding:            4px 10px 0px 10px;
            font-size:          28px;

            z-index:            10;
        }

        #header header i {
            font-size:          24px;
        }

        #header header a{
            text-decoration:    none;
            color:              var(--color-light);
            font-size:          28px;
        }

        #header header .btn{
            font-size:          24px;
            vertical-align:     unset;
            line-height:        1;
        }

        #footer footer {
            position:           fixed;
            bottom:             0px;
            left:               0px;
            right:              0px;
            height:             32px;

            background-color:   var(--color-background);
            color:              var(--color-light);
            padding:            4px 10px 0px 10px;
            z-index:            10;
        }

        #page_content {
            position:           fixed;
            top:                48px;
            left:               200px;
            right:              0px;
            bottom:             32px;
            z-index:            5;
            overflow:           auto;
            padding:            8px;
        }

        #page_menu {
            position:           fixed;
            top:                48px;
            width:              200px;
            left:               0px;
            bottom:             32px;
            z-index:            5;

            background-color:   var(--color-background);
            color:              var(--color-light);
        }

        #status_wrapper{
            font-size:          10pt;
        }

        #status_wrapper .count{
            display:            none;
        }



    /** Menu **/
        #page_menu li.nav-item i{
            line-height:        var(--menuLineHeight);
        }

        #page_menu li.nav-item span.label{
            font-size:          var(--menuFontSize);
        }

        #page_menu li.nav-item:hover{
            background-color:   var(--color-dark-hl) !important;
        }

        #page_menu li.nav-item.active{
            border-left:       4px solid var(--color-light-hl);
        }

        #page_menu li.nav-item.active a{
            padding-left:      12px;
        }


    /** Badges **/

        .online-badge.connected {
            color:      var(--success);
        }

        .online-badge.disconnected {
            color:      var(--danger);
        }

        .sync-badge.notsyncing {
            color:      var(--success);
        }

        .sync-badge.syncing {
            color:      var(--danger);
        }

        .sync-badge.waiting {
            color:      var(--warning);
        }

        .api-badge.connected {
            color:      var(--success);
        }

        .api-badge.disconnected {
            color:      var(--danger);
        }


    /** Box **/

        .full-height {
            height:     100vh;
        }

        .tight {
            padding:    0px;
        }

        .spaceless {
            margin:     0px;
        }

        .padded-xs {
            padding:    2px;
        }

        .padded,
        .padded-sm {
            padding:    5px;
        }

        .padded-md {
            padding:    10px;
        }

        .padded-xl {
            padding:    20px;
        }

        .hidden{
            display:    none;
        }

        .pull-right{
            float:      right;
        }



    /** Text **/

        .text-xs {
            font-size:  50%;
        }

        .text-sm {
            font-size:  80%;
        }

        .text-normal,
        .text-md {
            font-size:  var(--fontSize);
        }

        .text-lg {
            font-size: 120%
        }

        .text-xl {
            font-size: 200%
        }

        .bold-hover:hover{
            font-weight:    bold;
        }


    /** Entity Hierarchy Style **/
    .entity.current_entity{
        font-weight:        bold;
    }

    .entity.depth1 a{
        color: #202020;
    }
    .entity.depth2 a{
        color: #007bff;
    }
    .entity.depth3 a{
        color: #7030a0;
    }

    .indent-spacer{
        display:            inline-block;
        width:              24px;
        overflow:           hidden;
        vertical-align:     bottom;
        text-align:         center;
        font-size:          20pt;
        line-height:        24px;
    }


    /** Loading CSS Animation **/
        .loading-animation {
            display:            inline-block;
            position:           relative;
            width:              48px;
            height:             26px;
            top:                8px;
        }
        .loading-animation div {
            display:            inline-block;
            position:           absolute;
            left:               0px;
            width:              8px;
            background:         var(--color-dark);
            animation:          loading-animation 1.4s ease-in-out infinite;
        }
        .loading-animation div:nth-child(1) {
            left:               0px;
            animation-delay:    -0.60s;
        }
        .loading-animation div:nth-child(2) {
            left:               10px;
            animation-delay:    -0.48s;
        }
        .loading-animation div:nth-child(3) {
            left:               20px;
            animation-delay:    -0.32s;
        }
        .loading-animation div:nth-child(4) {
            left:               30px;
            animation-delay:    -0.16s;
        }
        .loading-animation div:nth-child(5) {
            left:               40px;
            animation-delay:    0;
        }
        @keyframes loading-animation {
            0% {
                top:            0px;
                height:         26px;
            }
            50%, 100% {
                top:            7px;
                height:         12px;
            }
        }


    /** Datatables css overrides **/

        table.dataTable tr td{
            color:              var(--color-dark);
        }

        table.dataTable tbody tr {
            background-color: var(--color-table-row);
        }

        table.dataTable tbody tr:hover,
        table.dataTable.hover tbody tr:hover,
        table.dataTable.stripe tbody tr:hover,
        table.dataTable.display tbody tr:hover{
            background-color: var(--color-table-row-hover);
        }

        table.dataTable.stripe tbody tr.odd,
        table.dataTable.display tbody tr.odd{
            background-color: var(--color-table-row-odd);
        }

        table.dataTable.stripe tbody tr.odd:hover,
        table.dataTable.display tbody tr.odd:hover{
            background-color: var(--color-table-row-odd-hover);
        }

        table.dataTable.stripe tbody tr.even:hover,
        table.dataTable.display tbody tr.even:hover{
            background-color: var(--color-table-row-hover);
        }

        table.dataTable.display tbody tr.even>.sorting_1,
        table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
            background-color: var(--color-table-row-hl1);
        }

        table.dataTable.display tbody tr.odd>.sorting_1,
        table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
            background-color: var(--color-table-row-odd-hl1);
        }
        table.dataTable.display tbody tr.even>.sorting_2,
        table.dataTable.order-column.stripe tbody tr.even>.sorting_2 {
            background-color: var(--color-table-row-hl2);
        }

        table.dataTable.display tbody tr.odd>.sorting_2,
        table.dataTable.order-column.stripe tbody tr.odd>.sorting_2 {
            background-color: var(--color-table-row-odd-hl2);
        }
        table.dataTable.display tbody tr.even>.sorting_3,
        table.dataTable.order-column.stripe tbody tr.even>.sorting_3 {
            background-color: var(--color-table-row-hl3);
        }

        table.dataTable.display tbody tr.odd>.sorting_3,
        table.dataTable.order-column.stripe tbody tr.odd>.sorting_3 {
            background-color: var(--color-table-row-odd-hl3);
        }

        table.dataTable.row-border tbody th,
        table.dataTable.row-border tbody td,
        table.dataTable.display tbody th,
        table.dataTable.display tbody td {
            border-top: 1px solid var(--color-table-border);
            padding: 2px;
        }

        table.dataTable.display tbody tr.even:hover>.sorting_1,
        table.dataTable.order-column.hover tbody tr.even:hover>.sorting_1 {
            background-color: var(--color-table-row-hl1-hover);
        }

        table.dataTable.display tbody tr.even:hover>.sorting_2,
        table.dataTable.order-column.hover tbody tr.even:hover>.sorting_2 {
            background-color: var(--color-table-row-hl2-hover);
        }

        table.dataTable.display tbody tr.even:hover>.sorting_3,
        table.dataTable.order-column.hover tbody tr.even:hover>.sorting_3 {
            background-color: var(--color-table-row-hl3-hover);
        }

        table.dataTable.display tbody tr.odd:hover>.sorting_1,
        table.dataTable.order-column.hover tbody tr.odd:hover>.sorting_1 {
            background-color: var(--color-table-row-odd-hl1-hover);
        }

        table.dataTable.display tbody tr.odd:hover>.sorting_2,
        table.dataTable.order-column.hover tbody tr.odd:hover>.sorting_2 {
            background-color: var(--color-table-row-odd-hl2-hover);
        }

        table.dataTable.display tbody tr.odd:hover>.sorting_3,
        table.dataTable.order-column.hover tbody tr.odd:hover>.sorting_3 {
            background-color: var(--color-table-row-odd-hl3-hover);
        }

        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter,
        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_processing,
        .dataTables_wrapper .dataTables_paginate {
            color:              var(--color-dark);
        }

        table.table{
            color:              var(--color-dark);
            line-height:        24px;
            
            vertical-align:     middle;
        }

        .clickable{
            cursor:             pointer;
        }
        
        table.table.striped tr,
        table.table.striped tr td,
        table.table.striped tr th{
            border-color:       #808080;
        }

        table.table tr,
        table.table tr td,
        table.table tr th{
            padding:            4px;
            line-height:        24px;
        }

        table.table tr th{
            /*border:             none;*/
        }

        table.table thead th{
            color:              var(--color-dark);
        }

        table.table.striped tbody tr{
            background-color:   var(--color-table-row);
        }

        table.table.striped tbody tr.odd{
            background-color:   var(--color-table-row-odd);
        }

        table.table:not(.nohover) tbody tr:hover{
            background-color: var(--color-table-row-hover) !important;
        }

        table.table:not(.nohover) tbody tr.odd:hover{
            background-color: var(--color-table-row-odd-hover);
        }

        input.form-control::placeholder { /* Most modern browsers support this now. */
            color:    #d0d0d0;
        }

        .badge{
            font-weight:400;
        }

        /*override datatables sorting arrows to other side */
        table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, 
        table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
            background-position: center left;
        }

        table.dataTable.compact thead th, table.dataTable.compact thead td{
            padding: 4px 4px 4px 17px;
        }

        input::placeholder {
            color:      #c8c8c8;
            font-style: italic;
        }


        /* Custom badge colors */

        .badge-danger2 {
            color: #ffffff;
            background-color: #fd7805;
        }

        .badge-onsite {
            /*color: #ffffff;*/
            background-color: #e6ff01;
        }

        .badge-purple {
            color: #ffffff;
            background-color: #7030a0;
        }

        .badge-pink{
            color: #ffffff;
            background-color: #dd7cdd;
        }

        .badge-orange {
            color: #ffffff;
            background-color: #fd7805;
        }

        .badge-teal {
            color: #ffffff;
            background-color: #2fdfdf;
        }

        table.simpletable thead tr th{
            border-color:   #c0c0c0;
            background-color:#282828;
            color:          #fff;    
        }
        
        table.simpletable tbody tr td{
            border-color: #c0c0c0;
        }

        table.simpletable{
            background-color:white;
        }

        table.simpletable tr.sectionrow{
            background-color: #e0e0e0;
            font-weight:        bold;
        }

        table.simpletable:not(.nohover) tbody tr:hover {
            background-color: #d0d0d0;
        }

        table.fixedHeaderTable thead th{
            position: sticky;
            top: -8px;
            z-index: 1;
            border-top: 2px solid #eee;
        }

        /* Make only the first header row sticky */
        .fixedHeaderTable thead tr:first-child th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #fff; /* or match your table header background */
        }

        /* Ensure second row scrolls with content */
        .fixedHeaderTable thead tr:nth-child(2) th {
            position: static;
        }

        table.spectable tbody tr.spechighlight td{
            background-color:   #ffa29473;
        }

        table.spectable tbody tr.notapplicable td{
            background-color:   #c0c0c0;
        }

        table.spectable_view tbody tr.notapplicable td{
            background-color:   #c0c0c0;
        }

        table.spectable tr, 
        table.spectable tr td, 
        table.spectable tr th{
            padding:        2px;
            line-height:    29px;
        }

        div.page-break{
            border-top: 2px dashed;
        }

        #workorder_worksheet_page div.row{
            font-size: 12pt;
        }

        #workorder_worksheet_page div.row.header img{
            width:350px;
        }

        #workorder_worksheet_page div.row.header div.col div.row{
            border-bottom: 1px dotted #c0c0c0;
            margin-bottom: 3px;
        }

        #workorder_worksheet_page .client_info_title{
            font-size:12pt;
            font-weight:bold;
        }

        #workorder_worksheet_page table.table.client_info td,
        #workorder_worksheet_page table.table.client_info th{
            line-height:15px;
        }

        #workorder_worksheet_page div.serials table.table{
            background: #fff;
        }

        #workorder_worksheet_page div.serials table.table td,
        #workorder_worksheet_page div.serials table.table th{
            line-height:17px;
        }

        #workorder_worksheet_page td.special_notes{
            width: 250px;
        }

        #workorder_worksheet_page td.special_notes div{
            border:         1px solid blue;
            height:         200px;
            width:          100%;
            line-height:    12px;
            overflow:       hidden;
            padding:        2px;
        }

        #workorder_worksheet_page table.confirm{
            width:          500px;
        }

        #workorder_worksheet_page table.confirm td{
            border-top:     0;
        }

        #workorder_worksheet_page .btn.btn-sm{
            padding:2px 4px 0px 4px;
        }

        #workorder_worksheet_page .viables_info table td,
        #workorder_worksheet_page .viables_info table th{
            line-height:14px;
        }

        #scheduling_table tbody tr.repair.even,
        #scheduling_table tbody tr.repair.even>.sorting_1,
        #scheduling_table tbody tr.repair.even>.sorting_2,
        #scheduling_table tbody tr.repair.even>.sorting_3{
            background-color:   var(--color-table-row-repair);
        }

        #scheduling_table tbody tr.repair.odd,
        #scheduling_table tbody tr.repair.odd>.sorting_1,
        #scheduling_table tbody tr.repair.odd>.sorting_2,
        #scheduling_table tbody tr.repair.odd>.sorting_3{
            background-color:   var(--color-table-row-repair-odd);
        }

        #scheduling_table tbody tr.pastdue.even,
        #scheduling_table tbody tr.pastdue.even>.sorting_1,
        #scheduling_table tbody tr.pastdue.even>.sorting_2,
        #scheduling_table tbody tr.pastdue.even>.sorting_3{
            background-color:   var(--color-table-row-pastdue);
        }

        #scheduling_table tbody tr.pastdue.odd,
        #scheduling_table tbody tr.pastdue.odd>.sorting_1,
        #scheduling_table tbody tr.pastdue.odd>.sorting_2,
        #scheduling_table tbody tr.pastdue.odd>.sorting_3{
            background-color:   var(--color-table-row-pastdue-odd);
        }

        table.dataTable tbody td.select-checkbox, 
        table.dataTable tbody th.select-checkbox {
            width:24px;
        }
        table.dataTable tbody td.select-checkbox:before, 
        table.dataTable tbody th.select-checkbox:before {
            margin-top: -8px;
            margin-left: -8px;
            width: 16px;
            height: 16px;
            top: 11px;
        }


        #workorders_view_buttons button.btn:focus,
        #scheduling_view_buttons button.btn:focus{
            box-shadow:none;
        }

        div.dt-button-collection button.dt-button.buttons-columnVisibility.active:not(.disabled){
            background-color:#ffffff;
        }
        div.dt-button-collection button.dt-button.buttons-columnVisibility:not(.disabled),
        div.dt-button-collection button.dt-button.buttons-columnVisibility:not(.disabled):hover{
            background-color: #808080;
            background-image: none;
        }
    }
    
@media print{
    .btn {
        visibility: hidden;
    }

    tbody, tr{
        break-inside: avoid;
        page-break-inside: avoid;
    }

    div.page-break{
        display:                block;
        break-after:            page !important;
        height:                 0px;
    }

    #workorder_worksheet_page {
        background:#fff;
    }

    #workorder_worksheet_page div.row{
        font-size: 12pt;
    }

    #workorder_worksheet_page div.row.header img{
        width:350px;
    }

    #workorder_worksheet_page div.row.header div.col div.row{
        border-bottom: 1px dotted #c0c0c0;
        margin-bottom: 3px;
    }

    #workorder_worksheet_page .client_info_title{
        font-size:12pt;
        font-weight:bold;
    }

    #workorder_worksheet_page table.table.client_info td,
    #workorder_worksheet_page table.table.client_info th{
        line-height:15px;
    }

    #workorder_worksheet_page div.serials table.table{
        background: #fff;
    }

    #workorder_worksheet_page div.serials table.table td,
    #workorder_worksheet_page div.serials table.table th{
        line-height:17px;
    }

    #workorder_worksheet_page td.special_notes{
        width: 250px;
    }

    #workorder_worksheet_page td.special_notes div{
        border:         1px solid blue;
        height:         200px;
        width:          100%;
        line-height:    12px;
        overflow:       hidden;
        padding:        2px;
    }

    #workorder_worksheet_page table.confirm{
        width:          500px;
    }

    #workorder_worksheet_page table.confirm td{
        border-top:     0;
    }

    #workorder_worksheet_page .btn.btn-sm{
        padding:2px 4px 0px 4px;
    }

    #workorder_worksheet_page .viables_info table td,
    #workorder_worksheet_page .viables_info table th{
        line-height:14px;
    }
}