/*
	Theme Name: SSQ Theme
	Revised specifically for SSQ App on Node 1
	Version: 0.1-elm
*/

/***** SHELL MODS *****/

body {
		background: #fff;
}

#contentWrapper {
	box-shadow: none;
	-moz-box-shadow: none;
  	-webkit-box-shadow: none;
	border-radius: 0;
	-moz-border-radius: 0;																		
	background: #4B009B;  										
}

#topLogo {
	background: url('images-ssq/benevaLogo.png') no-repeat top left;
	margin-top: 5px;
    margin-bottom: 8px;
	height: 55px;
}
#topLogo:lang(fr) {
	background: url('images-ssq/benevaLogo.png') no-repeat top left;
}

#topLogo #topLogoNavigation {
	font-family: Verdana, Geneva, sans-serif;
	color: #4B009B;
	font-size: 12px;
	padding-top: 25px;
	padding-right: 20px;
}

#topLogo #topLogoNavigation a {
	text-decoration:none;
	color: #4B009B;
}

#pageHeaderTableCenter{
	width: 945px;
	text-align: right;
	background: #4B009B;
}

#pageContentLogin{
	text-align: center;
	margin: 0;
	padding: 0;
	width: 984px;
	background: #fff;
	padding:15px;
	border: solid 1px #e0e0e0;
}

/***** CONTENT MODS *****/

body {
	font-family: "Poppins",Verdana,"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #535353;
}

.plain {
	line-height: 1.5;
	font-family: "Poppins","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:400;
	font-size:18px;
}

.plain li a, .plain li a:visited, .plain li a:active {
	text-decoration:none;
	color: #4B009B;
}

.plain li a:hover {
	color: #C1C1C1;
}

.buttonGreen {
	border: 1px solid #00827d !important;
    font-family: "Poppins","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important;
    width: auto !important;
    height: auto !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    color: #fff !important;
    background: #00827d !important;
    box-shadow: none !important;
    padding: 10px 15px !important;
    text-transform: capitalize !important;
    font-weight: 400 !important;
    text-align: center;
    vertical-align: middle;
	white-space: normal;
}

.SSQ_button_green {
    height: 32px;
	padding: 0 25px;
    background-color:  #4B009B;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-color:  #4B009B;
    border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Poppins Bold', 'Poppins Regular', 'Poppins';
	font-size: 13px;
    font-weight: 700;
    font-style: normal;
    color: #FFFFFF;
	text-align: center;
    line-height: normal;
	cursor: pointer;
}

.buttonGreen:hover, .SSQ_button_green:hover {
	background: rgba(9, 130, 125, 0.5) !important;
	border: 1px solid rgba(9, 130, 125, 0.5) !important;
}

.buttonGreen:disabled, .SSQ_button_green:disabled {
	background: #C1C1C1 !important;
	border: 1px solid #C1C1C1 !important;
}

.SSQ_button_white {
    height: 32px;
	padding: 0 25px;
    background-color:  #ffffff;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-color:  #4B009B;
    border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Poppins Bold', 'Poppins Regular', 'Poppins';
	font-size: 13px;
    font-weight: 700;
    font-style: normal;
    color: #4B009B;
	text-align: center;
    line-height: normal;
	cursor: pointer;
}

.submit {
		margin-top:50px;
		margin-bottom:50px;
}

#application p label {
    line-height: 2.5em;
}

input[type=text], textarea, select {
	border: solid 1px #bcbec0;
    padding: 5px 10px;
    margin-left: 5px;
	color: #535353;
    font-family: "Poppins",Verdana,"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
	line-height:1.5;
}

input[type=text], select {
	height: 36px;
}


input[type=text]:-internal-autofill-previewed, input[type=text]:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected {
    background-color: #F1F2F2 !important;
    background-image: none !important;
    color: #808285 !important;
}

input[type=text]:hover, select:hover {
	background-color: #F1ECEE;
	color:#000;
}


/*** FANCY CHECKBOXES ***/

	/* Customize the checkbox label */
	.fancyCheck {
		display: block;
		position: relative;
		padding-left: 25px;
		/* margin-bottom: 12px; */
		cursor: pointer;
		font-size: 18px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		border-width: 1px;
		padding-bottom: 10px;
		border-bottom: 1px dotted #4A847D;
		border-color: rgba(9, 130, 125, 0.25);
	}

	/* Hide the browser's default checkbox */
	.fancyCheck input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	/* Create a custom checkbox */
	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 20px;
		width: 20px;
		background-color: #fff;
		border:1px solid #00827d;
	}

	/* On mouse-over, add a grey background color */
	.fancyCheck:hover input ~ .checkmark {
		background-color: #F1ECEE;
	}

	/* When the checkbox is checked, add a blue background */
	.fancyCheck input:checked ~ .checkmark {
		background-color: #00827d;
		background: url('images-foresters/checkMark.gif') no-repeat center center;
	}



