/**
 * If you are developing a project that makes use of Dijit widgets, you will probably want to include the two files
 * below; otherwise, you can remove them. When building for release, Dojo will automatically combine all of your
 * @imported CSS files into a single file.
 *
 * It is highly, highly recommended that you develop your CSS using Stylus: http://learnboost.github.com/stylus/.
 */

@import '../../dojo/resources/dojo.css';
@import '../../dijit/themes/claro/claro.css';

/****************************************************************/
.mblSimpleDialog .mblProgressIndicator {
    position: relative;
    margin: 14px 0 7px;
    top: 0;
}
.mblSimpleDialogCover {
    z-index: 98;
}
.mblSimpleDialogText {
    width: 100%;
}
.mblSimpleDialog.processing {
    z-index: 101;
}
/**************************************************************/

.mblProgressIndicatorCenter.inline {
    position: static;
    margin: 12px;
    transform: scale(.7);
}
.mblProgressIndicatorCenter.inline .mblProgContainer {
    left: auto;
}

/*************************************Checkbox***************************************/
.claro .dijitCheckBox,
.claro .dijitCheckBoxIcon {
    background-image: url("images/checkboxRadioButtonStates.png");
    /* checkbox sprite image */

    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin: 0 3px 0 0;
    padding: 0;
}
.dj_ie6 .claro .dijitCheckBox,
.dj_ie6 .claro .dijitCheckBoxIcon {
    background-image: url("/images/checkboxAndRadioButtons_IE6.png");
    /* checkbox sprite image */

}
.claro .dijitCheckBox,
.claro .dijitToggleButton .dijitCheckBoxIcon {
    /* unchecked */

    background-position: -20px;
}
.claro .dijitCheckBoxChecked,
.claro .dijitToggleButtonChecked .dijitCheckBoxIcon {
    /* checked */

    background-position: 0;
}
.claro .dijitCheckBoxDisabled {
    /* disabled */

    background-position: -100px;
}
.claro .dijitCheckBoxCheckedDisabled {
    /* disabled but checked */

    background-position: -80px;
}
.claro .dijitCheckBoxHover {
    /* hovering over an unchecked enabled checkbox */

    background-position: -60px;
}
.claro .dijitCheckBoxCheckedHover {
    /* hovering over an checked enabled checkbox */

    background-position: -40px;
}
/***************************************************************************/

.centerPane{
    width:95%;
    margin: 0 auto;
}

.datalist-table{
    border-collapse: collapse;
    table-layout: auto;
    width: 100%;
    height: auto;
    text-align: center;
}

.datalist-table .long-text {
    text-align: left;
    white-space: pre-wrap;
}

.pre-wrap {
    white-space: pre-wrap;
}

.centerPane hr{
    width:100%;
}

hr.tall {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.vertical-textile{
    margin: 0 auto;
    overflow: hidden;
    height:0px;
}
.vertical-textile img{
    width:95%;
}

.horizontal-textile img{
    width:100%;
    min-height: 17px;
}

.signout{
    color:#0C8DB4 !important;
    float:right;
}

.searchGlobalResults {
    position:fixed;
    left:75%;
    top:45px;
    border-width:5px;
    border-color:#f99312;
    height:95%;
    width:400px;
    background-color:#F5F5F5;
    display:none;
    margin:5px;
    overflow-y: scroll;
    overflow-x: scroll;
}

/* Info Link */
.email-template-info-link {
    position: absolute;
    padding: 3px 0 22px 0;
    color: #0a89ce;
    top: 6px;
    left: 9px;
    font-size: 12px;
    font-weight: 600;
}
.email-template-info-link a {
    color: #0a89ce !important;
    cursor: pointer;
    margin-left: 4px;
}
.email-template-info-link a:hover { opacity: .8; }
.email-template-info-link a:active { opacity: .6; }


.addHoursDateTime .dijitTextBox .dijitInputInner, .addHoursNTTH .dijitTextBox .dijitInputInner {
    text-align: center;
}
.partsAndMaterials, .hourAgainstJob,.autoHeightSR {
    height: auto;
}
.partsAndMaterials .dgrid-scroller, .hourAgainstJob .dgrid-scroller,.autoHeightSR .dgrid-scroller {
    position: relative;
    overflow-y: hidden;
}
.has-ie-6 .partsAndMaterials .dgrid-scroller, .has-ie-6 .hourAgainstJob .dgrid-scroller, .has-ie-6 .autoHeightSR .dgrid-scroller{
    /* IE6 doesn't react properly to hidden on this page for some reason */
    overflow-y: visible;
}
.partsAndMaterials .dgrid-header-scroll, .hourAgainstJob .dgrid-header-scroll,.autoHeightSR .dgrid-header-scroll{
    display: none;
}
.partsAndMaterials .dgrid-header, .hourAgainstJob .dgrid-header, .autoHeightSR .dgrid-header{
    right: 0;
}
/************************** Job Dteails -- Hour Against Job *********************/
.hourAgainstJob .field-nt_hours, .hourAgainstJob .field-th_hours, .hourAgainstJob .field-dt_hours, .hourAgainstJob .field-dth_hours,
.hourAgainstJob .field-date,
.hourAgainstJob .field-sr_status,
.hourAgainstJob .field-unrecoverable{
    width:4em;
}

.hourAgainstJob .field-name{
    width:6em;
}
.partsAndMaterials th,
.partsAndMaterials td {
    vertical-align: middle !important;
}
.hourAgainstJob .toggle-cell,
.partsAndMaterials .toggle-cell {
    width: 2em;
    text-align: center;
    padding: 0px;
}
.hourAgainstJob .toggle-cell {
    width: 6px;
}
.hourAgainstJob .field-sr_status, 
.hourAgainstJob .field-unrecoverable { cursor: pointer; }
.partsAndMaterials .field-sr_status, 
.partsAndMaterials .field-unrecoverable { cursor: pointer; width: 11.35em;}
.hourAgainstJob .field-sr_status:hover, 
.hourAgainstJob .field-unrecoverable:hover,
.partsAndMaterials .field-sr_status:hover, 
.partsAndMaterials .field-unrecoverable:hover { opacity: .8; }
.hourAgainstJob .field-sr_status:active, 
.hourAgainstJob .field-unrecoverable:active,
.partsAndMaterials .field-sr_status:active, 
.partsAndMaterials .field-unrecoverable:active { opacity: .6; }

.partsAndMaterials .field-po_number i.fa.fa-copy {
    float: right;
}

.partsAndMaterials .field-sr_status{
    width:6.35em;
}
.partsAndMaterials .field-purchase_status{
    width:9em;
}
.partsAndMaterials .field-cost {
    text-align: right;
    /* (old)  padding-right: 1em;*/
    padding-right: 1.5em; /* new changes by sahil*/
}
.partsAndMaterials .field-unrecoverable, .partsAndMaterials .field-cost{
    width:7.5em;
}

.partsAndMaterials .field-purchase_status{
    width: 8.5em;
}
.partsAndMaterials .field-date_cost_incurred{
    width: 9.5em;
}
.partsAndMaterials .field-supplier{
    min-width: 8em;
    width: 12%;
}

.partsAndMaterials .field-description{
    min-width: 12em;
    width: 30%;
}

.partsAndMaterials .field-unit {
    width: 4.5em;
}

.partsAndMaterials .field-po_number {
    width: 10%;
}
.partsAndMaterials .field-qty_purchased,
.partsAndMaterials .field-qty_allocated {
    width: 7.5em;
}

.dgrid-row.highlight .field-sr_status,
.dgrid-row.highlight .field-unrecoverable,
.dgrid-row.highlight .field-purchase_status,
.dgrid-row.highlight .field-qty_allocated,
.dgrid-row.highlight .field-delivery_status,
.dgrid-row.highlight .field-nt_hours {
    transition-duration: 0.2s;
    -webkit-transition-property: background-color, border-color;
    -moz-transition-property: background-color, border-color;
    -o-transition-property: background-color, border-color;
    transition-property: background-color, border-color;
    background: url(../../dgrid/css/skins/images/row_back.png) #fff repeat-x;
}
.dgrid-row.sr-unrecoverable .field-sr_status,
.dgrid-row.sr-unrecoverable .field-unrecoverable,
.dgrid-row.sr-unrecoverable .field-purchase_status,
.dgrid-row.sr-unrecoverable .field-qty_allocated,
.dgrid-row.sr-unrecoverable .field-nt_hours {
    background-color: #ff0000;
}
.dgrid-row.sr-signed .field-sr_status,
.dgrid-row.po-finalised .field-purchase_status,
.dgrid-row.delivery-shipped .field-delivery_status {
    background-color: #00b540;
}
.dgrid-row.sr-allocated .field-sr_status,
.dgrid-row.po-pending .field-purchase_status,
.dgrid-row.delivery-picked .field-delivery_status {
    background-color: #fffc00;
}
.dgrid-row.sr-cancelled .field-sr_status {
    background-color: #aaaaaa;
}



.inventoryItemGrid {
    height: auto;
}
.inventoryItemGrid .dgrid-cell {
    width: 9em;
}
.inventoryItemGrid .field-inventory_item_code,
.inventoryItemGrid .field-partnumber {
    width: 7em;
}
.inventoryItemGrid .field-description {
    width: auto;
}



/************************************** END *************************************/
#poforprocessing .dgrid{height:650px !important; overflow:hidden !important;}
.weekdate{ width:100% !important; height:30px !important; font-weight:bold !important; margin:0 auto !important; padding:5px 0 0 0 !important; text-align:center !important;text-align:-webkit-center !important; font-size: 20px;}
.timesheetemployeename{width:100% !important; height:30px !important; font-weight:bold !important; margin:0 auto !important; padding:5px 0 0 0 !important; text-align:center !important;text-align:-webkit-center !important; font-size: 30px;}
.loginDetails{line-height:50px; margin-right:10px;}
/*#dojox_widget_Standby_0{ width:500px; height:250px; background:red;}*/
.dojoxDialogPaneContent{ height:auto !important; margin:0 auto !important; width:580px !important;}
.cardfile-newwidth{ width:50% !important; margin:0 auto !important; background:red !important;}
.addHoursDateTime th,.addHoursNTTH th,.addHoursBreakTravel th,.addHoursStatus th{text-align:center !important;}
.mblSwDefaultShape{ width:80px !important; height:30px !important; border:none !important;}
.head_center th{font-weight:bold; text-align:center;}
.new-textwidth{ width:80% !important; float:left;}
.sign-textwidth{ width:12% !important; float:left;}
text{ margin-right:2px !important;}

.purchase_total_color{ background-color:#fa6b6b !important;}
.settingIcon{
    background-image: url(images/setting.png); /* Contains both object and action icons in a sprite image for the enabled state.  */
    width: 23px;
    height: 18px;
}
/************************Privileges Page*******************************/
.right_side
{
    float:right;
}

/*****************************JSA******************************/
.common-checkbox{
    float:left;
    padding: 5px 5px 5px 5px;
}

/*========setting icon in purchase order and service report grid=========*/
.sign-img{
    height: 150px;
    float: left;
    margin-top: 10px;
}
/*============for sign-img==============*/
.dgridAmr .dgrid-column-set-0 {
    width:550px;
}
.dgridAmr .dgrid-column-set-1 .dgrid-cell{
    width:230px;
    text-align:center;
}
.dgridAmr .dgrid-column-0-0-2 {
    height:25px;
}
.dgridAmr .field-job_no{
    width:110px;
    text-align:center;
}
.dgridAmr .field-hours_summary{
    text-align:center;
}

.dgridAmr .field-daily_summary{
    text-align:center;
}
.dgridAmr .field-service_report_no{
    width:163px;
    text-align:center;
}
.dgridAmr .field-customer_name{
    width:260px;
    text-align:center;
}
.rowHeading{
    text-align: center;
    font-weight: bold;
}

/* set dimensions of timsheet grid */



@media only screen and (min-device-width: 281px) and (max-device-width: 1024px) and (orientation:landscape) {
    .dgrid-column-set-scroller-1{bottom: 0 !important;  height:50px !important; background:url('jms/resources/images/scroll.png') no-repeat left bottom !important; float:right !important; }
    .dgrid-row-table{overflow-x:scroll !important; }

    .notificationsListEntry{
        font-size: 70% !important;
        //display:none;
    }

}

@media only screen and (min-device-width: 281px) and (max-device-width: 786px) and (orientation:portrait) {
    .dgrid-column-set-scroller-1{bottom: 0 !important; height:50px !important; background:#ccc !important; float:right !important; background:url('jms/resources/images/scroll.png') no-repeat left bottom !important;}
    .dgrid-row-table{overflow-x:scroll !important; }
    .notificationsListEntry{
        font-size: 70% !important;
        //display:none;
    }
}

.dgridAmr {
    width: 100%;
    height: auto;
}

.dgridHourSumarry{
    width: 100%;
    height: 30px;
}
.dgridHourSumarry .dgrid-column-set-0 {
    width:20%;
}
.dgridHourSumarry .dgrid-column-set-1 .dgrid-cell{
    width:230px;
    text-align:center;
}
.dgridHourSumarry .field-hour_summary{
    /*padding: 15px 0 15px 0;*/
    text-align:center;
}
.dgridHourSumarry .field-daily_summary{
    /*padding: 15px 0 15px 0;*/
    text-align:center;
}
.dgridAmr .dgrid-scroller {
    position: relative;
    overflow-x: scroll;
    max-height: 200px;
    width: 100%;
    /*overflow: auto;*/
    /*overflow-x:scroll;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;*/
}
.dgridHourSumarry .dgrid-scroller {
    position: absolute;
}
.field-totals{
    width: 250px;
}
/*Set style for jobcosting module*/
.pm-container{
    margin: 0 65px auto;
}
.pm-details{
    height: 300px;
    overflow-y: scroll;
}
.job-costing-pm :hover
{
    background-color: grey;
}

table.job-costing-pm>colgroup>col {
    width: 10em;
}

table.job-costing-pm th {
    text-align: center;
    padding: 1px 0.3em;
}

table.job-costing-pm td {
    padding: 1px 0.3em 4px;
}

table.job-costing-pm td,
table.job-costing-pm th {
    line-height: 1em;
    vertical-align: top;
}

.job-costing-pm .po-thead th{text-align: center;}
.job-costing-pm .credit {
    width:120px !important;
}

.job-costing-pm .unrecoverable {
    color: black;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 3px 0;
}

.job-costing-pm .dijitTextBoxReadOnly {
    background-color: rgba(255,255,255,0.5) !important;
}

.job-costing-pm .dijitTextBox {
    background: white;
}

.claro .total-container>label {
    font-weight: bold;
}

.claro .total-container>.dijitTextBox {
    margin: 0 2em 0 0.5em;
    width: 7.5em;
}

ol li {
    margin-bottom: 0.5em
}

.pmCosting ol {
    margin: 0;
}

.supplier-container{
    margin: 0 1em;
    padding: 0 1em;
    text-align: center;
    background: #dddddd;
    height: 100%;
}
.supplier-name{
    float:left;
    width:200px;
}

.supplierDetails{
    width: 100%;
}
.supplierDetails th,.supplierDetails td{
    text-align: center;
}
.supplierDetails .from{
    width:130px;
}
.supplierDetails .description{
    width:400px;
}

/* Second .blue-link selector required to give priority over the CSS that otherwise removes underlines from #jms.claro a */
.blue-link,
#jms.claro a.blue-link,
.poList .dgrid-content .field-job_no,.poList .dgrid-content .field-purchase_order_no {
    color:#0a89ce !important;
    cursor: pointer;
    text-decoration: underline;
}



.field-employee_name .field-supplier_name {
    width: 300px;
    color: black;
}


.field-date, .field-amount_due, .field-amount, .field-costing_status, .field-job_no, .field-purchase_order_no {
    width: 120px;
    color: black;
}


.field-view_po_supplier, field-view_po_costing {
    width: 180px;
    color: black;
}



.labour-cost .field-hour_type,
.labour-cost .footer-hour_type {
    width:11%;
    min-width: 9em;
    text-align: center;
}



/*Css labour hours*/
.labour-cost .footer-cost_rate,
.labour-cost .footer-cost_exl_oh_markup_per,
.labour-cost .footer-oh_markupper,
.labour-cost .footer-oh_cost,
.labour-cost .footer-hour_qty,
.labour-cost .footer-hour_worked,
.labour-cost .footer-field_cost,
.labour-cost .footer-total_cost,
.labour-cost .field-cost_rate,
.labour-cost .field-cost_exl_oh_markup_per,
.labour-cost .field-oh_markupper,
.labour-cost .field-oh_cost,
.labour-cost .field-hour_qty,
.labour-cost .field-hour_worked,
.labour-cost .field-field_cost,
.labour-cost .field-total_cost{
    width:7%;
    min-width: 6em;
    text-align: center;
}

.labour-cost .field-date,
.labour-cost .footer-date,
.labour-sell .field-date,
.labour-sell .footer-date {
    min-width: 8em;
    width: 12%;
}

.labour-cost .field-employee_name,
.labour-cost .footer-employee_name,
.labour-sell .field-employee_name,
.labour-sell .footer-employee_name {
    width: auto;
    min-width: 12em;
}
.labour-sell .field-hour_worked,
.labour-sell .footer-hour_worked,
.labour-sell .field-hour_qty,
.labour-sell .footer-hour_qty,
.labour-sell .field-hour_type,
.labour-sell .footer-hour_type,
.labour-sell .field-sell_rate,
.labour-sell .footer-sell_rate,
.labour-sell .field-sell_total,
.labour-sell .footer-sell_total {
    width: 12%;
    min-width: 6em;
}

td.narrow {
    width:7%;
    min-width: 6em;
}

td.fill {
    width: auto;
    min-width: 12em;
}

/*End jobcosting*/

.image_list_group{
    width:210px;
    float:left;
    padding-top : 5px;
    padding-bottom : 5px;
    background-color : #ededef;
    float : left;
    margin : 10px 5px 0 0;
    cursor: pointer;
}
.image_list_group1{
    width:210px;
    float:left;
    padding-top : 5px;
    padding-bottom : 5px;
    /*background-color : #ededef;*/
    float : left;
    margin : 10px 5px 0 0;
    cursor: pointer;
}

#userInfo {
    float: right;
    margin: 0.05em 1em;
}

#userInfo .loginForm {
    /*padding: 0.5em;*/
}
#userInfo input[type='text'],input[type='password']
{
    text-align: left;
}
#userInfo label {
    width: 16.5em;
    display: block;
    float: left;
}

