nav {
    display: inline-block;
    width: 240px;
    height: 100vh;
    margin-top: 0;
    background: #3c3c3c;
    border-right: 2px solid #323232;
    position: fixed;

    overflow-y: auto;
    scrollbar-color: #2f2c2c #4d4a4a;
    scrollbar-width: thin;
}

nav * {
    box-sizing: border-box;
}

nav ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    font-family: 'Segoe UI', 'Arial';
    box-sizing: border-box;
}

nav ul li {
    position: relative;
    display: block;
    background: #3c3c3c;
    background: #303030;
    border-bottom: 2px solid #323232;
    vertical-align: middle;
}

nav ul li .button
{
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: #3c3c3c;
    border: none;
    border-left: 4px solid transparent;
    color: #d8d8d8;
    font-size: 0;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .05em;
    text-align: left;
    vertical-align: middle;
    transition:
        background .2s linear,
        color .3s linear;
}

nav ul li:not([name="encoder"]) .button .nav-icon
{
    display: inline-block;
    position: relative;
    top: 0;
    padding-top: 15px;
    font-size: 24px;
    width: 55px;
    height: 55px;
    margin: 0;
    color: #d8d8d8;
    vertical-align: middle;
    text-align: center;
}


nav ul li .button[disabled="disabled"],
nav ul li:not([name="encoder"]) .button[disabled="disabled"] .nav-icon
{
    background: #323232;
    color: #666666;
}

nav ul li .button .nav-text {
    display: inline-block;
    width: calc(100% - 55px);
    font-size: 16px;
    vertical-align: middle;
    text-align: left;
}

/****************************************************************************************************
    rollovers
****************************************************************************************************/

nav ul li a:hover
{
    background: #4d4d4d;
    color: #ffffff;
    text-decoration: none;
}

nav ul li button[name="go-live"]:hover {
    background: #449d44;
}

nav ul li button[name="stop-live"]:hover {
    background: #c9302c;
}

/****************************************************************************************************
    encoder live display denote
****************************************************************************************************/

@media only screen and (min-width: 641px)
{

    body[nav="closed"] nav {
        width: 55px;
    }

    body[nav="closed"] nav ul li:not([name="broadcast"]) .button
    {
        border-left: none;
    }

    body[nav="closed"] nav ul li .button .nav-text
    {
        display: none;
    }

}

nav ul[name="menu"],
body[isLIVE="0"] nav ul li .button[name="processing-live"],
body[isLIVE="0"] nav ul li .button[name="publishing-live"],
body[isLIVE="0"] nav ul li .button[name="stop-live"],
body[isLIVE="0"] nav ul li .button[name="offline"],
body[isLIVE="0"][isONLINE="0"] nav ul li .button[name="go-live"],
body[isLIVE="0"][autoLIVE="1"] nav ul li .button[name="go-live"],
body[isLIVE="1"] nav ul li[name="encoder"] .button:not([name="stop-live"]),
body[isLIVE="1"][isONLINE="0"] nav ul li[name="encoder"] .button[name="stop-live"],
body[autoLIVE="0"] nav ul li .button[name="loading"],
body[nav="closed"] nav ul li .button .nav-text
{
    display: none;
}

/*
can go, due to the old layout js setting inline display
*/
body[isLIVE="1"][isONLINE="0"] nav ul li[name="encoder"] .button[name="stop-live"]
{
    display: none !important;
}

body[isONLINE="0"] nav ul li[name="encoder"] .button[name="offline"]
{
    display: block;
}

body[isONLINE="1"][isLIVE="0"] nav ul li[name="encoder"] .button:not([name="go-live"]),
body[isONLINE="1"][isLIVE="1"] nav ul li[name="encoder"] .button:not([name="stop-live"]),
body[isONLINE="1"][isLIVE="-1"] nav ul li[name="encoder"] .button:not([name="processing-live"]),
body[isONLINE="1"][isLIVE="-2"] nav ul li[name="encoder"] .button:not([name="publishing-live"]),
body[isONLINE="0"] nav ul li[name="encoder"] .button:not([name="offline"])
{
    display: none;
}

