/* ---------- HEADER ----------- */
header{
    width: 100%;
    margin: 0px;
    min-height: 40px;
    border-bottom: 2px solid;
    background-color: rgb(162, 204, 229);
}

header.wrapperExpended{
    background-color: lightgrey;
}

header a{
    cursor: pointer;
}

header .row{
    margin: 0px;
}

header img{
    height: 27.5px;
    width: 27.5px;
    margin: 0 5px 5px 5px;
}

header h5{
    color:  rgb(63, 63, 63);
    display: inline-block;
    margin: 8px 0 0 0;
}

header h5:hover{
    text-decoration: none;
}

header #logout{
    display: none;
    border-radius: 10px;
    border: 1px solid;
    background-color: rgb(0,0,0,0);
    padding: 1px 10px;
    margin-top: -5px;
    cursor: pointer;
}

header #logout:hover{
    color: white;
    border-color: black;
    background-color: rgb(75,140,175);
}

header #userHeaderWrapper{
    display: none;
    padding: 5px;
    font-size: 1.2em;
    cursor: pointer;
    transition: weightwight 0.5s linear;
}

header #userHeaderWrapper:hover{
    font-weight: bold;
}

header #userHeaderWrapper img,
header #userHeaderWrapper span{
    float: left
}

@media only screen and (max-width: 576px) {
    header #headerTitle{
        text-align: center;
    }
}