/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
overflow-x: hidden;
background: var(--harvest-green-3-alt);
font-family: var(--main-font);
}
/* ================================
Accessibility Utility Classes
================================ */
/* Screen reader only - visually hidden but accessible to assistive technology */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Screen reader only, but becomes visible on focus (for skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: auto;
height: auto;
padding: 1rem 1.5rem;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
background: var(--bliss-white);
color: var(--velvet-black);
font-family: var(--main-font);
font-weight: 600;
text-decoration: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 0 0 8px 0;
}
/* ================================
Layout Styles
================================ */
.r22-layout {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--harvest-green-3-alt);
}
.r22-header {
display: flex;
width: 100%;
background: url('../icons/header-curve.svg') center/cover no-repeat;
height: 60px;
align-items: center;
justify-content: center;
padding: 0 1.5rem;
gap: 1rem;
}
.r22-header-logo {
display: flex;
align-items: center;
justify-content: center;
}
.r22-header-back {
display: none;
}
.r22-header-logo svg {
width: 45px;
height: 40px;
}
.r22-content {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.r22-help-info {
font-size: 13px;
text-align: right;
display: none;
flex-direction: column;
gap: 0.25rem;
}
.r22-help-info small {
color: var(--harvest-green-3);
}
.r22-help-info p {
color: var(--bliss-white);
font-weight: bold;
}
.r22-content.no-modal {
justify-content: start;
margin-top: 2rem;
}
.r22-modal-container {
display: flex;
flex-direction: column;
padding-bottom: 2rem;
}
.r22-above-modal {
padding: 2rem 0;
}
.r22-modal {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-direction: column;
background: var(--bliss-white);
padding: 3rem;
border-radius: 30px;
min-width: 625px;
}
.r22-logo-button {
border: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.r22-logo-button img {
display: block;
}
@media (max-width: 700px) {
.r22-header {
justify-content: space-between;
}
.r22-header-logo {
justify-content: flex-end;
}
.r22-header-back {
display: flex;
align-items: center;
}
.rt-btn.r22-back-button {
gap: 0.5rem;
font-size: 1rem;
font-weight: 700;
}
.rt-btn.r22-back-button img {
width: 24px;
height: 24px;
}
.r22-modal-container {
width: 100%;
}
.r22-above-modal {
display: none;
}
.r22-modal {
min-width: 0;
width: 100%;
height: calc(100vh - 60px);
border-radius: 0;
padding: 0;
}
.r22-help-info {
display: flex;
}
}
:root {
/**
* @tokens Font families
* @presenter FontFamily
*/
--main-font: 'Roboto', 'Adjusted Roboto Fallback', 'Helvetica Neue', sans-serif;
--support-font: 'Roboto Condensed', 'Adjusted Roboto Condensed Fallback', Arial, sans-serif;
--alternative-font: 'Montserrat', 'Adjusted Montserrat Fallback', sans-serif;
/**
* @tokens Font sizes
* @presenter FontSize
*/
--font-size-tiny: calc(10rem / 16);
--font-size-smallest: calc(12rem / 16);
--font-size-smaller: calc(13rem / 16);
--font-size-small: calc(14rem / 16);
--font-size-base: calc(16rem / 16);
--font-size-medium: calc(16rem / 16);
--font-size-medium-plus: calc(18rem / 16);
--font-size-large: calc(20rem / 16);
--font-size-larger: calc(24rem / 16);
--font-size-larger-plus: calc(28rem / 16);
--font-size-largest: calc(32rem / 16);
--font-size-jumbo: calc(36rem / 16);
--font-size-jumbo-plus: calc(40rem / 16);
--font-size-monumental: calc(48rem / 16);
--font-size-ginormous: calc(64rem / 16);
/**1
* @tokens Colors
* @presenter Color
*/
--vtv75-theme-main-1: #5e60ce;
--vtv75-theme-main-2: var(--stalltips);
--vtv75-theme-main-3: #0370e7;
--vtv75-border-1: #c1c1c1;
--vtv75-call-to-action: #d04900;
--vtv75-error: #dd0000;
--stalltips: #6930c3;
--stalltips-dark: #310f67;
--stalltips-2: #4f2098;
--stalltips-3: #e1d6f3;
--stalltips-4: #b498e1;
--stalltips-5: #8b55e0;
--stalltips-opacity-20: rgba(105, 48, 195, 0.2);
--stalltips-opacity-10: rgba(105, 48, 195, 0.1);
--stalltips-opacity-5: rgba(105, 48, 195, 0.05);
--stalltips-briliantblue: var(--vtv75-theme-main-3);
--circles-background-color: var(--vtv75-theme-main-1);
--harvest-green-deep: #0f494d;
--harvest-green: #256569;
--harvest-green-2: #a3c0c2;
--harvest-green-3: #cbdbdc;
--harvest-green-3-alt: #e4ebeb;
--harvest-green-4: #f1f5f5;
--harvest-green-hover: var(--hover);
--attention: #f85572;
--lykkas-yellow: #ffdf70;
--grom-yellow: #fff155;
--velvet-black: #000000;
--menu-black: #222222;
--bliss-white: #ffffff;
--country-gray-deep: #4a4a4a;
--country-gray: #d4d4d4;
--country-gray-1: #4c4c4c;
--country-gray-2: #8a8a8a;
--country-gray-3: #b0b0b0;
--country-gray-4: #d4d4d4;
--country-gray-5: #f0f0f0;
--country-gray-6: #f9f9f9;
--diamond-gray: #f0f0f0;
--kenya-orange: #d04900;
--navigation-gray: #222222;
--navigation-gray-light: #373737;
--red-alert: #cf022b;
--notification-red: #f85572;
--red-alert-lighter: #ecd7d3;
--indigo-iver: #5e60ce;
/* This is here because of the alert.component
Should probably be replaced by something else at some point
*/
--legacy-corn: #fdf3cf;
/**
* @tokens ComponentStates
* @presenter Color
*/
--pressed: #1d5558;
--hover: #008484;
--focused: #0071eb;
--error: #cf022b;
--error-light: #cb1e3f;
--CTAhover: #d45700;
/**
* @tokens Products
* @presenter Color
*/
--V86-shade-1: #802c7e;
--V86-shade-2: #491348;
--V86-shade-3: #802c7e;
--V86-shade-4: #bd91bc;
--V86-shade-5: #e8d9e8;
--V86-shade-6: #f5eff5;
--V85-shade-1: #004f9f;
--V85-shade-2: #003061;
--V85-shade-3: #004f9f;
--V85-shade-4: #83baf1;
--V85-shade-5: #c2e0ff;
--V85-shade-6: #e0f0ff;
--V75-shade-1: #008943;
--V75-shade-2: #00653f;
--V75-shade-3: #00994d;
--V75-shade-4: #99d6b8;
--V75-shade-5: #cfebdd;
--V75-shade-6: #ecf7f1;
--V65-shade-1: #b22a2d;
--V65-shade-2: #741315;
--V65-shade-3: #b22a2d;
--V65-shade-4: #e4b4b6;
--V65-shade-5: #f3dddd;
--V65-shade-6: #f9eeee;
--V64-shade-1: #c15701;
--V64-shade-2: #703301;
--V64-shade-3: #c68100;
--V64-shade-4: #edc09b;
--V64-shade-5: #f5e0cc;
--V64-shade-6: #faf1eb;
--QPlus-shade-1: #c24883;
--QPlus-shade-2: #77254c;
--QPlus-shade-3: #c24883;
--QPlus-shade-4: #ec82b5;
--QPlus-shade-5: #f6bed9;
--QPlus-shade-6: #ffeff7;
--games-shade-1: #197eb0;
--games-shade-2: #144a69;
--games-shade-3: #3d8bb8;
--games-shade-4: #b1d1e3;
--games-shade-5: #d1e3ee;
--games-shade-6: #ebf3f7;
--V5-shade-1: #197eb0;
--V5-shade-2: #144a69;
--V5-shade-3: #3d8bb8;
--V5-shade-4: #b1d1e3;
--V5-shade-5: #d1e3ee;
--V5-shade-6: #ebf3f7;
--V5A-shade-1: #197eb0;
--V5A-shade-2: #144a69;
--V5A-shade-3: #3d8bb8;
--V5A-shade-4: #b1d1e3;
--V5A-shade-5: #d1e3ee;
--V5A-shade-6: #ebf3f7;
--V5B-shade-1: #197eb0;
--V5B-shade-2: #144a69;
--V5B-shade-3: #3d8bb8;
--V5B-shade-4: #b1d1e3;
--V5B-shade-5: #d1e3ee;
--V5B-shade-6: #ebf3f7;
--V4-shade-1: #197eb0;
--V4-shade-2: #144a69;
--V4-shade-3: #3d8bb8;
--V4-shade-4: #b1d1e3;
--V4-shade-5: #d1e3ee;
--V4-shade-6: #ebf3f7;
--DD-shade-1: #197eb0;
--DD-shade-2: #144a69;
--DD-shade-3: #3d8bb8;
--DD-shade-4: #b1d1e3;
--DD-shade-5: #d1e3ee;
--DD-shade-6: #ebf3f7;
--TV-shade-1: #197eb0;
--TV-shade-2: #144a69;
--TV-shade-3: #3d8bb8;
--TV-shade-4: #b1d1e3;
--TV-shade-5: #d1e3ee;
--TV-shade-6: #ebf3f7;
--V-shade-1: #197eb0;
--V-shade-2: #144a69;
--V-shade-3: #3d8bb8;
--V-shade-4: #b1d1e3;
--V-shade-5: #d1e3ee;
--V-shade-6: #ebf3f7;
--VP-shade-1: #197eb0;
--VP-shade-2: #144a69;
--VP-shade-3: #3d8bb8;
--VP-shade-4: #b1d1e3;
--VP-shade-5: #d1e3ee;
--VP-shade-6: #ebf3f7;
--P-shade-1: #197eb0;
--P-shade-2: #144a69;
--P-shade-3: #3d8bb8;
--P-shade-4: #b1d1e3;
--P-shade-5: #d1e3ee;
--P-shade-6: #ebf3f7;
--T-shade-1: #197eb0;
--T-shade-2: #144a69;
--T-shade-3: #3d8bb8;
--T-shade-4: #b1d1e3;
--T-shade-5: #d1e3ee;
--T-shade-6: #ebf3f7;
--DUO-shade-1: #197eb0;
--DUO-shade-2: #144a69;
--DUO-shade-3: #3d8bb8;
--DUO-shade-4: #b1d1e3;
--DUO-shade-5: #d1e3ee;
--DUO-shade-6: #ebf3f7;
--racenumber-1: #c59e14;
--racenumber-2: #1657a8;
--racenumber-3: #a72623;
--racenumber-4: #11453e;
--racenumber-5: #fff;
--racenumber-6: #000000;
--racenumber-7: #b7b174;
--racenumber-8: #7f426d;
--racenumber-9: #17735e;
--racenumber-10: #d8498e;
--racenumber-11: #a7502e;
--racenumber-12: #413736;
--racenumber-13: #c59e14;
--racenumber-14: #1657a8;
--racenumber-15: #a72623;
--racenumber-16: #11453e;
--racenumber-17: #fff;
--racenumber-18: #000000;
--racenumber-19: #b7b174;
--racenumber-20: #7f426d;
--racenumber-21: #17735e;
--racenumber-22: #d8498e;
--racenumber-23: #a7502e;
--racenumber-24: #413736;
/**
* @tokens Easings
* @presenter Easing
*/
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
/**
* @tokens LegacyVariables
* @presenter Variables
*/
--legacy-header-md-height: 60px;
--legacy-header-sm-height: 40px;
--legacy-max-width: 75rem;
/**
* @tokens z-index
* @presenter z-index
*/
--z-background: 0;
--z-map: 1;
--z-root: 1;
--z-context-menu-before: 100;
--z-context-menu-after: 1001;
--z-tips-list: 1;
--z-gallery: 75;
--z-content: 100;
--z-layers: 200;
--z-level-1: 250;
--z-loaded: 300;
--z-level-2: 300;
--z-level-3: 400;
--z-race-day-selector: 450;
--z-sticky: 470;
--z-rd-archive: 475;
--z-search: 550;
--z-tools-menu: 600;
--z-chat: 700;
--z-details: 750;
--z-debug: 770;
--z-ui-autocomplete: 900;
--z-almost-top: 999;
--z-scroll-to-top-button: 1000;
--z-rd: 1001;
--z-main-menu-background: 1050;
--z-main-menu: 1051;
--z-main-menu-buttons: 1052;
--z-downlaod-banner: 1125;
--z-top: 1100;
--z-modal-toast: 1150;
--z-modal: 1200;
--z-date-picker-popup: 2000;
--z-team-game-chat: 10000;
--z-tooltip: 10001;
--z-feature-override: 11000;
/**
* @tokens border-radius
* @presenter BorderRadius
*/
--border-radius-component: 0.75rem;
--border-radius-component-outer: calc(var(--border-radius-component) * 1.5);
--border-radius-card: 0.5rem;
/**
* @tokens Custom Colors
* @presenter Color
*/
/* Custom Vipps brand colors for authentication */
--vipps-orange: #ff5b24;
--vipps-orange-dark: #cc461c;
}
.ds_normal-heading {
font-family: var(--main-font);
font-size: var(--font-size-larger);
font-weight: 700;
letter-spacing: 0px;
line-height: 130%;
text-decoration: none;
}
.ds_medium-heading--sm {
font-family: var(--alternative-font);
font-size: 24px;
font-weight: 700;
letter-spacing: 0px;
line-height: 130%;
text-decoration: none;
}
.ds_large-heading--md {
font-family: var(--alternative-font);
font-size: 32px;
font-weight: 700;
letter-spacing: 0px;
line-height: 130%;
text-decoration: none;
}
.ds_small-text {
font-family: var(--main-font);
font-size: var(--font-size-small);
font-weight: 400;
letter-spacing: 0px;
line-height: 150%;
text-decoration: none;
}
.ds_normal-text {
font-family: var(--main-font);
font-size: var(--font-size-base);
font-weight: 400;
letter-spacing: 0px;
line-height: 150%;
text-decoration: none;
}
.ds_large-text {
font-family: var(--main-font);
font-size: var(--font-size-medium-plus);
font-weight: 400;
letter-spacing: 0px;
line-height: 150%;
text-decoration: none;
}
/* Form Base Styles */
/* Shared styles for form-based pages (login, verify, etc.) */
.form {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
width: 400px;
}
.inputs {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
align-items: flex-end;
}
.buttons {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
/* Error Banner (general form errors) */
.error-banner {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--error);
border-radius: 4px;
color: var(--error);
font-family: var(--main-font);
font-size: var(--font-size-small);
font-weight: 500;
text-align: left;
}
/* Validation errors */
.validation-error,
.field-validation-error {
color: var(--error);
font-family: var(--main-font);
font-size: var(--font-size-small);
text-align: left;
display: block;
width: 100%;
}
/* Responsive adjustments */
@media (max-width: 500px) {
.form {
width: 100%;
padding: 0 3rem;
}
}
@media (max-width: 400px) {
.form {
padding: 0 1rem;
}
}
/* Button Component Styles */
/* Used with Views/Shared/_Button.cshtml layout */
/* Base Button Styles */
.rt-btn {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
height: 3rem;
padding: 0 1.375rem;
border-radius: 2.5rem;
border: none;
color: var(--bliss-white);
font-family: var(--main-font);
font-size: var(--font-size-large);
font-weight: 700;
line-height: 1.25rem;
cursor: pointer;
transition: background-color 0.08s ease, transform 0.08s ease, box-shadow 0.08s ease;
}
.rt-btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
}
.rt-btn:active {
transform: translateY(0);
box-shadow: none;
}
.rt-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 101, 105, 0.2);
}
.rt-btn:disabled {
opacity: 0.6;
cursor: default;
transform: none;
}
.rt-btn-text {
white-space: nowrap;
}
.rt-btn .rt-btn-icon {
height: 16px;
width: auto;
flex-shrink: 0;
}
/* Primary Button (HarvestGreen) */
.rt-btn-primary {
background: var(--harvest-green);
}
.rt-btn-primary:active {
background: var(--pressed);
}
.rt-btn-vipps {
background: var(--vipps-orange);
}
.rt-btn-vipps:active {
background: var(--vipps-orange-dark);
}
.rt-btn-bankid {
background: #4A78B1;
}
.rt-btn-bankid:active {
background: #3A6091;
}
.rt-btn-outline {
background: var(--bliss-white);
color: var(--harvest-green);
border: 0.125rem solid var(--harvest-green);
}
.rt-btn-outline:active {
background: var(--harvest-green-4);
border-color: var(--pressed);
color: var(--pressed);
}
/* Icon buttons use a neutral background and natural sizing */
.rt-btn.icon-btn {
background: transparent;
height: auto;
padding: 0.5rem;
border-radius: 4px;
}
.rt-btn.icon-btn:hover,
.rt-btn.icon-btn:active {
box-shadow: none;
transform: none;
}
/* Login Form Styles */
.rt-input-wrapper {
display: flex;
flex-direction: column;
width: 100%;
gap: 0.25rem;
}
/* Input Label */
.rt-input-label {
font-family: var(--main-font);
font-size: var(--font-size-base);
font-weight: 500;
color: var(--velvet-black);
margin-bottom: 0.25rem;
}
.rt-input-field {
display: flex;
align-items: center;
width: 100%;
height: 3rem;
padding: 0.375rem 0.75rem;
border-radius: 4px;
border: 2px solid var(--harvest-green);
background: var(--bliss-white);
font-family: var(--main-font);
font-size: var(--font-size-base);
font-weight: 400;
line-height: 1.5;
color: var(--country-gray-1);
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rt-input-field::placeholder {
color: var(--country-gray-1);
opacity: 1;
}
.rt-input-field:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 101, 105, 0.2);
}
/* Error State */
.rt-input-wrapper--error .rt-input-label {
color: var(--error);
}
.rt-input-field--error,
.rt-input-wrapper--error .rt-input-field {
border-color: var(--error);
}
.rt-input-field--error:focus,
.rt-input-wrapper--error .rt-input-field:focus {
border-color: var(--error);
box-shadow: 0 0 0 3px rgba(207, 2, 43, 0.2);
}
/* Error Message */
.rt-input-error {
font-family: var(--main-font);
font-size: var(--font-size-small);
color: var(--error);
}
.rt-input-error__text {
display: block;
padding-top: 0.125rem;
}
/* Password field with toggle button */
.rt-input-field-container {
position: relative;
width: 100%;
}
.rt-input-wrapper--password .rt-input-field {
padding-right: 2.5rem;
}
.rt-input-field--password {
padding-right: 2.5rem;
}
.rt-password-toggle {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.rt-password-toggle:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 101, 105, 0.2);
}
.rt-password-toggle__icon {
width: 1.25rem;
height: 1.25rem;
filter: invert(30%) sepia(20%) saturate(1500%) hue-rotate(140deg) brightness(90%) contrast(90%);
}
/* Link component styles (Figma node 64:57838) */
.rt-link {
font-family: var(--main-font);
font-size: var(--font-size-medium-plus);
font-weight: 400;
color: var(--velvet-black);
text-align: right;
text-decoration: underline;
text-underline-position: from-font;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-decoration-style: solid;
line-height: 1.5;
background: none;
border: none;
cursor: pointer;
padding: 0.15rem;
margin: 0;
display: inline;
white-space: pre-wrap;
}
.rt-link:hover {
text-decoration-thickness: 2px;
opacity: 0.8;
}
.rt-link:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 101, 105, 0.2);
border-radius: 2px;
}
.rt-link:disabled {
opacity: 0.6;
cursor: default;
text-decoration: none;
}
.rt-divider {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.5rem 0
}
.rt-divider__line {
flex: 1;
height: 1px;
background-color: var(--harvest-green-3);
}
.rt-divider__text {
font-family: var(--main-font);
font-size: var(--font-size-smallest);
color: var(--harvest-green);
font-weight: 400;
}
.rt-icon-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding-right: 4px;
border-radius: 40px;
text-decoration: none;
cursor: pointer;
}
.rt-icon-link__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.rt-icon-link__text {
font-family: var(--main-font);
font-size: var(--font-size-base);
font-weight: 700;
line-height: 24px;
color: var(--harvest-green);
white-space: nowrap;
}
.rt-icon-link:hover .rt-icon-link__text {
text-decoration: underline;
}
.rt-icon-link:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 101, 105, 0.2);
}
.code-input__digits {
display: flex;
gap: 0.5rem;
align-self: center;
}
.code-input__digit {
width: 3rem;
height: 3.5rem;
border: 2px solid var(--harvest-green);
border-radius: 4px;
background: var(--bliss-white);
font-family: var(--main-font);
font-size: 1.5rem;
font-weight: 500;
text-align: center;
color: var(--velvet-black);
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.code-input__digit:focus {
outline: none;
border-color: var(--harvest-green);
box-shadow: 0 0 0 3px rgba(37, 101, 105, 0.2);
}
.code-input__digit--error,
.error-banner ~ form .code-input__digit {
border-color: var(--error);
}
.error-banner ~ form .code-input__digit:focus {
border-color: var(--error);
box-shadow: 0 0 0 3px rgba(207, 2, 43, 0.2);
}
.account-locked-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.account-locked-message {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border: 2px solid var(--error);
border-radius: 8px;
background-color: var(--bliss-white);
width: 100%;
}
.error-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
filter: invert(20%) sepia(90%) saturate(3500%) hue-rotate(350deg) brightness(90%) contrast(90%);
}
.error-text {
color: var(--error);
font-family: var(--main-font);
font-size: var(--font-size-base);
line-height: 1.5;
flex: 1;
}
@media (max-width: 500px) {
.account-locked-container {
padding: 0 1rem;
}
}
@media (max-width: 400px) {
.account-locked-message {
padding: 1rem;
gap: 0.75rem;
}
.error-icon {
width: 20px;
height: 20px;
}
.error-text {
font-size: var(--font-size-small);
}
}
.spillepause-message {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3rem;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.spillepause-heading {
color: var(--menu-black);
margin: 0;
}
.spillepause-description {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.spillepause-text {
color: var(--menu-black);
margin: 0;
}
.spillepause-text strong {
font-weight: 700;
}
.spillepause-link {
display: inline-flex;
align-items: center;
gap: 0.75rem;
color: var(--harvest-green);
text-decoration: none;
transition: color 0.2s ease;
}
.spillepause-link:hover {
color: var(--pressed);
text-decoration: underline;
}
.spillepause-link .arrow {
font-size: 2rem;
line-height: 1;
transition: transform 0.2s ease;
}
.spillepause-link:hover .arrow {
transform: translateX(4px);
}
@media (max-width: 600px) {
.spillepause-message {
gap: 2rem;
padding: 0 3rem;
}
.spillepause-description {
gap: 1.25rem;
}
}
@media (max-width: 400px) {
.spillepause-message {
gap: 1.5rem;
padding: 0 1rem;
}
}
/* Verify Page Styles */
/* Access Info Section */
.access-info {
font-family: var(--main-font);
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem;
background-color: var(--harvest-green-3-alt);
border-radius: 8px;
width: 100%;
}
.access-info__title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--velvet-black);
margin: 0;
}
.access-info__text {
font-size: var(--font-size-small);
color: var(--country-gray-1);
line-height: 1.5;
margin: 0;
}
.access-info__list {
font-size: var(--font-size-small);
color: var(--country-gray-1);
line-height: 1.5;
margin: 0;
padding-left: 1.25rem;
}
.access-info__list li {
margin-bottom: 0.25rem;
}
.access-info__list li:last-child {
margin-bottom: 0;
}
@media (max-width: 400px) {
.access-info {
padding: 0.75rem;
}
.access-info__title {
font-size: var(--font-size-small);
}
.access-info__text,
.access-info__list {
font-size: var(--font-size-smallest);
}
}
/* Verify Email Page Styles */
.verify-email__sent-to {
color: var(--country-gray-1);
margin: 0;
}
.verify-email__info {
color: var(--country-gray-1);
margin: 0;
}
.verify-email__cancel {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.verify-email__resend-form {
display: flex;
justify-content: center;
margin-top: 0.5rem;
}
.verify-email__resend {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: var(--main-font);
font-size: var(--font-size-small);
}
/* Verify Mobile Page Styles */
.verify-mobile__sent-to {
color: var(--country-gray-1);
margin: 0;
}
.verify-mobile__info {
color: var(--country-gray-1);
margin: 0;
}
.verify-mobile__cancel {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.verify-mobile__resend-form {
display: flex;
justify-content: center;
margin-top: 0.5rem;
}
.verify-mobile__resend {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: var(--main-font);
font-size: var(--font-size-small);
}
.forgot-password-content {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.5rem;
width: 376px;
}
.forgot-password-content .buttons {
margin-top: 0.5rem;
}
.forgot-password-email-section {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.forgot-password-email-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.forgot-password-submit {
display: flex;
justify-content: flex-end;
}
@media (max-width: 500px) {
.forgot-password-content {
width: 100%;
padding: 0 3rem;
}
}
@media (max-width: 400px) {
.forgot-password-content {
padding: 0 1rem;
}
}
.verify-code__sent-to {
color: var(--country-gray-1);
margin: 0;
}
.verify-code__info {
color: var(--country-gray-1);
margin: 0;
}
.verify-code__resend-form {
display: flex;
margin-top: 0.5rem;
}
.verify-code__resend {
width: 100%;
text-align: center;
}
.sms-login-content {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 650px;
padding: 0 1rem;
}
@media (max-width: 360px) {
.sms-login-content {
padding: 0;
}
}
@media (max-width: 480px) {
.sms-login-content {
padding: 0.5rem;
}
}
.sms-login-section {
display: flex;
flex-direction: column;
gap: 0.75rem;
border: 1px solid var(--harvest-green-3);
border-radius: 12px;
padding: 1.25rem 1.5rem;
background: var(--bliss-white);
box-shadow: #00000021 0px 0px 8px 0px;
}
.sms-login-section-label {
font-family: var(--main-font);
font-size: var(--font-size-small);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--harvest-green);
margin: 0;
}
.sms-login-steps {
display: flex;
flex-direction: column;
gap: 1rem;
}
.sms-login-step {
display: flex;
align-items: flex-start;
gap: 0.75rem;
border: 1px solid var(--harvest-green-3);
border-radius: 8px;
padding: 0.75rem;
background: var(--harvest-green-4);
}
.sms-login-step-number {
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--harvest-green);
color: var(--bliss-white);
font-family: var(--main-font);
font-size: var(--font-size-base);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.sms-login-step-content {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.sms-login-step-title {
font-family: var(--main-font);
font-size: var(--font-size-base);
font-weight: 700;
color: var(--harvest-green);
}
.sms-login-step-description {
font-family: var(--main-font);
font-size: var(--font-size-small);
color: var(--velvet-black);
}
.sms-login-info {
display: flex;
background: var(--bliss-white);
flex-direction: column;
padding: 1rem;
border: 1px solid var(--harvest-green-3);
border-radius: 12px;
padding: 1.25rem 1.5rem;
background: var(--bliss-white);
box-shadow: #00000021 0px 0px 8px 0px;
gap: 0.75rem;
}
.sms-login-info-heading {
font-family: var(--main-font);
font-size: var(--font-size-large);
font-weight: 700;
color: var(--harvest-green-deep);
margin: 0;
}
.sms-login-info-subheading {
font-family: var(--main-font);
font-size: var(--font-size-medium-plus);
font-weight: 700;
color: var(--harvest-green-deep);
margin: 0;
}
.sms-login-info-text {
font-family: var(--main-font);
font-size: var(--font-size-base);
color: var(--velvet-black);
margin: 0;
}
.sms-login-info-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.sms-login-info-list-item {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 0.5rem;
padding: 0.6rem 0 0.6rem 0.75rem;
border-left: 3px solid var(--harvest-green);
border-bottom: 1px solid var(--harvest-green-3);
}
.sms-login-info-list-item:last-child {
border-bottom: none;
}
.sms-login-info-list-item dt {
font-family: var(--main-font);
font-size: var(--font-size-base);
font-weight: 700;
color: var(--velvet-black);
}
.sms-login-info-list-item dd {
font-family: var(--main-font);
font-size: var(--font-size-base);
color: var(--velvet-black);
margin: 0;
}
.sms-login-deadline {
display: flex;
flex-direction: column;
gap: 0.5rem;
background-color: #fdf8e1;
border: 1px solid #e6d97a;
border-radius: 8px;
padding: 1rem;
}
.sms-login-deadline-title {
font-family: var(--main-font);
font-size: var(--font-size-base);
font-weight: 700;
color: var(--harvest-green-deep);
margin: 0;
}
.sms-login-deadline-text {
font-family: var(--main-font);
font-size: var(--font-size-base);
color: var(--velvet-black);
margin: 0;
}
.sms-login-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
text-align: center;
font-family: var(--main-font);
font-size: var(--font-size-small);
color: var(--velvet-black);
}
.sms-login-footer p {
margin: 0;
}
.sms-login-footer a {
color: var(--harvest-green);
font-weight: 700;
text-decoration: none;
}
.sms-login-footer a:hover {
text-decoration: underline;
}