/*Version 25 */
:root {
	--EESSblue: #23378B;
}
@font-face {
	font-family: 'Calibri';
	src: url('css/Calibri.ttf');
	font-weight: normal;
}

body {
	margin:0px;
	font-family: Droid Sans,Calibri,Helvetica,Arial;
	color: #000;
	background-color:#fff;
}
h1,h2,h3 {
	font-family: Mako, Helvetica, Arial;
	color: #23378B; /* originally 00438a but the logo was in this slightly darker looking colour so changed it to match */
	font-weight:normal;
	margin-top:0;
	margin-bottom:0.5em;
}
h4 {
	font-family: Mako, Helvetica, Arial;
	color: #23378B;
	font-size:1.5em;
	font-weight:bold;
	margin-top:0.4em;
	margin-bottom:0.1em;
}
h5 { /* used in Checklist.php for the template inserted headings*/
	/* Needs to have space at the top & bottom */
	font-family: Mako, Helvetica, Arial;
	color: #23378B;
	font-size: 1.5em;
	font-weight: normal;
	margin-top: 0.8em;
	margin-bottom: 0.4em;
}
h6 {
	font-family: Mako, Helvetica, Arial;
	color: #000;
	font-size:1em;
	font-weight:600;
	margin-top:0.2em;
	margin-bottom:0.2em;
}
.h1span {
	font-family: Mako, Helvetica, Arial;
	color: #23378B;
	font-size:2em;
	font-weight:normal;
}
.subheading {
	display:inline-block;
	margin-bottom:0.5em;
	font-weight:bold;
}
hr {
	color: var(--EESSblue);
}
a {
	outline:none;
	color:#0000ff;
}
table {
	width: 100%;
}
table,td,th {
	border: 1px solid #23378B;
	border-collapse:separate;
	border-spacing:0;
}
td,th {
	vertical-align:middle;
	padding:2px 5px 2px 5px;
	/* margin:10px 0px 0px 0px; magin doesn't apply to table cells */
}
th {
	padding-left:5px;
	text-align:left;
}
em {
	font-size:0.9em;
	font-style:italic;
}
input[type="submit"], input[type="button"], button {
	background-color:#23378B;
	border-color:#23378B;
	padding: 4px 12px;
	border-radius: 3px;
	border: medium none;
	cursor: pointer;
	font-weight:bold;
	color:#ffffff;
	font-size:0.95em;
}
.lbButton, input[type="submit"].lbButton { /*light blue button. Used for non-saving button*/
	background-color:#00aaff;
	/*border-color:#23378B; */
	margin-bottom: 2px;
	padding: 4px 12px;
	border-radius: 7px;
	border: medium none;
	cursor: pointer;
	box-shadow: 1px 0.5px 3px 0 #000;
	font-weight:bold;
	color:#ffffff;
	font-size:0.95em;
	text-shadow: #000 1px 1px 4px;
}
textarea {
	resize: vertical;
}
input[type="text"], input[type="email"], input[type="number"],
textarea, input[type="date"] {
    padding: 2px 7px 3px 7px;
    margin: 1px;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    background-color: #E9E9E9;
    color: #000;
    border-color: #52438a;
    font-size: 1.05em;
	font-family: Calibri, Droid Sans, Helvetica;
}
select {
    margin: 0px 1px 0px 1px;
    padding: 2px 7px 3px 7px;
	font-size: 1em;
    border: 1px solid #52438a;
    border-radius: 3px;
}
img {
	border:0;
}
.clear {
	clear:both;
}
.wa { /*width auto */
	width:auto;
}
.hp {
	display:inline-block; /*This is for Dashboard.php */
	margin:0;
	padding:0.5em;
}
.large {
	font-size: 1.4em;
}
.largebold {
	font-size: 1.4em;
	font-weight:bold;
}
.smalltext90 { font-size:0.9em; }
.s80 { font-size:0.8em; }
.bluetext {
	color: #23378B;
}
.LargeBlueText {
	font-size:1.2em;
	font-weight:bold;
	color:#0000ff;
}
.brt { /* big red text */
	color: #f00;
	font-size:1.2em;
	font-weight:bold;
}
.yellowBG, td .yellowBG { /*the td class is to give higher precedence to hightlight buttons in UpdateApplication */
	background-color:#ff0;
	color:#000;
}
.orangeBG, td .orangeBG {
	background-color:#ffa000;
}
.red { /* red. Overdue */
	background-image: linear-gradient(to top,#ff0000aa,#ff777777);
}
.redBG, td .redBG {
	background-color:#f00;
}
.rb { /* red background & bold */
	background-color:#ff0000;
	font-weight:bold;
}
.rbt { /* red bold text */
	color:#f00;
	font-weight:bold;
}
.g { /* green */
	background-image: linear-gradient(to top, #00aa00ff,#00ff00ff 90%);
}
.greenBG, td .greenBG {
	background-color:#00b050;
}
.greenBGfading, td .greenBGfading {
	background: linear-gradient(to right, #00ff50, #00b050);
}
.medBlueBG, td .medBlueBG {
	background-color:#007fff;
	color:#ffffff;
}
.blueBG, td .blueBG {
	background-color:#00bfff;
}
.blueborder {
	box-shadow: 0 0 2px 3px #003cff;
}
.deleted { /* show deleted records with strike-through. */
	text-decoration:line-through;
}
.deactivated {
	background-color:#555;
	color:#fff;
}
.deactivated a {
	color:#3ab5ff;
}
.flexboxcontainer {
	display:flex;
}
.flexboxcontainer label {
	margin-top: 0.35em;
	margin-right: 4px;
}
.flexboxcontainer select {
	margin:1px 0 1px 5px;
	padding-top:0;
	padding-bottom:0;
}
.FBexpandingElement {
	flex: 1 1 auto;
}
.FBexpandingElement input[type="text"] {
	width: calc(100% - 16px);
}
.FBunits {
	margin-top:1px;
	margin-right:0;
	margin-left:4px;
}
.FBunits > select {
	padding: 3px 3px 4px 3px;
	margin-right:0;
}
.flexboxcontainer2 {
	display:flex;
}
.flexboxcontainer2 select {
	margin-right:5px;
	padding-top:0;
	padding-bottom:0;
}
.largeCB { /*Large Checkbox */
	width:1.5em;
	height:1.5em;
	margin: 1px auto;
}
.CustLogo { /*Customer uploaded logo */
	max-height:1.8em;
}
.expired {
	margin-left:0.3em;
	padding: 0.1em 0.2em;
	-webkit-appearance:none; /*This enables it in Safari & Chrome*/
	box-shadow: 0 0 2px 3px #ff0000;
	border-radius:0.3em;
	color:#f00;
}

#header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:0em 0em 0em 0em;
	height:70px;
	z-index:3;
}
#headerbg {
	background-color:#ffffff;
	max-width:1030px;
	height:4em;
	margin:0 auto;
	padding-left:1em;
}
#headerbgFlexWidth {
	background-color:#ffffff;
	width:auto;
	height:4em;
	margin:0 4em;
	padding-left:1em;
}
#headerbgFlexWidth2Percent { /*This is used for a bit more usable space */
	background-color:#ffffff;
	width:auto;
	height:4em;
	margin:0 2%;
	padding-left:1em;
}
#headerbgFullWidth {
	background-color:#ffffff;
	width:auto;
	height:4em;
	margin:0;
	padding-left:0.8em;
}
#header .header_logo {
	float:left;
	padding:0.3em 0;
}
#applications {
	float:left;
	padding:1em 1em 1em 2em;
}
#save {
	float:right;
	padding:1em 1em 1em 1em;
}
#savewithmenu {
	position:relative;
	top:-1em;
	float:right;
	padding:0 1em 1em 1em;
}
#savewithmenu2 {
	position:relative;
	top:0.3em;
	float:right;
	padding:0em 1em 1em 1em;
}
#savewithmenuflexwidth {
	position:relative;
	top:0.7em;
	float:right;
	padding:0 1em 1em 1em;
}
#updated { /* Made for ChecklistTemplates.php so when questions are re-ordered, updated with the time will appear this colour then the colour will change with JS */
	float: right;
	margin: 0.3em;
	padding: 0.2em 0.2em 0.1em 0.2em;
	border-radius: 0.3em;
	color: #fff;
	background-color: #00f;
	font-weight: bold;
}
#svgLogo {
	width:9.4em;
	margin-top:0;
}
#svgLogo2 {
	width:9.4em;
	padding-top:0.0em;
}
#main {
	margin-top:70px;
}
#mainbg {
	position:absolute;
	left:0;
	width:100%;
	height:30em;
	background-image: url('circuits_02.jpg');
	background-repeat: repeat-x;
	z-index:0;
}
#bluebar {
	position:absolute;
	bottom:0;
	width:100%;
	height:5em;
	background-color:#23378B; /* originally 00428a but changed to 23378B to match logo */
	z-index:1;
}
#pageContent {
	position:relative;
	margin:0 auto;
	width:1030px;
	min-height:20em;
	padding-top:1px;
	padding-left:0.7em;
	padding-right:0.7em;
	font-size:1em;
	background-color:rgba(255,255,255,0.9);
	min-height:380px;
}
#pageContentFlexWidth {
	position:relative;
	width:auto;
	margin:0 4em;
	min-height:20em;
	padding-top:1px;
	padding-left:0.7em;
	padding-right:0.7em;
	font-size:1em;
	background-color:rgba(255,255,255,0.9);
	min-height:380px;
}
#pageContentFlexWidth2Percent {  /*This is used for a bit more usable space */
	position:relative;
	width:auto;
	margin:0 2%;
	min-height:20em;
	padding-top:1px;
	padding-left:0.7em;
	padding-right:0.7em;
	font-size:1em;
	background-color:rgba(255,255,255,0.9);
	min-height:380px;
}
#pageContentFullWidthFlex {
	position:relative;
	width:auto;
	margin:0em;
	min-height:20em;
	padding-top:1px;
	padding-left:0.7em;
	padding-right:0.7em;
	font-size:1em;
	background-color:rgba(255,255,255,0.9);
	min-height:380px;
}
#copyright {
	padding:1em 0em 2em 0em;
	font-size:0.8em;
	background-color:#222222;
	color:#B0B0B0;
	z-index:2;
}
#copyright a { color:#cccccc; }
.copyright_right { float:right; }
.copyright_left { float:left; }