#userInfo .checkbox label {
    float: none;
    width: 3em !important;
    display: inline;
    margin-left: 0;
}

#userInfo .checkbox {
    margin-left: 0em !important;
}

#userInfo .dijitTextBox {
    width: 16em;
}

#userInfo .message {
    font-weight: bold;
    margin: 0.4em 0 0.6em 0;
}

/* Hide user info elements not currently used */
#userInfo .loginDetails .message, #userInfo .loginDetails .details {
    display: none;
}

#userInfo .row {
    /* margin: 0.5em 0;*/
}

#navBody h3 {
    text-align: center;
    background-color: #EAEAEA;
    font-weight: normal;
    color: black;
    line-height: 40px; /* Based on MyDesktopTheme.css setting - should change to avoid using pixel based dimensions */
    font-size: 1.17em;
    cursor: pointer;
}

#allocate_hours_dialog {
    top: 25%;
    left: 25%;
    width: 318px;
    height: 200px;
}
.commonCSScardfiles{
    text-align:center;
    font-weight: bold;
}
.saveNotification{
    width:580px !important;
    min-height: 230px !important;
    margin:0 auto !important;
    position: absolute !important;
    left:395px !important;
}
.accountbillingpostaladdress{
    display:none;
}
.customeredit{
    display:none;
}
.loginButton.dijitButton .dijitButtonNode {
    // changes done by sahil  width: 10em;
    width: 15em;
}


.forgotPassword {
    margin: 0.2em 6em 0.2em 5.5em;
    padding: 3px 0;
    display: inline-block;
}

.jobListContainer {
    padding: 1em;
}

.jobListEntry {
    display: block;
    border: 1px solid #D7D7D7;
    padding: 2px;
    width:80%;
    margin:0 auto;
}

.deleteCustomer{
    display:none;
    width:50px;
}

.deleteBtn{
    width : 6em;
}

ul.favouritesListContainer,
ul.notificationsListContainer {
    margin: 0.5em;
    font-size:14px;
}

.favouritesListEntry {
    border: 1px solid transparent;
}

.favouritesListEntry:hover {
    border: 1px dotted #d0d0d0;
}
/********************************Notification*************************/

.notificationsListEntry{
    font-size: 85%;
    float: left;
    text-align:center;
    width:100%;
    //display:none; //changes by sahil
}

.notificationsListEntry img{
    height: 22px;
    width: 20px;
    float: left;
}

.notificationsListEntry div:nth-child(even){
    float: left;
    color: #0a89ce;
    padding: 3px 5px 0px 5px;
    height: 22px;
    width: 15px;
    cursor: pointer;
    width:30px;
}

.notificationsListEntry div:nth-child(odd){
    float: left;
    color: #454343;
    // font-family:Helvetica;
    font-size:14px;
}

.notificationHeader{
    color: red;
}

.nleLabel {
    color:#454343;
    font-family:verdana;
    font-size: 11px !important;/*change by sahil*/
    line-height: 1.5em;
}

/**********************************END********************************/

.clearBoth {
    clear: both;
}

.thirds {

    clear: both;
    float: left;
    width: 100%;
}

.thirds-left1 {

}

.thirds-left2 {

}

.thirds-left1, .thirds-left2 {
    float: left;
    width: 100%;

}

.left-third, .middle-third, .right-third {
    float: left;

}

.left-third {
    width: 20%;
    position:relative;

}

.middle-third {
    position:absolute;
    width:100%;
}

.right-third {
    position:relative;
    width: 20%;
    float:right;
    right:0;

}

.footer {
    clear: both;
    padding: 1em 1% 1% 1%;
    font-size: 60%;
}

h3 {
    text-align: center;
    background-color: #EAEAEA;
    font-weight: normal;
    color: black;
    line-height: 40px; /* Based on MyDesktopTheme.css setting - should change to avoid using pixel based dimensions */
    font-size: 1.17em;
}

.home-nav {
    padding: 1px;
}

#homeNav{
    float: left;
    padding: 12px 0px 0px 0px;
    /*margin-top: 0.5em;*/
}

#homeNav ul li{
    background-color: #0C8DB4;
}

.comment-entry-row {
    position: relative;
}

.submit-comment-button {
    position: absolute;
    bottom: 0;
    right: 0;
}

.submit-comment-container {
    position: absolute;
    width: 7.6em;
    height: 100%;
    right: 0;
    top: 0;
}

.comment-entry-container {
    margin-right: 10em;
}

.comment-entry {
    min-height: 5em;
    width: 100%;
}

.comment-user {
    font-weight: bold;
}

.jobListEntry .comment td {
    padding-bottom: 0.5em;
}

.show-hide-comments {
    margin: 0.5em 0;
    padding: 0.5em 0;
    vertical-align: middle;
}

/************** Code below adapted from MYDesktopTheme.css ***************/

.claro .dijitButton .dijitButtonNode, .claro .dijitDropDownButton .dijitButtonNode,
.claro .dijitComboButton .dijitButtonNode,
.claro .dijitToggleButton .dijitButtonNode {
    /* border : 1px solid #137aa3;
     border-radius : 6px;
     padding : 2px 0.5em;
     background: url(images/button-img.png);
     background-size: 100% 100%;
     float : left;
     box-shadow : 0px 0px 2px #bdc5c7;
     cursor : pointer;
     color : #fff;*/


    border: 1px solid #137aa3;
    border-radius: 3px;
    padding : 2px 0.5em;
    background: url(images/button-img.png);
    background-size: 100% 100%;
    float: left;
    box-shadow: 0px 0px 2px #bdc5c7;
    cursor: pointer;
    color: #fff;  
}

.print-invoice-button .claro .dijitButton .dijitButtonNode,
.claro .dijitDropDownButton.print-invoice-button .dijitButtonNode
{


    border: 1px solid #137aa3;
    border-radius: 3px;
    padding : 2px 0.5em;
    background: url(images/button-img.png);
    background-size: 100% 100%;
    float: left;
    box-shadow: 0px 0px 2px #bdc5c7;
    cursor: pointer;
    color: #fff;
    min-width: 80px !important;
}

.customBtn .claro .dijitButton .dijitButtonNode{
    width : 6em !important;
}

.claro .dijitSelect, .claro .dijitTextBox {
    border-top : 2px solid #cccccc;
    border-left : 1px solid #cccccc;
    border-right : 1px solid #ececec;
    border-bottom : 1px solid #ececec;
    width : 100%;
    -moz-box-shadow : inset 0 0 3px 0px #cccccc;
    -webkit-box-shadow : inset 0 0 3px 0px #cccccc;
    box-shadow : inset 0 0 3px 0px #cccccc;
    margin : 0;

    padding : 0;
}

.claro .dijitSelect.dijitSelectReadOnly, .claro .dijitTextBox {
    border : 1px solid #cccccc;
    -moz-box-shadow : none;
    -webkit-box-shadow : none;
    box-shadow : none;
}

.claro .dijitTextBoxReadOnly,
.claro .dijitSelectReadOnly {
    background-color: rgba(240, 240, 240, 0.8);

}

.claro .dijitTextBoxReadOnly.jmsTimeInput {
    background-color: #ffffff;
}

.claro .dijitSelect .dijitArrowButton,
.claro .dijitComboBox .dijitArrowButton {
    width : 18px;   
    margin : 0;
    padding : 0;
}

.dijitSelect.dijitReadOnly .dijitButtonNode,
.dijitComboBox.dijitReadOnly .dijitButtonNode {
    display: none;

}

.dijitSelectSelectedOption * {
    font-weight : normal;

}


#dijit_form_Textarea_0,
textarea.dijitTextArea :not(#fault_description) :not(#service_carried_out) {
    height : 25px !important;

    /*float : left;*/
}
.claro .dijitButtonText {
    padding : 0;
    margin : 0;

}

.claro .wideButton .dijitButtonNode {
    width:16em;
}

.claro .jobstatusButton .dijitButtonNode{
    width: 35em;
    height: 4em;
    font-size: 10px !important;    
    margin-top: 5px;
    padding:10px;
}

#jms.claro .new-theme .dijitButton.inline .dijitButtonNode,
.claro .dijitButton.inline .dijitButtonNode {
    padding : 2px 0;
}

.dijitButton.inline {
    margin: 0 0.2em;
}

html, body {
    height : 100%;
    width : 100%;
}
#jms.claro {
    font-family : Helvetica, Arial, sans-serif;
    font-size : 50%;
    font-size : 7px;/*change by sahil*/
    margin : 0;
    padding : 0;
    background-color : #fff;
    color : #454343;
}

#jms.claro #mainContainer {
    font-family : verdana;
    font-size: 16px;
}

#jms.claro #mainContainer .new-theme {
    font-family : Helvetica, Arial, sans-serif;
    font-size : 12px;
}

#jms.claro .mblSimpleDialog {
    font-size: 1.25em;
}

#jms.claro .new-theme h1 {
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-weight: bold;
}

#jms.claro .mblSimpleDialog.customerContactPopop {
    position: fixed !important;
    top: 10% !important;
    width: 70%;
    height: 80%;
    min-height: 200px;
    max-height: 770px;
}

#jms.claro .mblSimpleDialog.customerContactPopop > div {
    z-index: 2;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    top: 25px;
    left: 10px;
    right: 10px;
    bottom: 30px;
}


.title-with-buttons {
    display: flex;
}

.title-with-buttons .title {
    flex: 1;
}

.title-with-buttons .buttons {
    font-size : 12px;
}

#jms.claro .new-theme .dijitButton.done .dijitButtonNode {
    background-color: #00aa00;
}

#jms.claro .new-theme .dijitButton.cancel .dijitButtonNode {
    background-color: #888888;
    color: black;
}

#jms.claro .new-theme .dijitButton.cancel .dijitButtonNode,
#jms.claro .new-theme .dijitButton.done .dijitButtonNode {
    background-image: none;
    border: 0;
}

#jms.claro .new-theme .dijitButton .dijitButtonNode .dijitButtonContents {
    outline-color: rgba(255, 255, 255, 0.7);
}


#jms.claro .new-theme h1::after {
    content: "";
    border-bottom: 1px solid #fafafa;
    height: 1px;
    display: block;
    position: relative;
    top: 7px;
}

#jms.claro .new-theme .dijitTextBox,
#jms.claro .new-theme .grid.spaced .dijitTextBox,
#jms.claro .new-theme .dijitSelectLabel {
    box-sizing: border-box;
    height: 20px;

    padding: 0;
    padding-left: 5px;
    -webkit-appearance: none;
}

#jms.claro .new-theme .dijitTextBox.money {
    padding: 0;
    padding-right: 2px;
}

#jms.claro .new-theme .grid .dijitTextBox {
    height: 21px;
}

#jms.claro .new-theme .dijitTextBox .dijitInputContainer,
#jms.claro .new-theme .grid.spaced .dijitTextBox .dijitInputContainer {
    height: 23px
}

#jms.claro .new-theme .grid .dijitTextBox .dijitInputContainer {
    height: 17px
}

#jms.claro .new-theme .dijitTextBox input[type=text],
#jms.claro .new-theme .grid.spaced .dijitTextBox input[type=text],
#jms.claro .new-theme .dijitTextBox input[type=password],
#jms.claro .new-theme .dijitTextBox textarea {
    height: 21px;

}



.claro .dijitSelect .hide-border, 
.claro .hide-border .dijitSelect .dijitButtonContents{
    border: none;
}


#jms.claro .new-theme .grid .dijitTextBox input[type=text] {
    height: 15px;
}

#jms.claro .new-theme .dijitSelectLabel {
    line-height: 25px;
}

#jms.claro .new-theme .dijitTextBox textarea,
#jms.claro .new-theme textarea.dijitTextBox {
    padding: 7.5px 2px;

}

#jms.claro .new-theme .dijitSelect,
#jms.claro .new-theme .dijitTextBox {
    border: 1px solid;
    border-color: #b8b8b8 #e4e4e4 #eaeaea #bfbfbf;
    border-radius: 0;
}

.new-theme div.dijitArrowButton {
    height: 20px;
}

#jms.claro .new-theme .dijitButton .dijitButtonNode,
#jms.claro .new-theme .dijitToggleButton .dijitButtonNode,
#jms.claro .new-theme .dijitButton.inline .dijitButtonNode,
.claro .dijitButton.inline .dijitButtonNode{
    border: 1px solid #137aa3;
    border-radius: 3px;
    padding: 6px 12px;

    background: url(images/button-img.png);
    background-size: 100% 100%;
    float: left;
    box-shadow: 0px 0px 2px #bdc5c7;
    cursor: pointer;
    color: #fff;
    min-width: 80px;
}

#jms.claro .timesheeet-button .dijitButton .dijitButtonNode,
#jms.claro .timesheeet-button .dijitToggleButton .dijitButtonNode {
    border: 1px solid #137aa3;
    border-radius: 3px;
    padding: 6px 12px 7px;

    background: url(images/button-img.png);
    background-size: 100% 100%;
    float: left;
    box-shadow: 0px 0px 2px #bdc5c7;
    cursor: pointer;
    color: #fff;
    min-width: 40px;
}

#jms.claro .new-theme .dijitButton.coral-color .dijitButtonNode,
#jms.claro .new-theme .coral-color .dijitButton .dijitButtonNode,
#jms.claro .new-theme .coral-color .dijitToggleButton .dijitButtonNode {
    border: 1px solid #b5471f;
    border-radius: 3px;
    padding: 6px 12px;

    background: coral;
    background-size: 100% 100%;
    float: left;
    box-shadow: 0px 0px 2px #bdc5c7;
    cursor: pointer;
    color: #fff;
    min-width: 120px;
}


#jms.claro .new-theme .dijitButton.grey-color .dijitButtonNode,
#jms.claro .new-theme .grey-color .dijitButton .dijitButtonNode,
#jms.claro .new-theme .grey-color .dijitToggleButton .dijitButtonNode {
    border: 1px solid grey;
    border-radius: 3px;
    padding: 6px 12px;

    background: grey;
    background-size: 100% 100%;
    float: left;
    box-shadow: 0px 0px 2px #bdc5c7;
    cursor: pointer;
    color: #fff;
    min-width: 120px;
}


#jms.claro .new-theme .dijitButton.delete-button-icon .dijitButtonNode,
#jms.claro .new-theme .delete-button-icon .dijitButton .dijitButtonNode,
#jms.claro .new-theme .delete-button-icon .dijitToggleButton .dijitButtonNode {
    border: 1px solid transparent !important;     
    padding: 0;
    background: none;
    margin-left: 20px;
    cursor: pointer;
    min-width: 20px;
}



#jms.claro .new-theme .dijitButton.black-color .dijitButtonNode,
#jms.claro .new-theme .black-color .dijitButton .dijitButtonNode,
#jms.claro .new-theme .black-color .dijitToggleButton .dijitButtonNode {
    border: 1px solid black;
    border-radius: 3px;
    padding: 6px 12px;
    background: black;
    background-size: 100% 100%;
    float: left;
    box-shadow: 0px 0px 2px black;
    cursor: pointer;
    color: #fff;
    min-width: 120px;
}


#jms.claro .new-theme .dijitButton.green-color .dijitButtonNode,
#jms.claro .new-theme .green-color .dijitButton .dijitButtonNode,
#jms.claro .new-theme .green-color .dijitToggleButton .dijitButtonNode {
    border: 1px solid #137aa3;
    border-radius: 3px;
    padding: 6px 12px;

    background: limegreen;
    background-size: 100% 100%;
    float: left;
    box-shadow: 0px 0px 2px #bdc5c7;
    cursor: pointer;
    color: #fff;
    min-width: 80px;
    /* width: 12em; */
}
#jms.claro .new-theme .dijitButton.button-size-lg .dijitButtonNode,
#jms.claro .new-theme .button-size-lg .dijitButton .dijitButtonNode,
#jms.claro .new-theme .button-size-lg .dijitToggleButton .dijitButtonNode {
    border: 1px solid #137aa3;
    border-radius: 3px;
    padding: 6px 12px;

    padding: 10px;
    background-size: 100% 100%;
    float: left;
    box-shadow: 0px 0px 2px #bdc5c7;
    cursor: pointer;
    color: #fff;
    min-width: 80px;
    /* width: 12em; */
}


#jms.claro .new-theme .dijitTabContainerTop-dijitContentPane {
    padding-left: 0;
    padding-right: 0;
}

