/**
 *
 * Apply Here your Custom CSS
 *
*/

body {
}

body,
html {
    height: 100%;
    color: #555;
}

a:hover {
    cursor: pointer;
}

.sidebar-mobile-menu {
    margin-top: -7px;
}

.sidebar-collapse {
    margin-top: -10px;
}

.page-container .main-content {
    padding: 20px 20px 10px;
}

.page-container .tile-stats .icon {
    /*bottom: 35px;*/
    bottom: 56px; /*firefox,safari,internet exp*/
}

.labelForChk {
    float: left;
    margin: 3px 5px;
}

.fLeft {
    float: left;
}

.fRight {
    float: right;
}

.fLeftInput input, .fLeftInput label {
    float: left;
    margin: 3px 2px;
}

.pl25 {
    padding-left: 25px;
}

.pl5 {
    padding-left: 5px;
}

.pl20 {
    padding-left: 20px;
}

.pl10, div.pl10 {
    padding-left: 10px;
}

.p5, .p5 td {
    padding: 5px;
}

.pl15, #conAddActualHrs td.pl15 {
    padding-left: 15px;
}

.pl30, #conAddActualHrs td.pl30 {
    padding-left: 30px;
}

.mt0, input[type='radio'].mt0 {
    margin-top: 0;
}

.mr8 {
    margin-right: 8px;
}

.oldSiteItemTable {
    width: 100%;
}

#conAddActualHrs .siteItemLabor_0 td {
    padding-top: 10px;
}

.oldSiteItemTable th {
    padding: 5px;
    font-weight: bold;
    border-bottom: 1px solid #e5e5e5;
}

.oldSiteItemTable td {
    vertical-align: top;
}

.oldSiteItemTable.newTable td {
    vertical-align: middle;
}

.selectedSiteItem {
    /*background-color:#A6A6A6;*/
    background-color: #f5f5f6;
}

.page-container .pr, .page-container.overFlow {
    overflow: hidden;
}

.tabHeader {
    border-bottom: 1px solid #ebebeb;
    padding: 10px 15px;
    float: left;
    width: 100%;
}

#getPickListContent .tabHeader {
    padding: 0 0 15px;
}

#detailContent {
    margin-bottom: 10px;
}

#gcListModal label {
    margin-bottom: -5px;
}

#gcListModal td {
    padding: 4px;
}

.nav > li > a {
    padding: 10px 7px;
}

hr.layoutHr {
    margin: 17px -20px;
}

.customSearchBtnsCntr {
    height: 45px;
}

.mail-env .mail-sidebar .mail-menu > li .customSearchBtnsCntr a {
    padding: 2px 10px;
    display: inline;
    position: absolute;
    right: 50px;
    top: 8px;
}

.customSearchBtnsCntr .btn-sm {
    position: absolute;
    right: 0;
    top: 8px;
}

.noResults {
    color: #555;
}

.customSearchBtnsCntr .disabled {
    opacity: 0.5;
}

.mail-env .mail-sidebar {
    width: 15%;
}

.mail-env .mail-body {
    width: 85%;
}

.lessPadding.table-bordered > tbody > tr > td.rightAlign {
    padding: 5px 30px;
}

.calendardatePicker {
    position: absolute;
    left: 50%;
    z-index: 12345678;
}

[readonly].form-control.datepicker {
    background-color: #FFFFFF;
    border: 1px solid #c8cdd7;
}

#monthValue.form-control {
    background-color: #FFFFFF;
    border: 1px solid #c8cdd7;
}

[readonly].form-control.timepicker {
    background-color: #FFFFFF;
    border: 1px solid #c8cdd7;
}

[readonly].form-control.timepicker24Hours {
    background-color: #FFFFFF;
    border: 1px solid #c8cdd7;
}

.bInputGroup {
    border: 1px solid #c8cdd7;
    border-radius: 3px;
}

div.datepicker table tr td span.active, div.datepicker table tr td span.active:hover,
div.datepicker table tr td span.active.disabled, div.datepicker table tr td span.active.disabled:hover {
    background-color: #981b1b;
}

input[type="radio"][disabled], input[type="checkbox"][disabled], .radio[disabled],
.radio-inline[disabled], .checkbox[disabled], .checkbox-inline[disabled],
fieldset[disabled] input[type="radio"], fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio, fieldset[disabled] .radio-inline, fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
    cursor: default;
}

.disabledStatus {
    opacity: 0.5;
}

.mail-env .mail-sidebar-row {
    background-color: #e4e0e0;
    padding: 1px 5px;
}

.bInputGroup .form-control, .bInputGroup .input-group-addon {
    border: none;
}

.statusLable {
    margin: 0 10px 0 3px;
}

.ipDropdown .locationBtn {
    margin: -12px 5px -13px;
}

.ipDropdown-menu {
    margin-left: 5px;
    margin-top: 9px;
}

@media (max-width: 767px) {
    .chkBoxContainer input[type='checkbox'] {
        float: left;
    }

    .chkBoxContainer label.forCheck {
        float: left;
        margin-left: 5px;
        margin-top: 3px;
    }

    .oldSiteItemTable th {
        padding: 5px 3px;
    }

    .oldSiteItemTable td {
        padding: 3px;
        vertical-align: top;
    }

    .oldSiteItemTable.newTable td {
        vertical-align: middle;
    }

    .oldSiteItemTable tr:nth-child(2) td {
        padding-top: 8px;
    }

    .alert {
        min-width: 100% !important;
        max-width: 100% !important;
    }

        .alert span {
            text-align: left;
        }

    #documents .member-entry {
        padding: 0px 10px 5px 10px;
        margin-bottom: 5px;
        background-color: #FFf;
        border-radius: 5px;
    }

        #documents .member-entry:last-child {
            margin-bottom: 0;
        }

        #documents .member-entry .member-details h4 {
            margin-top: 10px;
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 0;
        }

            #documents .member-entry .member-details h4 > div, #documents .member-entry .member-details .info-list > div {
                font-size: 12px;
                margin-top: 5px;
            }

    .page-body .page-container {
        height: 100%;
    }

        .page-body .page-container .main-content {
            padding: 10px 20px 10px 20px;
        }

    hr {
        margin-bottom: 10px;
        margin-top: 10px;
    }

        hr.layoutHr {
            margin: 5px 0 17px;
        }

    footer.main {
        margin-left: 0;
    }

    #userHeader td {
        padding-bottom: 5px;
    }

        #userHeader td:first-child {
            max-width: 150px;
        }

        #userHeader td:last-child {
            min-width: 90px;
        }

    .ipDropdown .locationBtn {
        margin: -8px 5px 0px;
    }

    .ipDropdown-menu {
        margin-left: -48px;
    }

    .itemFilters.statusFilter {
        float: right;
        margin-right: -5px;
    }    
}

.locationNameOnTab {
    width: 90%;
    max-width: 153px;
}

.locationCountOnTab {
    width: 10%;
    padding-right: 4px;
}

.member-entry .member-details h4 {
    margin-top: 20px;
}

.mail-env.serviceOrderEnv .mail-body .mail-header h3.mail-title {
    width: 70%;
}

.mail-env.serviceOrderEnv .mail-body .mail-header .mail-search {
    width: 30%;
}

.ie .mail-env.serviceOrderEnv .mail-body .mail-header h3.mail-title {
    width: 65%;
}

.ie .mail-env.serviceOrderEnv .mail-body .mail-header .mail-search {
    width: 32%;
}

.calendardatePicker {
    position: absolute;
    left: 50%;
    z-index: 12345678;
}

li.taskType a {
    cursor: pointer;
}

@media (min-width:769px) and (max-width: 800px) {
    .locationNameOnTab {
        max-width: 99px;
    }

    .locationNameOnTab {
        width: 80%;
    }

    .calendardatePicker {
        position: absolute;
        left: 50%;
        z-index: 12345678;
    }
}



@media (min-width: 768px) and (max-width: 1024px) {
    .bmail-env.mail-env .mail-sidebar {
        width: 7%;
    }

    .bmail-env.mail-env .mail-body {
        width: 93%;
    }

    .mail-env .mail-sidebar .mail-menu.detailTabContainer > li.taskType a {
        padding: 8px 8px 8px 16px;
    }

    .mail-env .mail-sidebar {
        width: 17%;
    }

    .mail-env .mail-body {
        width: 83%;
    }

    .locationCountOnTab {
        width: 4%;
    }

    #locationUl {
        width: 100%;
    }

    #Itemscontainer {
        width: 100%;
        padding-left: 0;
    }

    .locationTabTitle {
        color: #981b1b;
        font-weight: bold;
    }

    .mail-env .mail-body .mail-header div.mail-title {
        width: 56%;
        display: inline;
    }

    .mail-env.serviceOrderEnv .mail-body .mail-header div.mail-title {
        width: 50%;
    }

    #general .col-sm-8 {
        padding-right: 0;
    }

    #general .col-sm-2 {
        padding: 0;
    }

    .mail-env .mail-body .mail-header .mail-links {
        width: 20%;
        display: inline;
        position: absolute;
        right: 15px;
        top: 10px;
    }

    .mail-env .mail-body .mail-header h3.mail-title {
        width: 65%;
    }

    .mail-env .mail-body .mail-header .mail-search {
        width: 35%;
    }

    .mail-env.orderEnv .mail-body .mail-header h3.mail-title, .mail-env.orderEnv .mail-body .mail-header div.mail-title {
        width: 44%;
    }

    .mail-env.orderEnv .mail-body .mail-header .mail-search {
        width: 55%;
    }

    .member-entry .member-details h4 {
        margin-top: 30px;
    }

    .calendardatePicker {
        position: absolute;
        left: 50%;
        z-index: 12345678;
    }

    .form-control.customDatepicker {
        padding: 6px 6px;
        text-align: center;
    }

    .mail-env .mail-body.orderDetailContainer .mail-header .mail-title {
        width: 48%;
    }

    .mail-env .mail-body.orderDetailContainer .mail-header .mail-search {
        width: 52%;
    }

    .custom-mail-header .mail-title {
        width: 52%;
    }

    .custom-mail-header .mail-links {
        max-width: 48%;
    }
}

@media (min-width:801px) and (max-width: 980px) {
    .locationNameOnTab {
        max-width: 135px;
    }

    .calendardatePicker {
        position: absolute;
        left: 50%;
        z-index: 12345678;
    }
}

@media (min-width:641px) and (max-width: 768px) {
    .locationNameOnTab {
        max-width: 90px;
    }

    .calendardatePicker {
        position: absolute;
        left: 50%;
        z-index: 12345678;
    }
}

