/*div {
	debugging L&F
 	border: 3px dotted red; 
}
div > div {
	debugging L&F
 	border: 3px dashed green; 
}*/

:root {
	--icasa-corporate-green: #5a9e68;
	--icasa-corporate-yellow: #ffb32b;
	--csir-corporate-blue: #003669;
	--csir-corporate-grey: #b2b6ba;
}

/*Override jquery datatable*/
table.dataTable tbody tr {
	background-color: transparent;
}


@font-face {
	font-family: 'LeagueGothic';
	src: url('../css/webfonts/league-gothic-master/webfonts/leaguegothic-condensed-regular-webfont.html');  /* IE9 Compat Modes */
	src: 
		url('../css/webfonts/league-gothic-master/webfonts/leaguegothic-condensed-regular-webfont-2.html') format('woff'), /* Pretty Modern Browsers */
		url('../css/webfonts/league-gothic-master/webfonts/leaguegothic-condensed-regular-webfont-3.html') format('truetype'), /* Safari, Android, iOS */
		url('../css/webfonts/league-gothic-master/webfonts/leaguegothic-condensed-regular-webfontd41d.html?#iefix') format('embedded-opentype'); /* IE6-IE8 */
		/*url('../css/webfonts/league-gothic-master/webfonts/leaguegothic-condensed-regular-webfont.svg#league_gothic_condensedRg') format('svg');*/
	font-weight: normal;
	font-style: normal;
}

#auditLink {float:right}

.nowrap {
	white-space: nowrap
}

html, body {
	padding: 0;
	margin: 0;
	min-width: 100%;
	/*older chrome, vivaldi*/
  min-height: 100vh;
  min-height: 100%;
}

html {
 font-family: Arial, Helvetica, sans-serif;
}

a {
 font-family: Arial, Helvetica, sans-serif;
 text-decoration: none;
 color:#1c546b; 
}

th, td {
	 color:#0E102C; 
}
	

body {
	display: flex;
	flex-direction: column;
}

body container div,
body header div,
body footer  div,
body footer {
	padding: 0.2% 0.4%;
}

body header div a {
	text-decoration: none;
	color: #2b2b2b;
}
body header #logoHeader {
	min-width: 100%;
	height: 114px; /*Height determined by banner clipping. Image must have no space*/
	background: transparent
			linear-gradient(to bottom, 
				white 76%,
				#0B0B31 76%, #0B0B31 100% 
			)
			;
	/*relative because we want absolute within boundaries*/
	position: relative;
	display:flex;
		margin:0;
	padding:0;
}
body header #logoHeader #logoHolder {
	background-image: url('../img/chrome/yellowWave2.html');
	background-repeat: no-repeat;
	background-position: bottom left;
	/*make sure logos have enough space*/
	min-width: 400px;
}

body header #logoHeader #logoHolder img{
	margin: 4px 12px 6px;
	
}

/*body header #logoHeader  div {
	padding: 0;
	margin: 0;
}*/


#logoHeader #loginFormHolder {
	min-width: 10%;
	padding: 6px 8px;
/*	background:
				linear-gradient(to right, 
				white 98%,
				#0B0B31 98%, #0B0B31 100% 
			)
			;*/
}

#logoHeader #expandingSpaceHolder{
	/* Lets this column shrink/grow to available width */
	flex:1 1 auto; 

	background-image: url('../img/chrome/yellowWave.html');
	background-repeat: no-repeat;
	background-position: top right;
	/*So we can absolutelyu position childen inside it*/
	position:relative;
	/*overflow: hidden;*/
}
 #swish {
	position: absolute;
	top:58%;
	right:10%;
}


#banner {
	width: 40%;
	padding: 0;
	margin: 0;
	position:absolute;
	right:0;	
	top:0;
}

#banner img {
	/*Expand with container*/
	width:100%;
}

 
#logoHeader #bannerSpacingHolder {
	/*Cant see this excpet on resolutions near and smaller than 800 pixles*/
		background-color:#0B0B31;
}
 #logoHeader #bannerSpacingHolder,
 #menuBarHeader #menuBarSpaceHolder
 {
	/*makes sure The login form and menubar don't dissappear behind the banner'*/
	min-width: 34%;
	
}

header #menuBarHeader {
	padding: 0;
	margin: 0;
	/*min-width: 100%;*/
	/*min-height: 10px; Height determined by banner clipping. IMage must have no space*/
	display: flex;
	flex: 1 1 auto;
}


#menuBar {
	margin-bottom: 0;
	width:140%;
	display: flex;
	flex-flow: row wrap;
}

#menuBar ul.menu {
	white-space: nowrap;
	min-width: max-content;
}

.ui-menu > .ui-menu-item {
	width:100%;
	min-width:100%;
}	


header #menuBarHeader #menuBarHolder{
		/* Lets this column shrink/grow to available width */
	flex:1 1 auto; 
	    margin: 0;
    padding: 0;
}


body header {
	min-width: 100%;
	margin:0;
	padding:0;
	display: flex;
	flex-direction: column;
}


header div#firstHeader {
	background-image: url('../img/chrome/yellowWave2.html');
	background-repeat: no-repeat;
	background-position: 0 86px;
	/*min-width: 333px;*/
	min-width: 25%;
}


