.navbar-header{
    margin-left: 0 !important; margin-right: 0 !important;
}

.navbar-header .functions[data-function="view"]{
    margin-left: 20px;
}


.navbar-inverse .navbar-nav>li{
    margin-left: 3px;
}
.navbar-inverse .navbar-nav>li>a{
    background: #a6a6a6; width: 121px;
    color: white; text-align: center;

    padding-top: 16px; padding-bottom: 16px;
}
.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover{
    background: #a6a6a6; 
    color: var(--color-orange); text-decoration: underline;
}

.navbar-inverse .navbar-nav>li.active>a, .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
    color: var(--color-orange);
    background: #343434;
}


li.config{float: right;position: relative}

li.config.item #analysis-box{
    top: 28px;
}
li.config > a:focus{
    color: #9d9d9d;
}

#analysis-button{ font-size: 24px; padding-top: 14px !important; padding-bottom: 14px !important;}
li.config.item a{
    padding-bottom: 0;
    padding-top: 0;
}
.functions{
    background: url("images/item.png") !important;
    color: #9d9d9d;
    height: 100%; width: 120px; display: inline-block;
    margin-left: 3px; text-align: center; line-height: 52px;
}

.functions[data-active="true"]{
    background: url("images/active-item.png") !important;
    color: white;
}
/* computer */ 
@media (min-width: 1301px) {
    .navbar-header{
        width: 33.33%;
    }
}
/* tablet */
@media (max-width: 1300px) and (min-width: 640px) {
    #help-btn-li, #analysis-button{
        color: var(--color-orange);
    }
    #analysis-button{
        float: right;
        padding-top: 12px !important;
        margin-right: 10px;
    }
    .navbar-toggle {
        display: block;
        background: #333;
    }
    .navbar-header{
        display: block;
		min-width: 500px !important;
        width: 100%;
		height: 52px;
    }

    .collapse .navbar-nav{
        display: none;
    }
    .collapse.in .navbar-nav{
        display: block;
        float: right !important;
    }
    .navbar-inverse .navbar-nav>li {
        display: inline-block;
    }
    .navbar-nav .profile{
        position: absolute; left: 0;
    }
	.user-summary{
        position: absolute;
        left: 56px;
    }
}

.username-stint{
    background-color: var(--color-lightgrey);;
}
/* phone */

@media (max-width: 640px) {
    .user-popup{
        width: 240px !important;
        left: auto;
        right: -54px;
    }
    .title-user-popup, .content-profile-popup{
        padding-left: 5px !important;
    }
    #help-btn-li, #analysis-button{
        color: var(--color-orange);
    }
    .livetracking-a.active{
        background: #343434 !important;
    }
    .functions{
        background: white !important;
        color: var(--color-lightgrey) !important;
    }
    
    .functions[data-active="true"]{
        background: #ec780e !important;
        color: white !important;;
    }

    #analysis-button{
        float: right;
        padding-top: 12px !important;
        margin-right: 10px;
    }
    .navbar-inverse .navbar-nav>li{
        display: inline-block;
    }
    .menu-first{
        width: 50%;
    }
    #user-login, #user-signup{width: 47%; float: right}
    #user-signup{margin-top: 8px;}
    #user-login a, #user-signup a{width: 97%;}
    #navbar{background: white}

    .navbar-nav .functions{
        width: 47% !important; display: inline-block;
    }
    .livetracking{
        display: none !important;
    }
    .livetracking-a{
        width: 97% !important;
    }
    .menu-first{float: left;}


    .logged .menu-first{
        width: 100%;
    }
    .logged .functions{
        width: 24% !important;
    }
    .user-summary{
        float: right;
        /*max-width: 125px;*/
    }

    .logged .profile{
        float: right; margin-right: 20px;
    }

    .livetracking{display: inline-block !important;}

    .navbar-nav a{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    li.livetracking, li.sessions, li.track{
        width: 32% !important;
        float: none !important;
    }

    li.livetracking a, li.sessions a, li.track a{
        width: auto !important;
    }

    .username-stint{
        background-color: white !important;
    }

    .user-name > div{
        height: 27px;
    }
    #profile-menu, .user-summary .remaining-stints{
        height: 25px;
    }
	li.profile .avatar{
        margin-top: 0;
    }
    li.profile .avatar img{
        height: 52px;
    }

	.user-popup .title-user-popup {
		background-color: #333333;
		text-transform: capitalize;
		color: white;
		padding: 2px 0px;
		font-size: 14px;
		font-weight: 400;
		cursor: pointer;
		text-align: left;
		border: 1px solid #ffffff;
	}
	
	.user-popup .title-user-popup p {
		margin: 0px;
	}
}
@media (max-width: 3600px) {
    .user-popup{
        width: 280px !important;
    }
}


.functions.available:not([data-active="true"]){
    color: var(--color-orange);
}