html {
	text-size-adjust:         none;
	-ms-text-size-adjust:     none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust:    none;
}

body {
	background-color: #eeffff;
	margin: 2em;
}

div.toppart {
	background-color: #eeffff;
}

div.navbar a {
	padding: 0.5em;
	border-collapse: separate;
	font-family: 'Helvetica';
	font-weight: bold;
	text-decoration: none;
	border-radius: 0.2em;
}

div.navbar a:hover {
	background-color: #ddeeee;
}

div.navbar a:visited {
	/* color: initial; */
}

div.header {
	background-color: #eeffff; / * #B09090 */
	font-family: sans-serif;
}

span#subtitle            { font-size: normal; font-weight: bold; font-family: "Helvetica"; }
span#subtitlefirsthalf   { color: #60aaaa;   }
span#subtitle            { font-size: normal; font-weight: bold; font-family: "Helvetica"; }
span#subtitlesecondhalf  { color: #666;      }
span#subtitlespace       { bold; font-size: 25%; }
span#subtitletld         { color: #60aaaa; font-size: smaller; }

div.thead-banner-bottom {
	margin-left: 2.5em;
}


div#terms_frame {
	padding: 2em;
	margin: 2em;
	text-align: center;
	border: solid 5px #ddffff;
	background-color: #fff;
	border-radius: 0.5em;
}

div#terms_box {
	padding: 2em;
	margin: 2em;
	text-align: left;
	line-height: 2em;
}

div#terms_message {
	font-weight: bold;
	padding: 1em;
}

span.certify_item {
	border-radius: 0.5em;
	padding: 0.5em;
}

span.certify_item:hover {
	background-color: #ddeeee;
}

#mobile_warning_box {
	padding: 2em;
	margin: 2em;
	text-align: center;
	border: solid 5px #ddffff;
	background-color: #fee;
	border-radius: 0.5em;
}

.chartoptionsbox {
	background-color: #fff;
	border-radius: 10px;
	padding: 0.5em;
	line-height: 2.0;
}

label.chartoptions {
	border-radius: 0.2em;
}

label.chartoptions:hover {
	border-radius: 0.2em;
	color: #444;
	/* background-color: #ddeeee; */ /* doesn't work */
}

table, tbody, th, tr, td {
	border: none !important;
	border-collapse: collapse;
	outline: none;
}

tr td {
    /* border: 1px solid #dedede; */
    /* border-radius:10px; */
    text-align: center
}

tr.even {
	background-color: #ddd;
}

tr.odd {
	background-color: #eee;
}

tr.medselected {
	color: #fff;
	background-color: #088;
}

tr.disabled {
	color: #ddd;
	background-color: #aaa;
}

table#dropSelection td {
	padding: 0.5em;
}

table#dropSelection tr th, table#hourlychartheader tr th, table#hourlychartbyeyeheader tr th {
	text-align: center;
	background-color: #ddd;
	padding: 0.5em;
}

tr.daytime {
	background-color: #fff;
}

tr.nighttime {
	background-color: #ddd;
}


h1, h2, h3, h4, h5, h6 {
	font-family: "Helvetica";
}

div#banner {
	margin: 1.5em;
	vertical-align: middle;
	border-collapse: separate;
}

div#banner_block {
	display: inline-block;
	vertical-align: middle;
	border-collapse: separate;
	margin: 0.5em;
}

span#banner_title {
	display: inline;
	vertical-align: middle;
	border-collapse: separate;
	font-weight: bold;
	font-size: x-large;
	font-family: "Helvetica";
	color: #444;
}

img#banner_logo {
	height: 3em;
	vertical-align: middle;
	display: inline-block;
}

#banner_subtitle {
	color: #444;
	margin-left: 2em;
}

table#dropSelection {
	font-size: 14px;
}

td.picklist_freqblock {
	vertical-align: center;
	white-space: nowrap;
}

div.picklist_freqselectors {
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
}

div.picklist_freqselector {
	white-space: nowrap;
	vertical-align:center;
}

span.freqlabel_noselect {
	display:inline-block;
	align: left;
}

input.picklist_freqtextinput {
	text-align:center;
	display:inline-block;
	align: left;
}

input.picklist_useboth {
	text-align:center;
}

.zerowidth {
	width: 0px;
}

select.freqselect {
	width: 2em;
	display:none;
}

select.freqselect option {
	width: 2em;

}

span.chromebugcontainer {
	width: 4em !important;
	min-width: 4em !important;
	display:inline-block;
	align: left;
}

