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


/*html { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;}*/

.ck-col1{height:auto; width:35%; padding-right:5px; text-align:right; vertical-align:middle;}
.ck-col2{height:auto; width:65%; padding-left:5px; vertical-align:top;}
.col-text{height:auto; width:20%; padding:0px; text-align:right; vertical-align: middle;}

.col-input{height:auto; width:30%; padding:0px; text-align:left; vertical-align: middle;}
/* The next selectors are for dialogue box style forms for user data entry */
.dialogform-col1{height:auto; width:20%; padding-right: 5px; text-align: right; vertical-align: middle;}
.dialogform-col2{height:auto; width:80%; padding-left: 5px; vertical-align: top;}
.lDialogBrownBold {font-weight: bold; color: brown;}

.pg-col1{height:auto; width:15%; padding: 0px; padding-right: 5px; text-align: left;}
.pg-col2{height:auto; width:80%; padding-left: 5px; vertical-align: top;}
.pg-col3{height:auto; width:15%; padding: 0px; padding-right: 1px; text-align: right;}
.pg-bar15r{height:auto; width:15%; padding: 0px; padding-right: 1px; text-align: right;}
.aComplete-col1 {width: 75%; padding-right: 5px;}
.aComplete-col2 {width: 5%; padding-left: 5px;}
.aComplete-col3 {width: 20%;}
.ck-indent1{height:auto; width:70%; padding: 0px; margin: 0px; text-align: left;}
.ck-indent2{height:auto; width:30%; padding-left: 5px; text-align: left;}
/* ck-indent1 had padding-right:5px. just changed it padding-left:5px to see the effect */
/*
body {
    background: #aad4ef;
}
*/
/* All input fields have a blue text */
.userInput {color: blue;}
.workOrderTab {
    background: rgba(210, 220, 244, 1);
    color: black;
}

.contractEditTab {
    background: rgba(210, 220, 244, 1);
    color: black;
}

div#myLoginForm {
    display: table;
    padding: 10px;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background-color: #7f7fff;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    width: 300px;
    margin: 0 auto; 
}

.loginForm {
    bottom: 0;
    height: 140px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    border: thin;
    border-style: solid;
}

.tableRow {
    display: table-row;
    height: 2em;
}

.firstCol {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    width: 35%;
}

.secondCol {
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    width: 70%;
}

.myInfoGrid {
    display: table;
    padding: 10px;
    border: none;
}

.myInfoGrid .tableRow {
    display: table-row;
    height: 2em;
}

.myInfoGrid .firstCol {
    display: table-cell;
    text-align: left;
    vertical-align: top;
    width: 30%;
    color: blue;
}

.myInfoGrid .secondCol {
    display: table-cell;
    vertical-align: top;
    float: right;
}

.colText1 {margin-top: 15px; text-align: left;}
.rightalign {text-align: right;}
.leftalign {text-align: left;}
.centeralign {text-align: center;}
.lightgrayBackground {background: lightgray;}
.healthyBlueBackground {background: #00AEEF;}
.boldtext {font-weight: bold;}
.colorwhite {color: white;}
.colorgreen {color: lawngreen}
.darkslategray { color: darkslategray}

.colWidth5 {width:5%;}
.colWidth10 {width:10%;}
.colWidth15 {width:15%;}
.colWidth20 {width:20%; height: auto;}
.colWidth25 {width:25%;}
.colWidth30 {width:30%; height: auto;}
.colWidth35 {width:35%; height: auto;}
.colWidth40 {width:40%;}
.colWidth45 {width:45%;}
.colWidth50 {width:50%; height: auto;}
.colWidth55 {width:55%;}
.colWidth60 {width:60%;}
.colWidth65 {width:65%;}
.colWidth70 {width:70%;}
.colWidth75 {width:75%;}
.colWidth80 {width:80%;}
.colWidth82 {width:82%;}
.colWidth85 {width:85%;}
.colWidth87 {width:87%;}
.colWidth90 {width:90%;}
.colWidth95 {width:95%;}
.colWidth100 {width:100%;}

.cw5l {width: 5%; text-align: left;}
.cw5  {width: 5%;}
.cw10l {width: 10%; height: auto; text-align: left;}
.cw10r {width: 10%; height: auto; text-align: right;}
.cw10 {width: 10%;}
.cw15l {width: 15%; height: auto; text-align: left;}
.cw15r {width:15%; height: auto; text-align:right;}
.cw15 {width: 15%;}
.cw20l  {width: 20%; height: auto; text-align: left;}
.cw20r  {width:20%; height: auto; text-align:right;}
.cw20 {width: 20%;}
.cw25l  {width: 25%; text-align: left;}
.cw25 {width: 25%;}
.cw30l  {width: 30%; text-align: left;}
.cw30 {width: 30%;}
.cw35l  {width: 35%; text-align: left;}
.cw35 {width: 35%;}
.cw40l  {width: 40%; text-align: left;}
.cw40 {width: 40%;}
.cw45l  {width: 45%; text-align: left;}
.cw45 {width: 45%;}
.cw50l  {width: 50%; text-align: left;}
.cw50 {width: 50%;}
.cw55l  {width: 55%; text-align: left;}
.cw55 {width: 55%;}
.cw60l  {width: 60%; text-align: left;}
.cw60 {width: 60%;}

/*
.ui-accordion .ui-accordion-header.ui-state-hover, .ui-accordion .ui-accordion-header.ui-state-active {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #0b66b1 0%, #1578c9 100%) repeat scroll 0 0;
}
*/

.ui-accordion .ui-accordion-header.ui-state-hover, .ui-accordion .ui-accordion-header.ui-state-active {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(210, 220, 244, 1) 0%, rgba(210, 219, 244, 1) 100%) repeat scroll 0 0;
}

