﻿/*-------------------------------------------------------*\
	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: rgb(4, 23, 48) !important;
}

#header-container {
	background-color: #fff;
}

.mrNext, .mrPrev {
	color: #fff;
	background-color: rgb(4, 23, 48);
	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;
}*/

/*.svg-logo {
    width: 300px;
	padding-top: 10px;
}*/

#logobanner {
	width:315px;
}


main {
	background-image: url(https://survey2.sendyouropinions.com/images/Concentrix/AgenticAI_bg.png) !Important; 
	background-size: contain;
}

.form-label {
	padding-bottom: 10px;
}

.header-banner-words{
	font-weight: bold;
	text-align: right;
	color: rgba(0, 51, 102, 1);
	font-size: 24px;
	float: right;
	margin-right: 5px;
}



#enhanced .mrNext:hover {
	background-color: rgba(255,204, 0, 1);
}

#enhanced .mrPrev:hover {
	background-color: rgba(255,204, 0, 1);
}

.question-panel {
	background-color: rgba(256,256,256,0.9);
}

.question-panel.question-panel--full {
    padding-top: 10px;
}

.heading {
	font-size: 24px !important;
}

.qintro-heading {
	font-size: 32px !important;
}

.qintro-smtext {
	font-size: 80% !important;
}

@media only screen and (min-width: 640px) {
	.question-panel {
		max-width: 800px;
		/*margin-top:5.5em;*/
		margin-top: 3.5em;
		padding: 50px;
	}
	
	#navigation-container {
		max-width: 800px;
		/*padding:0px 300px;*/
		text-align: unset;
	}
	
	/*.row div {
		width:330px !important;
	}*/
	
}

.mrEdit {
	padding-left:3px;
	width:50%;
}

.row label {
display: inline-block;
width:110px;	
}

.mrDropdown {
	width:50%;
    /*font-family: inherit;*/
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .4);
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
}


.email1 {
	width:99.5%;
}

#_Q4{
    width: 73%;
    max-width: 75%;
    min-width: 50%;
}

@media only screen and (max-width: 780px) {
	#_Q4{
		width: 165px !important;
        max-width: unset;
        min-width: unset;
	}
}