input.picklist_freqtextinput:focus ~ select.freqselect {
	display: inline-block;
	visibility: visible;
}

tr.medselected select.freqselect {
	display: inline-block;
	visibility: visible;
}

select.freqselect:focus {
	display: inline-block;
	visibility: visible;
}

select.freqselect:focus-within {
	display: inline-block;
	visibility: visible;
}

select.freqselect:active {
	display: inline-block;
}

.chartoptions {
	padding: 0em;
}

input#show_settings {
	display: none;
}

input:not(:checked) ~ div.chartoptionsdropdown {
	display: none;
}

#selectArea {
	padding-top: 2em;
	background-color: #ffffff;
}

/* works for div but not td in Firefox */
[contentEditable=true]:empty:not(:focus):before {
    content:attr(data-text);
    color:gray;
}


td.notescell {
	max-width: 5em;
}

/*
.tabselected {
  background: #dddddd;
	border: 5px solid #fff;
	border-radius: 10px;
	padding: 4;
}
.tabunselected {
  background: #eeeeee;
	border: 5px none;
	border-radius: 10px;
	padding: 9;
}
*/

div.circle, span.circle {
	text-align: center;
	vertical-align: center;
	line-height: 2em;
	background: #60aaaa;
	color: #ffffff;
	font-weight: bold;
	font-family: sans-serif;
	border-radius: 50%;
	height: 2em !important;
	width: 2em !important;
}

.tabbar{
	margin-top: 3em;
}

.tab {
	padding-bottom: 0;
	height: 100%;
}

label.tab {
	width: 100%;
	/* height: 100%; */
	display: inline-block;
}

input + div.tab {
	background: #dddddd;
	font-weight: normal;
	color: #222222;
	border: none;
	border-radius: 10px 10px 0 0;
}

input:checked + div.tab {
	background: #ffffff;
	font-weight: bold;
	color: #000000;
	border: none;
	border-radius: 10px 10px 0 0;
}

input:hover:not(:disabled) + div.tab {
	background: #eeeeee; /* #80ffff; */
	color: #000000;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.medselector {
	font-size: large;
	/* doesn't work in Firefox:
	height: 2em;
	width: 2em;
	*/
	transform: scale(2.0)
}

/* eye selectors */
/* unchecked; make tranparent border when unchecked to avoid things moving around */
label.eyeselector {
	border: 5px solid transparent;
	border-radius: 10px;
	padding: 4;
}

label.picklist_eyesplit {
	vertical-align: middle;
	display: inline-block;
	height: 100%;
}

:checked ~ label.eyeselector {
	border: 5px solid #fff;
	border-radius: 10px;
	padding: 4;
}

:not(:disabled):hover ~ label.eyeselector {
	border: 5px solid rgba(255, 255, 255, 0.6);
	border-radius: 10px;
	/* border-color: #a0ffff; */
	padding: 4;
}

:not(:disabled):checked ~ label.eyeselector:hover {
	border: 5px solid rgba(232, 255, 255, 1.0);
	border-radius: 10px;
	/* border-color: #a0ffff; */
	padding: 4;
}

/*
 .eyeselector {
	font-size: large;
}
*/

.splitselector {
	font-size: small;
}


/* freq2 box visibilty */
:not(:checked) ~ div div.freq2 {
	display: none; /* visibility: hidden; */
}

:checked ~ div div.freq2 {
	/* display: initial; 8? /* illegal in IE */
	display: ''; /* doesn't work */
	display: inline-block;
}

span.freqlabel {
	font-size: small;
}

:not(:checked) ~ div div span.freqlabel {
	opacity: 0;
	/* display: none; */
}

:checked ~ div div span.freqlabel {
	opacity: 1;
	/* display: initial; */
}


div.tab {
	padding:0.7em;
}

div#tabpage {
	background-color: #ffffff;
	padding: 2em;
}

#freetextInputArea {
	border-radius: 5px;
	padding: 0.2em;
	vertical-align: top;
	display: inline-block;
	font-family: inherit;
	font-size: inherit;
	overflow: visible;
	resize: horizontal;
	min-height: 12em;
	line-height: 1.5em;
}

/* doesn't work */
#freetextInputArea:focus {
	border-radius: 5px;
}

#freetextInputInterpArea {
	padding: 0.2em;
	vertical-align: top;
	display: inline-block;
	text-align: center;
	resize: vertical;
	height: 100%;
	width: 1em;
	overflow: visible;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.5em;
}