/****************************************************************************************************
    encoder live denote
****************************************************************************************************/

nav ul li[name="encoder"] .button,
nav ul li[name="broadcast"] .button[name="go-live"]
{
    height: 55px;
    background: #64b95e;
    color: #ffffff;
}

nav ul li button[name="go-live"] {
    font-size: 0;
}

nav ul li[name="broadcast"] .button[name="go-live"] .nav-icon,
nav ul li[name="encoder"] .button[name="go-live"] .nav-icon,
nav ul li[name="encoder"] .button[name="processing-live"] .nav-icon-holder,
nav ul li[name="encoder"] .button[name="publishing-live"] .nav-icon-holder,
nav ul li[name="encoder"] .button[name="loading"] .nav-icon-holder,
nav ul li[name="encoder"] .button[name="offline"] .nav-icon-holder
{
    width: 55px;
    color: #ffffff;
    font-size: 28px;
    top: auto;
    padding: 0;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
}

nav ul li[name="encoder"] .button[name="processing-live"] .nav-icon-holder,
nav ul li[name="encoder"] .button[name="publishing-live"] .nav-icon-holder,
nav ul li[name="encoder"] .button[name="loading"] .nav-icon-holder,
nav ul li[name="encoder"] .button[name="offline"] .nav-icon-holder
{
    height: 100%;
}

nav ul li[name="broadcast"] .button[name="go-live"] .nav-icon,
nav ul li[name="encoder"] .button[name="processing-live"] .nav-icon-holder .nav-icon,
nav ul li[name="encoder"] .button[name="publishing-live"] .nav-icon-holder .nav-icon,
nav ul li[name="encoder"] .button[name="loading"] .nav-icon-holder .nav-icon,
nav ul li[name="encoder"] .button[name="offline"] .nav-icon-holder .nav-icon
{
    margin-top: 16px;
    margin-top: 14px;
    margin-bottom: -16px;
    margin-bottom: -14px;
}
nav ul li[name="encoder"] .button[name="offline"] .nav-icon-holder .nav-icon
{
    margin-top: 16px;
    margin-bottom: -16px;
}

body[nav="closed"] nav ul li button[name="go-live"] .nav-icon {
    width: 100%;
    color: #ffffff;
    font-size: 28px;
    position: relative;
    top: auto;
    padding: 0;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
}

nav ul li .button[name="stop-live"] {
    background: #bf273a;
    text-align: center;
}

nav ul li button[name="loading"] .nav-icon-holder .nav-icon,
nav ul li button[name="stop-live"] .nav-icon
{
    width: 26px;
    height: 26px;
    padding: 3px;
    font-size: 17px;
    border: 2px solid #ffffff;
    border-radius: 14px;
    color: #ffffff;
}

nav ul li .button[name="processing-live"],
nav ul li .button[name="publishing-live"]
{
    background: #ff9100;
	cursor: wait;
}

nav ul li .button[name="offline"]
{
    background: #000000;
	cursor: not-allowed;
}

