body, td, input, select, option {
  font-family: Sans, Noto Sans, Tahoma;
  font-size: 18px;
}

body, td, input[type=text], input[type=password] {
  background-color: #000000;
  color: #cccccc;
}

input[type=text], input[type=password], textarea {
  background-color: #442200;
  color: #ff8800;
}

textarea {
  width: 100%;
}

input[type=submit], input[type=text], input[type=password], textarea {
  border: 1px solid #884400;
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 1px;
  margin-right: 2px;
}

input[type=text]:focus, input[type=password]:focus {
  border-color: #0696ed;
}

td.error {
  background-color: #880000;
  color: #ffffff;
  font-weight: bold;
  font-size: 22px;
}

td { padding: 4px; }
a { color: #8888dd; text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: separate; border-spacing: 0; border-radius: 8px 8px 0 0; overflow: hidden; }
th, td { border-bottom: 1px solid #442200; border-left: 1px solid #442200; border-right: 1px solid #442200; }
th.head { font-size: 24px; background-color: #442200; };
td.head { background-color: #442200; };
td.nowrap { white-space: nowrap; }
td.gpct { border: none; background: #008800; }
td.rpct { border: none; background: #880000; }
td.nbg { border: none; }
input::placeholder { color: #888844; }
input.modified  { border-color: #887755; background-color: #110600; }
input.submitted { border-color: #888822; background-color: #141400; }
input.confirmed { border-color: #557755; background-color: #001100; }
input.error { border-color: #cc5555; background-color: #440000; }
td.dark, span.dark, div.dark { color: #442200; }
td.darkorange, span.darkorange, div.darkorange { color: #665544; }
td.darkgreen, span.darkgreen, div.darkgreen { color: #446644; }
td.prvblock, span.prvblock { color: #cc88cc; }
td.small, span.small { font-size: 14px; }
td.smallgray, span.smallgray { color: #444444; font-size: 14px; }
li { margin-left: 16px; }
span.gray { color: #444444; }
div.main {
  padding-bottom: 32px;
}
div.footer {
  position: fixed;
  text-align: right;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #000000;
  height: 32px;
}
span.footertext {
  line-height: 32px;
  vertical-align: middle;
  color: #884400;
  padding-right: 8px;
}
input[type=submit]#btnSave, input[type=reset] {
  color: #ffffff;
  font-weight: bold;
  border: none;
  padding: 6px 12px;
}
//#btnSave { background-color: #bb5500; }
//input[type=submit]#btnSave:hover { background-color: #cc6622; }
//input[type=submit]#btnSave:active { background-color: #884400; border: none; }
select, input { background-color: #442200; color: #ffffff; border-color: #884400; border-radius: 8px; padding: 4px; border-style: solid; box-shadow: none; outline: none; border-width: 1px; }
div.divbtn {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 16px;
  padding: 0px;
  margin: 0px;
  height: 16px;
  line-height: 16px;
  cursor: pointer;
  background: #000000;
  color: #aaaaaa;
  font-size: 8px;
  border: 1px solid #884400;
}
div.divbtnr {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 16px;
  padding: 0px;
  margin-right: 2px;
  height: 16px;
  line-height: 16px;
  cursor: pointer;
  background: #000000;
  color: #442200;
  font-size: 8px;
  border: 1px solid #442200;
}
div.divbtn:hover, div.divbtnr:hover { background-color: #884400; color: #000000; }
div.divbtn:active, div.divbtnr:active { background-color: #442200; color: #000000; }
div#fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
div#video {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 600;
  max-height: 360;
  margin-left: -300px;
  margin-top: -180px;
  z-index: 1002;
  overflow: visible;
}
input[type="file"] {
    display: none;
}
.custom-file {
    background-color: #442200;
    border: 1px solid #884400;
    border-radius: 8px;
    color: #ffffff;
    display: inline-block;
    padding: 4px 12px;
    cursor: pointer;
}
/* The ccheck */
.ccheck {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-top: 2px;
  margin-bottom: -10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 8px;
  border: 1px solid #884400;
  background-color: #442200;
}

.roundmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 13px;
  border: 1px solid #884400;
  background-color: #442200;
}

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

.ccheck:hover input ~ .roundmark {
  background-color: #884400;
}

input:hover, select:hover, .custom-file:hover {
  background-color: #884400;
}

input:active, select:active, .custom-file:active {
  background-color: #331800;
}

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

.ccheck:hover input:checked ~ .roundmark {
  background-color: #884400;
}

/* When the checkbox is checked, add a blue background */
.ccheck input:checked ~ .checkmark {
  background-color: #442200;
}

.ccheck input:checked ~ .roundmark {
  background-color: #442200;
}

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

.roundmark:after {
  content: "";
  position: absolute;
  display: none;
}

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

.ccheck input:checked ~ .roundmark:after {
  display: block;
}

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

.ccheck .roundmark:after {
  left: 4px;
  top: 4px;
  width: 15px;
  height: 15px;
  border: solid #ff8800;
  border-width: 1px;
  border-radius: 10px;
  background-color: #ff8800;
}

.tooltip {
//  height: 100%;
//  width: 100%;
//  position: relative;
//  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  min-width: 160px;
  background-color: #44220088;
  color: #fff;
  text-align: center;
  border: 1px solid #ff880088;
  border-radius: 6px;
  padding: 4px 0;

  display: block;
  position: absolute;
  z-index: 1;
  margin-top: 12px;
  margin-left: -6px;
//  top: 16px;
//  right: 105%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 12px;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #ff8800 transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}