/* see https://www.oodlestechnologies.com/blogs/How-to-convert-a-DIV-into-a-TEXTAREA/ */
#freetextInputInterpArea2 {
	border: 1px solid gray;
	border-radius: 5px;
	min-height: 50px;  /* if you want Flexible textarea/div then give min-height instead of height */
	padding: 0;
	padding-left: 1em;
	margin-left: 0;
	width: 50em;
	font-size:inherit;
	font-family: inherit;
	color:#000;
	background-color: #eee;
	padding: 0.2em;
	vertical-align: top;
	min-height: 12em;
	height: auto;
	line-height: 1.5em;
	white-space: nowrap;
	overflow-x: scroll;
  }

.smallbutton {
	padding: 0em;
}

:not(.disabled).medication:hover {
	background-color: #d0dddd;
	color: #000000;
}

:not(.disabled).medselected:hover {
	background: #60aaaa;
	color: #ffffff;
}

.medication.filtered {
	display: none;
}

#outputArea {
	width: 100%;
	height: 400px;
	background-color: #ffffff;
}

#outputTable {
	width: 100%;
	background-color: #ffffff;
}

#outputTable caption {
	background-color: #ffffff;
}

#outputTable td {
	padding: 2em;
	margin: 2em;
	/* font-size: large; */
}

#outputTable tr.even {
	background-color: #eee;
}

#outputTable tr.odd {
	background-color: #fff;
}

#hourlychart, #hourlychartbyeye {
	width: 100%;
	background-color: #ffffff;
}

span.internalerror {
	color:#a00;
	font-weight: bold;
}

div.internalerror {
	padding: 2em;
	margin: 2em;
	text-align: center;
	border: solid 5px #a00;
	background-color: #fee;
	border-radius: 0.5em;
}


#hourlycharttable, #hourlychartbyeyetable {
	width: 100%;
}

#hourlychartbyeye_collabels {
	width: 100%;
}

#hourlychart > td, #hourlychartbyeye > td {
	padding: 1em;
	margin: 0em;
	font-size: large;
}

#hourlychart > tr.even, #hourlychartbyeye > tr.even {
	background-color: #eee;
}

#hourlychart tr.odd, #hourlychartbyeye tr.odd{
	background-color: #fff;
}

tr.hourlychartrow, tr.hourlychartbyeyerow {
	padding-top: 1en;
	padding-bottom: 1en;
	border: 1px solid #dedede;
	outline: thin solid;
}

.timelabel, .timelabelbyeye {
	font-size: large;
	font-weight: bold;
	font-family: "Helvetica";
}

.timelabelbyeye {
	width: 20%;
	max-width: 20%;
	min-width: 20%;
}

.hourlychartbyeyetime {
	width: 20%;
	max-width: 20%;
	min-width: 20%;
}

.hourlychartitem, .hourlychartbyeyeitem {
	width: 100%;
	font-size: large;
	padding-top: 1em;
	padding-bottom: 1em;
}

.hourlychartitem td, .hourlychartbyeyeitem td {
	padding: 1em;
	margin: 1em;
	/* width: 100%; */
	font-size: large;
}

.hourlychartitem tr:nth-child(even), .hourlychartbyeyeitem tr:nth-child(even) {
	background-color: #eee; /* rgba(248, 248, 248, 0.5); /* f8f8f8 */
}


@media print
{
	.noprint {display:none;}
}

div.noprint {
	border: 0;
	/* border-collapse: collapse; */
}

@media print
{
	tr.hourlychartbyeyerow,
	tr.hourlycharybyeye    {
		page-break-inside: avoid;
		break-inside: avoid;
	}
}


.whicheyearrow
{
	font-size: 2em;
	font-weight: bold;
}

.whicheyecell {
	width: 10en;
}


.hourlychartbyeyecell {
	max-width: 30%;
	min-width: 30%;
	width: 30%;
}

/*
#hourlychartbyeyeheader th {
	max-width: 40%;
	min-width: 40%;
	width: 40%;
	table-layout:fixed;
}
*/

.hourlychartbyeye_collabel_cell {
	max-width: 30%;
	min-width: 30%;
	width: 30%;
}


.icon {
	font-size: large;
	font-weight: bold;
}

.tabheader {
	font-family: "Helvetica";
}

#med_count {
	font-weight: bold;
	border-radius: 10px;
	padding: 0.5em;
}

span#version_text {
	font-size: small;
	text-align: center;
}

.nolink {
	color: inherit;
	text-decoration: none;
	/* all: unset; */
}