.fa-bars {
    font-size: 1.5rem;
}

.fa-user {
    font-size: 1.25rem;
}

.fa-bell {
    font-size: 1.25rem;
}

.center-header {
    margin-left: 0.5rem;
    flex-grow: 1;
    flex-flow: row-reverse;
}

.center-header .filler {
    flex-grow: 1;
}
.header-searchbox input:focus-visible {
    padding-left: 1rem;
    border: 0;
    border-radius: 5px;
    background-color: white;
    color: black;
    width: 100%;
}

.header-searchbox img {
    position: absolute;
    color: white;
    top: 35%;
    margin-left: 0.5rem;
    pointer-events: none;
}

.header-searchbox input {
    padding-left: 2.5rem;
    border: 0;
    border-radius: 5px;
    background-color: var(--main-bevar-menu-blue);
    color: white;
    width: 1rem;
    height: 3rem;
    transition: width 0.2s;
}

.table-header-background {
    background-color: var(--main-bevar-elements-background);
}
.header-background {
    background-color: var(--main-bevar-blue);
}

.header-subheader-background {
    background-color: #343434;
    margin-bottom: 0;
}
.header-font {
    font-family: HelveticaNeue, "Helvetica Neue", Arial, serif;
    font-size: 1.25rem;
    font-variant: normal;
    color: white;
}

.header-filler-border {
    height: 2rem;
    border-left: 1px solid white;
    margin-left: 1rem;
    margin-right: 1rem;
}
.header-subheader-font {
    font-family: HelveticaNeue, "Helvetica Neue", Arial, serif;
    font-size: 1.1875rem;
    color: white;
}

.menu.show {
    display: block;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
}
.menu {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1021; /* Stay on top */
    top: 0; /* Stay at the top */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 0;
    text-align: center;
}

.menu.menu-main {
    right: 0;
}
.menu.menu-main .menu-item div h4 {
    margin-left: auto !important;
}
.menu.menu-notification {
    right: 0;
}
.menu.menu-notification .menu-item div h4 {
    margin-left: auto !important;
}
.menu.menu-mobile {
    left: 0;
}
.menu.menu-mobile .menu-item div h4 {
    margin-right: auto !important;
}
.menu.menu-mobile.show .menu-content {
    width:100%;
}
.menu.filtering-menu {
    left: 0;
}
.menu.filtering-menu .menu-item div h4 {
    margin-right: auto !important;
}
.menu.filtering-menu.show .menu-content{
    width:100%;
}
.menu.filtering-menu .filtering-menu-content{
    width:320px;
}
.menu .form-group {
    text-align: left;
}
.menu-content {
    background-color: white;
    width: 250px;
    height: 100%;
}

.menu-spacing {
    width: 250px;
    height: 100%;
    background-color: var(--main-bevar-menu-blue)
}

@media (min-width: 1141px) {
    .menu-spacing {
        width: calc(((100% - 1141px)/2) + 250px);
        height: 100%;
    }
}

.menu-header {
    margin-right: auto;
    margin-left: auto;
    padding: 0.5rem 15px;
}
.menu-footer {
    background-color: white;
    margin-top: auto;
    width: 250px;
}

.menu-item-text {
    color: var(--main-bevar-blue);
    padding: 0.8rem 0.9rem;
}

.menu-item-text:hover {
    background-color: var(--main-bevar-blue);
    color: white;
    text-decoration: none;
}

.nav-icon {
    width: 20px;
}

.nav-icon:after,
.nav-icon:before,
.nav-icon div {
    background-color: #fff;
    border-radius: 3px;
    content: '';
    display: block;
    height: 3px;
    margin: 5px 0;
    transition: all .2s ease-in-out;
}
.nav-icon.clicked::before {
    transform: translateY(8px) rotate(135deg);
}

.nav-icon.clicked:after {
    transform: translateY(-8px) rotate(-135deg);
}

.nav-icon.clicked div {
    transform: scale(0);
}

/** Common objects **/
.loggut-label {
    border: 0;
    border-radius: 25px;
    background-color: var(--main-bevar-menu-blue);
    color: white;
    height: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    display: none;
    width: 8rem;
}
.loggut-label:hover {
    background-color: var(--main-bevar-blue-faded);
    border: 2px solid var(--main-bevar-divider-color);
}

.header-icon {
    width: 2rem;
    float:left;
}
.header-icon.secondary {
    margin-left:1rem;
}

.header-searchbox {
    margin-right: 0.5rem;
    width:100%;
}

.header-icon-menu {
    width: 1.5rem;
    cursor: pointer;
}
.header-icon-menu:not(.expanded) {
    display: block;
    margin-left: 0;
}
.header-icon-menu.expanded {
    display: none;
}
@media (min-width: 400px) {

    .header-searchbox {
        display: inline-block;
        margin-right: 1rem;
        margin-left: 1rem;
        max-width: 15rem;
        flex-grow: 1;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
    }
}

@media (min-width: 768px) {
    .header-icon-menu:not(.expanded) {
        display: block;
    }
    .center-header {
        margin-left: 1.8rem; 
        flex-flow: row;
        justify-content: space-between;
    }
    .center-header .filler {
        flex-grow: 0;
    }
    .header-searchbox {
        float: right;
    }
    .header-searchbox input {
        width: 100%;
        transition: width 0.7s;
    }
}

@media (min-width: 966px) {
    .header-icon-menu:not(.expanded) {
        display: none;
    }
    .header-icon-menu.expanded {
        display: block;
        margin-left: 1rem;
    }

    .loggut-label {
        display: inline-block;
    }
}