* {
  box-sizing: border-box;
}

:root {
  /* http://www.color-hex.com/color-palette/23935
      #252839; darkest
      #677077;
      #b5b5b7;
      #cccccc; lightest
      #f2b632; orange
  */
  /*--banner: #252839;
  --bannerHighlightText: #f2b632;
  --bannerText: #b5b5b7;
  --tab_active: #cccccc;
  --tab_inactive: #677077;
  --tab_inactiveText: #cccccc;*/

  --banner: #036;
  --bannerHighlightText: orange;
  --bannerText: white;
  --tab_active: #ddd;
  --tab_activeText: #333;
  --tab_inactive: #999;
  --tab_inactiveText: #f6f6f6;
  --row_a: #f6f6f6;
  --row_b: #e2e0e0;
  --error_red: #B40000;
}

.ui-datepicker { font-size: 11px !important; }
.ui-datepicker th { font-size: 11px !important;  }

.badge_warn {
    background-image: url("/images/exclamation_octagon_frame.png");
    color: white;
}

.badge_EOL {
    background-image: url("/images/exclamation_red_frame_clean.png");
    color: white;
}
.badge_MSG {
    background-image: url("/images/exclamation_octagon_frame_clean.png");
    color: black;
    font-weight: bold;
}
.badge_MSG, .badge_EOL, .badge_warn {
    background-position: 1pt 1pt;
    background-repeat: no-repeat;
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: 12px;
    line-height: 16px;
    padding: 1px 5px;
    text-align: left;
    vertical-align: middle;
}

body {
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Tahoma, Verdana, Arial, sans-serif;
  font-size: 14px;
	background-color: #f6f6f6;
	color: #000;
	margin: 0;
	padding: 0;
}

select, option, button {
  font-family: inherit;
  font-size: 12pt;
}

input, textarea {
  font-family: inherit;
  font-size: 0.8rem;
}

/*input[type=submit] {
	font-size: 1rem;
}*/

.bold {
	font-weight: bold;
	text-align: right;
}
.bold-red {
	font-weight: bold;
	text-align: left;
	color: var(--error_red);
}

.actingAs {
	background-color: var(--error_red);
	font-weight: bold;
	text-align: center;
	color: white;
	padding: 5px;
}

.RedLabel {
	background-color: var(--error_red) !important;
	font-weight: bold !important;
	color: white !important;
}

.number {
	text-align: right;
}

.date {
	text-align: center;
}

.bold-black {
	font-weight: bold;
	text-align: left;
	color: black;
}
.boxlabelcolor {
	background-color: #BAD8F5;
}
.chartcolor2 {
	background-color: white;
}
.chartcolor1 {
	background-color: #DDDDDD;
}

.chartheader, .chartlabel {
	padding: 2px;
	margin: 0;
	font-family : inherit;
	font-size : 11px;
	font-weight : bold;
	color : Black;
}
.chartheader {
	text-align: left;
}
.chartlabel {
	text-align: right;
}
.chartdata, .chartdata_bold {
	padding: 2px;
	margin: 0;
	font-family : inherit;
	font-size: 10px;
	text-align: right;
}
.chartdata_bold {
	font-weight: bold;
}


a {
	text-decoration: none;
}

a:link {
	color: #00F;
	background-color: transparent;
}     /* unvisited link */

a:visited {
	color: #00F;
	background-color: transparent;
}  /* visited link */

a:hover {
	text-decoration: underline;
	color: #0000FF;
	background-color: transparent;
}   /* mouse over link */

img {
	border: 0;
	padding: 0;
	margin: 0;
	/* display: block; */
 }

pre
{
	font-family: inherit;
	padding: 5px;
	margin: 5px;
}

table {
  font-size: inherit;
	border: 0;
	margin: 0;
	padding: 0;
}

table.messageslist
{
	border-color: gray;
	border-width: 1px;
	border-style: solid;
}

td {
	font-family: inherit;
	margin: 0;
	padding: 0;
}

