:root {
	--primary: #3DA892; /*rgb(61, 168, 146)*/
	--primarylt: #4FBFA9;
	--secondary: #4A739B;
	--secondarylt: #5884AF;
	--success: #309261;
	--successlt: #39AC73;
	--warning: #FFDD00;
	--warninglt: #FFE948;
	--warningwashed: #FFF9CE;
	--error: #CC3300;	
	--errorlt: #EA3A00;
	--errorwashed: #FFAF95;
	--info: #2E5AB8;
	--infolt: #4F79D2;
	/*--*/
	--bglight: #FFFAFA;
	--bgmed: #F5F5F5;
	--txtdark: #242931;
	--txtlight: #efefef;
	--pwashed: #CAECE6;
	--swashed: #D5EBFF;
	--gwashed: #FEEEBC;
	--gold: #fabe0c;
	--goldlt: #FBCB3C;
	--whitesmoke: #F5F5F5;
	/*---*/
	--borderradius: 5px;
	--dropshadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
	
}
html {
  /*font-family: sans-serif; *//* 1 */
  font-family: "Red Hat Display";
  -webkit-text-size-adjust: 100%; /* 3 */ 
  -ms-text-size-adjust: 100%; /* 3 */
}

p {
	text-align: justify;	
}


/*GENERAL*/

.d-none,
.d-hide,
.notsearch,
.hideit {
  display: none !important;
}

.syssvg {
	position: relative;
	top: 5px;
}

.stdlinklt {
	color: var(--infolt) !important;
}
.stdlinklt:hover {
	cursor: pointer;
	color: var(--info) !important;
	font-weight: 600;
}

.stdlinkblk {
	color: black !important;
}
.stdlinkblk:hover {
	cursor: pointer;
	color: var(--infolt) !important;
}

.stdlink {
	color: var(--info);
}
.stdlink:hover {
	cursor: pointer;
	color: var(--infolt);
}

.hrlt {
	background-color: #efefef; 
	height: 1px; 
	border: 0;
}

.hrdk {
	background-color: #333; 
	height: 1px; 
	border: 0;
}

.notused, .donotuse {
	display:none;
}

.mphero {

	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	/*padding: 2rem 1rem;*/
	position: relative;
	background-color: var(--secondary);
	color: black;
	background-repeat: repeat-x;
	background-image: url('/assets/images/herostripes.png');
	background-position: right center;	
	background-size: auto 100%;
	border-top: 4px solid black;

}


/* custom checkbox */
.mpchkbox-input {
    opacity: 0;
    position: absolute;
}

.mpchkbox-control {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
    background-color: white;
    color: #444;
    border: 2px solid var(--txtdark);
}

.mpchkbox-input:checked+.mpchkbox-control:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background-color: var(--info);
}

.mpchkbox-input:checked+.mpchkbox-control {
    border-color: var(--info);
}

.mpchkbox-label {
	position: relative;
	top: 2px;
}

/*
.mpchkbox__control {
  transform: scale(0.75);
}
*/
.lm_content {
  overflow: auto !important;
  scrollbar-width: thin !important;
}


/*APPLICATION LAYOUT*/
.navbar {
	position: sticky;
	top: 0;
	min-height: 2rem;	
	background-color: white;
	z-index: 4;
}

#topnav {
	background: black;
	height: 3rem;	
	/*border-bottom: 1px solid #efefef;*/	
}

.toprticons {
	top: -2px;
	
}

#infobarcont {
	top: 0;
	position: sticky;
	z-index: 2;
}

.notificationcont {
	text-align: left;
	position:absolute;
	z-index:99;
	width:100%
}

#viewnote {
	padding: 0 .2rem;
}

#bottomnav {
	font-size: 90%;
	background-color: black;
}

#bottomnav section {
	padding: 3px 10px;
	min-width: 300px;
}

.hamburger {
	position: relative;
	left: 10px;
	top: 5px;
}

.topmerge {
	top: 0;
}

.topburgerclk:hover, .topmerge:hover {
	cursor: pointer;
}

.mergetopsvg {
	position:relative;
	top:3px;
}

.accountsection {
	padding-right: 10px;	
}


.flexcont {
  display: flex;
}

.menu-side {
	font-size: .8rem;
	width:280px;
	max-width: 100vw;
	position: fixed;
	bottom: 0;
	overflow-x: hidden;
	white-space: nowrap;
	padding: 0 10px 0 10px;
	min-height: calc(100vh - 3rem);
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s; 
	/*background: rgb(0, 0, 0, 0.8);*/
	z-index: 21;
	background: black;
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter: blur( 2.5px );
	-webkit-backdrop-filter: blur( 2.5px );
}


.menu-side.hide {
	width: 0;
	padding: 0;
}

#mainmenu {
	.nav-item {
		padding: 4px 0 6px 0;
	}
	
	.nav .nav-item:not(.containerlink):focus,
	.nav .nav-item:not(.containerlink):hover,
	.nav .nav-item.active,
	.nav .nav-item.active:hover	{
		color: var(--txtdark);
		background-color: #000;
		box-shadow: 0 0 0 100vmax #000;
		clip-path: inset(0 -100vmax); 
	}
}

#loginregcont, #loginregcontb {
	display:inline-block;
	position:absolute;
	z-index:8;
	right:15px;
}

#moblogo {
	display: none;	
}	

