:root{
	--color1:#66c8c9;
	--color2:#783F60;
	--color3:#dddddd;
	--color4:#074F57;
	--buttonText1:#fcfcfc;
	--buttonText2:#FFFFD2;
	--text1:#000;
	--text2:#555555;
	--text3:#E10220;
	--error:lightpink;
	--success:#3A7D44;
	--fontFamily:Noto Sans;
	--placeholderColor:#783F60;
	--mandatory:#FFFFD2;
	--borderColor:silver;
}html {box-sizing: border-box;font-size:20px;height: 100%;}
body {
	box-sizing: border-box;
	font-family:var(--fontFamily), sans-serif;
	font-weight: 600;
	line-height: 2rem;
	margin:1px;
	width: 100%; 
	max-height: 100vh;
	max-width : 100vw;
	overflow-x: hidden;
	overflow-y: auto;
}
body > * {-webkit-overflow-scrolling: touch;margin:auto;}
*-div {display:block;}/* for custom elements */
a:link {color: var(--color1);}
a:visited {color: var(--color1);}
a:hover, a:focus {color: var(--color2);}
a:active {color: var(--color2);}
a img:hover {position:relative;top:-1px;}
img {image-orientation:none;}
img, video {max-width: 100%;vertical-align: middle;}
input[type='checkbox'],input[type='radio'] {
		transform:scale(2);margin-left:.5rem;margin-right:.75rem;accent-color: var(--color4);background-color: white;}
input[type=number] { -moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin:0;
}
::-webkit-input-placeholder {color:var(--placeholderColor);}
::-moz-placeholder {color:var(--placeholderColor);}
:-ms-input-placeholder {color:var(--placeholderColor);}
:-moz-placeholder {color:var(--placeholderColor);}
input[type=date],input[type='email'],input[type='number'],
	input[type='password'],input[type='text'],input[type='time'],
	input[type=tel],select,textarea{
	padding-top:.5rem;padding-bottom:.5rem;padding-left:0.25rem;
	font-size:11pt;border:1px solid var(--borderColor);}
input[type='date']:focus,input[type='email']:focus,input[type='number']:focus,
	input[type='password']:focus,input[type='text']:focus,input[type='time']:focus
	,select:focus,textarea:focus{
	outline:2px solid var(--color4);
	}	
	
