@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Lao&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');
@import url('https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css');
:root {
    --primary-50: #84C9EC;
    --primary-100: #5EB9E7;
    --primary-200: #42ACE2;
    --primary-300: #1E9DDD;
    --primary-400: #0F96DB;
    --primary-500: #0090d9;
    --primary-600: #0087CB;
    --primary-700: #007EBE;
    --primary-800: #0076B1;
    --primary-900: #006DA4;
    --secondary-50: #F9A2AA;
    --secondary-100: #F88690;
    --secondary-200: #F6707C;
    --secondary-300: #F55664;
    --secondary-400: #F44A59;
    --secondary-500: #f43f4f;
    --secondary-600: #E53B4A;
    --secondary-700: #D63745;
    --secondary-800: #C83340;
    --secondary-900: #B92F3C;
    --tertiary-50: #A9E1BE;
    --tertiary-100: #8ED8AA;
    --tertiary-200: #7AD19B;
    --tertiary-300: #61C989;
    --tertiary-400: #56C581;
    --tertiary-500: #4cc279;
    --tertiary-600: #47B671;
    --tertiary-700: #42AA6A;
    --tertiary-800: #3E9F63;
    --tertiary-900: #39935B;
    --error-50: #F48A8A;
    --error-100: #F16565;
    --error-200: #EE4B4B;
    --error-300: #EB2929;
    --error-400: #EA1A1A;
    --error-500: #e90c0c;
    --error-600: #DB0B0B;
    --error-700: #CD0A0A;
    --error-800: #BF0909;
    --error-900: #B10909;
    --grey-50: #EBECEC;
    --grey-100: #E0E1E1;
    --grey-200: #C9CBCB;
    --grey-300: #B3B4B5;
    --grey-400: #9C9E9F;
    --grey-500: #868889;
    --grey-600: #6F7172;
    --grey-700: #585B5C;
    --grey-800: #424446;
    --grey-900: #2B2E30;
    --shadow-50: 4px 8px 2px 0px rgba(179, 137, 137, 0.5), 1px 2px 0.5px 0px rgba(179, 137, 137, 0.5), 0px 0px 0.2px 0px rgba(179, 137, 137, 0.5);
    --shadow-100: 3.6px 7.2px 1.8px 0px rgba(161, 123, 123, 0.45), 0.9px 1.8px 0.45px 0px rgba(161, 123, 123, 0.45), 0px 0px 0.18000000000000002px 0px rgba(161, 123, 123, 0.45);
    --shadow-200: 3.2px 6.4px 1.6px 0px rgba(143, 109, 109, 0.4), 0.8px 1.6px 0.4px 0px rgba(143, 109, 109, 0.4), 0px 0px 0.16000000000000003px 0px rgba(143, 109, 109, 0.4);
    --shadow-300: 2.8px 5.6px 1.4px 0px rgba(125, 95, 95, 0.35), 0.7px 1.4px 0.35px 0px rgba(125, 95, 95, 0.35), 0px 0px 0.13999999999999999px 0px rgba(125, 95, 95, 0.35);
    --shadow-400: 2.4px 4.8px 1.2px 0px rgba(107, 82, 82, 0.3), 0.6px 1.2px 0.3px 0px rgba(107, 82, 82, 0.3), 0px 0px 0.12px 0px rgba(107, 82, 82, 0.3);
    --shadow-500: 2px 4px 1px 0px rgba(89, 68, 68, 0.25), 0.5px 1px 0.25px 0px rgba(89, 68, 68, 0.25), 0px 0px 0.1px 0px rgba(89, 68, 68, 0.25);
    --shadow-600: 1.6px 3.2px 0.8px 0px rgba(71, 54, 54, 0.2), 0.4px 0.8px 0.2px 0px rgba(71, 54, 54, 0.2), 0px 0px 0.08000000000000002px 0px rgba(71, 54, 54, 0.2);
    --shadow-700: 1.2000000000000002px 2.4000000000000004px 0.6000000000000001px 0px rgba(53, 41, 41, 0.15), 0.30000000000000004px 0.6000000000000001px 0.15000000000000002px 0px rgba(53, 41, 41, 0.15), 0px 0px 0.06000000000000001px 0px rgba(53, 41, 41, 0.15);
    --shadow-800: 0.7999999999999998px 1.5999999999999996px 0.3999999999999999px 0px rgba(35, 27, 27, 0.1), 0.19999999999999996px 0.3999999999999999px 0.09999999999999998px 0px rgba(35, 27, 27, 0.1), 0px 0px 0.039999999999999994px 0px rgba(35, 27, 27, 0.1);
    --shadow-900: 0.3999999999999999px 0.7999999999999998px 0.19999999999999996px 0px rgba(17, 13, 13, 0.05), 0.09999999999999998px 0.19999999999999996px 0.04999999999999999px 0px rgba(17, 13, 13, 0.05), 0px 0px 0.019999999999999997px 0px rgba(17, 13, 13, 0.05);
    --shadow-1000: 0px 0px 0px 0px rgba(0, 0, 0, 0.04), 0px 0px 0px 0px rgba(0, 0, 0, 0.04), 0px 0px 0px 0px rgba(0, 0, 0, 0.04);
    --type-50: 5.07px;
    --type-100: 6.76px;
    --type-200: 9px;
    --type-300: 12px;
    --type-400: 16px;
    --type-500: 21.33px;
    --type-600: 28.43px;
    --type-700: 37.9px;
    --type-800: 50.52px;
    --type-900: 67.34px;
    --font-family: 'Nunito Sans';
    --font-weight: 400;
    --font-size: 16px;
    --line-height: 138%;
}