td.datarow
{
	font-family: inherit;
	margin: 0;
	padding: 2px;
	border-bottom: #ccc;
	border-width: 0 0 1px 0;
	border-style: none none solid none;
}

td.datarowodd
{
	color: #000;
	background-color: #ededed;
	font-family: inherit;
	margin: 0;
	padding: 2px;
	border-bottom: #ccc;
	border-width: 0 0 1px 0;
	border-style: none none solid none;
}

th, td.innerTH
{
	background-color: #e6e6e6;
	color: #333399;
	font-family: inherit;
	font-weight: bold;
	text-align: left;
}

th {
	padding: 2px;
	border-bottom: #000;
	border-width: 0 0 1px 0;
	border-style: none none solid none;
}

td.header {
	background-color: #ccc;
	color: #333399;
	font-family: inherit;
	font-size: 1.1em;
	font-weight: bold;
	padding: 1px;
}

td.input
{
	background-color: #fff;
	color: #333399;
	font-family: inherit;
  font-size: inherit;
	font-weight: bold;
	padding: 5px 0px 5px 40px;
}

td.message, div.message
{
	background-color: #fff;
	color: #333399;
	font-family: inherit;
	font-weight: bold;
	padding: 2px;
}

td.error
{
	background-color: #fff;
	color: #ff0000;
	font-family: inherit;
	font-weight: bold;
	padding-left: 40px;
}

.input_msg
{
	background-color: #fff;
	font-family: inherit;
	padding: 5px 0px 5px 40px;
}

.input
{
	background-color: #fff;
	color: #333399;
	font-family: inherit;
	font-weight: bold;
    font-size: inherit;
    line-height: 1.2em;
	padding: 5px 0px 5px 40px;
}

input.custom
{
	font-family: inherit;
	font-weight: bold;
}

select.custom
{
	font-size: 1.1em;
	font-family: inherit;
	font-weight: bold;
	margin: 2px;
}

.currentbox
{
	background-color: #fff;
	color: #333399;
	font-family: inherit;
	font-size: 1.4em;
	font-weight: bold;
}

.datetime
{
	background-color: #fff;
	color: #000080;
	font-family: inherit;
	font-weight: bold;
}

.blue
{
	color: #009;
	background-color: #fff;
}

.green
{
	color: #090;
	background-color: #fff;
}

.purple
{
	color: #909;
	background-color: #fff;
}

.red
{
	color: var(--error_red);
	background-color: #fff;
}

.brown
{
	color: #963;
	background-color: #fff;
}

.navbar
{
	background-color: #aaa;
}

.default
{
}

/* Coloured rows*/
.a td, .b td {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 5px;
}

.a td {
  /* line-height: 1.4rem; */
	background: var(--row_a);
}

.b td {
  /* line-height: 1.4rem; */
  background: var(--row_b);
}

/* Error status indicators */
.warn td {
	color: blue;
}
.nonCompliant td {
	color: var(--error_red) !important;
}
.compliant td {
	color: black;
}
td.warn, td.nonCompliant, td.compliant a {
	color: var(--error_red) !important;
	text-decoration: none;
	font-weight: bold;
}
td.warn a {
	color: blue;
}
td.nonCompliant a {
	color: var(--error_red);
}
td.compliant a {
	color: black;
}
td.warn, td.nonCompliant, td.compliant a:hover {
	text-decoration: underline;
}

/* Banner Styles */
#banner {
	background-color: var(--banner);
	color: var(--bannerText);
}

#banner .error {
	color: var(--error_red);
	font-size: 1.0em;
	padding: 5px 5px 5px 5px;
}

#banner td {
	padding-right: 7px;
	padding-left: 7px;
}

#banner a {
	color: var(--bannerText) !important;
}

#banner a:active, #banner a:hover {
	color: #f90 !important;
}

div#login {
	color: #ddd;
	font-size: small;
	font-weight: normal;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small;
}

#login a:link, #login a:visited {
	color: white;
	text-decoration: underline;
}


