//body { 
// background-color: #FF9966;
//}

tr:nth-child(1){
//	background-color:blue;
}

.flashing-border {
    border: 2px solid red;
    animation: flash 1s infinite alternate;
}

@keyframes flash {
    from {
        border-color: pink;
    }
    to {
        border-color: transparent;
    }
}


a.textbox {
  font-family: "Arial", "Helvetica", "Verdana","sans-serif";
  padding:1px 6px 1px 6px; 
  color: #2c2c2c; 
  background-color: #e1e1e1; 
  border: #636363 1px solid;
  text-decoration:none;
  font-size:95%;
  font-weight:bold;
  cursor='hand'; 
}

td.big120 {
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
  font-size:16px;
}

input.input{
   color:#2c2c2c;
   font-family: "Arial", "Helvetica", "Verdana","sans-serif";
   font-size:95%;
   font-weight:bold;
   background-color:#e1e1e1;
   border:1px solid;
   border-top-color:#636363;
   border-left-color:#636363;
   border-right-color:#636363;
   border-bottom-color:#636363;
   cursor='hand';
}

input.nonbox{
   color:#2c2c2c;
   font-family: "Arial", "Helvetica", "Verdana","sans-serif";
   font-size:95%;
   font-weight:bold;
   background-color:#e1e1e1;
   cursor='hand';
   text-align:center;
   border-style:none;
}

input.nonbox2{
   color:#2c2c2c;
   font-family: "Arial", "Helvetica", "Verdana","sans-serif";
   font-size:100%;
   font-weight:bold;
   background-color:#ffffff;
   cursor='hand';
   text-align:center;
   border-style:none;
}


input.insertbox{
   color:#2c2c2c;
   font-family: "Arial", "Helvetica", "Verdana","sans-serif";
   font-size:95%;
   font-weight:bold;
   background-color:#DFEDAD;
   border:1px solid;
   border-top-color:#636363;
   border-left-color:#636363;
   border-right-color:#636363;
   border-bottom-color:#636363;
   cursor='hand';
}

input.input2{
   color:#2c2c2c;
   font-family: "Arial", "Helvetica", "Verdana","sans-serif";
   font-size:95%;
   width:100%;
   font-weight:bold;
   text-align:center;
   background-color:#e1e1e1;
   border:0px solid;
   border-top-color:#636363;
   border-left-color:#636363;
   border-right-color:#636363;
   border-bottom-color:#636363;
   cursor='hand';
}
td {font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 11px; }

select.input{
   color:#2c2c2c;
   font-family: "Arial", "Helvetica", "Verdana","sans-serif";
   font-size:95%;
   font-weight:bold;
   background-color:#e1e1e1;
   border:1px solid;
   border-top-color:#636363;
   border-left-color:#636363;
   border-right-color:#636363;
   border-bottom-color:#636363;
   cursor='hand';
}
img.img
{
 vertical-align: bottom;
 border:0px;
}
img{ 
margin:0;
padding:0;
min-height:0px;
line-height:0%;
}

td.line{
font-size:0%;
line-height: 0%;
}


.clearFix:after { /* for modern browsers */
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearFix { /* for IE7/Win */
    min-height:1px;
}
tr.bottomborder td {border-bottom: 1px solid;
border-bottom-color:#999999;
}
* html .clearFix { /* for IE5-6/Win */
    height:1%;
}

* html>body .clearFix { /* for IE5/Mac */
    height:auto;
    display:inline-block;
}

/* Custom dialog styles */
#popup_container.style_1 {
	font-family: Georgia, serif;
	color: #A4C6E2;
	background: #005294;
	border-color: #113F66;
}

#popup_container.style_1 #popup_title {
	color: #FFF;
	font-weight: normal;
	text-align: left;
	background: #76A5CC;
	border: solid 1px #005294;
	padding-left: 1em;
}

#popup_container.style_1 #popup_content {
	background: none;
}
	
#popup_container.style_1 #popup_message {
	padding-left: 0em;
}
			
#popup_container.style_1 INPUT[type=button] {
	border: outset 2px #76A5CC;
	color: #A4C6E2;
	background: #3778AE;
}

#popup_container {
	font-family: Arial, sans-serif;
	font-size: 12px;
	min-width: 300px; /* Dialog will be no smaller than this */
	max-width: 600px; /* Dialog will wrap after this width */
	background: #FFF;
	border: solid 5px #999;
	color: #000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#popup_title {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 1.75em;
	color: #666;
	background: #CCC url('script/dialogs/images/title.gif') top repeat-x;
	border: solid 1px #FFF;
	border-bottom: solid 1px #999;
	cursor: default;
	padding: 0em;
	margin: 0em;
}

#popup_content {
	background: 16px 16px no-repeat url('script/dialogs/images/info.gif');
	padding: 1em 1.75em;
	margin: 0em;
}

