/*
#1a181b very dark
#564d65 purple
#3e8989 blue
#2cda9d light green
#caffd0 #136f63 light / dark
#a71d31 red   #ff595e light red
#e0e0e2 very light gray   #e0fbfc even lighter
#0b5351 dark green
#e5f2c9 offwhite yellow

possible brown colors
brown 3D1B12
gray A39D91
offwhite F1E9DB
lightblue 5DB7DE
black 07020D


		--main-bg-color:  #f5f5f5;
		--main-alt-bg-color:  #e5f2c9;
		--main-txt-color: #000;
		--main-highlight-color: #caffd0;
		--main-red-color: #2cda9d;
		--main-link-color: #0b5351;
		--main-alink-color: #3e8989;
		--main-accent-color: #3e8989;
		--main-safety-orange: #ff7900;
		
		
		--main-bg-color:  #3D1B12;
		--main-alt-bg-color:  #e5f2c9;
		--main-txt-color: #000;
		--main-highlight-color: #caffd0;
		--main-red-color: #2cda9d;
		--main-link-color: #0b5351;
		--main-alink-color: #3e8989;
		--main-accent-color: #3e8989;
		--main-safety-orange: #ff7900;
		
		purple 827191
		
		
		
		
		--body-color: #3D1B12;
		--body-img: url(medwood.jpg);
		--dcontainer-bg: #3D1B12;
		--container-bg: #A39D91;
		--container-img: url(brushed30.jpg);
		--container-border: #F1E9DB;
		--text-color: #07020D;
		--link-color: #0b5351;
		--vlink-color: #0b5351;
		--tbody-color: #eee;
		--tbodyborder-color: #A39D91;
		--fieldtitle-color: #827191;
		--textarea-color: #fff;
		--highlight-color: #5DB7DE;
		--pulse-color: #5DB7DE;
		--button-border: #A39D91;
		--button-color: #F1E9DB;
		--button-text: #0b5351;
		--selection-color: #5DB7DE;
		--safety-orange: #ff7900;
*/
:root {
		
		--body-color: #3D1B12;
		--body-img: url(medwood.jpg);
		--dcontainer-bg: #3D1B12;
		--container-bg: #999;
		--container-img: url(brushed30.jpg);
		--container-border: #aaa;
		--text-color: #07020D;
		--link-color: #0b5351;
		--vlink-color: #0b5351;
		--tbody-color: #eee;
		--tbodyborder-color: #A39D91;
		--fieldtitle-color: #827191;
		--detail-border: #372248;
		--textarea-color: #fff;
		--highlight-color: #5DB7DE;
		--pulse-color: #5DB7DE;
		--button-border: #A39D91;
		--button-color: #E1E3E5;
		--button-text: #0b5351;
		--selection-color: #5DB7DE;
		--safety-orange: #ff7900;
		--gear-color1: #aaa;
		--gear-color2: #999;
		
}

