*, *:before, *:after {
    box-sizing: border-box;             /* IE8 and up, plus all others except the next two */
    -moz-box-sizing: border-box;        /* Firefox still needs this */
    -webkit-box-sizing: border-box;     /* iOS4 and below, Android 2.3 and below */
}

h4 {
	color: #231f20;
	font-size: 20px;
	font-weight: normal;
}

h5 {
	margin-top: 0;
	color: #c43b40;
}

.page-header {
	margin-top: 10px;
}

.navMenuItem {
	display: inline-block;
	padding-left: 25px;		/* 30px was too much for screens 1200-1600px */
}
.navMenuItem:first-child {
	padding-left: 0px;
}

.form-inline {
	margin-bottom: 10px;
}

.debug { color: red; text-align: right; margin-top: 20px; }
.error { color: red; }
.smallNote {
	color: red;
	font-size: 12px;
	line-height: 14px;
	font-style: italic;
}

.success {
	color: green;
}

.page-footer {
	margin: 0px 0 0px 0;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid #eee;
	font-size: 12px;
}
.page-footer .pull-left  { padding-left: 20px; }
.page-footer .pull-right { padding-right: 20px; }

/*******************/
/* Vertex-specific */
/*******************/

.vGreen   { color: #82b641; }
.vGreenBG { background-color: #82b641; }

body {
	background-image: linear-gradient(to bottom,
		rgba(130,182,65,0),
		rgba(130,182,65,0.05),
		rgba(130,182,65,0.2),
		rgba(130,182,65,0.4),
		rgba(130,182,65,0.7),
		rgba(130,182,65,1)
		);
	background-repeat: no-repeat;
	font-size: 16px;
}

.container { height: 100vh; }

.page-header {
	margin-left: 15px;
	margin-right: 15px;
	border-bottom: none;		/* override BootStrap default */
}
.page-body {
	padding: 20px 50px 0px 50px;
}

.containerContent {
	background-color: white;
}

.blackBanner {
	margin-top: 20px;
	padding: 10px 10px 0px 10px;
	background-color: black;
}
.blackBanner p {
	color: #dddddd;
}
.blackBanner a {
	color: #dddddd;
}
.blackBanner a:hover {
	text-decoration: underline;
}

.navBanner {
	border-bottom: 1px solid #cccccc;
	padding-bottom: 10px;
}
.navBanner .hdr {
	padding-top: 15px;
	font-size: 20px;
}
.navBanner .nav {
	padding-top: 20px;
	/* padding-left: 15px; */
	text-align: right;
}

.offer {
	padding-top: 30px;
	padding-bottom: 30px;
}
.offerImg {
	float: left;
	width: 46px;
	margin-right: 15px;
}
.offerTxt {
	float: left;
	margin-left: 0px;
	width: calc(100% - 61px);	/* subtract with of .offerImg including right-margin */
}
.offerTxtHdr {
	font-size: 24px;
}
.offerTxtBody {
	font-style: italic;
}

.offerBox {
	margin-top: 10px;
	padding: 20px 30px;
	border: 1px solid #cccccc;
}
.offerBoxAmt {
	font-size: 32px;
	line-height: 32px;
}
.offerBoxLabel {
	margin-top: 15px;
	font-size: 14px;
}
.offerBoxPeriod {
	font-size: 14px;
	color: #82b641;
}
.offerBoxTDLabel {
	font-size: 14px;
	text-align: left;
}
.offerBoxTDValue {
	text-align: left;
	font-size: 14px;
	font-weight: bold;
}
.offerBox td {
	padding-bottom: 10px;
}
.offerBox td:first-child {
	padding-right: 30px;
}
.offerBoxAction {
	font-size: 14px;
	border-left: 1px solid #cccccc;
}

.acceptCheckbox {
	float: left;
	width: 25px;
}
.acceptCheckboxLabel {
	float: left;
	width: 90%;
}

.electPopupDiv {
	margin-top: 30px;
	margin-bottom: 30px;
}
.electPopupTitle {
	font-size: 24px;
	padding-left: 60px;
	padding-right: 60px;
}
.electPopupAmt {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}
.electPopupAmtMinus {
	display: inline-block;
	padding-right: 10px;
	vertical-align: middle;
	content: url(/assets/img/iconMinus.png);
}
.inputAmount {
	display: inline-block;
	max-width: 100px;
	text-align: right;
	vertical-align: middle;
	padding: 10px 10px;
	font-size: 30px;
	border: 1px solid #cccccc;
}
.electPopupAmtPlus {
	display: inline-block;
	padding-left: 10px;
	vertical-align: middle;
	content: url(/assets/img/iconPlus.png);
}
.electPopupNote {
	margin-top: 30px;
	display: flex;
	border: 1px solid #2a699d;
}
.electPopupNoteIconbox {
	background-color: #2a699d;
	width: 50px;
	text-align: center;
	padding-top: 10px;
}
.electPopupNoteMain {
	flex: 1;
	padding: 20px;
}
.electPopupText {
	margin-top: 30px;
	text-align: left;
}

.sideBox {
	margin-left: 30px;
	border: 1px solid #cccccc;
}
.sideBoxTitle {
	padding: 10px 20px;
	background-color: #cccccc;
	font-weight: bold;
	font-size: 16px;
}
.sideBoxBody {
	padding: 20px;
}

    /***************************/
    /* Bootstrap custom colors */
    /***************************/

.btn-primary {
	color: white;
	background-color: #84b744;      /* change here for customization */
	border-color: #7faa31;          /* slightly darker border; try subtracting #050D13 from above */
}
.btn-primary:hover {
	background-color: #799d1d;      /* change here for customization */
	border-color: #7faa31;          /* slightly darker border; try subtracting #050D13 from above */
}
.modal-header,
.modal-body,
.modal-footer {
	padding: 15px 20px;
}
.modal-header {
	background-color: #84b744;
}
.modal-header > * {
	color: white;
}
.modal-header .close {
	color: white;
	opacity: 1.0;
}


    /***************************/
    /* Media Queries           */
    /***************************/

@media only screen and (max-width: 992px) {		/* -md in Bootstrap */
	.navBanner .nav {
		padding-top: 10px;
		padding-right: 0;
		padding-left: 15px;
		text-align: left;
	}
	.navBanner .nav:last-child {
		padding-bottom: 10px;
	}
	.navMenuItem {
		display: block;
		padding-left: 20px;
		padding-top: 0px;
	}
	.navMenuItem:first-child {
		padding-left: 20px;
		padding-top: 0px;
	}
}

@media only screen and (max-width: 767px) {		/* -xs in Bootstrap */
	.offerBoxCenter {
		padding-top: 30px;
	}
	.offerBoxAction {
		margin-top: 10px;
		border-top: 1px solid #cccccc;
		border-left: none;
		padding-top: 20px;
		padding-left: 15px;
	}
}