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

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

.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;
}

.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{
  width:4em;
}
.hourAgainstJob .field-date, .hourAgainstJob .field-sr_status, .partsAndMaterials .field-sr_status{
  width:6.35em;
}
.hourAgainstJob .field-date, .hourAgainstJob .field-sr_status, .partsAndMaterials .field-purchase_status{
  width:9em;
}
.partsAndMaterials .field-cost {
    text-align: right;
    padding-right: 1em;
}
.hourAgainstJob .field-unrecoverable, .partsAndMaterials .field-unrecoverable, .partsAndMaterials .field-cost{
  width:7.5em;
}
.partsAndMaterials .field-unit, .partsAndMaterials .field-po_number{
  width:4.5em;
}
.partsAndMaterials .field-qty_purchased, .partsAndMaterials .field-qty_allocated{
  width:5.5em;
}
/************************************** 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;
    //width:130px;
}

.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;
}

.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 {
  width: 10em;
}

.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;
}

.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: 1em;
  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;
   /* width : 12em;*/
}

.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 : 20px;
    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 : 60px !important;
    /*float : left;*/
}
.claro .dijitButtonText {
    padding : 0;
    margin : 0;
}

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

#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 : 12px;
    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;
}

.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: 27px;
    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;
}

#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: 27px;
}

#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: 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;
}
#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;
    /*background-color : #393d40;*/
    top:49px !important;
}
#jms.claro #topBar {
    float: right;
    /*height: 20px;
    margin: 0.75em 0 0.7em 0em;*/
    padding: 6px 0;
}
#jms.claro .ribbon, #jms.claro .ribbon a {
    /*color : #fff;*/
}
#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: 1.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 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.wide,
#jms table.multi-col-form.wide,
.wide {
    width: 100%;
    min-width: 60em;
    max-width: 85em;
    margin: 0 auto;
}

.full-width {
    width: 100%;
}

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

#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>.dijit,
#jms table.grid>tbody>tr>td>.dijitTextArea {
    border: none;
    background: rgba(255, 255, 0, 0.2);
}

#jms table.grid>tbody>tr>td>.dijit.dijitReadOnly {
    border: none;
    background: 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;
}

#jms.claro .ribbon {
    border-bottom-color: #d4d4d4; 
    border-bottom-style: solid; 
    border-bottom-width: 10px;
}

.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;
}

.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:40%;
}
.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;    
}

.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: 768px){
    #rightThirdContentPane {
        left: 75px !important;
        padding: 0 !important ;
        position: absolute !important;
        top: 488px !important;
        width: 100% !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;}
	
}
@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;}*/
}

.refRadio
	{
		height:30px !important;
		width:35px !important;
		background-image:url("images/radioImage.png") !important;
		background-position:-8px center !important;
		display:inline-block !important;
		vertical-align:middle !important;
	}
.refRadio.checked
	{
		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: #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-family: dosis;
	font-weight: 500;
	font-size: 15px;
	line-height: 26px;
	letter-spacing: 1px;
	position: absolute;
	z-index: 9999;
	padding-left: 1em;
	text-align: left;
}
.meter > span > h2 {
	color: #fff;
	font-family: dosis;
	font-size: 15px;
	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: right;
}

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

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

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

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

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

.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;
}

.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;
}

.schedule {
    height: 100%;
}
.scheduleNav {
    display: flex;
    justify-content: space-between;
}
.scheduleLegend {
    display: flex;
    margin: 20px 0;
}
.scheduleLegend > span {
    margin-left: 40px;
    align-items: center;
}
.scheduleLegend .legend-sample {
    display: inline-block;
    width: 20px;
    height: 20px;
}
.scheduleOuterContainer {
    position: relative;
    height: 600px;
    overflow-y: scroll;
    width: 100%;
}

.scheduleContainer {
    position: relative;
    overflow-x: scroll;
    padding: 0;
}

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

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

.scheduleTable thead th {
    min-width: 60px;
    background-color: #dfecff;
    text-align: center;
    height: 20px;
    padding: 6px;
    border-left: 1px solid #ade5ff;
}
.scheduleTable thead th:first-child {
    box-sizing: border-box;
    position: sticky;
    width: 150px;
    left: 0;
    top: auto;
    padding: 8px 0;
    border-left: 0;
}
.scheduleTable tbody {
}
th.scheduleStaffName {
    position: sticky;
    left: 0px;
    z-index: 100;
    top: auto;
    text-align: center;
}
th.scheduleStaffName div {
    box-sizing: border-box;
    width: 150px;
    height: 80px;
    padding: 8px 0;
    background-color: #f6f4f4;
}
tr.row1 th.scheduleStaffName {
    background-color: #ececec;
}
.scheduleTable tbody td {
    width: 10px;
    height: 80px;
    overflow: visible;
    border-bottom: 1px solid #999;
}
.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 {
    background-color: #f0ecec;
}
.dailySchedule .scheduleTable tbody td:nth-child(4n+1) {
    border-right: 1px solid #999;
}
/*
.weeklySchedule .scheduleTable tbody td:nth-child(6n+1) {
    border-right: 1px solid #999999;
}
*/
.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;
}
.scheduleTable tr.row1 div.entry {
    background-color: #9ad9ea;
}
.scheduleTable div.entry .entry-contents {
    padding: 4px 10px;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}
.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-bar:hover {
    opacity: 0.1;
}
.scheduleTable div.entry-compact {
    font-size: 16px;
}
.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-closed {
    background-color: #eb3b3b;
}

#calendarWidget {
    margin: 20px 0 20px 0;
}

/* 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: center;
    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 {
    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 {
    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 {
    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 {
    padding-top: 1.5em !important;
}
.pt-5, .py-5, .p-5 {
    padding-top: 3em !important;
}

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

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