#jms.claro a {
    text-decoration : none;
    color : #454343;
}

#jms.claro a.bright {
    text-decoration : none;
    color : #0C8DB4;
}

h1, h2, h3, h4, h5, h6, p, a, span, ul, li, form, div, default {
    margin : 0;
    padding : 0;
    background-image : none;
}
#jms.claro .header {
    height : 65px;
    width : 100%;
}
#jms.claro .logo {
    margin : 0px;
    padding : 0px;
    top:15px !important;
    text-align : center;
}
#jms.claro .logo img{
    float: left;
}
/*#jms.claro .home-nav {
    height : 20px;
    background-color : #eaeaea;
    overflow: none;
}
#jms.claro .home-nav ul,
#jms.claro .ribbon ul {
    list-style-type : none;
    margin : 0.2em 0 0 0.5em;
}
*/
#main-menu>ul>li,
#jms.claro .home-nav ul li,
#jms.claro .ribbon ul li {
    list-style-type : none;
    display : inline-block;
}

/*
#jms.claro .home-nav ul li a {
    text-decoration : none;
    display : block;
    float : left;
    padding : 0 20px 0 0;
    color : #404241;
}
#jms.claro .home-nav ul li a:hover {
    color : #006ba2;
}

#jms.claro .ribbon #homeNav ul li a{
  padding: 2px;
  color:#FFFFFF;
}
#jms.claro .ribbon {
    height : auto;
    clear: both;
    top:49px !important;
}
*/
#jms.claro #main-menu {
    height: 100%;
}



#jms.claro #topBar {
    float: right;
    /*height: 20px;
    margin: 0.75em 0 0.7em 0em;*/
    // padding: 6px 0;
    /* Changes by sahil to hide top bar*/
    display: none;
}
#jms.claro .ribbon, #jms.claro .ribbon a {
    /*color : #fff;*/
}
#main-menu>ul>li div,
#jms.claro .ribbon ul li div {
    text-decoration : none;
    display : inline-block;
    float : left;
    padding :2px 5px 5px 5px;
    background-color: #E6EBEE;
}
#jms.claro .ribbon ul li div:hover{
    background-color: #D4D4D4;
}

/*#jms.claro .ribbon ul li a:hover {
    color : #EAEAEA;
}*/
#jms.claro .heading {
    height : 40px;
    background-color : #eaeaea;
    text-align : center;
}
#jms.claro .heading h3 {
    font-weight : normal;
    color : #000;
    line-height : 40px;
}
#jms.claro .content {
    width : 33%;
    height : auto;
    float:left;
    margin : 10px auto;
}
#jms.claro .search {
    width : 50%;
    height : 30px;
    float : left;
    padding : 0 0 0 37px;
    font-size : 1.2em;
}
#jms.claro .search input {
    border : 1px solid #000;
}
#jms.claro .loginbg {
    width : 100%;
    height : auto;
    float : left;
    background-color : #393D40;
    border-top : 1px solid #ededef;
    border-bottom : 1px solid #ededef;
}
#jms.claro .account-imagelist-box {
    width : 85%;
    height : auto;
    margin:0 auto;

}
#jms.claro .image-box {
    width : 200px;
    height : 114px;
    margin : 0 auto;
    background-color : #fff;
    text-align:center;
    padding:10px 0 0 0;
}
#jms.claro .image-box p {
    text-align : center;
    margin : 0;
    padding : 25px 0 0 0;
}
#jms.claro .list-box {
    width : 200px;
    height : 24px;
    margin : 4px auto 0 auto;
    background-color : #fff;
    text-align : center;
    line-height : 24px;
    padding-bottom : 3px;
}

#jms.claro .list-box .menu {
    float : left;
    width : 100%;
}

.commentDate{

    position: relative;
    font-size: 8.5px;
    font-weight: bold;
    top: -14px;
}

div.mid_content {
    width:75%;
    margin:0 auto;
}

.FieldGroupHeading {
    margin: 1em 0 0.5em;
    padding: 0;
    font-size: 1em;
    font-weight: bold;
}

.FieldsContainer td {
    padding: 0 0 0.5em;
}

#jms .dijitButton.dijitDisabled .dijitButtonNode,
.dijitDisabled {
    opacity:0.5;
}

#jms.claro .deleteButton {
    padding: 0;
    color: #fff;
    background-color: #ec4a0b;
    display: inline-block;
    cursor:pointer;
    border:1px solid #953403;
    width: 1.3em;
    height: 1.3em;
    line-height: 1.3em;
    text-align: center;
    font-weight: bold;
    text-shadow: 0 -1px 1px #953403;
    text-decoration: none;
    background-image: linear-gradient(#ec4a0b 0%, #ad390c 100%);
    border-radius:5px;
}

#jms.claro .standard-button {
    padding: 0.5em 1em;
    color: #fff;
    background-color: #6fd1ff;
    display: inline-block;
    cursor:pointer;
    border:1px solid rgb(19, 122, 163);
    height: 2.3em;
    line-height: 1.3em;
    text-align: center;
    text-shadow: 0 -1px 1px #953403;
    text-decoration: none;
    background-image: linear-gradient(#6fd1ff 0%, #04a1f0 100%);
    border-radius:5px;
}

#jms.claro .standard-button-lg {
    padding: 1em 1em;
    color: #fff;

    display: inline-block;
    cursor:pointer;
    border:1px solid rgb(19, 122, 163);
    height: 3.3em;
    line-height: 1.3em;
    text-align: center;
    text-shadow: 0 -1px 1px #953403;
    text-decoration: none;
    background: limegreen;
    border-radius:5px;
}

#jms table.padded-cell>tbody>tr>td,
#jms table.padded-cell>thead>tr>th,
#jms table.padded-cell>tfoot>tr>td {
    padding: 0.3em 5px 0 5px !important;
}

#jms table.two-col-form,
#jms table.multi-col-form {
    width: 100%;
    min-width: 28em;
    max-width: 60em;
    border: 0;
    margin: 0 auto;
}

#jms table.two-col-form.xx,
#jms table.multi-col-form.xx,
.create-new-job-contact{
    width: 100%;
    min-width: 85em;
    max-width: 85em;
    overflow: hidden !important;
    border: 0;
    margin: 0 auto;

}
.create-new-job-contact .gridxHScrollerInner {
    overflow: hidden !important; /*hide scrollbar on create contact on create new job page.*/
}

#jms table.two-col-form.wide,
#jms table.multi-col-form.wide,
.wide {
    width: 100%;
    min-width: 60em;
    max-width: 85em;
    margin: 0 auto;
}

.full-width {
    width: 100%;
}

.popup-box-width {
    width: 40%;
}
.popup-box-width-sm {
    width: 22em;
}

.form-box-width{
    width: 60%;
}

.tradesman-popupBox-height{
    overflow-y: auto; 
    height: 350px;
}
.tradesman-popupBox-width{
    width: 80%;
}


#jms table.two-col-form.auto-width,
#jms table.multi-col-form.auto-width,
.auto-width {
    width: auto;
    max-width: 100%;
}

#jms table.two-col-form>tbody>tr>td,
#jms table.two-col-form>tbody>tr>th,
#jms table.multi-col-form>tbody>tr>td,
#jms table.multi-col-form>tbody>tr>th {
    padding: 0.25em;
    padding-bottom: 0.3em;
    vertical-align: top;
}

#jms table.two-col-form>tbody>tr>td:first-child {
    width: 12em; 
}

#jms .new-theme td {
    vertical-align: top;
}

.container {
    box-sizing: border-box;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.column-set {
    display: flex;
    margin: 0 -15px;
    width: 100%;
}

.column-set>.column {
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0 15px;
}

#jms .column-set>.column table.two-col-form {
    min-width: inherit;
    margin-left: auto;
    margin-right: auto;
}

#jms table.columns {
    border-spacing: 20px 0;
    border-collapse: separate;
}

#jms .new-theme table.two-col-form {
    border-collapse: separate;
    border-spacing: 0;
}

#jms .new-theme table.two-col-form>tbody,
#jms .new-theme table.multi-col-form>tbody,
#jms .new-theme table.grid {
    background-size: 100%;
    background-image: linear-gradient(#ffffff, #fbfbfb 50px);
}

#jms .new-theme table.two-col-form>tbody.continued,
#jms .new-theme table.multi-col-form>tbody.continued {
    background-size: 100%;
    background-image: none;
    background-color: #fbfbfb;
}

#jms .new-theme table.two-col-form>tbody>tr>td,
#jms .new-theme table.two-col-form>tbody>tr>th {
    padding: 5px 15px 7px 15px;
}

#jms .new-theme table.two-col-form>tbody>tr>td:first-child {
    width: 200px; 
}

#jms.claro .new-theme label {
    font-weight: bold;
    padding: 2px 0;
    display: inline-block;
    line-height: 27px;
}

#jms .new-theme table.two-col-form>tbody>tr>th,
#jms .new-theme table.two-col-form>tbody>tr>td {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #fff;
}

#jms table.two-col-form>tbody>tr>td {
    text-align: left;
}

#jms table.two-col-form>tbody>tr>th {
    text-align: center;
    font-weight: bold;
}

#jms.claro .new-theme h4 {
    text-align: left;
    font-weight: bold;
    font-size: 15px;
    margin: 10px 0 3px;
    line-height: 1em;
}

#jms table.flexi-form {
    border-width: 0;
    border-collapse: collapse;
    margin: 0 auto;
}

#jms table.flexi-form>tbody>tr>td,
#jms table.flexi-form>tbody>tr>th {
    padding: 0.25em;
    margin: 0;
    height: 2em;
    vertical-align: middle;
}

.claro textarea.dijitTextBox {
    font: inherit;
    padding: 2px;

}

.numberBox input,
.right {
    text-align: right !important;
}

#jms.claro h4 {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0.3em;
}

.link {
    cursor: pointer;
}

#jms table.grid {
    border-collapse: collapse;
}


#jms table.grid>tbody>tr>td>.dijitComboBox,
#jms table.grid>tbody>tr>td>.dijitFilteringSelect,
#jms table.grid>tbody>tr>td>.dijitSelect,
#jms table.grid>tbody>tr>td>.dijitSimpleTextarea,
#jms table.grid>tbody>tr>td>.dijitTextarea,
#jms table.grid>tbody>tr>td>.dijitTextBox,
#jms table.grid>tbody>tr>td>.dijitValidationTextBox {
    border: none;
    background-color: rgba(255, 255, 0, 0.2);

}





#jms table.grid>tbody>tr>td>.dijit.dijitReadOnly {
    border: none;
    background-color: rgba(255, 255, 255, 1);
}

#jms table.grid>tbody>tr>td,
#jms table.grid>thead>tr>th,
#jms table.grid>tfoot>tr>td,
#jms table.grid>tfoot>tr>th {
    border : 1px solid #cccccc;
    padding: 2px;
}

#jms.claro .new-theme table.grid>tbody>tr>td>.dijitTextBox,
#jms.claro .new-theme table.grid>tbody>tr>td>.dijitSelect {
    margin: -2px;

    border-color: transparent;
}


#jms table.grid>tbody>tr>th,
#jms table.grid>thead>tr>th {
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
}

#jms table.grid>tfoot>tr>td,
#jms table.grid>tfoot>tr>th {
    font-weight: bold;
}

.claro .homeButtonImage {
    background-image: url("images/notification_icons/Payslips.png");
    margin-right: 5px; /* space off the text a little */ 
    margin-bottom: 5px; /* align bottom of image with bottom of adjacent text */
    width: 18px;
    height: 18px;
}

.claro .homeButton .dijitButtonNode {
    border : 5px solid #cccccc;
    border-radius : 0px;
    padding : 2px 0.5em;
    background : none;
    float : left;
    box-shadow : 0px 0px 2px #bdc5c7;
    cursor : pointer;
    color : #000;
    width : 10em;
}

.claro .homeSelect{
    border : 5px solid #cccccc;
    border-radius : 0px;
    padding : 2px 0.1em;
    background : none;
    float : left;
    box-shadow : 0px 0px 2px #bdc5c7;
    cursor : pointer;
    color : #000;
    width : 13em;
}

.claro .homeHeading {
    font-weight: bold;
    margin-bottom: 0.25em;
    padding-left:0.25em;
}

.claro .titular {
    text-align: left;
    font-weight: normal;
    font-size:85%;
    margin-bottom: 0.25em;
    text-transform:uppercase;
    padding-left: 4px;
    display:inline-block;
    white-space:nowrap;
}

.no-wrap {
    white-space: nowrap;
    overflow: hidden;
}



.claro .delButton .dijitButtonNode {
    width: 0.5em;
}

.editable-status-grid td.field-sr_status {
    color: #0a89ce;
    cursor: pointer;
    text-decoration: underline;
}

.customButton {
    background-color: rgb(12, 141, 180);
    padding: 6px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    width: 90%
}

.dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px;}
.dojoxLegendText {vertical-align: text-top; padding-right: 10px}

#jms table.grid>tbody>tr>td.money,
#jms table.grid>thead>tr>th.money,
#jms table.grid>tfoot>tr>td.money,
#jms table.two-col-form>tbody>tr>td.money,
.money input,
.money {
    text-align: right !important;
    padding-right:5px;
}

.claro .addHoursBtn .dijitButtonNode,
.claro .cancelSubJobBtn .dijitButtonNode {
    width:6em;
}

.AssetRegistryGrid .field-description{
    //width:30%;
}
.AssetRegistryGrid .dgrid-row .field-current_hours_run, .AssetRegistryGrid .dgrid-row .field-comment{
    background-color:rgb(255,204,51);
}
.signature{
    border: 10px solid gray;
    height: 100%;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.odd-row {
    background-color: #C9EBF3;
}

.hidden {
    display: none;
}

table.report-filter {
    border-collapse:collapse;
    table-layout:auto;
    width:95%;
    height:auto;
    border: none;
    margin-left: 2.5%;
}

table.report-filter>tbody>tr>td {
    height: 40px;
    vertical-align: middle;
    text-align: left;
}


.jobDetailsPopupLink,
.clipboardLink {
    display: inline-block;
    height: 1.5em;
    width: 3em;
    background-size: contain;
    background-repeat:no-repeat;
    cursor: pointer;
}

.jobDetailsPopupLink {
    background-image: url("images/open.png");
    background-position:center;    
}

.jobDetailsPopupLinkForViewAllJobs{
    background-image: url("images/eye.png");
    background-position:center;
}

.jobDetailsPopupLinkForViewAllJobs,
.clipboardLink {
    display: inline-block;
    height: 1.5em;
    width: 3em;
    background-size: contain;
    background-repeat:no-repeat;
    cursor: pointer;
}

.contractSummarySettings{
    background-image: url("images/settings-icon.jpg");
    background-position:center;
}

.contractSummarySettings,
.clipboardLink {
    display: inline-block;
    height: 2.2em;
    width: 3em;
    background-size: contain;
    background-repeat:no-repeat;
    cursor: pointer;
}


.clipboardLink {
    background-image: url("images/clipboard.png");
    background-position: left center;    
    padding-left: 1.5em;
}

div.labourClass input {
    background: none!important;
}

@media all and (max-width:500px){
    .left_section, .middle_section, .right_section{float:left !important; width:93% !important; clear:both !important;}
    #dijit_layout_BorderContainer_0{ height:1925px !important; }

    /*
.wrapper{margin:160px 0 0 0 !important;}
.left_section #leftThirdContentPane {
float: left !important;
position: static !important;
top: 0 !important;
width: 93% !important;	
    height:auto !important;
}

    .middle_section	#dijit_layout_ContentPane_2{width:93% !important;
     height: 550px !important;
left: 0 !important;
position: static !important;
top: 0 !important;
width: 100% !important;	
    }
    */



    #appBody {width: 100% !important;}
    #dijit_layout_ContentPane_3 > div{ width:215px !important; }
    .claro .titular, #widget_dijit_form_ComboBox_0{width:93% !important; }

    .middle_section #dijit_layout_ContentPane_3{width:93% !important; height:550px !important;}

    .right_section{margin: 15px 0 !important;}
    .right_section #rightThirdContentPane {
        left: 0 !important;    
        top: 0 !important;
        width: 93% !important;
        position:static !important;
    }

    .right_section #dijit_layout_ContentPane_3{padding:0 !important; width:90% !important;}
    .jobListContainer{ padding:0 !important;}	
    .jobListEntry{width:100% !important;}
    .jobListContainer{ padding:0 !important; width:100% !important;}

    #dijit_layout_BorderContainer_1{ height:550px !important;}
    .claro .dijitButton .dijitButtonNode, .claro .dijitDropDownButton .dijitButtonNode, .claro .dijitComboButton .dijitButtonNode, .claro .dijitToggleButton .dijitButtonNode{ width:60px !important; }
    .claro .mblSimpleDialog.mobile-resp .dijitButton .dijitButtonNode { min-width:auto !important;}
    .mobile-text { font-size: 12px; }

    .global-search { display: none; }
}
@media all and (min-width:300px) and (max-width:500px){
    /*.left_section{ float:left; clear:both;}
    .middle_section{ float:left; clear:both;}
    .right_section{float:left; clear:both;}
    .middle_section > div{ width:100% !important; float:left !important; clear:both !important; left:0 !important;}
    
    .left_section{}
    .left_section #leftThirdContentPane{ width:100% !important; clear:both !important;}
    .middle_section{}
    #dijit_layout_ContentPane_3{width:100% !important; float:left !important;}*/
    .mobile-block {
        display: block !important;
        float: none !important;
        width: auto !important;
    }
}