nav ul li .button[name="processing-live"] .nav-icon,
nav ul li .button[name="publishing-live"] .nav-icon,
nav ul li .button[name="offline"] .nav-icon
{
    color: #ffffff;
	animation: spinner 2s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/****************************************************************************************************
    current page denote
****************************************************************************************************/

nav ul li .button[name="loading"] {
    display: block;
    background: #64b95e00;
    border-left: 0;
    cursor: pointer;

    animation:
    backgroundGrow 5s 1s infinite;
}

nav ul li div[name="loading"] .tip-goals-percentage-holder {
	position: relative;
	display: block;
    top: 15px;
    left: 15px;
	width: 26px;
	height: 26px;

    animation: spinner 2s linear infinite;
}

nav ul li div[name="loading"] .tip-goals-percentage {
	stroke: #ffffff;
	fill: none;
	stroke-width: 3.4;
	stroke-linecap: round;
	vertical-align: top;
    animation:
        loadingProgress 2s ease-out infinite;
    /*
    */
}

nav ul li .button[name="loading"] .number
{
    position: relative;
    top: -12px;
    left: 15px;
    width: 26px;
    height: 26px;
    padding: 2px;
    font-size: 16px;
    color: #ffffff;
    opacity: 0;
}

nav ul li .button[name="loading"] .number[number="5"]
{
    opacity: 1;
    animation:
        numberShow 1s 1s forwards,
        hideElement 0s 2s linear 1 forwards;
}
nav ul li .button[name="loading"] .number[number="4"]
{
    animation:
        numberShow 1s 2s forwards,
        hideElement 0s 3s linear 1 forwards;
}
nav ul li .button[name="loading"] .number[number="3"]
{
    animation:
        numberShow 1s 3s forwards,
        hideElement 0s 4s linear 1 forwards;
}
nav ul li .button[name="loading"] .number[number="2"]
{
    animation:
        numberShow 1s 4s forwards,
        hideElement 0s 5s linear 1 forwards;
}
nav ul li .button[name="loading"] .number[number="1"]
{
    animation:
        numberShow 1s 5s forwards,
        hideElement 0s 6s linear 1 forwards;
}

@keyframes backgroundGrow {
	0% {
        background: #64b95e00;
	}
	100% {
        background: #64b95e;
	}
}

@keyframes numberShow {
	0% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes hideElement {
	100% {
		height: 0;
		margin: 0;
		padding: 0;
        overflow: hidden;
	}
}

@keyframes loadingProgress {
    0% {
        stroke-dasharray: 0 100;
    }
    80% {
        stroke-dasharray: 100 100;
    }
    100% {
        stroke-dasharray: 0 100;
    }

}

/****************************************************************************************************
    current page denote
****************************************************************************************************/

body[page="broadcast"] nav ul li[name="broadcast"] a,
body[page="nudgr"] nav ul li[name="nudgr"] a,
body[page="stats"] nav ul li[name="stats"] a,
body[page="settings"] nav ul li[name="settings"] a,
body[page="account"] nav ul li[name="account"] a,
body[page="payments"] nav ul li[name="payments"] a,
body[page="instructions"] nav ul li[name="instructions"] a,
body[page="ratings"] nav ul li[name="ratings"] a,
body[page="shows"] nav ul li[name="shows"] a,
body[page="speedtest"] nav ul li[name="speedtest"] a,
body[page="support"] nav ul li[name="support"] a,
body[page="protools"] nav ul li[name="protools"] a,
body[page="phone"] nav ul li[name="phone"] a,
body[page="profile"] nav ul li[name="profile"] a,
body[page="shorts"] nav ul li[name="shorts"] a,
body[page="premium-shorts"] nav ul li[name="premium-shorts"] a
{
    border-left-color: #d8d8d8;
}


/****************************************************************************************************
    mobile
****************************************************************************************************/

@media only screen and (max-width: 640px)
{

    nav {
        position: relative;
        display: block;
        width: 100%;
        height: 55px;
        border-right: 0;
        overflow: hidden;
    }

    nav ul li button[name="menu"]
    {
        display: inline-block;
        width: 55px;
        height: 55px;
        padding: 0;
        background: #3c3c3c;
        border: none;
        color: #d8d8d8;
        font-size: 0;
        text-align: center;
        vertical-align: middle;
        transition:
            background .2s linear,
            color .3s linear;
    }

    nav ul[name="menu"],
    nav ul[name="encoder"]
    {
        display: inline-block;
        width: 55px;
        height: 55px;
        vertical-align: top;
        padding: 0;
        outline: 0;

    }
    nav ul[name="encoder"]
    {
        width: calc(100% - 55px);

    }
    nav{
        height: auto;
    }

    body[nav] nav ul[name="main"]
    {
        display: none;
    }

    nav ul[name="main"]
    {
        width: 100%;
    }

    body[nav="closed"] #main-container,
    #main-container
    {
        position: relative;
        left: 0;
        display: block;
        width: 100%;
    }

}





nav ul li[name$="shorts"] .button .nav-icon
{
    background-image: url('/css/icons/shorts.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 24px;
    opacity: .8;
    font-size: 0;
}

nav ul li[name="nav-messenger"] .button .nav-icon svg
{
    width: 24px;
    fill: rgb(255 255 255);
}