/*Super cool style sheet*/

:root {
    /*Primary Accent Colors*/
    --Accent1Primary: #104C8F;
    --Accent2Primary: #00A894;
    /*Secondary Accent Colors*/
    --Accent1Secondary: #007cbb;
    --Accent2Secondary: #f3b231;
    --Accent3Secondary: #f69333;
    --Accent4Secondary: #3cb4e5;
    /*Main Color variables*/
    --PrimaryActionColor: var(--Accent1Primary);
    --SecondaryActionColor: var(--Accent4Secondary);
    /*Utility Colors*/
    --WarningColor: #D8127E;
    --PassColor: LimeGreen;
    --GrayElementLight: #E0E0E0;
    --GrayElementDark: #757575;
    --GrayElementColor: var(--GrayElementLight);
    /*Background Color*/
    --BackgroundContrastGrayLight: #EAEBEF;
    --BackgroundBlueLight: #EFFAFF;
    --BackgroundGrayLight: #F8F8F8;
    --BasePageColor: var(--BackgroundBlueLight);
    --SectionColor: var(--BackgroundGrayLight);
    --ToolbarBackgroundColor: var(--BackgroundContrastGrayLight);
    --DividerBackgroundColor: var(--GrayElementColor);
    /*Font Colors*/
    --TextColorSubtitle: #808080;
    --TextColorLight: #FFFEFD;
    --TextColorDark: #181717;
    --TextColorPrimary: var(--TextColorDark);
    --TextColorPrimaryInverse: var(--TextColorLight);
    --TextColorToolbar: var(--TextColorDark);
    --TextPrimaryButtonColor: var(--TextColorDark);
    --TextColorSubHeading: var(--Accent2Primary);
    --TextColorEyebrow: var(--Accent2Secondary);
}

@font-face {
    font-family: HeadlineFont;
    src: url(../fonts/Monorale-Bold.otf);
}

@font-face {
    font-family: BodyFont;
    src: url(../fonts/RobotoCondensed-Regular.ttf)
}

@font-face {
    font-family: BodyFontBold;
    src: url(../fonts/RobotoCondensed-Bold.ttf)
}

@font-face {
    font-family: BodyFontItalic;
    src: url(../fonts/RobotoCondensed-Italic.ttf)
}

@font-face {
    font-family: BodyFontBoldItalic;
    src: url(../fonts/RobotoCondensed-BoldItalic.ttf)
}

html {
}

body {
    background-color: var(--BasePageColor);
    color: var(--TextColorPrimary);
    font-family: BodyFont;
}

a {
    color: var(--SecondaryActionColor);
    text-decoration: none;
}

h1 {
    font-family: HeadlineFont;
    color: var(--PrimaryActionColor);
}

h2 {
    font-family: HeadlineFont;
    color: var(--PrimaryActionColor);
}

h3 {
    font-family: HeadlineFont;
    color: var(--TextColorSubHeading);
}

h4 {
    font-family: HeadlineFont;
    color: var(--TextColorSubHeading);
}

h5 {
    font-family: HeadlineFont;
    color: var(--TextColorPrimary);
}

h6 {
    font-family: HeadlineFont;
    color: var(--TextColorPrimary);
}

.data-element-container {
    margin: 10px 0px !important;
}

    .data-element-container label {
        font-family: BodyFontBold
    }

    .data-element-container small {
        font-family: BodyFontItalic;
        color: var(--TextColorSubtitle);
    }

.btn-primary {
    color: var(--TextColorPrimaryInverse);
    background-color: var(--PrimaryActionColor);
}

.btn-outline-primary {
    color: var(--PrimaryActionColor);
    border-color: var(--PrimaryActionColor);
}

.btn-link {
    color: var(--SecondaryActionColor);
    text-decoration: none;
}

.text-danger {
    color: var(--WarningColor) !important;
}

.text-tiny {
    font-size: 0.75em;
}

.navbar {
    background-color: var(--ToolbarBackgroundColor);
    color: var(--TextColorToolbar);
}

    .navbar a {
        color: var(--TextColorToolbar);
    }

.card {
    background: var(--SectionColor);
    border: solid;
    border-color: var(--DividerBackgroundColor);
    border-width: 1px;
    padding: 20px;
    margin: 10px;
}

.card-header {
    background: var(--SectionColor);
    border-color: var(--DividerBackgroundColor);
    border-width: 1px;
    padding: 4px;
    min-height: 125px;
}

.action-row {
    background: var(--SectionColor);
    border-color: var(--DividerBackgroundColor);
    border-width: 1px;
    display: inline-block;
    border-style: solid;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px;
}

.form-control:focus {
    border-color: var(--PrimaryActionColor);
    box-shadow: 0 0 0 0.05rem var(--PrimaryActionColor);
}

.form-check-input:checked {
    background-color: var(--PrimaryActionColor) !important;
}

.stack-group-item {
    position: relative;
    display: block;
    padding: 0.5rem unset;
    /*color: #212529;*/
    text-decoration: none;
    /*background-color: #fff;*/
    /*border: 1px solid rgba(0, 0, 0, 0.125);*/
}


.table {
    background-color: white;
}

    .table thead {
        background-color: var(--PrimaryActionColor);
        color: var(--TextColorLight);
    }