@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('fontawesome/css/all.min.css');
@import url('fonts.css');

html, body {
	font-family: 'Source Sans Pro', sans-serif, Arial;
	/*font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif*/
}

a, .btn-link {
	color: #0366d6
}

.btn-primary {
	color: #fff;
	background-color: #1b6ec2;
	border-color: #1861ac
}

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

.top-row {
	height: 3.5rem;
	display: flex;
	align-items: center
}

.loggedIn {
	color: #fff
}

.main {
	flex: 1
}

	.main .top-row {
		background-color: #404E66;
		justify-content: flex-end
	}

		.main .top-row > a, .main .top-row .btn-link {
			white-space: nowrap;
			/*margin-left: 1.5rem*/
		}

		.main .top-row a:first-child {
			overflow: hidden;
			text-overflow: ellipsis
		}

.sidebar {
	background-image: linear-gradient(180deg,#052767 0%,#3a0647 70%)
}

	.sidebar .top-row {
		background-color: rgba(0,0,0,.4)
	}

	.sidebar .navbar-brand {
		font-size: 1.1rem
	}

	.sidebar .oi {
		width: 2rem;
		font-size: 1.1rem;
		vertical-align: text-top;
		top: -2px
	}

	.sidebar .nav-item {
		font-size: .9rem;
		padding-bottom: .5rem
	}

		.sidebar .nav-item:first-of-type {
			padding-top: 1rem
		}

		.sidebar .nav-item:last-of-type {
			padding-bottom: 1rem
		}

		.sidebar .nav-item a {
			color: #d7d7d7;
			border-radius: 4px;
			height: 3rem;
			display: flex;
			align-items: center;
			line-height: 3rem
		}

			.sidebar .nav-item a.active {
				background-color: rgba(255,255,255,.25);
				color: #fff
			}

			.sidebar .nav-item a:hover {
				background-color: rgba(255,255,255,.1);
				color: #fff
			}

.content {
	padding-top: 1.1rem
}

.navbar-toggler {
	background-color: rgba(255,255,255,.1)
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050
}

.invalid {
	outline: 1px solid #f00
}

.validation-message {
	color: #f00
}

#blazor-error-ui {
	background: #ffffe0;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0,0,0,.2);
	display: none;
	left: 0;
	padding: .6rem 1.25rem .7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000
}

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

@media(max-width:767.98px) {
	.main .top-row:not(.auth) {
		display: none
	}

	.main .top-row.auth {
		justify-content: space-between
	}

	.main .top-row a, .main .top-row .btn-link {
		margin-left: 0
	}
}

@media(min-width:768px) {
	app {
		flex-direction: row
	}

	.sidebar {
		width: 250px;
		height: 100vh;
		position: sticky;
		top: 0
	}

	.main .top-row {
		position: sticky;
		top: 0
	}

	.main > div {
	/*	padding-left: 2rem !important;
		padding-right: 1.5rem !important*/
	}

	.navbar-toggler {
		display: none
	}

	.sidebar .collapse {
		display: block
	}
}

.banner {
	height: 15rem;
	display: flex;
	background: url(../content/images/Mask_Group_1.png) no-repeat bottom;
	background-size: cover
}

/*	.banner div {
		display: inline-block;
		margin: auto;
		color: #fffaf0;
		text-shadow: 0 10px 10px black;
		font-weight: bold;
		font-size: 4em
	}*/

.card {
	max-width: 18rem;
	box-shadow: 0 0 11px rgba(33,33,33,.2)
}

.card-img:not([disabled]) {
	color: #0366d6
}

.card:hover:not([disabled]) {
	box-shadow: 0 0 .7rem #333
}

.card[disabled]:hover {
	pointer-events: none
}

.disabled {
	pointer-events: none
}

.card .card-img {
	justify-content: center;
	align-items: center
}

.row {
	height: 100%
}

.nav-link.stretched-link {
	display: contents !important
}

.nav-link[disabled] {
	pointer-events: none
}

.menu-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap
}

	.menu-grid .card {
		display: flex;
		flex-direction: row;
		width: 20em;
		margin: 5px;
		box-shadow: rgba(0,0,0,1) 0 .2px 10px;
		padding: 5px
	}

		.menu-grid .card .icon {
			width: 5em;
			text-align: center
		}

		.menu-grid .card .desc {
			margin-left: 20px
		}