#errorbox {
	position:relative;
	padding:0.3em 0em 0.3em 0.5em;
	background-color:#ffbbbb;
	border:2px solid red;
	border-radius:8px;
}
#ShowErrors { /*Initialy not displayed. Shown when ErrorBox is hidden */
	padding:0.5em 0.8em 0.5em 0.5em;
	display:none;
}

#OnHoldReason {
	position:fixed;
	top:30%;
	left:30%;
	width:30em;
	padding:1em;
	height:16em;
	display:none;
	background-color:#ffffff;
	border:4px solid #23378B;
	border-radius:20px;
	box-shadow: 0px 0px 2em #000;
	font-size:1em;
	z-index:4;
}

#NonConformityDetail, #NonConformityResolutionDetail {
	position:fixed;
	top:30%;
	left:15%;
	min-width:70%;
	padding:1em;
	display:none;
	background-color:#ffffff;
	border:4px solid #23378B;
	border-radius:20px;
	box-shadow: 0px 0px 2em #000;
	font-size:1em;
	z-index:4;
}

#F05rightFloat {
	float: right;
	border: 3px solid #23378B;
	border-radius:10px;
	width: 17em;
	padding:0.5em;
}

#AppSVtopTable td:nth-child(2) { /*nth child allows for the th to be the first child */
	padding-left: 0.3em;
}

