/* ******************************************************************

	GUI CSS Includes submenu/menu, buttons, forms
	Created: 8/31/2020
	Modified:
	12/20/2020:	Change form style/size
	1/8/2024:	Add my_container and my_content

********************************************************************* */
/* menu must be inside table for width */
.navigation {
  width: auto;
}

/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
  list-style: none;
  /* list-style-type: square; */
  /* list-style-image: url(../images/icons/report_edit.png); */
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
  display: block;
  background-color: #CCC;
  text-decoration: none;
  /* padding: 10px; */
  padding: 7px;
  color: #000;
}

.mainmenu .current {
	font-family: 'Helvetica', 'Arial', sans-serif;
    color: #FFFFFF;
    font-weight: bold;
	background-color: #707070;
}

/* add hover behaviour */
.mainmenu a:hover {
	color: #000000;
    background-color: #E5E5E5;
}

/*
  when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
	display: block;
	max-height: 200px;
}

.mainmenu li a .submenu .current {
	display: block;
	max-height: 200px;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
	background-color: #AAA;
}

/*
  hover behaviour for links inside .submenu
*/
.submenu a:hover {
	background-color: #888;
}

.submenu a:hover .current {
	color: #000000;
}

/*
  this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
	/* overflow: hidden; */
	max-height: 200px;
	/* -webkit-transition: all 0.5s ease-out; */
	text-indent: 8px;
}

/* ******************************************************************

  colored buttons

********************************************************************* */
.greenButton {
	box-shadow:inset 0px 1px 0px 0px #a4e271;
	background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
	background-color: #89c403;
	border-radius:6px;
	border:1px solid #74b807;
	display:inline-block;
	cursor:pointer;
	color: #ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:10px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528009;
}
.greenButton:hover {
	background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
	background-color:#77a809;
}
.greenButton:active {
	position:relative;
	top:1px;
}
.greenButton:disabled,
.greenButton[disabled] {
	box-shadow:inset 0px 0px 0px 0px #999999;
	border: 1px solid #999999;
	background:none #cccccc;
	background-color: #cccccc;
	color: #666666;
	cursor:not-allowed;
}

.redButton {
	box-shadow:inset 0px 1px 0px 0px #f5978e;
	background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
	background-color:#f24537;
	border-radius:6px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:10px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.redButton:hover {
	background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
	background-color:#c62d1f;
}
.redButton:active {
	position:relative;
	top:1px;
}
.redButton:disabled,
.redButton[disabled]{
	box-shadow:inset 0px 0px 0px 0px #999999;
	border: 1px solid #999999;
	background:none #cccccc;
	background-color: #cccccc;
	color: #666666;
	cursor:not-allowed;
}

.yellowButton {
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:10px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.yellowButton:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#c62d1f;
}
.yellowButton:active {
	position:relative;
	top:1px;
}
.yellowButton:disabled,
.yellowButton[disabled]{
	box-shadow:inset 0px 0px 0px 0px #999999;
	border: 1px solid #999999;
	background:none #cccccc;
	background-color: #cccccc;
	color: #666666;
	cursor:not-allowed;
}

/* ******************************************************************

  forms

********************************************************************* */
.form-style-10 {
	width:auto;
	padding:10px;
	margin:0px auto;
	background: #FFF;
	border-radius: 10px;
	-webkit-border-radius:10px;
	-moz-border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
.form-style-10 .inner-wrap {
	padding: 10px;
	/* padding: 2px; */
	background: #F8F8F8;
	border-radius: 6px;
	margin-bottom: 15px;
}
.form-style-10 h1{
	background: #000000;
	/* padding: 20px 30px 15px 30px; */
	padding: 5px 10px 5px 10px;
	margin: -10px -10px 10px -10px;
	/*
	border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	*/
	color: #fff;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
	/* font: bold 20px 'Bitter', serif; */
	font: bold 20px Arial;
	-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
	-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
	box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
	border: 0px solid #666666;
}

.form-style-10 h1 > span{
	/* display: block; */
	margin-top: 2px;
	/* font: 20px Arial, Helvetica, sans-serif; */
}

.form-style-10 h1 > img{
	display: inline;
}
.form-style-10 label {
	display: block;
	font: 16px Arial, Helvetica, sans-serif;
	color: #000;
	margin-bottom: 15px;
}
.form-style-10 input[type="text"],
.form-style-10 input[type="date"],
.form-style-10 input[type="datetime"],
.form-style-10 input[type="email"],
.form-style-10 input[type="number"],
.form-style-10 input[type="search"],
.form-style-10 input[type="time"],
.form-style-10 input[type="url"],
.form-style-10 input[type="password"],
.form-style-10 textarea,
.form-style-10 select {
	display: block;
	font-size: 16px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	/* padding: 8px; */
	padding:2px;
	border-radius: 6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border: 2px solid #fff;
	box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
	-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
	-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}

.form-style-10 .section{
	font: 20px, serif;
	color: #444444;
	margin-bottom: 5px;
}
.form-style-10 .section span {
	background: #444444;
	padding: 5px 10px 5px 10px;
	position: absolute;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border: 4px solid #fff;
	font-size: 16px;
	/* margin-left: -45px; */
	margin-left: -38px;
	color: #fff;
	margin-top: -3px;
}

/*
.form-style-10 input[type="button"], 
.form-style-10 input[type="submit"]{
	background: #444444;
	padding: 8px 20px 8px 20px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	color: #fff;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
	font: normal 30px 'Bitter', serif;
	-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
	-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
	box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
	border: 1px solid #666666;
	font-size: 15px;
}
.form-style-10 input[type="button"]:hover, 
.form-style-10 input[type="submit"]:hover{
	background: #000000;
	-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
	-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
	box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}
*/

/* ******************************************************************

  radio button

********************************************************************* */
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  /* font-size: 22px; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #CCC;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #AAA;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #777777;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* checkmark button */
/* The container */
.checkcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.redcheckcheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #CCC;
}

.greencheckcheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #CCC;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkcheckmark {
  background-color: #AAA;
}
.checkcontainer:hover input ~ .redcheckcheckmark {
  background-color: #FAA;
}
.checkcontainer:hover input ~ .greencheckcheckmark {
  background-color: #AFA;
}