h1, h2, h3, h4, h5, h6, .subtitle {
    --type-50: 7.72px;
    --type-100: 9.26px;
    --type-200: 11.11px;
    --type-300: 13.33px;
    --type-400: 16px;
    --type-500: 19.2px;
    --type-600: 23.04px;
    --type-700: 27.65px;
    --type-800: 33.18px;
    --type-900: 39.81px;
    --font-family: 'Noto Serif Lao';
    --font-weight: 400;
    --font-size: 16px;
    --line-height: 107%;
}

button, button svg, button img {
    --font-weight: 500;
    --font-size: 12px;
    --padding-vertical: 8px;
    --padding-horizontal: 20px;
    --border-radius: 8px;
    --secondary-button-color: white;
}

input, label, textarea, select {
    --font-weight: 400;
    --font-size: 14px;
    --padding-vertical: 8px;
    --padding-horizontal: 16px;
    --border-width: 1px;
    --border-radius: 0px;
}

input[type=checkbox], input[type=radio], label.switch, label.switch .slider {
    --font-weight: 400;
    --font-size: 16px;
    --active-50: #84C9EC;
    --active-100: #5EB9E7;
    --active-200: #42ACE2;
    --active-300: #1E9DDD;
    --active-400: #0F96DB;
    --active-500: #0090d9;
    --active-600: #0087CB;
    --active-700: #007EBE;
    --active-800: #0076B1;
    --active-900: #006DA4;
}

a {
    --font-weight: 400;
    --default-50: #AA8D8D;
    --default-100: #8F6A6A;
    --default-200: #7C5050;
    --default-300: #632F2F;
    --default-400: #582121;
    --default-500: #4e1313;
    --default-600: #491111;
    --default-700: #441010;
    --default-800: #3F0F0F;
    --default-900: #3B0E0E;
    --hover-50: #C4B2B2;
    --hover-100: #B29A9A;
    --hover-200: #A48989;
    --hover-300: #937373;
    --hover-400: #8C6969;
    --hover-500: #856060;
    --hover-600: #7D5A5A;
    --hover-700: #755454;
    --hover-800: #6D4E4E;
    --hover-900: #654848;
    --visited-50: #DCB3B3;
    --visited-100: #D29B9B;
    --visited-200: #CA8A8A;
    --visited-300: #C07373;
    --visited-400: #BC6A6A;
    --visited-500: #b86161;
    --visited-600: #AC5B5B;
    --visited-700: #A15555;
    --visited-800: #964F4F;
    --visited-900: #8B4949;
    --active-50: #B8ADAD;
    --active-100: #A29494;
    --active-200: #928181;
    --active-300: #7D6A6A;
    --active-400: #746060;
    --active-500: #6c5656;
    --active-600: #655050;
    --active-700: #5F4B4B;
    --active-800: #584646;
    --active-900: #524141;
}

