@charset "UTF-8";
/* CSS Document */
.section{
	float:left;
	position:relative;
	width:100%;	
}

.editBtn{
	float:right;
	position:relative;
	width:50px;
	height:25px;
	margin-top:0px;
	margin-left: 25px;
	color:#000;
	font-size:10px;
	line-height:25px;
	text-align:center;
	background-color:transparent;
	background-image:url('../img/orderGraphics/editBtn_inactive.png');	
}
.editBtn:hover{
	color:#fff;
	background-image:url('../img/orderGraphics/editBtn_active.png');	
}

.pEditBtn{
	position:relative;
	width:50px;
	height:25px;
	margin-top:0px;
	margin-left: 25px;
	color:#000;
	font-size:10px;
	line-height:25px;
	text-align:center;
	background-color:transparent;
	background-image:url('../img/orderGraphics/editBtn_active.png');	
}
.pEditBtn:hover{
	color:#fff;
	background-image:url('../img/orderGraphics/editBtn_active.png');	
}

/*Order Header---------------------------------------------------------*/
#orderPageHeader{
	display:grid;
	grid-template-columns: auto;
    grid-template-rows: 1fr 1fr;
	justify-items:center;
}
#orderPageHeader h3{
	padding-top:100px;
}
#orderPageHeader img{
	margin-top:0px;
	background-color:transparent;
	width:500px;
	height:100px;	
}


/*Check Boxes---------------------------------------------------------*/
.planChkBox{
	
}

.planOptionChkBox{
	display:inline-block;
	margin-left:0px;
	margin-top:0px;
	width:70px;
	height:35px;
	line-height:35px;
	font-size:12px;
	text-align:center;
	color:black;
	background-color:transparent;
	background-size:cover;
	/*border:2px solid #ef4042;*/
	background-image:url('../img/orderGraphics/selectBtn_inactive.png');
}
.planOptionChkBox:hover{
	/*background-color:#ef4042;
	color:white;
	background-image:url('../img/orderGraphics/selectBtn_active.png');*/
	font-size:15px;
	
}



.priceListing{
	margin-top:-30px;
}


/*Order Summary Section---------------------------------------------------------*/
#summaryFrame{
	float:left;
	position:relative;
	width:600px;
	height:auto;	
}
#summaryTitleImgBox{
	float:left;
	position:relative;
	width:600px;
	height:auto;
	margin-left:100px;
	margin-top:100px;
}
#summaryTitleImg{
	float:left;
	position:relative;
	width:200px;
	height:75px;
	background-color:transparent;
}
#summaryDetails{
	float:left;
	position:relative;
	width:600px;
	height:auto;
	margin-left:100px;
	margin-top:20px;
}
#summaryDetsTitleBox{
	float:left;
	position:relative;
	width:300px;
	height:auto;
}
.summaryDetsTitle{
	width:100%;
	height:25px;
	line-height:25px;
	font-size:15px;
	text-align:left;
}
#summaryDetsPriceBox{
	float:left;
	position:relative;
	margin-left:0px;
	width:300px;
	height:auto;
}
.summaryDetsPrice{
	width:100%;
	height:25px;
	line-height:25px;
	font-size:15px;
	text-align:left;
}
#summaryTotalBox{
	float:left;
	position:relative;
	margin-left:0px;
	width:400px;
	height:auto;
	margin-top:10px;
	border-top:1px solid #dfdfdf;
}
#summaryTotalTitle{
	float:left;
	position:relative;
	width:300px;
	height:50px;
	line-height:50px;
	font-size:25px;
	text-align:left;
}
#summaryTotalPrice{
	float:left;
	position:relative;
	width:100px;
	height:50px;
	line-height:50px;
	font-size:25px;
	text-align:left;
}

/*Stage Buttons---------------------------------------------------------*/
#stageButtonsFrame{
	float:left;
	position:relative;	
	width:600px;
	height:auto;
	margin-left:100px;
	margin-top:100px;
}
#previousBtn{
	width:200px;
	height:50px;
	float:left;
	position:relative;
}
#previousBtn img{
	width:198px;
	height:48px;
	margin-top:1px;
	margin-left:1px;
}
#previousBtn img:hover{
	width:200px;
	height:50px;
	margin-left:0px;
	margin-top:0px;
}
#nextBtn{
	width:200px;
	height:50px;
	float:right;
	position:relative;
}
#nextBtn img{
	width:198px;
	height:48px;
	margin-left:1px;
	margin-top:1px;
}
#nextBtn img:hover{
	width:200px;
	height:50px;
	margin-left:0px;
	margin-top:0px;
}
#orderBtn{
	width:200px;
	height:50px;
	float:right;
	position:relative;
}
#orderBtn img{
	width:190px;
	height:40px;
	margin-left:5px;
	margin-top:5px;
}
#orderBtn img:hover{
	width:200px;
	height:50px;
	margin-left:0px;
	margin-top:0px;
}



