@charset "utf-8";
/* CSS Document */

@charset "utf-8";
/* CSS Document */

/* GLOBAL STYLES
   ========================================================================== */
html, body {
    /*font-family: "Myriad Pro", Helvetica, "Trebuchet MS", Verdana, sans-serif;*/
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    /*font-family: 'Open Sans', sans-serif;*/
    font-size: 13px;
    line-height: 1.5em;
    color: #2e3233;
    background-color: #f3f4f8;
    width: 100%;
}

table, caption, tbody, tfoot, thead, tr, th, td {
    vertical-align: middle;
}

/* bootstrap override */

a {
    cursor: pointer;
    outline: none;
}

a:hover,
a:focus {
    color: #3eaaf3;
    text-decoration: none;
}

a:focus {
    /* bootstrap override - stop outline on links */
    outline: none;
}

ul,
.list-inline {
    /* bootstrap override */
    margin: 0;
    padding: 0;
}

/* PAGE LAYOUT
   ========================================================================== */
#pageWrapper,
#pageHeader,
#divHeader,
#divInfo,
table {
    width: 100%;
}

#pageHeader {
    background-color: #202a36;
}

#divMain {
    clear: both;
    float: none;
    /* THIS SHOULD BE THE ONLY PLACE THE PAGE WIDTH IS DEFINED */
    /* ALL OTHER WIDTHS ARE %ages of this value */
    width: 100%;
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

#divMain > .panel,
#divMain form > .panel {
    /* no border on first level child panels in #divMain */
    /*border-color:#DEDEDE;*/
}

.panel {
    /* see bootstrap */
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    -webkit-box-shadow: none; /* bootstrap override */
    box-shadow: none; /* bootstrap override */
    border-radius: 0;
    /*background-color: transparent;*/
}

.panel-group {
    margin-bottom: 10px; /* bootstrap override */
}

/* clearfix */
/*#divBody:before,
#divBody:after,*/
.panel-group:before,
.panel-group:after,
.controls:before,
.controls:after,
.controlsExposed:before,
.controlsExposed:after,
.panel.loginArea:before,
.panel.loginArea:after,
#damagecodeattributewrapper ul:before,
#damagecodeattributewrapper ul:after,
ul:before,
ul:after /*,
	#divMain form > .panel:before,
	#divMain > .panel:before,
	#divMain form > .panel:after,
	#divMain > .panel:after*/
{
    display: table;
    content: " ";
}

/* clearfix */
/*#divBody:after,*/
.panel-group:after,
.controls:after,
.controlsExposed:after,
.panel.loginArea:after,
#damagecodeattributewrapper ul:after,
ul:after /*,
	#divMain form > .panel:after,
	#divMain > .panel:after*/
{
    clear: both;
}

/* shadow root level panels, tables etc... */
#divMain > .panel,
#divMain form > .panel,
#divMain form > .panel-group,
#divMain > .panel-group,
.panel.loginArea,
.componentDashboardGroup {
    /*border-color:#DEDEDE;*/
    border: none;
}

/* remove shadows on root panel excaptions */
#divMain .paginationBar.panel,
.pageNav,
#divMain .panel.breadcrumb,
#divMain .panel.controls {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* PANEL 2 COLUMNS */
.panel.col-2 {
    display: inline-block;
    width: 49.5%;
    float: left;
}

.panel.col-2:nth-child(even) {
    float: right;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-left: 5px;
    padding-right: 5px;
}

/* END - Global Styles */

/* HEADING STYLES
   ========================================================================== */

/* headings */
h2 {
    font-size: 1.5em; /* 18px / 12px */
}

h3 {
    font-size: 1.500em;
    font-weight: bold;
}

h4 {
    font-size: 1.333em;
    font-weight: bold;
}

h5 {
    font-size: 1.154em;
    font-weight: bold;
}

.curveHeading {
    display: inline-block;
    background-color: #067DB1;
    padding: 0 40px 0 15px;
    line-height: 2.500em;
    -moz-border-radius: 0 20px 20px 0;
    border-radius: 0 20px 20px 0;
    color: #fff;
    margin-left: -5px; /* only needed if inside a panel */
}

/* PANEL HEADINGS */
.panel-heading {
    background-color: #067DB1;
    color: #fff;
}

/* Panel Heading - Grey */
.panel-heading.grey,
.panel-group .panel-heading.grey {
    background-color: #d7d7d7;
    color: #666;
    margin-bottom: 10px;
}

/* Panel-group Panel Heading - compensate for padding */
.panel-group .panel-heading.grey {
    margin-top: -15px;
    margin-left: -15px;
    margin-right: -15px;
}

.panel-group .col-md-5 .panel-heading.grey,
.panel-group .col-md-6 .panel-heading.grey,
.panel-group .col-md-7 .panel-heading.grey {
    margin-top: 0;
    margin-left: 0;
}

/* Panel Heading - H4 */
.panel-heading h4 {
    font-size: 14px;
    margin: 0;
}

/* CURVED HEADINGS - H5 Grey/Blue */
h5.grey,
h5.blue {
    display: inline-block;
    min-width: 220px;
    padding: 9px 40px 8px 15px;
    min-height: 30px;
    border-radius: 0 20px 20px 0;
}

h5.grey {
    background-color: #D7D7D7;
    color: #666;
}

h5.blue {
    background-color: #067DB1;
    color: #FFF;
}

/* H5-GREY nested in a panel-group*/
.panel-group h5.grey,
.panel-group h5.blue {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: -5px;
}

/* RIBBON HEADINGS */
ul.groupwrapper li h4,
#moduleHeader h2,
h3.yellowRibbonHeading {
    margin-left: 10px;
    margin-top: -3px;
    -moz-border-radius: 0 4px 4px 4px;
    -webkit-border-radius: 0 4px 4px 4px;
    border-radius: 0 4px 4px 4px;
    font-size: 1.250em;
    font-weight: bold;
    line-height: 40px;
    height: 40px;
    color: #fff;
}

ul.groupwrapper li h4:before,
#moduleHeader h2:before,
h3.yellowRibbonHeading:before {
    display: inline-block;
    content: ".";
    height: 3px;
    width: 6px;
    -moz-border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    border-radius: 5px 0 0 0;
    color: transparent;
}

/* END - heading styles */

/* ROUNDED CORNERS
   ========================================================================== */

/* Rounded all 4 corners */
.accordion-group .panel-heading,
.panel-heading a,
.panel-group,
button,
.upBtn,
.downBtn,
input,
select,
textarea,
fieldset,
legend,
.anom_code,
.anom_date,
.anom_swatch,
.status_swatch,
.status_name,
.keySwatch,
#damagecodeattributewrapper li.attributeSearchField,
.paginationBarPageLinks div a,
.paginationActivePage,
.pageNav,
.accordionBtn {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/* Rounded T-L Left-Edges */
.edge_right,
.edge_left:before,
ul.groupwrapper ul.groupwrapper li.componentDashboardGroup h4:before {
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

/* Rounded R-B Right-Edges*/
.edge_left,
.edge_right:after,
ul.groupwrapper ul.groupwrapper li.componentDashboardGroup h4 {
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

/* Rounded T-R Top-Edges*/
.panel-heading {
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

/* Rounded B-L Bottom-Edges*/
/*.subMenu,
.multiRowMenu {
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}*/

/* END - Rounded Corners */

/* BUTTONS: standard Grey & Blue with rounded corners
   ========================================================================== */
html input[type=button],
input[type=reset],
input[type=submit],
button,
.table th input[type=button],
input[type=button].btn,
.button,
.paginationBarPageLinks div a,
.paginationActivePage,
.modal-content button.close.overlap,
.upBtn,
.downBtn
.startJobWizardButton,
.completeJobWizardButton {
    display: inline-block;
    width: auto;
    min-width: 70px;
    padding: 0px 8px;
    border: none;
    background-color: #2C3742;
    color: #fff;
    text-transform: capitalize;
    line-height: 27px;
    height: 27px;
    vertical-align: middle;
    outline: none;
    white-space: nowrap;
}

/*small button*/

.button-small {
    display: inline-block;
    width: auto;
    min-width: 30px;
    padding: 0px 8px;
    border: none;
    background-color: #2C3742;
    color: #fff;
    text-transform: capitalize;
    line-height: 27px;
    height: 27px;
    vertical-align: middle;
    outline: none;
    white-space: nowrap;
    margin-top: 5px;
}

/* button hover state */
button:hover,
input[type=button].btn:hover,
html input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover,
.paginationBarPageLinks div a:hover,
.modal-content button.close.overlap:hover,
.upBtn:hover,
.downBtn:hover {
    box-shadow: none;
    border: none;
    background-color: #F29D00;
}

/* button active state */
button:active,
input[type=button].btn:active,
html input[type=button]:active,
input[type=reset]:active,
input[type=submit]:active,
.paginationBarPageLinks div a:active,
.upBtn:active,
.downBtn:active {
    background-color: #3eaaf3;
}

/* button disabled */
button.disabled,
button.disabled:hover,
button.disabled:focus,
button.disabled:active,
input[type=button]:disabled,
input[type=button]:disabled:hover,
input[type=button]:disabled:focus,
input[type=button]:disabled:active
input[type=button].btn.disabled,
input[type=button].btn.disabled:hover,
input[type=button].btn.disabled:focus,
input[type=button].btn.disabled:active {
    padding: 0px 8px;
    border: none;
    background: #dedede;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #999;
}

.cellError {
    /*background-color: red;*/
    border: 3px solid red !important;
}

.cellWarning {
    /*background-color: orange;*/
    border: 3px solid orange !important;
}

/*.blue,*/
.paginationActivePage {
    padding: 0px 8px;
    border: none;
    background: #F29D00;
    color: #ffffff;
}

/* up & down button - used to reorder table rows */
#divBody .upBtn,
#divBody .downBtn {
    width: 27px;
    min-width: 0;
    margin: 5px;
    background-image: url(/images/v4/buttons/sprite_icons.png);
    background-repeat: no-repeat;
    background-position: -352px 5px;
    text-decoration: none;
}

#divBody .upBtn {
    background-position: -372px 5px;
}

/* ribbon buttons */
.ribbon {
    margin-right: 5px;
    height: 36px;
    border: none;
    font-size: 1em;
    line-height: 36px;
    color: #fff;
    background: #00567A url(/images/v4/buttons/button_bg_blue.jpg) repeat-x left top;

}

.ribbon.edge_left:before,
.ribbon.edge_right:after {
    display: inline-block;
    content: ".";
    color: transparent;
    background: #00567A url(/images/v4/buttons/button_bg_blue.jpg) repeat-x left top;
    height: 42px;
    width: 4px;
}

.ribbon.edge_left:before {
    margin-left: -12px; /* ribbon L-padding + edge-W */
    margin-right: 4px; /* push content right */
}

.ribbon.edge_right:after {
    margin-left: 8px;
    margin-right: -12px; /* ribbon R-padding + edge-W */
}

.ribbon:hover,
.ribbon.edge_right:hover:after,
.ribbon.edge_left:hover:before {
    background: #3EAAF3 url(/images/v4/buttons/button_bg_hover.jpg) repeat-x left top;
}

.ribbon.icon span {
    padding-left: 15px;
}

/* alert buttons  */
/* @ TODO */

/* END - Buttons*/

/* TABLES (CONEWORX)
   ========================================================================== */
.subhead {
    padding: 4px;
    font-size: 1em;
    font-weight: bold;
    background: pink; /* #adb7c3; */
    width: 100%;
    color: #fff;
}

/* required form fields */
.mandatory {
    font-weight: bold;
    text-decoration: none; /* override */
}

.mandatory:before {
    display: inline-block;
    color: #f29d00;
    content: "*";
    width: 10px;
}

#divInfo .table .table {
    background-color: transparent; /* overwrite old css */
}

#divBody .table-panel,
table.table-panel,
#divBody .greybg,
.panel .greybg,
.greybg {
    background-color: #f9f9f9; /*#f3f4f8;*/
}

/* TABLE-FRAMED - with a rounded boarder */
#divBody .table.table-framed,
.panel .table.table-framed,
.table.table-framed {
    border: 1px solid #dedede;
    border-radius: 3px;
    border-collapse: separate;
}

#divBody .table.table-framed tr:last-child td,
.panel .table.table-framed tr:last-child td,
.table.table-framed tr:last-child td {
    border: none;
}

/* MOD DETAILS */
.modDetails {
    font-style: italic;
}

/* HR SUMMARY MODULE - wrapper */

/* header.css override */
.HRSummarySectionTable {
    background-color: transparent;
    border: none;
    width: auto;
}

.HRSummaryWrapper {
    position: relative;
    display: inline-block;
    Width: 100px;
    height: 70px;
    padding-top: 10px;
    margin: 8px 5px;
    background-color: #e6e6e6;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #fff;
}

/* hover over HRSummaryWrapper */
.HRSummaryWrapper:hover {
    background-color: #ddd;
}

.HRSummaryWrapper a {
    display: block;
}

/* HR SUMMARY MODULE - wrapper */
.HRSummaryIndicator {
    display: inline-block;
    position: absolute;
    top: -5px;
    right: -5px;
    Width: 27px;
    height: 27px;
    border-radius: 25px;
    border: 3px solid #e6e6e6;
    background-color: #fff;
    vertical-align: middle;
}

/* HR SUMMARY MODULE - wrapper */
.HRSummaryIndicator img {
    display: block;
    margin-top: -5px;
    margin-left: -2px;
}

/* HR ICON LINK  */
a.HRIconLink,
#divBody a.HRIconLink {
    text-decoration: none;
}

