#property-id { font-size: 1.4em; padding: 0 20px 0 16px; height: 40px; width: 100%; border-radius: 25px; -webkit-appearance: none; }
#property-div { position: relative; }
#property-div label { position: absolute; top: 10px; left: 23px; color: #999; font-size: 1.4em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: calc(100% - 23px); }
#property-div label:after { 
	display: inline-block; position: absolute; top: 8px; right: 13px; width: 0; height: 0; margin-left: .255em; vertical-align: .255em; content: "";
    border-top: .4em solid; border-right: .4em solid transparent; border-bottom: 0; border-left: .4em solid transparent; color: #00134e; visibility: visible !important;
}

#calculator-results h4 { text-align: left; margin: 30px 0 0; }
#calculator-results h4 + table.table { margin-top: 0; }

#calculator-tabs > .transient-tax-chart-link { margin-bottom: 50px; }
#booking-form-button { font-weight: bold; font-size: 20px; letter-spacing: 0.03em; padding: 17px 40px; margin: 90px 0; }

#main h2 { font-size: 24px; margin-top: 25px; margin-bottom: 40px; letter-spacing: -.015em; }

#point-price-row div.point-price { position: relative; height: 290px; border-radius: 16px; background-size: cover; background-repeat: no-repeat; box-shadow: 0 10px 40px rgba(0,0,0,0.05); }
#point-price-row div.point-price span.label { display: inline-block; position: absolute; top: 32px; left: 30px; background: #fff; color: #8E4199; border-radius: 16px; font-size: 12px; text-transform: uppercase; padding: 4px 12px; border: 1px solid #8E4199; letter-spacing: 0.1em; }
#point-price-row div.point-price#regular-point-price span.label,
#point-price-row div.point-price#advantage-point-price span.label { border-color: #1E3A74; color: #1E3A74; }
#point-price-row div.point-price span.price { display: inline-block; position: absolute; bottom: 70px; left: 30px; font-size: 56px; letter-spacing: -0.00em; font-weight: 600; color: #1E3A74; }
#point-price-row div.point-price span.per   { display: inline-block; position: absolute; bottom: 48px; left: 30px; font-size: 28px; letter-spacing: -0.00em; font-weight: 300; color: #1E3A74; }
#point-price-row #premium-point-price   { background-image: url('/img/redesign/cost-calculator/premium-star-bg.png'); }
#point-price-row #regular-point-price   { background-image: url('/img/redesign/cost-calculator/regular-star-bg.png'); }
#point-price-row #advantage-point-price { background-image: url('/img/redesign/cost-calculator/advantage-star-bg.png'); }

#hand-with-phone-row { height: 500px; margin-top: 90px; }
#hand-with-phone-row .col:first-child { background-image: url('/img/redesign/cost-calculator/hand-with-phone.png'); background-repeat: no-repeat; background-position: bottom left; position: relative; }
#hand-with-phone-row .point-price { display: block; position: relative; width: 250px; height: 95px; border-radius: 10px; color: #fff; padding: 20px; box-shadow: 0 10px 40px 0 rgba(0,0,0,0.1); }
#hand-with-phone-row .point-price.premium { background: #8E4199; position: absolute; top: 10px; right: 50px; }
#hand-with-phone-row .point-price.regular { background: #1E3A74; position: absolute; top: 110px; left: -50px; }
#hand-with-phone-row .point-price.advantage { background: #969893; position: absolute; top: 280px; left: 20px; }
#hand-with-phone-row .point-price span.icon  { display: block; position: absolute; top: 22px; left: 20px; width: 50px; height: 50px; margin-right: 9px; text-align: center; line-height: 18px; font-size: 10px; border-radius: 50%; }
#hand-with-phone-row .point-price.premium span.icon   { border: 16px solid #DBBDE3; color: #DBBDE3; }
#hand-with-phone-row .point-price.regular span.icon   { border: 16px solid #C2E8FA; color: #C2E8FA; }
#hand-with-phone-row .point-price.advantage span.icon { border: 16px solid #D8DBD8; color: #D8DBD8; }
#hand-with-phone-row .point-price span.price { font-size: 32px; font-weight: 600; line-height: 1; display: block; position: absolute; top: 25px; left: 85px; }
#hand-with-phone-row .point-price span.per   { font-size: 12px; display: block; position: absolute; top: 36px; left: 195px; }
#hand-with-phone-row .point-price span.label { font-size: 16px; display: block; line-height: 1; position: absolute; top: 58px; left: 85px; }
#hand-with-phone-row .col p.large-text { font-size: 24px; color: #000; margin-top: 40px; margin-bottom: 30px; }
#hand-with-phone-row .col p.small-text { font-size: 12px; color: #000; margin-top: 30px; }

