body, html {
	margin:0;
	padding:0;
	background-color: var(--main-bg-color);
	font-family: 'Roboto', sans-serif;
}


@media only screen and (min-width: 0px) {
	h1 { font-size: 2rem; font-weight: 500; margin: 3rem 0rem 0rem 0; }
	h2 { font-size: 1.5rem; font-weight: 500; margin: 3rem 0 0.5rem 0; }
	h3 { font-size: 1.3rem; font-weight: 500; margin: 2rem 0 1.68rem 0; }
	h4 { font-size: 1.1rem; font-weight: 500; margin: 2rem 0 1.68rem 0; }
	h5 { font-size: 1rem; font-weight: 500; margin: 2rem 0 1.68rem 0; }
	h6 { font-size: 0.7rem; font-weight: 500; margin: 2rem 0 1.68rem 0; }
}
@media only screen and (min-width: 992px) {
	h1 { font-size: 2.5rem; font-weight: 500; margin: 3rem 0rem 0rem 0; }
	h2 { font-size: 2rem; font-weight: 500; margin: 3rem 0 0.5rem 0; }
	h3 { font-size: 1.6rem; font-weight: 500; margin: 2rem 0 1.68rem 0; }
	h4 { font-size: 1.3rem; font-weight: 500; margin: 2rem 0 1.68rem 0; }
	h5 { font-size: 1.1rem; font-weight: 500; margin: 2rem 0 1.68rem 0; }
	h6 { font-size: 1rem; font-weight: 500; margin: 2rem 0 1.68rem 0; }
}

#main {
	color: var(--main-text-color);
}

nav {
	background-color: var(--navbar-bg-color);
	box-shadow: none;
	color: var(--navbar-text-color);
}

nav .brand-logo {
    color: var(--main-text-color);
    font-size: 1.2rem;
}

nav .brand-logo img {
	max-height: 20px;
	vertical-align: text-top;
}

nav .pp {
    height: 25px;
    width: 25px;
    vertical-align: middle;
}

nav .sidenav-trigger {
	color: var(--navbar-text-color);
}


nav ul a {
	color: var(--navbar-link-hover-color);
}


.breadcrumbs, .breadcrumb {
	background-color: transparent;
	color: var(--main-text-color);
}

.breadcrumb:before {
	color: var(--main-text-color);
}

.breadcrumb:last-child {
	color: var(--main-text-color);
}

/* .sidenav {
	width: 70px;
	box-shadow: none;
	background-color: var(--sidebar-bg-color);
	
}

.sidenav li.brand-logo {
	background-color: var(--navbar-bg-color);
	height: 64px;
}

.sidenav li.brand-logo a {
	line-height: 64px;
	height: 64px;
	padding-top:10px;
}

.sidenav .brand-logo img {
	width: 40px;
}

.sidenav li>a {
	font-size: 18px;
	padding:0px;
	text-align: center;
	color: var(--sidebar-text-color);
}

.sidenav li>a:hover {
	background-color: var(--sidebar-link-bg-hover-color);
	color: var(--sidebar-link-hover-color);
} */

.page-item {
	/* height:100%;
	padding:20px; */
}




.sidenav { background-color: var(--sidebar-bg-color); color:var(--sidebar-text-color); }

.sidenav a, .sidenav li>a { color: var(--sidebar-link-color); }
.sidenav a:hover, .sidenav li>a:hover { color: var(--sidebar-link-hover-color); }
.sidenav .divider { background-color:var(--main-border); }
.sidenav .subheader { color: var(--muted-text-color); }

.box {
	background-color: var(--box-bg-color);
	border:1px solid var(--box-border-color);
	padding:10px;
	box-shadow: 3px 5px 27px -15px rgba(0,0,0,0.75);
	-webkit-box-shadow: 3px 5px 27px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 3px 5px 27px -15px rgba(0,0,0,0.75);
	border-radius: 10px;
}

