/* 
// DSD Creator
// VERSION 2.0 12/26/23
*/
/* CSS Document */
.ui-datepicker{ z-index: 9999 !important;}
#adminHeaderContainer {
	position:relative;
	margin: 0 auto;   /* align for good browsers */
	width:788px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #333333;
}
#adminHeaderContainer a:link {
	color: #3F2124;
	text-decoration: none;
}
#adminHeaderContainer a:visited {
	color: #3F2124;
	text-decoration: none;
}
#adminHeaderContainer a:hover {
	color: #3F2124;
	text-decoration: underline;
}

#container {
	/*
	// change this to below as 'relative' was messing up the datepicker positioning
	position:relative;
	margin: 50px auto 0 auto;
	*/
	margin: 0 auto; /* Remove top margin */
  	transform: translateY(50px);
	text-align: center; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	padding: 10px 25px 25px 25px;
}

#container h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #4a536e;
	margin-top: 33px;
	margin-bottom: 10px;
}

#container h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #0060ba;
	margin: 10px;
}
#message {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #FF6600;
	margin: 20px;
}
#message a:link {
	font-size:0.80em;
	color: #FF6600;
	text-decoration: underline;
}
#message a:visited {
	color: #FF6600;
	text-decoration: underline;
}
#message a:hover {
	color: #C44F00;
	text-decoration: underline;
}
.admin_level {
  padding: 20px;
  text-align: center;
  background-color: #eeeeee;
  margin: 0 auto;
  font-family: Arial, "MS Trebuchet", sans-serif;
  color: #333333;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.admin-title {
  align-self: flex-start;
}
.admin-columns {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.admin-column {
  width: 33%;
  margin: 10px;
  text-align: left;
  border: 1px solid #cccccc;
  background-color: #e8e8e8;
  padding: 10px;
  color: #333333;
}
.admin-page {
  margin: 10px auto 5px auto;
  text-align: left;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  padding: 10px;
  color: #0A246A;
}
.conventions_outline {
	margin: 0 auto;   /* align for good browsers */
	width:940px;
	border: #CCCCCC 1px solid;
	background-color:#F8F8F8;
	text-align:left;
	padding:10px;
	line-height:1.4;
}
.table_outline {
	display: inline-block; /* this allows the div to 'grow' with the table contents */
	border: #CCCCCC 1px solid;
	background-color:#EAEAEA;
	text-align:center;
	padding:10px;
}
.table_outline_form {
	display: inline-block;
	border: #CCCCCC 1px solid;
	background-color: #f3f4f7;
	text-align:center;
	padding:10px;
}
.submitButton {
	font-size: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	padding: 10px 15px;
	background-color: #3274d6;
	color: #FFFFFF;
	border-radius: 4px;
	border:none;
}
.submitButton:hover {
	background-color: #2f6ecb;
}
.form_text {
	color: #333333;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
.form_text a:link {
	color: #950000;
	text-decoration: underline;
}
.form_text a:visited {
	color: #950000;
}
.form_text a:hover {
	color: #CC0000;
}
.form_text_sm {
	color: #333333;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
}
.form_text span{
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
.form_text_red {
	color: #660000;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
.required {
	color:#F60;
	font-style:italic;
	font-size: 11px;
}
.red_form_text_sm {
	color: #990000;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.perfect_checkboxes {
	padding:25px;
	line-height:1.6;
}
.perfect_checkboxes input {
	vertical-align: middle;
}
.perfect_checkboxes span {
	vertical-align: middle;
	padding-left:2px;
}
/* START SORT ORDER for sorting based on <name>_Order field within given table */
#sortOrderBox {
	width:500px;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	padding-bottom:20px;
	color:#666666;
	margin: 40px auto;
}
#sortOrderBox h1 {
	font-size:16px;
	margin:3px;
	font-weight:normal;
}
#sortOrderBox p {
	font-size:12px;
	margin:10px;
}
#sortableList { 
	list-style-type: none; 
	margin: 0 auto; 
	padding: 0;
}
#sortableList li { 
	margin: 0 3px 3px 3px; 
	padding: 0.4em; 
	font-size: 12px; 
	border: 1px solid #999999;
	background-color: #F0F0F0;
	text-align:left;
	cursor:pointer;
}
/* END SORT ORDER for sorting based on <name>_Order field within given table */

/* START Diplay Table (click on header to sort / click on row to edit part */
#sortedtable{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border-collapse: collapse;
	margin: 0 auto;
}
#sortedtable th{
	font-weight: normal;
	padding: 10px 15px 10px 10px;
	background: #A6B3C4; 
	border-top: 4px solid #2F3947;
	border-bottom: 1px solid #FFFFFF;
	color: #333333; 
	cursor:pointer;
	text-decoration:underline;
	text-align:center;
}
.tablesorter-header-inner{
	font-size:0.85em;
}
#sortedtable td {
	padding: 10px 15px 10px 10px;
	background: #E1E6EC; 
	border-bottom: 1px solid #A6B3C4;
	color: #666;
	border-top: 1px solid transparent;
	cursor:pointer;
	vertical-align:text-top;
}
#sortedtable td a:link {
	text-decoration:underline;
	color: #990000;
}
#sortedtable td a:visited {
	text-decoration:underline;
	color: #990000;
}
#sortedtable td a:hover {
	text-decoration:underline;
	color: #CC0000;
}
#sortedtable tr:hover td {
	background: #BCC7D3;
	color: #333;
}



/* Need to convert all id="sortedtable" to class and then add unique ids to allow for sort (this gives the ability to have multipel sort tables on same page!) */
.sortedtable{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border-collapse: collapse;
	margin: 0 auto;
}
.sortedtable th{
	font-weight: normal;
	padding: 10px 15px 10px 10px;
	background: #A6B3C4; 
	border-top: 4px solid #2F3947;
	border-bottom: 1px solid #FFFFFF;
	color: #333333; 
	cursor:pointer;
	text-decoration:underline;
	text-align:center;
}
.sortedtable td {
	padding: 10px 15px 10px 10px;
	background: #E1E6EC; 
	border-bottom: 1px solid #A6B3C4;
	color: #666;
	border-top: 1px solid transparent;
	cursor:pointer;
	vertical-align:text-top;
}
.sortedtable td a:link {
	text-decoration:underline;
	color: #990000;
}
.sortedtable td a:visited {
	text-decoration:underline;
	color: #990000;
}
.sortedtable td a:hover {
	text-decoration:underline;
	color: #CC0000;
}
.sortedtable tr:hover td {
	background: #BCC7D3;
	color: #333;
}
#ui-datepicker-div { display: none; }

/* END  Diplay Table (click on header to sort / click on row to edit part */
.this-left {
  text-align: left !important;
}
.this-right {
  text-align: right !important;
}
.this-center {
  text-align: center !important;
}