ol, ul, li {
    --font-weight: 400;
    --padding-vertical: 8px;
    --padding-horizontal: 4px;
    --li-padding-vertical: 8px;
    --li-padding-horizontal: 4px;
    --ol-style-type: lower-roman;
    --ul-style-type: circle;
}


/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
}

/* Document */
/* ============================================ */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */

/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}


/* Grouping content */
/* ============================================ */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
    border-top-width: 1px;
    margin: 0;
    clear: both;
    color: inherit;
}


/* Embedded content */
/* ============================================ */

/**
 * Prevent vertical alignment issues.
 */

img,
embed,
object,
iframe {
    vertical-align: bottom;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}


/* Interactive */
/* ============================================ */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/*
 * Remove outline for editable content.
 */

[contenteditable] {
    outline: none;
}

/* Table */
/* ============================================ */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption {
    text-align: left;
}

td,
th {
    vertical-align: top;
    padding: 0;
}

th {
    text-align: left;
    font-weight: bold;
}

/* Misc */
/* ============================================ */

/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
    display: none;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
    margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: inherit; /* 2 */
}

address {
    font-style: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

* {
    font-family: var(--font-family);
}

p {
    line-height: var(--line-height, 160%);
    font-size: var(--type-400);
    color: var(--grey-700);
}

h1, h2, h3, h4, h5, h6, .subtitle {
    line-height: var(--line-height, 120%);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    color: var(--grey-900);
}

h1 {
    font-size: var(--type-900);
}

h2 {
    font-size: var(--type-800);
}

h3 {
    font-size: var(--type-700);
}

h4 {
    font-size: var(--type-600);
}

h5 {
    font-size: var(--type-500);
}

h6 {
    font-size: var(--type-400);
}

.subtitle {
    font-size: var(--type-300);
}

.large {
    font-size: var(--type-500);
}

.small {
    font-size: var(--type-300);
}

strong {
    font-weight: 700;
}

span.light {
    font-weight: 300;
}

h1.secondary, h2.secondary, h3.secondary, h4.secondary, h5.secondary, h6.secondary, p.secondary {
    color: var(--secondary-500);
}

h1.tertiary, h2.tertiary, h3.tertiary, h4.tertiary, h5.tertiary, h6.tertiary, p.tertiary {
    color: var(--tertiary-500);
}


/* Forms */
/* ============================================ */

/**
 * Reset form fields to make them styleable
 */

button
{
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: 0;
    border-radius: 0;
    text-align: inherit;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button {
    /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

    button[disabled],
    [type="button"][disabled],
    [type="reset"][disabled],
    [type="submit"][disabled] {
        cursor: default;
    }

    /**
 * Remove the inner border and padding in Firefox.
 */

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    /**
 * Restore the focus styles unset by the previous rule.
 */

    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

button {
    background: var(--primary-500);
    border-radius: var(--border-radius, 4px);
    border-width: var(--border-width, 0);
    border-color: var(--primary-700);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    color: white;
    padding-top: var(--padding-vertical);
    padding-bottom: var(--padding-vertical);
    padding-left: var(--padding-horizontal);
    padding-right: var(--padding-horizontal);
    cursor: pointer;
}

button svg, button img {
    height: var(--icon-width, 16px);
    width: auto;
}

button svg path {
    fill: white;
}

button:hover, button.hover
{
    background: var(--primary-300);
}

button.secondary {
    background: var(--secondary-button-background, var(--secondary-500));
    border: var(--secondary-border-width, var(--border-width)) solid var(--secondary-500);
    color: var(--secondary-button-color, var(--secondary-500));
}

    button.secondary:hover, button.secondary.hover {
        border-color: var(--secondary-300);
        color: var(--secondary-button-color, var(--secondary-300));
        background: var(--secondary-button-background, var(--secondary-300));
    }

    button.secondary svg path {
        fill: var(--secondary-button-color, var(--secondary-500));
    }

    button.secondary:hover svg path, button.secondary.hover svg path {
        fill: var(--secondary-button-color, var(--secondary-300));
    }

    button > svg, button > img {
        margin-right: 14px;
        vertical-align: middle;
        margin: 0;
        margin-top: -4px;
    }

button[disabled], button[disabled].secondary:hover {
    background: var(--grey-100);
    color: var(--grey-300);
    border-color: var(--grey-100);
    cursor: not-allowed;
}

button[disabled] svg path, button[disabled].secondary svg path {
    fill: var(--grey-300);
}

/* Forms */
/* ============================================ */

/**
 * Reset form fields to make them styleable
 */

input,
optgroup,
select,
textarea {
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: 0;
    border-radius: 0;
    text-align: inherit;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */

[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
}

[type="radio"] {
    -webkit-appearance: radio;
    appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

input {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

select {
    /* 1 */
    text-transform: none;
}

    /**
 * Remove arrow in IE10 & IE11
 */

    select::-ms-expand {
        display: none;
    }

/**
 * Remove padding
 */

option {
    padding: 0;
}

/**
 * Reset to invisible
 */

fieldset {
    margin: 0;
    padding: 0;
    min-width: 0;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */

[type="search"] {
    outline-offset: -2px; /* 1 */
}

    /**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/**
 * Clickable labels
 */

label[for] {
    cursor: pointer;
}



input, textarea, select {
    padding: var(--padding-vertical) var(--padding-horizontal);
    border-radius: var(--border-radius, 4px);
    border: var(--border-width, 1px) solid var(--grey-300);
    color: var(--grey-900);
    letter-spacing: 0.02em;
    /* Do we need these styles, because it is the same as h6 font-size: 16px; */
    line-height: 120%;
    font-size: var(--font-size);
    font-weight: var(--font-weight);
}

    input::placeholder, textarea::placeholder, select::placeholder {
        color: var(--grey-300);
    }

    input:focus, textarea:focus, input.selected, textarea.selected, select:focus, select.selected, .selected input {
        border-color: var(--primary-500);
    }

    input:disabled, textarea:disabled, select:disabled, .disabled input {
        border-color: var(--grey-300);
        color: var(--grey-300);
    }

label.disabled {
    color: var(--grey-300);
}

label.error {
    color: var(--error-500);
}

    input:invalid, textarea:invalid, input.error, textarea.error, select:invalid, select.error, label.error input, label.error textarea, label.error select {
        border-color: var(--error-500);
        color: var(--error-500);
    }

        input:invalid::placeholder, textarea:invalid::placeholder, input.invalid::placeholder, textarea.invalid::placeholder {
            color: var(--error-500);
        }

input[type=checkbox], input[type=radio] {
    background-color: transparent;
    border-color: var(--grey-300);
    border-width: 2px;
    border-radius: var(--border-radius, 4px);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: var(--font-size, 16px);
    height: var(--font-size, 16px);
    cursor: pointer;
    display: grid;
    place-content: center;
    padding: 0;
    transform: translateY(calc(var(--border-radius, 0) / -2));
}

    input[type=checkbox]:only-child, input[type=radio]:only-child {
        padding-left: 0;
    }

    input[type="checkbox"]:focus, input[type=radio]:focus {
        border-color: var(--active-500, var(--grey-100));
        outline: none;
    }

    input[type="checkbox"]::before, input[type=radio]::before {
        content: "";
        width: calc(var(--font-size) * 0.4);
        height: calc(var(--font-size) * 0.4);
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--active-500, var(--grey-100));
    }

    input[type=checkbox]:checked, input[type=radio]:checked {
        border-color: var(--active-500, var(--grey-100));
    }

        input[type="checkbox"]:checked::before, input[type=radio]:checked::before {
            transform: scale(1);
        }

    input[type=checkbox]:disabled, input[type=radio]:disabled {
        border-color: var(--grey-100);
        cursor: not-allowed;
    }

    input[type=checkbox]:checked:disabled::before, input[type=radio]:checked:disabled::before {
        box-shadow: inset 1em 1em var(--grey-100);
    }

input[type=radio] {
    border-radius: 50%;
}

    input[type=radio]::before {
        border-radius: 50%;
    }

label > svg {
    fill: var(--grey-300);
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: var(--padding-horizontal);
    width: 20px;
    height: 20px;
}

label.error > svg {
    fill: var(--error-500);
}

label.disabled > svg {
    fill: var(--grey-300);
}

label input {
    padding-left: 40px;
}

    label input:only-child {
        padding-left: var(--padding-horizontal);
    }

label.switch {
    position: relative;
    display: flex;
    padding-left: 33px;
}

    label.switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        width: calc(var(--font-size) * 1.66);
        height: var(--font-size);
        background-color: transparent;
        border: 2px solid var(--grey-300);
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: var(--font-size);
    }

        label.switch .slider:before {
            position: absolute;
            content: "";
            height: calc(var(--font-size) * 0.62);
            width: calc(var(--font-size) * 0.62);
            left: calc(var(--font-size) * 0.10);
            bottom: calc(var(--font-size) * 0.10);
            border-radius: 50%;
            background-color: var(--grey-300);
            -webkit-transition: .4s;
            transition: .4s;
        }

    label.switch input[type=checkbox] {
        opacity: 0;
        width: 0;
        height: 0;
    }

        label.switch input[type=checkbox]:checked + .slider {
            background-color: transparent;
            border: 2px solid var(--active-500, var(--grey-100));
        }

            label.switch input[type=checkbox]:checked + .slider:before {
                transform: translateX(calc(var(--font-size) * 0.62));
                background-color: var(--active-500, var(--grey-100));
            }


select {
    appearance: none;
    background-color: transparent;
    margin: 0;
    width: 100%;
    outline: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23787980' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--padding-horizontal, 1) center;
}

option:hover {
    box-shadow: 0 0 10px 100px var(--grey-100) inset;
}

option:checked {
    background-color: var(--grey-100);
}

/* Text-level semantics */
/* ============================================ */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

a {
    color: var(--default-500);
    font-weight: var(--font-weight);
}

    a:hover, a.hover {
        color: var(--hover-500, var(--default-300));
    }

    a:visited, a.visited {
        color: var(--visited-500, var(--default-700));
    }

    a:active, a.active {
        color: var(--active-500, var(--hover-500));
    }

/* Lists (enumeration) */
/* ============================================ */

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Lists (definition) */
/* ============================================ */

dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
}

ol, ul {
    padding-top: var(--padding-vertical);
    padding-bottom: var(--padding-vertical);
    padding-left: var(--padding-horizontal);
    padding-right: var(--padding-horizontal);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
}

ol {
    list-style-type: var(--ol-style-type, decimal);
}

ul {
    list-style-type: var(--ul-style-type, none);
}

li {
    padding-top: var(--li-padding-vertical);
    padding-bottom: var(--li-padding-vertical);
    padding-left: var(--li-padding-horizontal);
    padding-right: var(--li-padding-horizontal);
}
.shadow-50 {
    box-shadow: var(--shadow-50);
}

.shadow-100 {
    box-shadow: var(--shadow-100);
}

.shadow-200 {
    box-shadow: var(--shadow-200);
}

.shadow-300 {
    box-shadow: var(--shadow-300);
}

.shadow-400 {
    box-shadow: var(--shadow-400);
}

.shadow-500 {
    box-shadow: var(--shadow-500);
}

.shadow-600 {
    box-shadow: var(--shadow-600);
}

.shadow-700 {
    box-shadow: var(--shadow-700);
}

.shadow-800 {
    box-shadow: var(--shadow-800);
}

.shadow-900 {
    box-shadow: var(--shadow-900);
}

.shadow-1000 {
    box-shadow: var(--shadow-1000);
}