/*
* This is to format input group appends & prepends globally without the need for numerous classes on each occuration
*/
.input-group-append,
.input-group-prepend {
    padding: 0 1rem !important;
    background: var(--blue-base);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.input-group-prepend {
    border-radius: 7px 0 0 7px;
}

.input-group-append {
    border-radius: 0 7px 7px 0;
}

/*
* This is to ensure validation messages (positioned absolute) do not wander off down the page
*/
div[class*="col-"] {
    position: relative;
}

.btn-light.bg-yellow:hover {
    background: var(--yellow-base);
    transition: ease all 350ms;
}

.nav-link {
    color: var(--blue-base);
}

.nav-pills .nav-link.active {
    background: var(--blue-base) !important;
}

@media only screen and (min-width: 576px) {
    .nav {
        width: 100% !important;
    }
}