.container {
	position:relative;
	margin: 0px auto;
	max-width:1030px;
}
.containerFlexWidth {
	position:relative;
	margin: 0px 5em;
}
.buttonlink {
	padding:0.3em 1em;
	margin: 0.1em;
	border-radius:4px;
	background-color:#23378B;
	color:#ffffff;
	font-weight:bold;
	text-decoration:none;
}
.marginstopbottom { /* for spans not divs */
	display: inline-block; /* This is required for margin for span elements */
	margin: 0.5em 0em;
}
.fw { /*full width */
	width:calc(100% - 16px);
}
.hw { /*half width. This is full width, but for a smaller column */
	width:91%;
}
.it { /*incomplete text input or textarea*/
	-webkit-appearance:none; /*This enables it in Safari & Chrome*/
	box-shadow: 0 0 2px 3px #ff0000;
}
.if { /*incomplete field */
	font-weight:bold;
	color:#ff0000;
}
.center {
	text-align:center;
}
.noborder, .noborder td, .noborder th {
	border:none;
	padding:3px 0;
}
.autowidth {
	width:auto;
}
.fl { /* float left */
	float:left;
}
.fl3c { /* float left 3 column*/
	float:left;
	width:33%;
	padding-right:1em;
}
.paddingLR2px td {
	padding-left:2px;
	padding-right:2px;
}
.toolbarbutton {
	float:left;
	padding:1em 0em 1em 2em;
}
.ra { /*right align*/
	text-align:right;
}
.r { /* align right */
	text-align:right;
}

