:root {
	--primary: #3DA892; /*rgb(61, 168, 146)*/
	--primarylt: #4FBFA9;
	--secondary: #4A739B;
	--secondarylt: #5884AF;
	--success: #309261;
	--successlt: #39AC73;
	--warning: #FFDD00;
	--warninglt: #FFE948;
	--error: #CC3300;	
	--errorlt: #EA3A00;
	--info: #2E5AB8;
	--infolt: #4F79D2;
	/*--*/
	--bglight: #FFFAFA;
	--bgmed: #F5F5F5;
	--txtdark: #242931;
	--pwashed: #CAECE6;
	--swashed: #D5EBFF;
	/*---*/
	--borderradius: 5px;
	--dropshadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

/*GENERAL*/
.syssvg {
	position: relative;
	top: 3px;
}

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

.notused {
	display:none;
}


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

#topnav {
	border-bottom: 1px solid #ccc;	
}

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

.notificationcont {
	text-align: left;
}

#viewnote {
	padding: 0 .2rem;
}

#bottomnav {
	font-size: 90%;
	border-top: 1px solid #ccc;	
}

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

.hamburger {
	padding-left: 5px;	
}

.topburger:hover, .topmerge:hover, .topnotify:hover, .topaccount:hover, .toplogout:hover {
	cursor: pointer;
}

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

.accountsection {
	padding-right: 10px;	
}

#acctmenu {
	min-width: 200px;
	max-width: 90%;
}

#acctmenu .syssvg {
	top: 4px;
	margin-right: 5px;
}

.flexcont {
  display: flex;
}

.menu-side {
  flex: 0 0 220px;
  align-self: flex-start;
  position: sticky;
  top: 2rem;
  overflow-x: hidden;
  white-space: nowrap;
  padding: 0 10px 0 10px;
  min-height: calc(100vh - 4rem);
   -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s; 

}

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

#contextselect {
	background-color: var(--bglight);
	color: var(--txtdark);
	min-width: 200px;	
}

#mainmenu, #managemenu, #setupmenu, #systemmenu {
	.nav .nav-item:not(.containerlink):focus,
	.nav .nav-item:not(.containerlink):hover {
		color: var(--txtdark);
		background-color: #efefef;
		box-shadow: 0 0 0 100vmax #efefef;
		clip-path: inset(0 -100vmax); 
	}

	.nav .nav-item.active {
		color: var(--txtdark);
		background-color: var(--swashed);
		box-shadow: 0 0 0 100vmax var(--swashed);
		clip-path: inset(0 -100vmax); 
	}

	.nav .nav-item.active:hover {
		color: var(--txtdark);
		background-color: var(--swashed);
		box-shadow: 0 0 0 100vmax var(--swashed);
		clip-path: inset(0 -100vmax); 
	}
}

.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;
}

@media screen and (max-width: 599px) {
	.menu-side, .content-side {
		min-height: calc(100vh - 5rem);
	}	
}

#viewtoolbar, #viewtoolbar2 {
	background-color: var(--bgmed);
	/*padding: .3rem 1rem;*/
	min-height: 50px;
	position:relative;
}

#viewtoolbar .column .viewtool, #viewtoolbar2 .column .viewtool{
	padding: .3rem 1rem;
}

.viewtoolbaricon {
	top:-1px;	
}

.mergehelp {
  position: absolute;
  top:1px;
  left:1px;
  width:0;
  height:0;
  border-top: 40px solid #ccc;
  border-right: 40px solid transparent;
}

.mergehelp:hover {
	cursor:pointer;	
	border-top: 40px solid var(--info);
}

.helpicon {
	position: relative;
	bottom: 41px;
	left: 6px;
	color: white;
	font-size: 120%;
}

#amicont {
	position:absolute;
	bottom: 4rem;
	left: 1rem;	
	max-width:320px;
	max-height:50px;
	min-width:fit-content;
}

#ami {
	position:relative;
	background-color: purple;
	color: white;
	text-align:center;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	z-index:99;
	line-height:50px;
	vertical-align:middle;
	box-shadow: var(--dropshadow);
}

#ami:hover {
  background-color: #AA00AA;	
  box-shadow:
    0 0 60px 30px #f0f, /* middle magenta */
    0 0 80px 40px #0ff; /* outer cyan */	
}

#amiprompt {
	position:relative;
	bottom: 2.1rem;
	left: .75rem;
    border: 2px solid purple;
    min-height: 40px;
    border-radius: 6px;
    /*opacity: 0;*/
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    width: 0;
	z-index:98;
}

.showprompt {
	width: 300px !important;
	padding-left: 2.3rem !important;
}

#amimic {	
	position:relative;
	bottom: 4rem;
	left: .5rem;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;	
}

.showmic {
	bottom: 2rem !important;
}

#amimic:hover {
	cursor:pointer;
	transform: scale(0.2);
}


/*********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;
}