:root {
	--primary-font: 'ProximaNova';
	--secondary-font: 'GintoNord';
}

html { height: 100%; }

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: var(--s-25);
	color: var(--s-900);
	font-size: 16px;
	font-weight: 400;
	font-family: var(--primary-font), AktivGrotesk, sans-serif;
}

* { margin: 0; padding: 0; outline: 0; scrollbar-color: var(--s-300) var(--s-100); scrollbar-width: thin; }
input, select, textarea, button { font-family: var(--primary-font), AktivGrotesk, sans-serif; }
a { text-decoration: none; color: var(--s-900); }
h1 { font-family: var(--secondary-font), ProximaNovaWide, AktivGroteskEx, sans-serif; font-weight: 700; }

.wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.content { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 400px; padding: 0 10px; }

.header { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; box-sizing: border-box; width: 100%; min-height: 84px; padding: 18px 24px; border-bottom: 1px solid var(--s-100); }
.header .logo { display: flex; }
.header .logo a { display: flex; }
.header .logo img { height: 40px; }

.flows { flex-shrink: 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; position: relative; overflow: hidden; width: 100%; max-width: 1200px; }
.flows:before,
.flows:after { content: ""; position: absolute; z-index: 200; top: 0; width: 400px; height: 100%; background: linear-gradient(to right, var(--s-25) 0%,rgba(0,0,0,0) 100%); }
.flows:before { left: 0; }
.flows:after { right: 0; transform: rotate(180deg); }

.flows .flow { transition: transform 0.3s ease-in-out; flex-shrink: 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; width: 100%; overflow: hidden; }
.section { transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; opacity: 0; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: 120px; overflow: hidden; }

.flows.workspace_reset .flow[name="workspace"] .section { transform: none; }
.flows.workspace_error .flow[name="workspace"] .section { transform: translateX(-100%); }
.flows.workspace_select .flow[name="workspace"] .section { transform: translateX(-200%); }
.flows.workspace_expired .flow[name="workspace"] .section { transform: translateX(-300%); }

.flows.reset_email .flow,
.flows.reset_verify .flow,
.flows.reset_password .flow,
.flows.reset_success .flow,
.flows.reset_error .flow { transform: translateX(-100%); }
.flows.reset_email .flow[name="reset"] .section { transform: none; }
.flows.reset_verify .flow[name="reset"] .section { transform: translateX(-100%); }
.flows.reset_password .flow[name="reset"] .section { transform: translateX(-200%); }
.flows.reset_success .flow[name="reset"] .section { transform: translateX(-300%); }
.flows.reset_error .flow[name="reset"] .section { transform: translateX(-400%); }

.flows.auth_email .flow,
.flows.auth_password .flow,
.flows.auth_tfa .flow,
.flows.auth_tfa-setup .flow { transform: translateX(-200%); }
.flows.auth_email .flow[name="auth"] .section { transform: none; }
.flows.auth_password .flow[name="auth"] .section { transform: translateX(-100%); }
.flows.auth_tfa .flow[name="auth"] .section { transform: translateX(-200%); }
.flows.auth_tfa-setup .flow[name="auth"] .section { transform: translateX(-300%); }

.flows.workspace_reset .flow[name="workspace"] .section[name="reset"],
.flows.workspace_error .flow[name="workspace"] .section[name="error"],
.flows.workspace_select .flow[name="workspace"] .section[name="select"],
.flows.workspace_expired .flow[name="workspace"] .section[name="expired"],
.flows.reset_email .flow[name="reset"] .section[name="email"],
.flows.reset_verify .flow[name="reset"] .section[name="verify"],
.flows.reset_password .flow[name="reset"] .section[name="password"],
.flows.reset_success .flow[name="reset"] .section[name="success"],
.flows.reset_error .flow[name="reset"] .section[name="error"],
.flows.auth_email .flow[name="auth"] .section[name="email"],
.flows.auth_password .flow[name="auth"] .section[name="password"],
.flows.auth_tfa .flow[name="auth"] .section[name="tfa"],
.flows.auth_tfa-setup .flow[name="auth"] .section[name="tfa-setup"] { opacity: 1; }

.title { display: flex; flex-direction: column; width: 100%; margin-bottom: 20px; }
.title h1 { margin-bottom: 10px; color: var(--s-900); font-size: 30px; line-height: 40px; }
.title p { color: var(--s-900); font-size: 16px; line-height: 24px; }
.title p a { color: var(--b-25); }
.title .icon { margin-bottom: 20px; color: var(--lime-700); font-size: 60px; line-height: 72px; }
.title .icon.orange { color: var(--yellow-700); }
.title .icon.red { color: var(--red-700); }

