<!-- Person, Vehicle, Permit Widget Start -->
<div class="fullscreen-overlay personvehiclepermit-overlay">
	<div class="inner-fullscreen-offset">
		<a href="#" class="close-overlay icon-cross"></a>
		<a href="#" class="pin-logout">Logout</a>
		<!--div class="navigation-overlay">
			<a href="#" class="icon-arrow-up1" data-navigation='up'></a>
			<a href="#" class="icon-arrow-down1" data-navigation='down'></a>
			<a href="#" class="u-gotOSummary"><span class="u-gotOSummary-Span1"><span class="u-gotOSummary-Span2">SKIP TO SUMMARY</span></span></a>
		</div-->
		<div class="navigation-overlay">
			<!--a href="#" data-set="one" class="u-navigationCircle u-navigationCircle-Selection active"><span class="u-navigationCircle-Span1"><span class="u-navigationCircle-Span2">ADD SECTION</span></span></a-->
			<a href="#" data-set="one" class="u-navigationCircle u-navigationCircle-Vehicle"><span class="u-navigationCircle-Span1 animate"><span class="u-navigationCircle-Span2">VEHICLE</span></span></a>
			<a href="#" data-set="two" class="u-navigationCircle u-navigationCircle-Person"><span class="u-navigationCircle-Span1 animate"><span class="u-navigationCircle-Span2">PERSON</span></span></a>

			<a href="#" data-set="three" class="u-navigationCircle u-navigationCircle-Group"><span class="u-navigationCircle-Span1 animate"><span class="u-navigationCircle-Span2">GROUP</span></span></a>

			<a href="#" data-set="four" class="u-navigationCircle u-navigationCircle-PermitDuration"><span class="u-navigationCircle-Span1 animate"><span class="u-navigationCircle-Span2">PERMIT DURATION</span></span></a>
			<a href="#" data-set="five" class="u-navigationCircle u-navigationCircle-DayTime"><span class="u-navigationCircle-Span1 animate"><span class="u-navigationCircle-Span2">DAY & TIME</span></span></a>

			<a href="#" data-set="six" class="u-navigationCircle u-navigationCircle-Location"><span class="u-navigationCircle-Span1 animate"><span class="u-navigationCircle-Span2">LOCATION</span></span></a>
			<a href="#" data-set="seven" class="u-navigationCircle u-navigationCircle-Summary"><span class="u-navigationCircle-Span1 animate"><span class="u-navigationCircle-Span2">SUMMARY</span></span></a>
		</div>
		<div class="overlay-item done">
			<div class="centralised-tick icon-tick_circle1"></div>
			<div class="centralised-text">DONE</div>
		</div>


		<div class="overlay-item personvehiclepermit widgetpopup">
			<div class="options c-Pin-Option-Selection">
				<h2>PIN LOCK</h2>
				<div class="option-container">
					<div class="personvehiclepermit-Box widgetpopup-Box widget-Box">
						<div class="option-container-singlebox">
							<input class="c-pin-input" type="password" name="pin" id="group-pin" maxlength="4" placeholder="ENTER PIN"/>
							<a href="#" class="c-Clear-Handle c-BtnClear icon-cross"></a>
							<a href="#" class="btn-save c-BtnSave">GO</a>
						</div>
						<div class="personvehiclepermit-Box-overlay widgetpopup-Box-overlay widget-Box-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try again..</span></div></div>
						<div class="personvehiclepermit-Success-Box-overlay widgetpopup-Box-overlay widget-Success-Box-overlay widget-Success-Box-overlay widget-Box-overlay "><div class="c-Iconsbox"><span class="icon-tick_circle1"></span></div><div class="c-Contentbox u-TextCenter"><span>GROUP NAME SAVED</span></div></div>
					</div>
				</div>
				<div class="c-Footer c-Pin-Footer">
					<a class="c-Footer-Cancel-Button" href="#">CANCEL</a>
				</div>
			</div>
			<div class="options c-Setone-Option-Selection">
				<div class="option-container">
					<div class="option" data-option="person" data-set="two">
						<div class="option-icon icon-person1"></div>
						<div class="option-text addperson-text">ADD PERSON</div>
					</div>
					<div class="option" data-option="vehicle" data-set="one">
						<div class="option-icon icon-car1"></div>
						<div class="option-text addvehicle-text">ADD VEHICLE</div>
					</div>
					<div class="option"  data-option="permit" data-set="four">
						<div class="option-icon icon-permits"></div>
						<div class="option-text addpermit-text">ADD PERMIT</div>
					</div>
					<div class="option"  data-option="group" data-set="three">
						<div class="option-icon icon-category1"></div>
						<div class="option-text addpermit-text">ADD GROUP</div>
					</div>
					<div class="option"  data-option="location" data-set="six">
						<div class="option-icon icon-location1"></div>
						<div class="option-text addpermit-text">ADD LOCATION</div>
					</div>
				</div>

			</div>

			<div class="options set-one c-Vehicle-Options" data-set="one">
				<div class="set-box c-option-vehicle">
					<h2>VEHICLE</h2>
					<div class="option-container">

						<div class="personvehiclepermit-Box">
							<div class="option-container-firstbox active">
								<span class="option-container-firstbox-Text">Select A Vehicle Below or </span>
								<a href="#" class="btn-save option-container-firstbox-BtnGo">ADD NEW VEHICLE</a>
							</div>
							<div class="option-container-secondbox">
								<input class="c-add-input" type="text" name="person" id="person-add" placeholder="ENTER VEHICLE REGISTRATION"/>
								<a href="#" class="c-Clear-Handle c-BtnClear icon-cross"></a>
								<a href="#" class="btn-save c-BtnSave">ADD</a>
							</div>
							<div class="personvehiclepermit-Box-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try again..</span></div></div>
						</div>
						<div class="existing-div existing-search-div">
							<h5>SELECT VEHICLE</h5>
							<div class="existing-names">
								<div class="existing-names-search">
									<input type="text" class="existing-names-search-input" placeholder="SEARCH" />
									<dd class="existing-names-search-clear icon-cross"></dd>
								</div>
								<a href="#">FN02 OXR</a>
								<a href="#">J1 RTW</a>
								<a href="#">KT06 NXB</a>
							</div>
							<div class="existing-names-navigation">
								<a class="existing-names-navigation-btn existing-names-navigation-next icon-dropdown" href="#" title="Next"></a>
								<a class="existing-names-navigation-btn existing-names-navigation-previous icon-dropdown2" href="#" title="Previous"></a>
							</div>
						</div>

					</div>
					<div class="personvehiclepermit-ExistContact-Box-overlay c-ExistContact-Box-overlay">
						<div class="c-ExistContact-Box">
							<div class="c-ExistContact-Head">
								<div class="c-ExistContact-Content"><span>WE Found the Following Existing Permits for This vehicle. Select an existing permit to edit below or </span></div>
								<div class="c-ExistContact-btnIgnore"><a href="#" class="u-ExistingIgnore"><span>Ignore</span></a></div>
							</div>
							<div class="c-ExistContact-Items-Box">
								<div class="c-ExistContact-Info">Select existing permit to edit or <a href="#" class="u-ExistingIgnore">Ignore</a></div>
								<div class="c-ExistContact-Items">
									<a href="#" class="c-ExistContact-Item">
										<span>FN02 OXR</span>
										<span>GRAHAME ROSE</span>
										<span>LONDON</span>
										<span>EXP. DEC 2016</span>
									</a>
									<a href="#" class="c-ExistContact-Item">
										<span>FN02 OXR</span>
										<span>GRAHAME ROSE</span>
										<span>MANCHE...</span>
										<span>EXP. DEC 2016</span>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="c-Footer c-Common-Footer" data-step="one">
					<a class="c-Footer-Button" href="#">DONE</a>
				</div>
			</div>
			<div class="options set-two c-Person-Options" data-set="two">
				<div class="set-box c-option-person">
					<h2>PERSON</h2>
					<div class="option-container">
						<div class="personvehiclepermit-Box">
							<div class="option-container-firstbox active">
								<span class="option-container-firstbox-Text">Select A Person Below or </span>
								<a href="#" class="btn-save option-container-firstbox-BtnGo">ADD NEW PERSON</a>
							</div>
							<div class="option-container-secondbox">
								<input class="c-add-input" type="text" name="person" id="person-add" placeholder="ENTER PERSON NAME"/>
								<a href="#" class="c-Clear-Handle c-BtnClear icon-cross"></a>
								<a href="#" class="btn-save c-BtnSave">ADD</a>
							</div>
							<div class="personvehiclepermit-Box-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try again..</span></div></div>
						</div>
						<div class="existing-div existing-search-div">
							<h5>SELECT PERSON</h5>
							<div class="existing-names">
								<div class="existing-names-search">
									<input type="text" class="existing-names-search-input" placeholder="SEARCH" />
									<dd class="existing-names-search-clear icon-cross"></dd>
								</div>
								<a href="#">JOHN SMITH</a>
								<a href="#">GRAHAME ROSE</a>
								<a href="#">ELLI MORRIS</a>
							</div>
							<div class="existing-names-navigation">
								<a class="existing-names-navigation-btn existing-names-navigation-next icon-dropdown" href="#" title="Next"></a>
								<a class="existing-names-navigation-btn existing-names-navigation-previous icon-dropdown2" href="#" title="Previous"></a>
							</div>
						</div>
					</div>
					<div class="personvehiclepermit-ExistContact-Box-overlay c-ExistContact-Box-overlay">
						<div class="c-ExistContact-Box">
							<div class="c-ExistContact-Head">
								<div class="c-ExistContact-Content"><span>WE Found the Following Existing Permits for This person. Select an existing permit to edit below or </span></div>
								<div class="c-ExistContact-btnIgnore"><a href="#" class="u-ExistingIgnore"><span>Ignore</span></a></div>
							</div>
							<div class="c-ExistContact-Items-Box">
								<div class="c-ExistContact-Info">Select existing permit to edit or <a href="#" class="u-ExistingIgnore">Ignore</a></div>
								<div class="c-ExistContact-Items">
									<a href="#" class="c-ExistContact-Item">
										<span>FN02 OXR</span>
										<span>GRAHAME ROSE</span>
										<span>LONDON</span>
										<span>EXP. DEC 2016</span>
									</a>
									<a href="#" class="c-ExistContact-Item">
										<span>FN02 OXR</span>
										<span>GRAHAME ROSE</span>
										<span>MANCHE...</span>
										<span>EXP. DEC 2016</span>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="c-Footer c-Common-Footer" data-step="two">
					<a class="c-Footer-Button" href="#">DONE</a>
				</div>
			</div>

			<? /* div class="options set-four" data-set="four"">
			  <div class="set-box c-option-person">
			  <h2>PERMIT DURATION</h2>
			  <div class="option-container">
			  <div class="personvehiclepermit-Box">
			  <div class="c-PermitDuration-FirstBox option-container-firstbox active">
			  <span class="option-container-firstbox-Text">Select A Preset Month Below or </span>
			  <a href="#" class="btn-save option-container-firstbox-BtnGo">ADD CUSTOM DURATION</a>
			  </div>
			  <div class="option-container-secondbox">
			  <div class="c-PermitDuration-StartEndSelection">
			  <a href="#" data-date="" data-day="" data-month="" data-year="" data-text="Start Date" class="c-add-input" name="permit-StartDate" id="permit-StartDate">Start Date</a>
			  <a href="#" data-date="" data-day="" data-month="" data-year="" data-text="End Date" class="c-add-input" name="permit-EndDate" id="permit-EndDate" >End Date</a>

			  <!--a href="#" class="c-Clear-Handle c-PermitDuration-StartEndSelection-BtnClear icon-cross"></a-->
			  <a href="#" class="btn-save c-PermitDuration-StartEndSelection-BtnAddNew"><span>ADD NEW DATE</span></a>
			  <a href="#" class="btn-save c-PermitDuration-StartEndSelection-BtnSave">ADD</a>
			  </div>
			  <div class="c-PermitDuration-StartEndDateSelection">
			  <input class="c-add-input" type="text" name="permit-add-day" id="permit-add-day" placeholder="Day" data-tip="PLEASE ENTER IN 2 DIGITS i.e. 01 for {date_text}"/>
			  <input class="c-add-input" type="text" name="permit-add-month" id="permit-add-month" placeholder="Month" data-tip="PLEASE ENTER IN 2 DIGITS i.e. 01 for {date_text}"/>
			  <input class="c-add-input" type="text" name="permit-add-year" id="permit-add-year" placeholder="Year" data-tip="PLEASE ENTER IN 4 DIGITS i.e. 1977 for {date_text}"/>

			  <a href="#" class="c-Clear-Handle c-PermitDuration-StartEndDateSelection-BtnClear icon-cross"></a>
			  <a href="#" class="btn-save c-PermitDuration-StartEndDateSelection-BtnSave">SAVE</a>
			  </div>
			  </div>
			  <div class="personvehiclepermit-Box-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try valid dates..</span></div></div>
			  </div>
			  <div class="existing-div">
			  <h5>SELECT DURATION</h5>
			  <div class="existing-names">
			  <?php
			  $startDate			 = time();
			  $threeMonthEndDate	 = strtotime("+3 months", ($startDate));

			  $sixMonthEndDate = strtotime("+6 months", ($startDate));

			  $oneYearEndDate = strtotime("1 year", ($startDate));
			  ?>
			  <a class="u-DateTime" data-endyear="<?= date("Y", ($threeMonthEndDate)) ?>" data-endmonth="<?= date("m", ($threeMonthEndDate)) ?>" data-endday="<?= date("d", ($threeMonthEndDate)) ?>" data-enddate="<?= date("d/m/Y", ($threeMonthEndDate)) ?>" data-startyear="<?= date("Y", ($startDate)) ?>" data-startmonth="<?= date("m", ($startDate)) ?>" data-startday="<?= date("d", ($startDate)) ?>" data-startdate="<?= date("d/m/Y", ($startDate)) ?>" href="#">3 MONTHS</a>
			  <a class="u-DateTime" data-endyear="<?= date("Y", ($sixMonthEndDate)) ?>" data-endmonth="<?= date("m", ($sixMonthEndDate)) ?>" data-endday="<?= date("d", ($sixMonthEndDate)) ?>" data-enddate="<?= date("d/m/Y", ($sixMonthEndDate)) ?>" data-startyear="<?= date("Y", ($startDate)) ?>" data-startmonth="<?= date("m", ($startDate)) ?>" data-startday="<?= date("d", ($startDate)) ?>" data-startdate="<?= date("d/m/Y", ($startDate)) ?>" href="#">6 MONTHS</a>
			  <a class="u-DateTime" data-endyear="<?= date("Y", ($oneYearEndDate)) ?>" data-endmonth="<?= date("m", ($oneYearEndDate)) ?>" data-endday="<?= date("d", ($oneYearEndDate)) ?>" data-enddate="<?= date("d/m/Y", ($oneYearEndDate)) ?>" data-startyear="<?= date("Y", ($startDate)) ?>" data-startmonth="<?= date("m", ($startDate)) ?>" data-startday="<?= date("d", ($startDate)) ?>" data-startdate="<?= date("d/m/Y", ($startDate)) ?>" href="#">1 YEAR</a>
			  </div>
			  </div>
			  <div class="tooltip">
			  <div class="tooltip-title"><span class="tooltip-title-tip">TIP</span></div>
			  <div class="tooltip-content">PLEASE ENTER IN 2 DIGITS i.e. 01 for {date_text}.</div>
			  <div class="tooltip-arrow bottom center"></div>
			  </div>
			  </div>

			  </div>
			  <div class="c-Footer c-DateTime-Footer " data-step="two">
			  <a class="c-Footer-Button" href="#">NEXT</a>
			  </div>
			  </div */ ?>

			<div class="options set-three c-GroupBox-Options" data-set="three">
				<div class="set-box c-option-category">
					<h2>GROUP</h2>
					<div class="option-container">

						<div class="personvehiclepermit-Box">
							<div class="option-container-firstbox active">
								<span class="option-container-firstbox-Text">Select A Group Below or </span>
								<a href="#" class="btn-save option-container-firstbox-BtnGo c-AddGroupWidget">ADD NEW GROUP</a>
							</div>
							<div class="option-container-secondbox">
								<input class="c-add-input" type="text" name="category-add" id="category-add" placeholder="ENTER GROUP"/>
								<a href="#" class="c-Clear-Handle c-BtnClear icon-cross"></a>
								<a href="#" class="btn-save c-BtnSave">ADD</a>
							</div>
							<div class="personvehiclepermit-Box-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try again..</span></div></div>
						</div>
						<div class="existing-div existing-search-div">
							<h5>SELECT GROUP</h5>
							<div class="existing-names">
								<div class="existing-names-search">
									<input type="text" class="existing-names-search-input" placeholder="SEARCH" />
									<dd class="existing-names-search-clear icon-cross"></dd>
								</div>
								<a href="#" data-group_uid="1" data-group_name="STUDENT"><span class="c-Cycle-GroupDetails-Criteria"><span data-step="1" class="c-Cycle-GroupDetails-Criteria-Item c-Cycle-GroupDetails-Criteria-Step c-Cycle-GroupDetails-Criteria-FirstStep">STUDENT</span></span> <span class="u-Permit-GroupEdit">EDIT</span></a>
								<a href="#" data-group_uid="2" data-group_name="PROFESSOR" data-location="LONDON" data-hide_location="1" data-lock_daytime="1" data-daytime-thur-end="00:00" data-daytime-thur-start="00:00" data-daytime-day="thur" data-daytime="thur" data-lock_duration="1" data-durationenddate="2016/10/02" data-durationstartdate="2016/04/02" data-durationdatenumber="6" data-durationdatefilter="month" data-durationend="2nd Oct 2016" data-durationstart="2nd Apr 2016">
									<span class="c-Cycle-GroupDetails-Criteria">
										<span data-step="1" class="c-Cycle-GroupDetails-Criteria-Item c-Cycle-GroupDetails-Criteria-Step c-Cycle-GroupDetails-Criteria-FirstStep CriteriaActive">PROFESSOR</span><span data-step="2" class="c-Cycle-GroupDetails-Criteria-Item c-Cycle-GroupDetails-Criteria-Step c-Cycle-GroupDetails-Criteria-Step-Animated"><span class="c-Cycle-GroupDetails-Criteria-Item-Name">DURATION</span><span class="c-Cycle-GroupDetails-Criteria-Item-Value">2nd Apr 2016 - 2nd Oct 2016</span></span><span data-step="3" class="c-Cycle-GroupDetails-Criteria-Item c-Cycle-GroupDetails-Criteria-Step c-Cycle-GroupDetails-Criteria-Step-Animated"><span class="c-Cycle-GroupDetails-Criteria-Item-Name">DAY &amp; TIME</span><span class="c-Cycle-GroupDetails-Criteria-Item-Value">thur</span></span>
									</span>
									<span class="u-Permit-GroupEdit">EDIT</span>
								</a>
								<a href="#" data-group_uid="3" data-group_name="TEACHER" ><span class="c-Cycle-GroupDetails-Criteria"><span data-step="1" class="c-Cycle-GroupDetails-Criteria-Item c-Cycle-GroupDetails-Criteria-Step c-Cycle-GroupDetails-Criteria-FirstStep">TEACHER</span></span> <span class="u-Permit-GroupEdit">EDIT</span></a>
							</div>
							<div class="existing-names-navigation">
								<a class="existing-names-navigation-btn existing-names-navigation-next icon-dropdown" href="#" title="Next"></a>
								<a class="existing-names-navigation-btn existing-names-navigation-previous icon-dropdown2" href="#" title="Previous"></a>
							</div>
						</div>
					</div>


					<div class="personvehiclepermit-ExistGroupContact-Box-overlay c-ExistGroupContact-Box-overlay">
						<div class="c-ExistGroupContact-Box">
							<div class="c-ExistGroupContact-Head">
								<div class="c-ExistGroupContact-Title"><span class="c-GroupContact-Name">PROFESSOR</span></div>
								<div class="c-ExistGroupContact-Content"><span>The <span class="c-GroupContact-Name">PROFESSOR</span> group contains the following preset parameters that cannot be changed unless you have your 4 digit PIN. If you would like to edit the group or save the permit to this group but with different parameters please click EDIT below.</div>
							</div>
							<div class="c-ExistGroupContact-Items-Box">
								<div class="c-ExistGroupContact-Items">
									<div class="c-ExistGroupContact-Item">
										<div class="c-ExistGroupContact-Item-Left">PERMIT DURATION</div>
										<div class="c-ExistGroupContact-Item-Right">15th Aug 2017 to 23rd Aug 2017</div>
									</div>
									<div class="c-ExistGroupContact-Item">
										<div class="c-ExistGroupContact-Item-Left">DAY & TIME</div>
										<div class="c-ExistGroupContact-Item-Right">
											<span class="c-ExistGroupContact-Item-Right-DayTime-Spans">Monday - 12:00 to 14:35</span>
											<span class="c-ExistGroupContact-Item-Right-DayTime-Spans">Tuesday - 12:00 to 16:45</span>
											<span class="c-ExistGroupContact-Item-Right-DayTime-Spans">Friday - 08:00 to 12:54</span>
										</div>
									</div>
									<div class="c-ExistGroupContact-Item">
										<div class="c-ExistGroupContact-Item-Left">LOCATION</div>
										<div class="c-ExistGroupContact-Item-Right">London, Liverpool, Manchester</div>
									</div>
								</div>
							</div>
							<div class="c-ExistGroupContact-Footer">
								<a class="c-ExistGroupContact-Footer-Button" href="#">SAVE TO GROUP</a>
								<a class="c-ExistGroupContact-Footer-Button-Edit" href="#">EDIT</a>
								<a class="c-ExistGroupContact-Footer-Button-Cancel" href="#">CANCEL</a>
							</div>
						</div>
					</div>
				</div>
				<div class="c-Footer c-Common-Footer" data-step="three">
					<a class="c-Footer-Button" href="#">DONE</a>
				</div>
			</div>

			<div class="options set-four c-Permit-Options" data-set="four">
				<h2>PERMIT DURATION</h2>
				<?php
				$startDate = time();
				?>
				<div class="option-container c-PermitDuration-Container">

					<div class="c-PinLock-Options-Box">
						<div class="c-PinLock-Options-Box-Left">
							<div class="c-PinLock-Options-Box-Icon">
								<span class="icon-padlock2"></span>
							</div>
							<div class="c-PinLock-Options-Box-Head">
								<span class="c-PinLock-Options-Box-Head-Title">LOCKED</span>
								<span class="c-PinLock-Options-Box-Head-Content">You can only review content.<br/> Enter Pin to edit.</span>
							</div>
						</div>
						<div class="c-PinLock-Options-Box-Right">
							<div class="c-PinLock-Options-Box-Buttons">
								<a href="#" class="c-PinLock-Options-Box-Button c-PinLock-Options-Box-Button-Skip">Skip</a>
								<a href="#" class="c-PinLock-Options-Box-Button c-PinLock-Options-Box-Button-Review">GO</a>
								<input type="password" placeholder="ENTER PIN" maxlength="4" class="c-PinLock-Options-Box-Input">
							</div>
						</div>
						<div class="c-PinLock-Options-Error-overlay c-PinLock-Options-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try again..</span></div></div>
						<div class="c-PinLock-Options-Success-overlay c-PinLock-Options-overlay"><div class="c-Iconsbox"><span class="icon-tick_circle1"></span></div><div class="c-Contentbox u-TextCenter"><span>GROUP NAME SAVED</span></div></div>
					</div>

					<div class="c-Circle-Option-Box">
						<div class="c-Circle-Option" data-startdate="" data-enddate="" data-set="1"  data-float="left">
							<div class="option-icon">
								<span class="c-Circle icon-add c-Circle-NewAdd"><span>ADD CUSTOM DURATION</span></span>
							</div>
						</div>
						<div class="c-Circle-Option c-Circle-Option-1Day" data-date_number="1" data-date_filter="day"  data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+1 day", ($startDate)))) ?>" data-start="" data-end="" data-set="1"  data-float="center">
							<div class="option-icon"><span class="c-Circle">1 DAY</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
						<div class="c-Circle-Option c-Circle-Option-1Week" data-date_number="1" data-date_filter="week" data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+1 week", ($startDate)))) ?>" data-start="" data-end="" data-set="1"  data-float="right">
							<div class="option-icon"><span class="c-Circle">1 WEEK</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
						<div class="c-Circle-Option c-Circle-Option-1Month" data-date_number="1" data-date_filter="month"  data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+1 month", ($startDate)))) ?>" data-start="" data-end="" data-set="2" data-float="left">
							<div class="option-icon"><span class="c-Circle">1 MONTH</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
						<div class="c-Circle-Option c-Circle-Option-3Month" data-date_number="3" data-date_filter="month"  data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+3 month", ($startDate)))) ?>" data-start="" data-end="" data-set="2" data-float="center">
							<div class="option-icon"><span class="c-Circle">3 MONTH</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
						<div class="c-Circle-Option c-Circle-Option-6Month" data-date_number="6" data-date_filter="month"  data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+6 month", ($startDate)))) ?>" data-start="" data-end="" data-set="2" data-float="right">
							<div class="option-icon"><span class="c-Circle">6 MONTH</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
						<div class="c-Circle-Option c-Circle-Option-1Year" data-date_number="1" data-date_filter="year"  data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+1 year", ($startDate)))) ?>" data-start="" data-end="" data-set="3" data-float="left">
							<div class="option-icon"><span class="c-Circle">1 YEAR</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
					</div>
					<div class="c-TimerSelectBox">
						<div class="c-TimerSelection-Inputs">
							<div class="c-TimerSelection-Inputs-Box">
								<span class="c-TimerSelection-Inputs-Spans">
									<input id="c-TimerSelect-StartTime" class="c-TimerSelect-StartTime c-TimerSelection-Input" type="text" placeholder="Enter Start Date" name="start_date">
								</span>
								<span class="c-TimerSelection-Inputs-Spans">
									<input id="c-imerSelect-EndTime" class="c-TimerSelect-EndTime c-TimerSelection-Input" type="text" placeholder="Enter End Date" name="end_date">
								</span>
								<a class="c-TimerSelect-Save" href="#"><span>SAVE</span></a>
								<a class="c-TimerSelect-Close icon-cross" href="#"></a>
							</div>
							<div class="widgetpopup-Box-overlay widget-Box-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try again..</span></div></div>
						</div>
					</div>
				</div>
				<!--div class="tooltip">
					<div class="tooltip-title"><span class="tooltip-title-tip">TIP</span></div>
					<div class="tooltip-content">Enter Date below.</div>
					<div class="tooltip-arrow bottom center"></div>
				</div-->
				<div class="c-Footer c-PermitDate-Footer" data-step="two">
					<a class="c-Footer-Button" href="#">NEXT</a>
				</div>
			</div>

			<div class="options set-five c-DayTime-Options" data-set="five">
				<h2>DAY & TIME</h2>
				<div class="option-container c-DayTimes">

					<div class="c-PinLock-Options-Box">
						<div class="c-PinLock-Options-Box-Left">
							<div class="c-PinLock-Options-Box-Icon">
								<span class="icon-padlock2"></span>
							</div>
							<div class="c-PinLock-Options-Box-Head">
								<span class="c-PinLock-Options-Box-Head-Title">LOCKED</span>
								<span class="c-PinLock-Options-Box-Head-Content">You can only review content.<br/> Enter Pin to edit.</span>
							</div>
						</div>
						<div class="c-PinLock-Options-Box-Right">
							<div class="c-PinLock-Options-Box-Buttons">
								<a href="#" class="c-PinLock-Options-Box-Button c-PinLock-Options-Box-Button-Skip">Skip</a>
								<a href="#" class="c-PinLock-Options-Box-Button c-PinLock-Options-Box-Button-Review">GO</a>
								<input type="password" placeholder="ENTER PIN" maxlength="4" class="c-PinLock-Options-Box-Input">
							</div>
						</div>
						<div class="c-PinLock-Options-Error-overlay c-PinLock-Options-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try again..</span></div></div>
						<div class="c-PinLock-Options-Success-overlay c-PinLock-Options-overlay"><div class="c-Iconsbox"><span class="icon-tick_circle1"></span></div><div class="c-Contentbox u-TextCenter"><span>GROUP NAME SAVED</span></div></div>
					</div>

					<div class="c-Circle-Option" data-day="all" data-start="00:00" data-end="00:00" data-set="1"  data-float="left">
						<div class="option-icon">
							<span class="c-Circle">ALL DAYS</span>
							<span class="c-OptionTimer icon-clock"></span>
						</div>
					</div>
					<div class="c-Circle-Option" data-day="mon" data-start="00:00" data-end="00:00" data-set="1"  data-float="center">
						<div class="option-icon"><span class="c-Circle">MON</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="tue" data-start="00:00" data-end="00:00" data-set="1"  data-float="right">
						<div class="option-icon"><span class="c-Circle">TUE</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="wed" data-start="00:00" data-end="00:00" data-set="2" data-float="left">
						<div class="option-icon"><span class="c-Circle">WED</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="thur" data-start="00:00" data-end="00:00" data-set="2" data-float="center">
						<div class="option-icon"><span class="c-Circle">THUR</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="fri" data-start="00:00" data-end="00:00" data-set="2" data-float="right">
						<div class="option-icon"><span class="c-Circle">FRI</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="sat" data-start="00:00" data-end="00:00" data-set="3" data-float="left">
						<div class="option-icon"><span class="c-Circle">SAT</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="sun" data-start="00:00" data-end="00:00" data-set="3" data-float="center">
						<div class="option-icon"><span class="c-Circle">SUN</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-TimerSelectBox">
						<div class="c-TimerSelection-Inputs">
							<div class="c-TimerSelection-Inputs-Box">
								<span class="c-TimerSelection-Inputs-Spans">
									<span class="c-TimerSelection-Inputs-Spans-text">START TIME</span>
									<input id="c-TimerSelect-StartTime" class="c-TimerSelect-StartTime c-TimerSelection-Input" type="text" placeholder="00:00" name="start_time">
								</span>
								<span class="c-TimerSelection-Inputs-Spans">
									<span class="c-TimerSelection-Inputs-Spans-text">END TIME</span>
									<input id="c-TimerSelect-EndTime" class="c-TimerSelect-EndTime c-TimerSelection-Input" type="text" placeholder="00:00" name="end_time">
								</span>
								<a class="c-TimerSelect-AllDay" href="#"><span>ALL DAY</span></a>
								<a class="c-TimerSelect-Save" href="#"><span>SAVE</span></a>
								<a class="c-TimerSelect-Close icon-cross" href="#"></a>
							</div>

						</div>
					</div>
				</div>
				<div class="tooltip">
					<div class="tooltip-title"><span class="tooltip-title-tip">TIP</span></div>
					<div class="tooltip-content">This is a 24hr clock. enter time like this 0900 for 9AM.</div>
					<div class="tooltip-arrow bottom center"></div>
				</div>
				<div class="c-Footer c-DayTime-Footer" data-step="three">
					<a class="c-Footer-Button" href="#">NEXT</a>
				</div>
			</div>

			<div class="options set-six c-Location-Options" data-set="six">
				<div class="set-box c-option-location">
					<h2>LOCATION</h2>
					<div class="option-container">
						<div class="personvehiclepermit-Box">
							<div class="c-PinLock-Options-Box">
								<div class="c-PinLock-Options-Box-Left">
									<span class="c-PinLock-Options-Box-Icon icon-padlock"></span>
									<span class="c-PinLock-Options-Box-Title">LOCKED</span>
								</div>
								<div class="c-PinLock-Options-Box-Right">
									<div class="c-PinLock-Options-Box-Buttons">
										<a href="#" class="c-PinLock-Options-Box-Button c-PinLock-Options-Box-Button-Skip">Skip</a>
										<a href="#" class="c-PinLock-Options-Box-Button c-PinLock-Options-Box-Button-Review">Review</a>
										<input type="password" placeholder="ENTER PIN" maxlength="4" class="c-PinLock-Options-Box-Input">
									</div>
								</div>
								<div class="c-PinLock-Options-Error-overlay c-PinLock-Options-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try again..</span></div></div>
								<div class="c-PinLock-Options-Success-overlay c-PinLock-Options-overlay"><div class="c-Iconsbox"><span class="icon-tick_circle1"></span></div><div class="c-Contentbox u-TextCenter"><span>GROUP NAME SAVED</span></div></div>
							</div>

							<div class="option-container-firstbox active">
								<span class="option-container-firstbox-Text">Select A Location Below or </span>
								<a href="#" class="btn-save option-container-firstbox-BtnGo">ADD NEW LOCATION</a>
							</div>
							<div class="option-container-secondbox">
								<input class="c-add-input" type="text" name="person" id="person-add" placeholder="ENTER LOCATION"/>
								<a href="#" class="c-Clear-Handle c-BtnClear icon-cross"></a>
								<a href="#" class="btn-save c-BtnSave">ADD</a>
							</div>
							<div class="personvehiclepermit-Box-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try again..</span></div></div>
						</div>
						<div class="existing-div existing-search-div">
							<h5>SELECT LOCATION(S)</h5>
							<div class="existing-names">
								<div class="existing-names-search">
									<input type="text" class="existing-names-search-input" placeholder="SEARCH" />
									<dd class="existing-names-search-clear icon-cross"></dd>
								</div>
								<a href="#">LIVERPOOL</a>
								<a href="#">LONDON</a>
								<a href="#">MANCHESTER</a>
							</div>
							<div class="existing-names-navigation">
								<a class="existing-names-navigation-btn existing-names-navigation-next icon-dropdown" href="#" title="Next"></a>
								<a class="existing-names-navigation-btn existing-names-navigation-previous icon-dropdown2" href="#" title="Previous"></a>
							</div>
						</div>
					</div>
				</div>
				<div class="c-Footer c-Common-Footer" data-step="six">
					<a class="c-Footer-Button" href="#">DONE</a>
				</div>
			</div>



			<div class="options set-seven c-Summary-Options set-summary" data-set="seven">
				<h2>SUMMARY</h2>
				<div class="option-container">
					<div class="c-CirclesOption c-Vehicle-CirclesOption">
						<div class="option-icon">
							<a href="#" data-step="one" class="c-Circles">
								<span class="c-CirclesText c-VehicleText"><span>FN02</span></span>
							</a>
						</div>
						<div class="option-text addpermit-text">VEHICLE</div>
					</div>
					<div class="c-CirclesOption c-Person-CirclesOption">
						<div class="option-icon"><a href="#" data-step="two" class="c-Circles"><span class="c-CirclesText"><span>GRAHAME ROSE</span></span></a></div>
						<div class="option-text addpermit-text">PERSON</div>
					</div>

					<div class="c-CirclesOption c-Group-CirclesOption">
						<div class="option-icon">
							<a href="#" data-step="three" class="c-Circles">
								<span class="c-CirclesText"><span>STUDENT</span></span>
							</a>
						</div>
						<div class="option-text addpermit-text">GROUP</div>
					</div>

					<div class="c-CirclesOption c-PermitDuration-CirclesOption">
						<div class="option-icon">
							<a href="#" data-step="four" class="c-Circles">
								<span class="c-CirclesText">
									<span class="permit-startDate"></span>
									<span class="permit-endDate"></span>
								</span>
							</a>
						</div>
						<div class="option-text addperson-text">PERMIT DURATION</div>
					</div>
					<div class="c-CirclesOption c-DayTime-CirclesOption">
						<div class="option-icon">
							<a href="#" data-step="five" class="c-Circles c-Circles-DateTime">
								<span class="c-CirclesText">
									<span class="c-CirclesText-DateTime-Day" data-day="all">ALL</span>
									<span class="c-CirclesText-DateTime-Day" data-day="mon">mo</span>
									<span class="c-CirclesText-DateTime-Day" data-day="tue">tu</span>
									<span class="c-CirclesText-DateTime-Day" data-day="wed">we</span>
									<span class="c-CirclesText-DateTime-Day" data-day="thur">th</span>
									<span class="c-CirclesText-DateTime-Day" data-day="fri">fr</span>
									<span class="c-CirclesText-DateTime-Day" data-day="sat">sa</span>
									<span class="c-CirclesText-DateTime-Day" data-day="sun">su</span>

								</span>
							</a>
						</div>
						<div class="option-text addvehicle-text">DAY & TIME</div>
					</div>

					<div class="c-CirclesOption c-Location-CirclesOption">
						<div class="option-icon">
							<a href="#" data-step="six" class="c-Circles">
								<span class="c-CirclesText"><span>LONDON</span></span>
							</a>
						</div>
						<div class="option-text addpermit-text">LOCATION</div>
					</div>

				</div>
				<div class="c-Footer c-Done-Footer">
					<a class="c-Footer-Button" href="#">SAVE</a>
					<a class="c-Footer-Cancel-Button" href="#">CANCEL</a>
				</div>
			</div>

			<div class="options set-eight c-option-done">
				<div class="option-container">
					<div class="option">
						<div class="option-icon icon-tick_circle1"></div>
						<div class="option-text Done-text">SAVED</div>
					</div>
				</div>
			</div>


			<div class="personvehiclepermit-PinLock-Box-overlay c-PinLock-Box-overlay">
				<div class="c-PinLock-Box">
					<div class="c-PinLock-Head">
						<div class="c-PinLock-Head-Content">
							<span class="c-PinLock-Head-Content-Icon icon-padlock"></span>
							<span class="c-PinLock-Head-Content-Title">LOCKED</span>
						</div>
					</div>

					<div class="c-PinLock-Content">The contents of this page has been locked and can only be edited if you have your 4 digit access pin. You may review the page or click skip to jump to the next step</div>

					<div class="c-PinLock-Form-Box">
						<div class="c-PinLock-Form-Box-Inputs">
							<div class="c-PinLock-Form-Box-Input">
								<input type="password" placeholder="ENTER 4 DIGIT PIN" maxlength="4" class="c-PinLock-Form-Input">
								<a href="#" class="c-Pinlock-Handle c-BtnPinLock-GO">GO</a>
								<a href="#" class="c-Pinlock-Handle c-BtnPinlock-Clear icon-cross"></a>
							</div>
							<div class="c-PinLock-Form-Box-Error-overlay c-PinLock-Form-Box-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try again..</span></div></div>
							<div class="c-PinLock-Form-Box-Success-overlay c-PinLock-Form-Box-overlay"><div class="c-Iconsbox"><span class="icon-tick_circle1"></span></div><div class="c-Contentbox u-TextCenter"><span>GROUP NAME SAVED</span></div></div>
						</div>

						<div class="c-PinLock-Form-Buttons">
							<a href="#" class="c-PinLock-Form-Button-Review">Review</a>
							<a href="#" class="c-PinLock-Form-Button-Skip">Skip</a>
						</div>
					</div>
				</div>
			</div>

			<div class="options c-ExistingPermit-Options">
				<h2>EXISTING PERMIT</h2>
				<div class="option-container">
					<p class="c-Options-Title">We are now diverting you to the summary page where you can check your details for this permit and amend anything you choose before processing ... <span class="c-CountDown-Timer">10secs</span></p>
				</div>
				<div class="c-Footer c-Footer-Block c-ExistingPermit-Footer u-notfixed">
					<a class="c-Footer-Button" href="#">GO TO SUMMARY</a>
					<a class="c-Footer-Cancel-Button" href="#">CANCEL</a>
				</div>
			</div>

			<div class="options c-ExistingPermit-Options">
				<h2>EXISTING PERMIT</h2>
				<div class="option-container">
					<p class="c-Options-Title">We are now diverting you to the summary page where you can check your details for this permit and amend anything you choose before processing ... <span class="c-CountDown-Timer">10secs</span></p>
				</div>
				<div class="c-Footer c-Footer-Block c-ExistingPermit-Footer u-notfixed">
					<a class="c-Footer-Button" href="#">GO TO SUMMARY</a>
					<a class="c-Footer-Cancel-Button" href="#">CANCEL</a>
				</div>
			</div>

			<div class="options c-ErrorPopups-Options">
				<div class="option-container">
					<div class="c-ErrorPopups-Options-Error-overlay c-ErrorPopups-Options-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! This bulk action will be activated once connected via API to Rangers database</span></div></div>
					<div class="c-ErrorPopups-Options-Success-overlay c-ErrorPopups-Options-overlay"><div class="c-Iconsbox"><span class="icon-tick_circle1"></span></div><div class="c-Contentbox u-TextCenter"><span>GROUP NAME SAVED</span></div></div>
				</div>
				<div class="c-Footer c-AssignToGroup-Footer">
					<a class="c-Footer-Button" href="#">OK</a>
				</div>
			</div>
		</div>



	</div>
</div>
<!-- Person, Vehicle, Permit Widget End -->