:root {
    /* Basic Colors */
    --black: #000;
    --white: #fff;

    /* Grays */
    --gray-light1: #f6f6f6;
    --gray-light2: #eee;
    --gray-light3: #ddd;
    --gray-light4: #ccc;
    --gray-medium: #bbb;
    --gray-dark1: #999;
    --gray-dark2: #757575;
    --gray-dark3: #555;
    --gray-dark4: #333;

    /* Bright Colors */
    --red: #bd2120;
    --orange: #da7300;
    --yellow: #faac18;
    --blue: #4c7fcf;
    --magenta: #b2419e;
    --green-forest: #1e8439;
    --green-lime: #809e14;
    --green-light: #aac206;
    --turquoise: #0d9ba3;

    /* Brand Colors */
    --gold: #ffc21a;
    --gold-light2: #fff6dd;
    --orange-dark: #b94e00;
    --orange-light: rgba(250, 172, 24, 0.1);
    --yellow-light1: #fac62d;
    --yellow-light2: #fde6a2;
    --yellow-light3: #fef9e8;

    /* Legacy Accent Colors (not yet consolidated to base) */
    --special-red-accent: #bd2120;
    --special-red-accent2: #a01c1b;
    --special-red-accent3: #9a1a19;
    --special-red-accent4: #8a1615;
    --special-blue-accent: #5964eb;
    --special-cyan: #31b0d5;
    --special-cyan-bright: #00a0ce;
    --special-green: #98cb92;
    --special-green-accent: #5bb75b;
    --special-purple: #9d5bb5;

    /* Category Colors */
    --color-circuits: var(--green-forest);
    --color-design: var(--red);
    --color-craft: var(--turquoise);
    --color-cooking: var(--magenta);
    --color-teachers: var(--green-lime);
    --color-living: var(--blue);
    --color-outside: var(--green-light);
    --color-workshop: var(--orange);

    /* Interaction Colors */
    --blue-highlight: #a1d4ea;
    --blue-lightbg: #cfe9f4;
    --red-lightbg: #f5dede;
    --green-lightbg: #ddede1;
    --yellow-highlight: #f9c016;
    --gold-highlight: #fee18c;

    /* Extra */
    --input-border: #bababa;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
iframe {
    max-width: 100%;
}

/* Bootstrap previously removed default fieldset borders */
fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

/* Bootstrap previously set Artifakt on form controls; inputs otherwise use system UI font */
input,
button,
select,
textarea {
    font-family: 'artifakt-element', Arial, sans-serif;
}

/* Bootstrap previously styled text-like inputs; extend to types bootstrap covered */
input:not([type]),
input[type='text'],
input[type='password'],
input[type='datetime'],
input[type='datetime-local'],
input[type='date'],
input[type='month'],
input[type='time'],
input[type='week'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='search'],
input[type='tel'],
textarea {
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    margin-bottom: 10px;
}

input:not([type]):focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='date']:focus,
input[type='month']:focus,
input[type='time']:focus,
input[type='week']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='search']:focus,
input[type='tel']:focus,
textarea:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

/* Bootstrap previously styled native selects separately from text inputs */
select {
    border: 1px solid #ccc;
    background-color: #fff;
}

input[type='checkbox'],
input[type='radio'] {
    width: auto;
    margin: 4px 0 0;
    line-height: normal;
}

/* Bootstrap previously set placeholder color globally; restore for all inputs */
input::placeholder,
textarea::placeholder {
    color: var(--gray-dark1);
    opacity: 1;
    font-weight: 400;
}

.svg-icon {
    width: 24px;
    height: 24px;
    fill: #bbb;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

.svg-icon.teacher {
    position: relative;
    left: 7px;
}

.hidden {
    display: none;
}

button:not(.btn) {
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0;
    padding: 0;
    vertical-align: initial;
    font-weight: inherit;
    color: inherit;
}

/* Restore bootstrap normalize cursor behavior for interactive controls */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
label,
select,
input[type="radio"],
input[type="checkbox"] {
    cursor: pointer;
}

button:disabled,
html input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled {
    cursor: not-allowed;
}

/* copied from later versions of bootstrap to convey meaning to assistive technologies
https://www.webmasterworld.com/accessibility_usability/4234495.htm
*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}