:root {
	--stroke-on-white-aaa-normal: #595959;

	--background-color: #F8F8F8;
	--logo-color: #393D3F;
	--brand-color: #007fd0;

	--display-font: 'Asap', sans-serif;
	--text-font: 'Open Sans', sans-serif;
}

.maintenance--install {
	--accent-color-background: #007fd0;
	--accent-color-stroke: #007fd0;
}
.maintenance--upgrade {
	--accent-color-background: #29a77d;
	--accent-color-stroke: #34a85d;
}
.maintenance--closed {
	--accent-color-background: #fbc52d;
	--accent-color-stroke: #ffdd90;
}
.maintenance--error {
	--accent-color-background: #ff9393;
	--accent-color-stroke: #e51616;
}

* { margin: 0; padding: 0; }
body { background: var(--background-color); font: 16px "Open Sans", sans-serif; }

a {
	color: var(--accent-color-stroke);
	text-decoration: none;
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"], select {
	border: 1px solid #aaa;
	padding: 5px 6px;
	width: 250px;
	font: 16px "Open Sans", sans-serif;
	outline: 0;
	border-radius: 4px;
	box-sizing: border-box;
}


.alert { display: flex; margin: 20px 0; padding: 20px; background-color: #f7f7f7; border-radius: 4px; justify-content: flex-start; align-items: flex-start; flex-direction: row; }
.alert--error { background-color: #c9424f; color: #fff; }
.alert--error .alert__actions .button { border-color: rgba(255,255,255,0.3); }
.alert--warning { background-color: #ffa052; color: #222; }
.alert__icon { margin-top: 3px; margin-right: 14px; font-size: 1.2em; }
.alert__message { margin: 0; padding: 0; flex-grow: 1; }
.alert__title { margin: 0; font-size: 1.1em; font-weight: bold; }
.alert__list { margin: 10px 0; padding-left: 20px; }
.alert__actions .button { display: inline-block; padding: 6px 12px; background-color: rgba(0,0,0,0.2); border-radius: 4px; color: inherit; }

#container { margin: 0 auto; margin-top: 80px; max-width: 800px; }
.minimal #container { max-width: 700px; }

.page { background: #FFF; border-radius: 4px; box-shadow: #dfdfdf 0 0 10px; cursor: progress; }
.minimal .page { border-top: solid 6px var(--accent-color-background); }
.minimal .page a { color: var(--accent-color-stroke); }
.page main { padding: 30px; line-height: 26px; }
.page main h2 { margin-bottom: 20px; font-family: var(--display-font); font-size: 1.8em; font-weight: 400; }
.page--standard main h2 { margin-bottom: 40px; }
.page main p { margin-bottom: 6px; }

header { padding: 20px; height: 75px; display: flex; align-items: center; }
.header__title { flex: 1; font-size: 2em; font-weight: bold; }
.header__title .logo { display: flex; height: 75px; align-items: center; line-height: 26px; }
.logo__icon > svg * { fill: var(--logo-color); }
.logo__text { color: var(--logo-color); font-family: var(--display-font); font-style: italic; text-indent: 5px; }
.header__subtitle { flex: 1; font-weight: normal; color: #dfdfdf; text-align: right; }

nav { display: flex; margin-bottom: 20px; background: #393D3F; border-radius: 4px 4px 0 0; }
nav .section { position: relative; display: flex; flex: 1; flex-wrap: wrap; flex-direction: column; padding: 20px; background: rgba(0,0,0,0.015); }
nav .section:only-child { flex-direction: row; }
nav .section.active { background-color: var(--accent-color-background); }
nav .section .title { flex: 0; margin-right: 10px; font-size: 1.5em; font-weight: 300; color: #BBB; }
nav .section.active .title { font-weight: 400; color: #FFF; }
nav .section .tasks { flex: 1; margin-top: 10px; }
nav .section:only-child .tasks { margin-top: 0; }
nav .task { display: inline-flex; position: relative; padding: 7px; height: 18px; width: 18px; border: solid 2px transparent; border-radius: 100%; font-size: 18px; color: rgba(255,255,255,0.2); text-align: center; }
nav .section.active .task:not(.active):not(.success) { color: rgba(0,0,0,0.3); }
nav .task:not(:last-child) { margin-right: 4px; }
nav .task.success { border-color: #FFF; color: #FFF; }
nav .task.active { border-color: transparent; color: #FFF; }
nav .task.active::after { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: -2px; padding: 14px; border: 2px solid; border-color: #FFF transparent #FFF transparent; border-radius: 50%; content: ""; animation: task-active 1.2s linear infinite; }

@media (max-width: 600px) {
	.page, nav { border-radius: 0; }
	nav { display: block; }
	nav .section { display: flex; flex-direction: row; padding: 12px; }
	nav .section .title, nav .section .tasks { display: inline-block; }
	nav .section .tasks { margin-top: 0; margin-left: 10px; }
	nav .section:not(.active) { display: none; }
}

fieldset { margin-bottom: 10px; padding: 20px; border: solid 1px rgba(0,0,0,0.05); border-radius: 4px; }
label { display: block; padding: 10px 0; }
label input { margin-right: 4px; }

input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }
[data-password-peek] { display: inline-block; position: absolute; margin-top: 1px; margin-left: -40px; padding: 9px; background: none; border: none; }
[data-password-peek] .icon { font-size: 1.1em; color: #aaa; }
input[type="text"] ~ [data-password-peek] .icon { color: #222; }
[data-peekable] { padding-right: 35px; width: 215px; }

[data-form-message] { margin-left: 8px; }
[data-form-message] .icon { margin-right: 4px; }
[data-form-message="error"] .icon { color: #b5002a; }
[data-form-message="flag"] .icon { color: #36c763; }
[data-form-message="success"] .icon { color: var(--brand-color); }
[data-form-message="warning"] .icon { color: #FF5F14; }

.actions { margin-top: 30px; text-align: right; }
.actions button { padding: 8px 12px; background: none; border: solid 1px #dfdfdf; border-radius: 4px; font-family: var(--text-font); font-size: 1.2em; color: var(--stroke-on-white-aaa-normal); cursor: not-allowed; }

.meta { padding: 16px; background: #FAFAFA; border-top: solid 1px rgba(0,0,0,0.02); font-size: 0.9em; color: #666; }

footer { padding: 20px; font-size: 0.8em; text-align: right; color: #888; }
footer .powered-by-string { transition: opacity 0.5s; }
footer .powered-by-string.hidden { opacity: 0; }
footer a { color: #555; }
footer .powered-by--logo { text-align: center; }
footer .powered-by--logo a { display: inline-flex; padding: 10px; }
footer .powered-by--logo svg { height: 25px; width: auto; }
footer .powered-by--logo svg * { fill: #DDD; transition: fill 0.2s; }
footer .powered-by--logo a:focus svg *, footer .powered-by--logo a:hover svg * { fill: var(--accent-color-background); }

@keyframes task-active {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}