/* ; -*-CSS-*- */


body {
//	font-family: Verdana, sans-serif;
	font-family: Arial, sans-serif;
	font-size: 10pt;
	width:900px;
}


img {
	margin-top:5px;
	vertical-align:middle;
}

img#utulogo {
	float: left;
	margin-right: 3em;
	margin-top:0px;
	margin-bottom: 8px;
}


p {
	max-width:890px;
	font-family:Verdana, sans-serif;
	font-size:10pt;
}

p.small {
	font-family:Verdana, sans-serif;
	font-size:8pt;
}

aside {
	text-align:center;
	float: right;
}

textarea {
	font-family: Courier;
	font-size: 10pt;
	width: 99%;
	height: 32.5em;
}

label {
	font-family:Verdana, sans-serif;
	font-size: 10pt;
}

table.cdoc, th.cdoc, td.cdoc_bold, td.cdoc_petite, td.cdoc_left, td.cdoc_center, td.cdoc_right {
	padding-top: 2px;
	border-collapse: collapse;
	border: none;
	// debug
//	border: 1px solid black;
//	border-style: dotted;
}

table.cdoc {
	margin-top: 20px;
	margin-right: 30px;
}

th.cdoc {
	padding-right: 8px;
	padding-bottom: 6px;
}


td.cdoc_petite_power {
	position:relative;
	&::after {
		content: '';
		position: absolute;
		height: 3em;
		width: -moz-available;
		width: -webkit-fill-available;
		width: fill-available;
		width: stretch;
		margin-inline: 0.1em;
		--vpos: 0em;
		--thick: 0.15em;
		background-image:linear-gradient(
			to bottom,
			transparent var(--vpos),
			black var(--vpos),
			black calc(var(--vpos) + var(--thick)),
			transparent calc(var(--vpos) + var(--thick))
		);
	}
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 5px;
}

td.cdoc_petite {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 5px;
}

td.cdoc_bold {
	text-align: center;
	font-weight: bold;
}

td.cdoc_right_bold {
	text-align: right;
	font-weight: bold;
}

td.cdoc_left {
	padding-left: 8px;
	text-align: left;
}

td.cdoc_left_wide {
	padding-left: 16px;
	padding-right: 8px;
	text-align: left;
}

td.cdoc_center {
	text-align: center;
}

td.cdoc_right {
	padding-right: 8px;
	text-align: right;
}

td.cdoc_right_wide {
	padding-left: 24px;
	padding-right: 8px;
	text-align: right;
}


/* Tooltip above which is above the field */

.tooltip_above {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	cursor: pointer;
}

.tooltiptext_above {
	visibility: hidden;
	width: 120px;
	background-color: cyan;
	color: black;
	text-align: center;
//	font-weight: bold;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 2s;
}

.tooltiptext_above::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}

.tooltip_above:hover .tooltiptext_above {
	visibility: visible;
	opacity: 1;
}

/* Tooltip below which is below the field */

.tooltip_below_right {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	cursor: pointer;
}

.tooltiptext_below_right {
	visibility: hidden;
	width: 220px;
	background-color: cyan;
	color: black;
	text-align: center;
//	font-weight: bold;
	border-radius: 6px;
	padding: 5px 5px;
	position: absolute;
	z-index: 1;
	top: 150%;
	left: 100%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 2s;
}

.tooltiptext_below_right::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 10%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent black transparent;
}

.tooltip_below_right:hover .tooltiptext_below_right {
	visibility: visible;
	opacity: 1;
}



ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #E8E8E8;
	font-family:Verdana, sans-serif;
	font-size: 10pt;
	font-weight: bold;
}

li.rnote {
	list-style-type: square;
	color: black;
	background-color: white;
	list-style-position: inside;
	padding: 5px;
	padding-left: 10px;
	font-family:Verdana, sans-serif;
	font-size: 10pt;
	font-weight: normal;
}

li a {
	display: block;
	background-color: #E8E8E8;
	color: black;
	text-decoration: none;
	font-family:Verdana, sans-serif;
	font-size: 10pt;
	font-weight: bold;
}

li.topnav {
	float: left;
	display: block;
	background-color: #E8E8E8;
	color: black;
	font-family:Verdana, sans-serif;
	padding: 8px 16px;
	text-decoration: none;
	font-size: 10pt;
	font-weight: bold;
}

/* unvisited link */
a:link {
	color: #0000AF;
	text-decoration: none;
	font-weight: bold;
}

/* visited link */
a:visited {
	color: #00009F;
	text-decoration: none;
	font-weight: bold;
}

/* mouse over link */
a:hover {
	color: #0000FF;
	text-decoration: underline;
	font-weight: bold;
}


dl {
	width: 100%;
	overflow: hidden;
	background-color: #ECECEC;
	padding: 1;
	margin: 1
}

dt {
	float: left;
	clear: left;
	width: 8%;
	color: black;
	font-family:Verdana, sans-serif;
	font-size: 11pt;
	font-weight: bold;
	padding: 5px;
}

dd {
	float: left;
	width: 92%;
	color: black;
	font-family:Verdana, sans-serif;
	font-size: 10pt;
	padding: 2px;
}



