a:link
{
	color: rgb(51, 51, 51);
}
a:active
{
	color: rgb(255, 0, 0);
}
a:visited
{
	color: rgb(102, 102, 102);
}

body 
{
font-family:Arial;
outline:none;
}
ul 
{
font-family:Arial;
}
table 
{
font-size:12pt; 
font-family:Arial
}

textarea
{
font-size:10pt; 
font-family:Arial;
}

select
{
font-size:10pt; 
font-family:Arial;
}

input
{
font-size:10pt; 
font-family:Arial;
}
input[type="submit"],
input[type="button"]
 {
    -webkit-appearance: push-button;
    user-select: none;
    white-space: pre;
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
    border-radius: 4px;
    font-size:12pt; 
}

form {
	margin-block-end: 0px;
}

form.quickstart {
	margin-block-end: 10px;
}
td.form11
{
color: #222222;
padding-top: 1px;
padding-bottom: 1px;
}
td.form12
{
color: #222222;
padding-top: 1px;
padding-bottom: 1px;
}
td.form21
{
color: #222222;
padding-top: 1px;
padding-bottom: 1px;
}
td.form22
{
color: #222222;
padding-top: 1px;
padding-bottom: 1px;
}
table.form
{
padding-bottom: 10px; padding-left: 4px; padding-right: 0px;
}
h1
{
font-size:15pt; 
font-family:Arial
}
h2
{
font-size:14pt; 
font-family:Arial
}
h3
{
font-size:13pt; 
font-family:Arial
}
h4
{
font-size:12pt; 
font-family:Arial
}
h5
{
font-size:12pt; 
font-family:Arial
}
h6
{
font-size:12pt; 
font-family:Arial
}

.countdowndiv {
position:absolute; 
font-size: 9px; 
visibility:visible;
z-index: -1; 
LEFT: 20px; 
TOP: 0
} 

#outer-dropzone {
  height: 600px;
  touch-action: none;
}
.outer-dropzone {
  background-color: #ccc;
  width: 100%;
  border-radius: 4px;
  margin: 10px auto 30px;
  padding: 10px;
}
.outer-dropzone td {
  vertical-align : middle;
}
.dropzone {
  height: 80px;
  width: 440px;
  float: left;
  background-color: #ccc;
  border: dashed 4px;
  border-radius: 4px;
  margin: 10px auto 10px;
  padding: 10px;
  transition: background-color 0.3s;
}

.dropzone  input {
 display:none;
}
.drop-active {
  border-color: #aaa;
}

.drop-target {
  background-color: #29e;
  border-color: #fff;
  border-style: solid;
}

.select-target {
  background-color: #87CEFA;
  border-color: #fff;
  border-style: solid;
}

.drag-drop {
  display: inline-block;
  width: 400px;
  height: 70px;
  padding: .2em 0.2em;
  color: #fff;
  background-color: #29e;
  border: solid 2px #fff;
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  transition: background-color 0.3s;
}

.drag-drop.can-drop {
  color: #000;
  background-color: #4e4;
}


/* Yes/No Radio Buttons */
      /* The container */
      .yes_no_container {
      position: relative;
      padding-left: 30px;
      padding-right: 10px;
      padding-top: 5px;
      padding-bottom: 5px;
      margin-bottom: 5px;
      cursor: pointer;
      font-size: 12px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  border: 1px solid gray;
  border-radius: 25px;
      }
      /* Hide the browser's default radio button */
      .yes_no_container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      }
      /* Create a custom radio button */
      .checkmark {
      position: absolute;
      top: 2px;
      left: 2px;
      height: 20px;
      width: 20px;
      background-color: #B5B5B5;
      border-radius: 50%;
      }
      /* On mouse-over, add a gray background color */
      .yes_no_container:hover input ~ .checkmark {
      background-color: #767171;
      }
      /* When the radio button is selected, add a background color*/
      .yes_no_container input:checked ~ .checkmark {
      background-color: #5BB974;
      }
      /* When the radio button is selected and advanced option, add a background color*/
      .yes_no_container input:disabled ~ .checkmark {
      background-color: orange;
      }
      /* Create the indicator (the dot/circle - hidden when not checked) */
      .checkmark:after {
      content: "";
      position: absolute;
      display: none;
      }
      /* Show the indicator (dot/circle) when checked */
      .yes_no_container input:checked ~ .checkmark:after {
      display: block;
      }
      /* Style the indicator (dot/circle) */
      .yes_no_container .checkmark:after {
      top: 6px;
      left: 6px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #eeeeee;
      }



/* Form without group form 12 */

td.form12 {
	padding: 5px;
	height: 25px;
	width: auto;
	font-size: 14pt;
}

td.form12:nth-child(3n+1) {
	width:350px;
}

td.form12:nth-child(3n+2) {
	min-width:505px;
	max-width:525px;
	vertical-align:top;
}


td.form12:nth-child(3n+0) {
	width: 25px;
}

td.form12 input {
	padding: 5px;
	font-size: 0.85em;
	width:95%;
	max-width:95%;
	border-radius: 4px;
}

td.form12 textarea {
	padding: 5px;
	font-size: 0.85em;
	width:95%;
	max-width:95%;	
	border-radius: 4px;
}

td.form12 select {
	padding: 2px;
	height: 25px;
	font-size: 0.85em;
	border-radius: 4px;
	max-width:95%;
	width:95%;
}

td.form12 select[multiple] {
	height: auto;
	max-height: 200px;
}

