/*-------------------------------------------------------*\
	COMMON/SHARED - ENHANCED AND ADA
	
	!* COMMON/SHARED ATTRIBUTES MUST BE ADA COMPLIANT *!
\*-------------------------------------------------------*/

/*For IE 11 - Forces Main to use available screen height*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	main {
		/*Change the subtracted px = IE11 calculated Header px + Footer px*/
		min-height: calc(100vh - 174px);
	}
}

/* Progress bar */
#progress-bar table tbody tr td:first-child {
	background-color: #00365A !important;
}

#header-container {
	background-color: #fff;
}

.mrNext, .mrPrev {
	color: #fff;
	background-color: #00365A;
	border-color: #fff;
	border-bottom-color: #fff;
}

.mrNext {
    float: right;
}

/*-------------------------------------------*\
	ENHANCED
\*-------------------------------------------*/

/* Rating button - selected and all previous instances are highlighted */
#enhanced .button-rating-selected, #enhanced .button-rating-highlight {
	background-color: rgba(0, 51, 102, 1) !important;
	border: 1px solid #000;
	color: #fff;
}

/* Button selected triangle marker */
#enhanced .button-rating-selected:not(.button-text):after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: rgba(0, 51, 102, 1);
}

#enhanced .button-rating-selected:not(.button-text):before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #000;
}

/* OE Progress Colors */
#enhanced .detail-meter-container .current {
	background:  rgba(0, 51, 102, 1);
	color: #fff;
}

#enhanced .detail-meter-container .current:after {
	border-left-color:  rgba(0, 51, 102, 1);
}

#enhanced .check-circle:before {
	background: #efefef;
}

#enhanced .check-circle:after {
	color: #efefef;
}

#enhanced .check .check-circle:before {
	background: #5a5a5a;
}

#enhanced .check .check-circle:after {
	color: #fff;
}

#enhanced .current.check .check-circle:before {
	background: #fff;
}

#enhanced .current.check .check-circle:after {
	color: rgba(0, 51, 102, 1);
}

/*Accordion headers - Inactive */
#enhanced .ui-state-default, #enhanced .ui-widget-content .ui-state-default, #enhanced .ui-widget-header .ui-state-default {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	color: #454545;
}

/*Accordion headers - Active, Picklist - Inactive*/
#enhanced .acc-head, #enhanced .ui-state-active {
	background-color: rgba(0, 51, 102, 1) !important;
	border: 1px solid rgba(0, 51, 102, 1) !important;
	color:#fff !important;
}

/*Picklist headers - Hover/Active */
#enhanced .acc-head:hover, #enhanced .acc-head:active, #enhanced .acc-head.accordion-header-active {
	background-color: #7a0029 !important;
	border: 1px solid #5c001f !important;
	color:#fff !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}

/* ENHANCED - If needed define template-specific items*/

/*#enhanced #progress-bar table tbody tr td:first-child {
	background-color: rgba(0, 51, 102, 1) !important;
}

#header-container {
	background-color: #fff;
}


#enhanced .mrNext {
	color: #fff;
	background-color: rgba(0, 51, 102, 1);
	border-color: #fff;
	border-bottom-color: #fff;
}*/

/*-------------------------------------------------------*\
	ACCESSIBLE
	
	!!** ALL COLOR CONTRAST MUST BE ADA COMPLIANT **!!
\*-------------------------------------------------------*/

/* ACCESSIBLE - If needed define template-specific items  */

/*#accessible #progress-bar table tbody tr td:first-child {
	background-color: rgba(0, 51, 102, 1) !important;
}

#accessible #header-container {
	background-color: #fff;
}

#accessible .mrNext {
	color: #fff;
	background-color: rgba(0, 51, 102, 1);
	border-color: #fff;
	border-bottom-color: #fff;
}*/

main {
	background-image: url(https://survey2.sendyouropinions.com/images/Concentrix/vocbg1.jpg) !Important; 
	    background-repeat: no-repeat;
    background-position: right bottom;
	/*background-size: contain;*/
}


#enhanced .mrNext:hover {
	background-color: #25e2cc;
}

#enhanced .mrPrev:hover {
	background-color: #25e2cc;
}

	.question-panel {
		background-color: rgba(256,256,256,0.9);
	}



@media only screen and (min-width: 640px) {
	.question-panel {
		max-width: 800px;
		margin-top:5.5em;
		padding: 50px;
	}
	
	#navigation-container {
		max-width: 800px;
		/*padding:0px 300px;*/
		text-align: unset;
	}
	
	.row div {
		width:330px !important;
	}
	
	/*.row1{
		width:100%;
	}*/
}

.mrEdit {
	padding-left:3px;
}

.row label {
display: inline-block;
width:110px;	
}