#date-selector-section { background: #8E4199; margin: 0 calc(-50vw + 550px); padding: 50px 0; margin-top: -1px; }
#cost-calculator-instructions { text-align: center; color: #fff; font-size: 24px; margin-bottom: 30px; font-weight: 300; }
#date-selector-section #ui-datepicker-div { position: static !important; display: block !important; margin: 0 auto !important; box-shadow: 0 10px 40px rgba(0,0,0,0.05); padding: 20px 50px 0; width: 890px !important; border-radius: 16px 16px 0 0; border: 0; font-family: DMSans; }
#date-selector-section #ui-datepicker-div > .ui-datepicker-group { width: 45%; }
#date-selector-section #ui-datepicker-div > .ui-datepicker-group.ui-datepicker-group-first { margin-right: 10%; }
#date-selector-section #ui-datepicker-div > .ui-datepicker-group.ui-datepicker-group-last {  }
#date-selector-section div.input-daterange { width: 890px; margin: 0 auto; padding: 20px 50px; background: #fff; border-radius: 0 0 16px 16px; }
#date-selector-section div.input-daterange .span5 { display: inline-block; width: 45%; }
#date-selector-section div.input-daterange .span2 { display: inline-block; width: 8%; text-align: center; font-size: 24px; }
#date-selector-section div.input-daterange .span5:first-child { text-align: right; }
#date-selector-section div.input-daterange .span5:last-child { float: right; text-align: left; }
#date-selector-section div.input-daterange .input-daterange-bordertop { border-top: 1px solid #bbb; padding-top: 20px; }
#date-selector-section div.input-daterange input { border: 0; background: none; font-size: 24px; width: 100%; }
#date-selector-section div.input-daterange .span5:first-child input { text-align: right; }
#date-selector-section div.input-daterange .span5:last-child input { text-align: left; }
	
#main section#how-much-does-it-cost-section h2 { font-size: 40px; color: #000; letter-spacing: 0.02em; margin-bottom: 30px; }
#main section#how-much-does-it-cost-section p.narrow { width: 800px; max-width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 25px; text-align: center; }
#main section#how-much-does-it-cost-section .col .point-price { border-radius: 16px; padding: 170px 60px 50px 30px; position: relative; height: 100%; }
#main section#how-much-does-it-cost-section .col .point-price span.label { display: inline-block; position: absolute; top: 32px; left: 30px; background: #fff; color: #8E4199; border-radius: 16px; font-size: 12px; text-transform: uppercase; padding: 4px 12px; border: 1px solid #8E4199; letter-spacing: 0.1em; }
#main section#how-much-does-it-cost-section .col .point-price span.price { display: inline-block; position: absolute; top: 65px; left: 30px; font-size: 56px; letter-spacing: -0.00em; font-weight: 700; color: #1E3A74; }
#main section#how-much-does-it-cost-section .col .point-price span.per   { display: inline-block; position: absolute; top: 130px; left: 30px; font-size: 28px; letter-spacing: -0.00em; font-weight: 300; color: #1E3A74; }
#main section#how-much-does-it-cost-section .col .point-price p,
#main section#how-much-does-it-cost-section .col .point-price ul { color: #000; font-weight: 300; letter-spacing: 0.02em; margin: 12px 0; }
#main section#how-much-does-it-cost-section .col .point-price ul li { line-height: 1.3; padding: 3px 0; }
#main section#how-much-does-it-cost-section .col .point-price ul li::marker { font-size: 12px; }
#main section#how-much-does-it-cost-section .col .point-price strong { font-weight: bold; }
#main section#how-much-does-it-cost-section .col:nth-child(1) .point-price { background: #F6ECF9; background: radial-gradient(circle at 10% -10%, #F6ECF9 50%, #DBAFDF 100%); }
#main section#how-much-does-it-cost-section .col:nth-child(2) .point-price { background: #C2E8FA; background: radial-gradient(circle at 10% -10%, #F1FAFE 50%, #C2E8FA 100%); }
#main section#how-much-does-it-cost-section .col:nth-child(3) .point-price { background: #D9D9D9; background: radial-gradient(circle at 10% -10%, #FFFFFF 50%, #D9D9D9 100%); }
#main section#how-much-does-it-cost-section .col:nth-child(2) .point-price span.label,
#main section#how-much-does-it-cost-section .col:nth-child(3) .point-price span.label { color: #1E3A74; border-color: #1E3A74; }