td.form12 caption {
	text-align: left;
	font-size: 14pt;
	font-weight: bold;
	background-color: #767171;
	color: #FFFFFF;
	border-radius: 4px;
	padding: 4px;
}

tr:nth-child(even) td.form12 {
	background: #f0f0f0;
}



/* Form without group form 21 */

td.form21 {
	padding: 5px;
	height: 25px;
	width: auto;
	font-size: 14pt;
}

td.form21:nth-child(3n+1) {
	width:350px;
}

td.form21:nth-child(3n+2) {
	min-width:505px;
	max-width:600px;
	vertical-align:top;
}


td.form21:nth-child(3n+0) {
	width: 25px;
}

td.form21 input {
	padding: 5px;
	font-size: 0.85em;
	width:90%;
	max-width:90%;
	border-radius: 4px;
}

td.form21 textarea {
	padding: 5px;
	font-size: 0.85em;
	width:90%;
	max-width:90%;	
	border-radius: 4px;
}

td.form21 select {
	padding: 2px;
	height: 25px;
	font-size: 0.85em;
	border-radius: 4px;
	max-width:90%;
	width:90%;
}


td.form21 select[multiple] {
	height: auto;
	max-height: 200px;
}

td.form21 caption {
	text-align: left;
	font-size: 14pt;
	font-weight: bold;
	background-color: #767171;
	color: #FFFFFF;
	border-radius: 4px;
	padding: 4px;
}

tr:nth-child(even) td.form21 {
	background: #f0f0f0;
}



/* Form without group form 22 */


td.form22 {
	padding: 5px;
	height: 25px;
	width: auto;
	font-size: 14pt;
}

td.form22:nth-child(3n+1) {
	width:340px;
}

td.form22:nth-child(3n+2) {
	min-width:505px;
	max-width:600px;
	vertical-align:top;
}


td.form22:nth-child(3n+0) {
	width: 25px;
}

td.form22 input {
	padding: 5px;
	font-size: 0.85em;
	width:90%;
	max-width:90%;
	border-radius: 4px;
}

td.form22 textarea {
	padding: 5px;
	font-size: 0.85em;
	width:90%;
	max-width:90%;	
	border-radius: 4px;
}

td.form22 select {
	padding: 2px;
	height: 25px;
	font-size: 0.85em;
	border-radius: 4px;
	max-width:90%;
	width:90%;
}

td.form22 select[multiple] {
	height: auto;
	max-height: 200px;
}


td.form22 caption {
	text-align: left;
	font-size: 14pt;
	font-weight: bold;
	background-color: #767171;
	color: #ffffff;
	border-radius: 4px;
	padding: 4px;
}

tr:nth-child(even) td.form22 {
	background: #f0f0f0;
}







/* EXAMPLE FORM GROUP */      
table.fm_group {
	width: 900px;
	padding: 2px;

}
.fm_group td {
	padding: 5px;
	height: 25px;
	width: auto;
	font-size: 14pt;
}

.fm_group td:nth-child(3n+1) {
	width:350px;
}

.fm_group td.form22:nth-child(3n+1) {
	width:340px;
}

.fm_group td:nth-child(3n+2) {
	max-width:525px;
	vertical-align:top;
}


.fm_group td:nth-child(3n+0) {
	width: 25px;
}

.fm_group input {
	padding: 5px;
	font-size: 0.85em;
	width:95%;
	max-width:95%;
	border-radius: 4px;
}

.fm_group textarea {
	padding: 5px;
	font-size: 0.85em;
	width:95%;
	max-width:95%;	
	border-radius: 4px;
}

.fm_group select {
	padding: 2px;
	height: 25px;
	font-size: 0.85em;
	border-radius: 4px;
	max-width:95%;
	width:95%;
}
.fm_group caption {
	text-align: left;
	font-size: 14pt;
	font-weight: bold;
	background-color: #767171;
	color: #FFFFFF;
	border-radius: 4px;
	padding: 8px;
	margin-bottom: 8px;
	cursor: pointer;
}

.fm_group caption[data-kmx-form_items_group_status="closed"]:before {
    content: "+";
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    width: 882px;
    height: 16px;
    font-size: 24px;
    font-weight: bold;
    position: absolute;

}

.fm_group caption[data-kmx-form_items_group_status="open"]:before {
    content: "-";
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    width: 882px;
    height: 16px;
    font-size: 24px;
    font-weight: bold;
    position: absolute;

}

.fm_group tr:nth-child(even) {
	background: #F0F0F0;
}

.fm_group tr:nth-child(even) td{
	background: none;
}

.fm_group tr:last-child td {
   	/* border-bottom: 1.0em solid #ffffff; */
	padding-bottom: 1.0em;
}

.fm_group tr:last-child td.slide11 { padding-bottom: 0; }
.fm_group tr:last-child td.slide12 { padding-bottom: 0; }
.fm_group tr:last-child td.slide21 { padding-bottom: 0; }
.fm_group tr:last-child td.slide22 { padding-bottom: 0; }

.fm_courses caption {
	background-color: rgb(191,81,76);
	color: #FFFFFF;
}

.fm_content caption {
	background-color: rgb(159,195,92);
	color: #FFFFFF;
}

.fm_people caption {
	background-color: rgb(131,106,165);
	color: #FFFFFF;
}

.fm_reports caption {
	background-color: rgb(76,179,205);
	color: #FFFFFF;
}

.fm_setup caption {
	background-color: rgb(247,150,69);
	color:#FFFFFF;
	
}