/* footer styles */

html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	margin: 0 auto -60px;
}

.footer, .push {
	height: 60px;
}

.footer {
    font-size: 1.0em;
    voice-family: inherit;
    text-align: left;
    vertical-align: middle;
    padding: 10px;

    border-top: 1px solid #999;
    background: #dfdfdf;

    height: 40px;
    max-height: 40px;
}
.footer a {
    color: black;
}

.footer a:active {
    color: #f90 !important;
}



/* top tabs */
.tabs {
	border-bottom: 6px solid var(--tab_active) ;
	margin-top: .67em;
	margin-right: 2px;
	margin-left: 2px;
	padding-left: 8px;
	padding-top: .25em;
	color: #fff;
	margin: 0;
}

.tabs table {
	border-spacing: 2px 0px;
	min-height: 35px;
}

.tabs th {
	border-radius: 10px 0 0 0;
	background-color: var(--tab_active);
	border-bottom: 1px solid var(--tab_active);
	/*border-right: 1px solid #fff;*/
	/*border-left: 1px solid #fff;*/
}

.tabs td {
	border-radius: 10px 0 0 0;
	background-color: var(--tab_inactive);
	border-bottom: 1px solid #666;
	/*border-right: 1px solid #fff;*/
	/*border-left: 1px solid #fff;*/
}

.tabs th, .tabs th a:link, .tabs th a:visited {
	color: var(--tab_activeText);
}

.tabs td, .tabs td a:link, .tabs td a:visited {
	color: var(--tab_inactiveText);
}

.tabs a {
	text-decoration: none;
}

.tabs td, .tabs th {
	voice-family: inherit;
	font-size: 1.0em;
	font-weight: bold;
	padding: 3px 9px;
}


/* Adjustments just for the top tabs */
#toptabs {
	background-color: var(--banner);
}

#toptabs td, #toptabs th {
  padding-right: 5px;
  padding-right: 10px;
  /*border-right: 1px solid #333;*/
	/*border-left: 1px solid var(--banner);*/
}

/* main defs */
#main {
	border-top: 1px solid #999;
}



/* leftcol */
a:active, a:hover, #leftcol a:active, #leftcol a:hover {
	color: #f30 !important;
}

#leftcol a {
	text-decoration: none;
}

#leftcol {
	voice-family: inherit;
	padding: 4px;
	width: 17em;
}

.smallText_error {
	voice-family: inherit;
	color: var(--error_red);
	font-weight: bold;
}

.smallText {
	voice-family: inherit;
	font-size: 0.8em;
}

.smallText_white {
	voice-family: inherit;
	font-size: 0.8em;
	background-color: #fff;
}



/* bodycol */
#bodycol h2 {
	margin-top: .3em;
	margin-bottom: .5em;
	font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
}

#bodycol {
	padding-left: 12px;
	padding-right: 12px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 100%;
}

html>body #bodycol {
	width: auto;
}



/* navcolumn */
#navcolumn {
	background-image: url(/images/strich.gif);
	background-repeat: no-repeat;
	background-position: .5em .5em;
	margin-right: -4px;
}

#navcolumn a:visited {
	color: blue;
}

#navcolumn .body div {
	background-image: url(/images/strich.gif);
	background-repeat: no-repeat;
	background-position: .5em .5em;
}

#navcolumn .body .heading {
	background-image: none;
}


/* toolgroup */
.messageBoard {
	background: #dfdfdf;
	border-bottom: 1px solid #666;
}

.toolgroup {
	background: #efefef;
	margin-bottom: 6px;
}

.toolgroup .label {
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
	background: #ddd;
	padding: 4px;
	color: #333;
}

.toolgroup .body {
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	padding: 4px 4px 4px 0;
	padding-top: 2px;
	padding-bottom: 2px;
}

.toolgroup .body div {
  font-size: 0.8rem;
	padding-bottom: .1em;
	padding-left: 1em;
}