.form-item { display: flex; flex-direction: column; width: 100%; margin-bottom: 10px; }
.form-item .item-heading { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--s-500); font-size: 14px; line-height: 22px; }
.form-item .item-heading .error { padding-left: 10px; color: var(--red-800); text-align: right; }

.button-item { display: flex; width: 100%; margin-top: 10px; }

.footer { display: flex; flex-direction: column; width: 100%; margin-top: 30px; padding: 30px 0; border-top: 1px solid var(--s-100); }
.footer .info { display: flex; flex-direction: column; width: 100%; margin-bottom: 20px; }
.footer .info .heading { align-self: flex-start; display: flex; flex-wrap: nowrap; align-items: center; margin-bottom: 10px; padding: 2px 8px; background: var(--s-100); color: var(--s-500); font-size: 12px; font-weight: 700; line-height: 20px; }
.footer .info .heading .icon { display: flex; margin-right: 8px; }
.footer .info .text { display: flex; flex-direction: column; color: var(--s-900); font-size: 14px; line-height: 22px; }

.footer .links { display: flex; width: 100%; }
.footer .links ul { display: flex; flex-wrap: wrap; width: 100%; list-style: none; }
.footer .links ul li { margin-right: 20px; }
.footer .links ul li:last-child { margin-right: 0; }
.footer .links ul li a { transition: color 0.2s ease-in-out; display: flex; flex-wrap: nowrap; align-items: center; color: var(--s-500); font-size: 14px; font-weight: 700; line-height: 22px; }
.footer .links ul li a:hover { color: var(--s-600); }
.footer .links ul li .icon { display: flex; margin-left: 6px; }

.input-container { display: flex; flex-wrap: nowrap; align-items: stretch; position: relative; width: 100%; border-radius: 4px; }
.input-container .input { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-container .input-label { flex-shrink: 0; display: flex; flex-wrap: nowrap; align-items: center; box-sizing: border-box; height: 48px; padding: 0 16px; background: var(--s-75-t50); border: 1px solid var(--s-300); border-left: 0; border-radius: 0 4px 4px 0; color: var(--s-500); font-size: 16px; line-height: 24px; user-select: none; cursor: text; }
.input-container .input:focus,
.input-container .input:focus + .input-label,
.input-container .input:invalid,
.input-container .input:invalid + .input-label { outline: none; }
.input-container .input:focus + .input-label:after,
.input-container .input:invalid + .input-label:after { content: ""; position: absolute; z-index: -10; top: -4px; left: -4px; width: 100%; height: 100%; border: 4px solid var(--b-25-t20); border-radius: 8px; }
.input-container .input:invalid + .input-label:after { border-color: var(--red-800-t20); }

.input-holder { display: flex; position: relative; width: 100%; }
.input-holder .icon { transition: color 0.2s ease-in-out; display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 0; right: 0; width: 52px; height: 100%; background: transparent; border: 0; color: var(--s-300); font-size: 16px; cursor: pointer; }
.input-holder .icon:hover { color: var(--s-400); }
.input-holder .input { padding-right: 52px; }

.code-container { display: flex; justify-content: space-between; gap: 12px; }
.code-container .item { flex-shrink: 0; display: flex; width: 52px; }
.code-container .item:nth-child(3) { margin-right: 8px; }
.code-container .input { appearance: textfield; font-weight: 700; text-align: center; }
.code-container .input::-webkit-inner-spin-button, 
.code-container .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.qr-code { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; margin-bottom: 20px; }
.qr-code .qr { flex-shrink: 0; display: flex; box-sizing: border-box; width: 140px; height: 140px; padding: 10px; background: var(--white); border: 1px solid var(--s-100); }
.qr-code .text { padding-left: 30px; color: var(--s-600); font-size: 14px; line-height: 22px; }

.dropdown { display: flex; position: relative; }
.dropdown .selection { display: flex; flex-wrap: nowrap; align-items: center; background: transparent; border: 0; color: var(--s-900); font-size: 16px; font-weight: 600; line-height: 24px; cursor: pointer; }
.dropdown .selection .icon { display: flex; margin-right: 10px; }
.dropdown .selection .arrow { display: flex; margin-left: 33px; font-size: 14px; }
.dropdown .options { position: absolute; z-index: 500; top: 100%; right: 0; display: none; min-width: 100%; padding-top: 16px; }
.dropdown .options.visible { display: flex; }
.dropdown .options ul { display: flex; flex-direction: column; width: 100%; padding: 10px 0; background: var(--s-25); border-radius: 4px; box-shadow: 0px 2px 20px var(--s-900-t10); list-style: none; }
.dropdown .options ul li { display: flex; width: 100%; }
.dropdown .options ul li button { transition: color 0.2s ease-in-out; width: 100%; padding: 6px 20px; background: transparent; border: 0; color: var(--s-500); font-size: 16px; line-height: 22px; text-align: left; cursor: pointer; white-space: nowrap; }
.dropdown .options ul li button:hover { color: var(--s-900); }

.user { align-self: flex-start; display: flex; flex-wrap: nowrap; align-items: center; padding: 6px 12px 6px 6px; border: 1px solid var(--s-100); border-radius: 18px; color: var(--s-900); font-size: 14px; font-weight: 600; line-height: 20px; }
.user img { width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; }

.link { transition: color 0.2s ease-in-out; align-self: flex-start; display: flex; flex-wrap: nowrap; align-items: center; background: transparent; border: 0; color: var(--b-25); font-size: 14px; font-weight: 700; line-height: 22px; text-align: left; cursor: pointer; }
.link:hover { color: var(--b-50); }

.link.grey { color: var(--s-600); }
.link.grey:hover { color: var(--s-700); }

.link .icon { display: flex; margin-right: 6px; }

.input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px; background: var(--s-25); border: 1px solid var(--s-300); border-radius: 4px; color: var(--s-900); font-size: 16px; line-height: 24px; }
.input::placeholder { color: var(--s-400); opacity: 1; }
.input:invalid,
.input:invalid + .input-label { border-color: var(--red-800); outline: 4px solid var(--red-800-t20); }

