* {
	box-sizing: border-box;
}

body.waiting * {
	cursor: wait;
}

@font-face {
	font-family: "Admin4Body";
	src: url(Fonts/NotoSans-Medium.ttf) format("truetype");
}

@font-face {
	font-family: "Admin4Bold";
	src: url(Fonts/NotoSans-SemiBold.ttf) format("truetype");
}

:root {
	--block-colour: #B9D9EB;
	--main-bg-color: #E0FFFF;
	--header-bg-color: #FFFFFF;
	--header-border-color: #0e96fd;
	--xxmodalbox-color: #004687;
	--modalbox-color: #314d69;
	--modalbox2-color: #82a3ca;
	--msgbar-color: #6CB4EE;
	--bodytxt-color: #002244;
	--bodytxt-color2: #883388;
	--mandatory-color: #ffbbbb;

	--activeLink-color:#082480;
	--activeLink-hover:#dbe3f7;
	--activeLinkLight-hover:#70b9f5;
	--activeLinkDark-hover:#264a67;	

	--modalbox-scrollthumb: #6699CC;
	--modalbox-scrollbar: #89CFF0;

	--modalbox-confirm: #264a67;
	--modalbox-warning: #A50021;
	--modalbox-error: #A50021;
	--modalbox-info: #226622;

	--button-border: #6699cc;
	--button-background: #52beec;
	--button-hover: rgba(0,0,0,0.2);
	--button-text: #ffffff;
	--button-hoverText: #dae2db;

	--smlbutton-background: slategray;
	
	--helpIcon-color:#222266;
	--helpIcon-hover:#8888dd;

	--sidemenu-level1: #729ab9;
	--sidemenu-level2: #729ab9;
	--sidemenu-level1high: #5781ac;
	--sidemenu-level2high: #5781ac;
	--sidemenu-text:#F0F8FF;
	--sidemenu-arrow: #F0F8FF;

	--icon-colour: #F0F8FF;
	--icon-hovercolour: #070f58;

	--icon-colourDark: #2E5894;
	--icon-hovercolourDark: #1fa3db;

	--icon-colourGreen: #44aa44;
	--icon-hovercolourGreen: #008800;
	--icon-colourRed: #ff4444;
	--icon-hovercolourRed: #ff0000;
	--icon-colourAmber: #cae25a;
	--icon-hovercolourAmber: #ccf807;

	--slider-on: #00aa00;
	--slider-off: #aa0000;

	--tick-green: #88ff88;
	--cross-red: #ff8888;

	--dktick-green: #006600;
	--dkcross-red: #660000;

	--select-background: #7CB9E8;

	--table-background: #999999;
	--table-row1: #aaaaaa;
	--table-row2: #bbbbbb;

	--simpletable-border1: #6CB4EE;

	--body-font-size: 1.8vh;
	--body-font-size-small: 1.8vh;

	font-family: Admin4Body;
	font-size: var(--body-font-size);

}

body {
	background-color: var(--main-bg-color);
	font-family: Admin4Body;

	color: var(--bodytxt-color);
}

[class*="col-"] {
	float: left;
	padding: 15px;
}

.col-1 {
	width: 8.33%;
}

.col-2 {
	width: 16.66%;
}

.col-3 {
	width: 25%;
}

.col-4 {
	width: 33.33%;
}

.col-5 {
	width: 41.66%;
}

.col-6 {
	width: 50%;
}

.col-7 {
	width: 58.33%;
}

.col-8 {
	width: 66.66%;
}

.col-9 {
	width: 75%;
}

.col-10 {
	width: 83.33%;
}

.col-11 {
	width: 91.66%;
}

.col-12 {
	width: 100%;
}

.pagebody {
	margin-top: 80px;
	margin-bottom: 100px;
	background-color: var(--main-bg-color);
}

.bodyrow::after {
	content: "";
	clear: both;
	display: table;
}

.mainbody {
	text-align: center;
	background-color: var(--main-bg-color);
}

.topImage {
	max-width: 100%;
	height: auto;
	width: auto;
	/* ie8 */
}
#topMsgBar{
	font-size:0.9rem;
	scrollbar-color: var(--modalbox-scrollthumb) var(--modalbox-scrollbar);
	scrollbar-width: thin;
	overflow-y: auto;
	overflow-x: hidden;
}

#maincontent {
	display: block;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

	background-color: var(--block-colour);
	padding: 15px 20px 15px 20px;
	margin: auto;
	text-align: left;
}

.main400 {
	width: 400px;
}

.main600 {
	width: 600px;
}

.main700 {
	width: 700px;
}

.rightcolumn {
	background-color: var(--main-bg-color);
}