.refRadio
{
    height:25px !important;   /* */
    width:30px !important; /**/
    background-image:url("images/radioImage.png") !important;

    background-position:-8px center !important;
    display:inline-block !important;
    vertical-align:middle !important;
}
.refRadio.dijitChecked
{
    background-position:-96px center !important;
}
.refRadio input {
    height: 26px;
    width: 26px;
}




/***************** class of home page************/
.rightClass {
    padding: 0; width: 20%;top:119px;
    font-family:verdana!important;
}
.bodyImage{
    height:100%; width:60%; margin-top:-5px;display:none;
}
.claro .bodyClass{
    padding: 0;
}
.leftClass{
    padding: 0; width: 20%;top:119px;
}
.newHeader{
    padding-top: 10px;
}

/********************** Yes / No toggle switch**************************/
.switch {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 56px;
    height: 20px;
    padding: 3px;
    background-color: white;
    border-radius: 18px;
    box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);
    background-image: -moz-linear-gradient(top, #eeeeee, white 25px);
    background-image: -o-linear-gradient(top, #eeeeee, white 25px);
    background-image: linear-gradient(to bottom, #eeeeee, white 25px);
}

.switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
    background: #eceeef;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out;
    -webkit-transition-property: opacity background;
    -moz-transition-property: opacity background;
    -o-transition-property: opacity background;
    transition-property: opacity background;
}
.switch-label:before, .switch-label:after {
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    line-height: 1;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
}
.switch-label:before {
    content: attr(data-off);
    right: 11px;
    color: #aaa;
    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
    content: attr(data-on);
    left: 11px;
    color: white;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    opacity: 0;
}
.switch-input:checked ~ .switch-label {
    background: #47a8d8;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
    opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
    opacity: 1;
}

.switch-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
    background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
    background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
    background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}
