:root {
    --background-color: #fafafa;
    --panel-background-color: #404466;
}

body {
    font-family: sans-serif;
    background: var(--background-color);
}

header {
    background: var(--panel-background-color);
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.page-wrapper {
    display: flex;
    align-items: stretch;
}

#body-content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
}

.cursor-pointer {
    cursor: pointer;
}

.modal-vlg {
    max-width: 1000px;
}

.bg-gradient-success {
    background: linear-gradient(#18BC9C60 10%, #18BC9C90, #18BC9C);
}

.bg-gradient-light {
    background: linear-gradient(#acb0b160, #ecf0f1);
}

.card {
    font-size: .875rem!important;
    font-weight: 400!important;
}

/* Bootstrap floating labels are too close to fields */
.bmd-label-static, .bmd-form-group.is-filled .bmd-label-floating, .bmd-form-group.is-focused .bmd-label-floating {
    top: 0.75rem !important;
}

/* Requested by Eric to remove */
.container-fluid {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Workaround for bootstrap tooltip flickering */
.tooltip {
    pointer-events: none;
}

/* Make the invalid feedback text a little less threatening. Go red when field is touched. */
.invalid-feedback {
    color: #95a5a6;
}
.touched ~ .invalid-feedback {
    color: #E74C3C !important;
}

/* Bootstrap's class doesn't work. I changed the name so that there's an indicator to future developers that this is a custom fix. */
.dropdown-menu-right-fix {
    right: 0;
    left: auto;
}

/* Bootstrap's class makes the form bounce. */
.invalid-feedback {
    position: absolute;
}

/* The normal pattern is to hide errors on untouched fields, but that can actually cause problems. This handles the conflict between bmd-help and invalid-feedback and also the
    case where typing something causes an error on a later field. I would like to do more with this, but CSS selectors don't do what's necessary. This is good enough.
*/
.help-feedback + .invalid-feedback {
    color: rgba(0,0,0,.54);
}

/** Bootstrap's checkboxes look ugly and material bootstrap's checkboxes are invisible. Surface's look OK and don't require JS **/
input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*="lightbox-"]) {
    position: relative;
    cursor: pointer;
}
    input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*="lightbox-"]):before {
        content: '';
        width: 16px;
        height: 16px;
        border: solid 2px var(--primary);
        border-radius: 3px;
        background: white;
        position: absolute;
    }
    input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*="lightbox-"]):after {
        content: '✓';
        color: white;
        background: var(--primary);
        position: absolute;
        top: 0;
        left: 0;
        width: 16px;
        height: 16px;
        border: solid 2px var(--primary);
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
        will-change: opacity;
    }
    input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*="lightbox-"]):checked:after {
        opacity: 1;
    }
    input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*="lightbox-"]):focus {
        outline: none;
    }
/** End material checkbox **/

/** Responsive sizing utilities that aren't in bootstrap **/

@media (min-width: 576px) {
    .w-sm-25 {
        width: 25% !important;
    }

    .w-sm-50 {
        width: 50% !important;
    }

    .w-sm-75 {
        width: 75% !important;
    }

    .w-sm-100 {
        width: 100% !important;
    }

    .w-sm-auto {
        width: auto !important;
    }

    .h-sm-25 {
        height: 25% !important;
    }

    .h-sm-50 {
        height: 50% !important;
    }

    .h-sm-75 {
        height: 75% !important;
    }

    .h-sm-100 {
        height: 100% !important;
    }

    .h-sm-auto {
        height: auto !important;
    }
}

@media (min-width: 768px) {
    .w-md-25 {
        width: 25% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-75 {
        width: 75% !important;
    }

    .w-md-100 {
        width: 100% !important;
    }

    .w-md-auto {
        width: auto !important;
    }

    .h-md-25 {
        height: 25% !important;
    }

    .h-md-50 {
        height: 50% !important;
    }

    .h-md-75 {
        height: 75% !important;
    }

    .h-md-100 {
        height: 100% !important;
    }

    .h-md-auto {
        height: auto !important;
    }
}

@media (min-width: 992px) {
    .w-lg-25 {
        width: 25% !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-100 {
        width: 100% !important;
    }

    .w-lg-auto {
        width: auto !important;
    }

    .h-lg-25 {
        height: 25% !important;
    }

    .h-lg-50 {
        height: 50% !important;
    }

    .h-lg-75 {
        height: 75% !important;
    }

    .h-lg-100 {
        height: 100% !important;
    }

    .h-lg-auto {
        height: auto !important;
    }
}

@media (min-width: 1200px) {
    .w-xl-25 {
        width: 25% !important;
    }

    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-75 {
        width: 75% !important;
    }

    .w-xl-100 {
        width: 100% !important;
    }

    .w-xl-auto {
        width: auto !important;
    }

    .h-xl-25 {
        height: 25% !important;
    }

    .h-xl-50 {
        height: 50% !important;
    }

    .h-xl-75 {
        height: 75% !important;
    }

    .h-xl-100 {
        height: 100% !important;
    }

    .h-xl-auto {
        height: auto !important;
    }
}
/** End responsive sizing **/

/** Bootstrap material has an issue where different inputs have different heights **/

    select.form-control:not([size]):not([multiple]) {
        height:2rem;
    }

    input.form-control[type=date] {
        height: 2rem;
    }

/** End workaround for height bug **/


/** Mobile button block **/

@media all and (max-width:480px) {
    .btn-xs-block {
        width: 100% !important;
        display: block !important;
    }
}

@media all and (max-width:760px) {
    .btn-md-block {
        width: 100% !important;
        display: block !important;
    }
}

/** End mobile button block **/