.leftmenu {
	background-color: var(--main-bg-color);

}
#head-topbar {
	background-color: var(--header-bg-color);
	height: 60px;
}
#head-right-container {
	float:right;
	text-align: right;
	background-color: var(--header-bg-color);
	height: 60px;
	width:340px;
}
#head-sitename-container {
	display:inline-block;
	padding-top:20px;
	font-size:25px;
	background-color: var(--header-bg-color);
	height: 60px;
}

.bodytopbar {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

	padding: 5px 10px 5px 10px;
	height: 50px;
	background-color: var(--msgbar-color);
	display: none;
	font-size: 1.0rem;
}

.dataform {
	display: block;
	width: 90%;
}

.datarow {
	padding-left: 10px;
	background-color: var(--table-row2);
	border: none;
}

.height35 {
	height: 30px;
	vertical-align: middle;
}

.toprow {
	width: 100%;
	margin-top: 2px;

}

.datatable {
	border-collapse: separate;
	width: 100%;
}

.datacell {
	padding: 5px 5px 5px 5px;
	font-size: 0.9rem;
	margin: 0px;
	text-align: left;
}

.datalabel {
	font-size: 0.9rem;
	text-align: left;
	padding-left: 5px;
	vertical-align: middle;
	font-family: "Admin4Bold";
	border: none;
	width: 15%;
}

.left {
	padding-left: 5px;
	text-align: left;
}

.right {
	padding-right: 5px;
	text-align: right;
}

.top {
	padding-top: 5px;
	vertical-align: top;
}

.center {
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}
.bold {
	font-weight:bold;
}
.underline {
	text-decoration:underline;
}
.border {
	border:var(--simpletable-border1) 1px solid;
}
.tableLabel {
	font-size: 0.9rem;
	text-align: left;
	padding-left: 5px;
	vertical-align: middle;
	font-family: "Admin4Bold";
	border: none;
}

.tableData {
	font-size: 0.9rem;
	text-align: left;
	padding-left: 5px;
	padding-bottom: 3px;
	vertical-align: middle;
	border: none;
}

.tableHeader {
	text-align: left;
	vertical-align: middle;
	font-family: "Admin4Bold";
	text-decoration: underline;
}

.datainput {
	font-size: 0.8rem;
	background-color: var(--main-bg-color);
	border: none;
}

.mandatoryInput {
	background-color: var(--mandatory-color);
}

.dataselect {
	font-size: 0.8rem;
	background-color: var(--select-background);
	color: var(--bodytxt-color);
}

.dataselect.mandatoryInput  {
	background-color: var(--mandatory-color);
}

.multiselect {
	font-size: 0.8rem;
	background-color: var(--select-background);
	border-style: hidden;
	color: var(--bodytxt-color);
	scrollbar-color: var(--modalbox-scrollthumb) var(--modalbox-scrollbar);
	scrollbar-width: thin;
}

.multiselect option {
	background-color: var(--select-background);
}

.formButtonCell {
	float: right;
	margin-top: 10px;
}

.textinput {
	resize: none;
}

.regcredit {
	font-family: "Admin4Bold";
	font-size: 1.2rem;
}

.tab-btn {
	padding: 0px 0px;
	display:inline-block;
	margin-top:5px;
	margin-bottom:5px;
}


.tab-txt {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff;
	background: rgba(0, 0, 0,0.3);
	padding: 5px 5px;
	font-size: 0.65em;
	text-align:center;
	text-decoration: none;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-left:1px;
	margin-right:1px;
}
.tab-txt:hover {
	border: none;
	background: #fff;
	padding: 5px 5px;
	color: #1b1b1b;
}


#tabbar {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

	text-align:left;
	padding: 5px 10px 5px 10px;
	margin-bottom: 10px;
	background: rgba(0, 0, 0, 0.1);
}

.pageheaderText {
	width: 100%;
	text-align: center;
	font-weight: normal;
	text-decoration: underline;
	font-size: 1.2rem;
	color: var(--bodytxt-color);
	margin-bottom: 5px;
}

.bodyText {
	text-align: left;
	font-weight: normal;
	font-size: 1.0rem;
	color: var(--bodytxt-color);
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
}

.indent1 {
	margin-left: 10px;
}

.indent2 {
	margin-left: 10px;
}

.clickText {
	cursor: pointer;
	color: blue;
}

#inputPreview {
	display: flex;
	gap: 20px;
	justify-content: center;
}

@media screen and (pointer: coarse) and (orientation: portrait) and (max-width:641px) {
	html {
	  transform: rotate(-90deg);
	  transform-origin: left top;
	  width: 100vh;
	  overflow-x: hidden;
	  position: absolute;
	  top: 100%;
	  left: 0;
	}
  }