html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

@font-face {
    font-family: 'Alpha Slab';
    src: url('../fonts/AlfaSlabOne-Regular.ttf');
}

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

body {
    padding-bottom: 20px;
    font-family: "Roboto";
    /* TODO: remove background. used for semi dark mode */
    /*    background: #424654 !important;*/
}

/* TODO: remove background. used for semi dark mode */
/*html {
    background: #424654 !important;
}*/

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
}

/* styles for validation helpers */
/*.field-validation-error {
    color: #b94a48;
}*/

.field-validation-valid {
    display: none;
}

/*input.input-validation-error {
    border: 1px solid #b94a48;
}


select.input-validation-error {
    border: 1px solid #b94a48;
}

.field-validation-error {
    color: #b94a48;
    font-size: 14px;
}*/

.required::after {
    content: " *";
    font-weight: bold;
    color: red;
}

.flc-success {
}
/* Hide the validation summary if everything is valid */
.validation-summary-valid {
    display: none;
}

.navbar-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.environment-label-container {
    background-color: darkorange !important;
}

    .environment-label-container > div {
        justify-self: center;
    }

.environment-label {
    font-weight: 500;
    font-size: 16px;
    align-self: center;
    margin-top: 8px;
}

.navbar-inverse {
    background-color: #004b8d;
}

    .navbar-inverse .navbar-nav > li > a {
        color: #ffffff;
    }

.navbarinverse .navbar-nav > li > a:hover,
.navbarinverse .navbar-nav > li > a:focus {
    color: rgba(255, 255, 255, 0.5);
}

.navbar-inverse .navbar-brand {
    color: #fff;
}

a.flc-header-image {
    background: url(../images/FLCLogoText-White-Transparent.png) no-repeat top left;
    background-size: 280px;
    display: block;
    height: 40px;
    width: 280px;
    margin-top: 8px;
    text-indent: -9999px; /*hides link text.../Content/images/FLCLogoText-White-Transparent.png*/
}

.flc-bars:before {
    content: url(../images/filter-icon.svg);
}

.flc-read-more {
    display: none;
}

.flc-read-more-link {
    color: #004b8d;
    text-decoration: underline;
}

.flc-filter-nav {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}

nav.flc-sticky-filters {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff;
}

.flc-search-bar {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.flc-search-bar > label {
    margin-right: 5px;
}

.flc-filter-h {
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
}

.flc-filter-toggle {
    display: block;
}

.flc-filter-buttons {
    display: flex;
    align-items: center;
    width: 100% !important;
    margin-bottom: 20px;
}

.flc-filter-wrap option {
    white-space: normal;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.filterRow {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.filterRow > div {
    width: 33%;
}

.filterRow > select {
    margin-bottom: 20px;
}

.filterRow > .extended {
    width: 50%;
}

.select-checkbox option::before {
    content: "\2610";
    width: 1.3em;
    text-align: center;
    display: inline-block;
    margin-left: -1.3rem;
}

.select-checkbox option:checked::before {
    content: "\2611";
}

.select-checkbox option {
    padding-left: 1.3rem;
}

.card {
    margin-bottom: 5px;
}

.card-title {
    background-color: aliceblue;
}
.course-field-label {
    font-weight: 700;
}

h1 {
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    letter-spacing: 0.125rem;
    color: #0078BD;
    font-family: "Alpha Slab", serif;
    line-height: 1.25;
}

h2 {
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    letter-spacing: 0.125rem;
    color: #004b8d;
    font-family: "Alpha Slab", serif;
    line-height: 1.25;
}

h3 {
    padding-bottom: 0.5rem;
    color: #004b8d;
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    line-height: 1.25;
}

.nav > li > a {
    padding: 5px 0px 5px 20px;
}

.btn {
    border-radius: 2px;
}

.btn-success {
    color: #fff;
    background-color: #0078BD;
    border-color: #0078BD;
}

.btn-success:focus,
.btn-success.focus {
    color: #fff;
    background-color: #004b8d;
    border-color: #004b8d;
}

.btn-success:hover {
    color: #fff;
    background-color: #004b8d;
    border-color: #004b8d;
}

.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: #004b8d;
    border-color: #004b8d;
}

.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
    color: #fff;
    background-color: #004b8d;
    border-color: #004b8d;
}

.flc-filters {
    float: left;
    width: 30%;
    padding-right: 10px;
}

.flc-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.flc-tooltip::after {
    content: url(../images/question-circle-fill.svg);
    
}

.flc-main {
    flex: 1;
}

.flex {
    display: flex;
}

/* Media queries for mobile */
@media screen and (max-width: 800px) {
    .flc-filters, .flc-main {
        width: 95%;
    }

    .flc-filters {
        position: fixed;
        top: 5rem;
        bottom: 0;
        background-color: white;
        overflow-y: scroll;
        overflow-x: inherit;
        z-index: 1;
    }

    .filterRow {
        align-items: center;
    }

    .flc-filter-toggle {
        display: block;
    }

    .flc-filter-nav {
        align-items: center;
        justify-content: center;
    }

    .flc-filter-nav > h3 {
        padding: 0;
        margin: 0;
    }

}

@media screen and (min-width: 801px) {
    .flc-filters {
        /*display: block !important;*/
    }
}