* {
	box-sizing: border-box;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  color: var(--text-color);
  /*font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
  font-family: Tahoma, Arial, Helvetica, sans-serif;*/
  font-size: 16px;
 line-height: 1.5;
  padding: 2px;
  margin: auto;
  max-width: 60em;
  background: var(--body-color);
  background-image: var(--body-img);
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

table {
  /*margin-bottom: 2em;*/
  width: 100%;
  border: 1px solid gray;
}

tbody {
	background: var(--tbody-color);
}

table thead th, table.dataTable thead th, table.dataTable tbody th, table tfoot th, table.dataTable tfoot th {
  /*padding: .2em 1em;*/
  padding: 0;
  background-color: var(--fieldtitle-color);
  border-spacing: 0;
  /*border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;*/
}

table td {
  padding: .2em 1em;
  /*border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;*/
  vertical-align: top;
  /*background-color: var(--tbody-color);*/
}

td.details-control {
    /*background: url('details_open.png') no-repeat center center;*/
    cursor: pointer;
	overflow: hidden;
}
tr.shown td.details-control {
    /*background: url('details_close.png') no-repeat center center;*/
}

.hideme {
	width: 0;
	margin: -999em;
}

.dataTables_wrapper .dataTables_info {
	padding-top: unset;
}

.dataTables_wrapper .dataTables_paginate {
	padding-top: unset;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 0em .5em;
}
.material-icons {
	font-size: 21px;
	vertical-align: middle;
}

input {
  background: var(--textarea-color);
}

input[type=text] {
  border-radius: 2px;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  background: var(--textarea-color);
}

textarea {
  width: 100%;
  border-radius: 2px;
  resize: vertical;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  background: var(--textarea-color);
}

select {
  border-radius: 2px;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  background: var(--textarea-color);
}

.dRow {
	background-color: var(--fieldtitle-color);
  border-top: 1px solid var(--detail-border);
  border-left: 1px solid var(--detail-border);
  border-right: 1px solid var(--detail-border);
}
.eRow {
  background-color: var(--tbody-color);
  border-top: 1px solid var(--detail-border);
  border-left: 1px solid var(--detail-border);
  border-right: 1px solid var(--detail-border);
}
.dRow:last-of-type, .eRow:last-of-type {
  border-bottom: 1px solid var(--detail-border);
}
.d25 {
  float: left;
  min-width: 11em;
  text-align: right;
  padding: 3px 12px 3px 2px;
}
.d75 {
  /*float: left;*/
  margin-left: 11em;
  max-width: 100%;
  background-color: var(--tbody-color);
  padding: 3px 0px 3px 6px;
}
.d50 {
  float: left;
  width: 49%;
  margin: 2px;
  background-color: var(--tbody-color);
  padding: 3px;
}
.e25 {
  float: left;
  min-width: 11em;
  text-align: right;
  padding: 3px 12px 3px 2px;
}
.e75 {
  /*float: left;*/
  margin-left: 11em;
  max-width: 100%;
	background-color: var(--fieldtitle-color);
  padding: 3px 0px 3px 6px;
}
.dRow:after, .eRow:after {
  content: "";
  display: table;
  clear: both;
}
.compsame {
	border-color: green;
}
.compdiff {
	border-color: red;
}
.cRow {
  border-top: 1px solid var(--detail-border);
  border-left: 1px solid var(--detail-border);
  border-right: 1px solid var(--detail-border);
}
.CL1 {
	background-color: var(--container-bg);
  float: left;
  width: 75%;
  text-align: center;
  padding: 3px 12px 3px 2px;
}
.CL2 {
  float: left;
  width: 75%;
  text-align: left;
  background-color: var(--tbody-color);
  padding: 3px 0px 3px 6px;
}
.CR1 {
	background-color: var(--container-bg);
  float: right;
  width: 75%;
  text-align: center;
  padding: 3px 12px 3px 2px;
}
.CR2 {
  float: right;
  width: 75%;
  text-align: right;
  background-color: var(--main-bg-color);
  padding: 3px 0px 3px 6px;
}

.navcont {
	width: 100%;
	display: flex;
}
.navflex {
	border: 2px solid var(--gear-color2);
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: var(--button-color);
	width: 100%;
}

.navbar {
  /*border-top: 1px solid var(--button-border);
  border-bottom: 1px solid var(--button-border);*/
  flex-grow: 1;
  text-align: center;
  align-self: center;
  color: var(--button-text);
  padding: 0px 4px;/*maybe switch back to 16px*/
  /*display: table-cell;*/
  font-size: 16px;
  line-height: 1.25;
  height: 40px;
  background: var(--button-color);
  background-image: linear-gradient(var(--button-color), var(--button-color), var(--gear-color1));
/*font-family: 'Kurale', serif;*/
font-family: 'Marko One', serif;
/*font-family: 'Salsa', cursive;*/
}
.navbar a {
  color: var(--button-text);
  font-size: 16px;
  line-height: 1.25;
font-family: 'Marko One', serif;
}
.navbar ~ .navbar {
	border-left: 1px solid var(--gear-color2);
}
.navbarleft {
  padding: 2px 12px;/*maybe switch back to 16px*/
  font-size: 16px;
  line-height: 1;
  border-radius: 50% 0 0 50%;
  border-left: 1px solid var(--gear-color2);
  border: unset;
  background: unset;
  max-width: 1.25em;
}
.navbarright {
  padding: 2px 12px;/*maybe switch back to 16px*/
  font-size: 16px;
  line-height: 1;
  border-radius: 0 50% 50% 0;
  border-right: 1px solid var(--gear-color2);
  border: unset;
  background: unset;
  max-width: 1.25em;
}

.navbar:hover {
  background-color: var(--gear-color2);
}

.navhid {
	visibility: hidden;
	position: relative;
	z-index: 1;
	background-color: var(--gear-color1);
	line-height: 2;
	/*margin-top: 0.25em;*/
}
.navbar:hover .navhid {
	visibility: visible;
}
/*
.navhid:not(:target) {
	display: none;
}
*/

.faq_q {
	font-weight: bold;
}
.faq_a {
	display: none;
}

button {
  border: 1px solid var(--button-border);
  background-color: var(--button-color);
  color: var(--button-text);
  padding: 2px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 16px;
 /* line-height: 1;*/
}
button:hover {
  background-color: var(--highlight-color);
}

.cbutton {
	display: block;
  margin: 2px auto;
  text-align: center;
}

.wbutton {
	width: 100%;
	margin: 0px;
	border-radius: 16px;
}

.fbutton {
/*used to make A tags buttons, or to have an inline button*/
  border: 1px solid var(--button-border);
  background-color: var(--button-color);
  color: var(--button-text);
  padding: 2px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 16px;
  line-height: 1;
}
.fbutton:hover {
  background-color: var(--highlight-color);
}

.logincollapsible {
  background-color: var(--container-bg);
  border: none;
  color: white;
  padding: 2px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 8px;
  font: initial;
}

.logincollapsible:hover {
	  background-color: var(--highlight-color);
}

.vcontainer {
	  padding: 0 8px;
  display: none;
  overflow: hidden;
  background-color: var(--container-bg);
  border-radius: 16px;
}

.questionpreindex {
	display: inline;
}
.qanda {
  text-indent: -16px;
  margin-left: 16px;
}

.qcontainer {
      border-left: 8px solid var(--safety-orange);
    border-right: 8px solid var(--safety-orange);
      border-top: 2px solid var(--safety-orange);
    border-bottom: 2px solid var(--safety-orange);
  border-radius: 24px;
  margin-top:  1em;
}
.bcontainer {
	border: 1px solid var(--container-border);
  border-radius: 16px;
  margin:  0.3em;
  background-color: var(--container-bg);
}
.econtainer {
	border: 1px solid var(--container-border);
  border-radius: 1.5em;
/*  margin:  0.3em;*/
  background-color: white;
  padding: .5em;
  padding-top: 0;
}
.dcontainer {
/*	border: 1px solid var(--container-border);*/
  border-radius: 1.5em;
  margin-top:  1em;
  padding: 4px;
  background-color: var(--dcontainer-bg);
  background-image: url(brushed30.jpg);
}

.pulser {
  will-change: auto;
  animation: pulse 2s steps(18) infinite;
}

@keyframes pulse {
	50% { background-color: var(--pulse-color); }
}

.writeonly {
}


.pulse-button {
  will-change: auto;
  box-shadow: 0 0 0 0 rgba(93, 183, 222, 0.8);
  -webkit-animation: pulseb 1.4s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulseb 1.4s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulseb 1.4s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulseb 1.5s infinite steps(18);
}

@-webkit-keyframes pulseb {to {box-shadow: 0 0 0 30px rgba(93, 183, 222, 0);}
30% {background-color: rgba(93, 183, 222, 1);} }
@-moz-keyframes pulseb {to {box-shadow: 0 0 0 30px rgba(93, 183, 222, 0);}
30% {background-color: rgba(93, 183, 222, 1);} }
@-ms-keyframes pulseb {to {box-shadow: 0 0 0 30px rgba(93, 183, 222, 0);}
30% {background-color: rgba(93, 183, 222, 1);} }
@keyframes pulseb {to {box-shadow: 0 0 0 30px rgba(93, 183, 222, 0);}
30% {background-color: rgba(93, 183, 222, 1);} }


.pulse-button:hover 
{
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}

.slideFromRight {
  -webkit-animation: slide_r 1s ease-out 0.25s 1 normal forwards;
  -moz-animation: slide_r 1s ease-out 0.25s 1 normal forwards;
  -ms-animation: slide_r 1s ease-out 0.25s 1 normal forwards;
  animation: slide_r 1s ease-out 0.25s 1 normal forwards;
}
@-webkit-keyframes slide_r {
  0%   {left:0px; top:0px;}
  100% {left:-100px; top:0px;}
}
@-moz-keyframes slide_r {
  0%   {left:0px; top:0px;}
  100% {left:-100px; top:0px;}
}
@-ms-keyframes slide_r {
  0%   {left:0px; top:0px;}
  100% {left:-100px; top:0px;}
}
@keyframes slide_r {
  0%   {left:0px; top:0px;}
  100% {left:-100px; top:0px;}
}

.message {
	color: red;
	font-size: 32px;
	font-style: italic;
}

fieldset {
	margin-top: .5em;
	border-radius: 16px;
	border-width: 2px;
	border-style: solid;
	border-color: var(--container-border);
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: .5em;
	padding-inline-end: .5em;
	padding-block-start: .5em;
	padding-block-end: .5em;
	background: var(--container-bg);
}

legend {
	border-radius: 16px;
	border: 1px solid var(--container-border);
	padding: 4px 8px 4px 8px;
	line-height: 1;
	background: var(--tbody-color);
}

.indexqdetail {
	  padding: 0 18px;
  display: none;
  overflow: hidden;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:visited {
  color: var(--vlink-color);
}

a:hover {
  color: var(--highlight-color);
}

a:active {
  color: var(--highlight-color);
}

a:focus {
  outline: thin dotted;
}

*::-moz-selection {
  background: rgba(255, 255, 0, 0.3);
  color: var(--selection-color);
}

*::selection {
  background: rgba(255, 255, 0, 0.3);
  color: var(--selection-color);
}

a::-moz-selection {
  background: rgba(255, 255, 0, 0.3);
  color: var(--selection-color);
}

a::selection {
  background: rgba(255, 255, 0, 0.3);
  color: var(--selection-color);
}

p {
  margin: 0.5em 0;
}

.day-vert {
	background-color: var(--tbody-color);
	display: block;
	width: 100%;
	vertical-align: top;
	margin: .5em 0 .5em 0;
	border-radius: 12px;
}


.daynum-vert {
	margin: 0;
	font-size: 1.5em;
	display: inline;
	vertical-align: top;
}
.dayhead-vert {
	width: 100%;
	background-color: var(--fieldtitle-color);
	vertical-align: top;
	border-radius: 12px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-color);
  line-height: 125%;
  margin: .5em 0;
  font-weight: normal;
/*font-family: 'Kurale', serif;*/
font-family: 'Marko One', serif;
/*font-family: 'Salsa', cursive;*/
}

h4, h5, h6 {
  font-weight: bold;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 0.9em;
}

hr {
  display: block;
  height: 1px; /* adds space between the lines */
  border: none; /* 0; */
  border-top: 1px solid #aaa; /* #aaa; */
  border-bottom: 1px solid #eee; /* #eee; */
  margin: 2em 15%;
  padding: 0;
}

b, strong {
  font-weight: bold;
}

ul, ol {
  margin: 1em 0;
  padding: 0 0 0 2em;
}

li p:last-child {
  margin-bottom: 0;
}

ul ul, ol ol {
  margin: .3em 0;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
  max-width: 100%;
}

@media screen and (max-width: 480px) {
  .d25, .d75, .e25, .e75, .d50 {
    width: 100%;
    text-align: left;
	float: left;
	margin-left: unset;
  }
}

@media only screen and (min-width: 480px) {
  body {
    font-size: 16px;
  }
}

/*
@media only screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}
*/





.left-gear, .right-gear {
  position:relative;
  width: 2.5rem;
  height: 2.5rem;
  z-index: -1;
  border-radius: 100%;
  /*
  background-image: linear-gradient(transparent, transparent 40%, var(--gear-color1) 40%, var(--gear-color1) 60%, transparent 60%, transparent 100%), linear-gradient(45deg, transparent, transparent 42.5%, var(--gear-color1) 42.5%, var(--gear-color1) 57.5%, transparent 57.5%, transparent 100%), linear-gradient(90deg, transparent, transparent 40%, var(--gear-color1) 40%, var(--gear-color1) 60%, transparent 60%, transparent 100%), linear-gradient(135deg, transparent, transparent 42.5%, var(--gear-color1) 42.5%, var(--gear-color1) 57.5%, transparent 57.5%, transparent 100%);
  -webkit-animation : rotate-right 17s infinite linear;
  animation: rotate-right 17s infinite linear;
  */
}
.left-gear {
  left: -0.5em;
  /*
  -webkit-animation : rotate-left 17s infinite linear;
  animation: rotate-left 17s infinite linear;
  */
}
.right-gear {  
  right: 2em;
  /*
  -webkit-animation : rotate-right 17s infinite linear;
  animation: rotate-right 17s infinite linear;
  */
}
.left-gear::after, .right-gear::after {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--gear-color2);
  box-shadow: 0 0 0 0.3rem var(--gear-color1);
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  transform: translateY(-50%) translateX(-50%);
}
/*
@-webkit-keyframes rotate-right {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-right {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-left {
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotate-left {
  100% {
    transform: rotate(-360deg);
  }
}
*/