/* The selector below was added to change the color of the tabview to emphasize it less than in the theme. */
.ui-tabs-left .ui-tabs-nav {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(119, 159, 203, 1) 0%, rgba(119, 158, 203, 1) 100%) repeat scroll 0 0 !important;
    border: 1px solid #779ecb;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    font-weight: normal;
}

.crimson {
    color: crimson;
}

/*
.Green {
    background-color: seashell !important;
    background-image: none !important;
    color: green !important;
}

.Brown {
    background-color: seashell !important;
    background-image: none !important;
    color: brown !important;
}
*/

.borderlessPanelGrid>*>tr, 
.borderlessPanelGrid.ui-panelgrid .ui-panelgrid-cell{
    border: none;
}

/* Sets the style for the ball that displays the number of notifications on the topbar  */ 
.myball {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0f446c;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 6px;
    right: 104px;
}

/* Sets the general styles for the Export To icons on the report viewer */
.exportIcons {
    margin-top: 2px;
    margin-left: 4px;
    float: right;
}

/* Sets the background color for a dialogBox */
.dlgBackground {
    background-image: none;
    background-color: #DAE8EF;
}

tr.overdueWO {
    color: red;
}

/* This selector is used to suppress display of a filter box in a dataTable column. 
// Simply add filterStyleClass="hideFilter" to the <p:column> element. */
.hideFilter.ui-column-filter {
    display: none;
    visibility: hidden;
}
/**
Mobile Interface css section
*/

.mschedule-col1{height:auto; width:10%;}
.mschedule-col2{height:auto; width:80%;}
.mschedule-col3{height:auto; width:10%;}

.clickbutton {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: black;
    text-align: center;
    border-color: orange;
    border-width: 3px;
    border-style: solid;
    text-decoration: none;
    /* margin-top: 6px;
    margin-left: 12px; */
    /* float: right; */
    display: table;
}
.clickbuttonIcon {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: white;
    border: none;
}

.outerbutton {
    float: right;
}
.innerbutton {
    float: right;
    margin-right: 8px;
}
.topmargin6 {
    margin-top: 6px;
}
.topmargin4 {
    margin-top: 4px;
}

/**
This section overrides css styles that have been set in earlier stylesheets such as primefaces or primefaces sentinel
*/

.oneradio-borderless.ui-selectoneradio.ui-widget td {
    border: 0 none !important;
}

/* Set the disabled state for ui components to appear darker */
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    background-image: none;
    opacity: 0.5;
}
/* CORE LAYOUT STANDARD STYLES ********************************************************************************************************** */

/* 
.Container15{ width:15%; overflow:hidden; float:left;}
.Container18{ width:18%; overflow:hidden; float:left;}
*/
.Container18{ width:18%;  float:left;}
.Container15{ width:15%;  float:left;}