/*custom mail-header - start*/
@media (min-width:1025px) {
    .bmail-env.mail-env .mail-sidebar {
        width: 12%;
    }

    .bmail-env.mail-env .mail-body {
        width: 88%;
    }

    .mail-env .mail-sidebar .mail-menu.detailTabContainer > li.taskType a {
        padding: 8px 8px 8px 10px;
    }

    .mail-env .mail-body.orderDetailContainer .mail-header .mail-title {
        width: 60%;
    }

    .mail-env .mail-body.orderDetailContainer .mail-header .mail-search {
        width: 40%;
    }

    .custom-mail-header .mail-title {
        width: 65%;
    }

    .custom-mail-header .mail-links {
        max-width: 35%;
    }

    #gContentB .col-lg-2 {
        width: 150px;
    }

    #gContentB .col-lg-7 {
        width: 600px;
    }

    #gContentB .col-lg-8 {
        width: 650px;
    }
}

    .mail-env .mail-body .mail-header.selectedLocation .mail-title {
        font-size: 14px;
    }

    .selectedLocation {
        width: 100%;
        float: left;
        font-size: 12px;
        padding: 10px 15px;
    }

        .selectedLocation .sDropdown-menu li, .locationTd .locationA, .selectedLocation .ipDropdown-menu li {
            font-size: 12px;
        }

        .selectedLocation img {
            /*margin-left:10px;*/
        }

    .custom-mail-header {
        padding: 15px 10px 8px;
        display: table;
        width: 100%;
        border-bottom: 1px solid #ebebeb;
    }

        .custom-mail-header .mail-title {
            color: #303641;
            float: left;
            font-size: 20px;
            margin: 0;
            overflow: hidden;
            padding: 0 20px 0 0;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .custom-mail-header .mail-links {
            text-align: right;
            float: right;
            max-width: 300px;
        }

    .mail-env .mail-sidebar .mail-menu.detailTabContainer {
        border-top: none;
    }

    .locationBtn {
        padding: 10px;
        line-height: 0;
        margin: -14px 5px -11px 0;
    }

    .approvedBtn {
        padding: 5px;
        line-height: 0;
        margin: -14px 5px -11px 0;
    }
    /*.sltLocation {
    float:left;
    margin-right:5px;
    max-width:80%;
}*/
    /*custom mail-header - end*/

    .nav > li.locationTab > a {
        padding-right: 0;
    }

    .locationNameOnTab {
        padding-right: 4px;
        word-wrap: break-word;
    }

    .table-bordered tr.tableHead {
        height: 33px;
    }

    #table-2 tr.tableHead {
        height: 41px;
    }

    .table-bordered tr.tableHead > td {
        background-color: #f5f5f6;
        font-weight: bold;
        color: #555;
    }

    #installersListContainer {
        display: none;
        padding-top: 20px;
    }

    #userHeader td:first-child a {
        color: #2b303a;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        word-wrap: break-word;
    }

    a:hover, a:active, a:focus {
        outline: 0;
    }

    .mail-env {
        margin-top: -18px;
        /*border-top: 1px solid #ebebeb;*/
        margin-left: -20px;
        margin-right: -20px;
    }

    .hiddenButton, .hiddenPanel, .siteItemRadioContainer {
        display: none;
    }

    .actualHrs:read-only {
        border: none;
    }
    /*.modal-backdrop
{
    z-index:1;
}*/
    /*.modal.fade.in
{
    background-color:rgba(0,0,0,0.5);
}*/
    .mail-env .mail-sidebar .mail-menu > li.taskType a {
        padding: 8px 8px 8px 16px;
        text-decoration: none;
        /*width:200px;*/
    }

    .mail-env .mail-sidebar .mail-menu > li.advSrcArchived {
        padding: 10px 0 4px 17px;
        color: #981b1b;
        cursor: pointer;
    }

    .advSrcArchived label {
        cursor: pointer;
    }

    .advSrcArchived input[type="checkbox"] {
        float: left;
        margin: 0 5px 0 0;
    }

    footer.main {
        position: absolute;
        bottom: 0;
        width: 100%;
        margin-left: -20px;
        padding-bottom: 5px;
        padding-top: 5px;
    }

    .page-container .sidebar-menu .logo-env {
        padding: 24px 10px 8px;
    }

    .taskListContainer .tile-header {
        line-height: 20px;
        padding: 5px 0 5px 5px;
    }

        .taskListContainer .tile-header a {
            text-decoration: none;
        }

    .tile-dtools-red .tile-block .tile-content {
        padding: 10px;
    }

    .installersContent .tile-header {
        padding: 5px 10px;
    }

        .installersContent .tile-header i {
            font-size: 12px;
        }

    .installersContent .tile-content {
        background-color: rgba(235, 235, 235, 0.9);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 10px 0 10px 5px;
        border-radius: 0 0 5px 5px;
    }

    .taskListContainer .tile-content {
        background-color: white;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 5px;
        border-radius: 0 0 5px 5px;
    }

    .login-page .login-content {
        padding: 0 0 20px;
    }

    .login-page .login-form {
        padding-top: 40px;
    }

    .tile-block.tile-dtools-red {
        background: none repeat scroll 0 0 rgb(152, 27, 27);
        border: 1px solid #981b1b;
        color: #373e4a;
        margin-bottom: 10px;
    }

    #installersContent .tile-block:last-child {
        margin-bottom: 0;
    }
    /*.tile-block.tile-dtools-red .tile-header i, .tile-block.tile-dtools-red .tile-header a{
    color:#303641; 
}*/
    .tile-block.tile-dtools-red .title-content {
        background-color: rgba(220, 220, 220, 0.9);
    }

    .tile-dtools-red .tile-content .taskTitle {
        float: left;
        font-weight: bold;
        width: 100%;
    }

    .tile-content p {
        margin-bottom: 0;
    }

    .table > tbody > tr > td .label {
        float: left;
        width: 105px;
    }

    .cb-wrapper.label {
        line-height: inherit;
        font-size: 11px;
        font-weight: bold;
    }

    .taskListContainer .tile-content p {
        margin-top: 0;
    }

    .taskListContainer .tile-header i {
        font-size: 17px;
        top: 0;
        cursor: pointer;
    }

    .glyphicon.glyphicon-user.installerIcon {
        cursor: pointer;
    }

    .table.taskListTable tr td {
        padding-right: 0;
    }

    .taskListTable tr td:last-child {
        text-align: center;
    }

    .table.taskListTable th div {
        padding-top: 3px;
    }
    /*task installers modal*/
    #installersModal table {
        width: 100%;
    }

        #installersModal table tr {
            border-bottom: 1px solid #e5e5e5;
        }

        #installersModal table td {
            padding: 10px 20px;
        }

        #installersModal table th {
            font-weight: bold;
            padding: 5px 0 5px 20px;
        }
    /*#taskInstallers table td:last-child {
    text-align:right;
    padding:10px 20px 10px 5px;
}*/
    #taskInstallers table td:first-child {
        max-width: 200px;
        padding-right: 0;
        word-wrap: break-word;
    }

    #taskInstallers .modal-footer {
        border-top: none;
        margin-top: 0;
    }

    .control-label {
        color: #000 !important;
    }
    /*task installers modal*/
    .cXtra .col-md-8.col-xs-8 {
        padding-top: 5px;
    }

        .cXtra .col-md-8.col-xs-8 > label {
            margin-left: 5px;
        }

    .cXtra .form-control {
        margin-bottom: 10px;
    }

    .modal-footer {
        margin-top: 0;
    }

    .actualHrs:read-only {
        border: none;
    }

    .actualHrs:-moz-read-only {
        border: none;
    }

    .actualHrs.form-control {
        display: inline;
        background-color: #FFF;
    }

    .alert {
        /*position: absolute;    
    font-size: 12px;
    font-weight: normal;    
    max-width: 500px;
    vertical-align: middle;
    text-align: left;
    z-index: 1000001;
    padding: 10px;  
    margin: 150px auto;
    border: 1px solid transparent;
    border-radius: 3px;*/
        /*secondcode*/
        /*position: fixed;
    top: 0px;
    left: 25%;
    right: 25%;
    z-index: 1000001;
    padding: 10px; 
    font-size: 12px;
    font-weight: normal;    
    max-width: 500px; 
    border: 1px solid transparent;
    border-radius: 3px;*/
        font-family: Arial,Helvetica,sans-serif;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 105;
        text-align: left;
        font-weight: bold;
        font-size: 100%;
        /*min-width:100%;*/
        /*color: white;*/
        padding: 2px;
        /*background-color: #8E1609;*/
    }

        .alert span {
            text-align: left;
            width: 95%;
            color: #000;
            font-weight: lighter;
        }

    .close-notify {
        /*white-space: nowrap;
        float: right;
        margin-right: 10px;
        text-decoration: none;
        margin-right:-10px;
        margin-top:-15px;
        border: 2px #981b1b solid;
        padding:2px 3px 0 3px;*/
    }

    .close-notify {
        background-color: #555;
        border-radius: 10px;
        color: #fff;
        float: right;
        font-size: 10px;
        font-weight: bold;
        margin-left: 10px;
        margin-top: 2px;
        padding: 0 3px;
        text-decoration: none;
        white-space: nowrap;
    }

        .close-notify a {
            color: #fff;
        }

    .loading {
        /*position: absolute;    
    font-size: 12px;
    font-weight: normal;    
    max-width: 500px;
    vertical-align: middle;
    text-align: left;
    z-index: 1000001;
    padding: 10px;  
    margin: 10px 0px;
    border: 1px solid transparent;
    border-radius: 3px;*/
        left: 0;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 100002;
        margin: 0 auto;
        top: 0;
        background-color: rgba(0, 0, 0, 0.3);
        overflow: hidden;
    }

    .MImodal {
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 100002;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .MImodal-dialog {
        margin: 150px auto;
        overflow: hidden;
        max-width: 500px;
    }

    .xsTaskList .label {
        margin-right: 5px;
    }

    .xsTaskList label {
        margin-bottom: 0;
    }

    .slider .ui-slider-handle .ui-label {
        color: #555555;
    }

    .installersList input[type="checkbox"] {
        margin: 4px 5px 0 0;
    }

    .table.table-bordered > thead > tr > td {
        color: #555;
        font-weight: bold;
    }
    /*modal-custom
.modal {
    height:100%;
    left:0;
    margin:0 auto;
    position:fixed;
    top:0;
    width:100%;
    z-index:1050;
    display: none;
}
.modal-dialog {
    margin:20px auto;
    width:auto;
    padding:10px;
}
/*modal-custom*/

    /*label new desing*/
    .chrome .custLbl {
        width: 90px;
    }

    .custLbl {
        width: 87px;
        font-weight: bold;
        float: left;
        margin-left: -2px;
    }

    .statusLableContainer .custLbl {
        margin-bottom: 0;
    }

    .overdueImg {
        width: 25px;
    }

    .xsTaskList .overdueImg {
        margin-top: -5px;
    }

    .mail-env .mail-body .mail-table.taskListTable thead tr th {
        padding-right: 0;
    }

    .labelInfo {
        color: #21a9e1;
    }

    .labelWarning {
        color: #DBA901;
    }

    .labelSuccess {
        color: #00a651;
    }

    .labelDanger {
        color: #cc2424;
    }

    .labelSecondary {
    }
    /*label new desing*/
    #mapContainer {
        position: relative;
        -webkit-transform: translateZ(0px);
        border-radius: 5px;
        border-color: #981b1b;
        display: none;
        text-align: right;
        /*border-top:1px solid #ebebeb;*/
        padding-top: 15px;
    }

    #generalContent .lessPadding {
        padding: 0 0 0 0;
    }

    .lessPadding.col-xs-6 {
        width: 30%;
    }

    #generalContent .xtraPercentage {
        width: 70%;
    }

    #map_canvas_xs {
        overflow: hidden;
    }

    #map_canvas {
        height: 250px;
        position: relative;
        overflow: hidden;
        -webkit-transform: translateZ(0px);
        background-color: rgb(229, 227, 223);
        border-radius: 5px;
        border: 1px solid #ebebeb;
    }

    .notifications.dropdown.actionContainer > a {
        display: none;
    }

    .notifications.dropdown.enble {
        background-color: #e8e6e6;
        border-radius: 3px;
        border: 1px solid #c0c0c0;
    }

        .notifications.dropdown.enble > a {
            float: right;
            padding: 0;
            height: 25px;
            margin-top: -3px;
            display: inline;
        }

        .notifications.dropdown.enble .dropdown-menu > li {
            text-align: left;
        }

            .notifications.dropdown.enble .dropdown-menu > li > a {
                padding: 6px 10px;
            }

    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus {
        background-color: #e8e6e6;
    }

    .ui-page-theme-a a.ui-btn.updateAllButton.ui-state-disabled {
        background-color: #ffffff;
    }

    .ui-page-theme-a a.ui-btn.updateAllButton {
        background-color: #e9e9e9;
    }

    #actionPopup ul li a.markAsLink {
        font-weight: normal;
    }

    .table-bordered > thead > tr > td {
        background-color: #f5f5f6;
        border-bottom-width: 1px;
        color: #981b1b;
    }

    .unInstalledItem .entypo-check {
        display: none;
    }

    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border-left: none;
        border-right: none;
        text-align: left;
    }

    #itemNotes {
        resize: vertical;
        min-height: 30px;
        max-height: 100px;
    }

    #table-2 td:first-child {
        padding-left: 10px;
        text-align: left;
        padding-right: 0;
        width: 55px;
        text-align: center;
    }

    #table-2 td:nth-child(3) {
        text-align: left;
        /*width:50px;*/
        padding-left: 0;
    }
    /*#table-2 td:nth-child(2) {
        width:65px;
        text-align:center;
    }*/
    .gecko #table-2 td:first-child {
        width: 62px;
        text-align: center;
    }

    #table-2 td:last-child {
        max-width: 62px;
    }

    .showForEdit, .showForEditNotes, .showForEditPercent, .showForEditActualHrs, .showForEditStartDate, .showForEditEndDate, .showForEditProduct, .showForEditLabor, .showForEditSignature, .showForEditPriority {
        display: none;
    }

    .table > tbody > tr > td.statusContainer .label {
        margin: 0;
    }

    .table > tbody > tr > td.statusContainer {
        padding-top: 0;
        padding-bottom: 0;
    }

    .btn.btn-transp {
        background-color: transparent;
    }

    .btn.btn-white.removeButton {
        margin-left: 5px;
    }

    .infoIconButton {
        margin-left: 2px;
    }

    .form-control.itemNotesEdit {
        resize: vertical;
    }

    #itemInfo .row {
        padding: 3px;
    }

    #itemInfo i {
        display: none;
    }

    .col-lg-12.col-md-12.col-sm-12.col-xs-12.row {
        line-height: 30px;
        margin: 0;
        padding: 0;
        color: #555;
    }

    .btn.absBtn {
        float: right;
    }

    .btn-default.absBtn {
        margin-right: 5px;
    }

    .noRightPadding {
        padding: 0;
    }

    .noLeftPadding {
        padding-left: 0;
    }

    div.zeroPadding,
    span.zeroPadding,
    td.zeroPadding {
        padding: 0;
    }

    div.zeroMargin,
    span.zeroMargin,
    td.zeroMargin {
        margin: 0;
    }

    div.zeroRightMargin,
    span.zeroRightMargin,
    td.zeroRightMargin {
        margin-right: 0;
    }

    div.zeroLeftMargin,
    span.zeroLeftMargin,
    td.zeroLeftMargin {
        margin-left: 0;
    }

    div.zeroRightPadding,
    span.zeroRightPadding,
    td.zeroRightPadding {
        padding-right: 0;
    }

    div.zeroLeftPadding,
    span.zeroLeftPadding,
    td.zeroLeftPadding {
        padding-left: 0;
    }

    .installersList td:first-child {
        width: 70%;
    }

    .installersList td:last-child {
        text-align: right;
    }

    .installersList tr {
        border-bottom: 1px solid #e5e5e5;
    }

        .installersList tr:last-child {
            border-bottom: none;
        }

    .installersList td {
        padding: 5px 20px;
    }

    #editedTask {
        resize: vertical;
        min-height: 140px;
    }

    .safari .actionContainer {
        width: 51px;
    }

    .actionContainer {
        width: 50px;
        padding-left: 8px;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .chrome .actionContainer {
        width: 53px;
    }

    .forInstalledTd {
        width: 77px;
    }

    .chrome .forInstalledTd {
        width: 91px;
    }

    .enble.notifications.dropdown .dropdown-menu {
        border-right: 1px solid #c0c0c0;
        border-bottom: 1px solid #c0c0c0;
        border-left: 1px solid #c0c0c0;
        border-top: none;
    }

    .locationContent .notifications.dropdown .dropdown-menu {
        left: -1px;
    }

    .installedOn.hideWhenEdit {
        min-width: 75px;
    }

    .table.lessPadding > thead > tr > th,
    .table.lessPadding > tbody > tr > th,
    .table.lessPadding > tfoot > tr > th,
    .table.lessPadding > thead > tr > td,
    .table.lessPadding > tbody > tr > td,
    .table.lessPadding > tfoot > tr > td {
        padding: 5px;
    }

    hr {
        /*border-top:1px solid #FFF;*/
    }

    .table-bordered > tbody > tr > td:last-child,
    .table-bordered > thead > tr > td:last-child {
        border-right: 1px solid #ebebeb;
    }

    .has-switch .switch-right.switch-small.switch-danger,
    .has-switch .switch-left.switch-small.switch-danger {
        background-color: #CC2424;
        color: #ffffff;
    }

    .has-switch.switch-small,
    .has-switch.switch-sm {
        min-width: 70px;
    }

    .installerActualHrConainer {
        display: none;
        color: #555;
    }

        .installerActualHrConainer.actualHrShow {
            display: inline;
        }

            .installerActualHrConainer.actualHrShow.archived {
                padding: 0;
            }

                .installerActualHrConainer.actualHrShow.archived table td:first-child {
                    width: 30%;
                }

    pre.takDetailNote, pre.takDetailDesc {
        color: inherit;
        font-size: inherit;
        margin: 0;
        padding: 0;
        font-family: inherit;
        background-color: transparent;
        border: none;
        white-space: pre-wrap;
        word-break: keep-all;
    }

    #forgetPasswordContent button.btn {
        width: 45%;
        position: absolute;
        margin: 0 0 20px;
    }
    /*for only xs*/
    .xsInstallerList .col-xs-4 {
        padding-right: 0;
        padding-left: 5px;
        width: 30%;
    }

    .xsInstallerList .col-xs-8 {
        width: 70%;
    }

    .xs.mail-env .mail-body .mail-header .mail-title {
        font-size: 18px;
    }

    .percentageContent.editable .col-xs-6.lableTab {
        width: 42%;
        padding-right: 0;
    }

    .percentageContent.editable .col-xs-6.contentTab {
        width: 58%;
        padding: 0;
    }

    .mail-env .mail-sidebar .mail-menu > li a.locationGroupName {
        padding: 10px 20px;
    }

    .itemGroupContent .tile-header {
        padding: 5px 10px;
    }

        .itemGroupContent .tile-header i {
            font-size: 12px;
        }

    .itemGroupContent .tile-content {
        background-color: rgba(235, 235, 235, 0.9);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 10px 0 0 5px;
    }

    .itemGroupContent .row {
        margin: 0;
    }
    /*.itemGroupContent .col-xs-4.forTitle {
    padding-left:20px;
    padding-right:2px;
}*/
    .itemGroupContent .col-xs-4.forTitle, .itemGroupContent .col-xs-7.forTitle {
        padding-left: 13px;
        padding-right: 2px;
    }

    .itemGroupContent .col-xs-6.forTitle {
        padding-left: 20px;
        padding-right: 2px;
    }

    .installersContent .row {
        margin: 0;
    }

    .showWhenEdit {
        display: none;
    }

    .actualHrs.form-control.showWhenEdit {
        display: none;
    }

    .xsInstallerList div {
        min-height: 23px;
        padding-left: 0;
    }

    .xsItemList div {
        min-height: 20px;
    }

    .xsItemList {
        padding-bottom: 0;
    }

        .xsItemList .col-xs-8,
        .xsItemList .col-xs-4,
        .xsItemList .col-xs-12 {
            line-height: 0.7;
        }

    a.alignRight {
        color: inherit;
        position: absolute;
        right: 15px;
        top: 0;
    }

    a.alignRight1 {
        position: absolute;
        right: 15px;
        top: 0;
    }

    a.alignRight.xtra15 {
        right: 33px
    }

    a.alignRight.xtra25 {
        right: 75px
    }

    a.alignRight1.xtra25 {
        right: 70px
    }

    .itemGroupContent {
        padding: 5px 0;
        color: #555;
    }

        .itemGroupContent .tile-footer {
            padding: 10px 0 25px;
        }

        .itemGroupContent a.alignRight.xtra15 {
            right: 65px
        }

    .extraInfo, .hiddenInfoLable {
        display: none;
    }

    .tile-block .form-control.actualHrs {
        color: black;
    }

    .itemGroupContent .tile-block .form-control {
        background-color: #fff;
        color: black;
    }

    .xtraBottomMargin {
        margin-bottom: 10px;
    }

    .itemNotesEdit {
        resize: vertical;
        min-height: 75px;
    }

    .itemGroupContent .col-xs-8.forContent,
    .itemGroupContent .col-xs-12.forContent {
        padding-right: 10px;
    }

    .bottomBordered {
        border-bottom: 1px solid #ebebeb;
    }

        .bottomBordered:last-child {
            border-bottom: none;
        }

    .itemGroupContent .bottomBordered {
        padding-bottom: 5px;
    }

        .itemGroupContent .bottomBordered:last-child {
            border-bottom: none;
        }

    .xtraHt {
        min-height: 35px;
        margin-top: 5px;
    }

    .compIdTd {
        padding-left: 10px;
        padding-bottom: 5px;
    }

        .compIdTd input {
            float: left;
            margin-right: 3px;
        }

        .compIdTd span {
            float: left;
            margin-top: 2px;
        }

    .compIdTdSecond {
        text-align: right;
    }

        .compIdTdSecond a {
            color: #373e4a;
        }
    /*for only xs*/

    /*for only sm ----------- start*/
    .itemActionButton {
        float: right;
    }

    .table-bordered.installersTable > tbody > tr > td:last-child,
    .table-bordered.installersTable > thead > tr > td:last-child {
        padding-left: 0;
    }
    /*for only sm ---------- end*/
    /*start - custom dialog*/
    .bModal {
        background-color: rgba(0, 0, 0, 0.3);
        display: none;
    }
    /*.cdContainer {
    background-color: rgba(0, 0, 0, 0.3);
    height: 100%;
    left: 0;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100002;
    display:none;
}*/
    .cdContainer {
        position: absolute;
        z-index: 100002;
        display: none;
    }

    .cdContent {
        background-color: #fff;
        border: 1px solid #ebebeb;
        border-radius: 3px;
        min-height: 30px;
        margin: 10px;
        padding: 10px;
        color: #555;
    }

    .cdContainer.col-md-6 {
        float: none;
    }

    .cdHeader {
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 5px;
        font-size: 14px;
        font-weight: bold;
    }

        .cdHeader .entypo.entypo-cancel {
            float: right;
            cursor: pointer;
        }

    .cdFooter {
        border-top: 1px solid #ebebeb;
        padding-top: 15px;
        text-align: right;
    }

    .cdBody {
        padding: 5px 0;
    }
    /*end - custom dialog*/
    /*#general .form-control, #generalContent .form-control {
    height:25px;
}*/
    .btn.btn-white.timerBtn {
        font-size: 16px;
        padding: 3px 12px;
    }

    .timerBtn {
        display: none;
        margin-bottom: 3px;
    }

    #startTimer[data-value="1"] .startOnly, #startTimer[data-value="2"] .allActions {
        display: inline-block;
    }

    #startTimer[data-value="1"] .allActions, #startTimer[data-value="2"] .startOnly {
        display: none;
    }

    .timerContainer {
        float: right;
        color: #555;
        padding-top: 5px;
    }

    .lg.timerContainer {
        margin-bottom: -13px;
        padding-top: 10px;
    }

    .svoItemsContainer .itemGroupContent {
        padding-top: 10px;
    }

        .svoItemsContainer .itemGroupContent:first-child {
            margin-top: -10px;
        }

        .svoItemsContainer .itemGroupContent:last-child {
            margin-bottom: -10px;
        }

    .svoItemsContainerInfo {
        float: right;
        margin-right: 5px;
    }

    .itemGroupContent .hiddenInfo {
        display: none;
    }

    .nav-tabs.detailTabContainer > li > a {
        color: #555;
    }

    .ac_results {
        padding: 0px;
        border: 1px solid black;
        background-color: white;
        overflow: hidden;
        z-index: 99999;
    }

        .ac_results ul {
            width: 100%;
            list-style-position: outside;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .ac_results li {
            margin: 0px;
            padding: 2px 5px;
            cursor: default;
            display: block;
            /* 
	if width will be 100% horizontal scrollbar will apear 
	when scroll mode will be used
	*/
            /*width: 100%;*/
            font: menu;
            font-size: 12px;
            /* 
	it is very important, if line-height not setted or setted 
	in relative units scroll will be broken in firefox
	*/
            line-height: 16px;
            overflow: hidden;
        }

    .ac_loading {
        background: white url('../JS/throbber.gif') no-repeat right center;
    }

    .ac_odd {
        background-color: white;
    }

    .ac_even {
        color: #555;
    }

        .ac_even.ac_over {
            background-color: #81BEF7;
            color: white;
        }

    .language-selector .dropdown-menu.calendardd {
        width: 140px;
        margin-right: 25px;
    }

    .dropdown-menu.calendardd > li > a {
        padding: 5px 20px;
    }

    .dropdown.open.ddForXs a.dropdown-toggle i {
        color: #981b1b;
    }

    .ddForXs .calendardd {
        margin-top: -4px;
    }

    .ddForXs.language-selector .dropdown-menu > li a {
        font-size: 12px;
    }

    .ddForXs.language-selector > .dropdown-toggle {
        padding: 7px 8px 7px 10px;
    }

    .btn-calendar.btn-white.dropdown-toggle {
        border-left-color: transparent;
    }

    .calendardd.dropdown-menu > li > a:hover,
    .calendardd.dropdown-menu > li > a:focus {
        background-color: #ebebeb;
    }

    .btn-calendar.btn-white:active, .btn-calendar.btn-white.active, .open .dropdown-toggle.btn-white.btn-calendar {
        background-color: transparent;
    }
    /*eDropdown*/
    .eDropdown {
        border: 1px solid silver;
        width: 90px;
        padding: 5px;
        border-radius: 3px;
    }

        .eDropdown.open {
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        }

        .eDropdown .eDropdown-menu {
            display: none;
        }

        .eDropdown.open .eDropdown-menu {
            display: block;
        }

        .eDropdown.open .eDropdown-btn {
            border-radius: 3px 0 0 3px;
            background-clip: padding-box;
            background-color: #fff;
            color: #981b1b;
        }

    .eDropdown-menu {
        overflow: hidden;
        padding: 0;
        border-radius: 3px 0 3px 3px;
        left: auto;
        right: 311px;
        position: absolute;
        z-index: 900;
        margin-top: 6px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        background-clip: padding-box;
        background-color: #fff;
    }

        .eDropdown-menu td {
            padding: 3px 5px;
        }

            .eDropdown-menu td:first-child {
            }

    .eDropdown .eDropdown-menu td {
        border-bottom: 1px solid #ebebeb;
        line-height: 1.6;
        text-align: left;
    }

    .eDropdown .eDropdown-menu tr:hover {
        background-color: #ebebeb;
    }

    .custom-container {
        border: 1px solid silver;
        border-radius: 3px;
        margin-top: 3px;
    }

        .custom-container input {
            width: 56px;
            border: none;
            padding: 3px;
        }
    /*eDropdown*/
    /*bDropdown - start*/
    .btn.splBtn {
        padding: 3px 10px;
    }

    .itemFilters.splBtn {
        margin-top: -4px;
        margin-bottom: -4px;
    }

    .itemFilters {
        float: left;
        margin-right: 10px;
    }

    .bDropdown .bDropdown-menu, .iDropdown .iDropdown-menu, .sDropdown .sDropdown-menu, .aDropdown .aDropdown-menu,
    .mDropdown .mDropdown-menu, .mDropdown .entypo-down-open, .lDropdown .lDropdown-menu,
    .nDropdown .nDropdown-menu, .ipDropdown .ipDropdown-menu {
        display: none;
    }

    .bDropdown.open .bDropdown-menu, .iDropdown.open .iDropdown-menu, .sDropdown.open .sDropdown-menu, .aDropdown.open .aDropdown-menu,
    .mDropdown.open .mDropdown-menu, .nDropdown.open .nDropdown-menu, .ipDropdown.open .ipDropdown-menu {
        display: block;
        box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.25);
    }

    .mDropdown.enble .entypo-down-open {
        display: block;
    }

    .lDropdown.open .lDropdown-menu {
        display: inline;
        top: 127px;
        left: 145px;
        /*right:50px;*/
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.25);
    }

    .lDropdown-menu ul {
        margin: 0;
        padding: 0;
        max-width: 500px;
        min-width: 250px;
    }

    .lDropdown-menu td {
        padding: 5px;
    }

    .headerTr td {
        background: none repeat scroll 0 0 #e4e0e0;
        color: #555;
        font-weight: bold;
    }

    .lDropdown-menu li.locationTd {
        border-top: 1px solid #ebebeb;
        padding: 5px 10px;
        width: 50%;
        word-wrap: break-word;
        white-space: normal;
        list-style: none;
        float: left;
        cursor: pointer;
    }

        .lDropdown-menu li.locationTd:hover {
            background-color: #f5f5f6;
        }

    .locationTd.selected, .itemsSelectedLi.selected {
        background-color: #f5f5f6;
    }

    .bDropdown.open .bDropdown-btn, .sDropdown.open .sDropdown-btn, .sDropdown .sDropdown-btn:focus, .sDropdown .sDropdown-btn:hover,
    .aDropdown.open .aDropdown-btn, .aDropdown .aDropdown-btn:focus, .aDropdown .aDropdown-btn:hover,
    .iDropdown.open .iDropdown-btn, .lDropdown.open .lDropdown-btn, .lDropdown .lDropdown-btn:focus, .lDropdown .lDropdown-btn:hover,
    .bDropdown.open .bDropdown-btn, .ipDropdown.open .ipDropdown-btn, .ipDropdown .ipDropdown-btn:focus, .ipDropdown .ipDropdown-btn:hover {
        border-radius: 3px 0 0 3px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        background-clip: padding-box;
        background-color: #fff;
        color: #981b1b;
    }

    .lDropdown.open .lDropdown-btn {
        border-radius: 3px 3px 0 0;
    }

    .mDropdown .mDropdown-btn {
        background-color: #fff;
        cursor: default;
        padding: 0;
        line-height: 0;
        margin-left: 0;
    }

    .mDropdown .markAllChk {
        margin: -2px 0 0;
        float: none;
    }

    .mDropdown.enble .markAllChk {
        float: left;
    }

    .mDropdown.enble .mDropdown-btn {
        border-radius: 3px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        background-clip: padding-box;
        color: #981b1b;
        cursor: pointer;
        padding: 9px 15px 6px 10px;
    }

    .safari .mDropdown.enble .mDropdown-btn {
        padding: 9px 18px 6px 10px;
    }

    .bDropdown-menu, .sDropdown-menu, .iDropdown-menu, .mDropdown-menu, .lDropdown-menu, .ipDropdown-menu, .ipDropdown-menu, .aDropdown-menu {
        overflow: hidden;
        padding: 0;
        border-radius: 3px 0 3px 3px;
        float: left;
        position: absolute;
        z-index: 900;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        background-clip: padding-box;
        background-color: #fff;
        color: #981b1b;
    }

    .iDropdown-menu {
        left: auto;
    }
        /*.iDropdown-menu {
    right:111px;
}
.chrome .iDropdown-menu {
    right:94px;
}
.forXs .iDropdown-menu table {
    margin:-20px 0 0;
}*/

        .iDropdown-menu li {
            display: inline;
        }

        .iDropdown-menu table {
            width: 100%;
            margin: 0;
        }

    .table.installerList tr td {
        padding: 0 15px;
        height: 35px !important;
        text-align: left;
    }

    .forXs .table.installerList tr td {
        height: auto !important;
        padding: 7px 15px;
    }

    .ddForChangeAccount .bDropdown-menu {
        right: auto;
        left: 100px;
        border-top: solid 1px #e8e6e6;
        font-size: 12px;
    }

        .ddForChangeAccount .bDropdown-menu td {
            padding: 4px 15px 4px 0px;
            border-bottom: 1px solid #ebebeb;
        }

            .ddForChangeAccount .bDropdown-menu td:last-child {
                min-width: 100px;
            }

        .ddForChangeAccount .bDropdown-menu tr.enableHover a {
            cursor: pointer;
        }

        .ddForChangeAccount .bDropdown-menu tr.enableHover:hover {
            background-color: #ebebeb;
            cursor: pointer;
        }

        .ddForChangeAccount .bDropdown-menu tr a {
            cursor: default;
        }

        .ddForChangeAccount .bDropdown-menu td:first-child {
            width: 25px;
            padding-right: 0;
            padding-left: 5px;
        }

    #userHeader .ddForChangeAccount .bDropdown-menu a {
        font-weight: normal;
        color: #981b1b;
        font-size: 12px;
    }

    .advanceSearchLi, .advanceSearchLi label {
        cursor: pointer;
    }

    @media (max-width: 768px) {
        .bDropdown-menu {
            right: 25px;
        }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .bDropdown-menu {
            right: 100px;
        }
    }

    @media (min-width:760px) {
        .alert {
            position: absolute;
            left: 45%;
            /*&margin-left: -100px;*/
            min-width: 100px;
            max-width: 375px;
            padding-left: 5px;
        }
    }

    .bDropdown-btn.btn-white:hover {
        background-color: #F5F5F6;
    }

    .bDropdown.forXs.open .bDropdown-btn, .iDropdown.forXs.open .iDropdown-btn {
        background-color: #fff;
    }

        .bDropdown.forXs.open .bDropdown-btn i, .iDropdown.forXs.open .iDropdown-btn i {
            color: #981b1b;
        }

    .iDropdown.forXs .iDropdown-menu {
        right: 60px;
        top: 30px;
    }

    .bDropdown.forXs .bDropdown-menu {
        right: 17px;
        top: 30px;
    }

    .bDropdown .bDropdown-menu > li, .mDropdown .mDropdown-menu > li, .lDropdown .lDropdown-menu > li,
    .aDropdown .aDropdown-menu > li,
    .sDropdown .sDropdown-menu > li, .ipDropdown .ipDropdown-menu > li {
        border-bottom: 1px solid #ebebeb;
        line-height: 2.4;
        text-align: left;
    }

    .bDropdown.forXs .bDropdown-menu > li, .iDropdown.forXs .iDropdown-menu > li,
    .mDropdown.forXs .mDropdown-menu > li, .lDropdown .lDropdown-menu > li {
        font-size: 12px;
    }

        .bDropdown .bDropdown-menu > li:hover, .sDropdown .sDropdown-menu > li:hover,
        .aDropdown .aDropdown-menu > li:hover,
        .mDropdown .mDropdown-menu > li:hover, .lDropdown .lDropdown-menu > li:hover,
        .ipDropdown .ipDropdown-menu > li:hover {
            background-color: #F5F5F6;
        }

        .bDropdown .bDropdown-menu > li a, .sDropdown .sDropdown-menu > li a,
        .aDropdown .aDropdown-menu > li a,
        .mDropdown .mDropdown-menu > li a, .lDropdown .lDropdown-menu > li a,
        .ipDropdown .ipDropdown-menu > li a {
            padding: 5px 20px 5px 12px;
            margin: 0;
            transition: all 300ms ease-in-out 0s;
            clear: both;
            line-height: 1.42857;
            font-weight: normal;
        }

        .bDropdown .bDropdown-menu > li div, .mDropdown .mDropdown-menu > li div, .lDropdown .lDropdown-menu > li div {
            padding: 5px 20px 5px 12px;
            margin: 0;
            transition: all 300ms ease-in-out 0s;
            clear: both;
            line-height: 1.42857;
            font-weight: normal;
            cursor: pointer;
        }

        .lDropdown .lDropdown-menu > li a {
            line-height: 0;
        }

    .bDropdown.forXs, .iDropdown.forXs {
        float: right;
        margin-top: -6px;
    }

        .bDropdown.forXs .bDropdown-btn, .iDropdown.forXs .iDropdown-btn {
            background-color: transparent;
        }

        .bDropdown.forXs .btn.btn-white {
        }

    .itemsContent .check {
        margin-left: -5px;
    }

    .bDropdown.forXs .btn.btn-white:hover, .iDropdown.forXs .btn.btn-white:hover, .lDropdown.forXs .btn.btn-white:hover {
        margin-top: 1px;
        margin-right: 1px;
        border: none;
    }

    .bDropdown.forXs .btn.btn-white:focus, .iDropdown.forXs .btn.btn-white:focus, .lDropdown.forXs .btn.btn-white:focus {
        margin-top: 1px;
        margin-right: 1px;
        border: none;
    }

    .bDropdown.forXs.open .btn.btn-white:focus, .iDropdown.forXs.open .btn.btn-white:focus {
        border: 1px solid #fff;
    }

    /*bDropdown - end*/


    .btn-large.btn-white.dropdown-toggle {
        border-left-color: transparent;
    }

    .largedd.dropdown-menu > li > a:hover,
    .largedd.dropdown-menu > li > a:focus {
        background-color: #ebebeb;
    }

    .btn-large.btn-white:active, .btn-large.btn-white.active, .open .dropdown-toggle.btn-white.btn-large {
        background-color: transparent;
    }

    .table-bordered > tbody > tr > td.rightAlign {
        text-align: right;
    }

    .timerTitle {
        margin-right: 10px;
    }

    #table-for-title {
        margin-bottom: 0;
    }

    .mail-env .mail-body .mail-header .mail-links {
        width: 29%;
    }

    .mail-env .mail-body .mail-header .mail-title {
        width: 63%;
    }

    .svoInfoTbl, .infoTbl {
        width: 100%;
    }

        .svoInfoTbl td, .infoTbl td {
            padding: 3px;
            vertical-align: top;
            color: #555;
            word-wrap: break-word;
            max-width: 300px;
        }

            .svoInfoTbl td.control-label, .infoTbl td.control-label {
                width: 110px;
            }

            .infoTbl td:nth-child(2) {
                min-width: 125px;
            }

            .infoTbl td:nth-child(4) {
                max-width: 125px;
            }

    .modal-dialog.bDialog {
        width: 425px;
    }

    .bDialog .modal-body {
        overflow-y: auto;
        padding: 10px 20px;
    }

    [disabled].form-control, [readonly].form-control, fieldset[disabled] .form-control {
        border: none;
        cursor: default;
    }

    .validation-summary-errors ul {
        padding: 0;
    }

        .validation-summary-errors ul li {
            list-style: none;
        }

    .blockquote-gold .validation-summary-errors {
        margin-top: -25px;
    }

        .blockquote-gold .validation-summary-errors ul li {
            list-style: none;
            font-size: 14px;
        }

    .blockquote-gold.dAccountxs {
        padding: 20px 15px 5px;
    }

        .blockquote-gold.dAccountxs img {
            margin-right: 10px;
            margin-top: -15px;
        }

    .blockquote-gold img {
        margin-right: 10px;
        margin-top: -5px;
    }

    .gActualHrs {
        float: left;
        padding-top: 7px;
    }

    .isArchived .gActualHrs {
        min-width: 78px;
    }

    .tabs-vertical + .tab-content {
        padding-left: 15px;
    }

    .btn-white {
        border: 1px solid transparent;
    }

    pre.description {
        background-color: transparent;
        border: medium none;
        color: #555555;
        font-family: inherit;
        font-size: inherit;
        margin: 0;
        padding: 0;
        white-space: pre-wrap;
        word-break: keep-all;
    }

    .chrome pre {
        word-break: break-word;
    }

    .safari pre {
        word-break: break-word;
    }
    /*comments - start*/
    .sNotesInputContainer div {
        min-height: 50px;
    }

    .sNotesInputContainer a {
        float: right;
        margin-top: 10px;
    }

    .sNoteContainer pre {
        background-color: transparent;
        border: none;
        margin: 0;
        padding: 0 0 0 46px;
        color: #344054;
        font-size: 13px;
        line-height: 1.6;
        font-family: inherit;
        white-space: pre-wrap;
        word-break: normal;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

#detailContainer .sNotesInputContainer textarea {
    height: 200px;
    max-height: 250px;
}

    /* Site note card: avatar + name/date/time (and edit) on top, note text below */
    .sNoteContainer {
        box-sizing: border-box;
        clear: both; /* start below the floated #editNotesPanel when a note above is being edited */
        width: 100%;
        margin-bottom: 12px;
        padding: 14px 16px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
    }

        .sNoteContainer:hover {
            border-color: #dfe3e8;
            box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
        }

    .sNoteInfo {
        display: flex;
        align-items: center;
        min-height: 0;
        margin-bottom: 10px;
        color: #667085;
        font-size: 12px;
    }

    .sNoteAvatar {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-right: 10px;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.5px;
        line-height: 1;
    }

    .sNoteAvatar0 { background-color: #fdecec; color: #891818; }
    .sNoteAvatar1 { background-color: #e8f1fb; color: #1d4f91; }
    .sNoteAvatar2 { background-color: #e6f5ec; color: #1b6b43; }
    .sNoteAvatar3 { background-color: #fff1df; color: #8f4700; }
    .sNoteAvatar4 { background-color: #f0eafb; color: #5b3a9a; }
    .sNoteAvatar5 { background-color: #e3f4f5; color: #11656d; }

    .sNoteMeta {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .sNoteAuthor {
        color: #101828;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    .sNoteDate {
        margin-top: 2px;
        color: #667085;
        font-size: 12px;
        line-height: 1.3;
    }

    .sNoteInfo .sNoteEdit {
        flex-shrink: 0;
        margin-left: auto;
        padding: 6px 8px !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 6px;
        line-height: 1;
        opacity: 0.55;
        transition: opacity 0.15s ease, background-color 0.15s ease;
    }

        .sNoteInfo .sNoteEdit:hover,
        .sNoteContainer:hover .sNoteEdit {
            opacity: 1;
        }

        .sNoteInfo .sNoteEdit:hover {
            background-color: #f2f4f7 !important;
        }

    @media (max-width: 480px) {
        .siteNotesContainer {
            padding: 10px !important;
        }

        .sNoteContainer {
            padding: 12px;
        }

        .sNoteContainer pre {
            padding-left: 0;
        }

        .sNoteAvatar {
            width: 32px;
            height: 32px;
            font-size: 12px;
        }

        .sNoteAuthor {
            font-size: 13px;
        }

        .sNoteInfo .sNoteEdit {
            opacity: 1;
        }
    }

    /* Site images gallery (.miGallery) - start */
    .miGallery .image-categories {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 0 0 16px 0 !important;
        padding: 0 0 12px 0;
        border-bottom: 1px solid #eaecf0 !important;
    }

        .miGallery .image-categories .miFilterLabel {
            margin-right: 8px;
            color: #667085;
            font-size: 12px;
        }

        .miGallery .image-categories a {
            display: inline-block;
            margin: 3px 6px 3px 0;
            padding: 5px 12px;
            background-color: #fff;
            border: 1px solid #e4e7ec;
            border-radius: 999px;
            color: #344054;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.4;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        }

            .miGallery .image-categories a:hover {
                background-color: #f9fafb;
                border-color: #d0d5dd;
                color: #101828;
            }

            .miGallery .image-categories a.active {
                background-color: #fdecec;
                border-color: #f3c4c4;
                color: #891818;
                font-weight: 600;
            }

    /* Time Sheets: Add / Export to CSV and the time sheet table end on the same line as Start Work in the header
       (10px in from the right edge); the table fills the width instead of 99% / max 1500px */
    .miTsToolbar {
        width: auto !important;
        max-width: none;
        float: none !important;
        overflow: hidden;
        margin-bottom: 6px;
        padding-right: 10px !important;
    }

    #workHistoryDiv.miTimeSheet {
        width: auto !important;
        max-width: none !important;
        margin-right: 10px;
    }

        /* the header cells carry fixed inline widths (Description min 250px) that made the table scroll sideways at 125%:
           let the columns size to their content */
        #workHistoryDiv.miTimeSheet .miTimeSheetTable > thead > tr > * {
            width: auto !important;
            min-width: 0 !important;
        }

    @media (max-width: 1599px) {
        #workHistoryDiv.miTimeSheet .miTimeSheetTable > thead > tr > * {
            white-space: normal !important;
        }
    }

    /* Task / Service Order detail lists - Items, Repair Items, Site Items, Time Sheets: the list scrolls inside its panel
       (as tall as the screen allows) instead of growing the page, and its header row stays visible at the top */
    #detailContent .miTablePanel,
    #detailContent #workHistoryDiv.miTimeSheet {
        max-height: max(320px, calc(100vh - 280px));
        overflow: auto;
    }

        #detailContent .miTablePanel tr.tableHead > td,
        #detailContent .miTablePanel tr.tableHead > th,
        #detailContent #workHistoryDiv.miTimeSheet .miTimeSheetTable > thead > tr > * {
            position: sticky;
            top: 0;
            z-index: 3;
            background-color: #f9fafb;
            box-shadow: inset 0 -1px 0 #eaecf0;
        }

    /* Items tab toolbar: the sort button (right: -5px inline) sat past the content card edge; line it up with Start Work,
       and keep the "Items : n" count just left of it */
    .sortByDropdownParent > div {
        right: 10px !important;
    }

    .itemFilters .more {
        right: 70px !important;
        text-align: right;
    }

        /* right edge lines up with Start Work in the header above */
        .miGallery .image-categories .miAddBtn {
            margin-left: auto;
            margin-right: 10px;
            float: none;
        }

    .miImageGrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        grid-gap: 16px;
        padding: 0 20px;
    }

    /* overflow stays visible so the Preview / Delete tooltips are not cut off at the card edge */
    .miImageCard {
        display: flex;
        flex-direction: column;
        height: 100%;
        margin: 0;
        overflow: visible;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

        .miImageCard:hover {
            box-shadow: 0 8px 20px rgba(16, 24, 40, 0.10);
            transform: translateY(-2px);
        }

    .miImageThumb {
        position: relative;
    }

        /* whole photo always visible: fitted inside the frame, never cropped */
        .miImageThumb .miImageLink {
            display: block;
            width: 100%;
            height: 190px;
            padding: 6px;
            background-color: #f2f4f7;
            border-radius: 10px 10px 0 0;
            cursor: zoom-in;
        }

        .miImageThumb img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    /* date sits below the photo so it never covers it */
    .miImageDate {
        padding: 8px 12px 0 12px;
        color: #667085;
        font-size: 12px;
        font-weight: 500;
    }

    /* no caption row below (phone and SI pages): give the date some bottom space */
    .miImageThumb:last-child .miImageDate {
        padding-bottom: 10px;
    }

    .miImageActions {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 2;
        display: flex;
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .miImageCard:hover .miImageActions,
    .miImageActions:focus-within {
        opacity: 1;
    }

    .miImageAction {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-left: 6px;
        background-color: rgba(255, 255, 255, 0.92);
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
        color: #344054 !important;
        font-size: 14px;
        text-decoration: none !important;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .miImageAction:hover {
            background-color: #fff;
            color: #101828 !important;
        }

        .miImageAction.delete:hover {
            background-color: #cc2424;
            color: #fff !important;
        }

        .miImageAction i:before {
            margin: 0;
        }

    .miImageCaption {
        display: flex;
        align-items: center;
        padding: 10px;
    }

        .miImageCaption .textAreaStyle {
            /* undo the absolute positioning the image views' own .textAreaStyle rule applies */
            position: static;
            left: auto;
            bottom: auto;
            width: auto;
            flex: 1;
            min-width: 0;
            height: 34px;
            padding: 7px 10px;
            background-color: #fff;
            border: 1px solid #e4e7ec;
            border-radius: 6px;
            color: #344054;
            font-size: 12px;
            line-height: 18px;
            overflow: hidden;
            white-space: nowrap; /* one line; otherwise a wrapped 2nd line peeks through the bottom padding */
            resize: none;
            outline: none;
            cursor: text;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }

            .miImageCaption .textAreaStyle:hover {
                border-color: #d0d5dd;
            }

            .miImageCaption .textAreaStyle:focus {
                border-color: #e08a8a;
                box-shadow: 0 0 0 3px rgba(204, 36, 36, 0.12);
            }

            .miImageCaption .textAreaStyle[readonly] {
                padding-left: 0;
                background-color: transparent;
                border-color: transparent;
                box-shadow: none;
                cursor: default;
            }

        .miImageCaption .miCaptionSave {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            min-width: 0 !important;
            margin-left: 8px;
            padding: 0 !important;
            border-radius: 6px !important;
            line-height: 1;
        }

            .miCaptionSave img {
                width: 14px;
            }

        /* read-only caption (SI image pages) */
        .miImageCaption .miCaptionText {
            min-width: 0;
            overflow: hidden;
            color: #344054;
            font-size: 12px;
            line-height: 18px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    /* "no images for your filter" message on the SI image pages */
    .miImageGrid .imageVisibleCheck {
        grid-column: 1 / -1;
        margin-left: 0;
        color: #667085;
    }

    /* IE11 only (SI v24 shows the image pages in the IE WebBrowser control): IE has no CSS grid, object-fit or
       :focus-within, so cards stacked full width with stretched photos and the Preview icon never showed.
       Only IE10/11 match -ms-high-contrast, so other browsers never apply these rules. */
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .miImageGrid {
            padding: 0 12px;
        }

            .miImageGrid > .imageContent {
                display: inline-block;
                width: 226px;
                margin: 0 6px 16px 6px;
                vertical-align: top;
            }

        /* fit the whole photo inside the frame, centred (object-fit: contain) */
        .miImageThumb .miImageLink {
            position: relative;
        }

        .miImageThumb img {
            position: absolute;
            top: 6px;
            right: 6px;
            bottom: 6px;
            left: 6px;
            width: auto;
            height: auto;
            max-width: calc(100% - 12px);
            max-height: calc(100% - 12px);
            margin: auto;
        }

        .miImageCard:hover .miImageActions {
            opacity: 1;
        }
    }

    /* Site documents list */
    .miDocList {
        padding: 0 20px;
    }

    .miDocRow {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding: 12px 14px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
    }

        .miDocRow:hover {
            border-color: #dfe3e8;
            box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
        }

    .miDocIcon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: 14px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-decoration: none !important;
    }

    .miDocIcon-pdf { background-color: #fdecec; color: #b42318 !important; }
    .miDocIcon-doc { background-color: #e8f1fb; color: #1d4f91 !important; }
    .miDocIcon-xls { background-color: #e6f5ec; color: #1b6b43 !important; }
    .miDocIcon-vsd { background-color: #f0eafb; color: #5b3a9a !important; }
    .miDocIcon-txt { background-color: #f2f4f7; color: #475467 !important; }

    .miDocInfo {
        flex: 1;
        min-width: 0;
    }

    .miDocName {
        display: block;
        color: #101828 !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
        word-wrap: break-word;
        overflow-wrap: anywhere;
        text-decoration: none !important;
    }

        .miDocName:hover {
            color: #cc2424 !important;
        }

    .miDocMeta {
        margin-top: 3px;
        color: #667085;
        font-size: 12px;
    }

        .miDocMeta i:before {
            margin-left: 0;
        }

    .miDocActions {
        display: flex;
        flex-shrink: 0;
        margin-left: 12px;
    }

    .miDocAction {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-left: 6px;
        background-color: #fff;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        color: #475467 !important;
        font-size: 15px;
        text-decoration: none !important;
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

        .miDocAction:hover {
            background-color: #f9fafb;
            border-color: #d0d5dd;
            color: #101828 !important;
        }

        .miDocAction.delete:hover {
            background-color: #fef3f2;
            border-color: #fecdca;
            color: #b42318 !important;
        }

        .miDocAction i:before {
            margin: 0;
        }

    .miDocEmpty {
        margin: 10px 20px;
        padding: 36px 16px;
        border: 1px dashed #e4e7ec;
        border-radius: 12px;
        color: #667085;
        font-size: 14px;
        text-align: center;
    }

    .miDocEmptyIcon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin-bottom: 10px;
        background-color: #f2f4f7;
        border-radius: 50%;
        color: #98a2b3;
        font-size: 24px;
    }

        .miDocEmptyIcon i:before {
            margin: 0;
        }

    /* Time sheets (.miTimeSheet desktop table, .miTsPhone phone list) */
    #workHistoryDiv.miTimeSheet {
        margin-top: 10px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

        #workHistoryDiv.miTimeSheet .miTimeSheetTable {
            float: none !important;
            margin: 0 !important;
            border: none !important;
            background-color: transparent;
        }

            #workHistoryDiv.miTimeSheet .miTimeSheetTable > thead > tr > td {
                padding: 10px 12px;
                background-color: #f9fafb;
                border: none !important;
                border-bottom: 1px solid #eaecf0 !important;
                color: #475467;
                font-size: 11px;
                font-weight: 600;
                letter-spacing: 0.4px;
                text-transform: uppercase;
                white-space: nowrap;
            }

            #workHistoryDiv.miTimeSheet .miTimeSheetTable > tbody > tr > td {
                border: none !important;
                vertical-align: middle;
            }

            #workHistoryDiv.miTimeSheet .miTimeSheetTable > tbody > tr.workHistoryTr > td {
                padding: 12px;
                border-bottom: 1px solid #f2f4f7 !important;
                color: #344054;
            }

            #workHistoryDiv.miTimeSheet .miTimeSheetTable > tbody > tr.workHistoryTr:hover > td {
                background-color: #fcfcfd;
            }

        #workHistoryDiv.miTimeSheet pre {
            margin: 0;
            padding: 0;
            background-color: transparent;
            border: none;
            color: #344054;
            font-family: inherit;
        }

        /* keep dates and times on one line; the table scrolls sideways when narrow */
        #workHistoryDiv.miTimeSheet .startDateSpans,
        #workHistoryDiv.miTimeSheet .startDateStartSpans,
        #workHistoryDiv.miTimeSheet .startDateEndSpans {
            white-space: nowrap;
        }

        #workHistoryDiv.miTimeSheet .durationSpans {
            color: #101828;
            font-weight: 600;
        }

    .miTsInstaller {
        display: flex;
        align-items: center;
        min-width: 0;
    }

        .miTsInstaller .sNoteAvatar {
            width: 30px;
            height: 30px;
            margin-right: 8px;
            font-size: 11px;
        }

    .miTsInstallerName {
        color: #101828;
        font-weight: 600;
        white-space: nowrap;
    }

    .miPill {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        line-height: 18px;
        white-space: nowrap;
    }

        .miPill i:before {
            margin: 0 3px 0 0;
        }

    .miPill-yes { background-color: #e6f5ec; color: #1b6b43; }
    .miPill-no { background-color: #f2f4f7; color: #667085; }

    /* row actions: same look as the documents list buttons */
    .btn.miTsAction {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin: 0 0 0 6px !important;
        padding: 0 !important;
        background-color: #fff;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        color: #475467;
        font-size: 15px;
        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

        .btn.miTsAction:hover {
            background-color: #f9fafb;
            border-color: #d0d5dd;
            color: #101828;
        }

        .btn.miTsAction.delete:hover {
            background-color: #fef3f2;
            border-color: #fecdca;
            color: #b42318;
        }

        .btn.miTsAction i:before {
            margin: 0;
        }

    #workHistoryDiv.miTimeSheet .miTimeSheetTable > tbody > tr.miTsTotalRow > td {
        padding: 14px 12px;
    }

    .miTsTotal {
        display: inline-block;
        padding: 6px 14px;
        background-color: #f9fafb;
        border: 1px solid #eaecf0;
        border-radius: 8px;
        color: #101828;
        font-size: 14px;
        font-weight: 600;
    }

    #workHistoryDiv.miTimeSheet .miTimeSheetTable > tbody > tr > td.noResults {
        padding: 28px 12px !important;
        color: #667085;
        text-align: center;
    }

    /* phone: entries grouped by installer */
    .miTsPhone.table {
        border: none !important;
        border-collapse: separate;
        border-spacing: 0 8px;
    }

        .miTsPhone.table > tbody > tr > td {
            border: none !important;
        }

        .miTsPhone > tbody > tr.miTsGroupHead > td {
            padding: 12px !important;
            background-color: #fff;
            border-top: 1px solid #eaecf0 !important;
            border-bottom: 1px solid #eaecf0 !important;
            color: #101828;
            vertical-align: middle;
        }

            .miTsPhone > tbody > tr.miTsGroupHead > td:first-child {
                border-left: 1px solid #eaecf0 !important;
                border-radius: 10px 0 0 10px;
            }

            .miTsPhone > tbody > tr.miTsGroupHead > td:last-child {
                border-right: 1px solid #eaecf0 !important;
                border-radius: 0 10px 10px 0;
            }

        .miTsPhone .miTsGroupTotal {
            color: #475467;
            font-size: 12px;
            font-weight: 600;
        }

        .miTsPhone .miTsGroupToggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            margin-left: 8px;
            background-color: #f2f4f7;
            border-radius: 50%;
            color: #475467;
            cursor: pointer;
        }

            .miTsPhone .miTsGroupToggle:before {
                margin: 0;
            }

        .miTsPhone .miTsEvents.table {
            margin: 0;
            border: none !important;
            background-color: transparent;
        }

            .miTsPhone .miTsEvents.table > tbody > tr:not(.hideEditableTable) > td {
                padding: 4px 12px !important;
                border: none !important;
                color: #344054;
            }

            .miTsPhone .miTsEvents.table > tbody > tr.miTsEventHead > td {
                padding-top: 14px !important;
                border-top: 1px solid #eaecf0 !important;
                color: #101828;
                font-weight: 600;
            }

            .miTsPhone .miTsEvents .miTsLabel {
                color: #667085;
            }

            .miTsPhone .miTsEvents pre {
                margin: 0;
                padding: 0;
                background-color: transparent;
                border: none;
                color: #344054;
                font-family: inherit;
                font-size: 12px;
                white-space: pre-wrap;
            }

    /* Installers (.miTablePanel desktop table, .miInsCard phone cards) */
    .miTablePanel {
        margin-top: 10px;
        overflow-x: auto;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

        .miTablePanel .miInstallersTable {
            margin: 0 !important;
            border: none !important;
            background-color: transparent;
        }

            .miTablePanel .miInstallersTable > thead > tr > td {
                padding: 10px 12px;
                background-color: #f9fafb;
                border: none !important;
                border-bottom: 1px solid #eaecf0 !important;
                color: #475467;
                font-size: 11px;
                font-weight: 600;
                letter-spacing: 0.4px;
                text-transform: uppercase;
                white-space: nowrap;
            }

            .miTablePanel .miInstallersTable > tbody > tr > td {
                padding: 12px;
                border: none !important;
                border-bottom: 1px solid #f2f4f7 !important;
                color: #344054;
                vertical-align: middle;
            }

            .miTablePanel .miInstallersTable > tbody > tr:last-child > td {
                border-bottom: none !important;
            }

            .miTablePanel .miInstallersTable > tbody > tr.installers:hover > td {
                background-color: #fcfcfd;
            }

            .miTablePanel .miInstallersTable > tbody > tr > td.noResults {
                padding: 28px 12px !important;
                color: #667085;
                text-align: center;
            }

        .miTablePanel .miInstallersTable a[href^="mailto:"] {
            color: #475467;
        }

            .miTablePanel .miInstallersTable a[href^="mailto:"]:hover {
                color: #cc2424;
            }

        .miTablePanel .miInstallersTable .actualHrs {
            font-weight: 600;
        }

    .miPill-admin { background-color: #e8f1fb; color: #1d4f91; }

    /* Save (red) and Cancel buttons in the same square style; hiddenButton keeps them hidden until Edit */
    .btn.miTsAction.btn-danger {
        background-color: #cc2424;
        border-color: #cc2424;
        color: #fff;
    }

        .btn.miTsAction.btn-danger:hover {
            background-color: #a91e1e;
            border-color: #a91e1e;
            color: #fff;
        }

        .btn.miTsAction.btn-danger img {
            width: 14px;
            margin: 0 !important;
        }

    .btn.miTsAction.hiddenButton {
        display: none;
    }

    /* phone: one white card per installer */
    .tile-block.tile-dtools-red.miInsCard {
        overflow: hidden;
        margin-bottom: 10px;
        background: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        color: #344054;
    }

        .tile-block.miInsCard .tile-header {
            padding: 12px !important;
            background-color: #fff;
            border-bottom: 1px solid #f2f4f7;
        }

            .tile-block.miInsCard .tile-header a {
                color: #101828 !important;
                font-size: 14px;
                font-weight: 600;
            }

            .tile-block.miInsCard .tile-header .sNoteAvatar {
                display: flex;
                width: 32px;
                height: 32px;
                margin: 0 10px 0 0;
                font-size: 12px;
            }

            /* Neon makes every span in a tile header white; restore the avatar text colours */
            .tile-block.miInsCard .tile-header .sNoteAvatar0 { color: #891818; }
            .tile-block.miInsCard .tile-header .sNoteAvatar1 { color: #1d4f91; }
            .tile-block.miInsCard .tile-header .sNoteAvatar2 { color: #1b6b43; }
            .tile-block.miInsCard .tile-header .sNoteAvatar3 { color: #8f4700; }
            .tile-block.miInsCard .tile-header .sNoteAvatar4 { color: #5b3a9a; }
            .tile-block.miInsCard .tile-header .sNoteAvatar5 { color: #11656d; }

        .tile-block.miInsCard .tile-content {
            padding: 10px 12px !important;
            background-color: #fff;
            border-top: none;
        }

        .tile-block.miInsCard .xsInstallerList strong {
            color: #667085;
            font-weight: 500;
        }

        .tile-block.miInsCard .xsInstallerList a {
            color: #475467;
        }

    /* Site items (desktop table inside #updatePanel; editor rows are left as they are) */
    #updatePanel .miSiteItemsTable {
        margin: 0 !important;
        border: none !important;
        background-color: transparent;
    }

        #updatePanel .miSiteItemsTable > tbody > tr.tableHead > td {
            padding: 10px 12px !important;
            background-color: #f9fafb;
            border: none !important;
            border-bottom: 1px solid #eaecf0 !important;
            color: #475467;
            font-size: 11px !important;
            font-weight: 600;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        #updatePanel .miSiteItemsTable > tbody > tr.itemsContent > td {
            padding: 10px 12px !important;
            border: none !important;
            border-bottom: 1px solid #f2f4f7 !important;
            color: #344054;
        }

        #updatePanel .miSiteItemsTable > tbody > tr.itemsContent:hover > td {
            background-color: #fcfcfd;
        }

        #updatePanel .miSiteItemsTable pre.description {
            color: #344054;
        }

        #updatePanel .miSiteItemsTable > tbody > tr.miSiTotalRow > td {
            padding: 14px 12px !important;
            border: none !important;
        }

            #updatePanel .miSiteItemsTable > tbody > tr.miSiTotalRow > td span {
                color: #101828 !important;
                font-size: 14px !important;
            }

        #updatePanel .miSiteItemsTable > tbody > tr.hideInfoRow > td,
        #updatePanel .miSiteItemsTable > tbody > tr:has(> td > .info) > td {
            border: none !important;
        }

        #updatePanel .miSiteItemsTable .info {
            padding: 20px 8px;
            color: #667085;
            text-align: center;
        }

        #updatePanel .miSiteItemsTable .btn.miTsAction {
            width: 30px;
            height: 30px;
            margin: 0 0 0 4px !important;
        }

    .miSiteItemsPanel {
        margin-top: 6px;
    }

    /* Site items on phone: one white card per item */
    .tile-stats.miItemCard {
        margin-bottom: 10px;
        padding: 10px 12px !important;
        background-color: #fff !important;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        color: #344054;
    }

        .tile-stats.miItemCard:hover {
            background-color: #fff !important;
            box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
        }

        .tile-stats.miItemCard h6 {
            margin: 4px 0;
            color: #667085;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.5;
        }

        .tile-stats.miItemCard .spanFontColor {
            color: #101828;
            font-weight: 600;
        }

        .tile-stats.miItemCard pre.description {
            color: #344054;
        }

        .tile-stats.miItemCard .sitemBtnStyle {
            display: inline-flex;
            float: right;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            margin: 0 0 0 6px;
            padding: 0;
            background-color: #fff;
            border: 1px solid #e4e7ec;
            border-radius: 8px;
            color: #475467;
            font-size: 15px;
        }

            .tile-stats.miItemCard .sitemBtnStyle:hover {
                background-color: #f9fafb;
                border-color: #d0d5dd;
                color: #101828;
            }

            .tile-stats.miItemCard .sitemBtnStyle.delete:hover {
                background-color: #fef3f2;
                border-color: #fecdca;
                color: #b42318;
            }

            .tile-stats.miItemCard .sitemBtnStyle i:before {
                margin: 0;
            }

    /* Custom fields: one panel, a row per field (label / value / edit) */
    .miFieldList {
        margin: 15px;
        padding: 4px 16px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

        .miFieldList > .miFieldRow {
            align-items: center !important;
            min-height: 56px;
            margin: 0 !important;
            padding: 10px 0;
            border-bottom: 1px solid #f2f4f7;
            line-height: normal !important;
        }

            .miFieldList > .miFieldRow:last-child {
                border-bottom: none;
            }

        .miFieldList .miFieldRow strong {
            color: #475467;
            font-size: 12px;
            font-weight: 600;
        }

        /* value cell: value on the left, buttons pushed to the right */
        .miFieldList .miFieldRow > div:last-child {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

            .miFieldList .miFieldRow > div:last-child > [id^="customFieldSpan_"],
            .miFieldList .miFieldRow > div:last-child > .custLbl,
            .miFieldList .miFieldRow > div:last-child > .date-and-time {
                margin-right: auto;
            }

        .miFieldList [id^="customFieldSpan_"] {
            color: #101828;
            font-size: 13px;
            overflow-wrap: anywhere;
        }

            .miFieldList [id^="customFieldSpan_"] a {
                color: #1d4f91;
            }

    @media (max-width: 480px) {
        .miFieldList {
            margin: 0;
            padding: 2px 12px;
        }
    }

    /* Approve tab */
    .miApproveStatus {
        margin: 10px;
        padding: 12px 14px !important;
        border: 1px solid;
        border-radius: 10px;
    }

    .miApproveStatus-ok { background-color: #ecfdf3; border-color: #abefc6; }
    .miApproveStatus-pending { background-color: #fffaeb; border-color: #fedf89; }

    .miApproveStatus .miApproveStatusText {
        margin-right: 12px;
        font-size: 14px;
        font-weight: 600;
        vertical-align: middle;
    }

        .miApproveStatus .miApproveStatusText i:before {
            margin: 0 6px 0 0;
        }

    .miApproveStatus-ok .miApproveStatusText { color: #067647; }
    .miApproveStatus-pending .miApproveStatusText { color: #b54708; }

    #showhidePanel .info {
        margin: 0 10px;
        color: #475467;
        font-size: 13px;
    }

    .panel.miApprovePanel {
        overflow: hidden;
        margin: 10px !important;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

        .panel.miApprovePanel > .panel-heading {
            background-color: #fff;
            border-bottom: 1px solid #f2f4f7;
        }

            .panel.miApprovePanel > .panel-heading .panel-title {
                color: #101828;
                font-size: 14px;
                font-weight: 600;
            }

            .panel.miApprovePanel > .panel-heading .panel-options button {
                background: transparent !important;
                color: #475467 !important;
            }

    .miApproveTable {
        margin: 0 !important;
        border: none !important;
    }

        .miApproveTable > tbody > tr.tableHead > td {
            padding: 10px 12px !important;
            background-color: #f9fafb;
            border: none !important;
            border-bottom: 1px solid #eaecf0 !important;
            color: #475467;
            font-size: 11px !important;
            font-weight: 600;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .miApproveTable > tbody > tr.itemsContent > td {
            padding: 10px 12px !important;
            border: none !important;
            border-bottom: 1px solid #f2f4f7 !important;
            color: #344054;
        }

        .miApproveTable pre.description {
            color: #344054;
        }

        .miApproveTable > tbody > tr.miApTotalRow > td {
            padding: 14px 12px !important;
            border: none !important;
        }

            .miApproveTable > tbody > tr.miApTotalRow > td span {
                color: #101828 !important;
                font-size: 14px !important;
            }

        .miApproveTable > tbody > tr.hideInfoRow > td,
        .miApproveTable > tbody > tr:has(> td > .info) > td {
            border: none !important;
        }

        .miApproveTable .info {
            padding: 20px 8px;
            color: #667085;
            text-align: center;
        }

    /* signing area (wrapper also carries hideSignaturePanel, so it hides with its contents) */
    .miSignCard {
        clear: both;
        max-width: 420px;
        margin: 10px;
        padding: 16px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

        .miSignCard > * {
            margin-left: 0 !important;
        }

        .miSignCard > div:last-child {
            margin-bottom: 0 !important;
        }

        .miSignCard > label {
            color: #101828 !important;
            font-size: 13px;
        }

        .miSignCard #divSignature {
            margin-top: 6px;
            background-color: #f9fafb;
            border: 1px dashed #d0d5dd !important;
            border-radius: 8px;
        }

    #showSignature.miSignedCard {
        margin: 10px;
        padding: 16px 16px 0 16px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

        #showSignature.miSignedCard #updateSignatureDate {
            color: #667085;
            font-size: 12px;
        }

        #showSignature.miSignedCard #divSign {
            background-color: #f9fafb;
            border: 1px dashed #d0d5dd !important;
            border-radius: 8px;
        }

    /* keep signature Save/Cancel hidden until Edit (custom.css .showForEditSignature) */
    .btn.miTsAction.showForEditSignature {
        display: none;
    }

    /* Items tab (desktop table, phone cards) */
    .miItemsTable {
        margin: 0 !important;
        border: none !important;
    }

        .miItemsTable > tbody > tr.tableHead > td {
            padding: 10px 12px !important;
            background-color: #f9fafb;
            border: none !important;
            border-bottom: 1px solid #eaecf0 !important;
            color: #475467;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .miItemsTable > tbody > tr.itemsContent > td {
            padding: 10px 12px !important;
            border: none !important;
            border-bottom: 1px solid #f2f4f7 !important;
            color: #344054;
            vertical-align: middle;
        }

        .miItemsTable > tbody > tr.itemsContent:hover > td {
            background-color: #fcfcfd;
        }

        /* child / sub-child rows: slightly tinted so the hierarchy reads */
        .miItemsTable > tbody > tr.itemsContent2 > td,
        .miItemsTable > tbody > tr.itemsContent3 > td {
            background-color: #fcfcfd;
        }

        .miItemsTable a.btn.btn-white {
            background-color: #fff;
            border: 1px solid #e4e7ec;
            border-radius: 8px;
            color: #475467;
        }

            .miItemsTable a.btn.btn-white:hover {
                background-color: #f9fafb;
                border-color: #d0d5dd;
                color: #101828;
            }

    /* Picked / Installed check badge (hidden for un-picked / un-installed, same as the old image) */
    .miCheck {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        background-color: #e6f5ec;
        border-radius: 50%;
        color: #1b6b43;
        font-size: 12px;
    }

        .miCheck i:before {
            margin: 0;
        }

    .unPickedItem .miCheck,
    .unInstalledItem .miCheck {
        display: none;
    }

    /* SVO phone item cards */
    .row.itemGroupContent.miItemGroupCard {
        margin: 0 0 10px 0;
        padding: 10px 4px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

    .miItemGroupCard .forTitle strong,
    .itemContainer .forTitle strong {
        color: #667085;
        font-weight: 500;
    }

    .miItemGroupCard .forContent,
    .itemContainer .forContent {
        color: #101828;
    }

    /* General tab: same panel as custom fields, rows keep their own layout */
    .miGeneral > .row {
        margin: 0 !important;
        padding: 8px 0;
        border-bottom: 1px solid #f2f4f7;
    }

        .miGeneral > .row:last-child {
            border-bottom: none;
        }

        .miGeneral > .row > div:first-child strong {
            color: #475467;
            font-size: 12px;
            font-weight: 600;
        }

    /* table panel inside an Approve panel: no second frame */
    .miApprovePanel .miTablePanel {
        margin-top: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* Checklist tab (markup unchanged; scripts copy rows around) */
    #table-container {
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

        #table-container #displayTable > thead > tr:first-child > th {
            background-color: transparent;
            border-bottom: none;
        }

        #table-container #checklistName {
            color: #101828;
            font-size: 18px;
            font-weight: 600;
        }

        #table-container #displayTable > thead > tr.tableHead > th {
            background-color: #f9fafb;
            border-top: none;
            border-bottom: 1px solid #eaecf0;
            color: #475467;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        #table-container #displayTable > tbody > tr > td {
            border-top: 1px solid #f2f4f7;
            color: #344054;
        }

        #table-container #displayTable > tbody > tr.parent > td.parent {
            color: #101828;
            font-weight: 600;
        }

    /* phone checklist: one card per parent item */
    .checklistItem.parent {
        padding: 10px 15px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

        .checklistItem .checklistItemHeader strong {
            color: #101828;
        }

        .checklistItem .itemDetail1 {
            color: #667085;
        }

    /* Checklist tab, web: toolbar buttons, expand / collapse toggles, rows and status colours */
    #table-container #displayTable > thead > tr:first-child > th {
        padding: 16px 16px 12px !important;
        vertical-align: middle;
    }

    #table-container #checklistName {
        margin: 0;
    }

    #table-container #displayTable > thead .btn {
        margin-left: 6px;
        border-radius: 8px;
    }

        #table-container #displayTable > thead .btn-default {
            background-color: #fff;
            border: 1px solid #d0d5dd;
            color: #344054;
        }

            #table-container #displayTable > thead .btn-default:hover {
                background-color: #f9fafb;
            }

            #table-container #displayTable > thead .btn-default.btn-icon i {
                background-color: transparent;
                color: #475467;
            }

    #table-container #displayTable > tbody > tr > td {
        padding: 8px 10px;
        font-size: 13px;
    }

    #table-container #displayTable > tbody > tr.parent > td {
        background-color: #fcfcfd;
    }

    #table-container #displayTable > tbody > tr:hover > td {
        background-color: #f9fafb;
    }

    #table-container #displayTable .childToggler {
        display: inline-flex;
        float: none;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin: 0 8px 0 0;
        padding: 0;
        background-color: #fff;
        border: 1px solid #d0d5dd;
        border-radius: 6px;
        color: #475467;
        vertical-align: middle;
        transform: none;
        bottom: 0;
    }

        #table-container #displayTable .childToggler .glyphicon {
            top: 0;
            font-size: 9px;
        }

    #table-container #displayTable .form-control {
        height: 32px;
        border-color: #d0d5dd;
        border-radius: 6px;
        font-size: 12px;
    }

    #table-container #displayTable .checklistNotes,
    #checklistContainer #checklist .checklistNotes {
        background-color: #fff;
    }

    #table-container #displayTable .notesToggler {
        height: 32px;
        margin-top: -32px;
        border: none;
        color: #475467;
    }

    /* status list tinted by the selected status: In Progress, On Hold, Completed (Not Started stays plain) */
    #table-container select.checklistItemStatus:has(option[value="1"]:checked),
    #checklistContainer select.checklistItemStatus:has(option[value="1"]:checked) {
        background-color: #eff8ff;
        border-color: #b2ddff;
        color: #175cd3;
    }

    #table-container select.checklistItemStatus:has(option[value="2"]:checked),
    #checklistContainer select.checklistItemStatus:has(option[value="2"]:checked) {
        background-color: #fffaeb;
        border-color: #fedf89;
        color: #b54708;
    }

    #table-container select.checklistItemStatus:has(option[value="3"]:checked),
    #checklistContainer select.checklistItemStatus:has(option[value="3"]:checked) {
        background-color: #ecfdf3;
        border-color: #abefc6;
        color: #067647;
    }

    /* Checklist tab, phone (_ChecklistPhone): every item is a card, children indented under their parent,
       each label on the same line as its field */
    #checklistContainer #checklistName {
        margin: 4px 0 0;
        color: #101828;
        font-size: 18px;
        font-weight: 600;
    }

    #checklistContainer #checklistName + .row {
        display: flex;
        gap: 6px;
        margin: 10px 0 12px !important;
    }

        #checklistContainer #checklistName + .row > div {
            float: none;
            width: auto;
            padding: 0;
        }

            #checklistContainer #checklistName + .row > div:last-child {
                margin-left: auto;
            }

        #checklistContainer #checklistName + .row .btn {
            height: 32px;
            padding: 0 8px 0 30px;
            border-radius: 8px;
            font-size: 12px;
            line-height: 30px;
            white-space: nowrap;
        }

            #checklistContainer #checklistName + .row .btn i {
                display: flex;
                align-items: center;
                justify-content: center;
                top: 0;
                bottom: 0;
                width: 24px;
                height: auto;
                line-height: 1;
            }

        #checklistContainer #checklistName + .row .btn-default {
            background-color: #fff;
            border: 1px solid #d0d5dd;
            color: #344054;
        }

            #checklistContainer #checklistName + .row .btn-default i {
                background-color: transparent;
                color: #475467;
            }

    #checklistContainer #checklist .checklistItem,
    #checklistContainer #checklist [class*="subChildOf_"] {
        float: none;
        width: auto;
        margin: 0 0 8px !important;
        padding: 10px 12px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

    #checklistContainer #checklist .col-xs-offset-1 {
        margin-left: 14px !important;
        border-left: 3px solid #e4e7ec;
    }

    #checklistContainer #checklist .col-xs-offset-2 {
        margin-left: 28px !important;
        border-left: 3px solid #e4e7ec;
    }

    #checklistContainer #checklist .checklistItemHeader {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 8px;
    }

        #checklistContainer #checklist .checklistItemHeader strong {
            color: #101828;
            font-size: 14px;
        }

        #checklistContainer #checklist .checklistItemHeader .btn-xs {
            display: inline-flex;
            flex: none;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            margin: 0;
            padding: 0;
            background-color: #fff;
            border: 1px solid #d0d5dd;
            border-radius: 6px;
            color: #475467;
            transform: none;
        }

            #checklistContainer #checklist .checklistItemHeader .btn-xs .glyphicon {
                top: 0;
                font-size: 9px;
            }

    #checklistContainer #checklist .checklistItem > .row:not(.checklistItemHeader),
    #checklistContainer #checklist [class*="subChildOf_"] > .row:not(.checklistItemHeader) {
        display: flex;
        align-items: center;
        margin: 0 0 6px;
    }

        #checklistContainer #checklist .checklistItem > .row:not(.checklistItemHeader) > .col-xs-4,
        #checklistContainer #checklist [class*="subChildOf_"] > .row:not(.checklistItemHeader) > .col-xs-4 {
            width: 34%;
            margin: 0 !important;
            padding: 0 8px 0 0;
            color: #667085;
            font-size: 12px;
        }

        #checklistContainer #checklist .checklistItem > .row:not(.checklistItemHeader) > .col-xs-8,
        #checklistContainer #checklist [class*="subChildOf_"] > .row:not(.checklistItemHeader) > .col-xs-8 {
            width: 66%;
            padding: 0;
        }

    #checklistContainer #checklist .form-control {
        height: 34px;
        border-color: #d0d5dd;
        border-radius: 8px;
    }

    #checklistContainer #checklist .notesToggler {
        height: 34px;
        margin-top: -34px;
        border: none;
        color: #475467;
    }

    /* Setup page (Account/Setup): underline tabs, card panels */
    .editTempHeading {
        color: #101828 !important;
        font-weight: 600 !important;
    }

    .nav.nav-tabs.bordered.miTabs {
        border-bottom: 1px solid #eaecf0;
        background: transparent;
    }

        .nav.nav-tabs.bordered.miTabs > li > a {
            background-color: transparent;
            border: none !important;
            border-radius: 0;
            color: #475467;
            transition: color 0.15s ease, box-shadow 0.15s ease;
        }

            .nav.nav-tabs.bordered.miTabs > li > a:hover {
                background-color: transparent;
                color: #101828;
                box-shadow: inset 0 -2px 0 #d0d5dd;
            }

        .nav.nav-tabs.bordered.miTabs > li.active > a,
        .nav.nav-tabs.bordered.miTabs > li.active > a:hover,
        .nav.nav-tabs.bordered.miTabs > li.active > a:focus {
            background-color: transparent;
            color: #b42318;
            font-weight: 600;
            box-shadow: inset 0 -2px 0 #c62323;
        }

    /* Setup: title, tabs and tab content sit inside the content card with the same ~20px inset (the title row is a
       Bootstrap .row whose -15px margins left it on the card edge) */
    #content-area .editTempHeading {
        margin: 14px 0 8px 20px !important;
    }

    #content-area > .nav-tabs.miTabs {
        padding: 0 14px;
    }

    .miSetupContent {
        padding: 16px 14px 6px;
    }

        /* the Logo tab floats its upload box: the active tab grows around it so the card does not end above the logo */
        .tab-content.miSetupContent > .tab-pane.active {
            display: flow-root;
        }


        .miSetupContent .panel.panel-primary {
            overflow: hidden;
            background-color: #fff;
            border: 1px solid #eaecf0 !important;
            border-radius: 10px;
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        }

            /* a panel that only wraps another panel: no second frame */
            .miSetupContent .panel.panel-primary:has(> .panel-body > .panel) {
                background-color: transparent;
                border: none !important;
                box-shadow: none;
            }

            .miSetupContent .panel.panel-primary > .panel-heading {
                background-color: #fff;
                border-bottom: 1px solid #f2f4f7 !important;
            }

        .miSetupContent .panel-title {
            color: #101828 !important;
            font-size: 14px;
            font-weight: 600 !important;
        }

        .miSetupContent .control-label {
            color: #475467;
            font-weight: 500;
        }

        .miSetupContent .form-groups-bordered > .form-group,
        .miSetupContent .form-group {
            border-color: #f2f4f7 !important;
        }

        /* schedule statuses table header */
        .miSetupContent #siScheduleStatusesTab table thead tr:first-child td {
            background-color: #f9fafb;
            border-bottom: 1px solid #eaecf0;
            color: #475467;
            font-size: 11px;
            font-weight: 600 !important;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        .miSetupContent #siScheduleStatusesTab table tbody tr td {
            border-bottom: 1px solid #f2f4f7;
        }

        .miSetupContent #siScheduleStatusesTab .tile-stats2 {
            border-radius: 6px;
        }

        /* logo tab */
        /* logo preview: a 212px square (logos are 200 x 200) with the whole image fitted inside it, not a small image in a tall box */
        .miSetupContent #logoContainer {
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            width: 212px;
            height: 212px;
            min-height: 0 !important;
            margin-bottom: 10px;
            padding: 6px !important;
            background-color: #f9fafb;
            border: 1px dashed #d0d5dd;
            border-radius: 12px;
        }

            .miSetupContent #logoContainer img.profileLogo {
                width: 100%;
                height: 100%;
                max-width: none;
                max-height: none;
                margin: 0 !important;
                object-fit: contain;
            }


        /* custom period picker (Preferences > archive after N days) */
        .miSetupContent .periodCmb {
            border-color: #d0d5dd !important;
            border-radius: 6px !important;
        }

        .miSetupContent .periodValues {
            overflow: hidden;
            border-color: #eaecf0 !important;
            border-radius: 8px;
            box-shadow: 0 12px 24px -6px rgba(16, 24, 40, 0.14);
        }

        .miSetupContent .contentList:hover,
        .miSetupContent .periodValues .selected {
            background-color: #fef3f2 !important;
            color: #b42318 !important;
        }

    /* Installers page (Account/ManageInstallers): same table panel, avatars, pills and actions as the Installers tab */
    /* icon and title side by side: the icon used to be nudged up inside a narrow <i>, so it covered the "I" */
    #installerHeader h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #101828;
        font-weight: 600;
    }

        #installerHeader h3 > i {
            display: inline-flex;
            flex: none;
        }

            #installerHeader h3 > i > img {
                position: static !important;
                top: auto !important;
                margin-left: 12px !important;
            }


    .miTablePanel.miManageInstallers .miInstallersTable > thead > tr > th {
        padding: 10px 12px !important;
        background-color: #f9fafb;
        border: none !important;
        border-bottom: 1px solid #eaecf0 !important;
        color: #475467 !important;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.4px;
        line-height: 1.4;
        text-transform: uppercase;
        vertical-align: middle;
    }

    .miTablePanel.miManageInstallers .miInstallersTable > tbody > tr > td {
        padding: 10px 12px !important;
        border: none !important;
        border-bottom: 1px solid #f2f4f7 !important;
        color: #344054;
        vertical-align: middle;
    }

    .miTablePanel.miManageInstallers .miInstallersTable > tbody > tr:last-child > td {
        border-bottom: none !important;
    }

    .miTablePanel.miManageInstallers .miInstallersTable > tbody > tr:hover > td {
        background-color: #fcfcfd;
    }

    /* keep the installers table off the content card border */
    #webInstallerGrid.row {
        margin-right: 0;
    }

    .miTablePanel.miManageInstallers .installerSendEmail {
        white-space: nowrap;
    }

    .miTablePanel.miManageInstallers .dropdownStyle {
        height: 32px;
        padding: 4px 10px;
        border-color: #d0d5dd;
        border-radius: 8px;
        color: #344054;
    }

    .label.miSeats {
        background-color: #fff !important;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        padding: 8px 14px !important;
        color: #475467 !important;
        font-size: 12px !important;
        font-weight: 500;
    }

        .label.miSeats p {
            margin: 0;
            line-height: 20px;
        }

        .label.miSeats span {
            color: #101828;
            font-weight: 700;
        }

    #seatsCountsInfo.label-default {
        margin-top: 12px;
        padding: 10px 14px !important;
        background-color: #f9fafb;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        color: #475467;
        font-weight: 400;
        white-space: normal;
    }

    /* phone: one white card per installer */
    #mobileInstallerGrid .tilesIns.tile-stats {
        padding: 14px !important;
        background: #fff;
        border: 1px solid #eaecf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        color: #475467;
        line-height: 1.7;
    }

        #mobileInstallerGrid .tilesIns.tile-stats:hover {
            background: #fff;
        }

        #mobileInstallerGrid .tilesIns.tile-stats .icon {
            color: #f2f4f7;
        }

        #mobileInstallerGrid .tilesIns.tile-stats h3 {
            margin: 0 0 6px 0;
            color: #101828;
            font-size: 15px;
            font-weight: 600;
        }

        #mobileInstallerGrid .tilesIns a[href^="mailto:"] {
            color: #475467;
        }

        #mobileInstallerGrid .tilesIns .btn.miTsAction:first-child {
            margin-left: 0 !important;
        }

        #mobileInstallerGrid .tilesIns > div {
            margin: 8px 0 4px 0;
        }

    /* My Profile page (Account/MyProfile + _UserAccounts); .miFormPage is shared by every form page */
    .miFormPage .panel.panel-primary,
    .panel.panel-primary.miAccountsPanel {
        overflow: visible; /* the Notification Day(s) list opens over the panel edge */
        padding: 0;
        background-color: #fff;
        border: 1px solid #eaecf0 !important;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

        .miFormPage .panel.panel-primary > .panel-heading,
        .panel.miAccountsPanel > .panel-heading {
            padding: 16px 20px;
            background-color: #fff;
            border-bottom: 1px solid #f2f4f7 !important;
        }

            .miFormPage .panel.panel-primary > .panel-heading .panel-title,
            .panel.miAccountsPanel > .panel-heading .panel-title {
                float: none;
                padding: 0;
                color: #101828 !important;
                font-size: 15px;
                font-weight: 600 !important;
            }

    .miProfileHead {
        display: flex;
        align-items: center;
    }

        .miProfileHead .sNoteAvatar {
            width: 44px;
            height: 44px;
            margin-right: 12px;
            font-size: 15px;
        }

    .miProfileSub {
        margin-top: 2px;
        color: #667085;
        font-size: 12px;
    }

    .miFormPage .control-label {
        color: #475467;
        font-weight: 500;
    }

    .miFormPage p.miHint {
        margin: 6px 0 0 0 !important;
        color: #667085 !important;
        font-size: 11.5px !important;
    }

    .miFormPage input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-top: 9px;
    }

    /* Notification Day(s) multi-select: same look as the other inputs */
    .miFormPage .ms-options-wrap > button,
    .miFormPage .ms-options-wrap > button:focus {
        min-height: 34px;
        border-color: #d0d5dd;
        border-radius: 6px;
        color: #344054;
    }

    .miFormPage .ms-options-wrap > button:after {
        right: 10px;
        border-top-color: #667085;
    }

    .miFormPage .ms-options-wrap > .ms-options {
        border: 1px solid #eaecf0;
        border-radius: 8px;
        box-shadow: 0 12px 24px rgba(16, 24, 40, 0.12);
    }

        .miFormPage .ms-options-wrap > .ms-options > ul li.selected label {
            background-color: #fef3f2;
            color: #b42318;
        }

    /* My Accounts */
    .panel.miAccountsPanel > .panel-body {
        padding: 0;
    }

    .miAccountsTable {
        margin: 0 !important;
        border: none !important;
    }

        .miAccountsTable > tbody > tr > td {
            padding: 12px 20px !important;
            border: none !important;
            border-bottom: 1px solid #f2f4f7 !important;
            color: #344054;
            vertical-align: middle !important;
        }

        .miAccountsTable > tbody > tr:last-child > td {
            border-bottom: none !important;
        }

        .miAccountsTable > tbody > tr.tableHead > td {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
            background-color: #f9fafb;
            border-bottom: 1px solid #eaecf0 !important;
            color: #475467;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.4px;
            text-align: left !important;
            text-transform: uppercase;
        }

        .miAccountsTable .miAccountName {
            margin-right: 6px;
            color: #101828;
            font-weight: 600;
        }

        .miAccountsTable a.miUnlink {
            position: static !important;
            display: inline-flex;
            align-items: center;
            padding: 5px 10px;
            background-color: #fff;
            border: 1px solid #fecdca;
            border-radius: 8px;
            color: #b42318;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
        }

            .miAccountsTable a.miUnlink:hover {
                background-color: #fef3f2;
            }

            .miAccountsTable a.miUnlink i:before {
                margin: 0 4px 0 0;
            }

    /* Form pages (.miFormPage): Change Password, expired password, Profile, installer info. Icon tile used in place of the avatar */
    .miHeadIcon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: 12px;
        background-color: #fef3f2;
        border-radius: 12px;
        color: #b42318;
        font-size: 20px;
    }

        .miHeadIcon i:before {
            margin: 0;
        }

    .miFormPage .panel.panel-primary > .panel-footer {
        padding: 14px 20px;
        background-color: #fff !important;
        border-top: 1px solid #f2f4f7;
        border-radius: 0 0 10px 10px;
    }

    .miFormPage #savePassword {
        margin-top: 4px;
    }

    /* SetAccountTimeZone / UnsubscribeEmail prompt boxes */
    .jumbotron.miPromptCard {
        margin-top: 30px;
        padding: 8px 28px 22px !important;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
        color: #475467;
    }

        .jumbotron.miPromptCard h3 {
            color: #101828;
            font-size: 20px;
            font-weight: 600;
        }

        .jumbotron.miPromptCard hr {
            border-top: 1px solid #f2f4f7 !important;
            border-bottom: none !important;
        }

        .jumbotron.miPromptCard p {
            color: #475467;
            font-size: 14px;
            line-height: 1.6;
        }

        .jumbotron.miPromptCard .btn {
            margin-left: 6px;
            border-radius: 8px;
        }

    /* Message / error pages (.miMessageCard) */
    .miMessageCard {
        display: flex;
        align-items: flex-start;
        max-width: 720px;
        margin: 30px 15px;
        padding: 22px 24px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
        text-align: left;
    }

    .miMessageIcon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-right: 16px;
        background-color: #f2f4f7;
        border-radius: 50%;
        color: #475467;
        font-size: 22px;
    }

        .miMessageIcon i:before {
            margin: 0;
        }

    .miMessage-danger .miMessageIcon { background-color: #fef3f2; color: #b42318; }
    .miMessage-warning .miMessageIcon { background-color: #fffaeb; color: #b54708; }

    .miMessageBody {
        min-width: 0;
        padding-top: 2px;
    }

    .miMessageTitle {
        margin: 0 0 6px 0;
        color: #101828;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.4;
    }

    .miMessageText {
        color: #475467;
        font-size: 14px;
        line-height: 1.6;
    }

        .miMessageBody > .miMessageText:first-child {
            padding-top: 12px;
            color: #101828;
            font-size: 15px;
        }

    .page-error-404 .miMessageCard {
        margin: 40px auto;
    }

    /* Pager (smartpaginator: page size, << < 1 2 3 > >>, "Viewing x to y of z") */
    .pagination.pagination-centered ul {
        display: inline-flex;
        align-items: center;
        margin: 0 2px;
        border-radius: 0;
        box-shadow: none;
        vertical-align: middle;
    }

        .pagination.pagination-centered ul > li {
            display: block;
            margin: 0 2px;
        }

            .pagination.pagination-centered ul > li > a,
            .pagination.pagination-centered div.navigator {
                display: inline-flex;
                float: none;
                align-items: center;
                justify-content: center;
                min-width: 32px;
                height: 32px;
                padding: 0 10px;
                background-color: #fff;
                border: 1px solid #e4e7ec !important;
                border-radius: 8px !important;
                color: #344054;
                font-size: 13px;
                font-weight: 500;
                line-height: 1;
                text-decoration: none;
                transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
            }

                .pagination.pagination-centered ul > li > a:hover,
                .pagination.pagination-centered div.navigator:hover {
                    background-color: #f9fafb;
                    border-color: #d0d5dd !important;
                    color: #101828;
                }

                .pagination.pagination-centered ul > li > a.active,
                .pagination.pagination-centered ul > li > a.active:hover {
                    background-color: #cc2424;
                    border-color: #cc2424 !important;
                    color: #fff;
                    cursor: default;
                }

            .pagination.pagination-centered div.navigator.disabled {
                opacity: 0.4;
                cursor: default;
            }

            /* arrows as chevrons: ul 2 = first/prev, ul 4 = next/last (phone pager has only first/last) */
            .pagination.pagination-centered div.navigator {
                font-size: 0;
            }

                .pagination.pagination-centered div.navigator:before {
                    font-size: 17px;
                    line-height: 1;
                }

        .pagination.pagination-centered ul:nth-of-type(2) > li:first-child div.navigator:before { content: "\00AB"; }
        .pagination.pagination-centered ul:nth-of-type(2) > li:nth-child(2) div.navigator:before { content: "\2039"; }
        .pagination.pagination-centered ul:nth-of-type(4) > li:nth-last-child(2) div.navigator:before { content: "\203A"; }
        .pagination.pagination-centered ul:nth-of-type(4) > li:last-child div.navigator:before { content: "\00BB"; }

    .pagination.pagination-centered select.pageSize {
        height: 32px;
        margin-right: 8px;
        padding: 0 6px;
        background-color: #fff;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        color: #344054;
        font-size: 13px;
        cursor: pointer;
    }

    /* the plugin appends an empty spacer div on every page change: keep only the first */
    .pagination.pagination-centered > div:empty {
        display: none;
    }

        .pagination.pagination-centered > div:empty:first-of-type {
            display: block;
            height: 8px;
        }

    .pagination.pagination-centered > span {
        color: #667085;
        font-size: 12px;
    }

    /* Dashboard Clients tree (Dashboard/_Client, loaded into #client in the sidebar) */
    #client .mail-sidebar-row .input-group-addon {
        border-radius: 6px;
        transition: background-color 0.15s ease;
    }

        #client .mail-sidebar-row .input-group-addon:hover {
            background-color: #eaecf0 !important;
        }

        #client .mail-sidebar-row .input-group-addon i {
            color: #475467 !important;
        }

    #client #searchContainer {
        padding: 0 6px 4px 0;
        background-color: transparent !important;
    }

    #client .mail-sideclient {
        scrollbar-width: thin;
    }

        #client .mail-sideclient > .mail-menu {
            padding: 6px 6px 10px;
            border-top: none;
        }

            #client .mail-sideclient > .mail-menu > li.taskType {
                position: relative;
                margin: 1px 0;
                border-bottom: none;
            }

                /* expand / collapse chevron */
                #client .mail-sideclient > .mail-menu > li > i[id^="arrow"] {
                    position: absolute !important;
                    top: 6px;
                    left: 4px;
                    z-index: 2;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 22px;
                    height: 22px;
                    margin-top: 0 !important;
                    border-radius: 6px;
                    color: #98a2b3 !important;
                    font-size: 12px;
                    cursor: pointer;
                    transition: background-color 0.15s ease, color 0.15s ease;
                }

                    #client .mail-sideclient > .mail-menu > li > i[id^="arrow"]:hover {
                        background-color: #eaecf0;
                        color: #344054 !important;
                    }

                    #client .mail-sideclient > .mail-menu > li > i[id^="arrow"]:before {
                        margin: 0;
                    }

                    #client .mail-sideclient > .mail-menu > li > i.entypo-down-open {
                        color: #b42318 !important;
                    }

                /* client row */
                #client .mail-sideclient > .mail-menu > li > a.unselect {
                    padding: 8px 8px 8px 30px;
                    border-radius: 8px;
                    color: #344054;
                    font-size: 13px;
                    font-weight: 500;
                    line-height: 1.35;
                    cursor: pointer;
                }

                    #client .mail-sideclient > .mail-menu > li > a.unselect:hover {
                        background-color: #f2f4f7;
                        color: #101828;
                    }

                #client .mail-sideclient > .mail-menu > li:hover > a.unselect:not(:hover) {
                    background-color: transparent;
                }

                #client .mail-sideclient > .mail-menu > li > a.unselect.selectClient {
                    background-color: #fef3f2;
                    color: #b42318;
                    font-weight: 600;
                }

                /* projects: indented under a guide line */
                #client .mail-sideclient > .mail-menu > li > ul {
                    margin: 2px 0 6px 15px;
                    padding: 0 0 0 8px;
                    border-left: 2px solid #eaecf0;
                    list-style: none;
                }

                    #client .mail-sideclient > .mail-menu > li > ul > li.toggle {
                        margin: 1px 0 !important;
                        border: none;
                    }

                        #client .mail-sideclient > .mail-menu > li > ul > li.toggle > a.unselect {
                            display: block;
                            padding: 6px 8px;
                            border-radius: 6px;
                            background-color: transparent;
                            color: #475467;
                            font-size: 12.5px;
                            font-weight: 400;
                            line-height: 1.4;
                            cursor: pointer;
                        }

                            #client .mail-sideclient > .mail-menu > li > ul > li.toggle > a.unselect:hover {
                                background-color: #f2f4f7;
                                color: #101828;
                            }

                            #client .mail-sideclient > .mail-menu > li > ul > li.toggle > a.unselect.selectClient {
                                background-color: #fef3f2;
                                color: #b42318;
                                font-weight: 600;
                            }

                            /* project number on its own line */
                            #client .mail-sideclient > .mail-menu > li > ul > li.toggle > a.unselect > span {
                                display: block;
                                color: #98a2b3;
                                font-size: 11.5px;
                                font-weight: 400;
                            }

                            #client .mail-sideclient > .mail-menu > li > ul > li.toggle > a.unselect.selectClient > span {
                                color: #d92d20;
                            }

                        #client .mail-sideclient > .mail-menu > li > ul > li.toggle > .noResults {
                            display: block;
                            padding: 6px 8px;
                            color: #98a2b3;
                            font-size: 12px;
                        }

            /* "more >>" */
            #client .mail-sideclient > .mail-menu > li.taskType[style*="float"] {
                margin: 8px 4px 0 0;
            }

                #client .mail-sideclient > .mail-menu > li.taskType[style*="float"] > a {
                    padding: 4px 12px;
                    background-color: #fff;
                    border: 1px solid #e4e7ec;
                    border-radius: 999px;
                    color: #b42318;
                    font-size: 12px;
                    font-weight: 500;
                    cursor: pointer;
                }

                    #client .mail-sideclient > .mail-menu > li.taskType[style*="float"] > a:hover {
                        background-color: #fef3f2;
                        border-color: #fecdca;
                    }

    /* Site item editor: Add / Edit Labor and Product panels (Task/_SiteItemEditor) */
    .panel.panel-primary.miEditorCard {
        background-color: #fff;
        border: 1px solid #eaecf0 !important;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

        .panel.miEditorCard > .panel-heading {
            padding: 12px 16px;
            background-color: #fff;
            border-bottom: 1px solid #f2f4f7 !important;
            border-radius: 10px 10px 0 0;
        }

            .panel.miEditorCard > .panel-heading .panel-title {
                padding: 6px 0;
                color: #101828 !important;
                font-size: 15px;
                font-weight: 600 !important;
            }

        .panel.miEditorCard > .panel-body {
            padding: 16px;
        }

            .panel.miEditorCard > .panel-body .control-label {
                color: #475467;
                font-weight: 500;
            }

        .panel.miEditorCard > .panel-footer {
            padding: 12px 16px;
            background-color: #fff !important;
            border-top: 1px solid #f2f4f7;
            border-radius: 0 0 10px 10px;
        }

    /* Item Information dialog and SVO info tables: label / value rows */
    .infoTbl td,
    .svoInfoTbl td {
        padding: 8px 6px;
        border-bottom: 1px solid #f2f4f7;
        color: #344054;
        vertical-align: top;
    }

        .infoTbl td.control-label,
        .svoInfoTbl td.control-label {
            color: #667085;
            font-weight: 500;
        }

    .infoTbl tr:last-child > td,
    .svoInfoTbl tr:last-child > td {
        border-bottom: none;
    }

    /* existing site items / labors pick list (Actual Hours dialog, time sheet dialog); headers in normal case */
    .oldSiteItemTable th {
        padding: 8px 6px;
        background-color: #f9fafb;
        border-bottom: 1px solid #eaecf0;
        color: #475467;
        font-size: 12px;
        font-weight: 600;
    }

    .oldSiteItemTable td {
        color: #344054;
    }

    /* Add Time Entry dialog, web: the dialog body's offsets (col margin 10px, row margins -15px, left 12px) push the site item
       area about 36px past the dialog edge, so it is narrowed to fit; new site item columns sized so Unit Price and Installer show */
    @media (min-width: 768px) {
        #addWorkHistory .conAddActualHrs,
        #addWorkHistory #oldItemContainer {
            width: calc(100% - 40px);
        }

        #addWorkHistory .conAddActualHrs .oldSiteItemTable.newTable {
            width: 100%;
            table-layout: fixed;
        }

            #addWorkHistory .conAddActualHrs .oldSiteItemTable.newTable th:nth-child(1) {
                width: 13% !important;
            }

            #addWorkHistory .conAddActualHrs .oldSiteItemTable.newTable th:nth-child(2) {
                width: 40% !important;
            }

            #addWorkHistory .conAddActualHrs .oldSiteItemTable.newTable th:nth-child(3) {
                width: 20% !important;
                white-space: nowrap;
            }

            #addWorkHistory .conAddActualHrs .oldSiteItemTable.newTable th:nth-child(4) {
                width: 27% !important;
            }

            #addWorkHistory .conAddActualHrs .oldSiteItemTable.newTable td {
                width: auto !important;
                overflow-wrap: break-word;
            }

        #addWorkHistory .conAddActualHrs #nDesc {
            width: 100% !important;
        }

        #addWorkHistory .conAddActualHrs #nUnitPrice {
            width: 100%;
            min-width: 0;
        }
    }

    /* Dashboard2 (Dashboard/Dashboard2): summary strip + donut cards (Views/Dashboard/_StatusDonutCard.cshtml).
       Status colours match the classic dashboard tiles; Deferred is one step darker than its tile so the slice shows on white. */
    .miDash2 .miDash2Switch {
        margin-left: 12px;
        color: #b42318;
        font-size: 12px;
        font-weight: 500;
        vertical-align: middle;
    }

    .miDash2Kpis {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 16px;
    }

    .miKpi {
        padding: 14px 16px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

    .miKpiLbl {
        display: block;
        color: #667085;
        font-size: 14px;
        font-weight: 600;
    }

        .miKpiLbl i:before {
            margin: 0 5px 0 0;
        }

    .miKpiNum {
        display: block;
        margin-top: 4px;
        color: #101828;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.2;
    }

    .miKpiSub {
        display: block;
        color: #98a2b3;
        font-size: 11.5px;
    }

    .miKpi.miKpiDanger {
        background-color: #fef3f2;
        border-color: #fecdca;
    }

        .miKpi.miKpiDanger .miKpiLbl,
        .miKpi.miKpiDanger .miKpiNum,
        .miKpi.miKpiDanger .miKpiSub {
            color: #b42318;
        }

    .miDash2Grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    @media (max-width: 1199px) {
        .miDash2Grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 767px) {
        .miDash2Kpis {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .miDashCard {
        padding: 16px 18px;
        background-color: #fff;
        border: 1px solid #eaecf0;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

    .miDashCardHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 12px;
    }

    .miDashTitle {
        color: #101828;
        font-size: 15px;
        font-weight: 600;
    }

        .miDashTitle i {
            color: #b42318;
        }

            .miDashTitle i:before {
                margin: 0 6px 0 0;
            }

    .miDashTotal {
        margin-left: 6px;
        color: #667085;
        font-size: 12px;
        font-weight: 400;
    }

    a.miDashOverdue {
        padding: 4px 12px;
        background-color: #fef3f2;
        border: 1px solid #fecdca;
        border-radius: 999px;
        color: #b42318;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
    }

        a.miDashOverdue:hover {
            background-color: #fee4e2;
            color: #912018;
        }

        a.miDashOverdue i:before {
            margin: 0 4px 0 0;
        }

    .miDashBody {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px;
    }

    /* Option A: 3D glass donut - stacked ring copies give the depth, the top face carries the slices (Chart.cshtml miDrawDonut) */
    .miDonut {
        position: relative;
        flex: none;
        width: 230px;
        height: 200px;
    }

        .miDonut .miDonutStage {
            position: absolute;
            top: -6px;
            left: 15px;
            width: 200px;
            height: 200px;
            perspective: 700px;
        }

        .miDonut .miDonutTilt {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transform: rotateX(48deg);
            transform-style: preserve-3d;
        }

        .miDonut svg.miLayer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .miDonut .miDonutFloor {
            position: absolute;
            right: 28px;
            bottom: 4px;
            left: 28px;
            height: 40px;
            border-radius: 50%;
            background: radial-gradient(ellipse at center, rgba(16, 24, 40, 0.28), rgba(16, 24, 40, 0) 70%);
            filter: blur(2px);
        }

        .miDonut .miDonutLabel {
            position: absolute;
            top: 85px;
            right: 0;
            left: 0;
            text-align: center;
            pointer-events: none;
        }

            .miDonut .miDonutLabel b {
                display: block;
                color: #101828;
                font-size: 22px;
                font-weight: 800;
                line-height: 1.1;
                text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
            }

            .miDonut .miDonutLabel span {
                color: #667085;
                font-size: 11px;
            }

        .miDonut .miSlice {
            cursor: pointer;
            transition: opacity 0.15s ease, filter 0.15s ease;
        }

            .miDonut .miSlice:hover {
                filter: brightness(1.08) saturate(1.1);
            }

    .miDashLegend {
        flex: 1;
        min-width: 210px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .miDashLegend li {
            display: grid;
            grid-template-columns: 12px minmax(0, 1fr) auto 48px;
            gap: 10px;
            align-items: center;
            padding: 6px 8px;
            border-radius: 8px;
            color: #344054;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }

            .miDashLegend li:hover {
                background-color: #f9fafb;
            }

            .miDashLegend li b {
                color: #101828;
                font-weight: 700;
                text-align: right;
            }

    .miLgPct {
        color: #667085;
        font-size: 14px;
        font-weight: 600;
        text-align: right;
    }

    .miDashLegend li.miLgZero,
    .miDashLegend li.miLgZero b {
        color: #98a2b3;
    }

    .miDashLegend li.miLgOverdue {
        margin-top: 4px;
        padding-top: 9px;
        border-top: 1px solid #f2f4f7;
        border-radius: 0;
    }

        .miDashLegend li.miLgOverdue,
        .miDashLegend li.miLgOverdue b,
        .miDashLegend li.miLgOverdue .miLgPct {
            color: #b42318;
        }


    /* swatch colour = the row's status colour (inline color) */
    .miSw {
        width: 12px;
        height: 12px;
        background-color: currentColor;
        border: 1.5px solid currentColor;
        border-radius: 3px;
        box-sizing: border-box;
    }

    .miDashLegend li .miLgName {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* phone: the cards are narrow, so long status names wrap instead of being cut off */
    @media (max-width: 767px) {
        .miDashLegend li .miLgName {
            white-space: normal;
        }
    }

    .miDashLegend li.miLgStatic {
        cursor: default;
    }



    /* a status at 0: dashed outline, the same as its slot in the donut */
    .miLgZero .miSw {
        background-color: transparent;
        border-style: dashed;
    }

    /* Phone views (*.Phone.cshtml, phone browsers below 768px) */
    @media (max-width: 767px) {
        /* iPhone Safari zooms the page when a box with text under 16px is tapped: on phones every text box, drop-down and text area is 16px
           (!important: page styles set 11-12px on many of them); the inner padding is trimmed so the bigger text still fits the 31px boxes,
           and placeholders stay a little smaller so the longer ones fit */
        input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
        select,
        textarea {
            font-size: 16px !important;
        }

        input.form-control,
        select.form-control {
            padding: 4px 6px;
            line-height: 1.25;
        }

        input::placeholder,
        textarea::placeholder {
            font-size: 14px;
        }

        /* Add Time Entry (_WorkHistoryDialog.Phone): its own "#fontsize .form-control" rule sets 11px !important (body outranks it); drop-downs
           take 2/3 of the row, and the date box and the new site item unit price get room for the 16px text */
        body #fontsize .form-control {
            font-size: 16px !important;
        }

        body #fontsize .col-xs-6:has(> select.form-control) {
            width: 66.66667%;
        }

        body #fontsize #startWorkHistoryDate {
            width: 112px !important;
        }

        body #fontsize #nUnitPrice {
            min-width: 64px;
        }

        body #fontsize #nDesc {
            width: 72px !important;
        }

        /* task / service order header: Start Work lines up with the header's right padding */
        .mail-env.xs .installerActualHrConainer {
            padding-right: 15px !important;
        }

        .mail-env.xs .hideInfoRow {
            padding: 8px 12px;
        }

        /* Task > Items (Items.Phone, _ApprovedItemDetail.Phone): the -10px / -13px margins pushed the list outside the card */
        .itemMainContainer > .panel-body {
            margin: 0 !important;
            padding: 0 12px 6px !important;
        }

        .itemMainContainer .itemGroupContent > div[id^="item"] {
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        /* toolbar as two rows: select-all, Update and expand / collapse; then Picked and Installed, labels centred on their lists */
        .itemMainContainer .filterContainer {
            position: relative;
            display: flex;
            float: none;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 10px;
            width: auto;
            margin-bottom: 10px;
        }

            .itemMainContainer .filterContainer > * {
                position: relative !important;
                float: none !important;
                top: auto !important;
                left: auto !important;
                margin: 0 !important;
            }

            .itemMainContainer .filterContainer > .dropdown {
                flex: 1 1 auto;
                order: 1;
            }

            .itemMainContainer .filterContainer > .expand {
                display: flex;
                order: 2;
                gap: 6px;
            }

                .itemMainContainer .filterContainer > .expand > button {
                    margin: 0 !important;
                }

            .itemMainContainer .filterContainer::after {
                content: "";
                order: 3;
                flex-basis: 100%;
                height: 0;
            }

            .itemMainContainer .filterContainer > .sDropdown {
                display: flex;
                order: 4;
                align-items: center;
                gap: 4px;
            }

                .itemMainContainer .filterContainer > .sDropdown > a.sDropdown-btn {
                    margin: 0 !important;
                }

        /* Approve: status line with its button, collapsible Items / Site Items headers */
        /* the page shows / hides the banners with an inline display, so flex only applies while one is shown;
           the message gets its own line and the button sits on the right under it */
        .miApproveStatus:not([style*="display: none"]) {
            display: flex !important;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

            .miApproveStatus .miApproveStatusText {
                flex: 1 1 100%;
                margin-right: 0;
            }

            .miApproveStatus .btn {
                position: relative !important;
                top: 0 !important;
                width: auto !important;
                margin-left: auto !important; /* stays on the right, also when it wraps under the text */
                height: 28px !important;
                padding: 0 12px !important;
                border-radius: 6px;
            }

                .miApproveStatus .btn > i {
                    position: static !important;
                    display: inline-block !important;
                    width: auto !important;
                    height: auto !important;
                    margin-right: 5px;
                    padding: 0 !important;
                    background: none !important;
                    line-height: 1 !important;
                }

                .miApproveStatus .btn .btnTextSize {
                    font-size: 12px !important;
                }

        .panel.miApprovePanel > .panel-heading {
            display: flex;
            align-items: center;
            padding: 10px 12px !important;
        }

            .panel.miApprovePanel > .panel-heading .panel-title {
                flex: 1 1 auto;
                float: none !important;
                padding: 0 !important;
            }

            .panel.miApprovePanel > .panel-heading .panel-options {
                flex: none;
                float: none !important;
                margin: 0 !important;
                padding: 0 !important;
            }

                .panel.miApprovePanel > .panel-heading .panel-options button {
                    padding: 0 !important;
                }

        /* signature pad: full card width (it was a fixed 300px); the canvas takes the same width, so jSignature draws at 1:1 */
        .miSignCard {
            display: flow-root;
        }

            .miSignCard #divSignature,
            #showSignature.miSignedCard #divSign {
                width: 100% !important;
            }

                .miSignCard #divSignature canvas.jSignature,
                #showSignature.miSignedCard #divSign canvas.jSignature {
                    width: 100% !important;
                }

        /* signed card in re-sign mode: pad across the card, Reset on the left and Save / Cancel on the right under it */
        #showSignature.miSignedCard #NewSignatureDiv {
            padding-left: 0 !important;
        }

        #showSignature.miSignedCard > div:last-child {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            margin: 10px 0 16px !important;
            text-align: right;
        }

            #showSignature.miSignedCard > div:last-child > .btn {
                position: static !important;
                float: none !important;
                margin: 0 !important;
            }

                #showSignature.miSignedCard > div:last-child > .btn:not(.miTsAction) {
                    order: -1;
                    margin-right: auto !important;
                }

            .miSignCard #chckAgree {
                float: left;
                margin: 2px 0 0;
            }

                .miSignCard #chckAgree + label,
                .miSignCard #chckAgree + span {
                    display: block;
                    top: 0 !important;
                    margin-left: 22px !important;
                }

        /* Custom Fields: label column wide enough for "Custom Field 12:" on one line */
        #customFieldContent .miFieldList > div > .col-xs-4 {
            width: 42%;
            padding-right: 8px !important;
        }

        #customFieldContent .miFieldList > div > .col-xs-8 {
            width: 58%;
        }

        /* Custom Fields in edit (the editor is shown with an inline display): the label goes on its own line and the editor
           with its Save / Cancel / Clear buttons uses the full width below it */
        .miFieldList .miFieldRow:has(> div:last-child > .custLbl:not([style*="display: none"])),
        .miFieldList .miFieldRow:has(> div:last-child > .date-and-time:not([style*="display: none"])) {
            flex-wrap: wrap;
            align-items: center !important;
            padding: 10px 0 !important;
        }

            .miFieldList .miFieldRow:has(> div:last-child > .custLbl:not([style*="display: none"])) > div:first-child,
            .miFieldList .miFieldRow:has(> div:last-child > .date-and-time:not([style*="display: none"])) > div:first-child {
                width: 100% !important;
                margin-bottom: 6px;
            }

            .miFieldList .miFieldRow:has(> div:last-child > .custLbl:not([style*="display: none"])) > div:last-child,
            .miFieldList .miFieldRow:has(> div:last-child > .date-and-time:not([style*="display: none"])) > div:last-child {
                width: 100% !important;
                flex-wrap: nowrap;
                gap: 6px;
            }

        .miFieldList .miFieldRow > div:last-child > .custLbl,
        .miFieldList .miFieldRow > div:last-child > .date-and-time {
            flex: 1 1 auto;
            width: auto !important;
            min-width: 0;
            margin: 0 !important;
        }

            .miFieldList .miFieldRow > div:last-child > .custLbl select,
            .miFieldList .miFieldRow > div:last-child > .custLbl input,
            .miFieldList .miFieldRow > div:last-child > .date-and-time input {
                width: 100% !important;
                min-width: 0 !important;
            }

            .miFieldList .miFieldRow > div:last-child > .custLbl select:not(.form-control) {
                height: 32px;
                padding: 4px 8px;
                background-color: #fff;
                border: 1px solid #d0d5dd !important;
                border-radius: 6px;
            }

        .miFieldList .miFieldRow > div:last-child > .btn.absBtn {
            flex: none;
            margin: 0 !important;
        }

        /* date fields keep Save / Cancel / Clear in their own wrapper */
        .miFieldList .miFieldRow > div:last-child > div.col-xs-12.zeroPadding {
            display: flex;
            flex: none;
            gap: 6px;
            width: auto !important;
            margin: 0 !important;
        }

            .miFieldList .miFieldRow > div:last-child > div.col-xs-12.zeroPadding > .btn {
                margin: 0 !important;
            }

        /* General in edit: the status list is sized to its longest status name */
        .miFieldList select.MyStatusSelection {
            width: 100% !important;
        }

        /* service order Site Items toolbar: the panel has 15px side padding, so the toolbar row uses part of it to keep
           Update, "Approved :" with its list and the two add buttons on one line */
        #siteItemsContent .showHideMainHeader {
            margin-right: -8px !important;
            margin-left: -8px !important;
        }

        #siteItemsContent #addnewLaborBtn {
            margin-right: 0 !important;
        }

        /* service order Items (Items tab and Approve > Items, _ItemDetail.Phone): toolbar wraps as a row instead of
           the absolutely placed Update button and fixed offsets */
        .miSvoItemFilters {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 10px;
            margin-bottom: 10px !important;
        }

            .miSvoItemFilters > * {
                float: none !important;
                margin: 0 !important;
            }

            .miSvoItemFilters > .dropdown {
                position: relative !important;
                top: auto !important;
                left: auto !important;
            }

            /* Update keeps the first line to itself; Picked and Installed go together on the second */
            .miSvoItemFilters > .dropdown:first-of-type {
                flex: 1 0 calc(100% - 30px);
            }

        /* service order Items / Repair Items: each item is a card (page rules remove the row borders, hence the ids) */
        .svoItemsContainer .row.itemGroupContent.miItemGroupCard,
        #itemsContainer > .row.itemGroupContent.miItemGroupCard {
            display: flow-root;
            margin: 0 0 10px !important;
            border: 1px solid #eaecf0 !important;
            border-radius: 10px;
        }

        /* item name with Info / Hide Info on the same line */
        .miItemGroupCard > table td:first-child {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

            .miItemGroupCard > table td:first-child > strong {
                flex: 1 1 auto;
                min-width: 0;
            }

            .miItemGroupCard > table td:first-child > a {
                flex: none;
                float: none !important;
                margin: 0 !important;
                white-space: nowrap;
            }

        /* item label / value rows: a label that wraps to two lines no longer pushes the next rows out of place */
        .mail-env.xs .forTitle {
            clear: left;
        }

        .miApprovePanel .forTitle {
            width: 42%;
        }

        .miApprovePanel .col-xs-8.forContent {
            width: 58%;
        }

        /* service order Site Items: add product / labor form as a card */
        #addNewProducts,
        #addNewLabor {
            padding: 10px !important;
            background-color: #fff;
            border: 1px solid #eaecf0 !important;
            border-radius: 10px;
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        }

        /* My Profile > accounts: room for the Disassociate button */
        .miAccountsTable > thead > tr > th,
        .miAccountsTable > tbody > tr > td,
        .miAccountsTable > tbody > tr > th {
            padding: 10px 8px !important;
        }

        .miAccountsTable td:nth-child(2) {
            word-break: break-all;
        }

        .miAccountsTable td:last-child,
        .miAccountsTable th:last-child {
            width: auto !important;
            min-width: 120px !important;
            white-space: nowrap;
        }

        .miAccountsTable a.miUnlink {
            padding: 5px 8px;
            white-space: nowrap;
        }

        /* Calendar: seven day columns fit the phone width; the date picker gets its own row above the title */
        .fc-grid th.fc-day-header {
            padding: 8px 2px 6px !important;
            font-size: 12px !important;
        }

        .fc-grid td.fc-day {
            padding: 0 !important;
        }

        .fc-grid .fc-day-number {
            padding: 6px 4px 2px !important;
            font-size: 12px !important;
            white-space: nowrap;
        }

        .calendardatePicker {
            left: 50% !important;
            margin: 6px 0 0 !important;
            transform: translateX(-50%);
        }

        #content-area > .calendardatePicker + .mail-env {
            padding-top: 44px;
        }

        /* Calendar date picker: 16px text, so iPhone Safari does not zoom the page when the box is tapped (it zooms on inputs under 16px);
           the box is widened to fit the larger week text (.form-control twice over the page's own .dateSelector width) */
        .calendardatePicker {
            width: 260px !important;
        }

        .calendardatePicker .dateSelector.form-control {
            width: 222px;
            height: 36px;
            padding: 6px 10px;
            font-size: 16px;
        }

        .calendardatePicker .btn-calendar {
            height: 36px;
            padding-top: 8px;
            padding-bottom: 8px;
        }

        /* Setup > Schedule Statuses: wider status column, the two check columns centred under their headers */
        .miSetupContent #siScheduleStatusesTab table tr > td:nth-child(1) {
            width: 36%;
        }

        .miSetupContent #siScheduleStatusesTab table tr > td:nth-child(2) {
            width: 24%;
        }

        .miSetupContent #siScheduleStatusesTab table tr > td:nth-child(3),
        .miSetupContent #siScheduleStatusesTab table tr > td:nth-child(4) {
            width: 20%;
            padding: 5px 2px !important;
            text-align: center;
        }

        .miSetupContent #siScheduleStatusesTab table thead tr:first-child td {
            padding: 8px 4px !important;
            line-height: 1.3;
            letter-spacing: 0 !important;
            vertical-align: middle;
        }

        .miSetupContent #siScheduleStatusesTab table input[type="checkbox"] {
            margin: 0 !important;
        }

        /* Setup > Notifications and Schedule Statuses: Save on the card's right edge (the column has margin-right: 20px) */
        .miSetupContent .tab-pane .col-md-6[style*="text-align: right"][style*="margin-right: 20px"] {
            margin-right: 0 !important;
            padding-right: 12px;
        }

        /* My Profile: the profile column has an inline padding-right: 0 for the desktop two-column layout */
        .miFormPage > .row > [class*="col-"] {
            padding-right: 15px !important;
        }
    }

    /* Show / hide password (passwordToggle.js): eye button inside the right end of a password input.
       .miPwField wraps the input on the change password pages; on sign in the input-group (.miPwGroup) holds the button. */
    .miPwField {
        position: relative;
        display: block;
    }

    .miPwField > .form-control.miPwToggle,
    .miPwGroup > .form-control.miPwToggle {
        padding-right: 40px;
    }

    /* Edge draws its own reveal button in password inputs */
    input.miPwToggle::-ms-reveal,
    input.miPwToggle::-ms-clear {
        display: none;
    }

    .miPwEye {
        position: absolute;
        top: 50%;
        right: 3px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 28px;
        margin-top: -14px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #667085;
        cursor: pointer;
        line-height: 1;
    }

        .miPwEye:hover {
            background-color: #f2f4f7;
            color: #344054;
        }

        .miPwEye[aria-pressed="true"] {
            color: #c62323;
        }

        .miPwEye:focus {
            outline: none;
        }

        .miPwEye:focus-visible {
            box-shadow: 0 0 0 2px rgba(204, 36, 36, 0.35);
        }

        .miPwEye svg {
            display: block;
        }

    /* Calendar, phone: week and day views show lists instead of their grids, month view shows bars (below); these first rules
       set the chip margins / insets the month bars use. Originally: chips keep the full title, wrapped inside the chip with the overdue dot on top (as before
       the restyle); the desktop chip insets (6px borders) and single-line ellipsis are taken off at this width (.fc-view twice: outranks the desktop rules in modern.css, which load later) */
    @media (max-width: 767px) {
        body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view .fc-event {
            margin-bottom: 3px !important;
            border-radius: 6px !important;
        }

            body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view .fc-event.fc-event-hori.fc-event-start {
                border-left-width: 2px !important;
                border-top-left-radius: 6px !important;
                border-bottom-left-radius: 6px !important;
            }

            body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view .fc-event.fc-event-hori.fc-event-end {
                border-right-width: 2px !important;
                border-top-right-radius: 6px !important;
                border-bottom-right-radius: 6px !important;
            }

            body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view .fc-event.fc-event-hori .fc-event-inner {
                padding: 4px 2px 4px 6px !important;
                line-height: 1.3 !important;
                white-space: normal !important;
                text-overflow: clip !important;
                overflow-wrap: break-word !important;
            }

            body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view .fc-event .fc-event-title {
                font-size: 10.5px !important;
            }

            body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view .fc-event .fc-event-inner img {
                display: block !important;
                width: 9px !important;
                height: 9px !important;
                margin: 0 0 3px !important;
            }

        /* month view: each item is a one-line chip (status colour bar + tint, as on desktop) showing the start of its title in the
           Setup calendar title format, cut off at the chip's edge without "..." (as Outlook does); overdue items keep a small red dot.
           Tapping a day or a chip lists that day's items in full under the grid (#phoneDayList, Views\Calendar\List.cshtml) */
        body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month .fc-event.fc-event-hori,
        body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month .fc-event.fc-event-hori.fc-event-start,
        body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month .fc-event.fc-event-hori.fc-event-end {
            overflow: hidden;
            border-radius: 3px !important;
            /* iPhone: no sticky hover shadow after a tap, no link preview on a long press */
            box-shadow: none;
            -webkit-touch-callout: none;
        }

            body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month .fc-event.fc-event-hori .fc-event-inner {
                padding: 1px 1px 1px 5px !important;
                overflow: hidden;
                line-height: 13px !important;
                white-space: nowrap !important;
                text-overflow: clip !important;
                overflow-wrap: normal !important;
            }

            body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month .fc-event.fc-event-hori .fc-event-title {
                font-size: 10px !important;
            }

            body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month .fc-event.fc-event-hori .fc-event-inner img {
                display: inline-block !important;
                width: 7px !important;
                height: 7px !important;
                margin: 0 2px 0 -2px !important;
                vertical-align: 1px !important;
            }

        body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month table tbody tr td.fc-day {
            cursor: pointer;
        }

        body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month table tbody tr td.fc-day.miSelectedDay {
            box-shadow: inset 0 0 0 2px #b42318;
        }

        /* "+N more" item under a day's bars: items over the bar limit for that day (List.cshtml setPhoneOverflow) */
        body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month .fc-event.fc-event-hori.fc-event-start.fc-event-end.miMoreEvent {
            background-image: none !important;
            border-left-width: 1px !important;
            border-right-width: 1px !important;
            border-radius: 4px !important;
        }

            /* wraps to two lines ("+11" / "more") when the day column is too narrow for one */
            body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month .fc-event.fc-event-hori.fc-event-start.fc-event-end.miMoreEvent .fc-event-inner {
                display: block !important;
                padding: 1px 0 !important;
                line-height: 13px !important;
                text-align: center;
                white-space: normal !important;
                overflow-wrap: normal !important;
            }

            body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month .fc-event.fc-event-hori.fc-event-start.fc-event-end.miMoreEvent .fc-event-title {
                color: #475467 !important;
                font-size: 10px !important;
                font-weight: 600;
            }

            body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month .fc-event.miMoreEvent .fc-event-time {
                display: none !important;
            }

        /* week and day views: the grid is replaced by #phoneDayList (one row per day / that day's items, Views\Calendar\List.cshtml);
           the day view's inline min-height (setDatePicker) would leave an empty gap */
        body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-basicWeek,
        body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-agendaDay {
            display: none !important;
        }

        body.page-body .calendar-env .calendar-body .fc-content {
            min-height: 0 !important;
        }

        .miWeekDay {
            padding-top: 10px;
            border-top: 1px solid #eaecf0;
        }

            .miWeekDay:first-child {
                padding-top: 0;
                border-top: none;
            }

            .miWeekDay .miDayListHeader {
                padding-bottom: 6px;
            }

            .miWeekDayToday .miDayListHeader {
                color: #b42318;
            }

        /* top of the calendar: the title (month / week / day) repeats the date picker above it, so it is hidden, and the
           Day / Week / Month row is kept tight, so the month grid and the start of the day list fit on the first screen */
        body.page-body .calendar-env .calendar-body .fc-header .fc-header-left {
            display: none !important;
        }

        body.page-body .calendar-env .calendar-body .fc-header .fc-header-right {
            padding: 4px 0 8px !important;
        }

        /* the page pulls the header up 10px (List.cshtml), which clips the top of the Day / Week / Month row when there is no hint */
        body.page-body .calendar-env .calendar-body table.fc-header {
            margin-top: 0 !important;
        }

        /* the list under the month grid / the week and day lists */
        .miDayList {
            margin: 12px 0 4px;
        }

        /* "Tap any day..." banner above the month calendar (#phoneDayHint): the key instruction on a phone, so it stands out */
        .miDayListHint {
            display: flex;
            align-items: center;
            margin: 0 0 2px;
            padding: 7px 10px;
            background-color: #fdeceb;
            border: 1px solid #f5b8b3;
            border-radius: 8px;
            color: #7a271a;
            font-size: 12.5px;
            line-height: 1.35;
        }

            .miDayListHint .fa {
                flex: none;
                margin-right: 8px;
                color: #b42318;
                font-size: 20px;
            }

            .miDayListHint b {
                font-weight: 700;
            }

        .miDayListHeader {
            padding: 0 2px 8px;
            color: #101828;
            font-size: 14px;
            font-weight: 600;
        }

        /* "Tap another day to change" under the month day list's header */
        .miDayListSub {
            margin: -4px 2px 8px;
            color: #b42318;
            font-size: 12px;
            font-weight: 600;
        }

            .miDayListSub .fa {
                margin-right: 4px;
                font-size: 14px;
            }

        /* first visit only: a tip pointing at today's date, placed over the grid (absolute: the grid does not move) */
        .miTapTip {
            position: absolute;
            z-index: 20;
            width: 172px;
            padding: 8px 10px;
            background-color: #4a1b0c;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(16, 24, 40, 0.25);
            color: #fff;
            font-size: 12px;
            line-height: 1.35;
            cursor: pointer;
        }

            .miTapTip b {
                font-weight: 700;
            }

        .miTapTipArrow {
            position: absolute;
            bottom: -6px;
            width: 0;
            height: 0;
            border-top: 6px solid #4a1b0c;
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
        }

        .miTapTipOk {
            display: block;
            margin-top: 6px;
            padding: 4px 12px;
            background-color: #fff;
            border: none;
            border-radius: 4px;
            color: #4a1b0c;
            font-size: 12px;
            font-weight: 600;
        }

        .miDayListEmpty {
            padding: 12px;
            background-color: #f9fafb;
            border-radius: 8px;
            color: #667085;
            font-size: 13px;
        }

        a.miDayItem {
            display: block;
            margin-bottom: 8px;
            padding: 10px 12px;
            background-color: #fff;
            border: 1px solid #eaecf0;
            border-left: 4px solid #98a2b3;
            border-radius: 8px;
            color: #101828;
            text-decoration: none;
        }

            a.miDayItem:hover,
            a.miDayItem:focus {
                color: #101828;
                text-decoration: none;
            }

        .miDayItemTop {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #475467;
            font-size: 12px;
            font-weight: 600;
        }

        .miDayItemOverdue {
            display: inline-flex;
            align-items: center;
            color: #b42318;
        }

            .miDayItemOverdue img {
                width: 12px;
                height: 12px;
                margin-right: 3px;
            }

        .miDayItemName {
            margin-top: 2px;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.35;
            overflow-wrap: break-word;
        }

        .miDayItemMeta {
            margin-top: 3px;
            color: #667085;
            font-size: 12px;
            line-height: 1.35;
        }
    }

    /* Calendar, narrow phones (320px, first iPhone SE): the "+N more" day column is about 32px, so a smaller font keeps "more" whole */
    @media (max-width: 359px) {
        body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month .fc-event.fc-event-hori.fc-event-start.fc-event-end.miMoreEvent .fc-event-title {
            font-size: 9px !important;
            letter-spacing: -0.2px;
        }
    }

    /* Calendar: the selected month / week / day in the date picker box, bold */
    .calendardatePicker .dateSelector {
        color: #101828;
        font-weight: 600;
    }

    /* Upload drop area */
    #supportedContainer.dropzone,
    #notSupportedContainer.dropzone,
    #supportedContainer1.dropzone,
    #notSupportedContainer1.dropzone {
        position: relative;
        min-height: 150px;
        margin: 8px 20px 0 20px;
        background-color: #f9fafb;
        border: 2px dashed #d0d5dd;
        border-radius: 12px;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

        #supportedContainer.dropzone:hover,
        #supportedContainer.dropzone.dz-drag-hover,
        #notSupportedContainer.dropzone:hover,
        #supportedContainer1.dropzone:hover,
        #supportedContainer1.dropzone.dz-drag-hover,
        #notSupportedContainer1.dropzone:hover {
            background-color: #fef6f6;
            border-color: #cc2424;
        }

        #supportedContainer .dz-default.dz-message,
        #notSupportedContainer .dz-default.dz-message,
        #supportedContainer1 .dz-default.dz-message,
        #notSupportedContainer1 .dz-default.dz-message {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cc2424' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 16l-4-4-4 4'/%3E%3Cpath d='M12 12v9'/%3E%3Cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'/%3E%3C/svg%3E") !important;
            background-position: center 28px !important;
            background-size: 40px 40px !important;
            background-repeat: no-repeat;
        }

            #supportedContainer .dz-default.dz-message::after,
            #notSupportedContainer .dz-default.dz-message::after {
                content: "Drag and drop images here, or click to browse";
                position: absolute;
                left: 12px;
                right: 12px;
                top: 80px;
                color: #475467;
                font-size: 14px;
                font-weight: 500;
                text-align: center;
            }

            #supportedContainer1 .dz-default.dz-message::after,
            #notSupportedContainer1 .dz-default.dz-message::after {
                content: "Drag and drop documents here, or click to browse";
                position: absolute;
                left: 12px;
                right: 12px;
                top: 80px;
                color: #475467;
                font-size: 14px;
                font-weight: 500;
                text-align: center;
            }

    @media (max-width: 480px) {
        .miImageGrid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-gap: 10px;
            padding: 0 10px;
        }

        .miImageThumb .miImageLink {
            height: 150px;
        }

        .miImageCaption {
            padding: 8px;
        }

        #supportedContainer.dropzone,
        #notSupportedContainer.dropzone,
        #supportedContainer1.dropzone,
        #notSupportedContainer1.dropzone {
            margin: 8px 10px 0 10px;
        }

            #supportedContainer .dz-default.dz-message::after,
            #notSupportedContainer .dz-default.dz-message::after {
                content: "Tap to upload images";
            }

            #supportedContainer1 .dz-default.dz-message::after,
            #notSupportedContainer1 .dz-default.dz-message::after {
                content: "Tap to upload documents";
            }

        .miDocList {
            padding: 0 10px;
        }

        .miDocRow {
            padding: 10px 12px;
        }

        .miDocIcon {
            width: 38px;
            height: 38px;
            margin-right: 10px;
            font-size: 10px;
        }

        .miDocEmpty {
            margin: 10px;
        }
    }

    /* touch screens have no hover, so keep preview/delete visible */
    @media (hover: none) {
        .miImageActions {
            opacity: 1;
        }
    }
    /* Site images gallery - end */

    .verticalResize {
        resize: vertical;
    }
    /*comments - end*/
    .col-xs-12.installerActualHrConainer table {
        width: 100%;
    }

        .col-xs-12.installerActualHrConainer table td:first-child {
            padding-left: 15px;
            padding-right: 5px;
        }

        .col-xs-12.installerActualHrConainer table td {
            padding-right: 0;
        }

    .MySelection {
        color: #921a1a;
        border-radius: 5px;
        width: 95%;
        font-size: 12px;
        margin: 5px 5px 5px 5px;
    }

    .selectPeriodWork {
        color: #921a1a;
        border-radius: 5px;
        width: 95%;
        font-size: 12px;
        margin: 5px 5px 5px 5px;
    }

    .customFilterTbl td {
        padding-bottom: 5px;
    }

    .customSearchBtnsCntr .btn-sm, .btn-xs {
        padding: 2px 10px;
    }

    .vissible-xs .mail-header {
        font-size: 18px;
        color: #303641;
    }
    /*flipkartBox*/
    .flipkartBox {
        font-size: 12px;
        border: 1px solid #c8cdd7;
        padding: 3px 0 3px 5px;
        opacity: 0.7;
        border-radius: 3px;
        background-color: #F5F5F6;
        margin-right: 5px;
    }

        .flipkartBox .selectedHeader {
            padding-right: 5px;
        }

        .flipkartBox i {
            border-left: 1px solid silver;
            cursor: pointer;
        }
    /*flipkartBox*/
    .errorMsg {
        display: none;
        color: red;
    }

    .errorForAddHr {
        float: left;
        margin-top: 7px;
        margin-left: -6px;
    }

    .emptyReqField {
        border: 1px solid red !important;
    }

    .archivedOrder {
        display: none !important;
    }

    .isArchived .gActualHrs {
        padding-top: 0;
    }

    .installerActualHrConainer table {
        width: 243px;
    }

    .trackWorkBtns .btn {
        font-size: 15px;
    }

    .installerActualHrConainer.isArchived table {
        width: 140px;
        margin-left: 30px;
    }



    .installerCustomContainer {
        display: none;
        background-clip: padding-box;
        background-color: #fff;
        border-radius: 3px 0 3px 3px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        color: #981b1b;
        float: left;
        left: auto;
        overflow: hidden;
        padding: 0;
        position: absolute;
        right: 70px;
        z-index: 900;
        margin-top: 35px;
    }

    .table.taskListTable .installerCustomContainer td {
        padding: 0 10px;
    }


    .btnIconSize {
        width: 13px
    }

    .btnTextSize {
        font-size: 13px
    }

    .modal-vertical-centered {
        transform: translate(0, 25%) !important;
        -ms-transform: translate(0, 25%) !important; /* IE 9 */
        -webkit-transform: translate(0, 25%) !important; /* Safari and Chrome */
    }

    /*pagination*/
    .pagination {
        margin: 10px 0 20px;
    }

    .pagination-centered {
        text-align: center;
    }

    .pagination ul {
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        display: inline-block;
        margin-bottom: 0;
        margin-left: 0;
        padding-left: 0;
    }

    .pagination select {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #ffffff;
        border-color: #dddddd;
        border-image: none;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        float: left;
        line-height: 20px;
        padding: 3.5px 0;
        margin-right: 10px;
    }

    .pagination ul > li, .pagination div.navigator {
        display: inline;
    }

        .pagination ul > li:first-child > a, .pagination ul > li:first-child > span, .pagination div.navigator:first-child {
            border-bottom-left-radius: 4px;
            border-left-width: 1px;
            border-top-left-radius: 4px;
        }

        .pagination ul > li:last-child > a, .pagination ul > li:last-child > span, .pagination div.navigator:last-child {
            border-bottom-right-radius: 4px;
            border-right-width: 1px;
            border-top-right-radius: 4px;
        }

        .pagination ul > li > a, .pagination ul > li > span, .pagination div.navigator {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            background-color: #ffffff;
            border-color: #dddddd;
            border-image: none;
            border-style: solid;
            border-width: 1px 1px 1px 0;
            float: left;
            line-height: 20px;
            padding: 2px 10px;
            text-decoration: none;
        }

    .pagination div.navigator {
        cursor: pointer;
        color: #981b1b;
    }

    .pagination ul > li > a.active, .pagination ul > .active > span {
        color: #999999;
        cursor: default;
        background-color: #f5f5f6;
    }
    /*pagination*/

    .siContainer {
        display: none;
    }

    .panel-title {
        background-color: transparent !important;
    }



    .panel-primary > .panel-heading {
        background-color: transparent !important;
        color: #373e4a;
    }

    .panel-primary, .panel-heading {
        border-color: #ebebeb !important;
    }

    panel-heading > .panel-title > span {
        font-weight: normal;
    }

    .panel-heading > .panel-title > * {
        margin: 0;
    }

    .panel-heading > .panel-options {
        /*float: right;
    padding-right: 10px;
    top: -15px;
    position: relative;*/
        float: right;
        top: -30px;
        position: relative;
        margin-left: -50px;
    }

    /*.hidden-xs, .hidden-sm
{
    display:inline-block !important;
}*/

    .nav-tabs.bordered + .tab-content {
        border: 1px solid #ebebeb;
        border-top: 0;
        -webkit-border-radius: 0 0 3px 3px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 0 3px 3px;
        -moz-background-clip: padding;
        border-radius: 0 0 3px 3px;
        background-clip: padding-box;
        padding: 10px 15px;
        margin-bottom: 20px;
    }

    label, .label {
        font-weight: normal;
    }

    .label-default, .label {
        background-color: #ebebeb;
    }

    .input-group .form-control {
        float: left;
    }

    a:focus {
        text-decoration: none;
    }

    td, th {
        padding: 0;
    }

    .pagination {
        display: block;
    }

    .fc-header-title h2 {
        font-size: 17px;
    }

    @media (max-width: 767px) {
        .fc-header-title h2 {
            font-size: 13px;
        }
    }

    @media (min-width:320px) and (max-width: 767px) {
        #cookieMessage {
            width: auto !important;
            height: 200px !important;
        }
    }

    #cookieMessage {
        width: 500px;
        height: 160px;
        text-align: center;
        padding: 10px;
        background-color: #fff;
        color: #333;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        display: none;
    }

    .display-none {
        display: none;
    }

    /*SI Catalog Items*/

    /* enable absolute positioning */
    .inner-addon {
        position: relative;
    }

        /* style glyph */
        .inner-addon .glyphicon {
            position: absolute;
            padding: 10px;
            pointer-events: none;
        }

    /* align glyph */
    .left-addon .glyphicon {
        left: 0px;
    }

    .right-addon .glyphicon {
        right: 0px;
    }

    /* add padding  */
    .left-addon input {
        padding-left: 30px;
    }

    .right-addon input {
        padding-right: 30px;
    }

    #siteItemsTable tr:hover {
        background-color: #f5f5f5;
    }

    #siteItemsTable tr.selected, #siteItemsTable tr.selected:hover,
    .table-hover > tbody > tr.select:hover > td, .select-row > td {
        background-color: #cfcfcf !important;
    }

    #siteItemsTable td, #siteItemsTableHead td {
        padding: 6px 12px;
    }

    #siteItemsTable .tdSIManufacturer, #siteItemsTable .tdSIModel, #siteItemsTable .tdSIDesc, #siteItemsTable .tdSICategory, #siteItemsTable .tdSISubCategory,
    #siteItemsTableHead .tdSIManufacturer, #siteItemsTableHead .tdSIModel, #siteItemsTableHead .tdSIDesc, #siteItemsTableHead .tdSICategory, #siteItemsTableHead .tdSISubCategory {
        width: 250px;
        text-align: left;
    }

    #siteItemsTable .tdSIUnitPrice, #siteItemsTableHead .tdSIUnitPrice {
        width: 150px;
        text-align: right;
    }

    #siteItemsTable .tdSITaxable, #siteItemsTableHead .tdSITaxable {
        width: 150px;
        text-align: left;
    }

    #siteItemsTable .tdSIFixedLabor, #siteItemsTableHead .tdSIFixedLabor {
        width: 150px;
        text-align: left;
    }

    #divSIItemsFromCatalog .headerTitle {
        width: 100%;
        height: 30px;
        float: left;
        margin-bottom: 5px;
        border-bottom: 1px solid #e5e5e5;
    }

    #divSIItemsFromCatalog .modal-header {
        padding: 15px 15px 0px 15px;
        border-bottom: none;
    }

    #divSIItemsFromCatalog .modal-body {
        overflow-x: hidden;
        height: 600px;
        padding: 0px 0px 15px 15px;
    }

    #divSIItemsFromCatalog .modal {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #divSIItemsFromCatalog .modal-content {
        height: auto !important;
        min-height: 100% !important;
        border-radius: 0 !important;
    }

    .siItemRows {
        width: 100%;
        margin: 3px 0px;
    }

    .siItemLeft, .siItemRight {
        width: 50%;
        float: left;
    }

    .imgIconSIItem {
        float: left;
        margin-right: 10px;
    }

    .divTotalSIItems {
        width: 50%;
        float: left;
        text-align: left;
    }

    .divSIItemHeaderMobile {
        border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
        margin-bottom: 5px;
        float: left;
        width: 100%;
    }

    /* Add from Catalog (products and labor, tasks and service orders), web: the header row and the list are two tables, so both use
       the same fixed column widths to line up; the list scrolls inside the body, hence its 5px right padding */
    #divSIItemsFromCatalog #siteItemsTableHead table,
    #divSIItemsFromCatalog #siteItemsTable:not(.table-responsive) table {
        width: 100%;
        table-layout: fixed;
        border: none;
    }

    #divSIItemsFromCatalog .tdSIManufacturer { width: 13% !important; }
    #divSIItemsFromCatalog .tdSIModel { width: 14% !important; }
    #divSIItemsFromCatalog .tdSICategory { width: 13% !important; }
    #divSIItemsFromCatalog .tdSISubCategory { width: 14% !important; }
    #divSIItemsFromCatalog .tdSIDesc { width: 22% !important; }
    #divSIItemsFromCatalog .tdSIUnitPrice { width: 8% !important; }
    #divSIItemsFromCatalog .tdSITaxable { width: 7% !important; }
    #divSIItemsFromCatalog .tdSIFixedLabor { width: 9% !important; }

    #divSIItemsFromCatalog #divSIModalBody {
        padding-right: 5px;
    }

    #divSIItemsFromCatalog #siteItemsTableHead td {
        background-color: #f9fafb;
        border: none !important;
        border-bottom: 1px solid #eaecf0 !important;
        color: #475467;
        font-size: 12px;
        font-weight: 600;
    }

    #divSIItemsFromCatalog #siteItemsTable:not(.table-responsive) td {
        border: none !important;
        border-bottom: 1px solid #f2f4f7 !important;
        color: #344054;
        overflow-wrap: break-word;
        vertical-align: top;
    }

    #divSIItemsFromCatalog #siteItemsTable tr:hover > td {
        background-color: #f9fafb;
    }

    #divSIItemsFromCatalog #siteItemsTable tr.selected > td,
    #divSIItemsFromCatalog #siteItemsTable tr.selected:hover > td {
        background-color: #fef3f2 !important;
    }

    #divSIItemsFromCatalog .modal-footer .btn-default,
    #divSIItemsFromCatalog .divSIItemHeaderMobile .btn-default {
        background-color: #fff;
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        color: #344054;
    }

        #divSIItemsFromCatalog .modal-footer .btn-default.btn-icon i {
            background-color: transparent !important;
            color: #475467;
        }

    /* Add from Catalog, phone: one card per item; the item icon is drawn here because the page's image path (/app/Images/...)
       does not exist on sites under another path such as /beta */
    #divSIItemsFromCatalog #siteItemsTable.table-responsive {
        border: none;
    }

        #divSIItemsFromCatalog #siteItemsTable.table-responsive table {
            margin: 0;
            border: none;
            border-collapse: separate;
            border-spacing: 0 8px;
        }

        #divSIItemsFromCatalog #siteItemsTable.table-responsive td {
            padding: 10px 12px !important;
            background-color: #fff;
            border: 1px solid #eaecf0 !important;
            border-radius: 10px;
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
            color: #667085;
            font-size: 13px;
        }

            #divSIItemsFromCatalog #siteItemsTable.table-responsive td strong {
                color: #101828;
                font-weight: 600;
            }

        #divSIItemsFromCatalog #siteItemsTable.table-responsive tr.selected > td {
            background-color: #fef3f2 !important;
            border-color: #f5b8b3 !important;
        }

        #divSIItemsFromCatalog #siteItemsTable.table-responsive .imgIconSIItem {
            margin-right: 8px;
        }

            #divSIItemsFromCatalog #siteItemsTable.table-responsive .imgIconSIItem img {
                display: none;
            }

            #divSIItemsFromCatalog #siteItemsTable.table-responsive .imgIconSIItem:before {
                color: #98a2b3;
                font-family: 'entypo';
                font-size: 16px;
                content: '\e852'; /* entypo-box */
            }

            #divSIItemsFromCatalog #siteItemsTable.table-responsive .imgIconSIItem:has(img[src*="Labor"]):before {
                content: '\e856'; /* entypo-tools */
            }

        #divSIItemsFromCatalog #siteItemsTable.table-responsive pre.description {
            margin: 0;
            padding: 0;
            background: transparent;
            border: none;
            color: #667085;
            font-family: inherit;
            font-size: 13px;
            white-space: pre-wrap;
        }

    #divSIItemsFromCatalog .divSIItemHeaderMobile .divTotalSIItems {
        width: auto;
        color: #667085;
        font-size: 12px;
        white-space: nowrap;
    }

.tile-stats2 {
    position: relative;
    display: block;
    background: #303641;
    padding: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 5px;
    -moz-background-clip: padding;
    border-radius: 5px;
    background-clip: padding-box;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}