#icasaLogo{
	height:72px;
	position: absolute;
	top: 5px;
	left: 15px;
}
#csirLogo{
	height:72px;
	position: absolute;
	top: 5px;
	left: 280px;

}

header div#thirdHeader {
	width:8%; 
	min-width: 50px;
	display: flex;
	flex-direction: column;
	padding: 0;
}

 #loginDetail {
	min-width:10%;
	position:relative;
}
header div#thirdHeader #headerBand{
	padding: 1px;
	height:34px;
	
}
header div#thirdHeader #menuSpace {
	border-right: 3px solid #fca40e;
	/*padding: 5px;*/
	min-height:20px;
	text-align: right;
	
}

header div#secondHeader {
	flex: auto; /*Fill the space*/
	background-image: url('../img/chrome/yellowWave.html');
	background-repeat: no-repeat;
	background-position: top right;
	/*This is needed by menu bar to align absolutely to bottom in a relative way*/
	position: relative;
}

#secondHeader svg {
	float:right;
	margin: 68px 0 0 200px;
}

#firstPane {
	flex: 1 1 12%;
	margin: 8px
}

#secondPane {
	flex: 3  1 auto;
	margin: 8px

}
#thirdPane {
	flex: 1 1 12%;
	margin: 8px
}

container {
	width:100%;
	clear: both;
	display: flex;
	flex:auto;
}

container > div {
	/*border:solid grey thin;*/
	margin: 0.1%;
}

footer {
	height: 50px;
}

#menu {
	 width:60px;
	 background-color: transparent;
	 border:none;
	 float:right;
}

#menu ul {
	width:300px;
}
#errorMessages {
	position:absolute;
	left:0;	
	bottom:3px;
}


#errorMessages p {
	text-align: left;
	color: white;
	font-size: small;
	padding: 8px;;
	margin: 0;
	padding: 2px;
}

/*===========================frameFragment======================================*/
.outerframe {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0 auto;
	min-height: 450px;
	min-width: 760px;
	width:auto;
	border: 1px solid #fdb945;
}

.frameheader {
	min-height: 50px;
	background-color: #1c546b;
	background: #1c546b url('../img/chrome/add_edit/squiggles.html')  no-repeat;
	padding:2%;
	text-align: center;
	vertical-align: middle;
	color: white;
	text-shadow: 2px 2px black;
	font-size: 24px;
	display: flex;
	flex-direction: column;
}
.frameheader i a,
.frameheader i {
	color:white;
	font-size: 16px;
}

.frameheader i {
	float: right;
}

.frameContent {
	background-color: white;
	padding:2%;

	flex: auto;
	background: url('../img/chrome/add_edit/scattered_blocks.html')  no-repeat;		/*fallback for non supporting browsers*/
	background: url('../img/chrome/add_edit/scattered_blocks.html') no-repeat 70% 50%, 
	linear-gradient(to right, white 5%, 
														#c6cdd0 5%, #c6cdd0 10%, 
														#f2f2f2 10%, #f2f2f2 20%, 
														white 20%, white 100%) repeat-y;

	font-size: 12px;
}
/*===========================end frameFragment==================================*/

/*===========================forms==================================*/
label.formLabel.required:before { 
	content: "* " ;
	/*margin-left:10px;  so that label text lines up*/
}

label.formLabel:after {
	content: ": " ;
}

label.formLabel {
	margin-right: 5px;
	/*This lines up the input fields*/ 
	display: inline-block; 
	width: 260px; 
	text-align: right;
}

.forminput {
	margin-left: 268px; 
	margin-top: 5px;
}

.buttonHolder{ 
	/*Same distance as label's width*/
	margin: 3% auto auto 260px;
}

input[type="submit"], button {
		min-width: 10px;
}
input[type="checkbox"], input[type="radio"] {
    border: none;
    box-shadow: none;
		min-width: 10px;
}
select {
	width: 252px;
}
input {
	min-width: 250px;
}

textarea {
	min-width: 247px;
	min-height: 120px;
}

input:read-only { 
    background-color: transparent;
		border: none;
}

input:disabled { 
    background-color: transparent;
		border: none;
}

fieldset {
	margin: 1% 0.5%;
	border-color: lightgray;
	box-shadow: 2px 2px 2px  #f2f2f2;
}

fieldset[disabled] {
	border:none;
	box-shadow: none;
}

legend {
	padding-left: 30px;
	padding-right: 30px;
}

.errorList {
/*	position: relative;*/
	margin-left: 240px;
	color: #002E6F;
	font-size: 13px;
	text-shadow: 1px 2px #eeeeee;
	border-left: #fca40e 3px solid;
	list-style-type: lower-roman;
	/*list-style-image: url(../img/chrome/yellowWave2.svg);*/

}
.errorList li {
	margin-left: -12px;
}

[class^="icon-"],
[class*=" icon-"] {
	white-space:nowrap;
}

/*===========================end forms==================================*/
.listContainer {
	width: 100%;
}

.listContainer thead tr th {
	border-bottom: solid #fca40e thin;
}

th {
	text-align: left;
}

/*===========================custom data-tables style =====================*/
button.dt-button.active {
    background: grey !important;
}
.underline {
  text-decoration: underline;
}