/*

Background-color

box 1: #303030;

box 2: #b8e468

box 3: #7a447d

box 4: #304f6e

box 5: #c7e9f2

box 6: #f8a73e

box 7: #303030

*/


.outside-box-rght {
	/*margin-right: -15px;*/
	padding-right: 0px;
}
.outside-box-lft {
	/*margin-left: -15px;*/
	padding-left: 0px;
}
.send-it-back {
	z-index: -1;
}
.send-it-top {
	z-index: 1;
}
.box-dark {
	background-color: #373737;
	color: #FFF;
}
.box-dark .btn {
	text-transform: uppercase;
	font-weight: bold;
	color: #000;
	background-color: #b8e468;
	border-color: #b8e468;
	border-radius: 0px 20px 20px 0px;
}
.box-dark input, .box-dark select {
	border-radius: 20px 0px 0px 20px;
}
.box-dark .btn {
	text-transform: uppercase;
	font-weight: bold;
	color: #000;
	background-color: #b8e468;
	border-color: #b8e468;
	border-radius: 12px;
}
.box-dark input, .box-dark select {
	border-radius: 12px;
}
.box-dark a {
	color: #b8e468;
}
.box-dark a:visited {
	color: #b8e468;
}

.box-grey {
	background-color: #eaebed;
	color: #000;
	position: relative;
	/*min-height:200px;*/
}

/* BOX 2 */
.box-lime {
	background-color: #b8e468;
	color: #000;
	position: relative;
	/*min-height:200px;*/
}