#tabrow {
	margin-top:0.4em;
	margin-bottom: 0.5em; /*Not in EESSstylesAdmin to not interfere with other pages */
}
.tab {
	padding:0.3em 1em 0.2em 1em;
	margin: 0.1em;
	margin-top:0.2em;
	border-radius:12px 12px 0px 0px;
	border: 1px solid #00438a;
	background-color:#00438a;
	background: linear-gradient(to right, #00438a, #00438aa0);
	font-weight:bold;
	text-align: center;
	text-decoration:none;
	text-shadow: none;
}
.tabActive {
	padding:0.3em 1em 0.2em 1em;
	margin: 0.1em;
	margin-top:0.2em;
	border-radius:12px 12px 0px 0px;
	background: linear-gradient(to right, #ffffff, #00438a50);
	color:#0043ff;
	border: 1px solid #00f;
	font-weight:bold;
	text-align: center;
	text-decoration:none;
	text-shadow: none;
}
#tabrow .tabActive {
	color:#0043cc;
}
#tabrow a {
	color:#ffffff;
}
#tabrow a:hover {
	background: linear-gradient(to right, #ffffff, #00438a50);
	color:#00438a;
	border: 1px solid black;
}
.TabDiv {
	background-color: #fff;
}

#ProgressOverviewTable, #ProgressOverviewTable td, #ProgressOverviewTable th {
	border:none;
}
#ProgressOverviewTable th {
	padding-left:0;
}
#ProgressOverviewTable td {
	padding:3px 4px;
}
#ApplicationHistory {
	width: auto;
}
#ApplicationHistory td:first-child {
	text-align:right;
	min-width: 8em; /* for dates as long as 30/12/2023 to be on one line */
}
#ApplicationHistory td:nth-child(3) {
	min-width: 5.5em;
}
#ReportAdjustments td {
	padding-right:0.5em;
}
#ReportAdjustments td input {
	margin-left:0;
}
#StandardReport td:nth-child(0n+1) {
	width:8em;
}
#StandardReport td:nth-child(0n+4) { /*this is to right align the date column*/
	text-align:right;
	width:10em;
}
#ReviewedByReport td:nth-child(0n+4) { /*this is to right align the date column*/
	text-align:right;
}
#ReviewedByReport td:nth-child(0n+5) { /*this is to right align the date column*/
	text-align:right;
}
#TurnaroundReport td:nth-child(0n+1) { width:8em; }
#TurnaroundReport td:nth-child(0n+4) { /*this is to right align the date column*/
	text-align:right;
}
#TurnaroundReport td:nth-child(0n+5) { /*this is to right align the date column*/
	text-align:right;
}
#TurnaroundReport td:nth-child(0n+6) { /*this is to right align the date column*/
	text-align:right;
}
#TurnaroundReport td:nth-child(0n+7) { /*this is to right align the date column*/
	text-align:right;
}
#CertificationTypeReport { background-color: #fff; }
#CertificationTypeReport td:nth-child(0n+1) { width:8em; }
#CertificationTypeReport td:nth-child(0n+5) { text-align:right; }
#CertificationTypeReport td:nth-child(0n+8) { text-align:right; }

#JASANZreport { background-color: #fff; }

#StatisticsReport td:nth-child(0n+4) { text-align:right; }
#StatisticsReport td:nth-child(0n+6) { text-align:right; }
#StatisticsReport td:nth-child(0n+7) { text-align:right; }
#TrainingReport td:nth-child(0n+3) { text-align:right; }
#Discounts td { text-align:right; }
#Discounts td:nth-child(0n+2) { text-align:left; }
#Discounts td:nth-child(0n+10) { text-align:right; }
#DefaultPrices { width:auto; }
#DefaultPrices td { text-align:right; }
#DefaultPrices td:nth-child(0n+8) { text-align:left; }
#SearchResults td:nth-child(0n+7) { text-align:right; }

