.navbar {
    background-color: #0D0D3A;
    height: 50px;
    margin-right: 0px;
    margin-left: 40px;
    border-bottom: 1px solid #ffffff;
}

.navbar-toggler-icon { display: contents; }

.navbar-toggler { border-color: transparent !important; }

.navbar-toggler:hover { color: rgba(0, 0, 0, .7); }

p.navbar-text { margin: 0; }

/*#mainNav > div { line-height: 20px; }*/

.environmentBanner {
    position: relative;
    z-index: 2;
    height: 25px;
}

.background-env-development {
    background-color: #8f00d6;
}

.background-env-beta {
    background-color: #2196F3;
}

.background-env-staging {
    background-color: #D68100;
}

.background-env-testing {
    background-color: #D68100;
}

.background-env-testing2 {
    background-color: #D68100;
}


#mainNav .navbar-nav > li > div > a {
    font: normal normal 300 12px/18px Sofia Pro;
    letter-spacing: 1.08px;
    text-transform: uppercase;
}

#mainNav .navbar-nav > li > a,
#mainNav .navbar-nav > a {
    font: normal normal 300 12px/18px Sofia Pro;
    letter-spacing: 1.08px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.navbar-brand-shrink {
	padding: 0;
	padding-top: 0.25rem !important;
}

.nav-img { padding: 0; }

.popover {
	max-width: 30%;
	min-width: 140px;
}

.popover-body { padding: 0.75rem 1.5rem; }

#navWidget:focus { outline: none; }

#navWidget:hover { cursor: pointer; }

.navbar-expand .navbar-toggle { display: none; }

.navbar-expand-lg .navbar-nav .navbar-toggle-inverse { display: none; }

.wrapper {
	width: 100%;
	position: relative;
	z-index: 2;
}

.greenBlock {
	width: 40px;
	height: 50px;
	background-color: #27CC85;
	float: left;
}

.logo {
    vertical-align: middle;
    margin-left: 5%;
    margin-top: 1px;
}

.logo img {
    max-height: 25px;
}

.small-screen-login {
    vertical-align: middle;
    margin-right: 5%;
}

.rightNavDropDown {
	margin-right: 5%;
}

.leftNavDropDown {
	margin-left: 5%;
}

.sidenav {
    width: 40px;
    position: fixed;
    z-index: 1;
    top: 0px;
    left: 0px;
    background: #0D0D3A;
    overflow-x: hidden;
    padding: 8px 0;
    bottom: 0;
    border-right: 1px solid #ffffff
}

.expand-nav {
	width: 20%;
}

@media(min-width: 0px) {

    .rightNavDropDown {
        margin-right: 0px;
    }

    .leftNavDropDown {
        margin-left: 0px;
    }

    .navbar {
        height: auto;
        min-height: 50px;
        padding: 2px !important;
    }
    .main {
        height: calc(100% - 50px);
    }
    .left-margin {
        margin-left: 0px;
    }

    .top-margin-30 {
        margin-top: 15%
    }

    .top-margin-25 {
        margin-top: 12%
    }

    .top-margin-20 {
        margin-top: 10%
    }
}

@media (min-width: 576px) {
    .navbar-expand-sm .navbar-toggle {
        display: none;
    }

    .navbar-expand-lg .navbar-nav .navbar-toggle-inverse {
        display: none;
    }
}

@media (max-width: 767px) {
    .sidenav {
        display: none !important;
    }

    .greenBlock {
        display: none !important;
    }

    .navbar {
        margin-left: 0px;
        /*margin-right: 60px;*/
    }
}

@media (min-width: 768px) {
    .navbar-expand-md .navbar-toggle {
        display: none;
    }

    .navbar-expand-md > navbar-collapse > .navbar-toggle-inverse {
        display: none;
    }
    .navbar {
        min-height: 50px;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-toggle {
        display: none;
    }

    .navbar-expand-lg .navbar-nav .navbar-toggle-inverse {
        display: block;
    }

    .rightNavDropDown {
        margin-right: 5%;
    }

    .leftNavDropDown {
        margin-left: 5%;
    }

    .navbar {
        margin-left: 40px;
        height: 50px;
    }
}

@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-toggle {
        display: none;
    }

    .navbar-expand-lg .navbar-nav .navbar-toggle-inverse {
        display: block;
    }

    .ext-link > a {
        font-size: 0.6rem;
    }
}

@media (min-width: 1300px) {
    .ext-link > a {
        font-size: 0.6rem;
    }
}


@media (min-width: 1340px) {
    .ext-link > a {
        font-size: 12px;
    }
}

@media (max-width: 1150px) {
    .expand-nav {
        width: 30% !important;
    }
}

@media (max-width: 1370px) {
    .expand-nav {
        width: 25%;
    }
}