.inputField{
	height:30px;
	font-size:15px;
	border-radius:8px;
	border:1px inset;
}



/*Base Plane Selection---------------------------------------------------------*/
#basePlanSelection{
	
}
#basePlanSelection h3{
	padding-top:0px;
	padding-left:100px;
}

#basePlanFrame{
	display:grid;
	grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
	background-color:transparent;
	height:auto;
}

.basePlanBox{
	
}
#manualBox{
	height:500px;
}
#elextricBox{
	height:500px;
}
.brushDetails {
	width:250px;
}
.brushDetails .pricing{
	margin-top:-10px;
}
.brushDetails .basePlanBullet{
	font-size:12px;
}
.bDetsL{
	text-align:right;
	float:right;
	margin-right:20px;	
}
.bDetsL .planOptionChkBox{
	float:right;	
}
.bDetsR{
	float:left;	
	margin-left:20px;
}

.brushImg{
	width:250px;
	height:400px;
	background-color:transparent;
}
.bIMGL{
	float:right;
	margin-right:25px;	
}
.bIMGR{
	float:left;	
	margin-left:25px;
}

#manualBrushImg{
	
}
#electricBrushImg{
	
}

/*Dental Option Section---------------------------------------------------------*/
#dentalOption{
	
}
#dentalOption h3{
	padding-top:50px;
	padding-left:100px;
}
#dentalDetailsBox{
	margin-left:100px;
	width:500px;
	height:auto;
}
#dentalDetailsBox .longInput{
	width:400px;
}

/*Insight Option Section---------------------------------------------------------*/
#insightOption{
	
}
#insightOption h3{
	padding-top:50px;
	padding-left:100px;
}
#insightDetailsBox{
	margin-left:100px;
	width:auto;
	height:auto;
}
#insightFeaturesFrame{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
	justify-items:center;
	justify-content:space-evenly;
	background-color:transparent;	
	margin-left:-100px;
}
#insightFeaturesFrame .featureBox{
	width:200px;
	height:auto;
	text-align:center;
}
#insightFeaturesFrame .featureBox img{
	width:200px;
	height:200px;
	background-color:transparent;
}
#insightFeaturesFrame .featureBox p{

}



/*Payment Info-----------------------------------------------------------*/
#paymentMethodSection{
	width:100%;
	height:auto;
	margin-left:100px;
}
#cardDetailsBox{
	width:400px;
	height:auto;
	float:left;
	position:relative;

}
#cardTypeIcons{
	width:350px;
	height:auto;
	float:left;
	position:relative;
}
#cardTypeIcons img{
	width:40px;
	height:30px;
	float:left;
	position:relative;
	margin-top:10px;
	margin-left:20px;
	background-color:transparent;
}
#nameOnCard{
	width:350px;
}
#cardNum{
	width:350px;
	margin-top:25px;
}
#cardExp{
	width:100px;
}
#cardCCV{
	width:75px;
	margin-left:25px
}


#cardBillingBox{
	width:400px;
	height:auto;
	float:left;
	position:relative;
	margin-top:64px;
}
#billStreetAddress{
	width:400px;
}
#billAptNum{
	width:400px;
}
#billCity{
	width:400px;
}
#billState{
	width:75px;
}
#billZip{
	width:75px;
	margin-left:25px
}

#shippingSection{
	width:100%;
	height:auto;
	margin-left:100px;
	margin-top:50px;
}
#shippingInfoBox{
	width:400px;
	height:auto;
	float:left;
	position:relative;
}
#shipStreetAddress{
	width:400px;
}
#shipAptNum{
	width:400px;
}
#shipCity{
	width:400px;
}
#shipState{
	width:75px;
}
#shipZip{
	width:75px;
	margin-left:25px
}

#offerCode{
	float:left;
	position:relative;
	margin-top:100px;
	margin-left:100px;
	width:500px;	
}

/*Email Info-----------------------------------------------------------*/
#emailAddress{
	float:left;
	position:relative;
	margin-top:100px;
	margin-left:100px;
	width:500px;
}



/*Review Order ----------------------------------------------------------*/
#reviewPlanSection{
	float:left;
	position:relative;
	margin-left:100px;
	width:500px;	
}
#reviewPaymentSection{
	float:left;
	position:relative;
	margin-left:100px;
	width:500px;	
}
#reviewShippingSection{
	float:left;
	position:relative;
	margin-left:100px;
	width:500px;	
}