input[type=date]{width:7rem;}
[required] {background-color:lightyellow;}
[type=button], [type=submit], button {
	background-color: var(--color1);
	border: 0.2rem solid var(--color1);
	border-radius: .2rem;
	box-sizing: border-box;
	color:  var(--buttonText1);
	cursor: pointer;
	display: inline-block;
	max-width: 100%;
	min-width:4rem;
	min-height:3rem;
	margin-bottom:2px;
	margin-left:1px;
	font-size:1.1rem;
	-webkit-transition: all ease 0.2s;
	-moz-transition: all ease 0.2s;
	transition: all ease 0.2s;
	padding: 0.7rem 0.7rem;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
[type=button]:link, [type=submit]:link, button:link, .btn:visited,
	[type=button]:visited, [type=submit]:visited, button:visited {
	color:  var(--buttonText1);
	text-decoration: none;
}
[type=button]:focus, [type=submit]:focus, button:focus, .btn:hover,
	[type=button]:hover, [type=submit]:hover, button:hover {
	color:  var(--buttonText2);
}
[type=button]:focus, [type=submit]:focus, button:focus {
	outline: none;
}
[type=button]:active, [type=submit]:active, button:active {
	background-color:  var(--color1);
}
[type=button]:disabled {
  background:  var(--color3);
  border-color:  var(--color3);
  color:  var(--buttonText1);
  cursor: not-allowed;
}
label {color:var(--text2);}
[type=datetime-local]{width:16rem;padding:.5rem;}
p {margin-top:2rem;}
table    {border-collapse:collapse;overflow-x:auto;}
tbody {width:100%;}
td{padding:.25rem;text-align:left;}
table[border='1'] td {border:1px solid silver;}
td {text-align:left;}
textarea {font-family:" var(--fontFamily)", sans-serif;}
th,thead td {background-color:var(--color3);color:var(--text2);position:-webkit-sticky;position:sticky;top:0;z-index: 2;padding: 0 0.25rem 0 0.25rem;}
tfoot td {background-color:var(--color3);color:white;position:-webkit-sticky;position:sticky;bottom:0;z-index: 2;}
/**************************************************************/
.above {display:block;line-height:1rem;margin-bottom:0rem;margin-top:1rem;}
label.above {color:gray;}
.appmain {max-width:360px;text-align:center;padding-left:0.5rem;padding-right:0.5rem;}
.autocomp-is {
    text-align: left; cursor: default; 
    border: 1px solid #ccc;border-top:0;background: #eee; 
    position: absolute; display: none; z-index: 9999; 
    max-height:4rem; overflow: hidden; 
    overflow-y: auto; box-sizing: border-box;
}
.autocomp-i {position:relative;
	line-height:1.4rem; 
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
	color: #333; }
.autocomp-i b { font-weight: normal;}
.autocomp-i.selected { background: #f0f0f0; }
.bbsilver{border-bottom:1px solid silver;}
.big {font-size:125%;}
.black{color:black;}
.block {display:block;}
.bold {font-weight:bold;}
.bottomBar{
	position:sticky; 
	bottom: 0;
	margin-left: auto;
	margin-right:auto;
	width:100%;
}
#bottomBar{margin-top:1rem;
	bottom:0;left:0;background-color:white;
	width:100%;box-sizing:border-box;
	padding:0.5rem;
}
.bred{border:3px solid var(--text3);}
.bsilver{border:1px solid silver;}
.btn2 {background-color: var(--color2);
	border: 0.2rem solid  var(--color2); 
	color:  var(--buttonText1);
}
.btn2:link, .btn2:visited {color:  var(--buttonText2);}
.btn2:focus, .btn2:hover {color: var(--buttonText2);}
.btn2:active {background-color:  var(--color2);}
.btn3 {background-color: var(--color3);
	border: 0.2rem solid  var(--color3);
	color:  var(--buttonText1);
}
.btn3:link, .btn3:visited {color: var(--buttonText2);}
.btn3:focus, .btn3:hover {color: var(--buttonText2);}
.btn3:active {background-color:  var(--color2);}
.btnCancel {background-color:white;border:2px solid var(--color4);color:var(--color4);}
.btnGray {background-color:lightgray;
	border: 0.2rem solid lightgray; 
	color: darkgray;
}
.buttonRow {text-align:center;margin-top:1rem;}
.buttonText2 {color: var(--buttonText2);}
.center {text-align:center;}
.checklabel {cursor: pointer;white-space: nowrap;flex-wrap: nowrap;}
.click:hover{background-color:var(--buttonText2);cursor: pointer;}
.controlBox {margin-top:1rem;padding:0.5rem;border:1px solid silver;}
.dateRanger {margin-right:.2rem;}
.deleteConfirm {background-color:var(--color4) !important;border:1px solid var(--color4) !important;}
.error{background-color:var(--error);}
.errorDiv {line-height:1rem;color:red;margin-top:0;}
.fclear {clear:both;}
.fcenter {float:center;}
.fleft {float:left;}
.fright {float:right;}
.font80{font-size:80%;}
.font150{font-size:150%;}
.gray {color:gray;}
.green {color:var(--success);}
@media (max-width:900px) {
	.grid2 {width:96%;justify-content:center;}
}
@media (min-width:901px) {
	.grid2 {display:grid;grid-gap:1rem;grid-template-columns:25rem 25rem;width:96%;justify-content:center;}
}
.hidden {display:none;};
.h10 {height:10rem;}
.h15 {height:15rem;}
.h2 {height:2rem;}
.h20 {height:20rem;}
.h60p {height:60%;}
.h3 {height:3rem;}
.h4 {height:4rem;}
.h5 {height:5rem;}
.h8 {height:8rem;}
.imgbtn {display:inline-block;width:12rem;height:9rem;text-align:center;
	font-size:1.5rem;vertical-align:bottom;
	background-color:  var(--color1);
	border: 0.2rem solid var(--color1);
	border-radius: .2rem;
	margin-bottom: 2px;
	box-sizing: border-box;
	color:  var(--buttonText1);}
.imgbtn:hover{	color: var(--buttonText2);}
.imgbtn p {margin-top:1rem;}
.imgbtnapp {width:60%;text-align:center;font-size:1.25rem;}
.imgbtnapp img {width:3rem;height:3rem;}
.imgbtnImg{width:4rem;height:4rem;}
.imgFit{object-fit:contain;}
.inactive {color:darkgray;text-decoration:line-through;}
.instr {font-size:80%;color:gray;}
ir-delbtn input {background-color:var(--text3) !important;border-color:var(--text3) !important;}
.ir-delbtnC {background-color: var(--text3) !important;  border-color: var(--text3) !important;}
ir-imgblock img, ir-imgBlock object, ir-imgBlock canvas {width:100px;max-height:300px;}
.left {text-align:left;}
.linethru{text-decoration:line-through;color:gray;text-decoration-thickness:3px;}
#logoutDiv{margin-top:2rem;text-align:center;}
.mandatory {background-color:var(--mandatory)}
.marginLeft1 {margin-left:1rem;}
.marginLeft2 {margin-left:2rem;}
.marginLeft4 {margin-left:4rem;}
.marginTop1 {margin-top:1rem;}
.marginTop2 {margin-top:2rem;}
.navWrap {display:flex;padding:0.5rem;}
.nowrap {white-space: nowrap;flex-wrap: nowrap;}
.orange {color:orange;}
.pad1 {padding:1rem;}
.pageTitle {font-size:150%;color: var(--color2);font-style:italic;margin-bottom:.5rem;margin-right:2rem;text-align:left;}
.point {cursor: pointer;}
.popScroll {overflow-y:auto;padding-right:1.3rem;}
.popTitle {text-align:left;font-size:120%;color:var(--color2);font-style:italic;}
.popup {padding:0.5rem;border:1px solid silver;position:absolute;z-index:9002;text-align:center;
	display:none;padding-right:1rem;border-radius:0.5rem;background-color:#efefef;
	box-shadow: 0 6px 12px #222;max-width:90vw;}
#popupBackground { background-color:#222; opacity: 0.5; filter:alpha(opacity=50); position:fixed;
    z-index:7000;top:0px;left:0px;right:0px;bottom:0px;width:100%;height:100%;}
.popup.open {
	-ms-transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}
ir-probool {display:block;border:1px solid silver;margin-bottom:-1px;}
.ptBtn {min-width:4rem;width:4rem;margin-left:1px;}
.rateRadioImg{width:5rem;height:2rem;}
.red {color:var(--text3);}
.reviewDtl {width:98%;overflow-x:auto;font-size:80%;}
.reviewDtl img {width:1rem;}
.reviewImg {width:5rem;}
.right {text-align:right;}
.sectionHdr {color:var(--color2);font-size:130%;font-style:italic;font-weight:bold;}
.small {font-size:80%;line-height:1.2rem;}
.subHdr {color:  var(--color2);font-size:110%;font-weight:bold;}
.tableWrap{overflow-x:auto;}
.tosFrame {height:calc(100vh - 15rem);width:60vw;min-width:320px;}
.w50p {width:50%;}
.w60p {width:60%;}
.w80p {width:80%;}
.w96p {width:96%;}
.w100p {width:100%;}
.w1 {width:1rem;}
.w1_5 {width:1.5rem;}
.w2 {width:2rem;min-width:2rem;}
.w3 {width:3rem;min-width:3rem;}
.w4 {width:4rem;}
.w5 {width:5rem;}
.w6 {width:6rem;}
.w7 {width:7rem;}
.w8 {width:8rem;}
.w9 {width:9rem;}
.w10 {width:10rem;}
.w12 {width:12rem;}
.w15 {width:15rem;}
.w18 {width:18rem;min-width:2rem;}
.w20 {width:20rem;}
.w25 {width:25rem;}
.w30 {width:30rem;}