.toolgroup .body div div {
	margin-top: .3em;
	padding-bottom: 0;
}


/* project tools */
#projecttools {
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	margin: -4px 0 6px -4px;
	padding: 6px;
	background-color: #eee;
}

#projecttools .label {
	color: #333;
	font-weight: bold;
	background-color: #fff;
	border-top: 1px solid #666;
	border-right: none;
	border-bottom: none;
	border-left: 1px solid #666;
}

#projecttools .body {
	background-color: #fff;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: 1px solid #666;
	padding-top: 0;
}



.label a, .sublabel a {
	color: #333;
}


/* PO view/input */
.POviewcontainer {
	border: 1px solid black;
}

.POviewcontainer td td {
	border: none;
}

.POview {
	border-bottom: 1px solid #666;
}

.POview td {
	voice-family: inherit;
	font-weight: normal;
	color: black;
	padding-left: 7px;
	border: none;
}
.POview th {
	voice-family: inherit;
	font-weight: normal;
	text-align: right;
	color: black;
	padding: 7px;

	background-color: #d8d8d8;
	border: none;
}

/* form view/input */
.axial td {
	font-weight: normal;
	background-color: #fff;
	color: black;
}
.axial th {
	font-weight: normal;
	background-color: #ddd;
	color: black;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
}
.axial th em {
	font-weight: bold;
	font-style: normal;
}
.axial th, .axial th .strut {
	text-align: right;
	width: 12em;
}
.app .axial td th {
	text-align: left;
}


/* Additional Items for the Generic Calendar Generation */
div.dayLabel
{
	font-family: Arial;
	color: #333399;
	text-decoration: none;
	font-weight: bold;
	text-align: right
}

.calendarLabel, .calendarLabelLeft {
	font-family: Arial;
	color: #333399;
	font-size: 1.8em;
	text-decoration: none;
	font-weight: bold;
}
.calendarLabel {
	text-align: center
}

td.active
{
	background: #DDDDDD;
  font-family: inherit;
	color: #000000;
	text-decoration: none;
	vertical-align: top;
	margin: 0;
	padding: 3pt;
}

td.inactive
{
	background: #777777;
	font-family: inherit;
	color: #FFFFFF;
	text-decoration: none;
	vertical-align: top;
}



/* webFORM styles */
.formSectionHdr {
	font-family : inherit;
	font-size : 1em;
	font-weight : bold;
	text-decoration: underline;
	color: #333;
	text-align: left;
	padding-top: 10px !important;
	padding-bottom: 2px !important;
}

.formLabel {
	font-family : inherit;
	/*font-size : 10px !important;*/
  font-size : 0.7rem !important;
	font-weight : bold !important;
	color : Black;

	padding: 3px !important;
	background-color: #ddd !important;
	border: none;

	padding-top: 8px !important;
	vertical-align: top;
	text-align: right;
	min-width: 30px;
}

.formLabel_Error {
	font-family : inherit;
	font-size : 10px;
	font-weight : bold !important;
	color : white;
	min-width: 30px;

	vertical-align: middle;
	text-align: right;

	padding: 3px;
	background-color: var(--error_red) !important;
	border: none;
}

.formData {
	font-family : inherit;
	/*font-size : 11px;*/
	font-weight : normal;
	color : Black;
	text-align: left;
/*	white-space: nowrap; */

	vertical-align: middle;
	padding: 3px !important;
	padding-left: 10px;
	min-width: 30px;
}


.roundedCorner10px {
	margin: 5pt auto;
	background-color: #ddd;

	color: #333399;
	font-family: inherit;
	line-height: 16px;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;

	border-radius: 10px;
	padding: 6px
}

.roundedCorner10px td strong {
	voice-family: inherit;
	color: #333399;
}

#roundedLabel
{
	margin: 5pt auto;
	background-color: #ddd;

	color: #333399;
	font-family: inherit;
	line-height: 16px;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
}

