fieldset {
	margin: 1em 0;
}

nav {
	background-image: url("/web/images/hsm-logo.png");
	background-size: 169px 54px;
	background-repeat: no-repeat;
	background-position: 50% 1em;
	min-height: calc(50px + 2em);
	padding: 0;
}

nav ul {
	padding: calc(50px + 1.5em) 0 0 0;
}

header.main h1 {
	background-color: #e24301;
}

blockquote {
	border-left: 0.2em solid #e24301;
}

blockquote:lang(ar-MA) {
	border-right: 0.2em solid #e24301;
}

ul.apps {
	list-style: none;
	padding: 0;
	text-align: center;
}

ul.apps li {
	display: inline-block;
	padding: 2em;
}

ul.apps li a {
	display: block;
	background-repeat: no-repeat;
	background-size: 64px 64px;
	background-position: 50% 0;
	min-height: calc(64px + 2em);
	padding: calc(64px + 0.5em) 0 0 0;
	min-width: 64px;
}

ul.apps li a.Windows {
	background-image: url("/web/fonts/bootstrap/latest/windows.svg");
}

ul.apps li a.macOS {
	background-image: url("/web/fonts/bootstrap/latest/apple.svg");
}

ul.apps li a.Android {
	background-image: url("/web/fonts/bootstrap/latest/android2.svg");
}

ul.apps li a.iOS {
	background-image: url("/web/fonts/bootstrap/latest/apple.svg");
}

ul.apps li a.Linux {
	background-image: url("/web/fonts/fontawesome/linux-brands-solid.svg");
}

p.lead {
	color: #e24301;
}

p.warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}

nav ul li a {
    padding: 1em 1.5em;
    color: #2a6bb7;
    font-weight: bold;
}

nav ul li.active a {
    color: #2a6bb7;
    font-weight: bold;
    border-bottom: 5px solid #2a6bb7;
}

@media screen {
	form.frm button {
		color: #fff;
		background-color: #2a6bb7;
		border-color: #2a6bb7;
		display: inline-block;
		font-weight: 400;
		text-align: center;
		vertical-align: middle;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		border: 1px solid transparent;
		padding: .375rem .75rem;
		font-size: 1rem;
		line-height: 1.5;
		border-radius: .25rem;
		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	}

	form.frm button.warning {
		color: #212529;
		background-color: #ffc107;
		border-color: #ffc107;
	}
}

@media screen and (min-width: 800px) {
	nav {
	background-position: 2% 50%;
	}
	nav:lang(ar-MA) {
	background-position: 98% 50%;
	}
	nav ul {
	padding: 0 calc(169px + 2em);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #ededed;
		--body-text-color: #505050;
		--accent-color: #216aed;
		--title-text-color: #000;
		--bg-color-main: #fff;
		--bg-color-main-header: #888;
		--text-color-main-header: #fff;
		--header-bg-color: #000;
		--bg-color-inputs: #fff;
		--bg-color-inputs-disabled: #eee;
		--border-color-inputs: #ddd;
		--text-color-inputs: #000;
		--lead-text-color: #888;
	}
}