div.content {
	position: relative;
	top: 5px;
	width: 900px;
}

div.top {
	position: absolute;
	width: 100%;
}

div.tool {
	position: absolute;
	top: 110px;
	width: 100%;
}

div.footer {
	clear: both;
	background-color: #ECECEC;
	width: 100%;
}

div.inputs {
	display: block;
	float: left;
	left: 24%;
	top: 0px;
	width: 24%;
	border: 1px solid #afafaf;
}

div.inputs p {
	margin-left: 1em;
	margin-right: 1em;
}

div.outputs {
	display: block;
	float: left;
	left: 0px;
	top: 0px;
	width: 70%;
	border: 1px solid #afafaf;
	padding: 1em;
}

div.graph {
	background-color: #cfcfcf;
	width: 98.5%;
	height: 470px;
}


form {
	margin:1em;
}

h3 {
	margin-left: 1em;
	margin-right: 1em;
}

td.label {
	text-align: left;
	font-family:Verdana, sans-serif;
	font-size: 9pt;
}

.tbl {
	font-family:Verdana,sans-serif;
	font-size:9pt;
}


select {
	width:100%;
}

input {
	width:100%;
}

button.submit {
	width:100%;
	background-color: #008CBA;
	color: white;
	border: none;
	border-radius: 5px;
	padding: 1em;
	transition: all 0.5s;
}

button.savepng {
	float: right;
	background-color: #00BA8C;
	color: white;
	border: none;
	border-radius: 5px;
	padding: 0.5em;
	transition: all 0.5s;
	position: absolute;
	right: 28%;
	top: 0.2em;
}

button.savetext {
	float: right;
	background-color: #BA008C;
	color: white;
	border: none;
	border-radius: 5px;
	padding: 0.5em;
	transition: all 0.5s;
	position: absolute;
	/* NOTE: This is div.graph(height) + 20 pixels: */
	top: 490px;
	right: 28%;
}

button span{
	cursor: pointer;
	position: relative;
	transition: all 0.5s;
}

/*   button.savepng span:after{
	 content: '(opens a pop-up) »';
	 position: absolute;
	 top: 0;
	 right: -125px;
	 opacity: 0;
	 transition: all 0.5s;
   }
*/
button span:after{
	content: '»';
	position: absolute;
	top: 0;
	right: -20px;
	opacity: 0;
	transition: all 0.5s;
}

button:hover {
	box-shadow: 0 5px 5px 0 rgba(0,0,0,0.24), 1px 10px 10px 0 rgba(0,0,0,0.19);
}

button:hover span{
	padding-right: 25px;
}
/*
  button.savepng:hover span{
  padding-right: 120px;
  }
*/
button:hover span:after{
	opacity: 1;
	right: 0;
}

span.fcol {
	font-family:Verdana,sans-serif;
	font-size:11pt;
	font-weight: bold;
	padding: 0 10px;
	text-align: right;
}

span.scol {
	font-family:Verdana,sans-serif;
	font-size:10pt;
	font-weight: bold;
	/*       padding: 0 30px; */
	text-align: right;
}

span.acol {
	font-family:Verdana,sans-serif;
	font-size:10pt;
	/*       padding: 0 30px; */
	text-align: right;
}

/* Various info boxes. */

.alert-box {
	color:#555;
	border-radius:10px;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:10pt;
	padding:10px 36px;
	margin:10px;
}
.alert-box span {
	font-weight:bold;
	text-transform:uppercase;
}
.error {
	background:#ffecec url('/images/error.png') no-repeat 10px 50%;
	border:1px solid #f5aca6;
}
.success {
	background:#e9ffd9 url('/images/success.png') no-repeat 10px 50%;
	border:1px solid #a6ca8a;
}
.warning {
	background:#fff8c4 url('/images/warning.png') no-repeat 10px 50%;
	border:1px solid #f2c779;
}
.notice {
	background:#e3f7fc url('/images/notice.png') no-repeat 10px 50%;
	border:1px solid #8ed9f6;
}
.red_warn {
	background:#ffecec url('/images/warning.png') no-repeat 10px 50%;
	padding:10px 36px;
	border:1px solid #f5aca6;
}
.red_warn_info {
	margin:-5px 20px;
}


/* Tooltips */

.tooltip {
	position: relative;
	/* display: inline-block; */
	display: flex;
	/* border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext {
	visibility: hidden;
	/* width: 120px; */
	width: 210px;
	color: black;
	background-color: yellow;
	/* text-align: center; */
	text-align: left;
	border-radius: 6px;
	padding: 10px 0;
	padding-left: 10px;
	position: absolute;
	z-index: 1;
	top: 250%;
	/*    bottom: 125%; */
	left: 50%;
	/*    left: 50%; */
	/* margin-left: -60px; */
	opacity: 0;
	transition: opacity 2s;
	text-transform:none;
	font-family:Verdana,sans-serif;
	font-size:10pt;
	font-weight:normal;
}

li.ttext {
	list-style-type: square;
	color: black;
	list-style-position: inside;
	padding: 0;
	padding-left: 5px;
	font-weight: normal;
}


.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	bottom: 100%;
	/*    top: 100%; */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

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