/* On mouse-over and checked, add a grey background color */
.checkcontainer:hover input:checked ~ .checkcheckmark {
	background-color: #AAA;
}
.checkcontainer:hover input:checked ~ .redcheckcheckmark {
	background-color: #FAA;
}
.checkcontainer:hover input:checked ~ .greencheckcheckmark {
	background-color: #AFA;
}

/* When the checkbox is checked, add a gray background */
.checkcontainer input:checked ~ .checkcheckmark {
  background-color: #777777;
}
.checkcontainer input:checked ~ .redcheckcheckmark {
  background-color: #FF5555;
}
.checkcontainer input:checked ~ .greencheckcheckmark {
  background-color: #55DD55;
}

/* When the checkbox is selected (focus), add a gray background */
.checkcontainer input:focus ~ .checkcheckmark {
	box-shadow: 0 0 0 2px rgba(123, 123, 123, .5);
}
.checkcontainer input:focus ~ .redcheckcheckmark {
	box-shadow: 0 0 0 2px rgba(123, 0, 0, .5);
}
.checkcontainer input:focus ~ .greencheckcheckmark {
	box-shadow: 0 0 0 2px rgba(0, 123, 0, .5);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkcheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.redcheckcheckmark:after {
  content: "";
  position: absolute;
  display: none;
}
.greencheckcheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkcheckmark:after {
  display: block;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .redcheckcheckmark:after {
  display: block;
}
.checkcontainer input:checked ~ .greencheckcheckmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkcheckmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Style the checkmark/indicator */
.checkcontainer .redcheckcheckmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.checkcontainer .greencheckcheckmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ******************************************************************

  tables

********************************************************************* */
.nicetable {
	font-family: Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 100%;
}

.nicetable tr {
	border: 1px solid #ddd;
	padding: 8px;
}

.nicetable td {
	border: 1px solid #ddd;
	padding: 8px;
	font-size: 13px;
	white-space: nowrap;
}

/*
.nicetable input[type="text"] {
	display: block;
	font-size: 13px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	padding: 0px;
	border-radius: 6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border: 2px solid #fff;
	box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
	-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
	-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}
*/

.nicetable tr:nth-child(even) td {
	background-color: #f2f2f2;
}

/*
.nicetable tr:nth-child(odd) td {
	background-color: #FFFFFF;
}
*/

.nicetable tr:hover td{
	background-color: #B2B2B2;
	/* color: #FF0000 !important; */
	/* font-weight: bold; */
}

.nicetable th {
	padding-top: 8px;
	padding-bottom: 8px;
	text-align: left;
	background-color: #3A3A3A;
	color: white;
	padding: 8px;
	border: 1px solid #ddd;
}

.nicetable td a:link {
	color: #000000;
	text-decoration: none;
}

.nicetable td a:visited {
	color: #696969;
}

.nicetable td a:hover {
  border-bottom: 1px solid;
  /* background: #CDFEAA; */
}

/* ******************************************************************

  Spinner Overlay

********************************************************************* */
#overlaywrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Aligns children (spinner and text) in a column */
    z-index: 1000;
}

.spinner {
    display: inline-block;
    width: 80px;
    height: 80px;
    position: relative;
    margin-bottom: 20px; /* Adds space between the spinner and the text */
}

.spinner:before, .spinner:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border-radius: 50%;
    border: 6px solid transparent;
}

.spinner:before {
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-width: 10px;
    border-top-color: #ffdd00;
    border-bottom-color: #ffdd00;
    animation: spin 1.2s linear infinite;
}

.spinner:after {
    top: 16px;
    left: 16px;
    width: 48px;
    height: 48px;
    border-left-color: #ff9500;
    border-right-color: #ff9500;
    animation: spin 0.5s linear infinite;
    animation-delay: -0.6s;
}

#overlayMessage {
	font-size: 18px;
	font-weight: bold;
	padding: 4px;
	color:#000;
	background-color:#AAA;
	z-index: 9999;
}

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

/* ******************************************************************

  Non-Overlay tiny Spinner

********************************************************************* */
.tinyspinner {
	border: 5px solid #EAEAEA;
	border-radius: 50%;
	border-top: 5px solid #007A59;
	width: 16px;
	height: 16px;
	animation: spinner .5s linear infinite;
  }
  
  @keyframes spinner {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }