/*nav bar*/
#mynav {
    width: 100%;
    height: 70px;
    box-shadow: 0px 10px 12.1px 0.9px rgba(0, 0, 0, 0.11);
    position: fixed;
    background-color: white;
    z-index: 999;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
    .logo {
        img {
            height: 60px;
            float: left;
            margin: 0 2em
        }
    }
    /*.out {
        font-family: Hurme-regular,sans-serif;
        font-size: 22px;
        letter-spacing: 0.1px;
        text-align: right;
        color: $light-blue;
        text-decoration: none;
        position: absolute;
        right: 1em;
        bottom: 0.3em;
    }*/
    .status {
        float: right;
        padding-right: 2em;
        @include flex;
        height: 100%;
        align-items: flex-start;
        padding-top: 0.5em;
        position: relative;
        .user {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            box-sizing: content-box;
        }
    }
    @media only screen and (max-width: 900px){
        .status{
            padding-right: 4em
        }
        .out {
            font-family: Hurme-regular,sans-serif;
            font-size: 22px;
            letter-spacing: 0.1px;
            text-align: right;
            color: $light-blue;
            text-decoration: none;
            position: absolute;
            right: 3em;
            bottom: 0.3em;
        }
    }
    @media only screen and (max-width: 600px){
        .status{
            padding-top: 1.3em;
            .user {
                width: 40px;
                height: 40px;
                border-radius: 20px;
            }
            .name {
                font-size: 16px;
            }
            .position {
                font-size: 14px;
            }
        }
    }
    @media only screen and (max-width: 500px){
        .status{
            .name {
                display: none
            }
            .position {
                display: none
            }
        }
        .logo{
            img{
                height: 40px
            }
        }
    }
}


.small-nav{
    padding-left: 250px;
}
@media only screen and (max-width: 700px){
    .small-nav{
        padding-left: 0px;
    }
}

// == status menu === //
.status-menu{
    position: absolute;
    right: 100%;
    background-color: white;
    display: none;
    li{
        @include flex;
        padding: 0.5em 1em;
        transition: all 0.4s ease;
        color: $black;
            &:hover{
                background-color: rgb(201, 201, 201)
            }
        a{
            text-decoration: none !important;
            @include flex;
            width: 100%;
            height: 100%;
            color: $black;
            transition: all 0.4s ease;
        }
    }
}
.status-header{
    background-color: rgb(201, 201, 201);
    li{
        padding: 0.2em 1em;
    }
}