#roundedInner
{
	margin: 0 auto;
	background-color: white;

	color: black;
	font-family: inherit;
	line-height: 12px;
	font-weight: normal;
	text-align: left;
	vertical-align: top;
}

#roundedInner #bodycol
{
	line-height: 14px;
}


.axial2 th
{
	background-color: #e6e6e6;
	color: #333399;
	font-family: inherit;
	font-weight: bold;
	text-align: left;
	padding: 2px;
	border-bottom: #000;
	border-width: 0 0 1px 0;
	border-style: none none solid none;
}




/* simple css-based tooltip */
.tooltip {
	background-color:#000;
	border: 1px solid #fff;
	padding: 10px 15px;
	width: 200px;
	display: none;
	color: #fff;
	text-align: left;

	/* outline radius for mozilla/firefox only */
	box-shadow:0 0 10px #000;
}







/**********************************************
   Styles for the Student Treatments
 **********************************************/
 .treatmentPlanList {
	margin: 5pt auto;
	background-color: #ddd;

	/* color: #333399; */
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1em;
	line-height: 16px;
	font-weight: plain;
	text-align: left;
	vertical-align: middle;

	border-radius: 10px;
	padding: 6px
}

.treatmentPlanList.disabled{
	background-color: #eee;
	border: 2px solid #ddd;
}


/**********************************************
   Styles for the Student Treatments
 **********************************************/
.treatmentCalendar {
	margin: 5pt auto;
	background-color: #ddd;

	color: #333399;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;

	border-radius: 10px;
	padding: 6px
}

.treatmentCalendar.disabled{
	background-color: #eee;
	border: 2px solid #ddd;
}

.MC_label, .MC_data, .MC_header {
	vertical-align: top;
	font-family : Verdana, Arial, Helvetica;
	font-size : 11px;
	color : Black;

	padding: 3px;
	border: none;
}

.MC_header {
	font-weight : bold;
	font-size : 14px;
	min-width: 30px;
	color: #333399;

	text-decoration: underline;
}

.MC_label, .MC_label_left {
	font-weight : bold;
	min-width: 30px;
	max-width: 200px;
	color: #4f4f4f;
}

.MC_label {
	text-align: right;
}

.MC_data {
	font-weight : normal;
	text-align: left;

	padding-left: 10px;
	width: auto;
}


.treatmentCalendar em {
	color: #4f4f4f;
}

.calErr {
	border: 2px solid var(--error_red);
}
.calErrMsg {
	text-decoration: italic;
	font-size : 1em;
	color : var(--error_red);
}


/**********************************************
   Styles for the Environment Indicator
 **********************************************/
body.environment-frame {
  padding-top: 32px
}

body.environment-frame:before, body.environment-frame:after {
  position: fixed;
  background: var(--frameColor);
  left: 0;
  right: 0;
  z-index: 62
}

body.environment-frame:before {
  top: 0;
  height: 32px;
  content: ''
}

body.environment-frame:after {
  bottom: 0;
  height: 4px;
  content: ''
}

.environment-name {
  font-weight: bold;
  display: none;
}

.environment-frame>.environment-name {
  display: block;
  position: fixed;
  top: 0;
  left: 8px;
  color: #fff;
  font-size: 1.2em;
  height: 32px;
  line-height: 32px;
  z-index: 110;
  background-color: transparent
}

.environment-frame-left {
  display: hidden
}

.environment-frame-right {
  display: hidden
}

.environment-frame>.environment-frame-left {
  display: inherit;
  width: 3px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--frameColor);
  z-index: 110
}

.environment-frame>.environment-frame-right {
  display: inherit;
  width: 3px;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  background: var(--frameColor);
  z-index: 110
}