.error .input,
.error .input + .input-label,
.error .input-container { animation-name: error-flash; animation-duration: .3s; animation-timing-function: ease-in-out; animation-iteration-count: 4; animation-direction: alternate; border-color: var(--s-300); outline: 0 solid var(--red-800-t20); }
.error .input-container .input,
.error .input-container .input + .input-label { animation-name: error-flash-simple; }

.input:hover,
.input:hover + .input-label { border-color: var(--s-500); }
.input:focus,
.input:focus + .input-label { border-color: var(--b-25); outline: 4px solid var(--b-25-t20); }

@keyframes error-flash {
    from { border-color: var(--s-300); outline-width: 0; }
    to { border-color: var(--red-800); outline-width: 4px; }
}

@keyframes error-flash-simple {
    from { border-color: var(--s-300); }
    to { border-color: var(--red-800); }
}

.button { transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; box-sizing: border-box; width: 100%; padding: 10px 14px; background: var(--lime-700); border: 2px solid var(--lime-700); border-radius: 4px; color: var(--s-25); font-size: 16px; font-weight: 700; line-height: 24px; text-align: center; cursor: pointer; }
.button:hover { background: var(--lime-800); border-color: var(--lime-800); }

.button.orange { background: var(--yellow-700); border-color: var(--yellow-700); }
.button.orange:hover { background: var(--yellow-800); border-color: var(--yellow-800); }

.button.red { background: var(--red-700); border-color: var(--red-700); }
.button.red:hover { background: var(--red-800); border-color: var(--red-800); }

.button.white { background: var(--s-25); border-color: var(--s-200); color: var(--s-500); }
.button.white:hover { border-color: var(--s-300); }

.button[disabled] { background: var(--s-200); border-color: var(--s-200); cursor: not-allowed; }

.button .icon { display: flex; width: 14px; margin-left: 10px; }

.loading .icon svg { animation: loading-spin 1s infinite; }

.messages { display: flex; flex-direction: column; margin-bottom: 30px; }
.message { display: flex; flex-wrap: nowrap; align-items: flex-start; box-sizing: border-box; width: 100%; margin-bottom: 10px; padding: 10px; background: var(--blue-75); border-radius: 4px; color: var(--blue-800); font-size: 14px; line-height: 20px; }
.message:last-child { margin-bottom: 0; }
.message.warning { background: var(--yellow-75); color: var(--yellow-800); }
.message.error { background: var(--red-75); color: var(--red-800); }
.message .icon { display: flex; align-items: center; min-height: 20px; margin-right: 10px; font-size: 16px; }

@keyframes loading-spin {
  0% { transform: rotate(0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  50% { transform: rotate(180deg); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 1200px) {
    .flows:before,
    .flows:after { display: none; width: 0; }
}