/*
=============================
        Global
=============================
*/

body {
    /*Add Color variables here*/
    --font-family: Exo;
    --border-radius: 4px;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --btn-size: 35px;
    --btn-size-l: 43.75px;
    --btn-color: #F8AB0A;
    --btn-color-hover: #F8AB0A;
    --btn-color-dark: #4C5260;
    --btn-color-dark-hover: #2A2E35;
    --primary-color: #F8AB0A;
    --primary-color-hover: #F8AB0A;
    --primary-color-active: #F8AB0A;
    --primary-color-inverse: #ffffff;
    --default-color: #ffffff;
    --default-color-hover: #f2f2f2;
    --default-color-inverse: #464646;
    --default-color-dark: #E3E3E3;
    --danger-color: #ca4545;
    --danger-color-hover: #bf3636;
    --help-color: #4197bf;
    --border-color: var(--default-color-dark);
    --text-color: #3a434a;
    --text-color-light: #FFFFFF;
    --text-color-completed: var(--primary-color-active);
    --btn-size-s: 18px;
    --border-radius: 0px;
    height: 100%;
    /*----------------- Phase 2 branding ----------------- */
    --base-gold: #d39c0a;
    --base-dark-gray: #57525a;
    --base-light-gray: #918b9a;
    --base-font-family: Montserrat;
}

/*
=============================
        Font Family
=============================
*/

@font-face {
    font-family: "Exo";
    src: url('assets/fonts/exo.woff2');
}

@font-face {
    font-family: "Exo";
    font-weight: bold;
    src: url('assets/fonts/exo2.woff2');
}

@font-face {
    font-family: "Exo3";
    font-weight: bold;
    src: url('assets/fonts/exo3.woff2');
}

@font-face {
    font-family: "Exo4";
    src: url('assets/fonts/exo4.woff2');
}

@font-face {
    font-family: "ffdingbats-arrowsone";
    src: url('assets/fonts/ffdingbats-arrowsone.woff');
}