#loginregcont button {
	font-weight:600;
	position: relative;
	top: 2px;
}

#loginbutton {
	color: var(--info);
}


#loginregcont:hover, #loginregcontb:hover {
	font-weight: 600;
}

.appmenu-cont .parentlink{
	text-transform: uppercase;	
}

.parentlink a:hover {
	cursor: pointer;	
}

.appmenu-cont .childlink{
	padding-left: 1rem;	
}

.content-side {
  /*flex: 1;*/  
  scrollbar-gutter: stable;
  background-color: white;
  color: var(--txtdark);
  min-height: calc(100vh - 5rem);
  padding: 0;
  min-width: 0;
  /*border-left: 1px solid #ccc;*/
}

.main-content {
	min-height: calc(100vh - 5rem);
}

.paddedcontent {
	width:96%;
	max-width:1500px;
	padding:2rem;
	background-color:white;
	margin:auto;
}


#cookieconsent {
	background-color:gainsboro;
	width:600px;
	position:sticky;
	bottom:0;
	left: calc(50% - 300px);
	z-index:11;
	text-align:center;
	padding:10px;
	border:2px solid var(--error);
	display:none;
}


#logincont {
	margin: 2rem auto 1rem auto;
	padding: .5rem .75rem;
	max-width: 90% !important;
    width: 600px !important;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    color: white;
	border-radius: 4px;
}

#viewtoolbar, #viewtoolbar2 {
	min-height: 50px;
	vertical-align: middle;
	position:relative;
}

.viewtool {
	position: relative;
	top:7px;
}

.viewtoolbaricon {
	top:-1px;	
}

.viewtitle {
	line-height: 48px; 
	vertical-align: middle;
	font-size: 160%;
	font-weight: 600;
}
.mergeselect {
	background-color: white !important;
	border: 2px solid black !important;
}
.viewsettings {
	padding: 0 .4rem;
	background-color: #eee;	
	min-height: 48px;
	padding-top: .3rem;
}

.selectionbutt {
	position: relative;
	bottom: 2px;
}

.dashsettingsico {
	top:-1px;	
}

.exptable {
	width: 100%;
	padding: 1rem;
	border: 1px solid #ccc;
	position: relative;
}
	
.lbltop {
	vertical-align:top;
}

@media screen and (max-width: 799px) {
	
	#loginregcont {
		top: 3.5rem;
	}
	
	#loginregcont button {
		margin: 0 5px;		
	}
	
	#loginbutton {
		color: white;
		background: var(--success);	
	}
	
	#glossarycard {
		display:none;	
	}
	
}

@media screen and (max-width: 599px) {
	.menu-side {
		width: 100vw;
	}
	
	.menu-side, .content-side, .main-content {
		min-height: calc(100vh - 5rem);
	}	
	
	#desklogo {
		display: none;	
	}
	
	#moblogo {
		display: block;	
	}	
	
	#totalstable {
		left: 50%;
		transform: translate(-50%, -50%);		
	}
	
	.valuepropcont {
		font-size: 1.5rem;
	}

	#cookieconsent {
		width: 320px;
		left: calc(50% - 160px);
	}	

	.paddedcontent {
		padding:.5rem;
	}	
}

/****************GOLDEN LAYOUT*************/




/*********FONTS**************/
/*https://gwfh.mranftl.com/fonts/red-hat-display?subsets=latin*/
/* red-hat-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/red-hat-display-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* red-hat-display-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 400;
  src: url('/assets/fonts/red-hat-display-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* red-hat-display-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/red-hat-display-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* red-hat-display-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/fonts/red-hat-display-v19-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/************FADING**************/
.fastfade-in {
  animation: fadeIn 1s;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
}

.fade-in {
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}

.slowfade-in {
  animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;
	
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

.fade-out {
  animation: fadeOut 3s;
  -webkit-animation: fadeOut 3s;
  -moz-animation: fadeOut 3s;
  -o-animation: fadeOut 3s;
  -ms-animation: fadeOut 3s;
}

.fastfade-out {
  animation: fadeOut 1s;
  -webkit-animation: fadeOut 1s;
  -moz-animation: fadeOut 1s;
  -o-animation: fadeOut 1s;
  -ms-animation: fadeOut 1s;
}

.slowfade-out {
  animation: fadeOut 8s;
  -webkit-animation: fadeOut 8s;
  -moz-animation: fadeOut 8s;
  -o-animation: fadeOut 8s;
  -ms-animation: fadeOut 8s;
}

@keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-moz-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-webkit-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-o-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-ms-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}


/**********DATATABLES***********/

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
	position: relative !important;	
    float: left;
    left: 5px;
    top: 5px;
	/*responsive arrow color*/
	border-left: 10px solid rgb(46, 90, 184);
}


table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after, 
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after, 
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after, 
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after, 
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before, 
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before, 
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before, 
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before {
	color: var(--info) !important;
}

.grid-stack {
    flex-grow: 1;
    height: 100%; /* Inherits from flex container */
}

.grid-stack-item {
	background-color: var(--whitesmoke);
}

.brainico {
	top: 5px;
}

.brainicoclk:hover {
	cursor:pointer;
}

.spinner {
	font-style: italic;
	font-size: 120%;
	color: #666;
	margin-top: 10px;
}

.dots {
	display: inline-block;
	min-width: 1em;
}