#cal1Container {
    width: 70%;
    margin: 0 auto;
}

#cal1Container table {
    width: auto;
}

/* Calendar wrapper */
.calendarWrapper {
    max-width: 520px;
    margin: 0 auto;
}

/* Calendar container wrapper */
.yui-skin-sam .yui-calcontainer { /* calendar css override */
    border: 0 !important;
    background-color: transparent !important;
}

.yui-calcontainer.multi {
    float: none;
}

/* calendar day links */

#divBody a.selector {
    text-decoration: none;
}

/* Calendar override styles */
.yui-skin-sam .yui-calendar td.calcell.selected a {
    background-color: #f29d00 !important;
}

/* table-iconBtns */
.table-iconNav {
}

.table-iconNav td,
.pageNav .table-iconNav td {
    height: 80px;
    width: 60px;
    border: 1px solid #f3f4f8;
    border-left: none;
    background-color: #e6e6e6;
    text-align: center;
    vertical-align: middle;
}

.table-iconNav td:last-child,
.pageNav .table-iconNav td:last-child {
    border-right: none;
}

/* mouse over table cells */
.table-iconNav td:hover,
.pageNav .table-iconNav td:hover {
    background-color: #ddd;
}

/* A TAb label is a div that appears above a table header */
.tabLabel {
    display: inline-block;
    min-width: 250px;
    padding: 0 10px;
    margin: 0;
    /*border-bottom: 1px solid #fff;*/
    border-radius: 5px 5px 0 0;
    background-color: #828E99;
    color: #fff;
    line-height: 30px;
    vertical-align: middle;
}

/* Job Reconciliation List Box*/
.listBoxJobReconciliation {
    background-color: #fff;
}

.listAlternate:nth-child(even) {
    background-color: #ffffff;
    border-bottom: 1px solid lightgrey;
}

.listAlternate:nth-child(odd) {
    background-color: #f8f9f9;
    border-bottom: 1px solid lightgrey;
}

.listAlternate:hover {
    background-color: #ebebeb;
}

/* Generic Working Week Table */
table.genericWeek tr td {
    height: 49px;
}

/* Coneworx Accordion Button */
a.accordBtnExpand,
#divBody a.accordBtnExpand,
a.accordBtnCollapse,
#divBody a.accordBtnCollapse {
    display: inline-block;
    width: 22px;
    padding: 0;
    /*line-height: 22px;
	background-color: #f3f4f8;*/
    margin-right: 5px;
    border-radius: 2px;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

a.accordBtnExpand:hover,
#divBody a.accordBtnExpand:hover,
a.accordBtnCollapse:hover,
#divBody a.accordBtnCollapse:hover {
    /*background-color: #f29d00;*/
    color: #fcd604;
}

/* END - Tables (coneworx)

/* TABLES 
   ========================================================================== */
.noWrap {
    white-space: nowrap;
}

.table {
    margin-bottom: 10px; /* bootstrap override */
}

/* ------ Tables ------ */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 5px;
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 1px solid transparent;
}

.table > tbody > tr > td,
.panel .table > tbody > tr > td,
.table.anomaly .td {
    border: none;
    border-bottom: 1px solid #DEDEDE; /*#EBEBEB;*/
}

/* Table Striped - alternate rows (odd) */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #ffffff;
}

/* Table Striped - alternate rows (even) */
.table-striped > tbody > tr:nth-child(even) > td {
    background-color: #f8f9f9;
}

/* Table Hover */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background: #ebebeb;
    /*    -webkit-transition: all 0.3s;
        transition: all 0.3s;*/
}

/* Table Header */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > thead > tr > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    height: 40px;
    padding: 4px;
    border: none; /* bootstrap override */
    border-color: #adb7c3;
    background-color: #adb7c3;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    line-height: 1.15em;
    vertical-align: middle;
}

/* override bootstraps table curver borders */
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
    border-radius: 0;
}

/* TABLE HEADER - sub header */
.table thead tr th.subThead {
    background-color: #828E99;
}

/* TABLE HEADER - First cell */
.table thead tr th.subThead:first-child {
    border-top-left-radius: 3px;
}

/* TABLE HEADER - Last cell */
.table thead tr th.subThead:last-child {
    border-top-right-radius: 3px;
}

/* TABLE HEADER - sub header - BLANK CELLS */
.table thead tr th.subThead.blank {
    background-color: #F3F4F8;
}

/* First Column - bold */
.table > tbody > tr > td:first-child,
.table > tr > td:first-child {
    /*font-weight:bold;*/
}

/* Table Bordered - align top */
.table-bordered tr td,
.table-bordered tbody tr td,
.table-bordered button {
    vertical-align: top;
}

/* Table Align Top - align top */
.table.align-top > tr > td,
.table.align-top > tbody > tr > td,
.table.align-top button,
tr.align-top td,
td.align-top {
    vertical-align: top !important;
}

/* TABLE BORDERED  */
.table.table-bordered > tbody > tr > td {
    border: 1px solid #dedede;
}

/* TABLE WHITE */
.table-default > tbody > tr > td,
.table-default > tr > td {
    background-color: #fff;
    border: none;
}

.table-default > thead > tr > th,
.table-default > tr > th {

}

/* TABLE INLINE */
.table-inline {
    display: inline-table;
}

/* TABLE BUTTONS - to space vertically stacked buttons within table cells */
.table button {
    margin-bottom: 5px;
}

.table button:last-child, /* last button */
.table .toolbar button /* toolbars in tables */
{
    margin-bottom: 0;
}

/* GROUP HEADING - clear table styles [multi row table headings] */
th.groupHeading {
    padding: 0 !important;
    height: auto !important;
}

/* LAST SEEN - Last Viewed Row */
.table.anomaly .tr.lastSeen,
.table tr.lastSeen td,
.table > tbody > tr.lastSeen > td,
.table > tr.lastSeen > td {
    background-color: #def0f7 !important;
}

/* FEATURED ROW or CELL - grey background */
.table.anomaly .tr.featured,
.table tr.featured td,
.table > tbody > tr.featured > td,
.table > tr.featured > td,
.table tr td.featured,
.table > tbody > tr > td.featured,
.table > tr > td.featured {
    background-color: #e6e6e6;
}

.table > tr.blank > td,
.table > tbody > tr.blank > td,
.table > tr.blank > td,
.table tr td.blank,
.table > tbody > tr > td.blank,
.table > tr > td.blank {
    border: none;
    background-color: transparent;
}

/* END - Tables */

/* SWATCHES & INDICATORS
   ========================================================================== */
/* wraps swatch elements when supporting text is needed  */
.swatch_wrapper {
    display: table;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 2px 0;
    min-height: 32px;
}

/*.anom_swatch,					 anomaly colour swatch */
.swatch_wrapper .status_swatch, /* component table/header swatch & data */
td .status_swatch, /* component table swatch */
.componentHeader .status_swatch /* component header swatch */
{
    display: inline-block;
    width: 14px;
    border: 1px solid transparent;
    height: 32px;
    background-color: #ececec;
}

/* component table/header swatch & data */
.swatch_wrapper .status_name,
.swatch_wrapper .status_swatch,
td .swatch_wrapper .status_swatch {
    display: table-cell;
    vertical-align: middle;
}

/* component table/header swatch & data */
.swatch_wrapper .status_name {
    min-width: 50px;
    padding: 0 3px;
    border: 1px solid #ccc;
}

/* standalone swatch in a table */
td > .status_swatch {
    display: inline-block;
    width: 30px;
    height: 20px;
    padding: 0px;
    border-radius: 4px;
}

td > .swatch {
    display: inline-block;
    min-width: 45px;
    /* padding: 1px 4px; */
    border-radius: 3px;
    text-align: center;
    line-height: 25px;
}

/* --- INDICATORS --- */
.table th.col_indicator,
.table td.col_indicator {
    padding: 0px;
    width: 5px;
}

/* right-arrow */
td.col_indicator .right-triangle {
    position: relative;
    left: 5px;
    width: 0;
    height: 0;
    border-left: 5px solid #DEDEDE;
    border-top: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid rgba(0, 0, 0, 0);
}

.table td.col_indicator.default {
    background-color: #DEDEDE !important;
}

/* right-arrow */
td.col_indicator.default .right-triangle {
    border-left: 5px solid #DEDEDE !important;
}

/* due state */
.table td.col_indicator.due, .status_swatch.due {
    background-color: #ff6600 !important;
}

/*  due state - right triangle  */
td.col_indicator.due .right-triangle {
    border-left-color: #ff6600 !important;
}

/* overdue state */
.table td.col_indicator.overdue, .status_swatch.overdue {
    background-color: #cc0000 !important;
}

/*  active state - right triangle  */
td.col_indicator.overdue .right-triangle {
    border-left-color: #cc0000 !important;
}

/* completed state */
.table td.col_indicator.completed, .status_swatch.completed {
    background-color: #339966 !important;
}

/*  completed state - right triangle  */
td.col_indicator.completed .right-triangle {
    border-left-color: #339966 !important;
}

/* END - Swatches & Indicators */

/* FORM ELEMENTS
   ========================================================================== */
label, input, select, textarea {
    /*font-size: 12px;
    font-weight: normal;
    line-height: 20px;*/
    margin: 5px;
}

input, select, textarea, input.btn {
    font-size: 13px; /* overwrite header.css */
}

input[type="file"],
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    display: inline-block;
    margin-left: 0px; /* testing */
    border: 1px solid #fff;
    border-top: 1px solid #ccc;
    background-color: #f7f7f7;
    vertical-align: middle;
    /*line-height: 28px; */
    height: 28px;
}

/* TABLE-FRAMED - form fields */
.table-panel input[type="file"],
.table-panel select,
.table-panel textarea,
.table-panel input[type="text"],
.table-panel input[type="password"],
.table-panel input[type="datetime"],
.table-panel input[type="datetime-local"],
.table-panel input[type="date"],
.table-panel input[type="month"],
.table-panel input[type="time"],
.table-panel input[type="week"],
.table-panel input[type="number"],
.table-panel input[type="email"],
.table-panel input[type="url"],
.table-panel input[type="search"],
.table-panel input[type="tel"],
.table-panel input[type="color"],
.table-panel .uneditable-input {
    background-color: #fff;
}

