app {
	position: relative;
	display: flex;
	/*flex-direction: column;*/
}

/** scroll bar */
::-webkit-scrollbar {
	width: 9px;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #e1e1e1;
	border-radius: 2px;
}

::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background-image: linear-gradient(to bottom, rgba(17,17,17,1) 0%,rgba(76,76,76,1) 23%,rgba(76,76,76,1) 23%,rgba(71,71,71,1) 72%,rgba(17,17,17,1) 99%);
}

/* Loading page */
.triangle-container {
	left: calc(-50vw + 50%);
	position: fixed;
	right: calc(-50vw + 50%);
	top: 0;
	bottom: 0;
	z-index: -1;
	background-color: #063a63;
}

.triangles {
	background-image: url("../images/triangles.svg");
	background-size: cover;
	height: 100%;
	bottom: 0;
	left: 0;
	mix-blend-mode: hard-light;
	position: fixed;
	right: 0;
	top: 0;
	background-position: center center;
}

.loading-container {
	position: relative;
	text-align: center;
	background-color: #fff;
	margin: 10% auto 0 auto;
	padding: 20px;
}

/* Login page */
.login-body {
	position: relative;
}

.logo {
	text-align: center;
}

	.logo h4 {
		margin: 20px auto;
	}

.container-fluid .login-container {
	display: block;
	max-width: 500px;
}

.additional-info {
	color: #636c72;
	background-color: rgba(0,0,0,.04);
	padding: 10px 6px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	font-size: .875rem;
}

.login-container {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	align-content: center;
	margin: 5% auto 0;
}

.login-body {
	flex-direction: column;
	margin: 0 auto;
}

.logo-img {
	height: 42px;
}

.sub-menu {
	visibility: hidden; /* hides sub-menu */
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	transform: translateY(-2em);
	z-index: -1;
	transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.sub-menu {
	background: #DDD;
}


/* page */
.container-fluid {
	min-height: 350px;
	padding: 20px 30px;
}

.page-footer {
	display: flex;
	flex: 0 0 auto;
	background: #fff;
	color: #4d4d4d;
	padding: 9px 12px 9px 18px;
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.21);
	margin-top: 30px;
	font-size: 12px;
}

.flex-1 {
	flex: 1;
}

.drawer-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	color: #fff;
}

.drawer-logo a {
	color: #fff;
}

.drawer-profile {
	padding: 16px;
	border-bottom: solid 1px #777;
	background-image: url("../images/profile-bg.png");
	background-size: cover;
	color: #fff;
	font-size: 12px;
}

.drawer-profile a,
.drawer-profile .material-icons {
	color: #fff;
	vertical-align: text-bottom;
}

.app-sidebar .material-icons {
	margin-right: 8px;
	padding-left: 7px;
}

.app-sidebar .mat-expansion-panel__content .material-icons {
	padding-left: 2px;
	margin-left: -3px;
}

.app-sidebar .mdc-nav-li .material-icons {
	margin-right: 8px;
	padding-left: 0;
}

.mdc-drawer {
	/*margin-top: 64px;*/
	box-shadow: 2px 0 5px 0 rgba(0,0,0,0.16);
}

.mdc-drawer-app-content {
	background-color: #f5f5f5;
}

.mat-drawer-container-responsive {
	display: flex;
	flex-direction: row;
}

	.mat-drawer-container-responsive .mdc-drawer {
		width: unset !important;
		position: relative;
	}

		.mat-drawer-container-responsive .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
			margin-left: unset !important;
			position: relative;
			flex: 1;
		}

.mdc-top-app-bar--fixed-adjust {
	padding-top: 0 !important;
	overflow: hidden;
}

.drawer-footer {
	position: absolute;
	text-align: left;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: solid 1px #AAA;
	font-size: 12px;
	padding: 0 12px 0 12px;
	background-color: lightgray
}

/*  forms */
fieldset {
	border: none;
}

hr {
	clear: both;
}

/* breadcrumbs */
ul.breadcrumb {
	padding: 10px 16px;
	list-style: none;
	background-color: #eee;
}

	/* Add a slash symbol (/) before/behind each list item */
	ul.breadcrumb li + li:before {
		padding: 8px;
		content: "›";
	}

	ul.breadcrumb li,
	ul.breadcrumb li a {
		text-transform: uppercase;
		text-shadow: none;
		font-size: 13px;
		text-decoration: none;
		display: inline;
	}

		ul.breadcrumb li a:hover {
			text-decoration: underline;
		}

.mdc-checkbox + label {
	margin-bottom: 0px !important;
}


/** Simple drag and drop with Blazor CSS **/

.jobs-container {
	display: flex;
	justify-content: space-around;
}

.job-status {
	display: flex;
	flex-direction: column;
	width: 312px;
}

	.job-status ul {
		flex: 1;
	}

.dropzone {
	padding: 30px;
	border: 1px dashed #75868a;
	list-style: none;
}

/* dialog */
.mdc-dialog__content {
	min-width: 300px;
}

.mdc-dialog__title + .mdc-dialog__content {
	padding: 20px 24px !important;
}

