/* Palette
	Dark Baige: #C3CA99
	Light Beige: #E3EAB9
	Green: #036701
	Green Alternative: #024F00
	Purple: #933464
*/
body {
/*	max-width:1260px; */
}

.body {
	margin:8px;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
}
.popup {
	background-color: #E3EAB9;
}
.tablebody {margin:0px; font-family:Arial, Helvetica, sans-serif; background:#E3EAB9;}
.DividerTop {background:#024F00; }
.DividerBtm {background:#C3CA99;}
.subtitle {font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#000000; background:#C3CA99;}
.joinlink {font-family:Arial, Helvetica, sans-serif; padding:4px 5px 4px 0px; }
.joinlink a,
.joinlink a:visited {font-weight:bold; font-size:12px; text-decoration:underline; color:#023d00; }
.joinlink a:hover {font-weight:bold; font-size:12px; text-decoration:none; color:#000000;}
.joinlink a.nobold,
.joinlink a:visited.nobold {font-weight:normal;}
.joinlink font {font-size:12px; color:#023d00;}
.main {font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal;}
.alert {font-weight:bold; color:#FF0000;}
.marc {font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:normal;}

a, a:visited { 	color:#023d00; }
a:hover {color:#000000;}
a.nobold, a:visited.nobold {font-weight:normal;}

.solidtable {
	background:#C3CA99;
}
.solidtable .highlight, .highlight {
	background:#E3EAB9;
}

.container-body, .container-body-nopadding, .popup {
	background-color:#E3EAB9;
}

.tableinput 
{
    background-color:#E3EAB9;
}

.container-body-hl, .container-body-hl-nopadding {
	background:#C3CA99;
}

.container h2 {
	background-color:#024F00;
	color:#FFF;
}

.warningbar {
	background-color :#933464 !important;
	color:#FFF;
}

.graybutton
{
    opacity: 0.3;
    filter: alpha(opacity=30);
    color:gray;
}

.container h3, .table_no_wrap h3 {
	background:#C3CA99;
	color:#000;
}

.container h4 {
	color:#000;
}

#tooltip {
	color: #FFFFFF;
	background-color: #024F00;
}

.header-right, .header-right a {
	color:#fff;
}

.subnav ul {
	background-color: #C3CA99; 
	
}
.subnav li {
	margin:-1px;
}

ul.headerlist, ul.headerlist a, ul.headerlist a:visited {
	color:#ffffff;
}

ul.headerlist li.selected, ul.headerlist li.selected a {
	background-color:#C3CA99; 
	color:#000000;
}

/* Report Table */

.reporttable td {
	background-color:#E3EAB9;		
}
/* Only visible hide it in html, since we want it to be visible when exporting to excel */
.reporttable td span.hidetext {
	color:#E3EAB9;
}
.reporttable td.header, .reporttable th.header, .reporttable thead tr th, .reporttable tbody tr th {
	background-color:#C3CA99;;
}
.reporttable td.date {
	background-color:#C3CA99;
}
.reporttable td.blankrow {
	background-color:#fff;
}
.reporttable td.empty, .reporttable td.emptynohide {
	background-color:#eee;
}
.reporttable td.category {
	background-color:#C3CA99;
}

.reporttable td.shift_late {
	background-color:#FF615E;
}
.reporttable td.shift_late_warn {
	background-color:#FFFF61;
}

.reporttable tr.details_absence td, .reporttable td.details_absence {
	background-color:#024f00;
	color:#fff;	
}
.reporttable span.details_absence, .reporttable td.details_alldayabsence {
	background-color:#024f00;
	color:#fff;	
}
.reporttable td.details_absence span.hidetext {
	color:#024f00;
}
.reporttable tbody tr.over td {
	background-color: #C3CA99 !important; 
}
.reporttable tbody tr.over td span.hidetext {
	color: #C3CA99 !important; 
}
.reporttable tbody tr.selected td, .reporttable tbody tr.selected td a {
	background-color: #024F00 !important;
	color:#fff;
}
.reporttable tbody tr.selected td span.hidetext{
	color: #024F00 !important;
}
.reporttable tbody tr.over td {
	background-color: #C3CA99 !important; 
}

/* Holiday */
.reporttable tr.details_holiday td, .reporttable td.details_holiday {
	background-color:#933464;
	color:#fff;	
}
.reporttable span.details_holiday, .reporttable td.details_alldayholiday {
	background-color:#933464;
	color:#fff;	
}
.reporttable td.details_holiday span.hidetext {
	color:#933464;
}

.reporttable span.shift_late {
	background-color:#FF615E;
}
.reporttable span.shift_late_warn {
	background-color:#FFFF61;
}

/* Status colours */

.scheduled {
	background-color: #008000;
}

.over, .short {
	background-color: #ff0000;
}

.free {
	background-color: #ffff00;
}

.divideline {
	background:#024F00;
}

hr {
	background-color:#024F00;
}

/* shift cell colours - non colour blind */
#scheduletable .tentative-break {
	background-color:#0000ff;
}
#scheduletable .tentative-reqd {
	background-color:#ff9900;
}
#scheduletable .tentative {
	background-color:#ffff00;
}
#scheduletable .filled-break {
	background-color:#0000ff;
}
#scheduletable .filled-reqd {
	background-color:#016a01;
}
#scheduletable .filled {
	background-color:#8cb275;
}
#scheduletable .unfilled-break {
	background-color:#00ffff;
}
#scheduletable .unfilled-reqd {
	background-color:#ff0000;
}

/* Change background colour of required unfilled shifts from red to purple */
#scheduletable.colourblind .unfilled-reqd {
	background-color:#cc99ff;
}
#scheduletable .unfilled {
	background-color:#ffffff;
}