h3 {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2em;
	color: #4B009B;
	margin-bottom: 20px;
}

/***** SECOND SWEEP - adding responsiveness and generally better appeal *****/

h3 {
	margin-bottom: 10px;
	border-bottom: 1px solid #4A847D;
	border-color: #4B009B;
	padding-bottom: 5px;
}

#activePageDisplay, #pageHeaderTable, #pageContentLogin {
	width: 100%;
}

#activePageDisplay {
	box-sizing: border-box;
	border: solid 1px #e0e0e0; /*This gives a 'bounding box' around the entire app, for when it's placed inside other web pages */
}

#topLogo {
	margin-left: 10px;
}

#pageContentLogin {
	border: none;
}

#pageHeaderTableCenter {
	width: 100%;
	max-width:728px;
}

.plain {
	text-align:center;
	max-width: 1024px;
}

.plain li {
	display: inline-block;
}

.plain li a, .plain li a:visited, .plain li a:active {
	display: inline-block;
	white-space: nowrap;
	min-width: 220px;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	color: #4B009B;
	border: 1px solid #00827d;
	border-color: #4B009B;
	background: #fff;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 15px;
	margin: 5px 10px;
}

.plain li a:hover {
	border-color: #4B009B;
	background: #4B009B;
	color: #fff;
}

@media screen and (max-width: 767px) {

	#topLogo {
		background: url('images-ssq/SSQ_insurance.GIF') no-repeat top center;
		margin-top: 10px;
		margin-bottom: 15px;
		margin-left: 0;
	}

	#topLogo:lang(fr) {
		background: url('images-ssq/SSQ_insurance_fr.GIF') no-repeat top center;
		margin-top: 10px;
		margin-bottom: 15px;
		margin-left: 0;
	}

	#pageHeaderTable {
		/* height:2px; */
	}

	#pageHeaderTableCenter {
		/* display:none; */
	}

}

#application, #applicationHeader, #applicationFooter {
	max-width:500px; /* formerly 1024px; */
	margin:auto;
}

#application p {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	text-align: left;
	margin-right:5px;
	margin-left: 5px;
}

#application p.rider {
	width:100%
}

#application p.rider {
	width:100%
}

#application p label {
	font-size: 13px;
	color: #4B009B;
}

#application p label select, #application p label input {
	display:block;
	box-sizing: border-box;
}

#application p label input[type='checkbox']{
	box-sizing: content-box;
}


#application p label input {
	width: 100%;   
	padding-left: 10px;
	margin-left:0;
}

#application p label input.date {
	width: 100%;   
	padding-left: 10px;
	margin-left:0;
}

#application p label input[type='checkbox'] {
	width: 20px;
	height:25px;
	float: left;
	/* margin-top: 10px; */
}


#application p label select {
	width: 100%;  
	margin-left: 0;
}

@media screen and (min-width: 768px) {

	#application, #applicationHeader, #applicationFooter {
		max-width:670px; /* formerly 1024px; */
	}

	#application p {
		display: inline-block;
		width: 320px;
		text-align: left
	}

}

#application .submit p {
	width: 100%;
	text-align: center;
}

#applicationHeader h1 {
	color: #4B009B;
	font-size: 28px;
}
#applicationHeader h2 {
	color: #4B009B;
	font-size: 16px;
}
#applicationHeader p, #applicationFooter p {
	font-size: 14px;
}
#applicationFooter a, #applicationFooter a:visited, #applicationFooter a:active {
	color: #4B009B;
}


/***** PREMIUM OUTPUT *****/

#quote_output {
	text-align:center;
}

#quote_output p {
	border: 1px solid #4B009B;
	border-color: #4B009B;
	font-size: 24px;
	text-align:center;
}

#quote_output p label {
	display: block;
    	background: #4B009B;
    	text-align: center;
    	font-size: 13px;
	text-transform:uppercase;
    	font-family: "Poppins","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important;
    	color: #fff;
}

#quote_output a {
	color: #4B009B;
	font-size: 16px;
}

#quote_output #disclaimer {
	text-align: left;
	margin: 0;
	font-size: 14px;
}

/***** RIDERS *****/

.riderCheck {
	display:block;
}

.riderCheck label {
	color: #00827d;
}

/***** DATE PICKER *****/

.ui-widget-header {
	color: #535353;
	background: #fff;
}

.ui-datepicker-calendar .ui-state-default {
	background: #F1F2F2;
	border: 1px solid #bcbec0;
	color: #535353;
}

.ui-datepicker-calendar .ui-state-hover {
	background: #FFF3CB;
	border: 1px solid #FACC15;
	color: #000000;
}

.ui-widget-header .ui-state-hover {
	background: #FFF3CB;
	border: 1px solid #FACC15;
	color: #000000;
}