:root{
	--background-color: #f2f2f2;
	--btn-orange: #fca844;
	--light-grey: #bababa;
	--dark-grey: #7f7f7f;
	--input-grey: #eae7e7;
	--medium-grey: #a6a6a6;
	--nav-text-grey: #7c90a0;
	--aqua: #1CBBD8;
	--light-aqua: #caefea;
	--grey-blue: #5e6975;
	--active-text-color: #4dbb86;
	--inactive-text-color: #e87272;

	--font-awesome: 'Font Awesome 5 Free';
	--roboto-slab: 'Roboto Slab', serif;
	--montserrat: 'Montserrat', sans-serif;
}

body {
	background-color: var(--background-color);
	color: var(--light-grey);
	font-family: var(--montserrat);
	font-weight: 500;
}

h1 {
	font-family: var(--roboto-slab);
	font-weight: 600;
	color: var(--dark);
}
h2 {
	font-family: var(--roboto-slab);
	font-weight: 600;
	color: var(--dark-grey);
}

.cta {
	font-family: var(--roboto-slab);
	background-color: var(--btn-orange);
	border-radius: 10px;
	border: none;
	box-shadow: 0px 1px 2px #00000038;
	width: 200px;
	padding: 10px;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 700;
	max-width: 100%;
	outline: 0;
}
.cta:hover {
	color: #fff;
	text-decoration: none;
}

.cta.secondary {
	background-color: var(--aqua);
	font-size: 1rem;
}
.cta.secondary:hover {
	color: #fff;
	opacity: .8;
	text-decoration: none;
}

.cta-text-link,
.cta-text-link:hover {
	color: var(--btn-orange);
	text-decoration: underline;
}
.cta-text-link:hover {
	opacity: .8;
}

.link-box:hover {
	color: inherit;
}

.link-box:hover {
	color: inherit;
	text-decoration: none;
}

.white-container {
	background-color: #fff;
	border-radius: 10px;
}
.grey-container {
	background-color: #f8f8f8;
	border-radius: 10px;
}
.dark-grey {
	color: var(--dark-grey);
}
.light-grey {
	color: var(--light-grey);
}

.text-active {
	color: var(--active-text-color);
}

.text-inactive {
	color: var(--inactive-text-color);
}

/** Header  **/

header {
	background-color: #17283d;
	color: #7c90a0;
	font-family: var(--montserrat);
}

header .navbar-toggler,
.navbar-dark .navbar-toggler {
	border: 0;
	color: #fff;
	font-size: 1.75rem;
	outline: 0;
	width: 3rem;
}

header .navbar-nav .nav-item {
	padding: 1rem;
}

header .navbar-nav a {
	color: var(--nav-text-grey);
}

/** Left Nav **/

.navigation-column {
	background: #2b4259;
	color: var(--nav-text-grey);
	display: flex;
	padding: 0;
}

.navigation-column nav{
	padding: 0;
}
.navigation-column nav .navbar-nav{
	width: 100%;
}

.navigation-column nav .navbar-nav a{
	border-bottom: 1px solid #273d53;
	color: var(--nav-text-grey);
	padding: 1.5rem;
	position: relative;
}
.navigation-column nav .navbar-nav a svg {
	fill: var(--nav-text-grey);
}
.navigation-column nav .navbar-nav a:last-child{
	border: 0;
}
.navigation-column nav .navbar-nav a.active{
	color: #fff;
}
.navigation-column nav .navbar-nav a.active svg {
	fill: #fff;
}

.navigation-column nav .navbar-nav a img,
.navigation-column nav .navbar-nav a svg,
.navigation-column nav .navbar-nav a span{
	left: 0px;
	margin-right: .75rem;
	position: relative;
	width: 20px;
}

.navigation-column .detail-container{}
.navigation-column .detail-container .heading{
	color: #fff;
}
.navigation-column .detail-container .section{
	margin-top: 1.25rem;
}
.navigation-column .detail-container p{
	color: #fff;
}

.navigation-column nav.header-mobile{
	background: #17283d;
}
.navigation-column nav.header-mobile .navbar-nav {
	padding: .75em 0;
}
.navigation-column nav.header-mobile .navbar-nav a{
	align-self: center;
	border: 0;
	padding: .75rem;
	text-align: center;
}
.navigation-column nav.header-mobile .navbar-nav a span,
.navigation-column nav.header-mobile .navbar-nav a svg{
	margin: 0;
}

/** Body: User Info **/
.user-info {
	background: #fff;
	color: #bababa;
	padding: 1rem 3rem;
}

.user-info .bubble {
	background: #f2f2f2;
	border-radius: 20px;
	margin-right: .5rem;
	padding: 6px 8px;
}

.navigation-column .user-info{
	background: #f8f8f9;
	font-size: .9rem;
	padding: 1rem 1.25rem;
}

/** Notifications **/

.system-message-external .system-alert{
	color: var(--dark-grey);
	font-weight: 600;
	text-align: center;
}

.system-message-internal .system-alert{
	background: #fff;
	border-radius: 5px;
	border-color: var(--inactive-text-color);
	color: var(--inactive-text-color);
	text-align: center;
}