.eemButton {
  font-family: arial;
  box-sizing: border-box;
  background-color: #f2f2f2;
  color: #454859;
  border: 1px solid darkgrey;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  font-size: 11pt;
  margin: 0;
  padding: 3px 0.75em;
  padding-top: 3px;
  text-decoration: none;
}
.eemButton:hover {
  background-color: #d5d5d5;
}
.eemButton:disabled {
  cursor: not-allowed;
  opacity: 0.3
}
.eemButton.current {
  background-color: #454859;
  color: #f2f2f2;
}
.eemButton.smallText {
  border-radius: 3px;
  font-size: 8pt;
  padding: 2px 0.5em;
  padding-top: 2px;
}
a:link.eemButton, a:visited.eemButton {
	color: #454859;
	background-color: #f2f2f2;
}
a:hover.eemButton {
	text-decoration: none;
    color: #454859 !important;
    background-color: #d5d5d5;
}





.alert {
  padding: 5px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert > p,
.alert > ul {
  margin-top: 5px;
  margin-bottom: 5px;
}
.alert > p + p {
  margin-top: 5px;
}
.alert-success {
  color: #2F5D30;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-danger hr {
  border-top-color: #e4b9c0;
}

.alert {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
}
.alert-success {
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image:      -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
  background-repeat: repeat-x;
  border-color: #b2dba1;
}
.alert-info {
  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image:      -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
  background-repeat: repeat-x;
  border-color: #9acfea;
}
.alert-warning {
  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
  background-repeat: repeat-x;
  border-color: #f5e79e;
}
.alert-danger {
  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
  background-image:      -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
  background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
  background-repeat: repeat-x;
  border-color: #dca7a7;
}


/**********************************************
   Styles for the mini select control
 **********************************************/
select.mini {
  outline: none; /* remove focus ring from Webkit and Chrome */

  font-family: inherit;
  font-size: inherit;
  display: inline-block;

  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

  background-color: #efefef;
  background-repeat: no-repeat;
  background-size: 0.5em auto;
  background-position: right 0.25em center;

  padding: 2px 2px;
  margin-left: -2px;
  padding-right: 0.9em;
  width: 0.9em;

  border: 1px solid #dfdfdf;
  border-radius: 2px;

  background-image: url("data:image/svg+xml;charset=utf-8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
      <polygon points='0,0 60,0 30,40' style='fill:black;'/> \
    </svg>");
}

/**********************************************
   Styles for a simple flex container
 **********************************************/
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  /* justify-content: space-around; */
  align-content: flex-start;
}

.flex-item {
  padding: 5px 15px;
  text-align: left;
}



/**********************************************
   Card Styles
 **********************************************/

table.card, div.card {
	margin-left: 40px;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	border: 1px solid black;
	background-color: #efefef;
	border-color: #ccc;
	border-radius: 5px;
}
.card tr.spaceBefore td { padding-top: 10px; }
.card tr.spaceAfter td { padding-bottom: 10px; }
.card tr td { vertical-align: center; }

.card fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

/**********************************************
Outbox/Card Styles
**********************************************/

.outboxTitle {
	margin: 10px 0;
	font-weight: bold;
	font-size: 2em;
}

.outboxGroup {
	padding-top: 10px;
	padding-bottom: 30px;
	margin-right:20px;
}
.outboxGroup:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.outboxGroupTitle {
	font-weight: bold;
	font-size: 1.2em;
	background: #dfdfdf;
	padding: 10px;
	margin-bottom:5px;
	border-radius: 10px 0 0 0;
}

.outboxItem {
	margin: 5px;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid darkgray;
	float: left;
	min-width:400px;
	max-width:600px;
	width:45%;
	margin-right:15px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.outboxItem .eemButton {
	font-size: 0.9em;
}

.outboxItemImage {
	height: 128px;
	min-height: 128px;
	float: left;
}

.outboxItemDetails {
	/* display: inline-block; */
	/* float: left; */
	padding: 10px;
}

.outboxItemFileName {
	margin:0px;
	padding-top:0;
	padding-right:10px;
}

.outboxItemDescription {
	margin:0px;
	padding-top:10px;
	padding-right:10px;
}

.outboxItemParticulars {
	margin:0px;
	padding-top:15px;
	padding-right:10px;
	padding-bottom:20px;
	font-size: .8em;
}




/* WANT THIS DEFINED LAST IN THE CSS */
.float_left  { float: left; }
.float_right { float: right; }

.font9pt { font-size: 9pt; }
.font18pt { font-size: 18pt; }
.font12pt { font-size: 12pt; }
.font24pt { font-size: 24pt; }
.font12em { font-size: 1.2em; }
.font2em { font-size: 2em; }

.whitespace_nowrap { white-space: nowrap; }
.overflow_breakWord { overflow-wrap: break-word; }

.none        { display: none; }
.noneImportant        { display: none !important; }
.inline      { display: inline; }
.inlineFlex  { display: inline-flex; }
.inlineBlock { display: inline-block; }
.displayFlex  { display: flex; flex-wrap: wrap; }

.width25perc { width: 25%; }
.width100perc { width: 100%; }
.widthAuto   { width: auto; }
.width100    { width: 100px; }
.width120    { width: 120px; }
.width150    { width: 150px; }
.width200    { width: 200px; }
.width400    { width: 400px; }
.minWidth20  { min-width: 20px; }
.minWidth30  { min-width: 30px; }
.minWidth70  { min-width: 70px; }
.minWidth80  { min-width: 80px; }
.minWidth100 { min-width: 100px; }
.minWidth150 { min-width: 150px; }
.minWidth160 { min-width: 160px; }
.minWidth200 { min-width: 200px; }
.minWidth300 { min-width: 300px; }
.minWidth400 { min-width: 400px; }
.minWidth600 { min-width: 600px; }
.minWidth85percent { min-width: 85%; }
.minWidth95percent { min-width: 95%; }

.maxWidth75  { max-width: 75px; }
.maxWidth100 { max-width: 100px; }
.maxWidth200 { max-width: 200px; }
.maxWidth250 { max-width: 250px; }
.maxWidth300 { max-width: 300px; }
.maxWidth800 { max-width: 800px; }

.valign_top { vertical-align: top; }
.valign_middle { vertical-align: middle; }
.halign_center { text-align: center; }
.halign_right { text-align: right; }
.halign_left { text-align: left; }
.line_height_12em { line-height: 1.2em; }

.m0  { margin: 0; }
.m3  { margin: 3px; }
.m5  { margin: 5px; }
.m10 { margin: 10px; }

.mt0  { margin-top: 0; }			.mb0  { margin-bottom: 0; }
.mt2  { margin-top: 2; }			.mb2  { margin-bottom: 2; }
.mt3  { margin-top: 3px; }
.mt5  { margin-top: 5px; }
.mt7  { margin-top: 7px; }
.mt8  { margin-top: 7px; }
.mt10 { margin-top: 10px; }			.mb10 { margin-bottom: 10px; }
.mt15 { margin-top: 15px; }			.mb15 { margin-bottom: 15px; }
.mt20 { margin-top: 20px; }			.mb20 { margin-bottom: 20px; }
.mt30 { margin-top: 30px; }

.ml0  { margin-bottom: 0; }			.mr0  { margin-right: 0; }
.ml5  { margin-left: 5px; }			.mr10 { margin-right: 10px; }
.ml20 { margin-left: 20px; }		.mr20 { margin-right: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }		.mr40 { margin-right: 40px; }

.p0  { padding: 0; }
.p2  { padding: 2px; }
.p3  { padding: 3px; }
.p5  { padding: 5px; }
.p8  { padding: 8px; }
.p10 { padding: 10px !important; }
.p20 { padding: 20px; }

.pt0  { padding-top: 0; }			.pb0  { padding-bottom: 0; }
.pt2  { padding-top: 2px; }
.pt3  { padding-top: 3px; }			.pb3  { padding-bottom: 3px; }
.pt4  { padding-top: 4px; }
.pt5  { padding-top: 5px; }			.pb5  { padding-bottom: 5px; }
									.pb7  { padding-bottom: 7px; }
.pt8  { padding-top: 8px; }
.pt10 { padding-top: 10px; }		.pb10 { padding-bottom: 10px; }
.pt15 { padding-top: 15px; }		.pb15 { padding-bottom: 15px; }
.pt20 { padding-top: 20px; }		.pb20 { padding-bottom: 20px; }
.pt30 { padding-top: 30px; }		.pb30 { padding-bottom: 30px; }
									.pb40 { padding-bottom: 40px; }


.pl9  { padding-left: 0; }			.pr0  { padding-right: 0; }
.pl3  { padding-left: 3px; }		.pr3  { padding-right: 3px; }
.pl5  { padding-left: 5px; }		.pr5  { padding-right: 5px; }
.pl7  { padding-left: 7px; }
.pl10 {	padding-left: 10px; }		.pr10 {	padding-right: 10px; }
.pl15 {	padding-left: 15px; }
.pl20 {	padding-left: 20px; }		.pr20 {	padding-right: 20px; }
									.pr26 {	padding-right: 26px; }
.pl30 {	padding-left: 30px; }		.pr30 {	padding-right: 30px; }
.pl40 {	padding-left: 40px; }
.pl50 {	padding-left: 50px; }
.pl60 {	padding-left: 60px; }
.pl75 {	padding-left: 75px; }
.pl90 {	padding-left: 90px; }


.text_nodecoration { text-decoration: none; }
.text_italic { font-style: italic; }
.text_normal { font-weight: normal; }
.text_bold_400 { font-weight: 400; }
.text_bold_600 { font-weight: 600; }
.text_bold { font-weight: bold; }

.text_gray333 { color: #333; }
.text_gray444 { color: #444; }
.text_gray555 { color: #555 !important; }
.text_gray5E5E5E { color: #5e5e5e; }
.text_gray666 { color: #666; }
.text_darkgray { color: darkgray; }
.text_gray777 { color: #777777; }
.text_gray999 { color: #999; }
.text_gray { color: grey; }
.text_gray8C8C8C { color: #8c8c8c; }
.text_grayBBB { color: #bbb; }
.text_grayE6E6E6 { color: #e6e6e6; }

.text_pink { color: #ec098c; }
.text_white { color: white; }
.text_black { color: black; }
.text_darkred { color:darkred !important; }
.text_red { color: var(--error_red) !important; }
.text_orange { color: darkorange; }
.text_lightblue { color: lightblue;}
.text_lightgreen { color: lightgreen;}
.text_green { color: green; }
.text_darkgreen { color: darkgreen;}
.text_blue { color: blue; }
.text_ff6464 { color: #FF6464; }

.height30 { height: 30px; }
.background_white { background: white; }
.background_black { background: black; }
.background_EED6BA { background: #eed6ba; }
.background_F6F6F6 { background: #f6f6f6 !important; }
.background_FCD299 { background: #FCD299 !important; }
.background_red { background: var(--error_red); }

.background_gray { background: grey; }
.background_gray333 { background: #333; }
.background_grayDF { background: #dfdfdf; }
.background_grayEEE { background: #eee; }
.background_lightgray { background: lightgray; }

.border_none { border: 0; }
.border_black { border: 1px solid black; }
.border_gray333 { border: 1px solid #333; }
.border_gray777 { border: 1px solid #777; }
.border_gray999 { border: 1px solid #999; }
.border_darkgray { border: 1px solid darkgray; }
.border_lightgray { border: 1px solid lightgray; }
.border_yellow { border: 2px solid yellow; }

.borderRight_dfdfdf { border-right: 1px solid #dfdfdf; }
.borderBottom_darkgray { border-bottom: 1px solid darkgray; }
.borderBottom_none { border-bottom: none; }
.borderTop_darkgray { border-top: 1px solid darkgray; }
.borderTop_gray333 { border-top: 1px solid #333; }
.borderTop_gray666 { border-top: 1px solid #666; }

.border_radius_5 { border-radius:5px; }

.z10000 { z-index: 10000; }