/*
Copyright 2015 Tenetics, LLC - All Rights Reserved
Author: xsalefter

Reduce default component size: see http://burtsev.net/en/2011/10/02/63/  
*/

@import "css/colors.css";

.ui-widget {
    font-weight: lighter !important;
    font-size: 100% !important;
}

/* Tweak Toolbar */
/* NOTE: .toolbar applies to multiple primefaces components,
 * so .ui.toolbar is used when only the toolbar widget is to be modified
 */
.toolbar.ui-widget {
    font-size:100% !important;
}
.toolbar .ui-panelgrid tr {
    border: 0 none !important;
    padding: 0 !important;
}
.toolbar .ui-panelgrid td {
    border: 0 none !important;
    padding: 1px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* Reduce default font size within panel grids */
.ui-panelgrid tr {
    background: none !important;
    font-size: 100% !important;
}

.ui-panelgrid td {
    background: none !important;
    font-size: 100% !important;
}

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

.datalist-noborder .ui-widget-content {
    border: none;
}

.calendarFilter .ui-inputfield {
    width:90px !important;
    margin: 0 0.2em !important;
}

/* Reduce spacing between tree chooser nodes */
.ui-tree .ui-tree-container .ui-treenode {
    margin:0 !important;
    padding:0 !important;
    font-size:100% !important;
}
.ui-tree .ui-tree-container .ui-treenode-label {
    margin:0 !important;
    padding:0 !important;
}

/* Custom icons for tree chooser*/
.ui-icon-farm {
    background: url("../resources/img/farmer.png") no-repeat !important;
    border-radius: 0px !important;
}
.ui-icon-field {
    background: url("../resources/img/field.png") no-repeat !important;
    border-radius: 0px !important;
}
.ui-icon-sensor {
    background: url("../resources/img/wireless.png") no-repeat !important;
    border-radius: 0px !important;
}

.ui-icon-gateway {
    background: url("../resources/img/blue_transmitter.png") no-repeat !important;
    border-radius: 0px !important;    
}
.ui-icon-valve {
    background: url("../resources/img/valve.png") no-repeat !important;
    border-radius: 0px !important;
}
/* Center titles in tile panel headers */
.ui-panel-title{
     margin-left: auto !important;
     margin-right: auto !important;            
}

/* Fix dialog text size */
.ui-dialog .ui-widget {
  font-size: 100% !important;
}
.ui-dialog .ui-panelgrid tr {
    background: none !important;
    font-size: 100% !important;
}

.ui-dialog .ui-panelgrid td {
    background: none !important;
    font-size: 100% !important;    
}

.ui-growl-title {
    font-size: 150% !important;
}
.ui-growl .ui-widget {
    font-size: 150% !important;
}

.ui-input-changed {
    background-color:yellow !important
}

.ui-input-unchanged {
    background-color:white !important
}

/* SelectOne Menu label and drop-down list color styles */
.ui-selectonemenu-changed .ui-selectonemenu-label { 
    background: yellow;
}
.ui-selectonemenu-panel-changed .ui-selectonemenu-list { 
    background: yellow;
}

/*remove borders from panelgrid if styleClass="noBorders"*/
.noBorders tr, .noBorders td {
    background: none !important;
    border: none !important;
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top-align {
    vertical-align: top;
}

.ui-datatable table {
    table-layout:auto !important;
}

.ui-button-icon-left {
    border-radius:0;
    overflow:visible !important;
}

.ui-tooltip {
    border: 2px solid #888;
    box-shadow: 0 0 10px 0 #444;
    -moz-box-shadow: 0 0 10px 0 #444;
    -webkit-box-shadow: 0 0 10px 0 #444;
    color: #444;
    background: #F4F4F4DD;
}

/* centered panel */
.main-panel {
    width: 90%;
    max-width: 700px;
    margin: 5% auto 0 auto; /* center horizontally and top margin */
    overflow: auto; /* next button stays in panel footer */
    display: block;
}
/* centered panel */
.main-panel-biggerWidth {
    width: 90%;
    max-width: 1000px;
    margin: 5% auto 0 auto; /* center horizontally and top margin */
    overflow: auto; /* next button stays in panel footer */
    display: block;
}
/* centered panel */
.main-panel-biggestWidth {
    width: 90%;
    max-width: 1100px;
    margin: 5% auto 0 auto; /* center horizontally and top margin */
    overflow: auto; /* next button stays in panel footer */
    display: block;
}
/* Help or Read More Dialog */
.help-dialog {
    max-width: 600px;
}

/* Footer positioning */

html, body {height: 100%;}
* {margin:0;padding:0;} 

/*
All content other than the footer must go in a div id=notFooterInner inside of 
another div id=notFooterOuter in order to keep the footer on the bottom of the 
page and not ovelapping other content.
http://stackoverflow.com/questions/18739937/how-to-keep-footer-at-bottom-of-screen
*/
#notFooterOuter {
    min-height: 100%;
}

#notFooterInner {
    overflow:auto;
    padding-bottom: 2em; /* must be same height as the footer */
}

footer {
    position: relative;
    margin-top: -2em; /* negative value of footer height */
    height: 2em;
    text-align:center;
}

/* text */
p {
    margin: 0 0 1em 0; 
}

ul{
    margin-left: 2em;
}

ol{
    margin-left: 2em;
}

.quickbooks-button:default {
    background-image: url('./../resources/img/qb_green_btn_default.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width:292px;
    height: 51px;
    border: none;
    background-color: transparent;
}

.quickbooks-button:hover {
    background-image: url('./../resources/img/qb_green_btn_hover.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 292px;
    height:51px;
    border: none;
    background-color: transparent;
}

table.innertable td {
    width:100% ;
    height:100% !important;
    border:hidden !important;

}
.twenty-percent-left {
    width: 20%!important;
    text-align:left !important;
    padding-left: 0px!important;
}
.twenty-percent-right {
    width: 20%!important;
    text-align:left !important;

}
.eighty-percent-right {
    width: 80%!important;
    text-align: right! important;
}
.eighty-percent-right {
    width: 80%!important;
    text-align: left! important;

}

.ui-panel-titlebar{
    color: var(--color-font-dark) !important;
    background-color: var(--color-background-light) !important;
    font-size: 1.10rem;
    text-align: center;
    padding: 0;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.ui-accordion-header{
    font-size: 1.10rem !important;
    text-align: center;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.ui-accordion .ui-accordion-header > .ui-icon.ui-icon-triangle-1-s{
    margin-top: auto;
    margin-bottom: auto;
    float: left;
}

.ui-accordion .ui-accordion-header > .ui-icon.ui-icon-triangle-1-e{
    margin-top: auto;
    margin-bottom: auto;
    float: left;
}

.ui-panelgrid td {
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
    padding-right: 0.2em !important;
    padding-left: 0.2em !important;
}

.ui-panelgrid-cell{
    padding: 0 !important;
}

.ui-panelgrid-content{
    border: none !important;
}

.ui-tabs-panels{
    padding: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top-width: 0.20em !important;
    border-bottom-width: 0.20em !important;
}

.ui-tabs-panel{
    padding: 0 !important;
}

.jqplot-table-legend td{
    padding-right: 2em !important;
}

.jqplot-table-legend .jqplot-table-legend-swatch{
    padding-left: 0 !important;
    padding-right: 0 !important;
    height: 1.25em !important;
    width: 1.25em !important;
}

.jqplot-table-legend-swatch-outline{
    border: 0 !important
}