#schDatePicker div.ui-datepicker, ui-datepicker {
    /* width: 12em; */
    font-size: 62.5%;
    line-height: 60%;
}

.admintab .ui-panel-titlebar {
    background: black;
}
/* userIcon is placeholder for user image in user admin and user settings */
.userIcon {
    width: 200px;
    height: 200px;
    overflow: visible;
    border-radius: 50%;
    background: orange;
    text-align: center;
    border-color: orange;
    border-width: 3px;
    border-style: solid;
    /* margin-top: 6px; */
    margin-left: auto;
    margin-right: auto;
    color: white;
    display: table;
}
/* This classStyle is used to display list of selected teams in the Calendar Schedule View */
.schselectedteamlist .ui-datalist .ui-datalist-content .ui-datalist-data {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 0px;
    font-size: 80%;
}

/* Backdrop and other CSS for login form */
.backdrop { 
    background-image:url("/javax.faces.resource/backdrop.jpg.xhtml?ln=images");
    background-repeat: no-repeat;
    background-color: rgb(245,245,243);
    height: 620px;
    overflow: hidden;
    clear: right;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}
.loginArea {
    width:35%;
    height:100%;
    float:right;
    margin-right: 80px;
    /*background-color:lavenderblush; */
}
.loginBox {
    width: 70%;
    border: solid;
    border-width: 1px;
    border-color:lightgray;
    background: rgba(255,255,0,0.1);
    height: 460px;
    margin-top:  80px;
    margin-left:auto;
    margin-right:auto;
    /*float: none; */
    box-shadow: 5px 5px 5px teal;
}
.pw.ui-inputfield {
    font-size: 18px;
    border-left: none;
    border-right: none;
    border-top: none;
    background-color: inherit;
    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
}
.prompt .ui-messages-info {
    /*color: red !important; */
    /*border-color: red !important; */
    color: #F03369 !important;
    background-color: #FBFCFD !important;
    border-color: #F4BACB !important;
    font-size: 14px;
    font-weight: normal;
    padding: 6px !important;
}
/* CSS for highighting populated rows when using Notification Subscription Dialog */
.populatedRow {
    background: lightskyblue;
}

/* CSS for Frameless panelGrid used in TaskTemplate Form */
.inputLabel {
    text-align: right;
    color: brown;
    margin-right: 2px;
}

.brownLabel {
    color: brown;
}

.useradmin > .ui-panelgrid {
    border: none;
    background-color: inherit;
}
.useradmin td.ui-panelgrid-cell {
    border: none;
}
.useradmin > td {
    border: none !important;
}

/* Beige Background */
.beigeback {
    background-color: beige;
}

/* classes for report menu */

.categorymenu {
    color: burlywood;
    font-weight: bold;
}

/* classes for skinning input components */

.searchInput.ui-inputfield {
    padding: 2px !important;
}

.datatablefs12.ui-datatable {
    font-size: 12px;
}

.datatablefs13.ui-datatable {
    font-size: 13px;
}

.datatablefs14.ui-datatable {
    font-size: 14px;
}
.leftfloat30 {
    float: left;
    width: 30%;
    text-align: left;
}
.rightfloat30 {
    float: right;
    width: 30%;
    text-align: right;
    line-height: 32px;
}
.floatright {
    float: right;
}
.floatleft {
    float: left;
}
.displayblock {
    display: block;
}
.underline-on-hover {
    text-decoration: none;
}
.underline-on-hover:hover {
    text-decoration: underline;
}
.valignmiddle {
    vertical-align: middle;
}
.centeredHeader {
    display: inline-block;
    position: absolute;
    left: 300px;
    right: 300px;
}
.miniHeader {
    /* background: #dae8ef; */
    width: 100%;
    padding-bottom: 6px;
    padding-top: 6px;
    text-align: center;
}
.lh32 {
    line-height: 32px;
}
.lm20 {
    margin-left: 20px;
}
.lm10 {
    margin-left:10px;
}
.detailtable .ui-datatable-header {
    /*background: linear-gradient (to bottom, #c99a15 0%, #9e7d2e 100%); */
    background: lightgray;
    text-shadow: none;
    color: #1578c9;
    border: solid 1px lightgray;
}
.headerblue { /* Used for detail datatable text and commandLink elements */
    color: #1578c9;
}

