﻿/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/login-pages-dev-mock/src/styles.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap');
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/login-pages-dev-mock/src/styles.scss (1) ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
    --primary-900: #236843;
    --primary-800: #297a4e;
    --primary-700: #2f8b5a;
    --primary-600: #359d65;
    --primary-500: #3bae70;
    --primary-400: #4fb67e;
    --primary-300: #62be8d;
    --primary-200: #76c69b;
    --primary-100: #89cea9;
    --secondary-900: #443161;
    --secondary-800: #503971;
    --secondary-700: #5b4181;
    --secondary-600: #674991;
    --secondary-500: #7251a1;
    --secondary-400: #8062aa;
    --secondary-300: #8e74b4;
    --secondary-200: #9c85bd;
    --secondary-100: #aa97c7;
    --colour-background-primary-900: #7c9192;
    --colour-background-primary-800: #90a9aa;
    --colour-background-primary-700: #a5c2c2;
    --colour-background-primary-600: #b9dadb;
    --colour-background-primary-500: #cef2f3;
    --colour-background-primary-400: #d3f3f4;
    --colour-background-primary-300: #d8f5f5;
    --colour-background-primary-200: #ddf6f7;
    --colour-background-primary-100: #e2f7f8;
    --colour-background-secondary-900: #374f50;
    --colour-background-secondary-800: #405c5d;
    --colour-background-secondary-700: #4a6a6a;
    --colour-background-secondary-600: #537778;
    --colour-background-secondary-500: #5c8485;
    --colour-background-secondary-400: #6c9091;
    --colour-background-secondary-300: #7d9d9d;
    --colour-background-secondary-200: #8da9aa;
    --colour-background-secondary-100: #9db5b6;
    --tone-900: #1a1a1a;
    --tone-800: #313131;
    --tone-700: #484848;
    --tone-600: #5f5f5f;
    --tone-500: #767676;
    --tone-400: #8d8d8d;
    --tone-300: #a3a3a3;
    --tone-200: #bababa;
    --tone-150: #f2f2f2;
    --tone-100: #ffffff;
    --warning-600: #d90000;
    --nessyGreen: #3bae70;
    --nessyGreenDark: #288d57;
    --colour-light: var(--tone-100);
    --colour-dark: var(--tone-900);
    --colour-alternate: var(--tone-150);
    --colour-outline: var(--tone-200);
    --colour-outline-dark: var(--tone-700);
    --colour-active: var(--primary-500);
    --colour-active-dark: var(--primary-900);
    --colour-inactive: var(--tone-300);
    --colour-heading: var(--secondary-500);
    --colour-background: var(--colour-background-primary-500);
    --colour-background-dark: var(--colour-background-secondary-200);
    --colour-warning: var(--warning-600);
    --font-heading: "Sweater School", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --font-body: "Roboto", sans-serif;
    --px-base-rem: 16px;
    --px-base-rem-mobile: 14px;
    --px-spacing-base-unit: 16px;
    --px-panel-width: 1248px;
}
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul,
li {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

@font-face {
    font-family: "Sweater School";
    src: url("/assets/font/sweater_school_rg-webfont.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sweater School";
    src: url("/assets/font/sweater_school_bd-webfont.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

html,
body {
    height: 100%;
}

body {
    font-weight: normal;
    font-family: var(--font-body);
    font-size: var(--px-base-rem-mobile);
    line-height: 1;
    color: var(--colour-dark);
    background-color: var(--colour-light);
}

@media all and (min-width: 1280px) {
    body {
        font-size: var(--px-base-rem);
    }
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
    margin-bottom: calc(var(--px-spacing-base-unit) * 1);
}

.jumbo {
    font-size: 4em;
}

h1,
.h1 {
    font-size: 3em;
}

h2,
.h2 {
    font-size: 2em;
}

h3,
.h3 {
    font-size: 1.5em;
}

h4,
.h4 {
    font-size: 1em;
}

h5,
.h5 {
    font-size: 0.75em;
}

th,
[role=columnheader],
nav,
.sweater {
    font-family: var(--font-heading);
}

p,
.p {
    margin-bottom: 0.5em;
}

.text-accent {
    color: var(--colour-active);
}

::selection {
    background: var(--colour-active);
    color: var(--colour-light);
    text-shadow: none;
}