.box h1, .box h2, .box h3, .box h4, .box h5, .box h6 { margin-top: 0px; }

.box-row {
	margin-bottom: 6px;
}

.box-hover:hover {
	border: 1px solid var(--box-border-active-color);
}


.theme-dark {
	display: var(--display-darkmode) !important;
}

.theme-light {
	display: var(--display-lightmode) !important;
}


ul.list { padding-left: 25px; }
ul.list li { list-style-type: disc; }

/* ul:not(.browser-default) {
	padding-left: 25px;
}

ul:not(.browser-default)>li {
	list-style-type: disc;
}

nav ul, .sidenav ul {
	padding-left: 0px !important;
}

nav ul li, .sidenav ul li {
	list-style-type: none !important;
} */

.helper-text, .help, .muted {
	position: relative;
	min-height: 18px;
	display: block;
	font-size: 12px;
	color: var(--muted-text-color) !important;
}

/* .help {
	margin:8px;
	color: var(--muted-text-color);
	font-size: 0.8rem;
} */

.noResult {
	margin:8px;
	color: var(--muted-text-color);
	font-size: 1rem;
}

.noResult-lg {
	text-align: center;
	font-size: 2rem;
	margin:5%;
}



.stats-card { background-color:#fff; border:1px solid #e4e4e4; padding:10px; margin-bottom:12px; }
.stats-card .name { text-transform:uppercase; font-weight:500; font-size:0.9rem; }
.stats-card .value { font-size:3rem; color:#0099d5; font-weight:600; text-align:center; }



.collapsible .collapsible-header .svg-inline--fa {
	width: 2rem;
    font-size: 1.3rem;
    display: inline-block;
    text-align: center;
    margin-right: 1rem;
} 


.badge-circle {
	position: absolute;
	top: 0;
	right: 0;
	display:inline-block;
	min-width:10px;
	padding:3px 7px;
	font-size:12px;
	font-weight:700;
	line-height:1;
	color:#fff;
	text-align:center;
	white-space:nowrap;
	vertical-align:baseline;
	background-color:#777;
	border-radius:10px;
	margin-right: 5px;
	margin-top:12px;
}

.badge-circle-danger { background-color: red; color:#fff !important; }



/* Profile picture
--------------------------------------------------------------------------- */
.pp {
	display:inline-block;
	
	background-repeat: no-repeat !important;
	
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;

	background-position: center center !important;
	border-radius: 50%;
	width: 100%;
	height: 100px;
}

.pp-xxxs { width: 18px; height: 18px; }
.pp-xxs { width: 25px; height: 25px; }
.pp-xs { width: 50px; height: 50px; }
.pp-sm { width: 100px; height: 100px; }
.pp-md { width: 200px; height: 200px; }
.pp-lg { width: 400px; height: 400px; }

.pp-shadow {
	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}




/* Modal
--------------------------------------------------------------------------- */
.modal { overflow-y: visible; }
.modal, .modal .modal-footer { background-color:var(--modal-bg); }
.modal-sm { max-width:400px; }
.modal-md { max-width:550px; }
.modal-lg { max-width:800px; }
.modal-xl { max-width:1200px; }


/* User dropdown
--------------------------------------------------------------------------- */
.dropdown-trigger-user {
	cursor: pointer;
}
.nav-top-user-image {
	height: 40px;
	width: 40px;
	border: 0px solid red;
	margin-top:11px;
}

ul.dropdown-user {
	width: 200px;
}

#top-nav .dropdown-content {
  top: 100% !important;
}

.dropdown-content {
	background-color:var(--modal-bg); 
}

.dropdown-content li>a, .dropdown-content li>span {
	color: var(--main-text-color);
}

.dropdown-content li:hover, .dropdown-content li.active {
	background-color: var(--bg-shade2);
}

.divider {
	background-color: var(--secondary-border);
}






/**
Examples:
-----------------------------------------------

<a class="tile" href="#">
	<span class="tile-icon">
		<div class="bg-image" style="background:url('{{image}}');"></div>
	</span>

	<span class="tile-title">
		{{title}}
	</span>
</a>

Icons supported:
 - Microsoft Fabric: https://developer.microsoft.com/en-us/fabric#/styles/web/icons
   Example: <i class="ms-Icon ms-Icon--OfficeLogo" aria-hidden="true"></i>
 - Font Awsome: https://fontawesome.com/
   Example: <i class="fal fa-info-circle"></i>

Versions:
-----------------------------------------------
2019-06-30: Added support for Office glyphs
2019-02-18: lg tiles in flexbox and hover-effect
2018-10-06: Added .bg-image, for fullsize bg image as icon
*/

.tiles {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
}

.tiles-group { margin:25px 0px; }


.tile {
	display: inline-block;
	width: 130px;
	height: 130px;
	position: relative;
	vertical-align: top;
	box-sizing: border-box;
	transition: .2s ease all;
	background-color: var(--tile-bg);
	color: var(--tile-text-color);
	margin-right: 2.5px;
	margin-bottom: 6px;
	padding:10px;
	/* outline: 3px solid transparent; */
	border-radius: 7px;
	font-weight:100;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}
.tile:hover {
	box-shadow:0 20px 50px rgba(0,0,0,.18);
	-webkit-transform:scale(1.03);
	transform:scale(1.03);
	outline: 0px;
	color:#000;
	text-decoration: none;
}
.tile .badge { position:absolute; z-index:9999; right:0; margin-top:-15px; margin-right:-5px; font-size:16px; border-radius:50%; padding:6px 6px 3px 6px; min-width:28px; height:28px; text-align:center; }


.tile span.tile-icon { display:block; text-align:center; height:85px; padding-top:10px; }
.tile span.tile-icon img { width: 55%; }
.tile span.tile-icon .bg-image { height:85px; width:100%; background-repeat:no-repeat !important; background-position:center center !important; -webkit-background-size:cover !important; -moz-background-size:cover !important; -o-background-size:cover !important; background-size:cover !important; }
.tile span.tile-icon .fa, .tile span.tile-icon .far, .tile span.tile-icon .fal, .tile span.tile-icon .fas, .tile span.tile-icon .fab, .tile span.tile-icon .svg-inline--fa, .tile span.tile-icon .material-icons { font-size:55px; padding-top:5px; }
.tile span.tile-icon .ms-Icon { font-size:45px; padding-top:0px; }
.tile .tile-icon-text-lg { text-align:center; display:block; font-size:40px; }
.tile span.tile-title, .tile span.title { text-align:left; margin:5px 0px 0px 0px; display:block; font-size:15px; width:105px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile span.tile-title-md { font-size:18px; margin-top:-6px; }
.tile span.tile-title-corner { float:right; margin-top:-110px; margin-right:6px; font-size: 12px; }
.tile span.value { display:block; font-size:40px; padding-top:10px; }
.tile span.unit { font-size:20px; }

/* Tile small */
.tile-sm { width: 100px; height: 100px; }
.tile-sm span.tile-icon { height:65px; padding-top:7px; }
.tile-sm span.tile-icon .fa, .tile-sm span.tile-icon .far, .tile-sm span.tile-icon .fal, .tile-sm span.tile-icon .fas, .tile-sm span.tile-icon .fab, .tile-sm span.tile-icon .svg-inline--fa, .tile-sm span.tile-icon .material-icons { font-size:45px; padding-top:5px; }
.tile-sm span.tile-icon .ms-Icon { font-size:35px; padding-top:0px; }
.tile-sm span.tile-title, .tile-sm span.title { margin-top:0px; font-size:14px; width:85px; }


/* Tile 2x (2x wide) */
.tile-2x { width:267px; }
.tile-2x span.tile-icon { text-align:left; height:85px; padding-top:10px; }
.tile-2x span.tile-icon img { height: 65px; width:auto; padding-top:0px; margin-left:5px; }
.tile-2x span.tile-icon .fa, .tile-2x span.tile-icon .far, .tile-2x span.tile-icon .fal, .tile-2x span.tile-icon .fas, .tile-2x span.tile-icon .fab, .tile-2x span.tile-icon .svg-inline--fa, .tile-sm span.tile-icon .material-icons { font-size:60px; padding-top:0px; margin-left:10px; }
.tile-2x span.tile-icon .ms-Icon { font-size:45px; padding-top:0px; }


/* Tile 4x (2x wide and 2x height) */
.tile-4x { width:267px; height:267px; }
.tile-4x span.tile-icon { height:200px; padding-top:6px; }
.tile-4x span.tile-icon img { width:55%; padding-top:20px; }
.tile-4x span.tile-icon .fa, .tile-4x span.tile-icon .far, .tile-4x span.tile-icon .fal, .tile-4x span.tile-icon .fas, .tile-4x span.tile-icon .fab, .tile-4x span.tile-icon .svg-inline--fa, .tile-sm span.tile-icon .material-icons { font-size:120px; padding-top:25px; }
.tile-4x span.tile-icon .ms-Icon { font-size:80px; padding-top:0px; }
.tile-4x span.tile-title { font-size:22px; font-weight:100; width:240px; }

/* Tile full width */
.tile-full-width { width:100%; }
.tile-full-width span.tile-icon { float:left; }
.tile-full-width span.tile-icon img { width:30px; width:auto; }
.tile-full-width span.tile-icon .fa, .tile-full-width span.tile-icon .far, .tile-full-width span.tile-icon .fal, .tile-full-width span.tile-icon .fas, .tile-full-width span.tile-icon .fab, .tile-full-width span.tile-icon .svg-inline--fa, .tile-full-width span.tile-icon .material-icons { font-size:40px; padding:5px; }
.tile-full-width span.tile-icon .ms-Icon { font-size:25px; padding-top:0px; }
.tile-full-width span.tile-icon .mdi { font-size:40px; padding:0px 13px; }
.tile-full-width span.tile-icon .badge { font-size: 30px; margin-top:7px; margin-left:15px; }
.tile-full-width span.tile-title { display:block; font-size:20px; margin-left:0px; margin-top:18px; width:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.tile-low-height { height:80px; }
.tile-low-height span.tile-icon img { height:45px; }

.tile-modern {
	width:100%;
	height: 196px;
	border-radius: 7px;
	transition: .2s ease all;
	background-color: var(--tile-bg);
	text-align: center;
	color: var(--tile-text-color);
	box-sizing: border-box;
	border: 1px solid var(--tile-border-color);
}

@media only screen and (max-width: 992px) {
	.tiles { grid-template-columns: 1fr 1fr; }
}

@media only screen and (max-width: 800px) {
	.tiles { grid-template-columns: 1fr; }
}

.tile-modern:hover {
	box-shadow:0 20px 50px rgba(0,0,0,.18);
	-webkit-transform:scale(1.03);
	transform:scale(1.03);
	outline: 0px;
	color: var(--tile-hover-text-color);
}

.tile-modern span.tile-icon {
	display:block;
	color: var(--tile-icon-color);
	fill: #f4f8fd;
	stroke: var(--tile-icon-color);
	stroke-width: .9px;
	margin-bottom: 1.2em;
	pointer-events: none;
}
/*.tile-lg span.tile-icon .svg-inline--fa { font-size:3rem; }*/
.tile-modern span.title {
	display:block;
	width: 100%;
	font-weight: 500;
	font-size: 1.9em;
	line-height: 1.2em;
	text-align: center;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tile-modern span.subtitle { display:block; margin-top:5px; font-size: 1em; width: 100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile-modern span.head-title { display:block; text-align:center; margin-top:-15px; margin-bottom:-8px; }
.tile-modern span.head-title img { max-height:18px; display: inline-block; }

/* Tile medium */
.tile-md { height:150px; }
.tile-md span.tile-icon { height:50px; }
.tile-md span.tile-icon .fa, .tile-md span.tile-icon .far, .tile-md span.tile-icon .fal, .tile-md span.tile-icon .fas, .tile-md span.tile-icon .fab, .tile-md span.tile-icon .svg-inline--fa {
    font-size: 45px;
    padding-top: 5px;
}
.tile-md span.title { font-size: 1em; }
.tile-md span.subtitle { font-size: 0.7em; }



/* Tile colors */
.tile-lightblue { background-color: #88aebe; color:#fff; }
.tile-lightblue:hover { color:#fff; }
.tile-blue { background-color: #0a5ac3; color:#fff !important; }
.tile-blue:hover { color:#fff; }
.tile-darkblue { background-color: #0b335e; color:#fff; }
.tile-darkblue:hover { color:#fff; }
.tile-navy { background-color: #5f7978; color:#fff; }
.tile-navy:hover { color:#fff; }
.tile-green { background-color: #00a400; color:#fff; }
.tile-green:hover { color:#fff; }
.tile-lightred { background-color: #b9513e }
.tile-red { background-color: #b9090b; color:#fff !important; }
.tile-purple { background-color: #5535af; color:#fff; }
.tile-purple:hover { color:#fff; }
.tile-pink { background-color: #ff6780; color:#fff; }
.tile-pink:hover { color:#fff; }
.tile-lightpurple { background-color: #bf56bc; color:#fff; }
.tile-lightpurple:hover { color:#fff; }
.tile-lightgrey { background-color: #ebebeb; color:#333; }
.tile-lightgrey:hover { color:#333; }
.tile-gray { background-color: #5d5d5d; color:#fff; }
.tile-gray:hover { color:#fff; }
.tile-dark { background-color: #1f1f1f; color:#fff; }
.tile-dark:hover { color:#fff; }
.tile-red { background-color: #b9090b }
.tile-orange { background-color: #d44a27; color:#fff; }
.tile-orange:hover { background-color: #CB3915; color:#fff; }
.tile-lightorange { background-color: #d9712b; color:#fff; }
.tile-lightorange:hover { color:#fff; }
.tile-yellow { background-color: #f4f71b; color:#4d4d4d; }
.tile-yellow:hover { color:#4d4d4d !important; }
.tile-lightyellow { background-color: #c7b05e; color:#4d4d4d; }
.tile-white { background-color: #fff; color:#272b2c; border:1px solid #eaeaea; }
.tile-white:hover { color:#23363e !important; }

.tile.add-new {
	background-color:transparent;
	border:3px dotted;
}
.tile.add-new:hover { outline: 0px solid rgba(132, 132, 132, 0.2); color:#657082; text-decoration:none; }







.wizard-footer {
	display: flex;
	margin-top:45px;
	padding-bottom:75px;
}

.wizard-footer .back {
	flex: 0 0 50%;
}

.wizard-footer .next {
	flex: 0 0 50%;
	text-align: right;
}




.alert {
	padding: 15px 25px;
	border-radius: 6px;
}

.alert.alert-info {
	background-color: #47a8f5;
	color:#fff;
}

.alert.alert-danger {
	background-color: #f66459;
	color:#fff;
}

.alert.alert-success {
	background-color: #6bbd6e;
	color:#fff;
}

.alert.alert-warning {
	background-color: #ffaa2c;
	color:#fff;
}

div.highlight {
	padding: 6px 15px;
	background-color:#FFFF00;
	color:#000;
	border-radius: 6px;
}

div.highlight h2 { margin-top:0px; }






/* Form
--------------------------------------------------------------------------- */
input, textarea {
	background-color: var(--form-input-bg);
	color: var(--form-input-text-color);
	border-color: var(--form-input-border-color);
}

input[type=text]:not(.browser-default):disabled {
	/* background-color: var(--form-input-bg); */
	color: var(--muted2-text-color);
	border-color: var(--form-input-border-color);
}

.btn-flat {
	color: var(--main-text-color);
}



/* Table
--------------------------------------------------------------------------- */
table.striped>tbody>tr:nth-child(odd) {
	background-color: var(--table-row-bg-hover);
}

table.highlight>tbody>tr:hover {
	-color: var(--table-row-text-hover);
	background-color: var(--table-row-bg-hover);
}




/* FIPO search
--------------------------------------------------------------------------- */
.fipo-search {
	/* background-color: var(--form-input-bg); */
	/* border-radius: 8px; */
	margin-bottom:15px;
	position: relative;
	border-bottom: 1px solid #9e9e9e;
}

.fipo-search input,
.fipo-search input:not([type]):focus:not([readonly]), 
.fipo-search input[type=text]:not(.browser-default):focus:not([readonly]),
.fipo-search input:not([type]),
.fipo-search input[type=text]:not(.browser-default) {
	padding:10px;
	margin:0px;
	/* border:0px !important; */
	border: 0px solid orange;
	box-shadow: none;
	color: var(--form-input-text-color);
	height: auto;
	font-size: 1.2rem;
}

.fipo-search .search-results {
	position: absolute;
	/* background-color: var(--form-input-bg); */
	background-color: var(--fs-dd-bg);
	width: 100%;
	min-height: 50px;
	border-radius: var(--fs-dd-search-result-border-radius);
	z-index: 9998;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
	border:1px solid var(--bg-shade3);
	margin-top:42px;
}

.fipo-search .search-results ul.items {
	margin: 0px;
}
.fipo-search .search-results ul.items li {
	border-bottom: 1px solid var(--main-border);
	display: flex;
	padding:8px;
	pointer-event: none;
}

.fipo-search .search-results ul.items li:first-child {
	border-top-left-radius: var(--fs-dd-search-result-border-radius);
	border-top-right-radius: var(--fs-dd-search-result-border-radius);
}

.fipo-search .search-results ul.items li:last-child {
	border-bottom: 0px;
	border-bottom-left-radius: var(--fs-dd-search-result-border-radius);
	border-bottom-right-radius: var(--fs-dd-search-result-border-radius);
}

.fipo-search .search-results ul.items li:hover {
	background-color: var(--fs-dd-search-hover-bg);
	color: var(--fs-dd-search-hover-text);
	cursor: pointer;
}
.fipo-search .search-results ul.items li.selected {
	background-color: var(--fs-dd-selected-hover-bg);
	color: var(--fs-dd-selected-hover-text);
	cursor: pointer;
}

.fipo-search .search-results ul.items li .icon { flex:0 0 60px; }
.fipo-search .search-results ul.items li .content { flex: 1 1 auto; }

.fipo-search .search-results ul.items li .rounded-bg {
	background-color: red;
	border-radius: 50%;
	text-align: center;
	font-size: 1.6rem;
	margin-right:9px;
	height: 45px;
	width: 45px;
}
.fipo-search .search-results ul.items li .rounded-bg .svg-inline--fa {
	vertical-align: middle;
}

.fs-flex { display:flex; }
.fs-flex .fs-icon { flex:0 0 30px; text-align:center; padding-top:10px; padding-left:10px; }
.fs-flex .fs-input { flex:1 1 auto; }
.fs-flex .fs-remove { flex:0 0 30px; display:none; text-align:center; padding-top:10px; padding-right:10px; }




/* Collapsible header
--------------------------------------------------------------------------- */
.collapsible {
	border-color: var(--secondary-border);
}
.collapsible-header {
	background-color: var(--modal-bg);
	border-color: var(--secondary-border);
}