.system-message-internal .system-alert.message,
.system-message-internal .system-alert.message-to-customer{
	border-color: var(--active-text-color);
	color: var(--active-text-color);
}

.alert-banner {
	background: var(--aqua);
	border-radius: .25rem;
	color: #fff;
	margin-bottom: 2rem;
	min-height: 100px;
	overflow: hidden;
	padding: 1rem 1.75rem;
	position: relative;
}
.alert-banner:before {
	background: url(../../images/svg/account-icon.svg) left bottom no-repeat;
	content: '';
	height: 120px;
	width: 120px;
	opacity: .1;
	position: absolute;
	bottom: -30px;
	left: 0;
}
.alert-banner:hover {
	color: #fff;
}
.alert-banner.download-newsreader:before {
	background: url(../../images/svg/search-icon.svg) left bottom no-repeat;
	bottom: -40px;
	left: -20px;
	height: 150px;
	width: 150px;
}
.alert-banner.easynews-account:before {
	background: url(../../images/svg/easynews-icon-outline.svg) left bottom no-repeat;
	bottom: -10px;
	left: -20px;
}
.alert-banner.dunning {
	background: var(--inactive-text-color);
}
.alert-banner.dunning:before {
	background: url(../../images/svg/payment-icon.svg) left bottom no-repeat;
}
.alert-banner.no-data {
	background: var(--inactive-text-color);
}
.alert-banner.no-data:before {
	background: url(../../images/svg/download-icon.svg) left bottom no-repeat;
	bottom: 10px;
	left: -10px;
}
.alert-banner.reactivate {
	background: var(--active-text-color);
}
.alert-banner.reactivate:before {
	background: url(../../images/svg/account-icon.svg) left bottom no-repeat;
	bottom: -3px;
	left: -10px;
	height: 100px;
	width: 100px;
}

.alert-banner.update-email {
	background: var(--inactive-text-color);
}
.alert-banner.update-email:before {
	background: none;
	content: '\f0e0';
	color: #fff;
	font-family: 'Font Awesome 5 Free';
	font-size: 7rem;
	font-weight: 400;
	position: absolute;
	bottom: -3px;
	left: -10px;
}
.alert-banner.one-hundred-connections{
	padding: 1rem 1.25rem;
}
.alert-banner.one-hundred-connections:before{
	background: none;
	content: '\f0c1';
	color: #fff;
	font-family: 'Font Awesome 5 Free';
	font-size: 9rem;
	font-weight: 400;
	position: absolute;
	bottom: 50px;
	left: -10px;

}
.alert-banner.one-hundred-connections .title{
	color: #fff;
}
.alert-banner.one-hundred-connections p{
	font-size: 1.1rem;
	color: #b1f7fc;
}