.switch-handle:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -6px;
    width: 12px;
    height: 12px;
    background: #f9f9f9;
    border-radius: 6px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    background-image: -webkit-linear-gradient(top, #eeeeee, white);
    background-image: -moz-linear-gradient(top, #eeeeee, white);
    background-image: -o-linear-gradient(top, #eeeeee, white);
    background-image: linear-gradient(to bottom, #eeeeee, white);
}
.switch-input:checked ~ .switch-handle {
    left: 40px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/*****************************Ends**************************************/
ul.notificationsListContainer li {
    float: left;
    width: 100%;
    list-style-type : none;
}
/***************************** Progress bar style **************************************/
.meter {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.98);
    border-radius: 5px;
    box-shadow: 0 0 7px rgba(85, 85, 85, 0.21) inset;
    display: inline-block;
    height: 25px;
    margin: 0;
    position: relative;
    width: 84%;
}
.meter > span {
    background-color: lightblue; //#149bdf
    background-image: -moz-linear-gradient(center bottom , #30b9ff 37%, #01a9fe 69%);
    border-radius: 5px;
    box-shadow: 0 2px 9px rgba(255, 255, 255, 0.3) inset, 0 -2px 6px rgba(0, 0, 0, 0.4) inset;
    display: block;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.value_meter {
    color: #030303;
    font-weight: bold;
    font-size: 12px;
    line-height: 26px;
    letter-spacing: 0px;
    position: absolute;
    z-index: 9999;
    padding-left: 1em;
    text-align: left;
}
.meter > span > h2 {
    color: #fff;
    font-family: dosis;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 26px;
    text-align: center;
}
.meter > span:after, .animate > span > span {
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    border-radius: 20px 8px 8px 20px;
    bottom: 0;
    content: "";
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.animate > span:after {
    display: none;
}
keyframes move {
}
.orange > span {
    background-color: #f1a165;
    background-image: -moz-linear-gradient(center top , #f1a165, #f36d0a);
}
.red > span {
    background-color: #f0a3a3;
    background-image: -moz-linear-gradient(center top , #f0a3a3, #f42323);
}
.nostripes > span > span, .nostripes > span:after {
    background-image: none;
}
/*****************************Ends**************************************/

.claro .dijitToasterContent {
    background-color: #cfe5fa;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 0.3em;
    padding:1em;
    text-align: center;
}

.fixed-table-container {
    font-size: 9pt;
    width: 100%;
    height: 25em;
    border: 1px solid black;
    margin: 0.5em auto;
    position: relative; /* could be absolute or relative */
    padding-top: 1.6em; /* height of header */
    text-align: left;
}

.fixed-table-container>.fixed-table-container-inner {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

.fixed-table-container>.header-background {
    height: 1.6em; /* height of header */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: rgba(255,255,255,0.5);
}

.fixed-table-container>.fixed-table-container-inner>table {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-collapse: collapse;
}

.fixed-table-container>.fixed-table-container-inner>table>tbody>tr>td {
    border-bottom: 1px solid rgba(255,255,255,0.10);
    border-left: 1px solid transparent;
    padding: 0.3em 0.6em;
    vertical-align: top;
    text-align: left; /* IE?? */
}

.fixed-table-container>.fixed-table-container-inner>table>thead>tr>th {
    padding: 0.3em 0;
    text-align: left; /* IE?? */
}

.fixed-table-container .heading-inner {
    position: absolute;
    top: 0;
    line-height: 1.6em; /* height of header */
    text-align: left;
    border-left: 1px solid black;
    padding-left: 0.6em;
}

.fixed-table-container .first .heading-inner {
    border-left: none;
    padding-left: 6px;
}

/* make pre content look the same as other content */
.unpre  {
    border-width: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
    background: inherit;
    color: inherit;
    white-space: pre-wrap;
}

label.input-container {
    display: inline-block;
    margin-bottom: 0.75em;
}

#jms .mblTabBarStandardTab {
    background-image: none;
    padding: 0;
    border-top: none;
}

#jms .mblTabBarStandardTab .mblTabBarButton {
    margin-right: 3px;
    min-width: 6em;
}

.template-image-label {
    display: block;
    margin: auto;
    padding: 0.2em;
    width: 60%;
    font-size: 0.7em;
    height: 1.3em;
    background: rgba(192,192,192,0.15);
    color: rgba(0,0,0,0.5);
    text-align: center;
    border-radius: 0.6em;
}

.cost-summary th {
    text-align: center;
    font-weight: bold;
}

.claro .cost-summary .dijitTextBox .dijitInputField {
    padding: 0 0.5em;
}

.cost-summary input {
    text-align: left;
}

.cost-summary .positive-value {
    background: #aaffaa;
}

.cost-summary .negative-value {
    background: #ffaaaa;
}

.cost-summary .zero-value {
    background: #aaaaaa;
}

.non-quoted .quoted-only {
    display: none;

}

.reduce-width{
    width: 49% !important;
}
.reduce-width1{
    width: 39% !important;
}





.quoted .non-quoted-only {
    display: none;
}

.quoted .hide-for-quoted {
    visibility: hidden;

}

.border-right-lg{
    border-right: 2px solid #aaaaaa;
}

.radio-group {
    border: 1px solid #aaaaaa; 
    padding: 1em; 
    margin: 1em 3em 1em 0; 
    display: inline-block;
}

#jms.claro a.bright {
    color:#0a89ce;
    text-decoration:underline;
}

.list td {
    height: 30px;
    vertical-align: middle;
}

table.list>tbody.row-group:nth-child(odd) {
    background: #cfe5fa;
}

.navtab {
    background-color: #E6EBEE;
    cursor: pointer;
    display: inline-block;
    width: 10em;
    line-height: 1.5em;
    padding :2px 5px 5px 5px;
}

.navtab.active {
    background-color: #D4D4D4;
    font-weight: bold;
}

.htmlMessageDialog {
    width: 75em; 
    max-width: 90%;
    height: 30em;
}

.htmlMessageDialog p {
    margin: 1em 0;
}

.htmlMessageDialog table {
    width: 100%;
}

.list-delete-button {
    visibility: hidden;
}

.dijitMenuItemLabel .list-delete-button {
    visibility: visible;
    float: right;
}

.detailed-job-search .results {
    font-size: 13px;
}

table.detailed-job-search {
    border-collapse: collapse;
}

.detailed-job-search .detail {
    background: rgb(245,245,245);
    -webkit-print-color-adjust: exact; /* print shading in webkit browsers */
}

.detailed-job-search .detail th,
.detailed-job-search .detail td {
    border: 0;
}

.detailed-job-search .detail > td {
    border-bottom: 1em solid white;
}

.detailed-job-search .detail th,
.service-carried-out-popup th,
.service-carried-out-popup td
{
    vertical-align: top;
}

.service-carried-out-popup th,
.service-carried-out-popup td
{
    text-align: left;
}

.claro .detailed-job-search .dijitContentPane {
    padding: 0;
}

.detailed-job-search .results th {
    font-weight: bold;
}

.is-not-quoted .quoted-only {
    display: none;
}

table.labour-activity-summary {
    border-collapse: collapse;
}

.labour-activity-summary col.metric {
    width: 9em;
}

.labour-activity-summary col.row-heading {
    width: 15em;
}

.labour-activity-summary .col-heading,
.detailed-job-search .col-heading
{
    background: rgb(0, 176, 240);
    text-align: center;
    -webkit-print-color-adjust: exact; /* print shading in webkit browsers */
}

.labour-activity-summary th {
    border: 1px solid black;
}

.labour-activity-summary td.spacer {
    border: rgba(255,0,0,0);
}

.labour-activity-summary td {
    text-align: right;
    padding: 0 1em;
    border: 1px solid black;
}

.labour-activity-summary .total {
    background: rgb(255, 192, 0);
}

.labour-activity-summary .remainder {
    background: rgb(255, 255, 0);
}

.section-header {
    text-align: center; 
    background: rgb(238, 236, 225);
}

.centered input {
    text-align: center;
}

/* scrollingtable from http://jsfiddle.net/doctorDestructo/kn4xprgx/ */

.scrollingtable {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    width: auto; /*if you want a fixed width, set it here, else set to auto*/
    min-width: /*0*/100%; /*if you want a % width, set it here, else set to 0*/
    height: /*188px*/100%; /*set table height here; can be fixed value or %*/
    min-height: /*0*/64px; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 13px;
    line-height: 20px;
    /* padding: 20px 0 20px 0;  padding to make room for caption(s)*/
    text-align: left;
}

@media print {
    .no-print {
        display: none;
    }

    .detailed-job-search .results {
        font-size: 8pt;
    }

    thead > tr > * > div[label]:after {
        content: attr(label);
    }
}

.scrollingtable * {
    box-sizing: border-box;
}
.scrollingtable > div {
    position: relative;
    border-top: 1px solid white;
    height: 100%;
    padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
    top: 0;
    background: rgb(0, 176, 240); /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 50%;
    left: 0;
}
.scrollingtable > div > div {
    min-height: /*0*/43px; /*if using % height, make this large enough to fit scrollbar arrows*/
    max-height: 100%;
    overflow: /*scroll*/auto; /*set to auto if using fixed or % width; else scroll*/
    overflow-x: hidden;
    border: 1px solid white; /*border around table body*/
}
.scrollingtable > div > div:after {
    background: white; /*match page background color*/
} 
.scrollingtable > div > div > table {
    width: 100%;
    border-spacing: 0;
    margin-top: -20px; /*inverse of column header height*/
    margin-right: 17px; /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
    position: absolute;
    top: -20px; /*inverse of top caption height*/
    margin-top: -1px; /*inverse of border-width*/
    width: 100%;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
    vertical-align: bottom;
    white-space: nowrap;
    text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
    display: inline-block;
    padding: 0 6px 0 6px; /*header cell padding*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 20px; /*match column header height*/
    border-left: 1px solid white; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
    position: absolute;
    top: 0;
    white-space: pre-wrap;
    color: black; /*header row font color*/
    font-weight: bold;
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {
    content: attr(label);
}

.scrollingtable > div > div > table > thead > tr > * + :before {
    content: "";
    display: block;
    min-height: 20px; /*match column header height*/
    padding-top: 1px;
    border-left: 1px solid white; /*borders between header cells*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
    position: absolute;
    width: 100px;
    top: -1px; /*inverse border-width*/
    background: white; /*match page background color*/
}
.scrollingtable > div > div > table > tbody > tr:after {
    content: "";
    display: table-cell;
    position: relative;
    padding: 0;
    border-top: 1px solid white;
    top: -1px; /*inverse of border width*/
}
.scrollingtable > div > div > table > tbody {
    vertical-align: top;
}
.scrollingtable > div > div > table > tbody > tr {
    background: white;
}
.scrollingtable > div > div > table > tbody > tr > * {
    border-bottom: 1px solid white;
    padding: 0 6px 0 6px;
    height: 20px; /*match column header height*/
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {
    border-bottom: none;
}
.scrollingtable > div > div > table > tbody > tr > * + * {
    border-left: 1px solid white; /*borders between body cells*/
} 

.your-logo {
    width: 150px;
    height: 150px;
    background-color: #ddd;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


#jms textarea::placeholder,
#jms input::placeholder {
    color: #AAAAAA;
}

#jms .multi-field-block > * {
    margin-bottom: 5px;
}

#filterBox{
    height: 2em;
}

.left {
    text-align: left !important;
}

.label-and-value-set {
    margin: 0 -15px;
    width: 100%;
}

.label-and-value {
    white-space: nowrap;
}

.label {
    padding-left: 15px;
    padding-right: 5px;
    font-weight: bold;
}

.value {
    padding-right: 15px;
    padding-left: 5px;
}

/* WORK SCHEDULE */

.light-blue {
    color: #d4f1f5;
}
.blue-text {
    color: #0C8DB4;
}
.red-dot {
    color: #eb3b3b;
}
.green-dot {
    color: #1fbe64;
}

.color-quoted {
    background-color: #fd9f15;
}
.color-service {
    background-color: #00a2e9;
}
.color-sick-leave {
    background-color: #fff201;
}
.color-unrecoverable {
    background-color: #ed1c24;
}


.dojoxGrid.stock-transfer-listing .dojoxGridCell:nth-child(7),
.dojoxGrid.stock-transfer-listing .dojoxGridCell:nth-child(9) {
    text-align: center;
}

.entry-quoted {
    border-left-color: #fd9f15;
}
.entry-service {
    /*background-color: #99d9ea;*/
    border-left-color: #00a2e9;
}
.entry-sick-leave {
    /*background-color: #efe4b0;*/
    border-left-color: #fff201;
}
.entry-unrecoverable {
    /*background-color: #fab8bc;*/
    border-left-color: #ed1c24;
}
.entry-customer-request-date {
    background-color: #f6f969 !important;
    border-left: 0 !important;
}
.entry-customer-request-date.entry-wide > .entry-contents > div {
    line-height: 38px;
    padding-left: 20px;
}
.entry-alternative {
    border-left: 0;
    border-top: 6px solid #00a2e9;
}

.schedule {
    height: 100%;
}
.scheduleNav {
    display: flex;
    justify-content: space-between;
}
.centerNav {
    text-align: center;
}
.centerNav > h2 {
    margin-bottom: 12px;
}
.centerNav > h2 > span {
    display: inline-block;
    line-height: 25px;
    vertical-align: middle;
}

/*
.scheduleLegend {
    display: flex;
    margin: 20px 0;
}
*/
.scheduleTop {
    position: absolute;
    top: 95px;
    margin: 20px 0;
}
.scheduleTop.full-width {
    width: 100% !important;
}
.scheduleLegend {
    float: right;
}
.scheduleCategory {
    float: left;
}
.scheduleCategory > .dijitTextBox {
    width: auto !important;
    margin-left: 10px;
}
.scheduleLegend > span {
    margin-left: 40px;
    align-items: center;
}
.scheduleLegend .legend-sample {
    display: inline-block;
    width: 20px;
    height: 20px;
}
.scheduleContainer {
    position: absolute;
    top: 150px;
    width: calc(100% - 350px);
    height: calc(100% - 150px);
    overflow-x: scroll;
    overflow-y: auto;
    border: 1px solid #ade5ff; 
    transition: 0.5s width ease-in-out;
    -webkit-transition: 0.5s width ease-in-out;
}
.scheduleContainer.expand {
    width: calc(100% - 80px);
}
.scheduleContainer.full-width {
    width: 100% !important;
}

.scheduleTable {
    border-collapse: collapse;
    table-layout: fixed;
}

.scheduleTable thead .scheduleGroup td {
    text-align: center;
    padding: 8px 6px;
    border: 1px solid #ddd;
}

.scheduleTable thead th {
    padding: 6px;
    height: 20px;
    width: 80px;
}

.jobSchedule thead th {
    padding: 3px 6px;
    font-size: 13px;
}

.scheduleTable thead th,
.scheduleTable tbody th {
    background-color: #dfecff;
    text-align: center;
    border-left: 1px solid #ade5ff;
}

.scheduleTable thead th:first-child {
    z-index: 102;
    padding: 8px 0;
}

.scheduleTable thead th:first-child,
.scheduleTable tbody th:first-child {
    box-sizing: border-box;
    position: sticky;
    width: 150px;
    left: 0;
    top: auto;
    border-left: 0;
}


.scheduleTable thead th {
    position: sticky;
    top: 0 !important;
    z-index: 101;
}

.scheduleJobs {
    position: absolute;
    top: 150px;
    right: -1px;
    width: 310px;
    height: calc(100% - 150px);
    border: 1px solid #999;
    transition: 0.5s right ease-in-out;
    -webkit-transition: 0.5s right ease-in-out;
}
.scheduleJobs.minimise {
    right: -269px;
}
.scheduleJobs.minimise > .scheduleJobsFilters,
.scheduleJobs.minimise > .scheduleJobsEntries {
    opacity: 0;
}

.scheduleJobsHeader {
    border-bottom: 1px solid #999;
    height: 32px;

}

.scheduleJobsHeader > i {
    cursor: pointer;
    display: block;
    float: left;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f00a";
    padding-left: 8px;
    font-size: 16px!important;
    font-style: normal;
    padding-left: 15px;
    line-height: 32px;
}
.scheduleJobsHeader > i:hover { opacity: .8; }
.scheduleJobsHeader > i:active { opacity: .6; }

.scheduleJobsHeader > h2 {
    display: block;
    float: left;
    font-size: 14px;
    line-height: 32px;
    padding-left: 13px;
}

.scheduleJobsHeader > span {
    display: block;
    float: right;
    font-size: 14px;
    font-weight: 700;
    line-height: 32px;
    padding-right: 15px;
    color: #00a2e9;
}

.scheduleJobsHeader > span > em {
    font-style: normal;
}

.scheduleJobsFilters {
    height: 428px;
    padding: 10px 15px;
    border-bottom: 1px solid #999;
    opacity: 1;
    transition: 0.5s opacity ease-in-out;
    -webkit-transition: 0.5s opacity ease-in-out;
}

.scheduleJobsFilters .filter .dijitPlaceHolder {
    font-style: normal;
    color: black;
}

.scheduleJobsFilters .filter {
    margin-bottom: 12px;
}

.scheduleJobsEntries {
    position: absolute;
    top: 460px;
    left: 0;
    width: 100%;
    height: calc(100% - 460px);
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 1;
    transition: 0.5s opacity ease-in-out;
    -webkit-transition: 0.5s opacity ease-in-out;
}

.scheduleJobsEntries .jobList {
    position: relative;
}
.scheduleJobsEntries .btn-wrapper {
    position: relative;
    text-align: center;
    padding: 15px;
}

.scheduleJobsEntries .jobListRow {
    border-bottom: 1px solid #999;
    padding: 12px 0;
    cursor: grab;
    min-height: 80px;
}
.scheduleJobsEntries .jobListRow:hover { background-color: #f1f1f1; }
.scheduleJobsEntries .jobListRow:active { background-color: #e1e1e1; cursor: grabbing; }

.scheduleJobsEntries .jobListRow > .left {
    float: left;
    width: 5%;
    min-height: 20px;
}

.scheduleJobsEntries .jobListRow > .right {
    float: left;
    width: 94%;
}

.scheduleJobsEntries .jobListRow > .right h4 {
    font-size: 13px;
    text-align: left !important;
    margin: 0 0 3px 0 !important;
    letter-spacing: -0.03em;
    line-height: 19px;
}
.scheduleJobsEntries .jobListRow > .right h4 em {
    display: block;
    font-size: 12px;
    font-style: normal;
    color: #00a2e9;
    font-weight: 700;
    letter-spacing: normal;
}

.scheduleJobsEntries .jobListRow > .right h4 span,
.scheduleJobsEntries .jobListRow > .right p {
    display: block;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.scheduleJobsEntries .jobListRow > .right p {
    font-size: 11px;
    text-align: left !important;
}

.scheduleJobsEntries .employees .jobListRow:first-child > .left img,
.scheduleJobsEntries .employees .jobListRow:first-child > .right p {
    display: none;
}
.scheduleJobsEntries .employees .jobListRow:first-child > .left {
    padding-left: 10px;
    width: 53px !important;
    height: 53px;
    background-color: #f7f74f;
    padding-left: 0 !important;
    margin-left: 10px;
    margin-right: 13px;
    border-radius: 27px;
}
.scheduleJobsEntries .employees .jobListRow:first-child > .right h4 {
    padding-top: 16px;
}



.stock-info-page .stock-info {
    display: none;
}
.stock-info-page .non-stock-info {
    display: revert;
}
.stock-info-page.show .stock-info {
    display: revert;
}
.stock-info-page.show .non-stock-info {
    display: none;
}



.employeeListRow {
    border: 1px solid #ade5ff;
    margin: 5px;
    padding: 5px;
    text-align: center;
    width: 10em;
    overflow-x: hidden;
}

.employeeListRow picture {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.employeeListRow picture img {
    object-fit: cover; 
    height: 100%;
    width: auto;
}

.employeeListRow.allocated picture:after {
    content:"\A";
    position: absolute;
    display: block;
    right: -23px;
    bottom: 0;
    width:20px;
    height:20px;
    border-radius:50%;
    background: #00bb00;
}

.employeeListRow .employeeName {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scheduleTable th.scheduleJobNumber,
.scheduleTable th.scheduleCustomerName,
.scheduleTable th.scheduleSiteName,
.scheduleTable th.scheduleStartDate,
.scheduleTable th.scheduleEndDate,
.scheduleTable tbody td.scheduleFaultDescription,
.scheduleTable tbody tr.employee th,
.scheduleTable tbody th.scheduleStaffName {
    position: sticky;
    z-index: 100;
    top: auto;
    text-align: left;
}

.scheduleTable tbody tr.employee>th {
    background-color: white;
}

.scheduleTable tbody tr.employee>th:first-child {
    left: 0;
}

.scheduleTable tbody tr.employee>th:nth-child(2) {
    left: 390px;
    border-left: none;
}

.scheduleTable tbody th.scheduleStaffName {
    text-align: center;
}

.scheduleTable tbody td.scheduleFaultDescription {
    background: white;
}

th.scheduleJobNumber,
.scheduleTable tbody td.scheduleFaultDescription,
th.scheduleStaffName {
    left: 0px;
}

th.scheduleCustomerName {
    left: 150px;
}
th.scheduleSiteName {
    left: 390px;
}
th.scheduleStartDate {
    left: 630px;
}
th.scheduleEndDate {
    left: 720px;
}

th.scheduleJobNumber div,
th.scheduleCustomerName div,
th.scheduleSiteName div,
th.scheduleStartDate div,
th.scheduleEndDate div,
th.scheduleStaffName div {
    box-sizing: border-box;
    padding: 3px 0;
    background-color: #f6f4f4;
}

th.scheduleStaffName div {
    padding: 8px 0;
}

th.scheduleStaffName div {
    width: 150px;
    height: 80px;
}

th.scheduleJobNumber div,
th.scheduleCustomerName div,
th.scheduleSiteName div,
th.scheduleStartDate div,
th.scheduleEndDate div,
.scheduleTable tbody td.scheduleFaultDescription div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9pt;
    height: 20px;
}

th.scheduleJobNumber div {
    width: 149px;
}
th.scheduleCustomerName div {
    width: 239px;
}
th.scheduleSiteName div {
    width: 239px;
}
th.scheduleStartDate div {
    width: 89px;
}
th.scheduleEndDate div {
    width: 89px;
}
td.scheduleFaultDescription div {
    width: 809px;
}

tr.row1 th.scheduleJobNumber,
tr.row1 th.scheduleCustomerName,
tr.row1 th.scheduleSiteName,
tr.row1 th.scheduleStartDate,
tr.row1 th.scheduleEndDate,
tr.row1 th.scheduleStaffName {
    background-color: #ececec;
}

.scheduleTable tbody td,
.scheduleTable tr.employee th {
    border-bottom: 1px solid #999;
}

.scheduleTable tbody td {
    width: 10px;
    height: 80px;
    overflow: visible;
}

.scheduleTable.jobSchedule tbody td {
    width: 20px;
    height: 50px;
}
.scheduleTable.jobSchedule tbody td.scheduleFaultDescription {
    height: 25px;
}

.scheduleTable.jobSchedule.alternative tbody td {
    height: 20px;
    font-size: 12px;
    text-align: right;
}


.employeeNameHeader picture,
.jobSchedule .entry picture {
    height: 40px;
    width: 40px;
    margin-right: 3px;
}

.employeeNameHeader picture img,
.jobSchedule .entry picture img {
    height: 40px;
    object-fit: cover;
    width: auto;
}

.scheduleTable tbody td.startTimeBlock {
    border-left: 1px solid #999;
}
.scheduleTable tbody td.scheduleShiftCell {
    font-size: 28px;
    text-align: center;
    border-left: 1px solid #999;
    border-right: 1px solid #555;
    user-select: none;
}
.scheduleTable tbody td:hover,
.scheduleTable tbody td.hover {
    background-color: #f0ecec !important;
}
.scheduleTable tbody td.dragHover {
    background-color: #ade5ff !important;
}
.dailySchedule .scheduleTable tbody>tr.employee>:nth-child(4n+5) {
    border-right: none;
}
.dailySchedule .scheduleTable tbody>tr>:nth-child(4n+5),
.dailySchedule .scheduleTable tbody>tr>td.scheduleFaultDescription,
.dailySchedule .scheduleTable tbody tr.employee>:nth-child(4n+2) {
    border-right: 1px solid #999;
}
/*
.weeklySchedule .scheduleTable tbody td:nth-child(6n+1) {
    border-right: 1px solid #999999;
}
*/
.scheduleTable div.entry-compact {
    font-size: 16px;
}

.scheduleTable.jobSchedule div.entry-compact,
.scheduleTable div.entry {
    font-size: 10px;
    background-color: #d4f1f5;
    box-sizing: border-box;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    /*right: 0;
    width: auto;*/
    height: 80px;
    z-index: 10;
    user-select: none;
    border-left-width: 6px;
    border-left-style: solid;
    vertical-align: middle;
}

.scheduleTable.jobSchedule div.entry {
    height: 49px;
}

.scheduleTable tr.row1 div.entry {
    background-color: #9ad9ea;
}

.employeeNameHeader,
.scheduleTable div.entry .entry-contents {
    padding: 4px 10px;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.employeeNameHeader {
    justify-content: end;
}
.employeeNameHeader>div {
    width: 160px;
}
.scheduleTable div.entry .drag-bar {
    background-color: black;
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    opacity: 0.02;
    cursor: col-resize;
}
.scheduleTable div.entry .drag-right {
    left: auto;
    right: 0;
}
.scheduleTable div.entry .drag-top,
.scheduleTable div.entry .drag-bottom {
    left: auto;
    width: 100%;
    height: 8px;
    cursor: row-resize;
}
.scheduleTable div.entry .drag-bottom {
    top: auto;
    bottom: 0;
}
.scheduleTable div.entry .drag-bar:hover {
    opacity: 0.1;
}
.scheduleTable div.entry .status-dot {
    background-color: #1fbe64;
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    user-select: none;
    pointer-events: none;
}
.scheduleTable div.entry .status-dot.status-red,
.scheduleTable div.entry .status-dot.status-closed {
    background-color: #ff3c35;
}
.scheduleTable div.entry .status-dot.status-yellow {
    background-color: #eecc23;
}
.scheduleTable div.entry .status-dot.status-blue {
    background-color: #3ba5eb;
}
.scheduleTable div.entry .status-dot.status-purple {
    background-color: #9f3beb;
}

#calendarContainer {
    position: relative;
}
#calendarWidget {
    margin: 5px 0 20px 0;
    position: absolute;
    z-index: 9999;
}

h2.section-heading {
    width: 100%; 
    float: left;
    margin-left: 15px;
    margin-top: 20px;
    margin-bottom: 6px;
}

/**
 * Price Point
 */

.price-point-items tr.price-increase > td:nth-child(7) {
    color: #ac0909;
}
.price-point-items tr > td.favourite-cell {
    cursor: pointer;
    color: #d8d8d8;
}
.price-point-items tr > td.favourite-cell:hover {
    color: #c1c1c1;
}
.price-point-items tr.favourite > td.favourite-cell {
    color: #ffb100;
}
.price-point-items tr.favourite > td.favourite-cell:hover {
    color: #e29e00;
}
.price-point-items tr.row-highlight:hover {
    background-color: #ebf2fd;
    cursor: pointer;
}



/* Override popup styling */

.mblSimpleDialogDecoration {
    background: white none !important;
    box-shadow: 0 5px 2px rgba(0,0,0,0.5);
}
.mblSimpleDialogDecoration {
    color: #333 !important;
}
.mblSimpleDialog .multiSelect {
    width: 100%;
    font-size: 14px;
}
.mblSimpleDialog .formTip {
    font-size: 60%;
}
.mblSimpleDialog .dijitButtonNode.deleteEntryButton {
    background: darkred none;
}

.top-note {
    font-weight: bold;
    text-align: left;
    color: #888888;
}

/* bootstrap style margin and padding classes */
.mr-1, .mx-1, .m-1 {
    margin-right: 0.25em !important;
}
.mr-2, .mx-2, .m-2 {
    margin-right: 0.5em !important;
}
.mr-3, .mx-3, .m-3 {
    margin-right: 1em !important;
}
.mr-4, .mx-4, .m-4 {
    margin-right: 1.5em !important;
}
.mr-5, .mx-5, .m-5 {
    margin-right: 3em !important;
}
.ml-1, .mx-1, .m-1 {
    margin-left: 0.25em !important;
}
.ml-2, .mx-2, .m-2 {
    margin-left: 0.5em !important;
}
.ml-3, .mx-3, .m-3 {
    margin-left: 1em !important;
}
.ml-4, .mx-4, .m-4 {
    margin-left: 1.5em !important;
}
.ml-5, .mx-5, .m-5 {
    margin-left: 3em !important;
}
.mb-1, .my-1, .m-1 {
    margin-bottom: 0.25em !important;
}
.mb-2, .my-2, .m-2 {
    margin-bottom: 0.5em !important;
}
.mb-3, .my-3, .m-3 {
    margin-bottom: 1em !important;
}
.mb-4, .my-4, .m-4 {
    margin-bottom: 1.5em !important;
}
.mb-5, .my-5, .m-5 {
    margin-bottom: 3em !important;
}
.mt-1, .my-1, .m-1 {
    margin-top: 0.25em !important;
}
.mt-2, .my-2, .m-2 {
    margin-top: 0.5em !important;
}
.mt-3, .my-3, .m-3 {
    margin-top: 1em !important;
}
.mt-4, .my-4, .m-4,
table.setup {
    margin-top: 1.5em !important;
}
.mt-5, .my-5, .m-5 {
    margin-top: 3em !important;
}

.pr-1, .px-1, .p-1 {
    padding-right: 0.25em !important;
}
.pr-2, .px-2, .p-2 {
    padding-right: 0.5em !important;
}
.pr-3, .px-3, .p-3 {
    padding-right: 1em !important;
}
.pr-4, .px-4, .p-4 {
    padding-right: 1.5em !important;
}
.pr-5, .px-5, .p-5 {
    padding-right: 3em !important;
}
.pl-1, .px-1, .p-1 {
    padding-left: 0.25em !important;
}



.pl-2, .px-2, .p-2,
table.setup>thead>tr>th,
table.setup>tbody>tr>td,
table.setup>tbody>tr>td.input>.dijitTextBox>.dijitInputContainer>.dijitInputInner {
    padding-left: 0.5em !important;
}
.pl-3, .px-3, .p-3 {
    padding-left: 1em !important;
}
.pl-4, .px-4, .p-4 {
    padding-left: 1.5em !important;
}
.pl-5, .px-5, .p-5 {
    padding-left: 3em !important;
}
.pb-1, .py-1, .p-1 {
    padding-bottom: 0.25em !important;
}
.pb-2, .py-2, .p-2 {
    padding-bottom: 0.5em !important;
}
.pb-3, .py-3, .p-3 {
    padding-bottom: 1em !important;
}
.pb-4, .py-4, .p-4,
table.setup>tbody>tr>td,
table.setup>tbody>tr>td.input>* {
    padding-bottom: 1.5em !important;
}
.pb-5, .py-5, .p-5 {
    padding-bottom: 3em !important;
}
.pt-1, .py-1, .p-1 {
    padding-top: 0.25em !important;
}
.pt-2, .py-2, .p-2 {
    padding-top: 0.5em !important;
}
.pt-3, .py-3, .p-3 {
    padding-top: 1em !important;
}
.pt-4, .py-4, .p-4,
table.setup>tbody>tr>td,
table.setup>tbody>tr>td.input>* {
    padding-top: 1.5em !important;
}
.pt-5, .py-5, .p-5 {
    padding-top: 3em !important;
}

.text-center {
    text-align: center !important;
}

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

.theme2020.mblSimpleDialogDecoration {
    background-image: none;
    background-color: white;
    border:2px solid #DCDCDC;
    box-shadow: none;
}



.btn{
    border-bottom:2px solid #157DEC;;
    border-top: none;
    border-left: none;
    border-right: none;
    color:Black; 
    background-color:white;
    text-align:center;
    margin-right:5px;

}
.btndesign{
    border:.5px solid black;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 30px; 
    color:Black;
    background-color:white;
}
.bt{
    background-color: #157DEC;
    color: white;
    height: 25px;
    font-size: 14px; 
    border:none;
}

.btndesign1.btndesign{
    font-size:12px;
    float:left;
    border:none;
    color: white;
    min-width: 100px;
    background-color: #157DEC;
    height: 25px;
    border-radius: 5px; 
    margin: 20px;
}

.row-design1{
    font-size: 12px;
    border-bottom: 1.5px solid #A9A9A9;
    color: black;
}
.tidy{
    width: 400px;
    background-color: #157DEC;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    border: none;
    min-height: 30px;
    margin-top: 20px;
}
.tidycontent{
    font-size: 14px;
    color:black;
    padding-left: 30px;
    padding-top: 20px;
}
.tidyinput{
    width:100%;
    background-color: #f2f3f4;
    height: 25px;
    border:1px solid #DCDCDC;
    border-radius: 5px;
}
.head-design{
    font-size: 12px;
}
.font-size,
table.setup {
    font-size: 12px;
    color:black;
}
.font-size-lg{
    font-size: 14px;
    color:black;
}

.blue-color{
    border:.5px solid #157DEC;
    background-color: rgb(16,168,243);
    color: white;
    height:22px;
    cursor: pointer;

}
.white-color{
    border:.5px solid #157DEC;
    background-color:transparent;
    height:22px;
    cursor: pointer;
}
.prnt-btn{
    width:80px;
    float: right;
    margin-right: 15px;
    border-radius: 5px;
    border:none;
    cursor: pointer;
}

.edit-btn{
    width:100px;
    float: right;
    margin-right: 15px;
    border-radius: 5px;
    border:none;
    cursor: pointer;
}



.add-btn{
    width:70px;
    float: right;
    margin-right: 15px;
    border-radius: 5px;
    border:.5px #000 solid;
    background-color: white;
    color: #157DEC;
    height:25px;
    cursor: pointer;
}
.font-color.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner{
    color: blue;

}

.claro .theme2020 .ui-widget-header .dgrid-cell,
.claro .theme2020 .ui-widget-header .dgrid-cell:hover {
    background: -webkit-linear-gradient(top, #e7e7e7 0%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #e7e7e7 0%,#e7e7e7 100%); /* W3C */

}
.theme2020 .dgrid{
    min-height: 150px;
}

.theme2020 .navtab{
    background-color: red;
}


.adjustQtyDialog .wrapper {
    padding: 0px 10px 20px 10px;
}
.adjustQtyDialog table {
    width: 40em;
}
.adjustQtyDialog table td {
    padding: 5px;
}
.adjustQtyDialog table td:first-child {
    width: 14em;
}
.adjustQtyDialog .title-cell {
    font-size: 15px;
    font-weight: 600;
    padding-top: 15px;
    padding-bottom: 2px;
}


/*.nav-hours-btn{
    margin-left: -6px;
    width: 100px;
    border-radius: 0px;
    border:.5px solid #157DEC;
    background-color: #157DEC;
    color: white; 
    height: 25px;
    font-size: 14px;
}*/
.emp-field{
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    width:95%;
    height: 20px;
}
.dj_webkit .claro .newtheme2020 .dijitTextBox .dijitInputInner{
    color:black;
    background-color: black; 
    font-size: 12px;
}



.btn-2020{
    padding-left: 20px;
    padding-right: 20px;
}

#jms.claro .dijitToolbar .dijitButton .dijitButtonNode,
#jms.claro .dijitToolbar
{
    background-color: #FF8C00;
    background-image: none;
    //	#2B65EC

}
#jms.claro .main-menu-widget {
    background-color: #FF8C00;
    color: white;
    /* border: 2px solid black;
     border-right: none;
     border-left: none;*/
}





.menu-right {
    float: right;

}


.menu-drop-down .dijitButtonText {

    padding-top: 5px;

}
.menu-right .dijitButtonText{
    font-size: 14px;
    padding-left: 5px;

}
.claro .dijitMenu .dijitMenuItem td,
.claro .dijitComboBoxMenu .dijitMenuItem{
    padding: 5px;   
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: #ffffff;

}
.claro .dijitMenu .dijitMenuItemHover td,
.claro .dijitMenu .dijitMenuItemSelected td,
.claro .dijitMenuItemHover,
.claro .dijitComboBoxMenu .dijitMenuItemHover,
.claro .dijitMenuItemSelected {
    border-color:transparent;
    background-color: transparent;
    background-image: none;
}
/*.menu-right{
    padding-left: 10px;
    padding-right: 10px;
}*/

.dijitSelect .dijitArrowButtonInner,
.dijitButtonNode .dijitArrowButtonInner{
    color: black;
}
#main-menu .dijitArrowButtonInner{
    background-image: none;
    background-position: 0 0;
}

.claro .dijitMenuExpand {
    width: 17px;
    height: 17px;
    background-image: url("images/sidearrow.png");
    background-position: -14px 0;
    margin-right: -10px;
    margin-left: 15px;
    margin-bottom: 10px;

}
.no-arrow .dijitArrowButtonInner {
    display: none !important;
}




.search-icon .dijitButtonText:before {

    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f002";
    font-size: 14px!important;
}
.contacts-icon .dijitButtonText:before {
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f007";
    font-size: 14px!important;
}
.notification-icon .dijitButtonText:before {
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f0f3";
    font-size: 14px!important;
}
.help-icon .dijitButtonText:before {
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f059";
    font-size: 14px!important;
}
.smile-icon .dijitButtonText:before {
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f118";
    font-size: 14px!important;
    padding-left: 5px !important;
}
.user-icon .dijitButtonText:before {
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f2bd";
    font-size: 14px!important;
    padding-left: 5px !important;
}
.icon .dijitButtonText:after {

    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f078";
    padding-left: 10px;
    font-size: 14px!important;
}


.home-icon .dijitButtonText:before {

    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f015";
    padding-left: 10px;
    font-size: 14px!important;
}
.dashboard-icon .dijitButtonText:before {

    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f00a";
    padding-left: 8px;
    font-size: 14px!important;

}
.accounts-icon .dijitButtonText:before {

    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f084";
    padding-left: 8px;
    font-size: 14px!important;
}
.operations-icon .dijitButtonText:before {

    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f085";
    font-size: 14px!important;
}
.reporting-icon .dijitButtonText:before {

    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f1fe";
    font-size: 14px!important;
}
.plus-icon .dijitButtonText:before {

    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f067";
    font-size: 14px!important;
    padding-left: 5px !important;
}
.help-icon .dijitButtonText:before {

    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f059";
    font-size: 14px!important;
    //color: blue;

}
.claro .dijitToolbar{
    border-bottom: none;
}

.dijitToolbar .dijitButtonContents{
    padding: 5px 0px; 
    margin-top: 5px;
}
.menu-organisation .dijitStretch
{
    background-color: #FFA500;
    border-radius: 4px;
    padding-left: 5px;
}

.claro #main-menu .dijitToolbar .dijitButtonHover .dijitButtonNode,
.claro #main-menu .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
.claro #main-menu .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
.claro #main-menu .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
    border-width: 0px;
    border-color: transparent;
    background-color: transparent;
    background-image: none;
    padding: 1px;
}


.claro #main-menu .dijitToolbar .dijitButtonActive .dijitButtonNode,
.claro #main-menu .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
.claro #main-menu .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
    border-color: transparent;
    background-color: transparent;
    background-image: none;
}
.claro #main-menu .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover,
.claro #main-menu .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover {
    background-color: transparent;
}
#jms :focus {
    outline: none;
}

button {
    border: none;
}
.border-2020{
    border: 1.5px solid #DCDCDC;
    border-left: none;
    border-right: none;

}
.input-design{
    width:95%;
    font-size: 12px;
    border-radius: 5px;
}

.row-highlight:hover{
    background-color: #DCDCDC;
    cursor: pointer;
}

.head-color{
    color:#0a89ce !important;
    cursor: pointer;
    font-size: 12px;
}

.head-sub-color{
    color:purple; 
    font-size: 12px;
}

.main-box-design-xs{
    border-top:2px solid rgb(16,168,243); 
    min-height: 500px;
    margin-bottom: 10px;
    //border-top-color: rgb(16,168,243);
    width: 100%;
}

.main-box-design{
    border-top:2px solid rgb(16,168,243); 
    min-height: 500px !important;
    margin-bottom: 10px;
    // border-top-color: rgb(16,168,243);
    width: 100%;
}

.main-box-design-listing-pages{
    border-top:2px solid rgb(16,168,243); 
    min-height: 500px !important;
    margin-bottom: 10px;
    width: 100%;
}
.main-box-design1{
    // border:1px solid rgb(16,168,243); 
    min-height: 1000px;
    margin-bottom: 10px;
    margin-top: 0.5px;
    width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
.btn-design-2020{
    border-left: 1px solid #157DEC ;
    border-right: 1px solid #157DEC ;
    border-top: 3px solid #157DEC;
    border-bottom: none;
    padding-top: 5px;
    padding-bottom: 6px;
    background-color: white;
    color:black;
    cursor: pointer;
    /* margin-right:5px;
     font-size: 14px;*/
    text-align:center;

}
.blue-tab{
    border-left: 1px solid #157DEC ;
    border-right: 1px solid #157DEC ;
    border-top: 3px solid #157DEC;
    border-bottom: none;
    padding-top: 5px;
    padding-bottom: 6px;
    background-color: white;
    color:black;
    margin-right:5px;
    font-size: 14px;
    text-align:center;
    height: 15px; 
    cursor: pointer;

}
.blue-tab1{
    border:2px solid #157DEC;;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-top: 5px;
    padding-bottom: 6px;
    height: 15px; 
    color:Black; 
    background-color:white;
    text-align:center;
    margin-right:5px;
    font-size: 14px;
    cursor: pointer;
}


.search-box{
    width:50%;
    border-radius: 5px;
    border:1px solid #DCDCDC; 
    height: 25px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.advanced-search-button{
    font-size:14px;
    border:none;
    color: white;
    background-color: #157DEC; 
    height: 25px; 
    border-radius: 6px;
    cursor: pointer;
}


.table-design-top{
    background-color: #e7e7e7;
    border: 1px solid #d0d0d0;
    width:60%;

}
.search-left-div{
    width: 30%;
    float: left;

}
.search-right-div{
    width: 70%;
    float: left;
}

.table-design-bottom{
    background-color: #f1f1f1; 
    width: 73%;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.table-design1{
    border-spacing:5px 8px;
    display:none;
    overflow: hidden; 
    width: 100%;  
    border-color: #DCDCDC;
    padding-bottom: 15px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 20px;
}

.table-design{
    border-spacing:5px 8px;
    //display:none;
    //overflow: hidden; 
    width: 100%;  
    //border-color: #DCDCDC;
    padding-bottom: 15px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 20px;
}

.input-field-design{
    font-size: 12px;
    border-radius: 5px;
}

div.display-dot {
    white-space: nowrap;  
    overflow: hidden;
    text-overflow: ellipsis; 
}

.table-design-head{
    border: 2px solid #DCDCDC;
    border-radius: 5px;
    border-bottom: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    height: auto;
    width: 100%;

}
.table-design-body{
    border: 2px solid #DCDCDC;
    border-bottom: none;
    border-top: none;
    height: auto;
    width: 100%
}
.table-design-footer{
    border: 2px solid #DCDCDC;
    border-radius: 5px;
    border-top: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    height: auto;
    width: 100%
}
.row-color{
    background-color: #DCDCDC;
}
.row-color-alt {
    background-color: #d4f1ff;
}
.row-hoverable:hover { background-color: #e9f8ff; }
.row-hoverable:active { background-color: #b8e7ff; }

.row-hoverable.row-color-alt:hover { background-color: #c5ecff; }



/* on / off switch toggle button used in card files */

.switch {
    position: relative;
    display: block;
    vertical-align: top;
    width: 60px;
    height: 20px;
    padding: 3px;
    margin: 0 10px 10px 0;
    background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
    border-radius: 18px;
    box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
    background: #eceeef;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    line-height: 1;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
}
.switch-label:before {
    content: attr(data-off);
    right: 11px;
    color: #aaaaaa;
    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
    content: attr(data-on);
    left: 11px;
    color: #FFFFFF;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    opacity: 0;
}
.switch-input:checked ~ .switch-label {
    background: #0088cc;
    border-color: #0088cc;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
    opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
    opacity: 1;
}
.switch-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
    background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
    border-radius: 100%;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -6px;
    width: 12px;
    height: 12px;
    background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
    border-radius: 6px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
    left: 44px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Transition
========================== */
.switch-label, .switch-handle {
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
}
/* on / off switch toggle button used in card files end */
.heading-2020{
    font-size: 12px;
    background: none;
    color: black;
    text-shadow:none;
    font-weight: normal;
    border: none;

}

.input-field{

    width:95%;
    font-size: 12px;
    border:1px solid #DCDCDC; 
    height: 18px; 
    border-radius: 5px;

}
.table-heading-design,
table.setup {
    border:1px solid #DCDCDC;
    border-radius: 5px;
    margin-bottom: 20px;
    width: 96%
}




.row-heading-color, table.setup>thead>tr {
    background-color: #e7e7e7;
    padding-top: 15px;
}

.photo-design{
    height: 250px; 
    width: 95%;
    border: 1.5px solid #DCDCDC;
    border-radius: 5px;
    float: left;

}
.new-grid .theme2020 .dgrid{
    min-height:200px;
}



/* WIP Calculations page table design */

.table-div{
    width: 100%;
    border: 1px #e7e7e7 solid;
    border-radius: 5px;
    max-height: 500px; 
    min-height: 300px;
    overflow: scroll;
}
.table-head{
    position: sticky;
    top: 0;
    border-top: 1px solid #DCDCDC;
    color: #000; 
    z-index: 1;

}

.table-body{
    position: sticky; 
    left: 0;
    background: #FFF;
}

.border-left{
    border-left: 2px solid #DCDCDC;
}
.border-right,
table.setup>thead>tr>th,
table.setup>tbody>tr>td
{
    border-right: 1px solid #DCDCDC
}
.border-bottom
{
    border-bottom: 1px solid #DCDCDC
}
.calendar .dijitCalendarDateTemplate { 
    width: 80px;
    border: 1px solid #ccc;
    height: 33px;
}
.start_timeBtn{
    width: 55px !important;
}
.claro .button-size .dijitButtonText {
    font-size: 16px !important;
}
.claro .button-size .altBtn .dijitButtonText {
    font-size: 14px !important;
}

.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 2%;
    right: 10%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   
}

.ellipsis-underline span{
    position: absolute;
    left: 2%;
    right: 10%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline !important;
}




.ellipsis1  {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.on-click-outer-tab{
    color:#5bb7d4;
    background: white;
    border-bottom: 3px solid #5bb7d4;       
    text-align:center;
    cursor: pointer;
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    padding-top: 0px;
    margin-right: 3px;
}

.outer-tab{
    // color: #999999;
    color: #5d5d5d;
    padding-left: 20px;
    padding-right: 20px;         
    border-color: white;          
    border-radius: 10px;     
    height: 50px;
    text-align:center;
    cursor: pointer;
    float: left;
    padding-top: 0px;
    margin-right: 3px;
}

.on-click-inner-tab{
    color:white;
    background: #5bb7d4;          
    border-radius: 10px;       
    text-align:center;
    cursor: pointer;
    height: 30px;
    padding-left: 30px;
    padding-right: 30px;
    float: left;
    padding-top: 5px;
    margin-right: 3px;
}

.inner-tab{
    color: #5d5d5d;
    padding-left: 30px;
    padding-right: 30px;
    border: 1px solid #999999;
    background: #d5d8d9; 
    border-color: #d5d8d9;        
    border-radius: 10px;     
    height: 30px;
    text-align:center;
    cursor: pointer;
    float: left;
    padding-top: 5px;
    margin-right: 3px;
}

.job-photo {
    width: 200px;
    height: 200px;
    background-color: #ddd;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.odd-row-color{
    background-color: #f4fdff;
}
.even-row{
    background-color: #e7e7e7;
}

.est_finish_date_content::before{
    content: 'Estimated Finish Date'
}



.hide-text-inner {
    /* On small screens hide the text */
    font-size: 12px !important;
    // color: black;
}

.hide-text-inner::before,
.hide-text-inner::after {
    /* But still show icons in ::before and ::after elements */
    font-size: 12px !important;
    //color: black;
}


.show-home-name .home-icon .hide-text-inner{
    font-size: 0px !important;
    color: black;
}
.show-home-name .home-icon .dijitButtonText:before {

    display: none;
}


.return-options-list > li {
    position: relative;
    overflow: hidden;
    padding: 0 8px;
    height: 43px;
    list-style-type: none;
    line-height: 43px;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    border-bottom: 1px solid #adaaad;
    font-weight: bold;
    color: black;
}
.return-options-list > li > i.fa {
    display: none;
    position: absolute;
    top: 12px;
    right: 16px;
    color: #3a5e78;
}
.return-options-list > li:hover { background-color: #d6e3f7; }
.return-options-list > li:active { background-image: linear-gradient(to bottom, #048bf4 0%, #005ce5 100%);}
.return-options-list > li.selected > i.fa {
    display: block;
}
.return-options-list.only-wrong-job > .return-list-item {
    display: none;
}
.return-options-list.only-return > .wrong-job-list-item {
    display: none;
}

.claro .dijitTextBox.dollarTextBox .dijitInputField {
    padding: 0;
}
.claro .dijitTextBox.dollarTextBox em {
    float: left;
    background-color: #ccc;
    height: 19px;
    width: 19px;
    text-align: center;
    line-height: 19px;
    font-size: 13px;
    -webkit-user-select: none;
    user-select: none;
    font-style: normal;
}
.claro .dijitTextBox.dollarTextBox .dijitInputInner {
    width: calc(100% - 20px) !important;
    margin: 2px;
    height: 15px;
    text-align: right;
}

.drop-area {
    text-decoration: none;
    border: 1px dashed #ccc;
    padding: 20px;
    text-align: center;
}
.drop-area:hover { background-color: #ffeab8; }
.drop-area:active { background-color: #f0d594; }
.drop-area.highlight-drop { background-color: #ffeab8; }



.tab-height{
    height: 20px;
}


.font-size{
    font-size: 12px;
}

.row-design,
table.setup>thead>tr>th,
table.setup>tbody>tr>td {
    font-size: 12px;
    border-bottom: 1px solid #DCDCDC;
    color: black;
}

.font-color.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner{
    color: black; 
    font-size: 12px;
}
.dj_webkit  .claro .dijitTextBox.text-size-lg .dijitInputInner,
.text-size-lg .dj_webkit  .claro .dijitTextBox .dijitInputInner{
    color: black; 
    font-size: 12px;
    font-weight: bold;
}
.dijitSelect, .dijitSelect *, .dijitButtonNode, .dijitButtonNode *{
    font-size: 12px;
}
.padding{
    padding-left: 10px !important;
    padding-top: 5px !important;
}

.drop-area {
    text-decoration: none;
    border: 1px dashed #ccc;
    padding: 20px;
    text-align: center;
}
.drop-area:hover { background-color: #ffeab8; }
.drop-area:active { background-color: #f0d594; }
.drop-area.highlight-drop { background-color: #ffeab8; }

.your-picture {
    width: 150px;
    height: 150px;
    background-color: #ddd;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    // text-align: center;
    display: block;
    //margin-left: auto;
    //margin-right: auto;
}
.company-logo{
    width: 150px;
    height: 150px;
    background-color: #ddd;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    display: block;
    border-radius: 50%;
}
.map-size{
    float: right;
    width: 96%;   
    height: 230px
}




.last-activity-info {
    position: relative;
}

.last-activity-info .last-activity-info-text {
    visibility: hidden;
    width: 150px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}


.last-activity-info .last-activity-info-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;/*border-color: #555 transparent transparent transparent;*/
}

.last-activity-info:hover .last-activity-info-text {
    visibility: visible;

    opacity: 1;
}

.last-activity-info .last-activity-info-text-down {
    visibility: hidden;
    width: 150px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}


.last-activity-info .last-activity-info-text-down::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;/*border-color: #555 transparent transparent transparent;*/
}

.last-activity-info:hover .last-activity-info-text-down {
    visibility: visible;

    opacity: 1;
}


.last-activity-info1 {
    position: relative;
}


.last-activity-info1 .last-activity-info-text1 {
    visibility: hidden;
    width: 150px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}


.last-activity-info1 .last-activity-info-text1::after {
    content: "";
    position: absolute;
    top: 100%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;/*border-color: #555 transparent transparent transparent;*/
}

.last-activity-info1:hover .last-activity-info-text1 {
    visibility: visible;
    opacity: 1;
}

.last-activity-info1 .last-activity-info-text_job_status {
    visibility: hidden;
    width: 150px;
    top: 100%;
    left: 50%;

    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    opacity: 0;
    padding-left: 120px;
    transition: opacity 0.3s;
}


.last-activity-info1 .last-activity-info-text_job_status::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    padding-left: 120px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;/*border-color: #555 transparent transparent transparent;*/
}

.last-activity-info1:hover .last-activity-info-text_job_status {
    visibility: visible;
    opacity: 1;
}



.tool-tip-bottom {
    position: relative;
}


.tool-tip .tool-tip-bottom-center {
    visibility: hidden;
    width: 250px; /* Adjust width as needed */
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 100%; /* Position the tooltip below the parent div */
    left: 50%; /* Center the tooltip horizontally */
    transform: translateX(-50%); /* Translate the tooltip back by half of its own width */
    opacity: 0;
    transition: opacity 0.3s;

}
.tool-tip .tool-tip-bottom-center::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: calc(50% - 5px); /* Center the triangle horizontally */
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent; /* Adjust border-color for proper triangle */
}

.tool-tip:hover .tool-tip-bottom-center {
    visibility: visible;
    opacity: 1;
}


.tool-tip .tool-tip-bottom-right {
    visibility: hidden;
    width: 250px; /* Adjust width as needed */
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 100%; /* Position the tooltip below the parent div */
    left: 0%;
    transform: translateX(-50%); /* Translate the tooltip back by half of its own width */
    opacity: 0;
    transition: opacity 0.3s;

}
.tool-tip .tool-tip-bottom-right::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: calc(50% - 5px); /* Center the triangle horizontally */
    border-width: 5px;
    border-style: solid;
    opacity: 0;
    border-color: transparent transparent #555 transparent; /* Adjust border-color for proper triangle */
}

.tool-tip:hover .tool-tip-bottom-right,
.tool-tip .tool-tip-bottom-right:hover {
    visibility: visible;
    opacity: 1;
}

.tool-tip .tool-tip-bottom-right span {
    padding: 3px 0;
    display: block;
    color: #36a4e0;
}
.tool-tip .tool-tip-bottom-right a {
    text-decoration: underline;
    cursor: pointer;
    color: #36a4e0 !important;
}

.tool-tip.stay-open .tool-tip-bottom-right {
    visibility: visible !important;
    opacity: 1 !important;
}



.tool-tip {
    position: relative;
    display: inline-block;

}

.tool-tip .tool-tip-text {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}

.tool-tip:hover .tool-tip-text {
    visibility: visible;
}


.standard-how-to {
    padding: 3px 0 10px 0;
    display: block;
    color: #0a89ce;
    text-align: left;
}
.standard-how-to i {
    color: #0a89ce;
}
.standard-how-to a {
    text-decoration: underline;
    cursor: pointer;
    color: #0a89ce !important;
}


.getting-started-numbers-active{
    background-color: #28a745;
    color: white; 
    text-align: center; 
    border-radius:50%;
    cursor: pointer;
}

.getting-started-numbers{
    background-color: #dddddd;
    color: white; 
    text-align: center;
    border-radius:50%;
    cursor: pointer;
}

.getting-started-number-bar{
    background-color: #dddddd;
    border-radius: 15px;
    height: 10px; 
    width: 100%; 
    cursor: pointer;
}

.hideBox{
    border: none;
}

.display-name-topmenu{
    font-weight: bold;
    text-decoration: underline;
}

.scoll-pane {
    width: 100%;
    height: auto;
    overflow: auto;
    outline: none;
    overflow-y: hidden;
    padding-bottom: 15px;
    -ms-overflow-style: scroll;  // IE 10+
    scrollbar-width: none;  // Firefox
}




.scoll-pane::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

#main-menu-container .top-menu-mobile,
#bottom-menu-container .top-menu-mobile {
    display: none;
}






div.scrollmenu {
    overflow: auto;
    white-space: nowrap;

}
div.scrollmenu::-webkit-scrollbar {
    display: none;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;

}

.reporting-tool-design{
    border: 2px #d5d8d9 solid;
    border-radius: 5px;
}

.date-range-input{
    width: 100%;
    font-size: 12px;
    color: black;
}
.search-input-field-width{
    width: 50%;
}


.home-search-input-field-width{
    width: 25% !important;
}


/* hide google icon on map */ 
a[href^="http://maps.google.com/maps"]{display:none !important}
a[href^="https://maps.google.com/maps"]{display:none !important}

.gmnoprint a, .gmnoprint span, .gm-style-cc {
    display:none;
}
.gmnoprint div {
    background:none !important;
}

.login-width{
    width: 33%;
}

#jms.claro .new-theme .dijitButton.login-button .dijitButtonNode,
#jms.claro .new-theme .login-button .dijitButton .dijitButtonNode,
#jms.claro .new-theme .login-button .dijitToggleButton .dijitButtonNode {
    border: 1px solid #137aa3;
    border-radius: 3px;
    padding: 10px;
    background-size: 100% 100%;
    float: left;
    box-shadow: 0px 0px 2px #bdc5c7;
    cursor: pointer;
    color: #fff;
    width: 120px;
}

#jms.claro .new-theme .dijitButton.login-button .dijitButtonNode:hover,
#jms.claro .new-theme .dijitToggleButton.login-button .dijitButtonNode:hover {
    border: 1px solid #137aa3;
    border-radius: 3px;
    padding: 10px;
    background: limegreen;
    background-size: 100% 100%;
    float: left;
    box-shadow: 0px 0px 2px #bdc5c7;
    cursor: pointer;
    color: #fff;
    width: 120px;
}
.claro .login-button .dijitButtonText {
    font-size: 16px !important;
}
.hideShowIcon{
    display: none;   
}

.margin-left-add-hours-list{
    margin-left: -15px !important;
}

table.setup>tbody>tr>td.input {
    padding: 0 !important;
}

table.setup {
    width: 100%;
    border-spacing: 0;
}

table.setup>thead>tr>th {
    font-weight: bold;
    height: 60px;
}

table.setup>tbody>tr>td.input>* {
    width: 100%;
    height: 100%;
    cursor: text;
}

table.setup>tbody>tr>td.input>*,
table.setup>tbody>tr>td.input .dijitTextBoxFocused .dijitInputContainer {
    background-color: #bbeeff !important;
}

table.setup {
    empty-cells: show;
}


.attachment-table-design{
    border-collapse: collapse; 
    border-left: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    width: 100%;
}

.claro .dijitTabPaneWrapper, .claro .dijitTabContainerTop-tabs, .claro .dijitTabContainerBottom-tabs, .claro .dijitTabContainerLeft-tabs, .claro .dijitTabContainerRight-tabs{
    border: none;  
}

div.displayDot span{
    display:inline-block;
    text-decoration: none;
    width: 100%; 
    white-space: nowrap; 
    overflow: hidden !important;
    text-overflow: ellipsis;
}


.gm-ui-hover-effect {
    display: none !important;
}

.cardfiles-overview-width{
    width: 42%;
}
.cardfiles-profile-width{
    width: 47.8%;
}
.employee-contact-div{
    border: 1.5px solid #DCDCDC;
    width: 60%; 
    min-height: 320px; 
    border-radius: 5px; 
    background-color: #c3e9fb;
}
.iphone-width-sm{
    width: 100% !important;
}

.greenColor{
    color: green !important;
}

.redColor{
    color: red !important;
}


.position-center-div{
    position: relative;
    text-align: center;
}
.position-center-div > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}


/* MONTHLY SUMMARY GRID */

/* Menu */
.monthly-summary-menu {
    float: left;
    list-style: none;
    width: 280px;
    border-top: 1px solid #333;
    border-right: 1px solid #ccc;
    margin-top: 40px;
}
.monthly-summary-menu > li {
    padding: 6px 10px;
    border-bottom: 1px solid #e1e1e1;
    font-weight: 600;
    font-size: 12px;
    min-height: 30px;
    max-height: 30px;
}
.monthly-summary-menu > li.indent { padding-left: 30px; }

/* Grid */
.monthly-summary-grid-wrapper {
    float: left;
    width: calc(100% - 280px);
    overflow-x: auto;
}  
.monthly-summary-grid {
    width: auto;
    overflow: visible;
    border: 0 !important;
}     
.monthly-summary-grid .dgrid-scroller {
    margin-top: 0 !important;
    overflow-x: visible;
    position: static;
    width: auto;
}
.monthly-summary-grid .ui-widget-header {
    position: static;
}
.monthly-summary-grid .ui-widget-header .dgrid-cell {
    font-size: 9.5px;
    font-weight: 600;
    color: #555;
    background: white !important;
    padding-top: 7px;
    border-bottom: 1px solid #333;
}
.monthly-summary-grid .ui-widget-header .dgrid-cell > span {
    display: block;
    font-size: 11px;
}
.monthly-summary-grid .dgrid-row-table,
.monthly-summary-grid .dgrid-row {
    min-height: 30px;
    max-height: 30px;
    width: auto;
    border-right: 1px solid #cccccc;
}
.monthly-summary-grid .dgrid-row {
    border-bottom: 1px solid #e1e1e1;
}
.monthly-summary-grid .dgrid-cell {
    min-height: 30px;
    max-height: 30px;
    font-size: 12px;
    border: 0;
    text-align: right;
    width: 135px;
}
.monthly-summary-grid .dgrid-cell > em {
    font-style: normal;
    color: #777;
}
.monthly-summary-grid .dgrid-cell-padding {
    padding: 8px 10px;
}

/* Last Update */
p.monthly-summary-last-update {
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #d12c2c;
    float: left;
}

.download-monthly-summary {
    float: right;
    margin-top: 10px;
}



/**
 * Steps Layout - as in Stock Take and First Time Setup
 */
.steps-layout h2 {
    padding: 5px 12px;
    background-color: #dff0ff;
    color: black;
    margin: 25px 0 0 0;
}
.steps-layout h2 em {
    float: right;
    font-size: 13px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.steps-layout .uploader {
    float: left;
}
.steps-layout .steps > div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    font-size: 13px;
    border: 1px solid #ccc;
    margin-top: 12px;
    margin-right: 12px;
    width: 15%;
    min-width: 310px;
    max-width: 400px;
    height: 200px;
}
.steps-layout .steps p {
    min-height: 85px;
}
.steps-layout .steps p strong.big {
    font-size: 16px;
}
.steps-layout .steps .dash-box {
    padding: 10px;
    min-height: 57px;
    border: 1px dashed #ccc;
}
.steps-layout .steps .dash-box.action-btn,
.steps-layout .steps .dash-box .action-btn {
    display: none;
}
.steps-layout .dimmed {
    cursor: not-allowed;
    opacity: .4;
}
.steps-layout .userTime {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    color: black;
    font-weight: 600;
}
.steps-layout .userTime i.fas {
    float: left;
    font-size: 17px;
}
.steps-layout .userTime.mb i.fas {
    margin-bottom: 20px;
}
.steps-layout .userTime i.fas.fa-check-circle {
    color: #4eba1f;
    padding: 6px 7px 0 0;
}
.steps-layout .userTime i.fas.fa-ban {
    color: #919191;
    padding: 0 7px 0 0;
}
.steps-layout .num-bubble {
    position: absolute;
    bottom: 3px;
    right: 1px;
    width: 20px;
    height: 20px;
    background-color: #ff9b00;
    border: 2px solid white;
    line-height: 17px;
    text-align: center;
    border-radius: 11px;
    color: white;
    font-size: 11px;
    font-weight: 600;
}

.miscellaneousAllocateStockWidth{
    width: 50%;
    float: left;
}
@media (min-width: 360px) and (max-width:385px)
{
    .display-block::after{
        content: "\a";
        white-space: pre;
    }
    .display-block::before{
        content: "\a";
        white-space: pre;
    }
    .display-none-sm{
        display: none !important;
    }

}

@media (min-width: 300px) and (max-width:700px)
{

    .line-break {
        display:inline;

    }
    .line-break:after {
        content:"\a";
        white-space: pre;

    }
    .display-none-sm{
        display: none !important;
    }

}
@media (min-width: 300px) and (max-width:1200px)
{
    .sms-left-side{
        width: 95%;
        float: left;

    }
    .sms-right-side{
        width: 100%;
        margin-left: -25px !important;
        float: left;
    }


    #rightThirdContentPane{
        display: none;
    }
    #leftThirdContentPane{
        display: none;
    }
    .home-page #main-menu-container .top-menu-mobile.home-page-menu {
        display: block;
    }

    .hide-bottom-menu #bottom-menu-container{
        display: none; 
    }


    .home-page #main-menu-container .top-menu-mobile.sub-page-menu {
        display: none;
    }

    #main-menu-container .top-menu-mobile.sub-page-menu {
        display: block;
    }
    #main-menu-container .main-menu-toolbar {
        display: none;
    }

    #bottom-menu-container {
        height: 5em;
    }



    .dj_webkit .claro .iphone-design-2021 .dijitTextBox .dijitInputInner{
        color:black;
        background-color: black; 
        font-size: 12px;
    }  

    .dj_webkit .claro .date-range-input .dijitTextBox .dijitInputInner{
        color:black;
        background-color: black; 
        font-size: 12px;
        height: 20px;
    }


    .claro .iphone-design-2021 textarea.dijitTextBox {
        font: inherit;
        padding: 2px;
        color: black;
        font-size: 12px

    }

    .dj_webkit  .claro .dijitTextBox.text-size-lg .dijitInputInner,
    .text-size-lg .dj_webkit  .claro .dijitTextBox .dijitInputInner{
        color: black; 
        font-size: 14px;
        font-weight: bold;
    }
    #jms.claro .new-theme .dijitButton .dijitButtonNode,
    #jms.claro .new-theme .dijitToggleButton .dijitButtonNode {
        border: 1px solid #137aa3;
        border-radius: 3px;
        padding: 6px 12px;

        background: url(images/button-img.png);
        background-size: 100% 100%;
        float: left;
        box-shadow: 0px 0px 2px #bdc5c7;
        cursor: pointer;
        color: #fff;
        min-width: 140px;
    }

    #jms.claro .new-theme .dijitButton.green-color .dijitButtonNode,
    #jms.claro .new-theme .green-color .dijitButton .dijitButtonNode,
    #jms.claro .new-theme .green-color .dijitToggleButton .dijitButtonNode {
        border: 1px solid #137aa3;
        border-radius: 3px;
        padding: 6px 12px;

        background: limegreen;
        background-size: 100% 100%;
        float: left;
        box-shadow: 0px 0px 2px #bdc5c7;
        cursor: pointer;
        color: #fff;
        min-width: 140px;
        /* width: 12em; */
    }

    #jms.claro .new-theme .dijitButton.coral-color .dijitButtonNode,
    #jms.claro .new-theme .coral-color .dijitButton .dijitButtonNode,
    #jms.claro .new-theme .coral-color .dijitToggleButton .dijitButtonNode {
        border: 1px solid #137aa3;
        border-radius: 3px;
        padding: 6px 12px;

        background: coral;
        background-size: 100% 100%;
        float: left;
        box-shadow: 0px 0px 2px #bdc5c7;
        cursor: pointer;
        color: #fff;
        min-width: 140px;
        /* width: 12em; */
    }

    #jms.claro .new-theme .dijitButton.black-color .dijitButtonNode,
    #jms.claro .new-theme .black-color .dijitButton .dijitButtonNode,
    #jms.claro .new-theme .black-color .dijitToggleButton .dijitButtonNode {
        border: 1px solid black;
        border-radius: 3px;
        padding: 6px 12px;

        background: black;
        background-size: 100% 100%;
        float: left;
        box-shadow: 0px 0px 2px black;
        cursor: pointer;
        color: #fff;
        min-width: 140px;
        /* width: 12em; */
    }

    #jms.claro .new-theme .dijitButton.button-size-lg .dijitButtonNode,
    #jms.claro .new-theme .button-size-lg .dijitButton .dijitButtonNode,
    #jms.claro .new-theme .button-size-lg .dijitToggleButton .dijitButtonNode {
        border: 1px solid #137aa3;
        border-radius: 3px;
        padding: 6px 12px;
        padding: 10px;
        background-size: 100% 100%;
        float: left;
        box-shadow: 0px 0px 2px #bdc5c7;
        cursor: pointer;
        color: #fff;
        min-width: 140px;

    }

    .dijitSelect, .dijitSelect *, .dijitButtonNode, .dijitButtonNode *{
        font-size: 12px;
    }

    #jms.claro {
        font-family : Helvetica, Arial, sans-serif;
        font-size : 50%;
        font-size : 12px;
        margin : 0;
        padding : 0;
        background-color : #fff;
        color : #454343;
    }

    .claro .dijitMenu .dijitMenuItem td,
    .claro .dijitComboBoxMenu .dijitMenuItem{
        padding: 5px;
        font-size: 14px;
        border-width: 1px 0 1px 0;
        border-style: solid;
        border-color: #ffffff;

    }


    .font-color.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner{
        color: black; 
        font-size: 12px;
    }

    .hideShowIcon{
        display: block;   
    }


    .on-click-outer-tab{
        color:#5bb7d4;
        background: white;
        border-bottom: 3px solid #5bb7d4;       
        text-align:center;
        cursor: pointer;
        height: 50px;
        padding-left: 20px;
        padding-right: 20px;
        float: left;
        padding-top: 0px;
        margin-right: 3px;
    }

    .outer-tab{
        color: #999999;
        padding-left: 20px;
        padding-right: 20px;         
        border-color: white;          
        border-radius: 10px;     
        height: 50px;
        text-align:center;
        cursor: pointer;
        float: left;
        padding-top: 0px;
        margin-right: 3px;
    }

    .on-click-inner-tab{
        color:white;
        background: #5bb7d4;          
        border-radius: 10px;       
        text-align:center;
        cursor: pointer;
        height: 30px;
        padding-left: 30px;
        padding-right: 30px;
        float: left;
        padding-top: 5px;
        margin-right: 3px;
    }

    .inner-tab{
        color: #999999;
        padding-left: 30px;
        padding-right: 30px;
        border: 1px solid #999999;
        background: #d5d8d9; 
        border-color: #d5d8d9;        
        border-radius: 10px;     
        height: 30px;
        text-align:center;
        cursor: pointer;
        float: left;
        padding-top: 5px;
        margin-right: 3px;
    }
    .font-size{
        font-size: 12px;
    }


    .tab-height{
        height: 27.5px;
    }


    .job-summary-border{
        border: 2px solid #d5d8d9;
        border-radius: 5px;
    }


    .date-range-input{
        width: 100%;
        font-size: 12px;
        color: black;
    }


    .main-box-design{
        border: 3px solid #d5d8d9; 
        min-height: 500px !important;
        border-top-color: #d5d8d9;
        border-bottom: none;
        border-right: none;
        border-left: none;
        width: 100%;
    }


    .main-box-design1{       
        min-height: 1000px;
        margin-bottom: 10px;
        margin-top: 0.5px;
        width: 100%;
        border: none;
    }
    .est_finish_date_content::before{
        content: 'EST Finish Date'
    }

    .display-none{
        display: none !important;
    }
    .border-right-sm{
        border-right : 1px solid #DCDCDC;
    }

    .meter > span {
        background-color: #d5d8d9;
        background-image: -moz-linear-gradient(center bottom , #30b9ff 37%, #01a9fe 69%);
        border-radius: 5px;
        box-shadow: 0 2px 9px rgba(255, 255, 255, 0.3) inset, 0 -2px 6px rgba(0, 0, 0, 0.4) inset;
        display: block;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    .value_meter {
        color: #030303;
        font-weight: bold;
        font-size: 7.5px;
        line-height: 26px;
        letter-spacing: 0px;
        position: absolute;
        z-index: 9999;
        padding-left: 1em;
        text-align: left;
    }

    .margin-left{
        margin-left: -10px !important;
    }

    .margin-left-sm{
        margin-left: -15px;
    }

    .table-scroll{
        width: auto;
        height: auto;
        overflow: scroll;
        overflow-y: hidden;
    }
    .table-scroll-card-files{
        width: 100%;
        height: auto;
        overflow: scroll;
        overflow-y: hidden;
    }
    .map-size{
        width: 100%;   
        height: 350px;
    } 
    .margin-left-reporting-tool{
        margin-left: 0px !important;
    }

    .page-title-design{
        width: 60%;
        text-align: center;
        text-overflow: ellipsis; 
        overflow: hidden;
        color: black;
        white-space: nowrap;
        font-size: 14px;
    }


    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #ededed;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
    }

    .sidenav a {
        padding: 8px 8px 8px 0px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    .sidenav a:hover {
        color: #f1f1f1;
    }

    .sidenav .closebtn {
        position: absolute;
        top: 0px;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    .sidenav-design{
        border-top: 2px solid #d5d8d9; 
        height: 35px; 
        width: 95%;
    }


    .bottom-menu-design{
        padding: 8px; 
        color: black
    }


    .table-design-top{
        background-color: #e7e7e7;
        border: 1px solid #d0d0d0;
        width:100%;
    }
    .search-left-div{
        width: 30%;
        float: left;
    }
    .search-right-div{
        width: 70%;
        float: left;
    }
    .search-input-field-width{
        width: 98%;
    }

    .home-search-input-field-width{
        width: 98% !important;

    }


    .margin-left-add-hours{
        margin-left: -4px !important;
    }
    .margin-left-add-hours-list{
        margin-left: -42px !important;
    }

    .full-width-xs{
        width: 100% !important;
    }
    .popup-box-width {
        width: 80%;
    }
    .popup-box-width-sm {
        width: 80%;
    }

    .form-box-width{
        width: 100%;
    }

    .tradesman-popupBox-height{
        overflow-y: auto; 
        height: 130px;
    }
    .tradesman-popupBox-width{
        width: 90%;
    }


    .main-box-design-listing-pages{
        border: none;
        width: 98%;
    }
    .margin-left-sm{
        margin-left: 14px !important;
    }
    .main-box-design-xs{
        border:0px solid rgb(16,168,243); 
        min-height: 500px;
        margin-bottom: 10px;
        border-top-color: rgb(16,168,243);
        width: 98%;
    }
    .font-size-lg{
        font-size: 14px;
        color:black;
    }

    .nleLabel {
        color:#454343;
        font-family:verdana;
        font-size: 12px !important;
        line-height: 1.5em;
    }
    .mobile-heading-design{
        font-size:16px; 
        letter-spacing:1px;
    }
    .row-design,
    table.setup>thead>tr>th,
    table.setup>tbody>tr>td {
        font-size: 12px;
        border-bottom: 1px solid #DCDCDC;
        color: black;
    }


    .login-width{
        width:98%;
        margin-left: 3px;
    }

    .iphone-width{
        width: 100em !important;
    }
    .iphone-width-jobSummary{
        width: 100em !important;
    }

    .iphone-width-sm{
        width: 50em !important;
    }

    .table-heading-design-invoicing {
        width: 100em !important;
        border:1px solid #DCDCDC;
        border-radius: 5px;
        background-color: #e7e7e7;
    }

    .textleft{
        text-align: left !important;
    }

    .cardfiles-overview-width{
        width: 100%;
    }
    .cardfiles-profile-width{
        width: 100%;
    }
    .your-picture {
        width: 150px;
        height: 150px;
        background-color: #ddd;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left;
        text-align: left;
        display: block;
        float: left;
        // margin-left: auto;
        //margin-right: auto;
    }

    .float-left{
        float: left !important;
    }

    .employee-contact-div{
        border: 1.5px solid #DCDCDC;
        width: 90%; 
        min-height: 320px; 
        border-radius: 5px; 
        background-color: #c3e9fb;
    }
    .padding-left-add-hours{
        padding-left: 8px !important;
    }
    .claro .wideButton .dijitButtonNode {
        width:20em !important;
    }
    .claro .jobstatusButton .dijitButtonNode {
        width:20em !important;
    }
    .poNumber-fontsize{
        font-size: 80px;
    }

    .global-search { display: none; }

    #jsd-widget {
        bottom: 73px !important;
    }
    .miscellaneousAllocateStockWidth{
        width: 95%;
        float: left;
        margin-left: 15px;
        margin-right: 15px;
    }

}


@media (min-width: 900px) and (max-width:1200px)
{
    .sms-left-side{
        width: 62%;
        float: left;

    }
    .sms-right-side{
        width: 38%;
        float: left;
    }

    /*   #bottom-menu-container {
           display: none;
       }
   
       .homeicon{
           display: none;
       }
       .staricon{
           display: none;
       }*/
    .tab-height{
        height: 26.5px;
    }
    .display-none{
        display: block;
    }
    .table-scroll{
        width: auto;
        height: auto;
        overflow: auto;
        overflow-y: hidden;
    }
    .nleLabel {
        color:#454343;
        font-family:verdana;
        font-size: 10px !important;
        line-height: 1.5em;
    }
    .claro .dijitMenu .dijitMenuItem td,
    .claro .dijitComboBoxMenu .dijitMenuItem{
        padding: 5px;
        font-size: 12px;
        border-width: 1px 0 1px 0;
        border-style: solid;
        border-color: #ffffff;
    }
    .meter > span {
        background-color: #d5d8d9;
        background-image: -moz-linear-gradient(center bottom , #30b9ff 37%, #01a9fe 69%);
        border-radius: 5px;
        box-shadow: 0 2px 9px rgba(255, 255, 255, 0.3) inset, 0 -2px 6px rgba(0, 0, 0, 0.4) inset;
        display: block;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    .value_meter {
        color: #030303;
        font-weight: bold;
        font-size: 10px;
        line-height: 26px;
        letter-spacing: 0px;
        position: absolute;
        z-index: 9999;
        padding-left: 1em;
        text-align: left;
    }

    .table-design-top{
        background-color: #e7e7e7;
        border: 1px solid #d0d0d0;
        width:80%;
    }
    .add-hours-width{
        width: 95% !important;

    }
    .add-hours-listing-width{
        width: 97.5% !important;
    }

    .iphone-width{
        width: 98.5% !important;
    }
    .iphone-width-jobSummary{
        width: 100% !important;
    }
    .table-heading-design-invoicing {
        width: 100% !important;
        border:1px solid #DCDCDC;
        border-radius: 5px;
        background-color: #e7e7e7;
    }
    .poNumber-fontsize{
        font-size: 100px;
    }

}

@media (min-width: 1200px) and (max-width: 1630px)
{
    .searchGlobalResults {
        width: auto;
        right: 0;
        margin: 5px 0;
    }
}

@media (min-width: 1200px)
{
    .sms-left-side{
        width: 62%;
        float: left;
    }
    .sms-right-side{
        width: 38%;
        float: left;
    }

    #bottom-menu-container {
        display: none;
    }

    .home-page #main-menu-container .top-menu-mobile.home-page-menu {
        display: none;
    }
    #main-menu-container .top-menu-mobile.home-page-menu {
        display: none;
    }

    .hide-bottom-menu #bottom-menu-container{
        display: none; 
    }


    .home-page #main-menu-container .top-menu-mobile.sub-page-menu {
        display: none;
    }

    .toolbar #main-menu-container .main-menu-toolbar {
        display: none;
    }
    .job-menu #main-menu-container .top-menu-mobile.sub-page-menu {
        display: block;
    }

    .homeicon{
        //display: none;
    }

    /*#main-menu-container .main-menu-toolbar {
        display: none;
    }*/

    .page-title-design{
        width: 60%;
        text-align: center;
        text-overflow: ellipsis; 
        overflow: hidden;
        color: black;
        white-space: nowrap;
        font-size: 14px;
        //padding-top: 10px;
    }
    .showIconName{
        display:inline-block !important;       
    } 
    .text-left{
        text-align: left !important;  
        padding-left: 25px;
    }

    .text-right{
        text-align: right !important;  
        padding-right: 50px;
    }




    .table-scroll{
        width: auto;
        height: auto;
        overflow: auto;
        overflow-y: hidden;
    }


    .hideShowIcon{
        display: none;   
    }


    .dj_webkit .claro .iphone-design-2021 .dijitTextBox .dijitInputInner{
        color:black;
        background-color: black; 
        font-size: 12px;
    }  

    .dj_webkit .claro .date-range-input .dijitTextBox .dijitInputInner{
        color:black;
        background-color: black; 
        font-size: 12px;
        height: 20px;
    }


    .claro .iphone-design-2021 textarea.dijitTextBox {
        font: inherit;
        padding: 2px;
        color: black;
        font-size: 12px

    }

    .dj_webkit  .claro .dijitTextBox.text-size-lg .dijitInputInner,
    .text-size-lg .dj_webkit  .claro .dijitTextBox .dijitInputInner{
        color: black; 
        font-size: 14px;
        font-weight: bold;
    }
    #jms.claro .new-theme .dijitButton .dijitButtonNode,
    #jms.claro .new-theme .dijitToggleButton .dijitButtonNode {
        border: 1px solid #137aa3;
        border-radius: 3px;
        padding: 6px 12px;

        background: url(images/button-img.png);
        background-size: 100% 100%;
        float: left;
        box-shadow: 0px 0px 2px #bdc5c7;
        cursor: pointer;
        color: #fff;
        min-width: 120px;
    }

    #jms.claro .new-theme .dijitButton.green-color .dijitButtonNode,
    #jms.claro .new-theme .green-color .dijitButton .dijitButtonNode,
    #jms.claro .new-theme .green-color .dijitToggleButton .dijitButtonNode {
        border: 1px solid #137aa3;
        border-radius: 3px;
        padding: 6px 12px;

        background: limegreen;
        background-size: 100% 100%;
        float: left;
        box-shadow: 0px 0px 2px #bdc5c7;
        cursor: pointer;
        color: #fff;
        min-width: 120px;

    }

    #jms.claro .new-theme .dijitButton.button-size-lg .dijitButtonNode,
    #jms.claro .new-theme .button-size-lg .dijitButton .dijitButtonNode,
    #jms.claro .new-theme .button-size-lg .dijitToggleButton .dijitButtonNode {
        border: 1px solid #137aa3;
        border-radius: 3px;
        padding: 6px 12px;
        padding: 10px;
        background-size: 100% 100%;
        float: left;
        box-shadow: 0px 0px 2px #bdc5c7;
        cursor: pointer;
        color: #fff;
        min-width: 120px;

    }

    .dijitSelect, .dijitSelect *, .dijitButtonNode, .dijitButtonNode *{
        font-size: 12px;
    }


    #jms.claro {
        font-family : Helvetica, Arial, sans-serif;
        font-size : 50%;
        font-size : 12px;
        margin : 0;
        padding : 0;
        background-color : #fff;
        color : #454343;
    }

    .claro .dijitMenu .dijitMenuItem td,
    .claro .dijitComboBoxMenu .dijitMenuItem{
        padding: 5px;
        font-size: 12px;
        border-width: 1px 0 1px 0;
        border-style: solid;
        border-color: #ffffff;

    }


    .font-color.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner{
        color: black; 
        font-size: 12px;
    }


    .font-size{
        font-size: 12px;
    }


    .tab-height{
        height: 27.5px;
    }


    .est_finish_date_content::before{
        content: 'EST Finish Date'
    }
    .map-size{
        width: 98%;   
        height: 567px;
    } 

    .iphone-width{
        width: 98.5% !important;
    }
    .iphone-width-jobSummary{
        width: 100% !important;
    }

    .table-heading-design-invoicing {
        width: 60% !important;
        border:1px solid #DCDCDC;
        border-radius: 5px;
        background-color: #e7e7e7;
    }

    .nleLabel {
        color:#454343;
        font-family:verdana;
        font-size: 12px !important;
        line-height: 1.5em;
    }

    .poNumber-fontsize{
        font-size: 150px;
    }

}