/* file input field */
input[type="file"] {
    display: inline-block;
    width: auto;
    border-color: #cccccc;
    /*height: 40px;*/
}

/* radio & checkbox fields */
input[type="radio"],
input[type="checkbox"] {
    height: 28px;
    width: auto;
    margin: 5px 0; /*position using same padding as labels & input boxes */
    padding: 0;
    border: none;
    border-radius: 0;
    vertical-align: middle;

    /* @TODO stuff */
}

/*.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    float: none;
    margin: 0;
    padding: 0;
    min-height: inherit;
}

.radio,
.checkbox {
    padding: 0;
    min-height: 0;
}*/
/* /////////////////////// */

/* hover - form fields */
input:hover,
.login .input-group input:hover,
select:hover,
textarea:hover {
    border: 1px solid #88D7FF;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/* focus - form fields */
input:focus,
.login .input-group input:focus,
input[readonly]:not(.calendarInputField):focus,
textarea[readonly]:focus,
select:focus,
textarea:focus {
    outline: none;
    border: 1px solid #428BCA;
}

input[type="radio"]:hover,
input[type="radio"]:focus,
input[type="checkbox"]:hover,
input[type="checkbox"]:focus {
    border: none; /* remove effects on radio & checkboxes */
}

input[type="file"]:hover,
input[type="file"]:focus {
    outline: none;
}

/* Select boxes - add a full border around select boxes */
select {
    border: 1px solid #cccccc;
    padding-top: 5px; /* position text in Moz */
    padding-bottom: 5px; /* position text in IE */
}

/* testing widths */
input {
    width: 150px; /* testing ONLY*/
}

/* textarea sizes */
textarea {
    min-height: 100px;
    width: 250px;
    max-width: 100%;
    padding: 5px;
}

/* textarea heights */
textarea.medtall {
    height: 200px;
}

textarea.tall {
    height: 300px;
}

textarea.xtall {
    height: 400px;
}

/* xsmall widths */
input.xsmall,
textarea.xsmall,
select.xsmall {
    width: 40px !important;
    min-width: 0 !important;
}

/* small widths */
input[type="text"].small,
textarea.small,
select.small {
    font-size: 1em !important;
    width: 150px !important;
    min-width: 0 !important;
}

input[type="text"].small {
    width: 90px !important;
}

/* med widths */
input[type="text"].med,
textarea.med,
select.med {
    width: 300px !important;
    min-width: 0 !important;
}

/* large widths */
input[type="text"].long,
textarea.long,
select.long {
    width: 400px !important;
    min-width: 0 !important;
}

/* xlarge widths */
input[type="text"].xlong,
textarea.xlong,
select.xlong {
    width: 700px !important;
    min-width: 0 !important;
}

/* full width */
input[type="text"].full,
textarea.full,
select.full {
    width: 100% !important;
    min-width: 0 !important;
}

/* DISABLED */
input:disabled,
select:disabled,
textarea:disabled {
    border-color: #ccc; /* reset border */
    /*background-color: #ccc; */
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */

}

/* DISABLED HOVER */
input:disabled:hover,
select:disabled:hover,
textarea:disabled:hover {
    border-color: #ccc; /* reset border */
    transition: none;
    -webkit-transition: none;
}

/* DISABLED form elements */
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="file"]:disabled::-webkit-file-upload-button,
button:disabled,
select:disabled,
keygen:disabled,
optgroup:disabled,
option:disabled,
select[disabled] > option {
    border: none;
    background: #dedede;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #999;
}

/* READONLY fields */
input[readonly]:not(.calendarInputField),
input[readonly]:not(.calendarInputField):hover,
    /*input[readonly]:not(.calendarInputField):focus,*/
textarea[readonly],
textarea[readonly]:hover,
textarea[readonly]:focus {
    border: 1px solid #dedede;
    background-color: #fff;
    transition: none;
    -webkit-transition: none;
}

/* date picker input */
.calendarInputField {
    width: 100px !important;
    text-align: center;
}

label {
    /*color: #666;
    font-size: 0.917em;
   font-weight: normal;*/
    margin-left: 0px;
    margin-right: 0px;
}

label.small, /* small labels */
.autoWidth /* auto width a field/label/etc... */
{
    width: auto !important;
    max-width: none !important;
}

/* error style */
.error {
    border: 1px solid red !important;
    background-color: #ffe8e8 !important;
}

.inputError {
    border: 1px solid red !important;
    background-color: #ffe8e8 !important;
}

/* align the label to the top - text areas */
#searchForm label.align-top,
.viewForm label.align-top,
.editForm label.align-top {
    vertical-align: top;
    margin-top: 8px;
}

/* --- TOOLBAR styles - contains a group of form button controls --- */
.toolbar,
.toolbar-left {
    display: inline-block;
    min-height: 34px;
}

#divInfo .toolbar,
#divInfo .toolbar-left {
    padding-top: 5px;
    min-height: 0px;
}

.toolbar {
    float: right;
}

.toolbar-left {
    float: left;
}

/* TOOLBAR BUTTONS */
.toolbar button {
    margin-right: 3px;
}

/* last button */
.toolbar button:last-child {
    margin-right: 0;
}

/* table header form fields */
.table th input {
    margin: 0;
}

/* table header form fields */
.table th input,
.table th select {
    color: #4D4D4D;
}

/* END - Forms */

/* AJAX SEARCH RESULTS - POP UP
   ========================================================================== */
ul.ajaxsearchresults {
    list-style: none;
    position: absolute;
    clear: none !important;
    margin: 0;
    border: none !important;
    border-top: 1px solid #067db1 !important;
    -moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

ul.ajaxsearchresults li {
    float: none !important;
    border: 1px solid #067db1;
    border-top: none;
    background: #fff;
    padding: 1px !important;
}

ul.ajaxsearchresults li a, ul.ajaxsearchresults li span {
    padding: 3px 5px;
    display: block !important;
    border-top: none;
    background: #fff;
    text-decoration: none;
}

ul.ajaxsearchresults li.active a, ul.ajaxsearchresults li.active span {
    background: #067db1;
    color: #fff;
}

/* --- AJAX POP-UP SELECT BOXES - custom ajax OLD CSS FOR ALAN - TSTING ONLY (delete when above styles complete)  --- */
/* move the ajax popup closer to the input field */
#boxWrapper {
    /* boxWrapper surrounds the input field and the #box div is alsp place inside this after the input field */
    position: relative;
    vertical-align: top;
}

#boxWrapper #box {
    display: block;
    position: relative;
}

#box > table:first-child {
    margin-top: -12px;
}

#boxWrapper #box .noResults {
    min-width: 150px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 14px;
    vertical-align: baseline;
    white-space: nowrap;
    text-align: center;
    background-color: #428BCA;
    border-radius: 3px
}

/* popup menu options wrapper div */
.box {
    width: 230px;
    height: auto;
    overflow: auto;
    position: absolute;
    border-top: none;
    text-align: left;
    /*margin-top: -12px;*/
    z-index: 10000 !important;
}

.boxtr {
    padding: 3px;
}

#divInfo tr.boxtr td,
.boxtd {
    cursor: pointer;
    margin: 3px;
    padding: 3px;
    color: #f3f4f8;
}

/* END - Forms */

/* CALENDAR
   ========================================================================== */
/* calendar icon */
.iconCalendar {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 5px; /* keep same margin as input fields */
    background: url(/images/v4/buttons/sprite_icons.png) no-repeat -100px -60px;
    vertical-align: middle;
}

/* calendar icon - hover state */
.iconCalendar:hover {
    background-position: -100px -80px;
    cursor: pointer;
}

/* Calendar table - override Bootstrap */
.calendar table {
    border-collapse: separate;
}

/* Reset Calendar button */
.calendar .button {
    display: table-cell;
    width: auto;
    min-width: 0;
    line-height: 1.5em;
    height: auto;
    color: #000;
}

/* END - Calendar */

/* #DIVHEADER - PAGE TITLES
   ========================================================================== */

#divHeader {
    height: 45px;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #dc8e00;
}

#divHeader h1 {
    display: block;
    max-width: 1260px; /* same width as #divMain */
    margin: 0 auto;
    padding-left: 10px;
    background-color: #f29d00;
    font-size: 1.385em; /* 18 / 13px */
    font-weight: normal;
    line-height: 45px;
    color: #fff;
}

#divHeader h1::before {
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 7px 0px 7px 6px;
    border-color: transparent transparent transparent rgb(220, 142, 0);
    margin-left: -10px;
    margin-right: 10px;
}

/* END - #divHeader */

/* #DIVINFO 
   ========================================================================== */
#divInfo {
    margin: 10px 0;
    padding: 10px;
    border: none;
    background-color: #e6e6e6; /* #b6b6b6; */
}

#divInfo .panel {
    margin: 0;
    padding: 0px;
    border: none;
    background-color: transparent;
}

/* #DIVINFO - table cells */
#divInfo td {
    font-size: 14px;
    color: #4d4d4d;
    border: none;
}

/* #DIVINFO - form tables*/
#divInfo form > .table,
form #divInfo > .table {
    /*border-bottom: 1px solid #c7cdd4;*/
    webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
}

/* #DIVINFO - last form tables*/
#divInfo form > .table:last-child {
    border-bottom: none;
}

/* internalCompanyHighlight -  DIVINFO A featured field in a form */
table .internalCompanyHighlight {
    background-color: #F3F4F8 !important;
    /*border-radius: 4px;*/
}

/* END - #divInfo */

/* #DIVBODY 
   ========================================================================== */
#divBody {
    background-color: #fff;
    border: none;
    margin: 10px 0;
    padding: 0px;
    height: auto !important;
    min-height: 0;
}

#divBody a {

}

/* END - #divBody */

/* MESSAGE BAR (notification bar)
   ========================================================================== */
#messageDisplay {
    /* @TODO  - testing */
    padding: 10px 15px;
    margin: 10px 0;
    border: 1px solid #428BCA; /*#ffc000 ;*/
    border-radius: 4px;
    background-color: #428BCA; /*#ffc000;*/
    color: #fff;
    font-weight: bold;
}

#warningMessageDisplay {
    padding: 10px 15px;
    margin: 10px 0;
    border: 1px solid #000000;
    border-radius: 4px;
    background-color: #e50000;
    color: #fff;
    font-weight: bold;
}

#warningMessageDisplay a,
#messageDisplay a {
    display: inline-block;
    padding: 0 3px;
    border-radius: 3px;
    color: #fff;
    text-decoration: underline;
}

#warningMessageDisplay a:hover,
#messageDisplay a:hover,
#warningMessageDisplay a:active,
#messageDisplay a:active {

    color: #428BCA;
    background-color: #fff;
    text-decoration: none;
}

#messageDisplay input[type="button"] {
    margin-top: 0;
    margin-bottom: 0;
}

/* END - Message Bar */

/* PAGINATION BAR
   ========================================================================== */
.paginationBar {
    display: table;
    width: 100%; /* testing- remove if .panel is width=100% */
    background: none;
}

.paginationBarResults,
.paginationBarContent {
    display: table-cell;
    vertical-align: middle;
}

.paginationBarContent {
    padding-right: 300px;
    text-align: center;
}

.paginationBarResults {
    width: 300px;
    padding-left: 60px;
}

.paginationBarResults div,
.paginationBarContent div {
    display: inline-block;
}

/* Pagination Results */
.paginationBarTotalLabel {
    color: #999;
    margin-right: 4px;
}

.paginationBarTotalValue {
    color: #2C3742;
    font-weight: bold;
}

/* Pagination Page-Links */
.paginationBarPageLinks a {
    text-decoration: none;
}