#main { background-image: url('/img/redesign/bg-graphic-wheel.png'); background-repeat: no-repeat; background-position: bottom 850px left 0px; background-size: contain; }

#calculator-results-row { padding-top: 45px; }
#calculator-results-row .calculator-btns { padding: 0; text-align: right; }
#calculator-results-row .calculator-btns a.btn { background: #fff; border: 1px solid #1E3A74; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 12px; margin-left: 12px; }
#calculator-results-row .calculator-btns a.btn.active { background: #C2E8FA; }
#calculator-results-row #calculator-results legend { clear: left; margin: 80px 0 50px; font-size: 40px; font-weight: 650; letter-spacing: 0.05em; }
#calculator-results-row #calculator-results table { margin-bottom: 50px; }
#calculator-results-row #calculator-results table thead th { font-size: 14px; background: rgba(219, 189, 227, 0.5); font-weight: 600; padding: 16px 5px; text-align: center; line-height: 18px; }
#calculator-results-row #calculator-results table thead th.name { font-size: 16px; text-align: left; padding-left: 12px; }
#calculator-results-row #calculator-results table tbody td { background: none; line-height: 18px; padding: 18px 0; text-align: center; border-bottom-color: #999; }
#calculator-results-row #calculator-results table tbody td.name { background: none; text-align: left; padding-left: 12px; }

#calculator-results-row #calculator-results table tbody td:hover { padding-top: 10px; padding-bottom: 10px; }
#calculator-results-row #calculator-results table tbody td.name:hover { padding-top: 18px; padding-bottom: 18px; }
#calculator-results-row #calculator-results table tbody td:hover > span { display: none !important; }
#calculator-results-row #calculator-results table tbody td > a.book { display: none; padding-left: 25px; padding-right: 25px; margin-top: -2px; margin-bottom: -4px; }
#calculator-results-row #calculator-results table tbody td:hover > a.book { display: inline-block; }

#calculator-results-row #calculator-results i.bi { color: #8E4199; margin-left: 2px; font-size: 14px; }