.headerwhite { /* Used for detail datatable text and commandLink elements */
    color: white;
}

/* Side Margins to both left and right sides */
.side-margin-5 {
    margin-left: 5px;
    margin-right: 5px;
}
.side-margin-10 {
    margin-left: 10px;
    margin-right: 10px;
}
/* Attempt to have fixed menu panel 'leftmenu' in PrimeFaces Sentinel */
/*
#layout-menubar {
    position: fixed;
    overflow: auto;
}
#layout-portlets-cover {
    margin-left: 260px;
}
*/

.animated .ui-progressbar-value { 
    background-image: url("/javax.faces.resource/images/pbar-ani.gif.xhtml");
}

/* For Property Hierarchy listing */
.icon-provalu-property {
    background-image: url("/javax.faces.resource/images/provalu_property.png.xhtml")!important;
}

.icon-provalu-site {
    background-image: url("/javax.faces.resource/images/provalu_site.png.xhtml")!important;
}

.icon-provalu-equipment {
    background-image: url("/javax.faces.resource/images/provalu_equipment.png.xhtml")!important;
}

.icon-provalu-other {
    background-image: url("/javax.faces.resource/images/provalu_other.png.xhtml")!important;
}

/* For leftmenu menuitems, to give them a new life */
/* ref: https://forum.primefaces.org/viewtopic.php?t=47537 */
.fa-dashboardIcon {
    background-image: url(../resources/images/dashboard/speedometer.png);
    min-height: 24px;
    min-width: 24px;
    margin-bottom: -6px;
}
.fa-workorderIcon {
    background-image: url(../resources/images/dashboard/hierarchy.png) !important;
    min-height: 24px;
    min-width: 24px;
    margin-bottom: -6px;
}
.fa-clientsIcon {
    background: url(../resources/images/dashboard/clients.png) no-repeat !important;
    min-height: 24px;
    min-width: 24px;
    margin-bottom: -6px;
}
.fa-sitesIcon {
    background: url(../resources/images/dashboard/sites.png) no-repeat !important;
    min-height: 24px;
    min-width: 24px;
    margin-bottom: -6px;
}
.fa-propertyIcon {
    background: url(../resources/images/dashboard/real-estate.png) no-repeat !important;
    min-height: 24px;
    min-width: 24px;
    margin-bottom: -6px;
}
.fa-calendarIcon {
    background: url(../resources/images/dashboard/calendar.png) no-repeat !important;
    min-height: 24px;
    min-width: 24px;
    margin-bottom: -6px;
}
.fa-equipmentIcon {
    background: url(../resources/images/dashboard/equipment.png) no-repeat !important;
    min-height: 24px;
    min-width: 24px;
    margin-bottom: -6px;
}
.fa-otherassetIcon {
    background: url(../resources/images/dashboard/shelves.png) no-repeat !important;
    min-height: 24px;
    min-width: 24px;
    margin-bottom: -6px;
}
.fa-upcomingIcon {
    background: url(../resources/images/dashboard/upcoming.png) no-repeat !important;
    min-height: 24px;
    min-width: 24px;
    margin-bottom: -6px;
}
.fa-servicerequestIcon {
    background: url(../resources/images/dashboard/service-request.png) no-repeat !important;
    min-height: 24px;
    min-width: 24px;
    margin-bottom: -6px;
}
.fa-assetIcon {
    background: url(../resources/images/dashboard/asset.png) no-repeat !important;
    height: 24px;
    width: 24px;
    margin-bottom: -6px;
}

/* For globalFilter Search Inputs */
.globalFilter {
    /*width:150px; 
    padding-left:10px; */
}
.globalFilter.ui-inputtext.ui-corner-all {
    border-radius: 0;
}
.globalFilterContainer {
    width: 200px;
    /* background-color: gray; */
}
.globalFilterContainer > span {
    white-space: nowrap;
    float: left;
}
.globalFilterContainer span>a {
    padding: 8px 8px 7px;
    background-color: gray;
}
.globalFilterContainer span span {
    color : red;
}

.dud-container {
    width: 100%;
    background: inherit;
    border: none;
    position: relative;
}

.filter-container {
    width: 100%;
    background: #fff;
    /* border: 1px solid #CCC; */
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    position: relative;
    text-align: left;
}

