:root {
    --dark-teal: #006265;
    --med-teal: #008770;
    --light-teal: #00B092;
    --dark-blue: #0073CF;
    --med-blue: #0098DB;
    --light-blue: #5BC6E8;
    --palest-blue: #8FCAE7;
    --white: #ffffff;
    --black333: #333;
    --black555: #555;
    --black777: #777;
    --greyddd: #ddd;
    --dark-red: #E20000;
    --red: #EB5757;
    --green: #1E874A;
    --teal-link: #2FDFC0;
    --dark-yellow: #F2C94C;
    --teal-01: #00856E;
}

/* TYPOGRAPHY */
.breadcrumb-style {
    top: 40%;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 2px;
}

.breadcrumb {
    padding: 10px 0px !important;
    background-color: transparent !important;
}

.breadcrumb>li a {
    margin-left: 0px !important;
}

h1,
h2,
h3,
h4,
body,
p,
.main,
.sidebar {
    font-family: 'Segoe UI', 'Source Sans Pro', sans-serif;
    color: var(--black333);
}

h1,
.main .page-header {
    margin-top: 0;
}

.page-heading {
    display: none !important;
}

html[dir="ltr"] li a {
    margin-left: 0px;
}

h1,
.page-header,
h2,
h3,
h4,
h5 {
    font-weight: 700;
}

h2 {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.5px;
    margin-top: 10px !important;
}

.intro-p,
p {
    font-family: 'Segoe UI', 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

a,
a:focus,
a:hover,
a:active,
a:visited {
    outline: 0;
    border: 0;
    outline-offset: 0;
}

/* TOP NAV */
.navbar {
    position: fixed;
    width: 100%;
}

.navbar-nav>li>a {
    color: white !important;
    font-family: 'Segoe UI', 'Source Sans Pro', sans-serif!important;
    font-weight: 400!important;
}

.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu {
    background-color: var(--teal-01)!important;
    outline: 0;
    border: 0;
}

.container {
    width: 100%!important;
}

/* CORE AREA */
.ca-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.3px;
}

.ca-progress {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

/* PROGRESS */
.progress {
    margin-bottom: 5px !important;
}

/* remove after adjusting div and width of progress */


/* OR 3 INFO BOXES */
.appeal-color {
    color: var(--light-red);
    font-weight: 700;
}

.esca-color {
    color: var(--dark-yellow);
    font-weight: 700;
}

.corres-color {
    color: var(--med-blue);
    font-weight: 700;
}

.box-style {
    margin: 10px;
}

/* Move down content because we have a fixed navbar that is 50px tall */
.container-fluid {
    padding-top: 50px;
}

/* SIDEBAR */
.nav-sidebar {
    padding-top: 100px;
}

.sidebar hr {
    position: relative;
    top: 100px;
    border-top: 1px solid white;
    z-index: 1000;
}

/* Hide for mobile, show later */
.sidebar {
    display: none;
    margin-bottom: 0 !important;
}

.sub-menu-background {
    background-color: var(--dark-teal);
    border-radius: 4px;
    padding: 15px;
}

.icon-item {
    display: flex;
    max-width: 250px;
}

/* .submenu {
    background: var(--dark-teal);
    margin-left: 20px;
    margin-right: 20px;
} */

/* #sublink_L2:first-child {
    background: var(--dark-teal);
    border-radius: 4px 0px 8px 20px;
}

#sublink_L2:nth-last-child() {
    background: red;
} */
/* Mod */
@media (min-width: 768px) {
  
    .sidebar {
        position: fixed;
        height: 100vh;
        bottom: 0;
        left: 0;
        /* z-index: 1000; */
        display: block;
        padding: 20px;
        /* overflow-x: hidden !important;
        overflow-y: auto; */
        /* Scrollable contents if viewport is shorter than content. */
        background-color: var(--teal-01);
        border-right: 1px solid #eee;
    }
}

/* Sidebar navigation */
.nav-sidebar {
    margin-right: -21px;
    /* 20px padding + 1px border */
    /* margin-bottom: 20px; */
    margin-left: -20px;
}

.nav-sidebar>li>a {
    padding-right: 20px;
    padding-left: 20px;
    text-decoration: none;
}

.nav-sidebar>.active>a {
    color: white!important;
    font-weight: 700;
}

.nav-sidebar>.active>a:hover,
.nav-sidebar>.active>a:focus {
    color: white;
}

#sublink_L1,
#sublink_L2 {
    display: flex;
    align-items: center;
}

#sublink_L1:hover {
    background-color: transparent;
}

#sublink_L1 span,
#sublink_L2 span {
    margin-left: 3px;
    margin-right: 3px;
}

#sublink_L2 {
    color: white;
    /* padding-left: 20px; */
    background: var(--dark-teal);
    margin-left: 20px;
    margin-right: 20px;
}

#sublink_L2:hover {
    background-color: #333;
}

/* if we don't have this, the svg will auto collapse */
#sublink_L2 svg {
    min-width: 20px;
    min-height: 20px;
}

/*-----MAIN-----*/

.main {
    padding: 20px;
}

@media (min-width: 768px) {
    .main {
        padding-right: 40px;
        padding-left: 40px;
    }
}

/* -------TABLE------- */
table {
    background-color: white;
    /* border: 1px solid var(--greyddd); */
    border-radius: 4px;
    padding: 20px;
}

.main-or {
    border: 1px solid #ddd;
}

.grey-out td p {
    color: #bbb;
}

/* MOBILE VIEW  */
/* TOP NAV - MOBILE Hamburger menu  */

@media (max-width: 768px) {
    .container-fluid {
        padding-top: 100px;
    }

    .navbar-inverse .navbar-toggle,
    .navbar-inverse .navbar-toggle:focus {
        background-color: var(--light-teal);
        border: 1px solid var(--light-teal);
        transition: .5s;
        position: absolute;
        right: 15px;
        top: 25%;
    }

    .navbar-inverse .navbar-nav>li>a:hover,
    .navbar-inverse .navbar-nav>li>a:focus {
        outline: 0;
        border: 0;
        outline-offset: 0;
    }

    .navbar-inverse .navbar-toggle:hover {
        background-color: var(--teal-link)!important;
        transition: .5s;
    }
}

.navbar-inverse .navbar-nav > li > a:hover {
    background-color: var(--teal-link);
        transition: .5s;
}

.navbar-inverse .navbar-nav>li>a:focus {
    border: 0 !important;
}

/* HIDE "SKIP TO CONTENT" BUTTON, PRIVATE MODE */
.skip-to-content,
#privateModeText {
    display: none;
}

.navbar .navbar-inverse .navbar-static-top {
    border-bottom-width: 0px;
}