#calculator-results button.icon-popover { padding: 0 3px; border: 0; background: none; text-align: center; }
body > div.cost-calculator-popover { border-color: transparent; box-shadow: 0 10px 40px rgba(0,0,0,0.05); width: 360px; max-width: 360px; }
body > div.cost-calculator-popover .popover-arrow { display: none; }
body > div.cost-calculator-popover .popover-header { background: none; border: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.02em; color: #8E4199; padding: 40px 25px 0; position: relative; }
body > div.cost-calculator-popover .popover-header a.close { position: absolute; top: 8px; right: 20px; text-decoration: none; color: #ddd; font-size: 32px; font-weight: 200; cursor: pointer; }
body > div.cost-calculator-popover .popover-body { padding: 25px; }
body > div.cost-calculator-popover .popover-body a { color: #285CA4; }
body > div.cost-calculator-popover .popover-body h4 { color: #1E3A74; font-weight: bold; font-size: 14px; margin-top: -8px; margin-bottom: 16px; }

.hidden-desktop { display: none !important; }

@media ( max-width: 1199px ) { 
	section#date-selector-section { margin: 0 -50px; padding-left: 50px; padding-right: 50px; }
}
@media ( max-width: 991px ) {
	#point-price-row { margin-left: -36px; margin-right: -36px; }
	#point-price-row div.point-price { height: 250px; }
	#point-price-row div.point-price span.price { font-size: 48px; }
	
	#hand-with-phone-row { height: auto; }
	#hand-with-phone-row .col:first-child { min-height: 480px; background-position: bottom center; }
	#hand-with-phone-row .point-price.premium   { left: calc(50% + 80px); }
	#hand-with-phone-row .point-price.regular   { left: calc(50% - 250px); }
	#hand-with-phone-row .point-price.advantage { left: calc(50% - 180px); }

	#date-selector-section #ui-datepicker-div,
	#date-selector-section div.input-daterange { width: 100% !important; max-width: 100% !important; }
	
	#calculator-results-row #calculator-results table thead th:empty,
	#calculator-results-row #calculator-results table tbody td:empty { display: none; }
	#calculator-results-row #calculator-results table tbody td > a.book { padding-left: 20px; padding-right: 20px; }
	
	#main section#how-much-does-it-cost-section > .row > .col { margin-bottom: 30px; }
	#main section#how-much-does-it-cost-section .col .point-price { padding-top: 30px; padding-right: 30px; margin-bottom: }
	#main section#how-much-does-it-cost-section .col .point-price span.label { display: inline-block; position: static; }
	#main section#how-much-does-it-cost-section .col .point-price span.price { display: inline-block; position: static; line-height: 1; padding-top: 12px; width: 100%; }
	#main section#how-much-does-it-cost-section .col .point-price span.per   { display: inline-block; position: static; line-height: 1; padding-bottom: 20px; }
}

@media (max-width: 979px) and (min-width: 768px) {
	.calculator-btns a.btn { border-radius: 20px; padding: 12px 5px; margin: 0 5px; }
	
	#calculator-results .table thead tr th { padding-top: 20px; }
	#calculator-results .table tbody.content td.book { display: table-cell; width: 80px; padding: 0; }
}

@media (max-width: 767px) {
	.hidden-desktop { display: initial !important; }
	.hidden-phone   { display: none !important; }

	#point-price-row { margin-left: 0; margin-right: 0; }
	#point-price-row div.point-price { height: 130px; margin-bottom: 24px; }
	#point-price-row div.point-price span.price { font-size: 60px; bottom: auto; top: 5px; left: auto; right: 60px; }
	#point-price-row div.point-price span.per { bottom: auto; left: auto; top: 70px; right: 62px; }
	#point-price-row #premium-point-price   { background-position: top -80px left 0; }
	#point-price-row #regular-point-price   { background-position: top -170px left 0; }
	#point-price-row #advantage-point-price { background-position: top -180px left -50px; background-size: 110%; }
	
	#cost-calculator-instructions span.hidden-desktop { display: inline !important; }
	
	.input-daterange div:after { top: 17px; right: 13px; }
	
	#staying-from { display: none; }
	.calculator-btns a.btn { border-radius: 20px; padding: 12px 25px; margin: 0 5px; }
	#calculator-results h4 {margin: 30px 0px 12px 0; text-align: center;}
	#calculator-results .table thead tr th { padding-top: 20px; }
	#calculator-results .table tbody.content td.book { display: table-cell; width: 80px; padding: 0; }
	#calculator-results a.book { display: inline; position: relative; top: 0; padding: 8px 20px; }
	#calculator-results th span.hidden-phone  { display: block !important; }
	#calculator-results th span.visible-phone { display: none !important; }
	
	#hand-with-phone-row .col:first-child { background-position: bottom left calc(50% - 40px); }
	#hand-with-phone-row .point-price.premium   { left: calc(50% + 35px); }
	#hand-with-phone-row .point-price.regular   { left: calc(50% - 285px); }
	#hand-with-phone-row .point-price.advantage { left: calc(50% - 220px); }
	
	section#date-selector-section { margin: 0 -5vw; padding-left: 5vw; padding-right: 5vw; }
	section#date-selector-section div.input-daterange { border-radius: 0; }
	section#date-selector-section #property-id-container { display: block !important; width: 100%; padding: 0 50px 50px; background: #fff; border-radius: 0 0 16px 16px; }

	#calculator-results-row #calculator-results table thead th:empty,
	#calculator-results-row #calculator-results table tbody td:empty { display: table-cell; }
	#calculator-results-row #calculator-results table tbody td > a.book { display: inline-block; padding-left: 12px; padding-right: 12px; }
	#calculator-results-row #calculator-results table tbody td:hover { padding: 18px 0; }
	#calculator-results-row #calculator-results table tbody td.name:hover { padding-top: 18px; padding-bottom: 18px; padding-left: 12px; }

	#calculator-results-row #calculator-results table tbody td.book { padding: 7px 0; }
	#calculator-results-row .calculator-btns { display: none; }

	#main section#how-much-does-it-cost-section .col .point-price > .row > .col-12:first-child { text-align: center; }
	#main section#how-much-does-it-cost-section .col .point-price.premium span.label,
	#main section#how-much-does-it-cost-section .col .point-price.regular span.label { display: inline; position: static; width: 85px; }
	#main section#how-much-does-it-cost-section .col .point-price.advantage span.label { display: inline; position: static; width: 105px; }
	#main section#how-much-does-it-cost-section .col .point-price span.price { display: block; position: static; }
	#main section#how-much-does-it-cost-section .col .point-price span.per   { display: block; position: static; }
}
@media ( max-width: 575px ) {
	#point-price-row div.point-price { height: 130px; margin-bottom: 24px; }
	#point-price-row div.point-price span.price { font-size: 60px; bottom: auto; top: 5px; left: auto; right: 60px; }
	#point-price-row div.point-price span.per { bottom: auto; left: auto; top: 70px; right: 62px; }
	#point-price-row #premium-point-price   { background-position: top -80px left 0; }
	#point-price-row #regular-point-price   { background-position: top -170px left 0; }
	#point-price-row #advantage-point-price { background-position: top -180px left -50px; background-size: 110%; }	

	#hand-with-phone-row .point-price.premium   { left: calc(50% + 12px); transform: scale(0.8); }
	#hand-with-phone-row .point-price.regular   { left: calc(50% - 260px); transform: scale(0.8); }
	#hand-with-phone-row .point-price.advantage { left: calc(50% - 200px); transform: scale(0.8); }
}
@media (max-width: 480px) {
	#point-price-row div.point-price { text-align: center; height: auto; padding: 30px 20px 20px; }
	#point-price-row div.point-price span.label { display: block; position: static; margin: 0 calc(50% - 60px); }
	#point-price-row div.point-price span.price { display: block; position: static; line-height: 1; margin: 16px 0 0; }
	#point-price-row div.point-price span.per   { display: block; position: static; line-height: 1; margin-bottom: 10px; }
	#point-price-row #premium-point-price   { background-position: top 0 left 0; }
	#point-price-row #regular-point-price   { background-position: top 60% left 0px; background-size: 120%; }
	#point-price-row #advantage-point-price { background-position: top 70% right 0; background-size: 110%; }
	
	#calculator-results h4 {font-size: 20px;}
	#calculator-results th { vertical-align: bottom; }
	#calculator-results th span.hidden-phone  { display: none !important; }
	#calculator-results th span.visible-phone { display: block !important; }
	#calculator-results .table tbody.content td.book { display: table-cell; width: 64px; padding: 0; }
	#calculator-results a.book { display: inline; position: relative; top: 0; padding: 8px 12px; }

	#hand-with-phone-row .col:first-child { background-size: 90%; min-height: 100vw; background-position: bottom left calc(50% - 30px); }
	#hand-with-phone-row .point-price.premium   { left: calc(55% - 30px); transform: scale(0.66); top: 5px; }
	#hand-with-phone-row .point-price.regular   { left: calc(45% - 220px); transform: scale(0.66); top: 20%; }
	#hand-with-phone-row .point-price.advantage { left: calc(50% - 160px); transform: scale(0.66); top: 50%; }

	#date-selector-section #ui-datepicker-div,
	#date-selector-section div.input-daterange { padding-left: 20px; padding-right: 20px; }
	section#date-selector-section #property-id-container { padding-left: 20px; padding-right: 20px; padding-bottom: 20px; }
	#date-selector-section div.input-daterange input { font-size: 6vw; }
	#property-id-container .select2-container--dvcrequest-grey { margin-bottom: 0; }
}
@media (max-width: 400px) {
	#calculator-results .table tbody.content td.book { padding-right: 2px; width: 58px; }
	#calculator-results a.book { display: inline; position: relative; top: 0; padding: 8px; }
	#calculator-results .table th.name, #calculator-results .table td.name { padding-right: 0; padding-left: 8px; }
	
	#hand-with-phone-row .point-price.premium   { left: calc(60% - 65px); transform: scale(0.52); top: 0; }
	#hand-with-phone-row .point-price.regular   { left: calc(46% - 205px); transform: scale(0.52); top: 15%; }
	#hand-with-phone-row .point-price.advantage { left: calc(45% - 150px); transform: scale(0.52); top: 45%; }
}
.datepicker-switch:after {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: 3px;
	margin-left: 3px;
	border-top: 4px solid #000;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: " ";
}