body
{
  width:950px;
  margin-left:auto;
  margin-right: auto;
  /*font-size:70%;
  font-family: Arial, Helvetica, sans-serif;*/
  background-color:#f8f8f8; /*FFD700;*/
  /*font: 72% "Trebuchet MS", sans-serif;*/
  font: 70% "Trebuchet MS", sans-serif
}

/*
https://tailwindcss.com/docs/customizing-colors
AM/MID/PM
Colors come from Tailwind css Amber 200, 400, and 600.
Light to dark. Text color switches for AM/PM.
*/
.ampm-grid-am {
  background-color: #fed7aa;
  color: #ea580c !important;
}

.ampm-grid-mid {
  background-color: #fb923c;
  color: #000000 !important;
}

.ampm-grid-pm {
  background-color: #ea580c;
  color: #fed7aa !important;
}

.cl-grid-yes {
  color: darkgreen !important;
  font-weight: bold;
}

.cl-grid-no {
  color: darkred !important;
  font-weight: bold;
}

#feedbackInstructions {font-size:110%;}
#feedbackInstructions ul li {padding-bottom:10px;}

.hide{display:none;}

.hdr .hdrcell input, select {font-size:11px;}
/*body { width:900px; margin-left: auto; margin-right: auto; font-size:70%; font-family: Arial, Helvetica, sans-serif; background-image:url(../images/gradient.jpg); background-repeat:repeat-x;}*/


img {border:0px;}
/*input {font-size:150%;}*/
.fieldrequired{ background-color:#FFFF00; color:#000000; }

.step  {font-weight:bold; font-size:110%; padding-right:10px;}

.banner { background-color:black; color:white; font-weight:bold; margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0px ;border:5px solid black; width:100%; padding:10px 10px 10px 10px; text-align:center; }
.bannerTD1 {height:120px; background-image: url(images/busbulletin2.jpg); width:300px;}
.bannerTD2 {height:120px; background-image: url(images/busbulletin3.jpg); background-repeat: repeat-x; width:300px;}
.bannerTD3 {height:120px; background-image: url(images/busbulletin4.jpg); width:200px;}
.header { width:100%; padding:0 10px 5px; 10px; margin:0 0 0 0; }
.footer { width:100%; text-align:left; height:35px; color:gray; padding-top:10px; }

/* main container and three main table data's*/
.mainContainer{ width:100%; }
/*.mainContainerTDL { width:150px; vertical-align:top; }*/
.mainContainerTDM { width:75%; vertical-align:top; padding:0 10px 0 10px; }
.mainContainerTDR { width:25%; vertical-align:top; }

/* a pane object*/
.paneTop { background-color:#3D3838; color:white; font-weight:bold; border:1px solid #3D3838;  width:100%; padding:5px 5px 5px 5px; }
.pane    { background-color:#EEE8AA; border:1px solid #3D3838;  width:100%; margin-bottom:10px; padding:5px 5px 5px 5px; }

/* misc styles */
.spacer { color:black; }
.inactiveText { color:#d3d3d3; }
.tabularTable { width:100%; border-collapse:collapse; border:0px solid black;}
.tabularTable td{ padding:3px; border-collapse:collapse; border:1px solid black;}
.tabularTable th{ white-space:nowrap; padding:3px; border-collapse:collapse; border:1px solid black; font-weight:bold; background-color:#d3d3d3;}
.redWarningText { font-weight:bold; color:red; }
.severe_font { font-weight:bold; color:darkred; }

.trOn  {background-color:#d3d3d3;}
.trOff {background-color:transparent;}

.smallInfoText {font-size:90%; color:#3D3838;}
.xsmallInfoText {font-size:75%; color:#3D3838;}

/* Custom jQuery Stuff */
.styleTable { border-collapse: collapse; width:100%; }
.styleTable a { text-decoration:underline; }
.styleTable a:hover { text-decoration:underline; }
.styleTable TD { font-weight: normal !important; padding:3px 5px 3px 5px; border-top-width: 0px !important; }
.styleTable TH { text-align: center; padding:5px 5px 5px 5px; white-space:nowrap;}
.styleTable TD.first, .styleTable TH.first { border-left-width: 0px !important; }
.styleTable input{font-weight:bold;}
.styleTable select{font-weight:bold;}

.normalLabelData th{ padding:3px; font-weight:bold; text-align:right; }
.normalLabelData td{ padding:3px; }

.normalLabelEdit th{ padding:3px; font-weight:bold; text-align:right; }
.normalLabelEdit td{ padding:0px; }

/*These settings are specifically for the menu bar*/
.hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fg-button { clear:left; margin:0 2px 0 0; padding: .45em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
.fg-button-icon-left { padding-left: 2.1em; }
.fg-button-icon-right { padding-right: 2.1em; }
.fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */
.fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }

/*Tags
ul.bbtags { padding: 5px; overflow: auto; margin:0; }
ul.bbtags li { margin: 0 0 5px 0; padding:2px 5px 2px 5px; cursor: pointer; }
.bbtags-ui-effects-transfer { border: 2px dotted gray; }
*/

/*Employee Module*/
.empReadonly{ background-color:#F0F0F0; border:1px solid gray; padding:2px;}
.empEditMode{border:1px solid gray; padding:2px;}
.placeHolderOn{color:lightgray; font-weight:normal;}
.placeHolderOff{color:black; font-weight:normal;}

.hand {
    cursor: pointer;
    cursor: hand;
}

/*
So input and selects in grids will have the same text size as data in the grid. By default it's larger which doesn't look good.
[Gordon 8-14-2014]-Now that dhtmlx 4.0.3 has bumped grid text size up we don't need to do this.
.hdr .hdrcell input, select { font-size:11px; }
*/

/*
http://forum.dhtmlx.com/viewtopic.php?f=2&t=37871
*/
div.gridbox_dhx_web.gridbox table.hdr td div.hdrcell{
    padding-left:4px;
    width:auto;
}