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

/* color css var*/

:root {
	--main-orca-color: #003057;
}

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

h1:focus {
	outline: none;
}

a, .btn-link {
	color: #0071c1;
}

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

.content {
	padding-top: 1.1rem;
}

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

.invalid {
	outline: 1px solid red;
}

.validation-message {
	color: red;
}

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

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

/*upper header with orca icon*/

.main {
	flex: 1;
}

	.main .top-row {
		background-color: #003057;
		border-bottom: 1px solid #d6d5d5;
		justify-content: flex-start;
	}

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

@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) {
	.page {
		flex-direction: row;
	}

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

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

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

	.navbar-toggler {
		display: none;
	}

	.sidebar .collapse {
		/* Never collapse the sidebar for wide screens */
		display: block;
	}
}

/*header is in common override here*/
.top-row {
	height: 5rem;
	display: flex;
	align-items: center;
}
	.top-row a {
		color: white;
		text-decoration: none;
	}
	.top-row a:hover {
		text-decoration: none;
	}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px; /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	color: grey;
	direction: ltr;
	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;
	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;
	/* Support for IE. */
	font-feature-settings: 'liga';
}

.navlink a {
	display: flex;
	justify-content: start;
	font-size: 14px;
	text-decoration: underline;
	color: var(--main-orca-color);
}

.navlink:hover a {
	color: #000000;
}