.mdc-dialog__title {
	color: #fff !important;
	background: #063a63;
}

.mdc-dialog__actions {
	border-top: 1px solid #e1e1e1 !important;
}

.no-drop {
	border: 2px dashed red;
}

.can-drop {
	border: 2px dashed green;
}

.draggable {
	margin-bottom: 10px;
	padding: 10px 25px;
	border: 1px solid #424d5c;
	cursor: grab;
	background: #5c6b7f;
	color: #ffffff;
	border-radius: 5px;
	width: 250px;
}

	.draggable:active {
		cursor: grabbing;
	}

.dragging {
	cursor: grabbing;
}

.description {
	font-size: 18px;
}

.last-updated {
	margin-bottom: 0;
	font-size: 11px;
	color: #e1e5ea;
	font-weight: bold;
}

	.last-updated small {
		text-transform: uppercase;
		color: #c4cbd4;
		font-size: 11px;
	}

/* misc */
.contrib-card {
	padding: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}

	.contrib-card img {
		height: 50px;
		width: 50px;
	}

.screenshot {
	text-align: center;
	display: block;
}

	.screenshot img {
		max-width: 100%;
	}

.invalid {
	outline: 1px solid red;
}

.validation-message {
	color: red;
}

#blazor-error-ui::before {
	margin: auto;
}

#blazor-error-ui .dismiss {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}

#blazor-error-ui {
	z-index: 9999;
	display: none;
	background: #fff;
	margin: 0 auto;
	padding: 10px 20px;
	text-align: center;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19) !important;
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 596.98px) {
	.drawer-logo {
		height: 56px;
	}

	.logo-img {
		height: 38px;
	}
}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {

	.mdc-drawer, .app-sidebar {
		width: 54px !important;
		transform: translateX(0%);
		transition: width .4s ease-in-out;
	}

	.drawer-profile {
		padding: 0 4px;
	}

	.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
		margin-left: 54px !important;
		transition: margin-left .2s ease-in-out;
	}

	.mdc-sub-menu-icon,
	.drawer-profile span,
	.miniHover,
	.brand {
		visibility: hidden;
		opacity: 0;
		position: fixed;
	}

	.mdc-drawer:hover,
	.mdc-drawer:hover .app-sidebar,
	.full .mdc-drawer,
	.full .app-sidebar {
		width: 256px !important;
		z-index: 99;
	}

		.full .drawer-profile span,
		.full .miniHover,
		.full .brand,
		.mdc-drawer:hover .drawer-profile span,
		.mdc-drawer:hover .miniHover,
		.mdc-drawer:hover .brand {
			visibility: visible;
			opacity: 1;
			position: relative;
		}

	.full .mdc-top-app-bar__section--align-end {
		display: none;
		transition: .4s ease-in-out;
	}

	.full .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
		margin-left: 256px !important;
		transition: margin-left .2s ease-in-out;
	}


	.drawer-footer {
		padding: 0;
	}


	.loading-container {
		padding: 10px;
	}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}

.panel {
	background-color: #fff;
}

.app-logo {
	font-family: 'Lato', sans-serif;
}

/* Syncfusion classes override*/
.e-tab .e-tab-header .e-indicator {
	background: #0c62a7;
}
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-icon {
	color: #0c62a7;
}
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-icon {
	color: #0c62a7;
}

/* MudBreadcrumbs styles - Fix white text on white background and black hover */
.custom-breadcrumbs,
.mud-toolbar .mud-breadcrumbs,
.mud-toolbar .custom-breadcrumbs {
	color: rgba(0, 0, 0, 0.87) !important;
}

.custom-breadcrumbs *,
.mud-breadcrumbs,
.mud-breadcrumbs * {
	color: rgba(0, 0, 0, 0.87) !important;
}

.custom-breadcrumbs a,
.custom-breadcrumbs .mud-breadcrumb-item,
.mud-breadcrumbs a,
.mud-breadcrumbs .mud-breadcrumb-item,
.mud-breadcrumbs .mud-breadcrumb-item a {
	color: rgba(0, 0, 0, 0.87) !important;
	text-decoration: none;
}

.custom-breadcrumbs a:hover,
.custom-breadcrumbs .mud-breadcrumb-item:hover,
.mud-breadcrumbs a:hover,
.mud-breadcrumbs .mud-breadcrumb-item:hover,
.mud-breadcrumbs .mud-breadcrumb-item a:hover {
	color: var(--mud-palette-primary) !important;
	background-color: transparent !important;
	text-decoration: underline;
}

.custom-breadcrumbs .mud-breadcrumb-separator,
.mud-breadcrumbs .mud-breadcrumb-separator {
	color: rgba(0, 0, 0, 0.54) !important;
}

/* TreeView hover fix - prevent black background on hover */
.file-list-group-item:hover {
	background-color: rgba(128, 128, 128, 0.2) !important;
	color: inherit !important;
}

.file-list-group-item:hover * {
	color: inherit !important;
}

li:hover {
	background: rgb(128, 128, 128, 0.2) !important;
}