.box-lime-tp::before {
	content: "";
	background-image: url(box-lime-tp.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	height: 25px;
	width: 100%;
	position: absolute;
	top: -25px;
}
.box-lime-bttm::after {
	content: "";
	position: absolute;
	top: 100%;
	height: 50px;
	width: 100%;
	background-image: url(box-lime-bttm.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
}
.box-lime a {
	text-decoration: none;
	color: #000;
}
.box-lime a:hover {
	text-decoration: underline;
}
.box-lime h2 {
	font-size: 26px !important;
}
/*h2 span.box-lime {
	display:inline-block;
	background-color: transparent;
	background-image: url(box-lime-h2-right.svg);
	background-position: right top;
	background-repeat: no-repeat;
	padding: 4px 30px 4px 4px;
}

.box-lime div.text-center h3 {
 padding-top:1.5em;
}
.box-lime div.text-center p {
 padding-bottom:1.0em;
}

.box-lime a { color: #000; }*/


/*.xsmallview .box-lime-bttm::after, .xxsmallview .box-lime-bttm::after {
	height: 25.5px;
}*/
.box-purple {
	background-color: #7a447d;
	color: #FFF;
	position: relative;
	/*min-height:200px;*/
}
.box-purple a {
	/*text-decoration: none;*/
	color: #FFF;
}
/*.box-purple a:hover {
	text-decoration: underline;
}*/
.box-purple h2 {
	font-size: 26px !important;
}
/*.box-purple h2 {
	padding-top: 110px;
	background-image: url(box-purple-icon.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}*/
/*
.box-purple::after {
	content: "";
	position: absolute;
	top: 100%;
	height: 50px;
	width: 100%;
	background-image: url(box-purple-bttm.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
    z-index: 1;
}*/
.box-blue {
	background-color: #304f6e;
	color: #FFF;
	position: relative;
	/*min-height:200px;*/
}
.box-blue a {
	text-decoration: none;
	color: #FFF;
}
.box-blue a:hover {
	text-decoration: underline;
}
.box-blue h2 {
	font-size: 26px !important;
}
/*.box-blue h2 {
	padding-top: 110px;
	background-image: url(box-blue-icon.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}*/
.box-blue .btn {
	font-weight: bold;
	color: #000;
	background-color: #BDDBEF;
	border-color: #4d5cab;
	;
	border-radius: 12px;
}
.box-blue-bttm::after {
	content: "";
	position: absolute;
	top: 100%;
	height: 50px;
	width: 100%;
	background-image: url(box-blue-bttm.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	z-index: 1;
}
.box-lightblue {
	background-color: #c7e9f2;
	color: #000;
	position: relative;
	/*min-height:200px;*/
}
.box-lightblue a {
	text-decoration: none;
	color: #000;
}
.box-lightblue a:hover {
	text-decoration: underline;
}
.box-lightblue h2 {
	font-size: 26px !important;
}
/*.box-lightblue h2 {
	padding-top: 110px;
	background-image: url(box-lightblue-icon.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}*/
/*
.box-lightblue { color: #000; }
.box-lightblue a { color: #000; }
.box-lightblue a:visited { color: #000; }

.box-lightblue::after {
	content: "";
	position: absolute;
	top: 100%;
	height: 50px;
	width: 100%;
	background-image: url(box-lightblue-bttm.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	z-index: 1;
}*/
.box-lightblue-tp::before {
	content: "";
	background-image: url(box-lightblue-tp.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	height: 25px;
	width: 100%;
	position: absolute;
	top: -25px;
}

.box-lightorange {
	background-color: #f8a73e;
	color: #000;
	position: relative;
	/*min-height:200px;*/
}
.box-lightorange h2 {
	font-size: 26px !important;
}
/*.box-lightorange h2 {
	padding-top: 110px;
	background-image: url(box-lightorange-icon.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}*/
.box-lightorange a {
	text-decoration: none;
	color: #000;
}
.box-lightorange a:hover {
	text-decoration: underline;
}
/*.box-lightorange { color: #000; }
.box-lightorange a { color: #000; }
.box-lightorange a:visited { color: #000; }

.box-lightorange::after {
	content: "";
	position: absolute;
	top: 100%;
	height: 50px;
	width: 100%;
	background-image: url(box-lightorange-bttm.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	z-index: 1;
}*/
/* BOX 2 */
.box-dark-social {
	background-color: #373737;
	color: #FFF;
	position: relative;
	margin-top: 70px;
}
.box-dark-social a {
	color: #FFF;
}
.box-dark-social-tp::before {
	content: "";
	background-image: url(box-dark-tp-reverse.svg);
	background-repeat: no-repeat;
	background-position: center top;
	height: 100%;
	width: 100%;
	position: absolute;
	top: -50px;
}
.box-dark-social-bttm::after {
	content: "";
	position: absolute;
	top: 100%;
	height: 50px;
	width: 100%;
	background-image: url(box-dark-bttm-reverse.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
}
#cnnbs-menu .list-inline > li {
	padding-left: 3px;
	padding-right: 3px;
}
#cnnbs-menu .list-inline > li:first-child {
	padding-left: 0px;
}
#cnnbs-menu .list-inline > li:last-child {
	padding-right: 0px;
}
div .wb-mltmd {
	margin-top: -10px;
}
/* headers backgrounds */
.lime-bg {
	background-color: #b8e468;
	padding: 5px;
	color: #000;
}
.purple-bg {
	background-color: #7a447d;
	padding: 5px;
	color: #FFF;
}
.lightorange-bg {
	background-color: #f8a73e;
	padding: 5px;
	color: #000;
}
.blue-bg {
	background-color: #304f6e;
	padding: 5px;
	color: #FFF;
}
.lightblue-bg {
	background-color: #c7e9f2;
	padding: 5px;
	color: #000;
}
.black-bg {
	background-color: #373737;
	padding: 5px;
	color: #000;
}
.min-height-150{
	min-height:150px;
}
.box-grey {
	background-color: #ECEDF3;
	color: #000;
	position: relative;
	/*min-height:200px;*/
}
.box-grey a {
	text-decoration: none;
	color: #000;
}
.box-grey a.btn-info {
	text-decoration: none;
	color: #FFF;
}
.box-grey a:hover {
	text-decoration: underline;
}
.box-grey h2 {
	font-size: 26px !important;
	margin-top: 15px !important;
}

/* top list menu*/
.toc li .list-group-item.active-purple{
	background-color: #7a447d;
	color: #fff;
	cursor: auto;
	text-decoration: none;
	z-index: 2;
}
.toc li .list-group-item.active-green{
	background-color: #bad66b;
	color: #000;
	cursor: auto;
	text-decoration: none;
	z-index: 2;
}
.list-group-item:first-child {
 border-top-right-radius:10px;
 border-top-left-radius:10px;
}
.list-group-item:last-child {
 border-bottom-right-radius:10px;
 border-bottom-left-radius:10px;
}
.gray-rectangle {
	background-color: #f5f5f5;
	padding: 15px;
	font-size: 26px !important;
}

/*Start: Styles below are for picklist fieldflow */

[role=listbox] {
 min-width: 230px;
 background: white;
 color:#000;
 border: 1px solid #ccc;
 list-style: none;
 margin: 0;
 padding: 0 10;
 position: absolute;
 top: 1.7em;
 z-index: 9999;
/* Note about z-index
	Ideally it should be set to 1, but the <footer id="wb-info"> has a z-index set to 5,
	 */
}
/* Active state style */
[role=option][aria-selected=true] {
 background: #b8e468; /* #8bbde1 */
}
 [role=option] {
padding:3px;
}
[role=option]:hover {
	cursor: default;
	background: #b8e468;
}
/* Have the input and the overlay together */
.combobox-wrapper {
	display: inline-block;
	position: relative;
}

/*End: Styles below are for picklist fieldflow */


/* CSS Document */