.alert-banner .alert-body {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.alert-banner .title{
	font-weight: 700;
	font-size: 1rem;
	margin: 0;
	text-transform: uppercase;
}
.alert-banner p{
	margin: .5rem 0 0;
}
.alert-banner.download-newsreader p{
	font-weight: 300;
}
.alert-banner button{
	box-shadow: 0px 1px 8px #00000038;
	width: 180px;
	z-index: 1;
}
.alert-banner.no-data button.cta{
	width: 230px;
}

.alert-banner + .close{
	font-size: .9rem;
	opacity: .3;
	position: absolute;
	right: 25px;
	top: 9px;
}

.alert-banner.unlimitedvpn {
	background: #332d6f;
	background: -moz-linear-gradient(left, #332d6f 0%, #4b4ebe 100%);
	background: -webkit-linear-gradient(left, #332d6f 0%,#4b4ebe 100%);
	background: linear-gradient(to right, #332d6f 0%,#4b4ebe 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#332d6f', endColorstr='#4b4ebe',GradientType=1 );
	height: 175px;
}
.alert-banner.unlimitedvpn:before {
	background: none;
}
.alert-banner.unlimitedvpn .alert-body {
	text-align: left;
}
.alert-banner.unlimitedvpn p {
	color: #bdbdc0;
	font-size: 1.25rem;
	margin-top: 0;
}
.alert-banner.unlimitedvpn .title {
	font-size: 1.45rem;
	text-transform: none;
}
.alert-banner.unlimitedvpn .cta {
	background: #f77c40;
	background: -moz-linear-gradient(top, #f77c40 0%, #f65822 100%);
	background: -webkit-linear-gradient(top, #f77c40 0%,#f65822 100%);
	background: linear-gradient(to bottom, #f77c40 0%,#f65822 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f77c40', endColorstr='#f65822',GradientType=0 );
	border-radius: 5px;
	max-width: 100%;
	width: 240px;
}
/* NHDEV-1437 & NHDEV-1440 */
.alert-banner.cancelled {
	min-height: 60px;
	color: #ffffff;
	background-color: #E87272;
}
.alert-banner.offer-accepted::before,
.alert-banner.cancelled::before {
	display: none;
}

.payment_options .container h2,
.payment_options .container h4 {
	color: #333333;
}

.plan-details__sub-title {
	margin-top: 1rem;
	margin-bottom: 0.25rem;
	color: #687079;
	font-weight: 700;
}

.warning-banner {
	padding: 1.5rem;
	color: #1D2023;
	line-height: 1.5rem;
	border-radius: 4px;
	border: 1px solid #FF9E00;
	background-color: rgba(255, 158, 0, 0.08);
}
.warning-banner img {
	margin-right: 1.5rem;
}
.warning-banner__title {
	margin-bottom: 0;
	font-family: var(--montserrat);
	font-size: 1rem;
}
.warning-banner__text {
	margin-bottom: 0;
	font-family: var(--montserrat);
	font-size: 0.75rem;
}
/* END NHDEV-1437 & NHDEV-1440 */
@media (max-width: 782px){
	.alert-banner.unlimitedvpn{
		height: 280px;
	}
}
@media (max-width: 700px){
	.alert-banner.unlimitedvpn{
		height: auto;
	}
}
/** Mobile Navigation **/

@media (max-width: 767px) {
	.user-info {
		font-size: .8rem;
		padding: 1rem;
	}
}

@media (max-width: 991px) {
	header.navbar {
		position: fixed;
		width: 100%;
		z-index: 2;
	}
	header.navbar + .container-fluid {
		padding-top: 67px;
	}

	.navbar-nav.header {
		padding: 1rem;
	}

	.navbar-toggler[aria-expanded='true'] .fa-bars {
		display: none;
	}
	.navbar-toggler[aria-expanded='false'] .fa-bars {
		display: inline-block;
	}
	.navbar-toggler .fa-times,
	.navbar-toggler[aria-expanded='false'] .fa-times {
		display: none;
	}
	.navbar-toggler[aria-expanded='true'] .fa-times {
		display: inline-block;
	}
	.navbar-collapse {
		align-items: flex-start;
		background: #2b4259;
		display: flex;
		left: 0;
		height: 100%;
		max-width: 100%;
		overflow: scroll;
		padding: 0 0 66px; /* offsets the top position to see all content with scrolling */
		position: fixed;
		top: 66px;
		width: 360px;
		z-index: 2;
	}
	.navbar-collapse.signed-in {
		
	}
	.navbar-collapse.signed-in .navbar-nav.header{
		display: none;
	}
	.navbar-collapse.signed-out {
		height: 100vh;
	}
	.navbar-collapse.collapsing {
		background: #2b4259;
		height: 100vh;
		-webkit-transition: left 0.3s ease;
		-o-transition: left 0.3s ease;
		-moz-transition: left 0.3s ease;
		transition: left 0.3s ease;
		left: -100%;
	}
	.navbar-collapse.show {
		left: 0;
		-webkit-transition: left 0.3s ease-in;
		-o-transition: left 0.3s ease-in;
		-moz-transition: left 0.3s ease-in;
		transition: left 0.3s ease-in;
	}
}

/* Bootstrap Update bug fix */
[class^="col-"],
[class*=" col-"] {
	position: relative;
}
label {
	font-weight: 700;
}
.input-group-text {
	padding: 0;
}
.form-group {
	padding-bottom: 15px;
}
.hidden {
	display: none !important;
}
.h1, .h2, .h3, h1, h2, h3 {
	margin-top: 20px;
}
.form-control {
	appearance: auto;
	height: 34px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
}
.payment_area .details .total.final .billing-note {
	margin-left: auto;
}
.panel-body {
	padding: 15px;
}
.signup.body-content {
	padding-bottom: 30px;
}
.h2, h2 {
	font-size: 30px;
}
.tooltip-inner {
	background-color: #fff;
	color: #000;
	font-size: 14px;
	padding: 8px 12px;
	border-radius: 8px;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tooltip .tooltip-arrow::before {
	border-top-color: #fff !important;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.close {
	line-height: 1;
}
button.close {
	border: none;
	padding: 0;
	background: transparent;
}
.btn-link,
.cta-text-link {
	text-decoration: none;
}
.float-right {
	float: right !important;
}
.float-left {
	float: left !important;
}
label {
	margin-bottom: .5rem;
}
.navbar {
	padding-left: 1rem;
	padding-right: 1rem;
}
.navbar-toggler:focus {
	box-shadow: none;
}
.btn:hover {
	background-color: rgba(252, 168, 68, 0.976);
}
.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.card {
	color: var(--dark-grey)
}
.popover {
	font-size: 14px;
}
.popover-header {
	padding: 8px 14px;
	margin: 0;
	font-size: 14px;
	background-color: #f7f7f7;
	border-bottom: 1px solid #ebebeb;
	border-radius: 5px 5px 0 0;
}
.popover-body {
	padding: 9px 14px;
}
.pr-3, .px-3 {
	padding-right: 1rem !important;
}
.mr-3, .mx-3 {
	margin-right: 1rem !important;
}
.border-right {
	border-right: 1px solid #dee2e6 !important;
}
.payment_area input.signup-cta {
	color: #fff;
}
@media (min-width: 1200px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl {
		max-width: 1140px;
	}
}