#popup_content.alert {
	background-image: url('script/dialogs/images/info.gif');
}

#popup_content.confirm {
	background-image: url('script/dialogs/images/important.gif');
}

#popup_content.prompt {
	background-image: url('script/dialogs/images/help.gif');
}

#popup_message {
	padding-left: 48px;
}

#popup_panel {
	text-align: center;
	margin: 1em 0em 0em 1em;
}

#popup_prompt {
	margin: .5em 0em;
}

#loading-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Ensure the loading indicator appears on top of other elements */
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

		
	/* table list */
	.table_list {border-collapse:collapse;
		border:solid #cccccc 1px;
		width:100%;}
	
	.table_list td {padding:5px;
		border:solid #efefef 1px;}
	
	.table_list th {background:#75b2d1;
		padding:5px;
		color:#ffffff;}
	
	.table_list tr.odd {background:#e1eff5;}
	
	.time_picker_div {padding:5px;
		border:solid #999999 1px;
		background:#ffffff;}
		

/* the div that holds the date picker calendar */
.dpDiv {
	}


/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #505050;
	background-color: #ece9d8;
	border: 1px solid #AAAAAA;
	}


/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
	}


/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
	}


/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
	}


/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
	}


/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	border: 1px solid #ece9d8;
	}


/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	}


/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #aca998;
	border: 1px solid #888888;
	cursor: pointer;
	color: red;
	}


/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	}


/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	}


/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	}


/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	color: white;
	}


/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 12px;
	color: gray;
	font-weight: bold;
	}


/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color: 4060ff;
	font-weight: bold;
	}


/* the forward/backward buttons at the top */
.dpButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	padding: 0px;
	}


/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	}
	
/* blink text */
td.blinky { text-decoration: blink; }
p#blinky { text-decoration: blink; }

.blinkingtext {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: blink;
}

.blink {
    background-color:#FF6666;
}


@keyframes blink {
    0% { background-color: $current_color; }
    50% { background-color: #FF9999; }
    100% { background-color: $current_color; }
}

.blinking-background {
    animation: blink 1s infinite;
}



/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	border: 1px solid #963;
	height: 600px;
	overflow: auto;
	width: 1200px;
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	width: 1200px;
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	width: 1200px;
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
	width: 1200px;
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
	position: relative
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
	display: inline-block
}

/* make the TH elements pretty */
thead.fixedHeader th {

	border-left: 1px solid #EB8;

	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
}

/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
	color: #FFF;
	display: block;
	text-decoration: none;
	width: 100%;
}

/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
	color: #FFF;
	display: block;
	text-decoration: underline;
	width: 100%;
}

/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent {
	display: block;
	height: 600px;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body thead.fixedHeader th {
	width: 200px
}

html>body thead.fixedHeader th + th {
	width: 240px
}

html>body thead.fixedHeader th + th + th {
	width: 316px
}

/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
/* All other non-IE browsers.                                            */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body tbody.scrollContent td {
	width: 200px
}

html>body tbody.scrollContent td + td {
	width: 240px
}

html>body tbody.scrollContent td + td + td {
	width: 300px
}


.calendar-box {
	display:none;
	background-color:#fff;
	border:1px solid #444;
	position:absolute;
	width:250px;
	padding: 0 5px;
}
.calendar-box select.calendar-month {
	width:90px;
}
.calendar-box select.calendar-year {
	width:70px;
}
.calendar-box .calendar-cancel {
	width:100%;
}
.calendar-box table td {
	width:14%;
}
.calendar-box .calendar-title {
	text-align:center;
}
.calendar-box a {
	text-decoration:none;
}
.calendar-box .today a {
	padding:0 5px;
	margin-left:-5px;
	background-color:#ffe9c6;
} 
.calendar-box .selected a {
	padding:0 5px;
	margin-left:-5px;
	background-color:#c9ff8b;
}

.ScrollStyle{
max-height:200px;
overflow-y: scroll;	
}

.TableScroll {
/*      table-layout: fixed; */
/*      border-collapse: collapse;*/
	  overflow-y: scroll;  
    }
    
	.TableScroll th{
	  position: sticky;
	  top: 0;
	  background-color:#99CCFF;
	}
    
    .TableScroll  td {
      padding: 5px 10px;
    }


	.red {
		color: red;
	}
	
	.blue {
		color: blue;
	}
	
	.green {
		color: green;
	}
	
	.yellow {
		color: yellow;
	}
	
	.orange {
		color: orange;
	}
	
	.purple {
		color: purple;
	}
	
	.pink {
		color: pink;
	}
	
	.brown {
		color: brown;
	}
	
	.gray {
		color: gray;
	}
	
	.black {
		color: black;
	}
	
	.white {
		color: white;
	}