.paginationBarPageLinks div a,
.paginationActivePage {
    min-width: 27px;
    padding: 0 6px;
    margin-right: 7px;
    background-color: #abb5c1;
    text-align: center;
}

.paginationActivePage {
    background-color: #2C3742;
}

.paginationBarPageLinks div a:hover {
    background-color: #F29D00;
}

/* Pagination Next & Prev image links */
.paginationPreviousPage,
.paginationPreviousTenPages,
.paginationNextPage,
.paginationNextTenPages {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/images/v4/buttons/sprite_icons.png) no-repeat 0 -60px;
}

.paginationPreviousPage {
    background-position: -20px -60px;
}

.paginationPreviousPage:hover {
    background-position: -20px -80px;
}

.paginationPreviousTenPages {
    background-position: 0 -60px;
}

.paginationPreviousTenPages:hover {
    background-position: 0 -80px;
}

.paginationNextPage {
    background-position: -40px -60px;
}

.paginationNextPage:hover {
    background-position: -40px -80px;
}

.paginationNextTenPages {
    background-position: -60px -60px;
}

.paginationNextTenPages:hover {
    background-position: -60px -80px;
}

/* END - Pagination */

/* PAGE NAV - on page buttons
   ========================================================================== */
.pageNav {
    margin: 10px 0;
    /*background: #eaeaea url(/images/v4/menu/page_nav_bg.png) repeat-x; */
    background-color: #e6e6e6;
}

/* pagenav buttons */
.pageNav button {
    /*-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;*/
    margin: 8px 5px 0;
    min-width: 200px;
}

/* pagenav list of buttons */
.pageNav .list-inline > li {
    padding: 0;
}

/* next/prev ribbon buttons */
.ribbon_btn {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    font-weight: bold;
    padding: 0px 8px 0px 8px;
    margin-right: 5px;
    color: #fff;
    background: #00567A url(/images/v4/buttons/button_bg_blue.jpg) repeat-x left top;
    -webkit-box-shadow: 0px 2px 3px #a7a5a6;
    -moz-box-shadow: 0px 2px 3px #a7a5a6;
    box-shadow: 0px 2px 3px #a7a5a6;
    cursor: pointer;

}

.ribbon_btn.edge_left,
.ribbon_btn.edge_right:after {
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

.ribbon_btn.edge_right,
.ribbon_btn.edge_left:before {
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

.ribbon_btn.edge_left:before,
.ribbon_btn.edge_right:after {
    display: inline-block;
    content: ".";
    color: transparent;
    background: #00567A url(/images/v4/buttons/button_bg_blue.jpg) repeat-x left top;
    height: 42px;
    width: 4px;
}

.ribbon_btn.edge_left:before {
    margin-left: -12px; /* ribbon L-padding + edge-W */
    margin-right: 4px; /* push content right */
}

.ribbon_btn.edge_right:after {
    margin-left: 8px;
    margin-right: -12px; /* ribbon R-padding + edge-W */
}

.ribbon_btn:hover,
.ribbon_btn.edge_right:hover:after,
.ribbon_btn.edge_left:hover:before {
    background: #3EAAF3 url(/images/v4/buttons/button_bg_hover.jpg) repeat-x left top;
}

/* hover text colour */
.ribbon_btn:hover {
    color: #fff;
}

/* prev ribbon button */
.ribbon_btn.edge_left {
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: -80px; /* must equal the pagenav margin */
}

/* next ribbon button */
.ribbon_btn.edge_right {
    float: right;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: -1px;
}

.ribbon_btn .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/images/v4/buttons/sprite_icons.png) no-repeat 0 0;
    vertical-align: middle;
}

.ribbon_btn.edge_left .icon.prev {
    background-position: -297px -20px;
}

.ribbon_btn.edge_right .icon.next {
    background-position: 5px -20px;
}

/* END - Page Nav */

/* MODULE HEADERS - Anomaly, Components, Component Tasks etc...
   ========================================================================== */

#moduleHeader {
    background-color: #ececec;
    font-size: 1em;
    padding-bottom: 5px;
    margin-top: -5px;
}

#moduleHeader a {
    text-decoration: none;
    font-size: 1em;
    /*font-weight: bold;
    color: #000000;*/
}

/* Module Heading */
#moduleHeader h2 {
    padding: 0px 8px 0px 20px;
    background-color: #067DB1;
}

#moduleHeader h2:before {
    margin-left: -26px; /* h2 L-padding + :before-W */
    margin-right: 14px; /* push content right */
    background-color: #067DB1;
    font-size: 0px;
    position: absolute;
    top: -3px;
}

/* Module heading links */
#moduleHeader h2 a {
    color: #fff;
}

/* Module heading links */
#moduleHeader h2 a:hover {
    text-decoration: underline;
}

#moduleHeader .detailsWrapper,
#moduleHeader .imageWrapper,
#moduleHeader .iconWrapper,
#moduleHeader .extraDetailsWrapper {
    display: table-cell;
    height: 100px;
    vertical-align: middle;
}

#moduleHeader .detailsWrapper {
    width: 300px;
    border-right: 1px dotted #bfbfbf;
}

#moduleHeader .imageWrapper {
    width: 140px;
    border-right: 1px dotted #bfbfbf;
    text-align: center;
}

.imageWrapper a {
    width: 125px;
    /*height: 100px;*/
}

.imageWrapper a img {
    margin: 0 auto;
}

#moduleHeader .iconWrapper {
    border-right: 1px dotted #bfbfbf;
    text-align: center;
    width: 500px;
}

.iconWrapper li {
    padding: 0;
    background: url(/images/v4/buttons/sprite_icons.png) no-repeat -60px -120px;
    min-width: 43px;
    height: 43px;
}

.iconWrapper li.disabled {
    background-position: 0px -120px;
}

.iconWrapper a {
    display: block;
    width: 100%;
    height: 43px;
}

.iconWrapper li div {
    margin: 6px 0 0 8px;
    padding: 0;
    width: 26px;
    height: 26px;
}

.iconWrapper li div.roundSwatch {
    display: table-cell;
    padding: 0;
    width: 43px;
    height: 43px;
    background: transparent url(/images/v4/buttons/sprite_icons.png) no-repeat -120px -120px;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

#moduleHeader .awaitingSignoff {
    /* alert style box */
    padding: 5px;
    margin: 10px 50px 0;
    background-color: #ffff22; /*#f1bf26;*/
    border-color: #ffff22;
    font-weight: bold;
}

#moduleHeader .extraDetailsWrapper {
    width: 280px;
    padding-left: 10px;
}

#moduleHeader .label {
    /* bootstrap override .label */
    display: inline-block;
    width: 125px;
    color: #999;
    font-size: 0.833em;
    font-weight: normal;
    text-transform: uppercase;
    text-align: right;
}

#moduleHeader dl {
    width: 100%;
    margin-bottom: 0;
}

#moduleHeader dt {
    padding: 0.2em 0.6em 0.3em;
    line-height: 1;
    float: left;
    clear: both;
    width: 125px;
    margin-right: -125px;
    color: #999;
    font-size: 0.833em;
    font-weight: normal;
    text-transform: uppercase;
    text-align: right;
}

#moduleHeader dd {
    padding: 0.1em 0 0.4em;
    line-height: 1;
    float: left;
    margin-left: 125px;
}

#moduleHeader .detailsWrapper dl {
    margin-right: 10px;
    width: 280px;
}

#moduleHeader .detailsWrapper dd {
    white-space: nowrap;
}

/* Component Headser overrides */
#moduleHeader.componentHeader .detailsWrapper {
    width: 490px;
}

#moduleHeader.componentHeader .iconWrapper {
    width: 300px;
}

#moduleHeader.componentHeader .detailsWrapper dl {
    margin-right: 10px;
    width: 480px;
}

#moduleHeader.componentHeader .detailsWrapper dd {
    white-space: nowrap;
    max-width: 360px;
    overflow: hidden;
}

/* END - Module header */

/* ICONS
   ========================================================================== */
th .sortTable {
    display: table;
    width: auto;
}

th.text-center .sortTable {
    margin: 0 auto;
}

th.text-right .sortTable {
    margin-left: auto;
}

th .sortCell {
    display: table-cell;
    width: auto;
    vertical-align: middle;
}

th .sortCell:first-child {
    padding-right: 5px;
}

/* Help Icon */
#divBody .sortCell:first-child a {
    display: block;
    width: 10px;
    height: 7px;
    /*border: 1px solid #E6E6E6;*/
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: transparent;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
}

#divBody th .sortCell:first-child a:first-child {
    margin-bottom: 2px;
}

#divBody th .sortCell:first-child a:hover {
    /*border: 1px solid #E6E6E6;
    background-color: #F29D00;*/
}

/* Anomaly Icons */
.iconWrapper .icon {
    /* anomaly header */
    width: 25px;
    height: 25px;
    padding: 0;
    margin: 8px 0 0 9px;
    background-image: url(/images/v4/buttons/sprite_icons.png);
    background-repeat: no-repeat;
}

.safetycIcon {
    background-position: 0 -180px;
}

.safetycIcon.disabled {
    background-position: 0 -220px;
}

.hydrocIcon {
    background-position: -25px -180px;
}

.hydrocIcon.disabled {
    background-position: -25px -220px;
}

.leakIcon {
    background-position: -50px -180px;
}

.leakIcon.disabled {
    background-position: -50px -220px;
}

/* temp repair icons */
.tempRepairDueDateExpIcon {
    /* yellow flag */
    background-position: -75px -180px;
}

.tempRepairTaskDXIcon {
    /* red flag */
    background-position: -150px -180px;
}

.tempRepairInstalledIcon {
    /* green flag */
    background-position: -125px -180px;
}

.tempRepairNotInstalledIcon {
    /* grey flag */
    background-position: -100px -180px;
}

.tempRepairCounter {
    /* numeric value for number of temporary repairs */
    float: right;
    margin-top: 15px;
    margin-right: 3px;
    font-size: 0.75em;
}

.tempRepair.disabled {
    background-position: -75px -220px;
}

/* task icons */
.taskIcon {
    /* blue tools */
    background-position: -250px -180px;
}

.taskIconOverdue {
    /* yellow tools */
    background-position: -250px -180px;
}

.taskIcon.disabled {
    background-position: -250px -220px;
}

.defectDetailsIcon {
    background-position: -175px -180px;
}

.defectDetailsIcon.disabled {
    background-position: -175px -220px;
}

.monitorIcon {
    background-position: -225px -180px;
}

.monitorIcon.disabled {
    background-position: -225px -220px;
}

.prefImageIcon {
    background-position: -200px -180px;
}

.prefImageIcon.disabled {
    background-position: -200px -220px;
}

.openClosedIcon {
    background-position: -300px -180px;
}

.openClosedIcon.disabled {
    background-position: -325px -180px;
    /*background-position: 0 -250px; grey dot*/
}

.docsIcon {
    background-position: -350px -180px;
}

.docsIcon.disabled {
    background-position: -350px -220px;
}

/* END - ICONS */

/* BREADCRUMB
   ========================================================================== */

#bread {
    width: 100%;
    display: inline-block;
    font-size: 1em;
}

#divInfo #bread {
    padding: 0 0 5px 0;
}

/* breadcrumb inside a searchform */
span. #bread {
    margin: 0px;
    padding: 5px 10px;
    background-color: transparent;
    border: none;
}

#bread a {
}

#bread a:hover,
#bread a:focus {
    color: #3EAAF3;
    /*background-color: #fff;
    font-weight: bold;*/
}

.patharrow {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

/* BREADCRUMB - ADVANCES SEARCH */
#searchAccordionContent #repairBread {
    padding: 8px 0 8px 125px; /* width of search form labels */
}

/* BREADCRUMB - #divCompanyTree */
#divCompanyTree #bread {
    width: auto;
}

/* END - Breadcrumb */

/* CREATION WIZARD - step-through
   ========================================================================== */