.filter-container > a {
    position: absolute;
    top: 0;
    right: 0;
    /* line-height: 36px; */
    font-size: 20px; /*150%; */
    background: gray;
    margin-right: 0px;
    padding: 4px;
}

.filter-container > input {
    width: 80%;
    border: none;
    padding: 8px 0px 8px 6px !important;
    /* margin-left: 6px; */
}

.globalFilter.ui-inputfield.ui-state-hover, .globalFilter.ui-inputfield.ui-state-focus {
    border: none;
}

/* Styling for Measurement Containers used in WorkOrder Job Completion Reports */
.rating-container {
    margin-top: 8px;
}
.measurement-container {
    width: 100%;
    background: #ccc;
    /* border: 1px solid #CCC; */
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    position: relative;
    text-align: left;
    /* Added to test new design */
    padding: 6px 4px;
}

.measurement-container > span {
    /*-- position: absolute;
    top: 12px;
    right: 10px; --*/
    /* line-height: 36px; */
    font-size: 12px; /*150%; */
    background: inherit;
    margin-right: 0px;
    /* --padding: 4px; --*/
    color: blue;
    /* Added to test new design */
    padding-left: 4px;
}

.measurement-container > input {
    width: 60%;
    border: none;
    padding: 8px !important;
    margin: 6px 8px;
    text-align: right;
}

.battery-reading-container {
    width: 100%;
    background: #ccc;
    /* border: 1px solid #CCC; */
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    position: relative;
    text-align: left;
}

.battery-reading-container > span {
    position: absolute;
    top: 12px;
    right: 10px;
    /* line-height: 36px; */
    font-size: 12px;
    background: inherit;
    margin-right: 0px;
    padding: 4px;
    color: blue;
}

.battery-reading-container > input {
    width: 60%;
    border: none;
    /*padding: 8px !important;*/
    margin: 6px 8px;
    text-align: right;
}

/* JobCompletionReport Panel Styling */
.jcr-panel .ui-panel-content {
    background: antiquewhite;
}
.jcr-scroller.ui-scrollpanel{border:none; background: inherit;} 
.jcr-scroller.ui-scrollpanel:hover{border:none;}
/* ref for creating icons via css
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
*/

/* Dialog Box styling */
/* Input Dialog Box Header */
.input-dialog .ui-dialog-titlebar {
    background: powderblue;
}

/* Input Dialog Box Background */
.input-dialog .ui-dialog-content.ui-widget-content {
    background: aliceblue;
}

/* Message Dialog Box Header */
.message-dialog .ui-dialog-titlebar {
    background: orangered;
}

/* Message Dialog Box Background */
.message-dialog .ui-dialog-content.ui-widget-content {
    background: cornsilk;
}

/* void-labels: labels used for read only inputs or text */
.void-label {
    color: royalblue;
}

/* input-labels: labels used for input elements */
.input-label {
    color: brown;
    font-size: 13px;
}

.blank-class{}

/* secondary-panel class is used to de-emphasize a panel using a softer colour for the heading */
.secondary-panel .ui-panel-titlebar {
    background: lightblue;
    border: solid 1px lightblue;
}
.secondary-panel .ui-panel-title {
    color: black;
    text-shadow: 0 -1px 0 lightblue;
}

/* slim-tab-panels contracts the default padding around tab panel content */
.slim-tab-panels.ui-tabs .ui-tabs-panel {
    padding: 8px 4px 0px 4px;
}

/* detail-tab-view styles a tabview making its header panel appear in the default background color (#58656B) of a selected datatable row */
.detail-tab-view .ui-tabs-nav {
    background: #58656b;
}

.row-label.ui-panelgrid-cell {
    padding-top: 35px;
}

/* Contact Editor With Flat Panels */
.collapsed-when-empty.ui-panel .ui-panel-content {
    padding: 0 !important;
}

