:root {
	--popupBoxbgColor: white;
	--popupBoxborderColor: navy;
	--popupBoxHeaderbgColor: navy;
	--popupBoxHeaderfgColor: white;
	--popupBoxInfobgColor:limegreen;
	--popupBoxInfofgColor:white;
	--popupBoxWarningbgColor:orange;
	--popupBoxWarningfgColor:white;
	--popupBoxErrorbgColor:red;
	--popupBoxErrorfgColor:white;
}

.popupBox {border: 1px var(--popupBoxborderColor) solid;background-color: var(--popupBoxbgColor);width: 600px;height: 200px;top: -210px;left: -610px;position: fixed;transition: top 400ms ease-out;}
.popupBox div {border: 0px black solid;width: 100%;height: calc(100% - 40px);overflow: auto;padding: 5px 5px 5px 5px;font-size: 11pt;}

.popupBoxHeader {background-color: var(--popupBoxHeaderbgColor);height: 30px;color: var(--popupBoxHeaderfgColor);text-align: center;line-height: 30px;font-size: 14pt;margin-bottom: 0;width: inherit;}
.popupBoxHeader img:first-child {cursor: pointer;float: left;z-index: 9;height: 30px;width: 30px;}
.popupBoxHeader img:last-child {cursor: pointer;float: right;z-index: 9;height: 30px;width: 30px;}
.popupBoxHeader span {color: white;line-height: 30px;font-size: 14pt;font-weight: bold;cursor: pointer;width: 30px;position: absolute;right: 0px;}
.popupBoxHeader span[name]:hover:after {content: attr(name);position: absolute;left: -19px;top: -27px;padding: 2px 5px 2px 5px;font-size: 10pt;background: red;color: white;font-weight: normal;line-height: 20px;}
.popupBoxHeader span:hover {color: red;}

.popupBox input[type=checkbox],label,input[type=radio] {cursor: pointer;}
.popupBox .popupClock {bottom: 0;position: absolute;background-color: var(--popupBoxborderColor);height: 10px;overflow: hidden !important;width: 100%;padding: 0;}
.popupBox .popupClock span {display: block;float: right;color: white;font-size: 8pt;height: inherit;line-height: 10px;margin-right:5px;}

.iframeBox {background-color: white;border: 1px silver solid;}

@media only screen and (max-width: 360px) {
	.popupBoxHeader {font-size: 14pt;}
	.popupBox div {font-size: 11pt;}
}