#creationWizard {
    display: table;
    width: 100%;
    /*padding: 1px;*/
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-sizing: border-box;
}

#creationWizard a {
    position: relative;
    display: table-cell;
    padding: .7em 1em .7em 2em;
    background-color: #f3f3f3;
    color: #444;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

#creationWizard a:first-child {
    border-radius: 3px 0 0 3px;
}

#creationWizard a:last-child {
    border-radius: 0 3px 3px 0;
}

#creationWizard a:hover {
    background: #3eaaf3;
    color: #fff;
}

#creationWizard a::after,
#creationWizard a::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -1.5em;
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1em solid;
    right: -12px;
}

#creationWizard a::after {
    z-index: 2;
    border-left-color: #f3f3f3;
}

/* displays under the after arrow to create border */
#creationWizard a::before {
    border-left-color: #cecece;
    right: -13px;
    z-index: 1;
}

#creationWizard a:last-child::before,
#creationWizard a:last-child::after {
    display: none;
}

#creationWizard a:hover::after {
    border-left-color: #3eaaf3;
}

/* WIZARD - active links */
#creationWizard .active,
#creationWizard .active:hover {
    background: #00567A;
    color: #fff;
    cursor: default;
}

#creationWizard .active:after,
#creationWizard .active:hover:after {
    border-left-color: #00567A;
}

/* WIZARD - disabled links */
#creationWizard a.disabled,
#creationWizard a.disabled:hover {
    cursor: default;
    background: #ECECEC;
    color: #999;
}

#creationWizard a.disabled::after,
#creationWizard a.disabled:hover:after {
    border-left-color: #ECECEC;
}

/* END - creationWizard wizard

/* ACCORDIONS - extend bootstrap styles
   ========================================================================== */
#searchForm > .accordion-group {
    margin-bottom: 0px;
}

.accordion-group {
    margin-bottom: 10px;
}

.panel-group .panel {
    border: 1px solid #dedede;
}

.panel-collapse {
    padding: 15px;
}

.panel-collapse .panel {
    padding: 5px;
}

.accordion-group > .panel-heading {
    padding: 0;
    color: #fff;
    /*background-color: #067DB1;*/
    background-color: #f29d00;
    border: none;
}

.panel-heading h2 {
    font-size: 1em;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 40px;
    padding: 0 !important;
    border: none !important;
}

.panel-heading a {
    display: block;
    padding-left: 18px;
    color: #fff;
    font-size: 0.917em;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

.panel-heading a:hover {
    /*background-color: #3EAAF3;*/
    background-color: #f29d00;
}

/* .paginationActivePage */
.accordionBtn {
    display: inline-block;
    float: right;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-top: 9px;
    margin-right: 16px;
    background: #dedede url(/images/v4/buttons/button_bg_grey.jpg) repeat-x left top;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-align: center;
}

.accordionBtn:before {
    float: right;
    display: inline-block;
    content: "COLLAPSE";
    width: 60px;
    margin-top: -9px;
    margin-right: 28px;
    font-size: 9px;
    text-align: right;
}

a.collapsed .accordionBtn:before {
    content: "EXPAND";
}

/* arrow toggle - collapse btn*/
a .toggleArrow {
    display: block;
    height: 22px;
    background: url(/images/v4/buttons/sprite_icons.png) no-repeat -335px 3px;
}

a:hover .toggleArrow {
    background-position: -335px -17px;
}

/* arrow toggle - expand btn */
a.collapsed .toggleArrow {
    display: block;
    height: 22px;
    background-position: -315px 4px;
}

a.collapsed:hover .toggleArrow {
    background-position: -315px -16px;
}

/* panel body & panel group */
.panel-group .panel-heading + .panel-collapse .panel-body {
    border-top: none; /* bootstrap override - remove boarder */
}

.panel-body {
    padding: 0px; /* bootstrap override - remove padding */
}

/* --- NESTED ACCORDIONS --- */
.accordion-group .accordion-group /*,
.col-md-6 .accordion-group,
.col-md-7 .accordion-group,
.col-md-5 .accordion-group*/
{
    margin-bottom: 10px;
    margin-top: 10px;
}

/* if first child of an accordion is an accordion */
.accordion-group > .panel-collapse .accordion-group:first-child {
    margin-top: 0px;
}

/* if first child of an accordion is an accordion */
.accordion-group > .panel-collapse .accordion-group:last-child {
    margin-bottom: 0px;
}

.accordion-group .accordion-group > .panel-heading,
.col-md-6 .accordion-group > .panel-heading,
.col-md-7 .accordion-group > .panel-heading,
.col-md-5 .accordion-group > .panel-heading {
    padding: 0;
    color: #fff;
    /*background-color: #067DB1;*/
    background-color: #f29d00;
    border-radius: 3px;
}

.accordion-group .accordion-group .panel-heading h2,
.col-md-6 .accordion-group > .panel-heading h2,
.col-md-7 .accordion-group > .panel-heading h2,
.col-md-5 .accordion-group > .panel-heading h2 {
    font-size: 1em;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 30px;
}

.panel-accordion .accordion-heading a,
.col-md-6 .accordion-heading a,
.col-md-7 .accordion-heading a,
.col-md-5 .accordion-heading a {
    border-radius: 3px;
}

.accordion-group .accordion-group .panel-collapse,
.col-md-6 .panel-collapse,
.col-md-7 .panel-collapse,
.col-md-5 .panel-collapse {
    border: 1px solid #dedede;
    border-top: none;
    border-radius: 3px;
}

.accordion-group .accordion-group .accordionBtn,
.col-md-6 .accordion-group .accordionBtn,
.col-md-7 .accordion-group .accordionBtn,
.col-md-5 .accordion-group .accordionBtn {
    margin-top: 4px;
}

.accordion-group .accordion-group .accordionBtn:before,
.col-md-6 .accordion-group .accordionBtn:before,
.col-md-7 .accordion-group .accordionBtn:before,
.col-md-5 .accordion-group .accordionBtn:before {
    margin-top: -4px;
}

.accordion-group .accordion-group .toggleArrow {
    /*margin-top: -4px;*/
}

/* END - Accordions */

/* FORM-FIELD LISTS
   ========================================================================== */
/* form top level PANEL-GROUP styles */
#divMain > .panel-group,
#divMain form > .panel-group {
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
}

.panel.featured {
    /* add styles for featured form fields e.g. grey background */
    background-color: #eee;
    border-color: #eee;
}

.panel.controls {
    /* add styles for the form buttons panel e.g no border*/
    border-color: transparent;
    background: none;
}

.panel.controls ul,
.panel.controlsExposed ul {
    display: inline-block;
}

.panel.controlsExposed {
    /* add styles for the form buttons panel e.g no border*/
    /*margin-top: -20px;*/
    margin-bottom: 0;
    padding: 0 15px 5px;
}

/* EMPTY PANELS */
.panel-group .panel:empty {
    display: none;
}

/* 2 COLUMN LAYOUT of form fields*/

#searchForm ul.list_col_2 li,
#searchForm ul.fieldgroup.list_col_2 li,
ul.list_col_2 li {
    width: 50%;
}

/* 3 column layout of form fields*/
#searchForm ul.list_col_3 li,
#searchForm ul.fieldgroup.list_col_3 li,
ul.list_col_3 li {
    width: 33.333%;
}

/* 4 column layout of form fields*/
#searchForm ul.list_col_4 li,
#searchForm ul.fieldgroup.list_col_4 li,
ul.list_col_4 li {
    width: 25%;
}

/* default form LABEL style here */
#searchForm label,
.viewForm label,
.editForm label {
    /*line-height: 12px;*/
    vertical-align: middle;
    /*text-align: right;*/
}

/* CELLBLOCKS - displays contents as table cells (attach to li )- best used for blocks of text, or fieldgroups */
.cellblock {
    display: inline-table !important;
    /*width: 100% !important;*/
}

.listSpacer {
    height: 38px;
}

.cellblock > label,
.cellblock > div,
.cellblock > span,
.cellblock > ul.fieldgroup,
#searchForm .cellblock > label,
#searchForm .cellblock > div,
#searchForm .cellblock > span,
#searchForm .cellblock > ul.fieldgroup,
.editForm .cellblock > ul.fieldgroup,
.editForm .cellblock > label,
.editForm .cellblock > div,
.editForm .cellblock > span,
.viewForm .cellblock > label,
.viewForm .cellblock > div,
.viewForm .cellblock > span {
    display: table-cell;
    vertical-align: baseline;
}

.cellblock > label {
    padding-top: 5px;
}

/*.editForm .cellblock > label {
	padding-top: 12px;
}*/

#searchForm .cellblock > label {
    padding: 10px 0 0 5px; /* padding: 12px 0 0 5px; */
}

.editForm .cellblock,
#searchForm .cellblock {
    display: table; /* testing only */
    width: 100%; /* testing only */
}

/* to compensate for the margin that gets negated when the label displays as a cellblock */
.editForm .cellblock,
.editForm .col-md-6 li.cellblock, /* 6/6 - 2 col, using bootstrap column */
.editForm .col-md-7 li.cellblock, /* 7/5 - 2 col, using bootstrap column */
.editForm .col-md-5 li.cellblock,
.editForm ul.list_col_2 li.cellblock {
    padding-left: 15px;
    height: 35px;
}

.editForm li.cellblock > label {
    padding: 10px 0 0;
}

#searchForm li.cellblock div,
#searchForm li.cellblock span,
.editForm li.cellblock div,
.editForm li.cellblock span {
    padding: 8px 0 5px 5px;
}

#searchForm .cellblock > ul.fieldgroup,
.editForm .cellblock > ul.fieldgroup {
    padding-left: 5px;
    padding-top: 5px;
    vertical-align: top;
}

/* LIST HEADINGS */
li.list_head {
    /* @TODO styles - display as a block element and contains a heading of sorts regardless of list-column styles*/
    display: block !important;
    width: 100% !important;
}

/* List Heading H4 */
.list_head h4 {
    font-weight: normal;
    color: #00567a;
}

/* LIST BUTTONS */
/* single buttons in a form - list  */
li button {
    /* border: 1px solid yellow;  testing only */
    margin-left: 20px;
}

li.fieldsetdiv > button:first-child {
    margin: 5px 5px 5px 10px;
}

/* TOOLBAR - default style */
#searchForm .toolbar,
.viewForm .toolbar,
.editForm .toolbar {
    margin-top: 4px;
}

/* FIELDGROUP LABELS */
#searchForm ul.fieldgroup label,
ul.fieldgroup label {
    text-align: left;
    padding-left: 5px;
}

/* BADGEGROUP - positions badges in a fieldgroup */
.fieldgroup.badgegroup {
    float: right;
    width: 45%;
    vertical-align: top;
}

/* badgegroup - spaces badges in a fieldgroup */
.fieldgroup.badgegroup .badge {
    margin-top: 10px;
    margin-bottom: 5px;

}

a.badge:hover {
    background-color: #3EAAF3;
}

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

/* End default form-list styles */

/* SEARCH FORM - #SEARCHFORM FIELD LISTS-STYLES
   ========================================================================== */
#searchForm {
    border-top: none;
}

/* Search Form - default list styles */
#searchForm ul {
    clear: both; /* seperate floated lists */
    padding-left: 0;
    list-style: none;
    /*border-top: 1px solid #dedede;*/
    border-top: 1px solid #f3f4f8;
}

#searchForm ul:last-of-type {
    border-bottom: 1px solid #f3f4f8;
}

/* Search Form - fieldgroup & first list remove border */
#searchForm ul:first-child,
#searchForm ul ul.fieldgroup {
    border-top: none;
}

#searchForm ul ul.fieldgroup {
    display: inline-block;
    vertical-align: middle;
}

/* SearchForm - default form-list styles (fluid auto spacing) */
#searchForm ul li {
    float: left;
    width: auto;
    padding-right: 5px;
}