/* Dashboard Rendering Styles */
.pmpanel.basic-dashboard-widget.ui-panel {min-height: min-content; max-height: max-content; margin: 0px 10px 20px;}
.pmpanel.ui-panel {min-height: min-content; max-height:250px; margin: 0px 10px 20px;} 
.pmpanel.ui-panel .ui-panel-titlebar {background: #72828B; text-align: center; opacity: 1;}
.pmpanel.ui-widget-content{background: white;}
.widgetBox {height: 215px;}
.limegreen { color: limegreen}
.orangered { color: orangered}


.dynamic5 {width: 5%;}
.dynamic10 {width: 10%;}
.dynamic20 {width: 20%;}
.dynamic25 {width: 25%;}

.spacer5{display: block; height:5px;}
.spacer10{display: block; height:10px;}
.spacer15{display: block; height:15px;}
.spacer20{display: block; height:20px;}
.spacer30{display: block; height:30px;}
.spacer40{display: block; height:40px;}
.spacer50{display: block; height:50px;}

.footer-total { color: brown;}
.uneditable-input {
    border: none;
    background: gray;
    color: ghostwhite;
}
.uneditable-input.ui-inputfield.ui-state-hover, .uneditable-input.ui-inputfield.ui-state-focus {
    border: none;
    color: ghostwhite !important;
}

.no-padding {
    padding: 0px;
}
.padding10 {
    padding: 0px 10px;
}
.padding20 {
    padding: 0px 20px;
}
.ui-panelgrid-cell.grid-padding12 {
    padding: 4px 12px;
}
.ui-panelgrid-cell.grid-padding20 {
    padding: 4px 20px;
}
.rightpadding10 {
    padding-right: 10px;
}
.leftpadding10 {
    padding-left: 10px;
}

/* Used to hide filter input text when using datatable-filter composite component */
.hidden-filter-input {
    display: none;
    visibility: hidden;    
}

/* Used to remove padding from a datatable header */
.no-datatable-header-padding.ui-datatable .ui-datatable-header {
    padding: 0px;
}

/* Used to remove header from a datatable */
.no-datatable-header.ui-datatable table thead tr {
    display: none;
}

/* Used on a parent element to enforce centering (vertical and horizontal) on all children */
.centering-parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Do not display sort drop down on datatables on mobile devices (screen width less than 640) */
.ui-datatable-reflow .ui-reflow-label, .ui-datatable-reflow .ui-reflow-dropdown {
    margin-bottom: 10px;
    display: none;
}

/* MEDIA QUERIES **************************************************************************************************************** */

/* Large desktop */
@media (min-width: 960px){
    .dynamic20 {width: 20%;}
    .dynamic25 {width: 25%;}
    .dynamic40{width: 40%;}
    .dynamic50{width: 50%;}
    .widget-responsive.ui-dialog {
        max-width: 600px;
    }
    .floatRightOnDesktop {
        float: right;
    }
    .jcr-checklist {border-left: solid 1px;}
}

@media (min-width: 960px) and (max-width:1200px){
    .dynamic20 {width: 20%;}
    .dynamic25 {width: 25%;}
    .dynamic40{width: 40%;}
    .dynamic50{width: 50%;}
    .floatRightOnDesktop {
        float: right;
    }
    .jcr-checklist {border-left: solid 1px;}
} 

/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) and (max-width: 960px) {
    .dynamic20 {width: 40%;}
    .dynamic25 {width: 50%;}
    .dynamic40{width: 80%;}
    .dynamic50{width: 100%;}
    .widget-responsive.ui-dialog {
        max-width: 600px;
    }
    .jcr-checklist {border-left: solid 1px;}
}

/* Landscape phone to portrait tablet */
@media (max-width: 640px) {	
    .dynamic40{width: 100%;}
    .dynamic50{width: 100%;}
    /* Give datatable column titles a different color from the value */
    .ui-datatable-reflow .ui-column-title {
        color: chocolate;
    }
    .widget-responsive.ui-dialog {
        min-width: 340px;
        max-width: 420px;
    }
    .floatRightOnDesktop {
        width: 100%;
    }
    .floatRightOnMobile {
        float: right;
    }
    .backdrop {
        background-image: none;
        position: absolute;
        height: auto;
        background: #dae8ef;
    }
    .loginArea {
        width:100%; 
        height:100%;
        float: none;
        margin-right: 0px;
        /*background-color:lavenderblush; */
    }
    .loginBox {
        background: whitesmoke;
        margin-top: 100px;
    }
    .jcr-checklist {border-top: solid 1px; margin-top: 20px; padding-top: 10px;}
}

