/* CSS Basic Document */
body {
	margin: 0px auto;
	padding: 0px;
	background-color: #fff;
	font-family: "museo-sans", "Helvetica Neue", "Helvetica", "Arial",
		sans-serif;
	font-size: 16px;
	font-weight: 300;
}

.header_table {
	margin-top: 6px;
}

.logo {
	margin-left: 10px;
}

.body_box {
	padding: 9px;
	color: #333333;
	background-color: #FFFFFF;
}

.divider {
	height: 1px;
	width: 100%;
	display: block; /* for use on default inline elements like span */
	margin: 9px 0;
	background-color: #e5e5e5;
}

img {
	border: 0;
}

.main {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 22px;
}

.main A:link {
	color: #006600;
	text-decoration: none;
}

.main A:visited {
	color: #006633;
	text-decoration: none;
}

.main A:hover {
	color: #006633;
	text-decoration: underline;
}

H1 {
	font-family: Helvetica, Geneva, Arial, Helvetica, sans-serif;
	line-height: 36px;
	text-align: left;
	font-size: 36px;
}

H2 {
	font-family: Helvetica, Geneva, Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 22px;
	padding-top: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #333333;
}

H3 {
	font-family: Helvetica, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
}

H4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 20px;
	color: #333333;
}

H5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 20px;
	color: #990000;
}

.sidebar {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 22px;
}

.sidebar A:link {
	color: #006633;
	text-decoration: none;
}

.sidebar A:visited {
	color: #006633;
	text-decoration: none;
}

.sidebar A:hover {
	color: #006633;
	text-decoration: underline;
}

.header_banner {
	height: 196px;
	background-repeat: no-repeat;
	background-position: center top;
}

.services_bg {
	background: url(images/services_bg.gif) left top no-repeat;
	height: 117px;
	padding: 10px;
}

.services_teable {
	margin-top: 8px;
	margin-bottom: 12px;
}

.left_line {
	border-left: 1px solid #E6E6E6;
}

.right_line {
	border-right: 1px solid #E6E6E6;
}

.bottom_line {
	border-bottom: 1px solid #E6E6E6;
}

.footer_table {
	margin-bottom: 25px;
}

/* CSS Background Image Document */
.top_line {
	background: url(images/line_bg.jpg) left top repeat-x;
	height: 4px;
}

.top_menu_bg {
	background: url(images/top_menu_bg_tall.jpg) left top repeat-x;
	height: 65px;
	padding-right: 12px;
	line-height: 16px;
}

.bottom_menu_bg {
	background: url(images/bottom_nenu_bg.jpg) left top repeat-x;
	height: 22px;
	padding-right: 13px;
}

.box_top_bg {
	background: url(images/box_top_bg.gif) left top repeat-x;
	height: 32px;
}

.footer_bg {
	text-align: center;
	color: #CCCCCC;
	line-height: 20px;
}

.footer_bg A:link {
	color: #CCCCCC;
	line-height: 20px;
	text-decoration: none;
}

.footer_bg A:visited {
	color: #CCCCCC;
	line-height: 20px;
	text-decoration: none;
}

.footer_bg A:hover {
	color: #FFCC00;
	line-height: 20px;
	text-decoration: none;
}

/* CSS text Document */
.menu_link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: 24px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #5C5C5C;
	background-color: inherit;
	text-decoration: none;
}

.menu_link:hover {
	color: #990000;
	text-decoration: none;
	background-color: inherit;
}

.bottom_link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: 22px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	background-color: inherit;
	text-decoration: none;
}

.bottom_link:hover {
	color: #C6C6C6;
	text-decoration: underline;
	background-color: inherit;
}

.white_text {
	color: #FFFFFF;
	text-decoration: none;
	background-color: inherit;
}

.white_text A:link {
	color: #FFCC00;
	line-height: 20px;
	text-decoration: none;
}

.white_text A:visited {
	color: #FFCC00;
	line-height: 20px;
	text-decoration: none;
}

.white_text A:hover {
	color: #FFCC00;
	line-height: 20px;
	text-decoration: underline;
}

.error {
	background-color: #FF2200;
	padding: 15px;
	border: #FFAA00 thin;
}