/* set width of list labels */
#searchForm ul li:first-child > label {
    width: 120px;
}

/* field groups li styles, these appear as nested ul tags but contain a group of radio/checkbox buttons */
#searchForm ul.fieldgroup li,
#searchForm ul.list_col_2 ul.fieldgroup li,
#searchForm ul.list_col_3 ul.fieldgroup li,
#searchForm ul.list_col_4 ul.fieldgroup li {
    display: inline-block;
    width: auto;
    padding-left: 5px;
}

/* field group - override element widths */
#searchForm ul.fieldgroup label,
#searchForm ul.fieldgroup li:first-child label,
#searchForm ul.list_col_2 ul.fieldgroup label,
#searchForm ul.list_col_3 ul.fieldgroup label,
#searchForm ul.list_col_4 ul.fieldgroup label {
    width: auto;
}

/* display nested divs & spans inline e.g. li > divs */
#searchForm li div,
#searchForm li span {
    display: inline-block; /* testing */
}

/* 2 column layout of form fields*/
#searchForm ul.list_col_2 label {
    width: 120px;
}

#searchForm ul.list_col_2 select {
    min-width: 150px;
    width: auto;
}

/* 3 column layout of form fields*/
#searchForm ul.list_col_3 label {
    width: 150px;
}

#searchForm ul.list_col_3 input[type=text],
#searchForm ul.list_col_3 select {
    min-width: 150px;
    width: auto;
}

/* 4 column layout of form fields*/
#searchForm ul.list_col_4 label {
    width: 120px;
}

#searchForm ul.list_col_4 input[type=text],
#searchForm ul.list_col_4 select {
    width: 150px;
}

/* --- SEARCH FORM FIELDGROUPS with Columns --- */
#searchForm ul.fieldgroup.list_col_2 li,
#searchForm ul.fieldgroup.list_col_3 li,
#searchForm ul.fieldgroup.list_col_4 li {
    float: left;
    min-height: 33px;
}

/* --- SEARCH FORM FIELDGROUPS with Columns --- */
#searchForm ul.fieldgroup.list_col_2 label,
#searchForm ul.fieldgroup.list_col_3 label,
#searchForm ul.fieldgroup.list_col_4 label {
    width: auto;
    width: 90%; /* testing */
    margin-bottom: 0; /* testing */
    vertical-align: top; /* testing */
}

/* --- FIELDGROUP with Columns - radio/checkbox --- */
#searchForm .fieldgroup.list_col_2 input[type="radio"],
#searchForm .fieldgroup.list_col_2 input[type="checkbox"],
#searchForm .fieldgroup.list_col_3 input[type="radio"],
#searchForm .fieldgroup.list_col_3 input[type="checkbox"],
#searchForm .fieldgroup.list_col_4 input[type="radio"],
#searchForm .fieldgroup.list_col_4 input[type="checkbox"] {
    height: auto;
    vertical-align: top;
}

/* --- Special Search Attribute layout - #damagecodeattributewrapper --- */
/*li.damageFoundList {
	border-top: 1px solid #eee;
	border-left: 10px solid #fff;
	border-right: 10px solid #fff;
}
*/
/* DAMAGE FOUND - LIST */
#searchForm #adSearchDFAccordionContent li.damageFoundList,
.editForm li.damageFoundList {
    min-height: 33px;
}

/* DAMAGE FOUND - LABEL/CHECKBOX */
#searchForm #adSearchDFAccordionContent li.damageFoundList label,
.editForm li.damageFoundList label.damageFoundListName,
#searchForm #adSearchDFAccordionContent input.damagechkbox,
.editForm li.damageFoundList input.damagechkbox {
    margin-bottom: 0;
    vertical-align: top;
}

/* DAMAGE FOUND - LABEL */
#searchForm #adSearchDFAccordionContent li.damageFoundList label,
.editForm li.damageFoundList label.damageFoundListName {
    width: 90%; /* so label can wrap over miltiple lines */
}

/* DAMAGE FOUND - CHECKBOX */
#searchForm #adSearchDFAccordionContent input.damagechkbox,
.editForm li.damageFoundList input.damagechkbox {
    height: auto; /* remove set height */
}

#damagecodeattributewrapper .attributeSearchLabel {
    float: left;
    width: 170px;
    margin-right: -170px;
}

#damagecodeattributewrapper .attributeSearchLabel label {
    text-align: left !important;
    vertical-align: middle;
    width: 145px !important;
}

#damagecodeattributewrapper .attributeSearchWrapper {
    float: left;
    clear: none;
    margin-left: 180px;
    border-top: none;
}

/* remove border first & last items */
#damagecodeattributewrapper .damagecodeattribute:nth-of-type(1) ul.damagecodechildwrapper:nth-of-type(1),
#damagecodeattributewrapper h5.grey + ul.damagecodechildwrapper:nth-of-type(1) {
    /*border-top: none;*/
}

/* add border on last UL following H5 tag (visually adds a border above the H5) */
#damagecodeattributewrapper h5.grey ~ ul.damagecodechildwrapper:last-child {
    border-bottom: 1px solid #DEDEDE;
}

/* remove border on the last item */
#damagecodeattributewrapper .damagecodeattribute:last-child h5.grey ~ ul.damagecodechildwrapper:last-child {
    border-bottom: none;
}

.damagecodeattribute {
    clear: both;
}

/*		#damagecodeattributewrapper h5 + ul.damagecodechildwrapper {
			border-top:none;
		}*/

#damagecodeattributewrapper ul {
    clear: both;
    display: block;
}

#damagecodeattributewrapper ul.damagecodechildwrapper {
    border-top: 1px solid #dedede;
}

#damagecodeattributewrapper li.attributeSearchField {
    background-color: #efefef;
    margin: 3px 10px;
    padding: 0 10px;
    white-space: nowrap;
    border-left: none; /* remover standard border for edit forms */
    border-right: none; /* remover standard border for edit forms */
}

#damagecodeattributewrapper li.attributeSearchField label {
    width: 250px;
}

/* SEARCH FORM - Buttons within lists */
#searchForm li > button {
    margin: 5px 0 0 5px; /* same margin as form fields */
}

/* END - #searchForm Field Lists */

/* EDITFORM - LISTS-STYLES
   ========================================================================== */
.editForm h2 {
    border-bottom: 1px solid #666;
    padding-bottom: 10px;
    padding-left: 15px;
}

.editForm ul {
    padding-left: 0;
    list-style: none;
    clear: both;
}

.editForm ul li {
    padding-right: 5px;
    border-top: 1px solid #dedede;
    border-left: 15px dashed white;
    border-right: 15px dashed white;
}

/* hover colour */
/*.editForm ul li:hover {  testing
    background: #fbfbfb;
    border-left: 3px solid #067DB1;
}*/

/*.editForm ul ul li:hover {  testing
    background: #fbfbfb;
    border-left: none;
}*/

/* remove border fron first list item */
/*.editForm li:first-child,*/
.editForm ul.fieldgroup li {
    border: none;
}

/* remove border from first row of list-items and add padding*/
.editForm ul:nth-of-type(1) li:first-child,
.editForm ul.list_col_2:nth-of-type(1) li:nth-of-type(2),
.editForm ul.list_col_3:nth-of-type(1) li:nth-of-type(2),
.editForm ul.list_col_3:nth-of-type(1) li:nth-of-type(3),
.editForm ul.list_col_4:nth-of-type(1) li:nth-of-type(2),
.editForm ul.list_col_4:nth-of-type(1) li:nth-of-type(3),
.editForm ul.list_col_4:nth-of-type(1) li:nth-of-type(4) {
    border-top: none;
    /*padding-top: 10px;*/
}

/* editForm - labels */
.editForm label {
    width: 300px;
    max-width: 50%;
    margin-left: 15px;
    background-color: transparent;
    font-weight: bold;
    text-align: left;
    color: #666;
}

/* fieldgroup - these appear as nested ul tags but contain a group of radio/checkbox buttons and display inline*/
.editForm ul.fieldgroup,
.editForm ul.fieldgroup li {
    display: inline-block;
}

/* fieldgroup labels */
.editForm ul.fieldgroup label {
    display: inline-block;
    max-width: none;
    width: auto;
    margin-left: 0;
    background-color: transparent;
    color: #666;
    font-weight: normal;
    text-align: left;
}

/* display li > divs inline*/
.editForm li div {
    display: inline-block; /* testing */
}

.editForm .displaybox {
    margin: 10px 5px 5px 0;
    min-height: 23px;
    vertical-align: middle;
    display: inline-block;
}

.editForm input {
    width: 250px; /* testing */
}

.editForm input[type="radio"],
.editForm input[type="checkbox"] {
    width: auto; /* testing */
}

.editForm select {
    width: auto; /* testing */
    min-width: 250px;
}

.editForm textarea {
    vertical-align: top;
}

/* --- 2 column layout of form fields --- */
.editForm ul.list_col_2 li {
    float: left;
    border-left: 15px dashed white;
    border-right: 15px dashed white;
}

.editForm .col-md-6 label, /* 6/6 - 2 col, using bootstrap column */
.editForm .col-md-7 label, /* 7/5 - 2 col, using bootstrap column */
.editForm .col-md-5 label,
.col-md-6 .editForm label,
.col-md-7 .editForm label,
.col-md-5 .editForm label,
.editForm ul.list_col_2 label {
    width: 180px;
    /*margin-left: 15px;*/
}

.editForm .col-md-6 label, /* 6/6 - 2 col, using bootstrap column */
.editForm .col-md-7 label, /* 7/5 - 2 col, using bootstrap column */
.editForm .col-md-5 label,
.col-md-6 .editForm label,
.col-md-7 .editForm label,
.col-md-5 .editForm label {
    margin-left: 0;
}

/* 2 column - input text */
.editForm .col-md-6 input[type="text"],
.editForm .col-md-7 input[type="text"],
.editForm .col-md-5 input[type="text"],
.col-md-6 .editForm input[type="text"], /* 6/6 - 2 col, using bootstrap column */
.col-md-7 .editForm input[type="text"], /* 7/5 - 2 col, using bootstrap column */
.col-md-5 .editForm input[type="text"],
.editForm ul.list_col_2 input[type="text"] {
    width: 200px;
}

/* 2 column - select */
.editForm .col-md-6 select,
.editForm .col-md-7 select,
.editForm .col-md-5 select,
.col-md-6 .editForm select,
.col-md-7 .editForm select,
.col-md-5 .editForm select,
.editForm ul.list_col_2 select {
    width: auto;
    min-width: 200px;
}

/* 2 column - textarea */
.editForm .col-md-6 textarea,
.editForm .col-md-7 textarea,
.editForm .col-md-5 textarea,
.col-md-6 .editForm textarea,
.col-md-7 .editForm textarea,
.col-md-5 .editForm textarea,
.editForm ul.list_col_2 textarea {
    width: 300px;
    height: 135px;
    padding: 2px 8px;
}

/* 2 column - h2 */
.editForm .col-md-6 h2,
.editForm .col-md-7 h2,
.editForm .col-md-5 h2, /* using bootstrap column */
.col-md-6 .editForm h2,
.col-md-7 .editForm h2,
.col-md-5 .editForm h2,
.editForm ul.list_col_2 h2 {
    border-bottom: 1px solid #666;
    padding-bottom: 10px;
}

/* --- 3 column layout of form fields --- */
#searchForm ul.list_col_3 label {
    width: 120px;
}

/* --- 4 column layout of form fields --- */
.editForm ul.list_col_4 label {
    width: 120px;
}

/* --- FIELDGROUP with Columns - li --- */
.editForm .fieldgroup.list_col_2 li,
.editForm .fieldgroup.list_col_3 li,
.editForm .fieldgroup.list_col_4 li {
    float: left;
    height: 33px;
    border-left: none;
    border-right: none;
}