/* Portrait phones and down */
@media (min-width:320px) and (max-width: 480px) {
    .dynamic20 {width: 40%;}
    .dynamic25 {width: 50%;}
    .dynamic40{width: 80%;}
    .dynamic50{width: 100%;}
    /* Give datatable column titles a different color from the value */
    .ui-datatable-reflow .ui-column-title {
        color: chocolate;
    }
    .widget-responsive.ui-dialog {
        min-width: 340px;
        max-width: 400px;
    }
    .floatRightOnDesktop {
        width: 100%;
    }
    .floatRightOnMobile {
        float: right;
    }
    .loginArea {
        width:100%; 
        height:100%;
        float: none;
        margin-right: 0px;
        /*background-color:lavenderblush; */
    }
    .backdrop {
        background-image: none;
        position: absolute;
        height: auto;
        background: #dae8ef;
    }
    .loginBox {
        background: whitesmoke;
        margin-top: 100px;
    }
    .jcr-checklist {border-top: solid 1px; margin-top: 20px; padding-top: 10px;}
    /* Display Battery Bank readings better */
    .battery-reading-container > span {
        right: 0px;
    }
}

/* Landscape phones */
@media (min-height:200px) and (max-height:500px) and (max-width:960px){
    .dynamic20 {width: 40%;}
    .dynamic25 {width: 50%;}
    .dynamic40{width: 80%;}
    .dynamic50{width: 100%;}
    .floatRightOnDesktop {
        float: right;
    }
}

/* Using font-awesome for the rating display. Don't like primefaces default rating yellow star
   ref: https://stackoverflow.com/questions/24776242/change-the-icons-of-primefaces-prating
*/

.awesome-rating .ui-rating-star, .awesome-rating  .ui-rating-cancel {
    float: initial;
    display: inline;
}

.awesome-rating .ui-rating-star a, .awesome-rating  .ui-rating-cancel a {
    background: none;
    width: initial;
    height: initial;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*color: #e6e6e6;*/
    color: red;
    margin-right: 5px;
    font-size: 20px;
    display: inline;
}

.awesome-rating  .ui-rating-cancel a:before {
    content: "\f056";
}

.awesome-rating  .ui-rating-cancel.ui-rating-cancel-hover a {
    color: #ce1c18;
}

.awesome-rating .ui-rating-star a:before {
    content: "\f006";
}

.awesome-rating .ui-rating-star.ui-rating-star-on a {
    color: #fadc3e;
}

.awesome-rating .ui-rating-star.ui-rating-star-on a:before {
    content: "\f005";
}

/* ========================================================================= */
/* Styling for My Notification Subscriptions */
.comboBox .ui-selectcheckboxmenu-token-icon {
    background-color: #00000091;
}
.comboBox .ui-selectcheckboxmenu-trigger .ui-icon-triangle-1-s {
    margin-top: -8px !important;
}
ul.ui-selectcheckboxmenu-multiple-container.ui-widget.ui-inputfield.ui-state-default.ui-corner-all {
    padding: 0px !important;
}
.rounded-commandlink {
    border: solid 1px;
    border-radius: 10px;
    padding: 2px 8px 4px 8px;
    text-decoration: none;
}
.notice-panel {
    border-color: lightblue;
    border-width: 5px;
    z-index: 1000;  /* Always visible */
}
.notice-handle {
    padding: 8px;
    font-size: 14px;
    color: darkblue;
    background-color: lightblue;
}

/* Input elements styling */
input:focus {
    background: lightblue;
    color: brown;
}
input:blur {
    background: inherit;
    color: inherit;
}
/* For Fancy Labels */
.fancylabel.ui-inputgroup > span.ui-inputgroup-addon {
    padding: 6px 12px 6px 4px;
    background: lightgray;
    color: crimson;
    border-color: #C0C5C7;
    white-space: nowrap;
} 
.fancylabel.ui-inputgroup > input, .fancylabel.ui-inputgroup .ui-inputfield {
    color: #27aae1;
}
.fancylabel.ui-inputgroup .ui-inputgroup-addon {
    text-align: left;
    min-width: 7em;
    /* max-width: 7em; */
    /* width: content-box; */
}

/* Sidebar Rules */
.sb-one a.ui-sidebar-close {
    /* visibility: hidden; */
    display: none;
}