.error,.info,.success,.warning {
	margin: 10px 20%;
	border: 1px solid;
	padding: 0.5em;
	padding-left: 5em;
	background-repeat: no-repeat;
	background-position: 0.5em center;
}

.error {
	background-color: #fcc;
	color: #f00;
}

.info {
	background-color: #bde5f8;
	color: #00529b;
}

.success {
	background-color: #cfc;
	color: #093;
}

.warning {
	background-color: #ffc;
	color: #9f6000;
}

.body_link {
	color: #5C5C5C;
	text-decoration: underline;
	background-color: inherit;
}

.body_link:hover {
	text-decoration: none;
	color: #212121;
	background-color: inherit;
}

.table-body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	border: 2px outset #CCCCCC;
}

.table-plain {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	text-align: left;
	line-height: 22px;
}

.table-quote-header {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #666666;
}

/* Color buttons */
/* Usage:
<button class="colorButton button-arrow-right">Continue</button>

In head after this is loaded
<th:block th:if="${whitelabelName == 'ECOMP_NOW'}">
	<link  rel="stylesheet" href="/css/wl/ecomp.css">
</th:block>

 */

/* fallback */
@font-face {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 100 700;
	src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v207/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-moz-font-feature-settings: 'liga';
	-moz-osx-font-smoothing: grayscale;
}

@font-face {
	font-family: "Oswald";
	src: url("/fonts/Oswald-SemiBold.ttf");
}

a.colorButton {
	display: inline-block;
	text-decoration: none !important;
	align-content: center;
}

.colorButton {
	color: var(--cb-color);
	background-color: var(--cb-background-color);
	font-size: 19px;
	border: 1px solid var(--cb-border-color);
	border-radius: 10px;
	cursor: pointer;
	width:320px;
	height:50px;
	text-transform:uppercase;
	font-family: Oswald;
	font-size: 23px;
	margin-top: 5px;
	margin-bottom: 5px;
	max-width: 100%;

}

/* variables to be overridden */
:root{


	--wl-text-color:#ecb821;
	--wl-background-color:#130c0e;
	--wl-hover-color:#ffffff;

	--wl-link-color:#4285f4;

	--wl-quote-wrapper-table-color:#4285f4;

	--wl-header-color:#4285f4;

	--wl-arrow-selected-color:var(--wl-link-color);

	--wl-quote-option-color:var(--wl-link-color);

	--wl-footer-header-color:var(--wl-header-color);

	--wl-contact-border-color:var(--wl-link-color);
	--wl-info-box-border-color:var(--wl-link-color);

	--wl-background-selected:var(--wl-link-color);

	--wl-body-background-image:url(/images/footer-swoosh-blue.png);


	--wl-progress-active-color:var(--wl-link-color);
	--wl-icon-color:var(--wl-link-color);

	--wl-check-icon-color:var(--wl-icon-color);
	--wl-gradient-color:var(--wl-background-color);


	--cb-color:var(--wl-text-color);
	--cb-background-color:var(--wl-background-color);

	--cb-border-color:var(--cb-background-color);
	--cb-arrow-color:var(--cb-color);

	--cb-color-back:var(--cb-color);

	--cb-hover-color:var(--cb-background-color);
	--cb-hover-background-color:var(--wl-hover-color);
	--cb-hover-arrow-color:var(--cb-background-color);

	--a-disclosureLink-color: black;
	--a-disclosureLink-weight: bold;
}



.colorButton.back {
	color: var(--cb-color-back);
}

.colorButton:hover {
	color: var(--cb-hover-color);
	background-color: var(--cb-hover-background-color);
}

.button-arrow-right:after{
	color: var(--cb-arrow-color);
	position: relative;
	bottom: 1px;
	content:  ' ❯';
}

.button-arrow-left:before{
	color: var(--cb-arrow-color);
	position: relative;
	bottom: 1px;
	content:  '❮ ';
}

.button-arrow-right:hover:after{
	color: var(--cb-hover-arrow-color);
}

.button-arrow-left:hover:before{
	color: var(--cb-hover-arrow-color);
}

.highlight{
	background-color: #FFCCCC !important;
}