/* --- FIELDGROUP with Columns - radio/checkbox --- */
.editForm .fieldgroup.list_col_2 input[type="radio"],
.editForm .fieldgroup.list_col_2 input[type="checkbox"],
.editForm .fieldgroup.list_col_3 input[type="radio"],
.editForm .fieldgroup.list_col_3 input[type="checkbox"],
.editForm .fieldgroup.list_col_4 input[type="radio"],
.editForm .fieldgroup.list_col_4 input[type="checkbox"] {
    height: auto;
    vertical-align: top;
}

/* --- FIELDGROUP with Columns - label --- */
.editForm .fieldgroup.list_col_2 label,
.editForm .fieldgroup.list_col_3 label,
.editForm .fieldgroup.list_col_4 label {
    width: 90%;
    margin-bottom: 0;
    vertical-align: top;
}

.editForm ul.fieldgroup:nth-of-type(1) li:first-child {
    /*padding-top:0;*/
}

.editForm .toolbar {
    padding: 5px 10px 10px;
}

/* EDIT FORM [ADD DEFECT] - Damage Found LABEL */
.editForm .damageFoundList label.damageFoundListName {
    width: 90%;
}

/* other form sytles */
ul.subgroup {
    /* @TODO styles - a nested list on an edit form with indented labels and borders removed */
}

/* COMPACT GROUP - A nested list on an edit form with indented labels and borders removed */
ul.compactgroup {
    float: left;
    margin: -16px 0 8px;
}

ul.compactgroup li {
    border-top: none;
    padding: 0;
    margin: 0;
    height: 16px;
}

.viewForm ul.compactgroup li label {
    padding: 0;
    font-size: 0.87em;
}

.viewForm ul.compactgroup li .displaybox {
    font-size: 0.87em;
}

/* END - COMPACT GROUP */

/* SCENARIOS STYLES */
.scenarioInner .scenarioavailable label {
    width: 78%;
    max-width: none;
}

.scenarioselectlbl {
    padding-left: 20px;
}

/* END - Scenario Styles */

/* END - EditForm Styles */

/* VIEWFORM - FORM LIST-STYLES
   ========================================================================== */
/* View Form - label style */
.viewForm label {
    color: #666;
    display: table-cell;
    width: 200px;
    /*min-height: 20px;*/
    padding-top: 7px;
    font-weight: bold;
    text-align: left;
    vertical-align: baseline;
}

/* View Form - display box */
.viewForm .displaybox {
    display: table-cell;
    vertical-align: baseline;
    /*padding-left: 5px;*/
    color: #7b7b7b;
}

.viewForm ul {
    clear: both;
    padding-left: 0;
    list-style: none;
}

/* no borders on the first child & fieldgroups UL's */
.viewForm ul:nth-of-type(1),
.viewForm ul ul.fieldgroup {
    border-top: none;
}

/* add margin to top of first list elements */
.panel.viewForm > ul:nth-of-type(1) {
    margin-top: 10px; /* testing */
}

/* TODO - below styles to be tweaked */
.viewForm li {
    border-top: 1px solid #dedede;
    /*min-height: 30px;*/
    height: 35px;
    display: table;
    width: 100%;
}

/* remove border from first row of list-items */
.viewForm ul:nth-of-type(1) li:first-child,
.viewForm ul.list_col_2:nth-of-type(1) li:nth-of-type(2),
.viewForm ul.list_col_3:nth-of-type(1) li:nth-of-type(2),
.viewForm ul.list_col_3:nth-of-type(1) li:nth-of-type(3),
.viewForm ul.list_col_4:nth-of-type(1) li:nth-of-type(2),
.viewForm ul.list_col_4:nth-of-type(1) li:nth-of-type(3),
.viewForm ul.list_col_4:nth-of-type(1) li:nth-of-type(4) {
    border-top: none;
    /*padding-top: 10px;*/
}

/* field groups - nested ul tags but contain a group of radio/checkbox buttons */
.viewForm ul.fieldgroup li {
    display: inline-block;
}

.viewForm ul.fieldgroup li label {
    width: auto;
}

/* display li > divs inline*/
.viewForm li div {
    display: inline-block; /* testing */
}

/* make colums float left */
.viewForm ul.list_col_2,
.viewForm ul.list_col_3,
.viewForm ul.list_col_4 {
    margin-left: 0;
    margin-right: 0;
}

/* make colums float left */
.viewForm ul.list_col_2 li,
.viewForm ul.list_col_3 li,
.viewForm ul.list_col_4 li {
    float: left;
}

/* --- multi-column layout of form fields --- */
.viewForm ul li,
.viewForm ul.list_col_2 li,
.viewForm ul.list_col_3 li,
.viewForm ul.list_col_4 li {
    border-right: 30px solid white; /* 30px */
    border-left: 30px solid white; /* 30px */
}

/* 2 column exception - effect all <li> list items under a list-heading */
.viewForm ul.list_col_2 li.list_head ~ li {
    border-top: 1px solid #e1eff5; /* testing only */
}

/* 2 column labels*/
.viewForm ul.list_col_2 label {

}

/* --- 3 column layout of form fields @TODO --- */
.viewForm ul.list_col_3 label {

}

/* --- 4 column layout of form fields @TODO --- */
.viewForm ul.list_col_4 label {

}

/* VIEW FORM BUTTONS */
/* position TOOLBAR buttons */
.viewForm > .toolbar {
    margin-right: 10px;
    margin-top: 8px;
}

/* position single BUTTONS within <li> */
.viewForm li > button {
    float: right;
    margin-bottom: -13px;
}

/* END - ViewForm Styles */

/* REPORT STYLES (@TODO)
   ========================================================================== */

/* key swatch styles */
table.tableKey td {
    line-height: 20px;
}

.keySwatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

/* END - Report Styles */

/* MODAL STYLES
   ========================================================================== */

/* Modal Header */
.modal-header {
    padding: 10px;

}

.modal-header button.close {
    box-shadow: none;
    background: white;
    padding: 0;
    height: 20px;
}

.modal-header button.close:hover {
    background: none;
    padding: 0;
}

/* image modal close button */
.modal-content button.close.overlap,
.modal-content button.close.overlap:hover {
    position: absolute;
    top: 0px;
    right: 0px;
    opacity: 1;
    font-size: 1em;
    font-weight: bold;
}

.modal-header h2 {
    color: #00567A;
    font-size: 1.75em;
}

.modal-header h4 {
    font-size: 1.333em;
    font-weight: normal;
}

.modal-body {
    padding-bottom: 0;
    padding: 10px;
}

.modal-footer {
    margin-top: 10px;
    padding: 9px 10px 10px;
}

/* END - Modal */

/* DASHBOARD - STYLES
   ========================================================================== */
ul.groupwrapper li {
    list-style: none;
}

/* dashboard ribbon heading */
ul.groupwrapper li h4 {
    background-color: #067DB1;
}

ul.groupwrapper li h4:before {
    margin-left: -6px; /* h2 L-padding + :before-W */
    margin-right: 14px; /* push content right */
    background-color: #067DB1;
}

/* DASHBOARD ACCORDION - hover */
ul.groupwrapper li h4:hover,
ul.groupwrapper li h4:hover:before {
    background-color: #3EAAF3;
}

/* DASHBOARD ACCORDION - expanded */
.componentDashboardGroup a .toggleArrow {
    background: url(/images/v4/buttons/sprite_icons.png) no-repeat -374px 3px;
}

/* DASHBOARD ACCORDION - collapsed */
.componentDashboardGroup a.collapsed .toggleArrow {
    background-position: -354px 4px;
}

/* dashboard panel subheadings */
ul.groupwrapper ul.groupwrapper li.componentDashboardGroup h4 {
    width: 100%;
    height: 30px;
    padding: 0 10px 0 0;
    margin-top: 9px;
    margin-left: 0px;
    margin-right: 0;
    background-color: #999;
    color: #fff;
    font-size: 0.917em;
    line-height: 30px;
}

ul.groupwrapper ul.groupwrapper li.componentDashboardGroup h4:before {
    content: ".";
    display: inline-block;
    height: 36px;
    width: 3px;
    margin-left: -3px;
    margin-right: 3px; /* push outside content right */
    background-color: #999;
    color: transparent;
}

/* dashboard panel */
ul.groupwrapper li.componentDashboardGroup {
    float: left;
    width: 100%;
    padding: 0 10px 10px;
    margin: 10px 0;
    border: none;
    border-radius: 4px;
    background-color: #ececec;
}

/* dashboard subpanel */
ul.groupwrapper ul.groupwrapper li.componentDashboardGroup {
    width: auto;
    height: 165px;
    min-width: 150px;
    padding: 0 10px 0 0;
    margin: 10px;
    border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0px 2px 3px #a7a5a6;
    -moz-box-shadow: 0px 2px 3px #a7a5a6;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.20);
}

/* dashboard subpanel lists */
ul.groupwrapper ul.groupitems {
    float: left;
}

ul.groupwrapper ul.groupitems ~ ul.groupitems {
    margin-left: 10px;
}

/* dashboard subpanel individual list-items */
ul.groupwrapper ul.groupitems li {
    float: left;
    clear: both;
    margin: 0 5px 10px 20px;
    border-right: 1px solid #fff;
}

/* dashboard links */
.componentDashboardItem a,
.componentDashboardItem a:visited,
.componentDashboardItem a:active {
    color: #666;
}

.componentDashboardItem a:hover,
.componentDashboardItem a:focus {
    color: #3eaaf3;
}

.componentDashboardItem .status_swatch {
    float: left;
    display: inline-block;
    width: 10px;
    height: 15px;
    margin: 2px 8px 0 0;
    background-color: #ececec;
    font-size: 2em;
    line-height: 0;
}

/* COMMENT BOX */
.comment_box {
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 10px;
    padding: 15px;
}

.comment_box:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.comment_box button {
    float: right;
}

.comment_box .badge {
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 0.917em;
}

.comment_box h5 {
    font-weight: bold;
}

.comment_box h5 span {
    font-weight: normal;
}

.comment_box .displaybox {
    display: block;
    width: 85%;
    padding-bottom: 10px;
}

/* test area */
.comment_box textarea {
    width: 100%;
    height: 265px;
    padding: 4px 10px;
}

/* END - Comment Box */

/**********************************/
/* LOGIN PAGE & Forgot Password page                     */
/**********************************/
.login-page {
    background-color: #3B4654;
}

.login {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    padding-bottom: 25px;
    background-color: #fff;
}

.login #messageDisplay {
    margin-left: 20px;
    margin-right: 20px;
}

.login img {
    display: block;
    margin: 25px auto;
}

.login .input-group {
    margin: 15px auto;
    width: 300px;
}

.login .input-group input {
    border: 1px solid #CCC;
}

.login div.center {
    width: 300px;
    margin: 10px auto;
}

.login .input-group-addon:first-child {
    background-color: #E6E6E6;
}

.login label {
    margin-right: 5px;
    margin-bottom: 20px;
    font-size: 1em;
    text-align: right;
}

.login input {
    margin: 0;
    padding-left: 5px;
}

.login p {
    margin-bottom: 20px;
}

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

.login .panel-footer {
    height: 65px;
    padding: 15px 35px 0;
    border-top: none;
    color: #fff;
    background-color: #067DB1;
    vertical-align: middle;
}

.login .panel-footer a {
    color: #fff;
    line-height: 36px;
}

.login .panel-footer button {
    float: right;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 3px 0 0 5px;
}

.login .loginPageDisclaimer,
.footerNotice {
    color: #7e7e7e;
    font-size: 0.833em;
    text-align: justify;
    line-height: 1.25em;
}

.login .ssl {
    margin-top: 40px;
    text-align: center;
}

/* END - Login Page */

/* FOOTER NOTICE
   ========================================================================== */
.footerNotice {
    margin: 10px 0;
    text-align: center;
}

/* END - Footer Notice */