#scheduletable .hl {
	border-top:#e3eab9 solid 1px;
}

#scheduletable .leftnav {
	background:#C3CA99;
}

.plotdialog
{
    position: relative !important;
    /*overflow: visible !important;*/
}


.plotdiv 
{
	height: 200px;
	
}

.plotspan
{
	vertical-align: middle;
	line-height: normal;
	line-height: 300px;
	
}

.gauge
{
	width: 280px;
	height: 160px;
}

.ui-dialog .ui-dialog-titlebar-print
{
	float : right;
	padding : 0 12px 0 0;
}

.ui-dialog .ui-dialog-titlebar-print:hover, .ui-dialog .ui-dialog-titlebar-print:focus 
{ padding: 0 12px; 
}

.printpage-textarea
{
	width:95%;
	padding: 10px 10px 10px 10px;
	margin: 10px 10px 10px 10px;
	border: 3px solid #C3CA99;
	border-radius: 5px;
}

#wrap {
   width:100%;
   margin:0 auto;
   overflow:hidden !important;
   
}

#top {
    height : 252px;
    border: 3px solid #C3CA99;
    border-radius: 5px;
    padding: 0px;
    margin: 0px 0px 4px 0px;
    /*overflow-x:auto !important;*/
   
}

#left_col {
    float:left;
    width: 48%; /*Back plan for IE which may not support calc*/
    width: calc((50%) - 8px);
    height: 1500px;
    border: 3px solid #C3CA99;
    border-radius: 5px;
    margin: 00px  2px  0px  0px;
    padding: 0px;
    overflow:hidden !important;
}
#right_col {
   float:right;
   width: 48%; /*Back plan for IE which may not support calc*/
   width: calc((50%) - 8px);
   height: 1500px;
   border: 3px solid #C3CA99;
   border-radius: 5px;
   margin: 00px  0px  0px  2px;
   padding: 0px;
   overflow:hidden !important;
    
}

.dropbackground {
     background-image: url(/images/Dashboard/Droparea.png); 
     background-repeat: no-repeat;
     background-position: 50% 0%;
     
    
}



#gallery { float: left; height : 128px;  }
  .gallery.custom-state-active { background: #eee; }
  .gallery li { 
    float: left; 
    width: 96px; 
    
    padding: 5px; 
    margin: 4px 0px 0px 4px; 
    text-align: center;
    border-radius: 5px; 
    z-index : 2000; /*jq ui dialogue is coded for 1001 so we need to beat that*/
    cursor: move;
    
    }
  .gallery_disabled { 
    float: left; 
    width: 96px; 
    padding: 5px; 
    margin: 4px 0px 0px 4px; 
    text-align: center;
    border-radius: 5px; 
    opacity: 0.5;
    cursor: auto;
    }  
  .gallery li h5 { margin: 0 0 0.4em;  height: 3em; }
  .gallery li a { float: right; }
  .gallery li a.ui-icon-zoomin { float: left; }
  .gallery li img { width: 100%;  }

 .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    
    box-shadow: 0 0 7px black;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }