@charset "UTF-8";
/* CSS Document */

.section{
	float:left;
	position:relative;
	width:100%;	
}

.editSubBtn{
	float:right;
	position:relative;
	width:60px;
	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/journeyMain/manageBtn_inactive.png');	
}
.editSubBtn:hover{
	color:#fff;
	background-image:url('../img/journeyMain/manageBtn_active.png');	
}

.pEditBtn{
	position:relative;
	width:50px;
	height:25px;
	margin-top:0px;
	margin-left: 25px;
	background-color:transparent;	
}

.whtBG{
	background-color:#fff;
}
.clrBG{
	background-color:#E0E0E0;
}

/*Account Top Details section--------------------------------------------*/
#accountDetails{
	float:left;
	position:relative;
	width:600px;
	height:auto;
	margin-left:100px;
	margin-top:100px;
}
#accountDetsTitleBox{
	float:left;
	position:relative;
	width:200px;
	height:auto;
}
.accountDetsTitle{
	width:100%;
	height:auto;
	font-size:20px;
	font-family:montserratRegItal, Arial, Helvetica;
	text-align:left;
	margin-top:20px;
}
#accountDetsBox{
	float:left;
	position:relative;
	margin-left:20px;
	width:300px;
	height:auto;
}
.accountDets{
	width:100%;
	height:auto;
	font-size:20px;
	text-align:left;
	margin-top:20px;
}
#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;
}

/*Personalized Items section------------------------------------------------------*/
#personalizationField{
	float:left;
	position:relative;
	margin-top: 100px;
	/*margin-left: 100px;*/
	width:100%;
	height:auto;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	
}
#personalizationField h3{
	margin-left:100px;
}
/*#pItemsFrame{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
	justify-items:center;
	justify-content:space-evenly;
	background-color:transparent;
}
.pItemBox{
	float:left;
	position:relative;
	margin-top:50px;
}
.pItemBox img{
	background-color:transparent;
	width:200px;
	height:300px;
}
.pItemBox .itemName{
	padding-top:10px;
	margin-top:10px;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	font-size:15px;
	text-align:center;
	letter-spacing:5px;
}
.pItemBox .propTitle{
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:left;
	letter-spacing:5px;
}
.pItemBox .property{
	margin-top:-10px;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:left;
	letter-spacing:5px;
}*/
#pItemsFrame1{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
	/*justify-items:center;*/
	background-color:transparent;
}
#pItemsFrame1 .pItemBox{
	margin-top:50px;
}
#pItemsFrame1 .pItemBox img{
	background-color:transparent;
	width:200px;
	height:600px;
}
#pItemsFrame1 .pItemBox .itemName{
	padding-top:10px;
	margin-top:10px;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	font-size:20px;
	letter-spacing:5px;
}
#pItemsFrame1 .pItemBox .propTitle{
	margin-top:10px;
	font-family:montserratRegItal, Arial, Helvetica, sans-serif;
	font-size:12px;	
}
#pItemsFrame1 .pItemBox .property{
	margin-top:-7px;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	font-size:15px;	
}
#pItemsFrame2{
	display:grid;
	grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
	justify-items:center;
	justify-content:space-evenly;
	background-color:transparent;
}
#pItemsFrame2 .pItemBox{
	float:left;
	position:relative;
	margin-top:50px;
	text-align:center;
}
#pItemsFrame2 .pItemBox img{
	background-color:transparent;
	width:200px;
	height:300px;
}
#pItemsFrame2 .pItemBox .itemName{
	padding-top:10px;
	margin-top:10px;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	font-size:20px;
	text-align:center;
	letter-spacing:5px;
}
#pItemsFrame2 .pItemBox .propTitle{
	margin-top:10px;
	font-family:montserratRegItal, Arial, Helvetica, sans-serif;
	font-size:12px;	
}
#pItemsFrame2 .pItemBox .property{
	margin-top:-7px;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	font-size:15px;	
}
.propTitle{
	font-family:montserratRegItal, Arial, Helvetica, sans-serif;	
}


/*Subscription Timeline-------------------------------------------------------------*/
#suscriptionScheduleField{
	float:left;
	position:relative;
	margin-top: 100px;
	/*margin-left: 100px;*/
	width:100%;
	height:auto;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	
}
#suscriptionScheduleField h3{
	padding-left:100px;	
}
#scheduleBox{
	width:600px;
	height:auto;
	margin-left: 100px;
	
}
.timelineMarker{
	width:350px;
	height:50px;
	line-height:50px;
	font-size:20px;
	color:#fff;
	background-color:transparent;
	background-image:url('../img/journeyMain/timelineMarker_basic.png');
	background-position:left;
	background-repeat:no-repeat;
	padding-left:50px;
}
.timelineMarker img{
	display:inline-block;
	position:relative;
	float:right;
	width:50px;
	height:50px;
	background-color:transparent;
	margin-top:0px;
	margin-right:75px;
}
.gapLine{
	width:300px;
	height:50px;
	margin-left:50px;
	border-left:2px solid #ef4042;
}
#nextDelivery{
	width:500px;
	height:100px;
	line-height:100px;
	background-image:url('../img/journeyMain/timelineMarker_nextDel.png');
}
.specialGift{
	width:400px;
	font-size:20px;
	background-image:url('../img/journeyMain/timelineMarker_spclGift.png');
}
.payShift{
	font-size:12px;
}


/*Manage Account--------------------------------------------------------------*/

#manageDetails{
	margin-top:100px;	
	width:500px;
}
#manageDetails h1{
	padding-left:100px;	
}
.accntDetsBox{
	margin-left:100px;
	margin-top:50px;
}
#accountStatusBox{
	width:500px;
	height:auto;
	font-size:25px;
}
#accntStatusTitle{
	float:left;
	width:200px;
	height:40px;
	line-height:40px;
	text-align:left;
}
#accntStatus{
	float:left;
	width:200px;
	height:40px;
	line-height:40px;
	text-align:left;
}
#cancelBtn{
	float:right;	
	position:relative;
	width:75px;
	height:30px;
	margin-top:0px;
	margin-right: 25px;
	background-color:transparent;
	background-image:url('../img/journeyMain/cancelBtn_inactive.png');	
}
#cancelBtn:hover{
	background-image:url('../img/journeyMain/cancelBtn_active.png');	
}
.inputTitle{
	font-size:15px;
}
.inputField{
	height:30px;
	font-size:15px;
	border-radius:8px;
	border:1px inset;
}
#emailPassBox{
	float:left;
	position:relative;
	margin-top:30px;
	width:400px;
	
}
#emailPassBox input{
	width:300px;
}
.updateEmailPassBtn{
	float:right;
	width:75px;
	height:30px;
	margin-top:3px;
	background-color:transparent;
	background-image:url('../img/journeyMain/updateBtn_inactive.png');	

}
.updateEmailPassBtn:hover{
	background-image:url('../img/journeyMain/updateBtn_active.png');	
}
#deliveryAddressBox{
	width:400px;
	height:auto;
	float:left;
	position:relative;
	margin-top:30px;
}
#shipFirstName{
	width:185px;
}
#shipLastName{
	width:185px;
	margin-left:13px;
}
#shipStreetAddress{
	width:395px;
}
#shipAptNum{
	width:395px;
}
#shipCity{
	width:395px;
}
#shipState{
	width:75px;
}
#shipZip{
	width:75px;
	margin-left:25px
}
#updateDeliveryBtn{
	float:right;	
	position:relative;
	width:75px;
	height:30px;
	margin-top:0px;
	background-color:transparent;
	background-image:url('../img/journeyMain/updateBtn_inactive.png');	

}
#updateDeliveryBtn:hover{
	background-image:url('../img/journeyMain/updateBtn_active.png');	

}

/*Payment Info--------------------------------------------------------------------*/
#paymentOptionsBox{
	margin-top:50px;	
	width:100%;
}
#paymentOptionsBox h3{
	padding-left:100px;	
}
#addPaymentBtn{
	position:absolute;
	margin-left:180px;
	margin-top:-20px;
	width:15px;
	height:15px;
	background-color:transparent;
}
.paymentOption{
	width:600px;
	height:125px;
	margin-left:100px;
	display:grid;
	grid-template-columns:1fr 3fr 3fr;
	grid-template-rows:auto;
	justify-content:start;
	justify-items:start;
	border-top:1px solid black;
}
.selectorBox{
	width:50px;
	margin-top:15px;
}
.selectorBox img{
	width:20px;
	height:20px;
	margin-top:15px;
	margin-left:15px;
	background-color:red;
}
.cardInfo{
	width:225px;
	height:auto;
	margin-top:15px;
}
.cardBilling{
	width:225px;
	height:auto;
	margin-top:15px;
}

/*Avatar Manager-----------------------------------------------------------*/
#avatarBox{
	margin-top:50px;	
	width:100%;
	height:420px;
}
#avatarBox h3{
	padding-left:100px;	
}
#avatarImg{
	float:left;
	position:relative;
	width:300px;
	height:300px;	
	margin-left:100px;
	margin-top:20px;
	background-color:transparent;
}
#editAvatarBtn{
	float:left;
	position:relative;
	width:150px;
	height:50px;	
	margin-left:20px;
	margin-top:20px;
	background-color:transparent;
	background-image:url('../img/journeyMain/editAvatarBtn_inactive.png');
}
#editAvatarBtn:hover{
	background-image:url('../img/journeyMain/editAvatarBtn_active.png');
}


/*Dentist Manager-----------------------------------------------------------*/
#dentistBox{
	margin-top:50px;	
	width:100%;
}
#dentistBox h3{
	padding-left:100px;	
}
#dentistZipInputField{
	float:left;
	position:relative;
	margin-left:100px;
}	
#findDentistBtn{
	float:left;
	position:relative;
	width:150px;
	height:30px;
	margin-left:20px;
	margin-top:3px;
	background-color:transparent;
	background-image:url('../img/journeyMain/findDentistBtn_inactive.png');
}
#findDentistBtn:hover{
	background-image:url('../img/journeyMain/findDentistBtn_active.png');
}
#configureBtn{
	float:left;
	position:relative;
	width:150px;
	height:30px;	
	margin-left:20px;
	margin-top:3px;
	background-color:transparent;
	background-image:url('../img/journeyMain/configureBtn_inactive.png');
}
#configureBtn:hover{
	background-image:url('../img/journeyMain/configureBtn_active.png');
}