/* PANEL YELLOW
   ========================================================================== */
/* panel yellow */
.panel.yellow {
    background-color: #ffffcc;

}

.panel.yellow li,
.panel.yellow ul.list_col_2 li,
.panel.yellow ul.list_col_3 li,
.panel.yellow ul.list_col_4 li {
    border-color: #cccc99 #ffffcc;
}

/*.panel.yellow label,
.panel.yellow .displaybox {
	color: #333;
}*/
.panel.yellow li.cellblock > .displaybox {
    display: block;
    margin-right: 100px;
    margin-bottom: 5px;
}

.panel.yellow .toolbar {
    margin-right: 10px;
    margin-top: 8px;
}

/* YELLOW - ribbon heading */
h3.yellowRibbonHeading {
    display: inline-block;
    min-width: 250px;
    padding: 0px 8px 0px 20px;
    margin-bottom: 0;
    background-color: #FFD52D; /*#FF8F01; testing */
    font-size: 1.083em;
    line-height: 35px;
    height: 35px;
    color: #333;
}

h3.yellowRibbonHeading:before {
    margin-left: -26px;
    margin-right: 14px;
    background-color: #FFD52D; /*#FF8F01; testing */
}

/* END - yellow panel */

/* ANOMALY STYLES - MISC
   ========================================================================== */
.highlightSelectedTP {
    background-color: #FC6 !important;
}

.highlightLowestTP {
    background-color: #F96 !important;
}

/* END - anomaly styles */

/* COMPONENT STYLES - MISC
   ========================================================================== */
/* component search table styles */
.componentTag,
.componentTag label {
    font-weight: bold;
    margin: 0;
}

.componentTag .displaybox {
    font-size: 0.917em;
}

/* END - component styles */

/* COMPONENT TREE
   ========================================================================== */
/* TREE li heights */
.jstree li {
    min-height: 22px !important; /* override inline styles */
    line-height: 22px !important; /* override inline styles */
}

/* adjust background image */
.jstree-apple .jstree-leaf > ins {
    background-position: -36px 2px !important; /* override styles */
}

.jstree a {
    color: #2A6496 !important;
}

/* TREE link hover */
.jstree a:hover {
    color: #428BCA !important;
}

/* TREE alternating white rows */
.jstree > ul > li:nth-child(odd) {
    background-color: #fff;
}

/* TREE alternating grey rows */
.jstree > ul > li:nth-child(even) {
    background-color: #F8F9F9;
}

/* END - Component Tree */

/* ALERT BOXES
   ========================================================================== */
.alert {
    margin-bottom: 10px; /* bootstrap overrride */
}

/* alert boxes nested within panels/panel-groups */
.panel .alert,
.panel-group .alert {
    margin: 5px;
    padding: 5px;
}

/* ALERT CUSTOM - e.g. consultGroupWarning */
/*.alert.consultGroupWarning {*/
/*height: 35px;*/
/*padding: 0;*/
/*background: #ff6600 url(/images/v4/ONE_alert_bar_custom.png) repeat-x 0 -200px;*/
/*border: none;*/
/*color: #fff;*/
/*}*/

/* Alert Message */
.alert.consultGroupWarning span,
.alert.consultGroupWarning span:before {
    vertical-align: middle;
}

/* ALERT ICON - consultGroupWarning */
.alert.consultGroupWarning span:before {
    content: " ";
    display: inline-block;
    width: 32px;
    height: 35px;
    margin-right: 10px;
    background: transparent url(/images/v4/buttons/sprite_icons.png) no-repeat -200px -50px;
    border-right: 1px solid #ff6600;
    -moz-box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.6);
}

/* END - ALERT BOXES */

/* TOOL TIPS
   ========================================================================== */
.tooltip.in {
    filter: alpha(opacity=100);
    opacity: 1;
}

/* END - Tool Tips */

/* PROGRESS BAR
   ========================================================================== */
/* display progressbar within a list */
li .progress,
li .progressbar .progress-bar {
    display: block !important;
    margin-bottom: 0;
}

/* position progressbar within a viewForm */
.viewForm li div.progress {
    position: relative;
    top: 2px;
}

/* progressbar background colour red */
div.progress.taskSummarySubTaskPercentage {
    background-color: #D9534F;
}

/* END - Progress Bar */

/* LOADING
   ========================================================================== */
/* loader wrapper */
.loaderWrapper {
}

/* loader text */
.loadtext {
}

/* loader image */
.loader {
    display: inline-block;
    margin-left: 10px;
}

/* loader in a modal */
.modal-body .loaderWrapper {
    margin-bottom: 20px;
    text-align: center;
}

/* replace button with loading image */
button.loading {
    background: url(/software/images/loading.gif) no-repeat 50% 50%;
    box-shadow: none;
    border: none;
    color: rgba(0, 0, 0, 0);
}

/* END - Loading */

/* HISTORY/TASK SUMMARY/CLOSE ANOMALY FEATURED BOX ========================================================================== */

/* featured box */
.detailsFeatureBox {
    position: relative;
    padding: 5px 10px;
    background-color: #ECECEC;
    border-radius: 4px;
    width: 200px;
    height: 100%;
    margin-left: -5px;
    left: -25px;
    top: -5px;
}

/* featured box - right arrow */
.detailsFeatureBox:after,
.detailsFeatureBox .right-triangle {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid #ECECEC;
    border-top: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid rgba(0, 0, 0, 0);
}

/* right arrow - :after */
.detailsFeatureBox:after {
    content: ' ';
}

/* right arrow - div */
.detailsFeatureBox .right-triangle {
    border-left: 5px solid green;
    z-index: 100;
}

/* END - Featured Box */

/* END - Matrix */

/* HELP MANUAL
   ========================================================================== */
#helpManualPageWrapper {
    width: 100%;
    padding: 0;
}

/* END - Help Manual */

/* MATRIX
   ========================================================================== */
#matrixContainer option {
    color: #000;
}

div.matrix {
    margin: 0 auto;
}

table.matrix {
}

table.matrix tbody th, table.matrix tbody td {
    vertical-align: middle;
    height: 60px;
}

table.matrix tr.matrixRow {
}

table.matrix tr.matrixRow th {
    font-weight: normal
}

table.matrix tr.matrixRow td {
    border: 1px solid black;
    text-align: center;
    width: 60px;
}

table.matrix tr.matrixRow td.active {
    border: 4px solid black;
}

table.matrix tfoot th, table.matrix thead th {
    height: 40px;
}

table.matrix tbody th.yAxisName {
    width: 20px;
    /*writing-mode: tb-rl;*/
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    font-weight: bold;
}

/* END - Matrix */

/* AJAX File Upload
   ========================================================================== */

#fileUploadWrapper div.button {
    padding: 0 8px;
    margin: 5px;
}

#fileUploadWrapper div.ajax-file-upload-cancel {
    padding: 4px 8px;
}

div.ajax-file-upload-statusbar {
}

div.ajax-file-upload-statusbar img {
    padding: 8px 0 0 8px;
}

div.ajax-file-upload-filename {
}

/* END - Ajax file upload */

/* GOOGLE COMPONENT MAP STYLES*/
.mapComponentMarkerTooltip {
    float: left;
    position: relative;
    padding: 5px;
    width: 280px;
    height: 75px;
}

.mapComponentMarkerTooltip label {
    color: #666;
    font-size: 0.917em;
    font-weight: bold;
    margin-left: 0px;
    margin-right: 5px;
    width: 70px;
    text-align: right;
}

.mapComponentName,
.mapComponentType {
    float: left;
    width: 100%;
}

#mapMarkerTooltipBody {

    float: left;
    position: relative;
    padding: 5px;

}

#map-canvas {
    width: 100%;
    height: 600px;
    margin: 0px;
    padding: 0px;
}

/* SRA (PRISM) CSS
   ========================================================================== */

body.sramodule table thead th {
    background-color: #c2b5a3;
    color: #000000;
}

body.sramodule table thead th a {
    color: #234093;
    font-size: 1.25em;
    position: relative;
    margin-bottom: -0.25em;
}

body.sramodule .accordion-group > .panel-heading {
    background-color: #234093;
}

body.sramodule .accordion-group .accordion-group > .panel-heading {
    background-color: #5c585b;
}

body.sramodule #creationWizard .active:after, body.sramodule #creationWizard .active:hover:after {
    border-left-color: #234093;
}

body.sramodule #creationWizard .active, body.sramodule #creationWizard .active:hover {
    background: #234093;
}

.sratable.table-bordered tr td, .sratable.table-bordered tbody tr td {
    vertical-align: middle;
}

body.sramodule table.sratable td span.displaybox {
    margin-top: 10px;
    display: block;
}

/**************** TESTING ONLY - DELETE WHEN COMMITTING ********************* */
/*select.btn {
	background-color: green;
}

hr {
	border-color: purple;
}

label {
	color: red;
}

.leftCell {
	background-color: pink;
}

.rightCell {
	background-color: lightblue;
}*/

/*Workflow Questions*/
#displayQuestionTypes {
    float: left;
    min-height: 500px;
    /*border:1px solid black;*/
    width: 28%
}

#displayQuestions {
    float: left;
    min-height: 500px;
    /*border:1px solid red;*/
    margin-left: 2%;
    width: 70%
}

/* JS Sortable Lists
   ========================================================================== */

.blockRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.blockRow > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

span.grippy {
    content: '....';
    width: 10px;
    height: 20px;
    display: inline-block;
    overflow: hidden;
    line-height: 5px;
    cursor: move;
    vertical-align: middle;
    margin-top: -.7em;
    margin-right: .3em;
    font-size: 12px;
    font-family: sans-serif;
    letter-spacing: 2px;
    color: #b0b0b0;
    text-shadow: 1px 0 1px black;
}

span.grippy:after {
    content: '.. .. .. ..';
}

ul.availList {
    height: 100%;
}

ul.sortablelist li {
    width: 300px;
    padding: 0 30px;
    line-height: 30px;
    border-left: 5px solid red;
    background: #eee;
    list-style: none;
}

ul.sortablelist li.attSetGrp {
    min-height: 40px;
}

ul.sortablelist li li {
    border-left-color: orange;
}

ul.sortablelist li li li {
    border-left-color: yellow;
}

ul.sortablelist li label {

}

ul.sortablelist li label.attSetGrpLabel {
    cursor: pointer;
}

ul.sortablelist li.attSetGrpAtt {
    cursor: move;
    opacity: 0.75;
    filter: alpha(opacity=75); /* For IE8 and earlier */
}

ul.sortablelist li.attSetGrpAtt label {
    cursor: move;
}

ul.sortablelist li.attSetGrpAtt:hover {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

ul.sortablelist li.sortable-empty {
    cursor: default;
    font-style: italic;
    opacity: 0.75;
    filter: alpha(opacity=75); /* For IE8 and earlier */
}

.siteTime select {
    min-width: 50px !important;
}

.operativeShift {
}

.holidayName {
    font-style: italic;
    font-size: 11px;
}

.imageThumbnail {
    margin-top: 5px;
    width: 100px;
}

.signatureThumbnail {
    margin-top: 5px;
    width: 700px;
}

/*Used to force a minimum  height on an empty li*/
.emptyListItem {
    height: 44px;
}

/*Class to make sure td values are inline with values that appear in text inputs*/
.valignWithInput {
    padding-top: 10px;
    display: block !important;
}

.valignCheckboxWithInput {
    padding-top: 2px;
    display: block !important;
}

/* class for Job Wizard process */
.startJobWizardButton,
.completeJobWizardButton {
    width: 300px;
    height: 200px;
    font-size: 25px;
    line-height: 1.5em;
    color: #2e3233;
}

.startJobWizardButton {
    float: left;
    background-color: lightgreen;
    margin-left: 50px;
}

.completeJobWizardButton {
    float: right;
    background-color: lightsalmon;
    margin-right: 50px;
}