#DocumentsTable td:nth-child(2) { text-align:center; }
#DocumentsTable td:nth-child(3) { text-align:center; }
#DocumentsTable td:nth-child(5) { text-align:center; }
#DocumentsTable td:nth-child(6) { text-align:center; }
#DocumentsTable td {
	padding-bottom: 0; /* compensate for vertical alignment being off */
}
#DocumentsTable input[type="checkbox"] {
	width:1.5em;
	height:1.5em;
	margin: 1px auto;
}
#CertifiedComponentsTable td:nth-child(6) {
	text-align:center;
	width: 4em;
}
#CertifiedComponentsTable input[type="checkbox"], #TestReportTable input[type="checkbox"] {
	width:1.5em;
	height:1.5em;
	margin: 1px auto;
}
#TestReportTable td:nth-child(5) {
	text-align:center;
	width: 4em;
}

#StaffLogins, #StaffBadUser {
	width:auto;
}
.ColumnStripes td, .ColumnStripes th {
	border:0;
	padding:0.7em;
}
.ColumnStripes {
	border:0;
}
.ColumnStripes td:nth-child(2n), .ColumnStripes th:nth-child(2n) {background-color:#bdd0ff; }
#StaffLogins td { text-align:center; }
#StaffLogins th:first-child, #StaffLogins td:first-child {
	position:sticky;
	left:0;
	background-color:#fff;
	padding-left:0.1em; /*compensate for pageContentFlexWidth padding. This lines the table text with the heading*/
}
#StaffLogins td:nth-child(0n+1) {text-align:left; }
#StaffLogins td:nth-child(0n+2) {text-align:right; color:#000; }
#StaffLogins td:nth-child(0n+3) {text-align:right; }
#StaffLogins td:nth-child(0n+4) {text-align:right; }

#EditStaffLogin {
	width:auto;
	border:0;
}
#EditStaffLogin td, #EditStaffLogin th {
	border:0;
	padding:0.5em;
}

#menu {
	float:left;
	margin-left:3em;
}
/* menu2 is for the div that the menu sits inside */
#menu2 { /* used in UpdateApplication.php, EditApplication.php, ApplicationStaffView.php */
	margin-left:11em;
	width:calc(100% - 17em);
}

.onPrintBlock { display:none; }

/*ProfileSheet is the Model/Profile information on the Models tab of ApplicationStaffView */
#ProfileSheet {
	border: 0;
	border-collapse:separate; /*It can't be collapse because else the borders of the heading role scroll away. Working around with 0 width. */
	border-spacing:0px;
	/* The following is needed to make it scroll left to right */
	display: block;
	width: 100%;
	overflow-x: scroll;
}
#ProfileSheet tr {
	border:none;
}
#ProfileSheet th {
	padding-left:0.2em;
	padding-right:0.2em;
	background-color: #fff;
	border-top:1px solid var(--EESSblue);
	border-bottom: 1px solid var(--EESSblue);
	border-left: 0;
	border-right:1px solid var(--EESSblue);
	border-spacing:0px;
	border-collapse:separate;
	background-clip:padding-box;
	z-index: 1;
}
#ProfileSheet td {
	border-left: 0;
	border-right: 1px solid var(--EESSblue);
	border-top: 0;
	border-bottom: 1px solid var(--EESSblue);
}
#ProfileSheet tr td:first-child {
	position:sticky;
	left:0px;
	background-color: #fff;
	border-left:1px solid var(--EESSblue);
	border-spacing:0px;
	border-collapse:separate;
}
#ProfileSheet tr:first-child th:first-child {
	position:sticky;
	left:0px;
	border-left:1px solid var(--EESSblue);
	background-color: #fff;
	z-index: 2; /*This stops this corner cell scrolling*/
}

@media print {
	h1, h2 { margin:0; }
	.noPrint { display:none; }
	.onPrintBlock { display:block; }
	.container { width: auto; }
	#pageContentFlexWidth {
		margin:0;
		padding:0;
	}
	#headerbgFlexWidth {
		margin:0;
		padding:0;
	}
}
@media screen and (max-width: 820px) { /*This width doesn't seem to be the exact point when the move happens.
	It moves at about widnow width 1024px when the Firefox inspector is showing 810px on the html element*/
	.narrowvanish {
		display:none;
	}
}