/*
font-weight: 100            Roboto-Thin
font-weight: 200
font-weight: 300            Roboto-Light
font-weight: 400    normal  Roboto-Regular
font-weight: 500            Roboto-Medium
font-weight: 600
font-weight: 700    bold    Roboto-Bold
font-weight: 800
font-weight: 900            Roboto-Black
*/

@font-face {
    font-family: Roboto;
    src: local(Roboto Light),
         local(RobotoLight),
         local(Roboto-Light),
         url(./font/Roboto-Light.woff2) format("woff2"),
         url(./font/Roboto-Light.woff) format("woff"),
         url(./font/Roboto-Light.ttf) format("truetype");
    font-weight: 300;
    font-style: normal;
    font-variant: normal;
}

@font-face {
    font-family: Roboto;
    src: local(Roboto Light Italic),
         local(Roboto LightItalic),
         local(RobotoLightItalic),
         local(Roboto-LightItalic),
         local(Roboto-Light-Italic),
         url(./font/Roboto-LightItalic.woff2) format("woff2"),
         url(./font/Roboto-LightItalic.woff) format("woff"),
         url(./font/Roboto-LightItalic.ttf) format("truetype");
    font-weight: 300;
    font-style: italic;
    font-variant: normal;
}

@font-face {
    font-family: Roboto;
    src: local(Roboto Regular),
         local(RobotoRegular),
         local(Roboto-Regular),
         url(./font/Roboto-Regular.woff2) format("woff2"),
         url(./font/Roboto-Regular.woff) format("woff"),
         url(./font/Roboto-Regular.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

@font-face {
    font-family: Roboto;
    src: local(Roboto Italic),
         local(RobotoItalic),
         local(Roboto-Italic),
         url(./font/Roboto-Italic.woff2) format("woff2"),
         url(./font/Roboto-Italic.woff) format("woff"),
         url(./font/Roboto-Italic.ttf) format("truetype");
    font-weight: normal;
    font-style: italic;
    font-variant: normal;
}

@font-face {
    font-family: Roboto;
    src: local(Roboto Medium),
         local(RobotoMedium),
         local(Roboto-Medium),
         url(./font/Roboto-Medium.woff2) format("woff2"),
         url(./font/Roboto-Medium.woff) format("woff"),
         url(./font/Roboto-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-variant: normal;
}


@font-face {
    font-family: Roboto;
    src: local(Roboto Medium Italic),
         local(Roboto MediumItalic),
         local(RobotoMediumItalic),
         local(Roboto-MediumItalic),
         local(Roboto-Medium-Italic),
         url(./font/Roboto-MediumItalic.woff2) format("woff2"),
         url(./font/Roboto-MediumItalic.woff) format("woff"),
         url(./font/Roboto-MediumItalic.ttf) format("truetype");
    font-weight: 500;
    font-style: italic;
    font-variant: normal;
}

@font-face {
    font-family: Roboto Mono;
    src: local(RobotoMono Regular),
         local(RobotoMonoRegular),
         local(RobotoMono-Regular),
         url(./font/RobotoMono-Regular.woff2) format("woff2"),
         url(./font/RobotoMono-Regular.woff) format("woff"),
         url(./font/RobotoMono-Regular.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

@font-face {
    font-family: Roboto Mono;
    src: local(RobotoMono Medium),
         local(RobotoMonoMedium),
         local(RobotoMono-Medium),
         url(./font/RobotoMono-Medium.woff2) format("woff2"),
         url(./font/RobotoMono-Medium.woff) format("woff"),
         url(./font/RobotoMono-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-variant: normal;
}

:root {
    --cornflower-blue: #419bf9;
    --cornflower-blue-10pc: rgba(65, 154, 249, 0.1);
    --cornflower-blue-40pc: rgba(65, 154, 249, 0.4);

    --light-green: #c8cf2d;

    --light-orange: #fdbd39;

    --maroon: #574751;
    --maroon-50pc: rgba(87, 71, 81, 0.5);

    --peach: #ee6723;

    --warm-gray: #bcb5b9;
    --warm-gray-7pc: rgba(188, 181, 185, 0.07);

    --whitey: #f2f2f2;
    --whitey-new: #f7f7f7;

    --yellow: #fecf33;
    --orange: #f69833;

    --green: #c8cf2d;
    --turquoise: #0dcfda;
    --teflon: #554d56;
    --teflon-50pc: rgba(85, 77, 86, 0.5);
    --gandalf: #979197;
    --gandalf-50pc: rgba(151, 145, 151, 0.5);
    --clooney: #c1bec1;
    --karl: #edeced;
    --turquoise: #0dcfda;
}

*,
::before,
::after {
    margin: 0;
    padding: 0;

    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 0;

    font-family: Roboto, Helvetica, sans-serif;
    font-weight: inherit;

    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(188, 181, 185, 0.1);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
    color: #fff;
    background-color: #ee6723;
    background-color: var(--peach);
    text-shadow: none;
}

::selection {
    -webkit-text-fill-color: #fff;
    color: #fff;
    background-color: #ee6723;
    background-color: var(--peach);
    text-shadow: none;
}

::-webkit-input-placeholder {
    -webkit-text-fill-color: #bcb5b9;
    -webkit-text-fill-color: var(--warm-gray);
    color: #bcb5b9;
    color: var(--warm-gray);
    opacity: 1;
}

::-moz-placeholder {
    color: #bcb5b9;
    color: var(--warm-gray);
    opacity: 1;
}

:-webkit-autofill {
    box-shadow: 0 0 0 100px #fff inset;
    -webkit-text-fill-color: #574751;
    -webkit-text-fill-color: var(--maroon);
    color: #574751;
    color: var(--maroon);
}

:-moz-autofill {
    box-shadow: 0 0 0 100px #fff inset;
    -moz-text-fill-color: #574751;
    -moz-text-fill-color: var(--maroon);
    color: #574751;
    color: var(--maroon);
}

:autofill {
    box-shadow: 0 0 0 100px #fff inset;
    text-fill-color: #574751;
    text-fill-color: var(--maroon);
    color: #574751;
    color: var(--maroon);
}

a {
    text-decoration: none;
    font-weight: normal;
    color: inherit;
}

button {
    position: relative;
    background: transparent none;
    font-size: 18px;
    cursor: pointer;
}

button:disabled,
button.disabled {
    cursor: default;
}

/* Firefox has extra padding inside button */
button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.rippling {
    position: relative;
    overflow: hidden;
}

.noSelect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}