/*-----------------------------------------------------

    Title :  Fotosold
    Usage :  Order pages (v2)
    Edited:  2025-05-17

-------------------------------------------------------

    1. sticky footer
    2. Listing Location
    3. Choose Your Services
    4. Photography
    5. Video and 3D Tours
    6. Floor Plan
    7. Drone and Twilight
    8. Listing Information
    9. Scheduling
   10. Order Summary
   11. responsive ( 991px)
   12. responsive ( 412px)

-------------------------------------------------------*/



/*  1. sticky footer
-------------------------------------------------------*/

.footer-order {
	position: sticky;
	bottom: 0;
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 8px;
	margin-top: 36px;
	padding-inline: var(--padding-inline-center-content);
	padding-bottom: 1px;
	height: 100px;
	background-color: #fff;
	border-top: 1px solid transparent;
	transition: border-top-color 200ms;
	}

.ui-dialog .footer-order {
	position: static;
	margin-top: 0;
	padding-inline: 40px;
	width: 100%;
	border-radius: 0 0 15px 15px;
	}

.footer-order.is-sticky,
.ui-dialog .footer-order {
	border-top-color: #D0D6DF;
	}

.footer-order ol {
	display: flex;
	column-gap: 8px;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	}

.footer-order ol li {
	display: grid;
	place-content: center;
	padding-top: 1px;
	width: 40px;
	height: 40px;
	background-color: var(--color-primary);
	border-radius: 50%;
	}

.footer-order ol [aria-current="step"] ~ li {
	color: #567383;
	background-color: #F4F4F4;
	}

.footer-order :has(+ button:not(.btn)) + button {
	position: absolute;
	display: flex;
	align-items: center;
	column-gap: 11px;
	padding: 8px 14px;
	min-height: 52px;
	color: #233040;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.5px;
	background-color: transparent;
	border-width: 0;
	border-radius: 6px;
	transition: background-color 200ms;
	}

.footer-order :has(+ button:not(.btn)) + button:is(:hover, :focus) {
	background-color: #E4EAF6;
	}

.footer-order button .ico-chevron-down {
	width: 12px;
	height: 8px;
	fill: #567383;
	}

.footer-order :is(:not(.btn) + :last-child, .back).btn {
	margin-left: auto;
	}

[aria-describedby="brief-summary"] > .w {
	--padding-wrapper: 40px;
	padding: var(--padding-wrapper) var(--padding-wrapper) 0;
	max-width: 548px;
	font-weight: 400;
	}

[aria-describedby="brief-summary"] .ui-dialog-titlebar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 20px;
	margin-bottom: 40px;
	padding-top: 1px;
	}

[aria-describedby="brief-summary"] .ui-dialog-title {
	color: #233040;
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 0.5px;
	}

.modal-close-button-v2 {
	width: 25px;
	height: 25px;
	background-color: transparent;
	border-width: 0;
	stroke: #3E4650;
	}

[aria-describedby="brief-summary"] .modal-close-button-v2 {
	margin-right: -1px;
	}

.modal-close-button-v2 .ico-xmark-lg {
	padding-inline: 5px;
	width: 100%;
	height: 100%;
	stroke: #3E4650;
	}

.modal-close-button-v2:is(:hover, :focus) .ico-xmark-lg {
	stroke: var(--color-primary);
	}

#brief-summary h2 {
	color: #233040;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.5px;
	font-family: "Open Sans", sans-serif;
	}

:where(#brief-summary, [aria-labelledby="summary-package-legend"]) ul {
	margin-block: 16px;
	}

:is(#brief-summary, [aria-labelledby="summary-package-legend"]) li,
[aria-labelledby="summary-total-legend"]                      > div {
	display: flex;
	align-items: flex-start;
	color: #233040;
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: 0.5px;
	}

#brief-summary li + li {
	margin-top: 14px;
	}

:is(#brief-summary, [aria-labelledby="summary-package-legend"]) li  p + p,
[aria-labelledby="summary-total-legend"]                      > div p + p {
	margin-top: -3px;
	margin-left: auto;
	padding-left: 30px;
	font-size: 20px;
	}

:is(#brief-summary, [aria-labelledby="summary-package-legend"]) li  p + p b,
[aria-labelledby="summary-total-legend"]                      > div p + p b {
	font-weight: 600;
	}

:is(#brief-summary, [aria-labelledby="summary-package-legend"]) li button {
	margin-inline: 11px 3px;
	background-color: transparent;
	border-width: 0;
	}

:is(#brief-summary, [aria-labelledby="summary-package-legend"]) li button .ico-trash-can {
	width: 18px;
	height: 20px;
	stroke: #3E4650;
	}

:is(#brief-summary, [aria-labelledby="summary-package-legend"]) li button:is(:hover, :focus) .ico-trash-can {
	stroke: var(--color-primary);
	}

    #brief-summary                                              ul + button, /* Add More Services */
:is(#brief-summary, [aria-labelledby="summary-package-legend"]) ul + a {
	color: var(--color-primary);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.5px;
	text-decoration-line: none;
	background-color: transparent;
	border-width: 0;
	transition: color 200ms;
	}

    #brief-summary                                              ul + button:is(:hover, :focus),
:is(#brief-summary, [aria-labelledby="summary-package-legend"]) ul + a:is(:hover, :focus) {
	color: var(--color-link-hover-static);
	}

#brief-summary .footer-order-modal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 8px;
	margin-top: 41px;
	padding-bottom: 1px;
	margin-inline: calc(var(--padding-wrapper) * -1);
	padding-inline: var(--padding-wrapper);
	height: 84px;
	color: #233040;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.5px;
	border-top: 1px solid #D0D6DF;
	}

#brief-summary .footer-order-modal b {
	font-weight: 700;
	font-size: 24px;
	}



/*  2. Listing Location
-------------------------------------------------------*/

#lis-loc {
	margin-inline: auto;
	padding-top: 44px;
	width: var(--width-center-section);
	}

#lis-loc h1 {
	color: #233040;
	font-weight: 600;
	font-size: 24px;
	font-family: "Open Sans", sans-serif;
	letter-spacing: 0.5px;
	}

#lis-loc .w {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 39px;
	}

#lis-loc form {
	position: absolute;
	top: 48px;
	display: flex;
	align-items: center;
	width: min(750px, 100%);
	z-index: 3;
	}

#lis-loc form .ico-magnifying-glass {
	position: absolute;
	left: 17px;
	width: 18px;
	height: 18px;
	stroke: #677382;
	}

#lis-loc form input {
	padding-inline: 52px;
	width: 100%;
	height: 56px;
	color: #233040;
	font-weight: 600;
	font-size: 16px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 8px;
	transition: border-color 200ms;
	}

#lis-loc form input::-webkit-input-placeholder {
	color: #677382;
	font-weight: 400;
	}

#lis-loc form input:focus {
	border-color: var(--color-primary);
	}

#lis-loc form button {
	position: absolute;
	right: 16px;
	display: grid;
	place-content: center;
	width: 32px;
	height: 32px;
	background-color: transparent;
	border-width: 0;
	border-radius: 50%;
	transition: background-color 200ms;
	}

#lis-loc form button:is(:hover, :focus, .active) {
	background-color: #E4EAF6;
	}

#lis-loc form :has(+ button > .ico-xmark) + button { /* Clear */
	display: none;
	}

#lis-loc form .ico-microphone {
	margin-top: 1px;
	padding-inline: 9px;
	width: 100%;
	height: 100%;
	stroke: #677382;
	}

#lis-loc form .ico-xmark {
	padding-inline: 10px;
	width: 100%;
	height: 100%;
	stroke: #677382;
	}

#lis-loc form .datalist {
	position: absolute;
	top: 60px;
	left: 0;
	display: none;
	width: 100%;
	overflow: hidden;
	color: #1D2132;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.54px;
	white-space: nowrap;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.16);
	}

#lis-loc form .option {
	position: relative;
	padding-top: 12px;
	padding-inline: 60px 27px;
	height: 39px;
	overflow: hidden;
	cursor: pointer;
	text-overflow: ellipsis;
	}

#lis-loc form :is(:hover, .highlight).option {
	background-color: #F4F8FF;
	}

#lis-loc form .option + .option {
	height: 40px;
	border-top: 1px solid #d0d6df;
	}

#lis-loc form .ico-location-dot {
	position: absolute;
	top: 10px;
	left: 27px;
	width: 14px;
	height: 19px;
	stroke: #567383;
	}

#lis-loc form .option b {
	font-weight: 600;
	}

#map {
	display: flex;
	height: 500px;
	overflow: hidden;
	border-radius: 12px;
	}



/*  3. Choose Your Services
-------------------------------------------------------*/

#cys {
	margin-inline: auto;
	padding-top: 44px;
	width: var(--width-center-section);
	}

#cys h1 {
	color: #233040;
	font-weight: 600;
	font-size: 24px;
	font-family: "Open Sans", sans-serif;
	letter-spacing: 0.5px;
	}

#cys header p {
	margin-top: 12px;
	color: #3E4650;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: 0.5px;
	}

#cys ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 30px;
	margin-top: 36px;
	color: #233040;
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 0.5px;
	}

#cys li a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding-bottom: 26px;
	height: 300px;
	overflow: hidden;
	cursor: pointer;
	text-align: center;
	text-decoration-line: none;
	border: 1px solid #D0D6DF;
	border-radius: 8px;
	transition-property: background-color, border-color;
	transition-duration: 200ms;
	}

#cys li:has(> a > b) > a {
	padding-bottom: 25px;
	background-color: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.05) !important;
	border-width: 2px;
	border-color: var(--color-primary);
	}

#cys li a:is(:hover, :focus) {
	background-color: #F4F8FF;
	}

#cys li a svg {
	position: absolute;
	top: calc(50% - 78px);
	left: calc(50% - 60px);
	}

#cys li a b {
font-weight: inherit;
}

[aria-describedby="vat-rules"] > .w {
	padding: 40px;
	max-width: 548px;
	color: #233040;
	font-weight: 400;
	letter-spacing: 0.5px;
	}

[aria-describedby="vat-rules"] .ui-dialog-titlebar {
	display: none;
	}

#vat-rules {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	font-size: 16px;
	line-height: 1.5;
	}

#vat-rules .btn {
	margin-top: 30px;
	}

#vat-rules .w {
	position: relative;
	margin-top: 30px;
	}

#vat-rules .w input {
	position: absolute;
	left: 0;
	opacity: 0;
	margin-top: 1px;
	width: 22px;
	height: 22px;
	pointer-events: none;
	}

#vat-rules .w label {
	padding-left: 35px;
	cursor: pointer;
	font-size: 16px;
	}

#vat-rules .w label .ico-form-checkbox {
	position: absolute;
	left: 0;
	margin-top: 1px;
	}
		
[aria-describedby="coming-soon"] > .w {
	padding: 40px;
	max-width: 650px;
	font-weight: 400;
	}

[aria-describedby="coming-soon"] .ui-dialog-titlebar::before {
	content: "";
	display: block;
	margin-inline: auto;
	width: 216px;
	height: 32px;
	background: 0 0 / 100% 100% no-repeat url(../../img/logo.svg?ver=25072133);
	}

[aria-describedby="coming-soon"] .ui-dialog-title {
	display: block;
	margin-top: 41px;
	color: #233040;
	font-weight: 700;
	font-size: 40px;
	letter-spacing: 0.5px;
	text-align: center;
	}

[aria-describedby="coming-soon"] .modal-close-button-v2 {
	position: absolute;
	top: 39px;
	right: 39px;
	}

#coming-soon p {
	margin-top: 40px;
	color: #233040;
	font-weight: 600;
	font-size: 20px;
	text-align: center;
	letter-spacing: 0.5px;
	}

#coming-soon p + p {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: 0.5px;
	}

#coming-soon form {
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
	margin-top: 18px;
	}

#coming-soon form label {
	margin-bottom: 8px;
	width: 100%;
	color: #3E4650;
	font-size: 14px;
	}

#coming-soon form .single-line {
	flex-grow: 1;
	}

#coming-soon form .single-line input {
	padding-inline: 15px;
	width: 100%;
	height: 100%;
	font-size: 14px;
	border: 1px solid #D0D6DF;
	border-radius: 6px;
	}

#coming-soon form .btn {
	min-width: 117px;
	}

[aria-describedby="continue-add"] > .w {
	max-width: 548px;
	}

[aria-describedby="continue-add"] .ui-dialog-titlebar {
	display: none;
	}

#continue-add {
	display: grid !important;
	grid-template-columns: 1fr;
	row-gap: 8px;
	padding: 40px;
	}



/*  4. Photography
-------------------------------------------------------*/

#photog {
	display: flex;
	justify-content: space-between;
	margin-inline: auto;
	padding-top: 56px;
	width: var(--width-center-section);
	}

#photog h1 {
	position: absolute;
	left: -5000px;
	}

.tier {
	--color-package-label: #233040;
	position: relative;
	padding: 24px 22px 29px;
	width: calc((100% - 60px) / 3);
	text-align: center;
	background-color: #F4F8FB;
	border: 2px solid transparent;
	border-top-width: 0;
	border-radius: 10px;
	transition-property: background-color, border-color;
	transition-duration: 200ms;
	}

.tier-1 {
	--color-tier: #4E9B4C;
	}

.tier-2 {
	--color-tier: #F9A13A;
	}

.tier-3 {
	--color-tier: #6531AA;
	}

.tier::before {
	content: "";
	position: absolute;
	top: -16px;
	left: -2px;
	z-index: -1;
	width: calc(100% + 4px);
	height: 30px;
	background-color: var(--color-tier, var(--color-primary));
	border-radius: 10px 10px 0 0;
	}

:where(.tier) h2 {
	padding-top: 6px;
	color: #233040;
	font-size: 36px;
	font-family: "Open Sans", sans-serif;
	letter-spacing: 0.5px;
	}

.tier p {
	margin-top: 30px;
	color: #1D2132;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	}

.tier h2.package-label + p {
	margin-top: 25px;
	color: #233040;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.5px;
	}

.tier strong {
	display: block;
	margin-block: 28px 27px;
	color: #233040;
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 0.5px;
	text-align: center;
	}

.tier h2.package-label ~ strong {
	margin-block: 8px 23px;
	font-size: 20px;
	}

.tier .btn {
	width: 100%;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0;
	}

:where(.tier) :focus + :not(.s1).btn {
	background-color: var(--background-color-btn-s5-hover-state);
	}

.tier :focus + :not(:hover).s1.btn {
	outline: 2px solid #000;
	outline-offset: 1px;
	}

.tier ul {
	margin-top: 25px;
	color: #1D2132;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
	}

.tier h2.package-label ~ ul {
	margin-top: 26px;
	padding-bottom: 3px;
	font-size: 14px;
	line-height: 1.45;
	}

.tier li {
	position: relative;
	padding-inline: 32px;
	}

.tier li + li {
	margin-top: 16px;
	}

.tier h2.package-label ~ ul li + li {
	margin-top: 12px;
	}

.ico-circle-check-with-bg-color {
	width: 24px;
	height: 24px;
	stroke: var(--color-tier, #619955);
	}

.tier li .ico {
	position: absolute;
	top: 0;
	left: 0;
	}

.tier h2.package-label ~ ul li .ico {
	top: -2px;
	}

.tier:not(:has(> :checked)) li .ico-circle-xmark-with-bg-color {
	--color-tier: #ED4C5C;
	}

.tier li:has(> button > .ico-circle-question-alt) > button {
	--color-question-mark: #677382;
	--background-color-circle: transparent;
	--border-color-circle: #677382;
	position: absolute;
	top: 1px;
	right: 1px;
	display: block;
	width: 22px;
	height: 22px;
	cursor: help;
	background-color: transparent;
	border-width: 0;
	border-radius: 50%;
	}

:is(.tier, .package) li:has(> button > .ico-circle-question-alt) > button:is(:hover, :focus) {
	--color-question-mark: #fff;
	--background-color-circle: #233040;
	--border-color-circle: #233040;
	}

:is(.tier, .package) li button .ico-circle-question-alt {
	width: 100%;
	height: 100%;
	}

.order-ui-tooltip {
	position: absolute;
	z-index: 50;
	padding: 12px;
	width: 245px;
	pointer-events: none;
	color: #fff;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45;
	background-color: #233040;
	border-radius: 6px;
	}

.order-ui-tooltip li {
	position: relative;
	padding-left: 13px;
	}

.order-ui-tooltip li + li {
	margin-top: 8px;
	}

.order-ui-tooltip li::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 6px;
	height: 6px;
	background-color: #fff;
	border-radius: 50%;
	}

.order-ui-tooltip::after {
	content: "";
	position: absolute;
	top: -8px;
	right: 10px;
	border-style: solid;
	border-width: 0 9px 10px 9px;
	border-color: transparent transparent #233040 transparent;
	}

.order-ui-tooltip.for-add-on-option::after {
	right: calc(50% - 9px);
	}

.order-ui-tooltip.right::after {
	right: auto;
	left: 10px;
	}

.order-ui-tooltip.bottom::after {
	top: auto;
	bottom: -8px;
	border-width: 10px 9px 0 9px;
	border-color: #233040 transparent transparent transparent;
	}

.ui-helper-hidden-accessible {
	position: absolute;
	top: -1px;
	left: -5000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	}

:is(.tier, .package) li:has(> button > .ico-circle-question-alt) ul {
	display: none;
	}

[aria-describedby^="modal-of-tier"] > .w {
	z-index: 1;
	max-width: 945px;
	font-weight: 400;
	}

[aria-describedby^="modal-of-tier"] .ui-dialog-titlebar {
	display: none;
	}

#modal-of-tier .scrollable {
	padding: 40px;
	max-height: 650px;
	overflow: auto;
	}

#modal-of-tier-heading {
	display: block;
	padding-top: 1px;
	color: #233040;
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 0.5px;
	font-family: "Open Sans", sans-serif;
	}

#modal-of-tier-heading + p {
	margin-top: 8px;
	width: 100%;
	color: #233040;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: 0.5px;
	}

#packages form {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 24px;
	margin-top: 56px;
	}

.package {
	--color-package-label: #233040;
	position: relative;
	padding: 24px 14px 22px;
	width: calc((100% - 48px) / 3);
	background-color: #F4F8FB;
	border: 2px solid transparent;
	border-top-width: 0;
	border-radius: 10px;
	transition-property: background-color, border-color;
	transition-duration: 200ms;
	}

:has(> :checked).package,
:has(> :checked).tier {
	--color-tier: var(--color-primary);
	--color-package-label: var(--color-primary);
	background-color: #FEF7F5;
	border-color: var(--color-primary);
	}

.package::before {
	content: "";
	position: absolute;
	top: -16px;
	left: -2px;
	z-index: -1;
	width: calc(100% + 4px);
	height: 30px;
	background-color: var(--color-tier);
	border-radius: 10px 10px 0 0;
	transition: background-color 200ms;
	}

.package header {
	display: flex;
	flex-direction: column;
	align-items: center;
	}

.package-label {
	display: inline-flex;
	align-items: center;
	padding: 7px 12px 5px;
	min-height: 30px;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background-color: var(--color-package-label);
	border-radius: 4px;
	transition: background-color 200ms;
	}

.package header h3,
.package header h2 {
	margin-top: 28px;
	color: #233040;
	font-size: 20px;
	font-family: "Open Sans", sans-serif;
	letter-spacing: 0.5px;
	}

.package > strong {
	display: block;
	margin-block: 11px 23px;
	color: #233040;
	font-weight: 600;
	font-size: 20px;
	text-align: center;
	letter-spacing: 0.5px;
	}

:is(.package, .tier) input {
	position: absolute;
	left: calc(50% - 22px);
	opacity: 0;
	width: 44px;
	height: 44px;
	pointer-events: none;
	}

.package .btn {
	width: 100%;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0;
	}

:where(.package) :focus + :not(.s1).btn {
	background-color: var(--background-color-btn-s5-hover-state);
	}

.package :focus + :not(:hover).s1.btn {
	outline: 2px solid #000;
	outline-offset: 1px;
	}

:is(.package, .tier) [data-nonselected-text].btn::before {
	content: attr(data-nonselected-text);
	}

:is(.package, .tier) :checked + [data-nonselected-text].btn::before {
	content: attr(data-selected-text);
	}

.package > ul {
	margin-top: 25px;
	color: #1D2132;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
	}

.package > ul > li {
	position: relative;
	padding-left: 32px;
	}

.package > ul > li:has(> ul) {
	padding-right: 32px;
	}

.package > ul > li + li {
	margin-top: 10px;
	}

:has(> .package > ul > li > [aria-expanded]) > .package > ul > li + li {
	margin-top: 18px;
	}

.package li::after {
	content: ". ";
	position: absolute;
	left: -5000px;
	}

.package li ul {
	margin-inline: 8px -32px;
	}

.package li ul::before {
	content: "";
	display: block;
	height: 9px;
	}

.package li ul li + li {
	margin-top: 6px;
	}

.package li > .ico {
	position: absolute;
	top: -1px;
	left: 0;
	}

.ico-circle-xmark-with-bg-color {
	width: 24px;
	height: 24px;
	stroke: var(--color-tier);
	}

.package:not(:has(> :checked)) li .ico-circle-xmark-with-bg-color {
	--color-tier: #ED4C5C;
	}

.package li:has(> button > .ico-chevron-down) > button {
	position: absolute;
	top: -1px;
	right: 0;
	display: block;
	width: 24px;
	height: 24px;
	overflow: hidden;
	background-color: transparent;
	border-width: 0;
	border-radius: 50%;
	}

.package li button .ico-chevron-down {
	padding: 8px 6px;
	width: 100%;
	height: 100%;
	fill: #567383;
	transition: transform 200ms;
	}

.package li button:is(:hover, :focus) .ico-chevron-down {
	fill: var(--color-primary);
	}

.package li button[aria-expanded="true"] .ico-chevron-down {
	transform: rotate(180deg);
	}

.package li:has(> button > .ico-circle-question-alt) > button {
	--color-question-mark: #677382;
	--background-color-circle: transparent;
	--border-color-circle: #677382;
	position: absolute;
	top: 1px;
	right: 1px;
	display: block;
	width: 22px;
	height: 22px;
	cursor: help;
	background-color: transparent;
	border-width: 0;
	border-radius: 50%;
	}

:is(#add-on, #photog-floor-plan, #floor-plan) header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 39px;
	padding-top: 1px;
	letter-spacing: 0.5px;
	}


	#floor-plan header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 39px;
		padding-top: 1px;
		letter-spacing: 0.5px;
	}

:is(#add-on, #photog-floor-plan, #floor-plan) #modal-of-tier-heading {
	padding-top: 0;
	}

#add-on                          header button,
:is(#add-on, #photog-floor-plan, #floor-plan) header a {
	color: #567383;
	font-weight: 700;
	font-size: 16px;
	text-decoration-line: none;
	letter-spacing: 0.5px;
	background-color: transparent;
	border-width: 0;
	transition: color 200ms;
	}

	header button,
	#floor-plan header a {
		color: #567383;
		font-weight: 700;
		font-size: 16px;
		text-decoration: none;
		letter-spacing: 0.5px;
		background-color: transparent;
		border: none;
		transition: color 200ms ease;
		cursor: pointer;
	}

#add-on                          header button:is(:hover, :focus),
:is(#add-on, #photog-floor-plan, #floor-plan) header a:is(:hover, :focus) {
	color: var(--color-primary);
	}

.add-on {
	position: relative;
	clear: both;
	padding: 22px 83px 22px 62px;
	background-color: #F4F8FB;
	border: 2px solid transparent;
	border-radius: 6px;
	font-weight: 400;
	transition-property: background-color, border-color;
	transition-duration: 200ms;
	}

:has(> :checked).add-on {
	background-color: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.05);
	border-color: var(--color-primary);
	}

.add-on + .add-on {
	margin-top: 16px;
	}

.add-on input {
	position: absolute;
	opacity: 0;
	margin-top: 1px;
	margin-left: -39px;
	width: 22px;
	height: 22px;
	cursor: pointer;
	}

.add-on label {
	cursor: pointer;
	color: #233040;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.5px;
	}
/*
.add-on label::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	z-index: 1;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	}
*/
.add-on label {
	cursor: pointer;
	color: #233040;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.5px;
	}

.add-on label button {
	--color-question-mark: #677382;
	--background-color-circle: transparent;
	--border-color-circle: #677382;
	position: relative;
	top: -1px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 6px;
	width: 22px;
	height: 22px;
	cursor: help;
	background-color: transparent;
	border-width: 0;
	border-radius: 50%;
	}

.add-on label button:is(:hover, :focus) {
	--color-question-mark: #fff;
	--background-color-circle: #233040;
	--border-color-circle: #233040;
	}

.add-on label button .ico-circle-question-alt {
	width: 100%;
	height: 100%;
	}

.add-on label small {
	display: none;
	}

.ico-form-checkbox {
	--color-check: transparent;
	--background-color-square: transparent;
	--border-color-square: #677382;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	}

.add-on label .ico-form-checkbox {
	position: absolute;
	margin-top: 1px;
	margin-left: -39px;
	}

:is(:focus + label, label:hover) .ico-form-checkbox {
	--border-color-square: var(--color-primary);
	}

:focus + label:not(:hover) .ico-form-checkbox {
	outline: 2px solid #000;
	outline-offset: 1px;
	}

:checked + label .ico-form-checkbox {
	--color-check: #fff;
	--background-color-square: var(--color-primary);
	--border-color-square: var(--color-primary);
	}

.add-on p::after {
	content: ". ";
	position: absolute;
	left: -5000px;
	}

.add-on p b { /* price */
	position: absolute;
	top: 23px;
	right: 22px;
	color: #233040;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.5px;
	}

.add-on ul {
	margin-top: 20px;
	color: #1D2132;
	font-size: 14px;
	line-height: 1.6;
	}

#add-on-white-glove-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px 20px;
	max-width: 688px;
	}

.add-on li {
	position: relative;
	padding-left: 32px;
	}

.add-on li + li {
	margin-top: 10px;
	}

#add-on-white-glove-list li + li {
	margin-top: 0;
	}

.add-on li .ico-circle-check-with-bg-color {
	position: absolute;
	top: -1px;
	left: 0;
	}

.add-on li::after {
	content: ". ";
	position: absolute;
	left: -5000px;
	}

#photog-floor-plan form {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	}

.floor-plan {
	position: relative;
	overflow: hidden;
	font-weight: 400;
	}

#photog-floor-plan .floor-plan {
	width: calc((100% - 16px) / 2);
	}

#photog-floor-plan :has(> .w > [id$="-free"]).floor-plan {
	margin-right: 30px;
	}

.floor-plan .w {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 19px 99px 21px 70px;
	min-height: 118px;
	background-color: #F4F8FB;
	border: 2px solid transparent;
	border-radius: 6px;
	transition-property: background-color, border-color;
	transition-duration: 200ms;
	}

.floor-plan :has(> :checked).w {
	background-color: #FEF7F5;
	border-color: var(--color-primary);
	}

.floor-plan .w input {
	position: absolute;
	top: calc(50% - 11px);
	left: 24px;
	opacity: 0;
	width: 22px;
	height: 22px;
	pointer-events: none;
	}

.floor-plan .w label .ico-form-checkbox {
	position: absolute;
	top: calc(50% - 11px);
	left: 23px;
	}

.floor-plan .w label {
	cursor: pointer;
	color: #1D2132;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.25;
	}

.floor-plan .w label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: calc(100% + 300px);
	}

.floor-plan .w label + p { /* price */
	position: absolute;
	right: 22px;
	margin-top: 4px;
	color: #233040;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.5px;
	}

.floor-plan .w label + p + p { /* detail */
	margin-top: 10px;
	color: #1D2132;
	font-size: 14px;
	line-height: 1.25;
	}

.floor-plan .w + p { /* save */
	margin-top: -8px;
	padding: 18px 16px 10px;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.25;
	background-color: var(--color-primary);
	border-radius: 0 0 6px 6px;
	}

.floor-plan p::after {
	content: ". ";
	position: absolute;
	left: -5000px;
	}

[aria-labelledby="label-unlock-discount-modal"] > .w {
	max-width: 945px;
	overflow: hidden;
	background-color: transparent;
	}

[aria-labelledby="label-unlock-discount-modal"] .ui-dialog-titlebar {
	display: none;
	}

#unlock-discount {
	display: flex !important;
	}

#unlock-discount picture {
	flex-shrink: 0;
	display: flex;
	width: 43.92%;
	}

#unlock-discount picture img {
	width: 100%;
	object-fit: cover;
	}

#unlock-discount .w {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40px;
	text-align: center;
	background-color: #fff;
	}

#unlock-discount .w::before {
	content: "";
	width: 216px;
	height: 32px;
	background: 0 0 / 100% 100% no-repeat url(../../img/logo.svg);
	}

#unlock-discount h2 {
	margin-top: 48px;
	font-size: 56px;
	font-family: "Open Sans", sans-serif;
	}

#unlock-discount h2 strong {
	color: var(--color-primary);
	}

#unlock-discount p {
	margin-top: 25px;
	color: #233040;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	}

#unlock-discount .btn {
	margin-top: 47px;
	width: 100%;
	}

#unlock-discount .btn + .btn {
	margin-top: 9px;
	width: 100%;
	}



/*  5. Video and 3D Tours
-------------------------------------------------------*/

#video,
#tours-3d {
	margin-inline: auto;
	padding-top: 56px;
	width: var(--width-center-section);
	}

.js #video {
	opacity: 0;
	transition: opacity 200ms;
	}

.js #video.js {
	opacity: 1;
	}

#video h1,
#video-tiers-legend,
#tours-3d h1 {
	position: absolute;
	left: -5000px;
	}

#video fieldset,
#tours-3d fieldset{
	display: flex;
	justify-content: space-between;
	}

#video.js .tier p {
	position: relative;
	}

#video.js .tier p .orig-text {
	position: absolute;
	inset: 0;
	}

#video.js .tier p .placeholder {
	visibility: hidden;
	}

#video .tier strong {
	font-weight: 700;
	font-size: 28px;
	}

#video fieldset + fieldset {
	display: block;
	margin-top: 24px;
	padding-top: 12px;
	}

#video-add-ons-legend {
	display: block;
	margin-bottom: 18px;
	width: 100%;
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 0.5px;
	}

	[aria-describedby="personal-agent-info-incomplete"] > .w {
		padding: 47px 40px 24px;
		max-width: 548px;
		font-weight: 400;
		}
	
	[aria-describedby="personal-agent-info-incomplete"] .ui-dialog-titlebar {
		position: absolute;
		left: -5000px;
		}
	
	[aria-describedby="personal-agent-info-incomplete"] .ui-dialog-titlebar-close {
		display: none;
		}
	
	#personal-agent-info-incomplete {
		display: flex !important;
		flex-wrap: wrap;
		column-gap: 8px;
		justify-content: center;
		}
	
	#personal-agent-info-incomplete p {
		margin-top: 31px;
		width: 100%;
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: 0.5px;
		}
	
	#personal-agent-info-incomplete ul {
		column-count: 2;
		column-gap: 13px;
		margin-block: 14px 30px;
		padding-left: 3px;
		width: 100%;
		font-size: 14px;
		line-height: 1.45;
		}
	
	#personal-agent-info-incomplete li {
		position: relative;
		margin-bottom: 12px;
		padding-left: 29px;
		}
	
	#personal-agent-info-incomplete ul .ico-xmark-thick {
		position: absolute;
		top: 0.2em;
		left: 2px;
		width: 14px;
		height: 14px;
		stroke: #ED4C5C;
		}
	
	#personal-agent-info-incomplete ul .ico-check-thick {
		position: absolute;
		top: 0.2em;
		left: 0;
		width: 16px;
		height: 14px;
		stroke: #8ECC53;
		}
	
	#personal-agent-info-incomplete .btn {
		width: calc((100% - 8px) / 2);
		}
	

/*  6. Floor Plan
-------------------------------------------------------*/

#floor-plan {
	margin-inline: auto;
	padding-top: 57px;
	width: var(--width-center-section);
	}

#floor-plan .header {
		font-size: 25px;
		background: none;
	}

#floor-plan h1 {
	position: absolute;
	left: -5000px;
	}

#floor-plan form {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	}

#floor-plan .floor-plan {
	width: calc((100% - 30px) / 2);
	}

#floor-plan :has(> .w > [id$="-free"]).floor-plan {
	margin-right: 50px;
	}

#floor-plan .floor-plan .w {
	padding-right: 120px;
	min-height: 98px;
	}

#floor-plan .floor-plan .w label + p { /* price */
	font-size: 32px;
	}



/*  7. Drone and Twilight
-------------------------------------------------------*/

#drone,
#twilight {
	margin-inline: auto;
	padding-top: 57px;
	width: var(--width-center-section);
	}

:is(#drone, #twilight) h1 {
	position: absolute;
	left: -5000px;
	}

:is(#drone, #twilight) form {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	}



/*  8. Listing Information
-------------------------------------------------------*/

#list-info {
	margin-inline: auto;
	padding-top: 40px;
	width: var(--width-center-section);
	}

#list-info h1 {
	position: absolute;
	left: -5000px;
	}

#list-info fieldset {
	display: flex;
	flex-direction: column;
	padding: 40px;
	font-weight: 400;
	background-color: #F4F8FB;
	border-radius: 12px;
	}

#list-info fieldset + fieldset {
	margin-top: 32px;
	}

#list-info :has(+ [aria-labelledby="list-info-list-info-legend"]) + fieldset {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 30px;
	}

:where(#list-info) fieldset > span {
	display: block;
	padding-bottom: 16px;
	width: 100%;
	color: #233040;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.5;
	letter-spacing: 0.5px;
	}

#list-info-list-info-legend {
	padding-bottom: 2px;
	}

:is([aria-labelledby="list-info-option-legend"], [aria-labelledby="list-info-pole-images-legend"]) div {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	}

:is([aria-labelledby="list-info-option-legend"], [aria-labelledby="list-info-pole-images-legend"]) div + div {
	margin-top: 16px;
	}

#list-info fieldset [type="radio"] {
	position: absolute;
	top: calc(50% - 11px);
	opacity: 0;
	margin-left: 1px;
	width: 22px;
	height: 22px;
	}

#list-info fieldset [type="radio"] + label {
	position: relative;
	padding-left: 40px;
	cursor: pointer;
	color: #233040;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.5px;
	}

#list-info fieldset [type="radio"] + label b::before {
	content: "";
	position: relative;
	top: -1px;
	display: inline-block;
	vertical-align: middle;
	margin-inline: 4px 8px;
	width: 4px;
	height: 4px;
	background-color: #233040;
	border-radius: 50%;
	clip-path: circle(50%);
	}


.ico-form-radio {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	fill: transparent;
	stroke: #677382;
	transition-property: fill, stroke;
	transition-duration: 200ms;
	}

#list-info fieldset label .ico-form-radio {
	position: absolute;
	top: calc(50% - 11px);
	left: 1px;
	}

label:hover .ico-form-radio {
	stroke: var(--color-primary);
	}

:focus + label:not(:hover) .ico-form-radio {
	outline: 2px solid #000;
	outline-offset: 1px;
	}

:checked + label .ico-form-radio {
	fill: var(--color-primary);
	stroke: var(--color-primary);
	}

[aria-labelledby="list-info-option-legend"] p small {
	display: block;
	margin-block: 32px -20px;
	color: #233040;
	font-size: 14px;
	line-height: 1.45;
	text-align: right;
	letter-spacing: 0.5px;
	}

[aria-labelledby="list-info-list-info-legend"] > div {
	width: calc((100% - 30px) / 2);
	}

[aria-labelledby="list-info-list-info-legend"] :has(+ div > .single-line > #li-alarm, + div > .single-line > #li-lockbox, + div > .single-line > #li-lockbox-loc) + div {
	width: calc((100% - 60px) / 3);
	}

[aria-labelledby="list-info-list-info-legend"] :nth-last-of-type(2) + div {
	width: 100%;
	}

[aria-labelledby="list-info-list-info-legend"] label {
	color: #3E4650;
	font-size: 14px;
	line-height: 1.363;
	}

[aria-labelledby="list-info-list-info-legend"] label span::before {
	content: "*";
	color: #ED4C5C;
	font-size: 14px;
	}

[aria-labelledby="list-info-list-info-legend"] .single-line {
	display: block;
	margin-top: 8px;
	}

[aria-labelledby="list-info-list-info-legend"] .single-line input {
	padding-inline: 16px;
	width: 100%;
	height: 44px;
	font-size: 14px;
	background-color: #fff;
	border-width: 0;
	border-bottom: 1px solid #E9EBEE;
	border-radius: 6px;
	}

[aria-labelledby="list-info-list-info-legend"] textarea {
	margin-top: 8px;
	padding: 10px 15px;
	width: 100%;
	min-height: 164px;
	resize: vertical;
	font-size: 14px;
	line-height: 1.6;
	background-color: #fff;
	border-width: 0;
	border-bottom: 1px solid #E9EBEE;
	border-radius: 6px;
	}



/*  9. Scheduling
-------------------------------------------------------*/

#scheduling {
	margin-inline: auto;
	padding-top: 40px;
	width: var(--width-center-section);
	font-weight: 400;
	}

#scheduling h1 {
	position: absolute;
	left: -5000px;
	}

#scheduling form {
	display: grid;
	grid-template-areas: "your-photographer  . select-time"
	                     "datepicker         . select-time"
	                     "more-photographers . select-time";
	grid-template-columns: 65.79% 30px auto;
	}

fieldset[aria-labelledby="scheduling-photographer-legend"] {
	grid-area: your-photographer;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 7px 10px;
	}

:has(+ [aria-labelledby="scheduling-date-legend"]) + fieldset {
	grid-area: datepicker;
	margin-top: 33px;
	}

:has(+ [aria-labelledby="scheduling-time-legend"]) + fieldset {
	grid-area: select-time;
	}

:has(+ [aria-labelledby="scheduling-more-photographers-legend"]) + fieldset {
	position: relative;
	grid-area: more-photographers;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 33px;
	max-width: 100%;
	}

:where(#scheduling) fieldset > span {
	display: block;
	color: #233040;
	font-weight: 600;
	font-size: 20px;
	}

[aria-labelledby="scheduling-photographer-legend"] > button, /* Change */
[aria-labelledby="scheduling-photographer-legend"] > a {
	color: var(--color-primary);
	font-weight: 700;
	font-size: 16px;
	text-decoration-line: none;
	background-color: transparent;
	border-width: 0;
	transition: color 200ms;
	}

[aria-labelledby="scheduling-photographer-legend"] > button:is(:hover, :focus),
[aria-labelledby="scheduling-photographer-legend"] > a:is(:hover, :focus) {
	color: var(--color-link-hover-static);
	}

.photographer {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: left;
	}

[aria-labelledby="scheduling-photographer-legend"] .photographer {
	margin-top: 8px;
	order: 1;
	width: 100%;
	}

.photographer > .w {
	position: relative;
	flex-grow: 1;
	padding: 15px;
	background-color: #fff;
	border: 1px solid #D0D6DF;
	border-radius: 6px;
	}

.photographer > [tabindex="0"].w {
	--border-color-selection: transparent;
	cursor: pointer;
	transition: border-color 200ms;
	}

.photographer > [tabindex="0"]:is(:hover, :focus).w {
	border-color: var(--color-primary);
	}

.photographer > .w.active {
	--border-color-selection: var(--color-primary);
	border-color: transparent !important;
	}

.photographer > .w::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	box-sizing: border-box;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	border: 2px solid var(--border-color-selection);
	border-radius: 6px;
	transition: border-color 200ms;
	}

.photographer :not(dd) > img {
	float: left;
	margin-right: 16px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	}

.photographer .w .w {
	position: relative;
	left: -1px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding-top: 4px;
	padding-left: 1px;
	overflow: hidden;
	color: #233040;
	line-height: 1.5;
	}

[aria-labelledby="scheduling-photographer-legend"] .photographer .w .w {
	padding-top: 0;
	}

.photographer .w .w p {
	position: relative;
	left: -22px;
	display: flex;
	align-items: center;
	padding-left: 22px;
	}

.photographer .w .w p::before {
	content: "";
	position: absolute;
	margin-top: 1px;
	margin-left: -13px;
	width: 4px;
	height: 4px;
	background-color: currentColor;
	border-radius: 50%;
	}

.photographer .w .w p b {
	font-weight: 600;
	font-size: 16px;
	}

.photographer .w .w p + p {
	column-gap: 9px;
	margin-top: -1px;
	margin-right: -22px;
	font-weight: 600;
	font-size: 14px;
	}

.photographer .w .w p .ico-star {
	margin-top: 1px;
	width: 14px;
	height: 14px;
	fill: var(--color-primary);
	}

.photographer .w ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
	padding-bottom: 4px;
	color: #6D778C;
	font-weight: 600;
	font-size: 12px;
	}

.photographer .w li {
	position: relative;
	display: flex;
	}

[aria-labelledby="scheduling-photographer-legend"] .photographer .w li {
	display: flex;
	align-items: center;
	padding: 5px 4px 3px 32px;
	min-height: 28px;
	background-color: #F4F8FB;
	border-radius: 4px;
	}

[aria-labelledby="scheduling-photographer-legend"] .photographer .w li:has(> b) {
	color: #fff;
	background-color: #233040;
	}

.photographer .w ul .ico {
	width: 20px;
	height: 20px;
	fill: currentColor;
	stroke: currentColor;
	}

[aria-labelledby="scheduling-photographer-legend"] .photographer .w ul .ico {
	position: absolute;
	top: calc(50% - 10px);
	left: 4px;
	}

[aria-labelledby="scheduling-photographer-legend"] .photographer .w li b {
	font-weight: inherit;
	}

.ico-image {
	padding-inline: 1px;
	}

.ico-video {
	padding-inline: 1px;
	}

.ico-blueprint {
	padding-inline: 1px;
	}

.ico-moon-stars {
	padding-inline: 2px 1px;
	}

.ico-3d-model {
	padding-inline: 3px;
	}

.ico-zillow {
	padding-inline: 1px;
	}

.ico-arrows-up-down-pole {
	padding-inline: 2px;
	}

.photographer .w li .tooltip {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	opacity: 0;
	padding-inline: 8px;
	min-height: 26px;
	pointer-events: none;
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
	background-color: #233040;
	border-radius: 4px;
	transition: opacity 200ms;
	}

.photographer .w li:hover .tooltip {
	opacity: 1;
	}

.photographer dl {
	position: relative;
	left: -1px;
	clear: both;
	display: flex;
	flex-wrap: wrap;
	margin-right: -23px;
	padding-left: 1px;
	overflow: hidden;
	color: #233040;
	font-size: 14px;
	}

[aria-labelledby="scheduling-photographer-legend"] .photographer dl {
	margin-top: 4px;
	}

.photographer dl > div {
	position: relative;
	left: -20px;
	display: flex;
	align-items: center;
	padding-top: 9px;
	padding-left: 20px;
	}

.photographer dl > :nth-last-child(2) + div {
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
	padding-top: 17px;
	width: 100%;
	border-top: 1px solid #D0D6DF;
	}

.photographer dl > div::before {
	content: "";
	position: absolute;
	margin-left: -12px;
	width: 4px;
	height: 4px;
	background-color: currentColor;
	border-radius: 50%;
	}

.photographer dt::after {
	content: ":\00a0";
	}

.photographer :last-child > dt {
	margin-bottom: -3px;
	width: 100%;
	}

.photographer :last-child > dd {
	display: flex;
	align-items: center;
	column-gap: 8px;
	padding: 6px 4px 5px;
	min-height: 26px;
	color: #6D778C;
	font-weight: 600;
	font-size: 12px;
	background-color: #F4F8FB;
	border-radius: 4px;
	}

.photographer :last-child > dd img {
	margin-top: -1px;
	}

	.photographer .w + button {
		--color-check: #fff;
		--color-circle: var(--color-primary);
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: -8px;
		padding: 14px 16px 4px;
		min-height: 56px;
		color: var(--color-primary);
		font-weight: 700;
		font-size: 14px;
		text-decoration-line: none;
		background-color: #FDF0EA;
		border-width: 0;
		border-radius: 0 0 6px 6px;
		outline: revert;
		transition-property: color, background-color;
		transition-duration: 200ms;
		}
	
	.photographer .w + button:is(:hover, :focus) {
		--color-check: var(--color-primary);
		--color-circle: #fff;
		color: #fff;
		background-color: var(--color-primary);
		}
	
	.photographer .w + button .ico-circle-chevron-right {
		margin-top: -1px;
		width: 24px;
		height: 24px;
		}
	
	[aria-describedby="detail"] > .w {
		padding: 0 40px;
		max-width: 1140px;
		}
	
	[aria-describedby="detail"] .ui-dialog-titlebar .ui-dialog-title {
		position: absolute;
		left: -5000px;
		}
	
	[aria-describedby="detail"] .ui-dialog-titlebar .ui-button {
		position: absolute;
		top: 18px;
		right: 18px;
		}
	
	#detail {
		margin: 0 auto;
		padding: 6.42% 0 6.9%;
		max-width: 852px;
		}
	
	#detail header {
		position: relative;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		padding: 74px 0 0 250px;
		}
	
	#detail header .w:nth-child(1) {
		position: absolute;
		top: 0;
		left: 0;
		width: 200px;
		text-align: center;
		}
	
	#detail header .w:nth-child(1) img:nth-child(1) {
		display: block;
		margin-bottom: 20px;
		border-radius: 50%;
		}
	
	#detail header .w:nth-child(1) img:nth-child(2) {
		width: 100%;
		max-width: 173px;
		}
	
	#detail header .w:nth-child(2) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		}
	
	#detail header .w:nth-child(2) h2 {
		margin-right: 12px;
		color: #515151;
		font-weight: 600;
		font-size: 32px;
		}
	
	#detail header .w:nth-child(2) [aria-label="Ratings"] {
		position: relative;
		top: 1px;
		display: inline-block;
		color: #3e4650;
		font-weight: 400;
		font-size: 14px;
		}
	
	#detail header .w:nth-child(2) [aria-label="Ratings"] span[aria-hidden] {
		margin-right: 3px;
		}
	
	#detail header .w:nth-child(2) [aria-label="Ratings"] span[aria-hidden] i:not(:last-child) {
		margin-right: 3px;
		}
	
	#detail header .w:nth-child(2) [aria-label="Ratings"] span[aria-hidden] i::before {
		color: #ecba10;
		font-style: normal;
		font-weight: 900;
		font-family: "Font Awesome";
		}
	
	#detail header .w:nth-child(2) [aria-label="Ratings"] span[aria-hidden] .star::before {
		content: "\f005";
		}
	
	#detail header .w:nth-child(2) [aria-label="Ratings"] span[aria-hidden] .star-half::before {
		content: "\f5c0";
		}
	
	#detail header .w:nth-child(2) p {
		margin-top: 4px;
		width: 100%;
		color: #3e4650;
		font-size: 14px;
		line-height: 1.72;
		letter-spacing: 0.5px;
		}
	
	#detail header .w:nth-child(2) img {
		display: none;
		}
	
	#detail [role="region"]:nth-child(2) {
		margin: 59px auto 0;
		padding-left: 250px;
		}
	
	#detail [role="region"]:nth-child(2) h3 {
		color: #515151;
		font-weight: 600;
		font-size: 18px;
		font-family: "Open Sans", sans-serif;
		letter-spacing: 0.5px;
		}
	
	#detail [role="region"]:nth-child(2) p {
		margin-top: 16px;
		color: #3e4650;
		font-size: 14px;
		line-height: 1.72;
		font-family: Montserrat, sans-serif;
		letter-spacing: 0.3px;
		}
	
	#detail [role="region"]:nth-child(3) {
		margin: 80px auto 0;
		}
	
	#detail [role="region"]:nth-child(3) h3 {
		color: #515151;
		font-weight: 500;
		font-size: 28px;
		text-align: center;
		letter-spacing: 0.9px;
		}
	
	#detail [role="region"]:nth-child(3) figure {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 50px;
		}
	
	#detail [role="region"]:nth-child(3) figure a,
	#detail [role="region"]:nth-child(3) figure::after {
		content: "";
		position: relative;
		margin-bottom: 1.67%;
		width: 32.27%;
		max-height: 191px;
		overflow: hidden;
		border-radius: 10px;
		}
	
	#detail [role="region"]:nth-child(3) figure a::before {
		content: "";
		display: block;
		padding-top: 69.454%;
		}
	
	#detail [role="region"]:nth-child(3) figure::after {
		margin-bottom: 0 !important;
		}
	
	#detail [role="region"]:nth-child(3) figure a img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}
	
	.pswp__bg {
		background: rgba(60, 60, 60, 0.6);
		}
	
	.pswp__button--arrow--left::before,
	.pswp__button--arrow--right::before {
		border-radius: 5px;
		}
	
	[aria-describedby="login"] > .w {
		padding: 50px;
		max-width: 750px;
		}
	
	[aria-describedby="login"] .ui-dialog-titlebar .ui-dialog-title {
		position: absolute;
		left: -5000px;
		}
	
	[aria-describedby="login"] .ui-dialog-titlebar .ui-button {
		position: absolute;
		top: 18px;
		right: 18px;
		}
	
	#login nav {
		margin-bottom: 51px;
		padding-bottom: 50px;
		text-align: center;
		border-bottom: 2px solid #efefef;
		}
	
	#login nav ul {
		font-size: 0;
		}
	
	#login nav ul li {
		display: inline-block;
		vertical-align: middle;
		margin: 0 35px;
		}
	
	#login nav ul li a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 237px;
		height: 58px;
		color: #ec7710;
		font-weight: 600;
		font-size: 16px;
		text-decoration: none;
		letter-spacing: 0.5px;
		background: #fff;
		border: 1px solid #ec7710;
		border-radius: 5px;
		outline: none;
		transition: color 200ms, background 200ms, border 200ms;
		}
	
	#login nav ul li a:hover,
	#login nav ul li a:focus {
		color: #fff;
		background: #ffa453;
		border-color: #ffa453;
		}
	
	#login nav ul li.ui-tabs-active a {
		color: #ec7710;
		background: #ffdab9;
		border-color: #ffdab9;
		}
	
	#login .tab-cont-wrapper {
		position: relative;
		}
	
	#login .tab-cont-wrapper .ui-tabs-panel.custom {
		position: absolute;
		top: 0;
		z-index: 1;
		display: block !important;
		}
	
	#login section {
		width: 100%;
		}
	
	#login section form div {
		position: relative;
		}
	
	#login section form div label {
		display: inline-block;
		padding: 0 4px;
		color: #3e4650;
		font-size: 14px;
		line-height: 1.4;
		letter-spacing: 0.35px;
		}
	
	#login section form div label small {
		font-size: 0;
		}
	
	#login section form div label small::before {
		content: "*";
		color: #f7376f;
		font-size: 14px;
		text-indent: 0;
		}
	
	#login section form div input:not([type="checkbox"]):not([type="radio"]) {
		margin-top: 7px;
		padding: 0 20px;
		width: 100%;
		height: 45px;
		color: #3e4650;
		font-size: 14px;
		letter-spacing: 0.5px;
		background: #f4f8fb;
		border: none;
		border-radius: 5px;
		box-shadow: inset 0 -1px 0 0 rgba(230, 233, 236, 0.85);
		transition: background 200ms, box-shadow 200ms;
		}
	
	#login section form div input:not([type="checkbox"]):not([type="radio"]):focus {
		background: #fff6ee;
		box-shadow: inset 0 -1px 0 0 #ffdab9;
		}
	
	#login section form div input[type="checkbox"] {
		position: absolute;
		top: 3px;
		left: 0;
		opacity: 0;
		width: 15px;
		height: 15px;
		pointer-events: none;
		}
	
	#login section form div input[type="checkbox"] + label {
		position: relative;
		padding-left: 27px;
		cursor: pointer;
		}
	
	#login section form div input[type="checkbox"] + label::before {
		content: "\f0c8";
		position: absolute;
		top: -1px;
		left: 0;
		color: #d2d7e1;
		font-size: 16px;
		font-family: "Font Awesome";
		transform: rotate(0.01deg);
		}
	
	#login section form div input[type="checkbox"]:checked + label::before {
		content: "\f14a";
		color: #ec7710;
		}
	
	#login section form div label[for="cna-region"]::after,
	#login section form div label[for="cna-hear"]::after {
		content: "\f078";
		position: absolute;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 7px;
		width: 48px;
		height: 45px;
		pointer-events: none;
		color: #8390a0;
		font-weight: 900;
		font-size: 14px;
		font-family: "Font Awesome";
		}
	
	#login section form div select {
		margin-top: 7px;
		-webkit-appearance: none;
		   -moz-appearance: window;
		padding: 0 20px;
		width: 100%;
		height: 45px;
		cursor: pointer;
		font-size: 14px;
		letter-spacing: 0.5px;
		background: #f4f8fb;
		border: none;
		border-radius: 5px;
		box-shadow: inset 0 -1px 0 0 rgba(230, 233, 236, 0.85);
		transition: background 200ms, box-shadow 200ms;
		}
	
	#login section form div select:focus {
		background: #fff6ee;
		box-shadow: inset 0 -1px 0 0 #ffdab9;
		}
	
	#login section form div select::-ms-expand {
		display: none;
		}
	
	#login section form div select:invalid,
	#login section form div select [disabled] {
		color: #a4aab1;
		}
	
	#login section form div select option {
		color: #3e4650;
		}
	
	#login section form .error {
		clear: both;
		margin-top: 7px;
		padding: 0 4px;
		color: red;
		font-style: italic;
		font-size: 12px;
		}
	
	#login section form div button[type="submit"] {
		padding: 0 24px;
		width: 100%;
		height: 50px;
		color: #fff;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.5px;
		background: #ec7710;
		border: none;
		border-radius: 5px;
		transition: background 200ms, box-shadow 200ms;
		}
	
	#login section form div button[type="submit"]:is(:hover, :focus) {
		background: #ffa453;
		box-shadow: -6px 6px 18px 0 rgba(255, 164, 83, 0.5);
		}
	
	#login section form div:last-of-type > button[type="button"] {
		margin-top: 20px;
		padding: 0 24px;
		width: 100%;
		height: 50px;
		color: #ec7710;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.5px;
		background-color: transparent;
		border: 1px solid #ec7710;
		border-radius: 5px;
		transition-property: color, background-color, border-color, box-shadow;
		transition-duration: 200ms;
		}
	
	#login section form div:last-of-type > button[type="button"]:is(:hover, :focus) {
		color: #fff;
		background-color: #ffa453;
		border-color: #ffa453;
		box-shadow: -6px 6px 18px 0 rgba(236, 119, 16, 0.2);
		}
	
	#login #ru form div:nth-child(1),
	#login #ru form div:nth-child(2) {
		position: relative;
		z-index: 1;
		margin-bottom: 11px;
		width: 310px;
		}
	
	#login #ru form div:nth-child(1),
	#login #ru form div:nth-child(3) {
		float: left;
		clear: left;
		}
	
	#login #ru form div:nth-child(2) {
		float: right;
		clear: right;
		}
	
	#login #ru form div:last-child {
		clear: both;
		padding-top: 30px;
		}
	
	#login #ru form div input[type="password"] ~ a {
		position: relative;
		z-index: 1;
		display: inline-block;
		margin-top: 11px;
		color: #3e4650;
		font-size: 14px;
		line-height: 1.4;
		letter-spacing: 0.5px;
		text-decoration: underline;
		}
	
	#login #ru form div input[type="password"] ~ a:hover,
	#login #ru form div input[type="password"] ~ a:focus {
		text-decoration: none;
		}
	
	#login #cna form > fieldset {
		margin-bottom: 41px;
		border-bottom: 2px solid #f7f7f7;
		}
	
	#login #cna form > fieldset:nth-of-type(1) {
		padding-bottom: 22px;
		}
	
	#login #cna form > fieldset:nth-of-type(2) {
		padding-bottom: 41px;
		}
	
	#login #cna form > fieldset > legend {
		margin-bottom: 30px;
		color: #515151;
		font-weight: 400;
		font-size: 18px;
		font-family: Montserrat, sans-serif;
		letter-spacing: 0.7px;
		}
	
	#login #cna form > fieldset:nth-of-type(1) > div {
		margin-bottom: 19px;
		}
	
	#login #cna form > fieldset:nth-of-type(2) + div {
		margin-bottom: 19px;
		}
	
	#login #cna-promo-code {
		display: block;
		margin-bottom: 40px;
		width: 310px;
		}
	
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(-n+14) {
		width: 310px;
		}
	
	#login #cna form > fieldset:nth-of-type(2) > div:nth-of-type(1) {
		width: 416px;
		}
	
	#login #cna form > fieldset:nth-of-type(2) > div:nth-of-type(2) {
		width: 204px;
		}
	
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(1),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(3),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(5),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(7),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(9),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(11),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(13),
	#login #cna form > fieldset:nth-of-type(2) > div:nth-of-type(1) {
		float: left;
		clear: left;
		}
	
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(2),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(4),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(6),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(8),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(10),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(12),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(14),
	#login #cna form > fieldset:nth-of-type(2) > div:nth-of-type(2) {
		float: right;
		clear: right;
		}
	
	#login #cna form > fieldset fieldset {
		clear: both;
		padding-bottom: 32px;
		}
	
	#login #cna form > fieldset fieldset legend {
		margin-bottom: 20px;
		padding: 0 4px;
		color: #3e4650;
		font-size: 14px;
		line-height: 1.4;
		letter-spacing: 0.5px;
		}
	
	#login #cna form > fieldset fieldset div {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		}
	
	#login #cna form > fieldset fieldset div:first-of-type {
		margin-right: 43px;
		}
	
	#login #cna form > fieldset fieldset div input {
		position: absolute;
		top: 2px;
		left: 0;
		opacity: 0;
		width: 17px;
		height: 17px;
		pointer-events: none;
		}
	
	#login #cna form > fieldset fieldset div label {
		padding-left: 27px;
		cursor: pointer;
		}
	
	#login #cna form > fieldset fieldset div label::before {
		content: "\f111";
		position: absolute;
		top: -1px;
		left: 0;
		color: #d2d7e1;
		font-size: 16px;
		font-family: "Font Awesome";
		transform: rotate(0.01deg);
		}
	
	#login #cna form > fieldset fieldset div input:checked + label::before {
		content: "\f058";
		color: #ec7710;
		}
	
	#login #cna form > fieldset div span.ui-front {
		position: relative;
		display: block;
		margin-top: 7px;
		width: 124px;
		}
	
	#login #cna form > fieldset div .ui-front .ui-selectmenu-button {
		display: flex;
		align-items: center;
		padding: 0 15px 2px;
		width: 100%;
		height: 45px;
		cursor: pointer;
		color: #3e4650;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.5px;
		background: #f4f8fb;
		border-right: 1px solid #dee3ea;
		border-radius: 5px 0 0 5px;
		box-shadow: inset 0 -1px 0 0 rgba(230, 233, 236, 0.85);
		outline: none;
		transition: background 200ms, box-shadow 200ms;
		}
	
	#login #cna form > fieldset div .ui-front .ico-flag {
		position: relative;
		top: 1px;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10px;
		width: 32px;
		height: 22px;
		border-radius: 3px;
		}
	
	#login #cna form > fieldset div .ui-front .country {
		position: relative;
		top: 2px;
		}
	
	#login #cna form > fieldset div .ui-front .ui-selectmenu-button:focus,
	#login #cna form > fieldset div .ui-front .ui-selectmenu-button-open {
		background: #fff6ee;
		box-shadow: inset 0 -1px 0 0 #ffdab9;
		}
	
	#login #cna form > fieldset div .ui-front .ui-selectmenu-button::after {
		content: "\f078";
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 38px;
		height: 45px;
		pointer-events: none;
		color: #8390a0;
		font-weight: 900;
		font-size: 14px;
		font-family: "Font Awesome";
		}
	
	#login #cna form > fieldset div .ui-front .ui-selectmenu-menu {
		position: absolute;
		top: 45px;
		left: 0;
		z-index: 1;
		visibility: hidden;
		opacity: 0;
		padding-top: 7px;
		width: 124px;
		transition: visibility 200ms, opacity 200ms;
		}
	
	#login #cna form > fieldset div .ui-front .ui-selectmenu-open {
		visibility: visible;
		opacity: 1;
		}
	
	#login #cna form > fieldset div .ui-front .ui-selectmenu-menu ul {
		padding: 15px;
		width: 124px !important;
		color: #3e4650;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.5px;
		background: #f4f8fb;
		border-radius: 5px;
		outline: none;
		box-shadow: 0 3px 5px 0 rgba(52, 73, 99, 0.2);
		}
	
	#login #cna form > fieldset div .ui-front .ui-selectmenu-menu li:not(:first-child) {
		margin-top: 10px;
		}
	
	#login #cna form > fieldset div .ui-front .ui-selectmenu-menu .ui-menu-item-wrapper {
		cursor: pointer;
		transition: color 200ms;
		}
	
	#login #cna form > fieldset div .ui-front .ui-selectmenu-menu .ui-state-active {
		color: #ec7710;
		}
	
	#login #cna form > fieldset div input#cna-phone {
		float: left;
		margin: -45px 0 0 124px;
		width: 186px;
		border-radius: 0 5px 5px 0;
		}
	
	#login #cna form > fieldset div input#cna-phone + button {
		float: right;
		margin-top: -45px;
		width: 96px;
		height: 45px;
		color: #ec7710;
		font-weight: 600;
		font-size: 16px;
		text-decoration: none;
		letter-spacing: 0.5px;
		background: none;
		border: 1px solid #ec7710;
		border-radius: 5px;
		transition: color 200ms, background 200ms, border 200ms;
		}
	
	#login #cna form > fieldset div input#cna-phone + button:hover,
	#login #cna form > fieldset div input#cna-phone + button:focus {
		color: #fff;
		background: #ffa453;
		border-color: #ffa453;
		}
	
	#login #cna form > fieldset div input#cna-phone + button:disabled {
		cursor: default;
		color: #8390a0;
		background: #dadde2;
		border-color: #dadde2;
		}
	
	#login #cna form > div:nth-last-child(2) {
		margin-top: 30px;
		}
	
	#login #cna form > div:last-child {
		margin-top: 50px;
		}
	
	#login #cna form div label[for="cna-terms"] a {
		font-weight: 700;
		}
	
	#login #cna form > fieldset::after {
		content: "";
		clear: both;
		display: block;
		}

#scheduling-date-legend {
	position: absolute;
	left: -5000px;
	}

#datepicker .title-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

#datepicker .title {
	order: 1;
	color: #233040;
	font-weight: 600;
	font-size: 20px;
	}

#datepicker .title-bar button {
	width: 24px;
	height: 24px;
	cursor: pointer;
	background-color: transparent;
	border-width: 0;
	border-radius: 4px;
	}

#datepicker .title-bar [aria-disabled="true"].prev {
	cursor: default;
	pointer-events: none;
	}

#datepicker .title-bar .next {
	order: 1;
	}

#datepicker .title-bar button:focus:not(:hover) {
	outline: 2px solid #000;
	outline-offset: 1px;
	}

#datepicker .title-bar .ico {
	display: block;
	padding-inline: 8px;
	width: 100%;
	height: 100%;
	fill: #3E4650;
	}

#datepicker .title-bar .prev .ico {
	transform: scaleX(-1);
	}

#datepicker .title-bar button:not([aria-disabled="true"]):is(:hover, :focus) .ico {
	fill: var(--color-primary);
	}

#datepicker .title-bar [aria-disabled="true"].prev .ico {
	opacity: 0.5;
	}

#datepicker .dates {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 8px;
	margin-top: 15px;
	width: 100%;
	}

#datepicker .dates > div {
	position: relative;
	display: flex;
	justify-content: center;
	aspect-ratio: 100 / 83;
	}

#datepicker .dates input {
	position: absolute;
	top: 0;
	opacity: 0;
	width: 20px;
	height: 100%;
	pointer-events: none;
	}

#datepicker .dates label {
	--color-label: #3E4650;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 2px;
	width: 100%;
	height: 100%;
	cursor: pointer;
	color: #233040;
	font-weight: 700;
	font-size: 18px;
	background-color: #F4F8FB;
	border-radius: 4px;
	transition: background-color 200ms;
	}

#datepicker .dates :not(:disabled):not(:checked) + label:hover {
	background-color: #E4EAF5;
	}

#datepicker .dates :disabled + label {
	--color-label: #B3B9C1;
	cursor: default;
	color: #B3B9C1;
	background-color: #F4F4F4;
	}

#datepicker .dates :checked + label {
	--color-label: #fff;
	cursor: default;
	color: #fff;
	background-color: #233040;
	}

#datepicker .dates :focus + label:not(:hover) {
	outline: 2px solid #000;
	outline-offset: 1px;
	}

#datepicker .dates label small {
	margin-top: 6px;
	pointer-events: none;
	color: var(--color-label);
	font-weight: 400;
	font-size: 16px;
	}

.tooltip-unavailable {
	position: absolute;
	top: -5000px;
	left: -5000px;
	display: flex;
	align-items: center;
	column-gap: 9px;
	opacity: 0;
	padding: 5px 9px 3px;
	min-height: 28px;
	pointer-events: none;
	color: #fff;
	font-weight: 600;
	font-size: 12px;
	background-color: #D0D6DF;
	border-radius: 4px;
	transition: opacity 200ms;
	}

.tooltip-unavailable.is-visible {
	opacity: 1;
	}

.tooltip-unavailable .ico-ban {
	margin-top: -2px;
	width: 18px;
	height: 18px;
	stroke: #fff;
	}

#scheduling-time-legend::after {
	content: ":";
	}

[aria-labelledby="scheduling-time-legend"] .w {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 15px;
	padding: 16px;
	color: #233040;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.3px;
	background-color: #F4F8FB;
	border-radius: 6px;
	}

[aria-labelledby="scheduling-time-legend"] .w > div {
	position: relative;
	display: flex;
	justify-content: center;
	}

[aria-labelledby="scheduling-time-legend"] input {
	position: absolute;
	opacity: 0;
	aspect-ratio: 1;
	height: 100%;
	}

[aria-labelledby="scheduling-time-legend"] label {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 1px;
	width: 100%;
	height: 52px;
	cursor: pointer;
	background-color: #fff;
	border: 1px solid #E9EBEE;
	border-radius: 8px;
	transition-property: color, background-color, border-color;
	transition-duration: 200ms;
	}

[aria-labelledby="scheduling-time-legend"] label:hover,
[aria-labelledby="scheduling-time-legend"] :focus + label {
	color: var(--color-primary);
	}

[aria-labelledby="scheduling-time-legend"] :focus:has(+ :not(:hover)) + label {
	outline: 2px solid #000;
	outline-offset: 1px;
	}

[aria-labelledby="scheduling-time-legend"] :checked + label {
	color: #fff;
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	}

[aria-labelledby="scheduling-time-legend"] :disabled + label {
	cursor: default;
	color: #B3B9C1;
	background-color: #F4F4F4;
	}

[aria-labelledby="scheduling-time-legend"] p {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	column-gap: 18px;
	margin-top: 16px;
	padding-left: 2px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45;
	letter-spacing: 0;
	}

[aria-labelledby="scheduling-time-legend"] p img {
	margin-top: 1px;
	}

#scheduling-more-photographers-legend {
	order: 1;
	align-self: baseline;
	margin-bottom: 15px;
	width: 60%;
	}

[aria-labelledby="scheduling-more-photographers-legend"] > :nth-last-child(2) + button,
[aria-labelledby="scheduling-more-photographers-legend"] > :nth-last-child(2) + a {
	order: 2;
	align-self: baseline;
	display: inline-flex;
	align-items: center;
	column-gap: 16px;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-decoration-line: none;
	background-color: transparent;
	border-width: 0;
	transition: color 200ms;
	}

[aria-labelledby="scheduling-more-photographers-legend"] > :nth-last-child(2) + button:is(:hover, :focus),
[aria-labelledby="scheduling-more-photographers-legend"] > :nth-last-child(2) + a:is(:hover, :focus) {
	color: var(--color-link-hover-static);
	}

[aria-labelledby="scheduling-more-photographers-legend"] > :nth-last-child(2) + * .ico-chevron-right {
	width: 8px;
	height: 13px;
	fill: currentColor;
	}

[aria-labelledby="scheduling-more-photographers-legend"] > .photographer {
	order: 3;
	width: calc((100% - 16px) / 2);
	}

[aria-describedby="choose-photographer"] > .w {
	max-width: 945px;
	font-weight: 400;
	}

#choose-photographer .scrollable {
	padding: 40px;
	max-height: 650px;
	overflow: auto;
	}

#choose-photographer :not(.os-host).scrollable,
#choose-photographer .os-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	}

#choose-photographer .os-content::before,
#choose-photographer .os-content::after {
	content: none;
	}

#choose-photographer .ui-dialog-titlebar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	width: 100%;
	}

#choose-photographer .ui-dialog-title {
	display: block;
	padding-top: 1px;
	color: #233040;
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 0.5px;
	}

#choose-photographer.ui-dialog-content .photographer {
	margin-right: auto;
	width: calc((100% - 16px) / 2);
	}

#choose-photographer .photographer + button { /* load more */
	display: inline-flex;
	align-items: center;
	column-gap: 10px;
	margin-top: 17px;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 16px;
	background-color: transparent;
	border-width: 0;
	transition: color 200ms;
	}

#choose-photographer.ui-dialog-content .photographer + button {
	margin-inline: 35%;
	}

#choose-photographer .photographer + button:is(:hover, :focus) {
	color: var(--color-link-hover-static);
	}

#choose-photographer .photographer + button .ico-arrow-rotate-right {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	}

#choose-photographer footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	column-gap: 8px;
	padding-inline: 40px;
	border-top: 1px solid #D0D6DF;
	height: 100px;
	}

[aria-describedby="lacks-skills"] > .w {
	max-width: 548px;
	font-weight: 400;
	}

[aria-describedby="lacks-skills"] .ui-dialog-titlebar {
	display: none;
	}

#lacks-skills {
	padding: 52px 40px 24px;
	color: #233040;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.5px;
	}

#lacks-skills svg {
	display: block;
	margin-inline: auto;
	margin-bottom: 39px;
	}

#lacks-skills ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-block: 12px 24px;
	font-weight: 600;
	line-height: 1.25;
	}

#lacks-skills li {
	position: relative;
	padding-left: 24px;
	}

#lacks-skills li::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 10px;
	width: 4px;
	height: 4px;
	background-color: currentColor;
	border-radius: 50%;
	}

#lacks-skills footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 8px;
	margin-top: 40px;
	}



/* 10. Order Summary
-------------------------------------------------------*/

#summary {
	margin-inline: auto;
	padding-top: 41px;
	width: var(--width-center-section);
	color: #233040;
	font-weight: 400;
	}

#summary h1 {
	margin-bottom: 40px;
	font-weight: 600;
	font-size: 24px;
	font-family: "Open Sans", sans-serif;
	letter-spacing: 0.5px;
	}

fieldset[aria-labelledby="summary-photographer-legend"] {
	float: left;
	width: 458px;
	min-inline-size: auto;
	}

#summary fieldset > span {
	display: block;
	width: 100%;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.5px;
	}

[aria-labelledby="summary-photographer-legend"] ul {
	margin-top: 15px;
	}

[aria-labelledby="summary-photographer-legend"] li {
	display: flex;
	align-items: center;
	column-gap: 16px;
	}

[aria-labelledby="summary-photographer-legend"] li + li {
	margin-top: 16px;
	}

[aria-labelledby="summary-photographer-legend"] li img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	}

[aria-labelledby="summary-photographer-legend"] li .w {
	margin-right: auto;
	max-width: calc(100% - 112px);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.45;
	white-space: nowrap;
	}

[aria-labelledby="summary-photographer-legend"] li .w p {
	overflow: hidden;
	text-overflow: ellipsis;
	}

[aria-labelledby="summary-photographer-legend"] li .w p + p {
	margin-top: 5px;
	}

#summary fieldset a {
	--color-icon: #3E4650;
	display: inline-flex;
	}

#summary fieldset a:is(:hover, :focus) {
	--color-icon: var(--color-primary);
	}

#summary fieldset .ico-pen-line {
	padding-inline: 4px;
	width: 24px;
	height: 24px;
	stroke: var(--color-icon);
	}

:has(+ [aria-labelledby="summary-property-legend"]) + fieldset {
	float: right;
	width: 458px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 16px;
	}

#summary-property-legend {
	margin-bottom: 16px;
	}

[aria-labelledby="summary-property-legend"] p {
	margin-right: auto;
	max-width: calc(100% - 40px);
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: 0.5px;
	}

:has(+ [aria-labelledby="summary-message-legend"]) + fieldset {
	clear: both;
	padding-top: 32px;
	}

#summary #summary-message-legend {
	color: #3E4650;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.363;
	letter-spacing: 0;
	}

[aria-labelledby="summary-message-legend"] textarea {
	margin-top: 8px;
	padding: 10px 15px;
	width: 100%;
	min-height: 164px;
	resize: vertical;
	font-size: 14px;
	line-height: 1.6;
	background-color: #fff;
	border: 1px solid #D0D6DF;
	border-radius: 6px;
	}

:has(+ [aria-labelledby="summary-package-legend"]) + fieldset {
	margin-top: 31px;
	padding-top: 33px;
	border-top: 1px solid #EDF0F3;
	}

[aria-labelledby="summary-package-legend"] ul {
	margin-bottom: 16px;
	}

[aria-labelledby="summary-package-legend"] li  + li,
[aria-labelledby="summary-total-legend"]   div + div {
	margin-top: 6px;
	}

:has(+ [aria-labelledby="summary-total-legend"]) + fieldset {
	margin-top: 27px;
	}

#summary-total-legend {
	position: absolute;
	left: -5000px;
	}

[aria-labelledby="summary-total-legend"] > div {
	padding-right: 32px;
	}

[aria-labelledby="summary-total-legend"] :nth-last-of-type(5) ~ div {
	margin-top: 22px;
	}

[aria-labelledby="summary-total-legend"] :has(+ div > p > strong) + div { /* Deposit to be Paid Now */
	margin-top: 21px !important;
	padding: 17px 16px 15px;
	background-color: #F4F8FB;
	border-radius: 8px;
	}

[aria-labelledby="summary-total-legend"] :has(+ div > label[for="coupon-code"]) + div { /* Coupon or Promotional Reference Code */
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	column-gap: 16px;
	margin-top: 32px;
	padding-right: 0;
	padding-bottom: 4px;
	max-width: 500px;
	}

[aria-labelledby="summary-total-legend"] label {
	margin-bottom: 8px;
	width: 100%;
	color: #3E4650;
	font-size: 14px;
	letter-spacing: 0;
	}

[aria-labelledby="summary-total-legend"] .single-line {
	flex-grow: 1;
	}

[aria-labelledby="summary-total-legend"] .single-line input {
	padding-inline: 15px;
	width: 100%;
	height: 100%;
	font-size: 14px;
	border: 1px solid #D0D6DF;
	border-radius: 6px;
	}

[aria-labelledby="summary-total-legend"] .btn {
	min-width: 88px;
	}

[aria-describedby="your-order"] > .w {
	--padding-wrapper: 40px;
	padding: var(--padding-wrapper) var(--padding-wrapper) 0;
	max-width: 548px;
	color: #233040;
	font-weight: 400;
	letter-spacing: 0.5px;
	}

[aria-describedby="your-order"] .ui-dialog-titlebar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 40px;
	padding-top: 1px;
	}

[aria-describedby="your-order"] .ui-dialog-title {
	font-weight: 600;
	font-size: 24px;
	}

[aria-describedby="your-order"] .modal-close-button-v2 {
	margin-top: 1px;
	}

#your-order {
	font-size: 16px;
	line-height: 1.5;
	}

#your-order p + p {
	margin-top: 16px;
	}

#your-order footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 40px;
	margin-inline: calc(var(--padding-wrapper)* -1);
	padding-inline: var(--padding-wrapper);
	height: 100px;
	border-top: 1px solid #D0D6DF;
	}



/* 11. responsive ( 991px)
-------------------------------------------------------*/

@media (max-width:  991px) {

/*  1. sticky footer  */

.footer-order {
	flex-wrap: wrap;
	align-content: center;
	row-gap: 16px;
	margin-top: 31px;
	height: 116px;
	transform: translateY(100%);
	transition-property: border-top-color, transform;
	transition-duration: 200ms, 300ms;
	}

:has(> .back:first-child):has(> .next:last-child).footer-order {
	height: 71px;
	}

.footer-order.is-showing,
#lis-loc ~ .footer-order {
	transform: none;
	}

.footer-order.having-border {
	border-top-color: #D0D6DF;
	transition-duration: 0, 300ms;
	}

.footer-order ol {
	justify-content: center;
	padding-right: 6px;
	width: calc((100% - 8px) / 2);
	font-size: 12px;
	}

.footer-order:has(> ol:nth-last-child(2)) > ol, /* when there is only steps and one .btn */
.footer-order:has(> ol:nth-last-child(3)):has(.btn:nth-last-child(2)) > ol /* when there is no Total price */ {
	padding-right: 0;
	width: 100%;
	}

.footer-order ol li {
	width: 28px;
	height: 28px;
	}

.footer-order :has(+ button:not(.btn)) + button {
	position: static;
	justify-content: center;
	column-gap: 10px;
	padding: 3px 0;
	width: calc((100% - 8px) / 2);
	min-height: 28px;
	font-size: 16px;
	}

.footer-order .btn {
	padding-block: 8px;
	width: calc((100% - 8px) / 2);
	min-height: 40px;
	font-size: 14px;
	}

.footer-order ol:nth-last-child(2) + .btn, /* when there is only steps and one .btn */
.footer-order ol + button:not(.btn) + :last-child.btn.back /* Photography only has Back button */ {
	width: 100%;
	}

[aria-describedby="brief-summary"] > .w {
	--padding-wrapper: 16px;
	}

[aria-describedby="brief-summary"] .ui-dialog-titlebar {
	margin-bottom: 23px;
	}

[aria-describedby="brief-summary"] .ui-dialog-title {
	font-size: 20px;
	}

#brief-summary h2 {
	font-size: 16px;
	}

#brief-summary ul {
	margin-block: 15px 16px;
	}

:is(#brief-summary, [aria-labelledby="summary-package-legend"]) li,
[aria-labelledby="summary-total-legend"]                      > div {
	font-size: 14px;
	}

#brief-summary li + li {
	margin-top: 16px;
	}

:is(#brief-summary, [aria-labelledby="summary-package-legend"]) li  p + p,
[aria-labelledby="summary-total-legend"]                      > div p + p {
	margin-top: 1px;
	font-size: 16px;
	}

:is(#brief-summary, [aria-labelledby="summary-package-legend"]) li button {
	margin-top: 1px;
	}

#brief-summary .footer-order-modal {
	margin-top: 25px;
	padding-bottom: 0;
	height: 62px;
	}

#brief-summary .footer-order-modal b {
	font-size: 20px;
	}


/*  2. Listing Location  */

#lis-loc {
	padding-top: 27px;
	}

#lis-loc h1 {
	font-size: 16px;
	}

#lis-loc .w {
	margin-top: 18px;
	}

#lis-loc form {
	top: 16px;
	width: calc(100% - 32px);
	}

#lis-loc form input {
	height: 52px;
	font-size: 14px;
	}

#lis-loc form button {
	right: 12px;
	}

#lis-loc form .datalist {
	top: 56px;
	font-size: 13px;
	}

#lis-loc form .option {
	padding-top: 13px;
	}

#map {
	height: 368px;
	}


/*  3. Choose Your Services  */

#cys {
	padding-top: 27px;
	}

#cys h1 {
	font-size: 16px;
	}

#cys header p {
	margin-top: 10px;
	font-size: 14px;
	}

#cys ul {
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	margin-top: 16px;
	font-size: 20px;
	}

#cys li a {
	padding-bottom: 21px;
	height: 190px;
	}

#cys li:has(> a > b) > a {
	padding-bottom: 20px;
	}

#cys li a svg {
	top: calc(50% - 75px);
	left: calc(50% - 44px);
	width: 88px;
	height: 88px;
	}

[aria-describedby="vat-rules"] > .w {
	padding: 16px;
	}

#vat-rules .btn {
	margin-top: 20px;
	width: 100%;
	min-height: 44px;
	font-size: 14px;
	}

#vat-rules .w {
	margin-top: 20px;
	}
	
[aria-describedby="coming-soon"] > .w {
	padding: 24px;
	}

[aria-describedby="coming-soon"] .ui-dialog-titlebar::before {
	width: 162px;
	height: 24px;
	}

[aria-describedby="coming-soon"] .ui-dialog-title {
	margin-top: 32px;
	font-size: 32px;
	}

[aria-describedby="coming-soon"] .modal-close-button-v2 {
	top: 23px;
	right: 23px;
	}

#coming-soon p {
	margin-top: 32px;
	font-size: 16px;
	}

#coming-soon p + p {
	margin-top: 31px;
	font-size: 14px;
	}

#coming-soon form .single-line {
	height: 44px;
	}

#coming-soon form .btn {
	margin-top: 16px;
	width: 100%;
	}

#continue-add {
	padding: 16px;
	}

#continue-add .btn {
	min-height: 44px;
	font-size: 14px;
	}


/*  4. Photography  */

#photog {
	display: block;
	padding-top: 40px;
	}

.tier {
	padding-block: 14px 22px;
	width: auto;
	}

:has(> .package-label).tier {
	padding-top: 16px;
	}

.tier + .tier {
	margin-top: 40px;
	}

.tier:has(> .package-label) + .tier {
	margin-top: 10px;
	}

.tier:not(:has(> h2.package-label)) > h2,
.tier                                 h3 {
	font-size: 24px;
	}

.tier p {
	margin-top: 28px;
	}

.tier strong {
	margin-block: 27px 26px;
	font-size: 20px;
	}

.tier h2.package-label ~ ul li + li {
	margin-top: 10px;
	}

#packages {
	margin-inline: var(--dist-min-cont-edge);
	padding-top: 24px;
	}

#modal-of-tier-heading {
	font-size: 16px;
	}

#modal-of-tier-heading + p {
	margin-top: 7px;
	font-size: 14px;
	}

#packages form {
	display: block;
	margin-top: 55px;
	}

.package {
	padding-top: 16px;
	width: 100%;
	}

.package + .package {
	margin-top: 40px;
	}

#add-on,
#photog-floor-plan {
	margin-inline: var(--dist-min-cont-edge);
	padding-top: 24px;
	font-weight: 400;
	}

:is(#add-on, #photog-floor-plan) header {
	align-items: baseline;
	margin-bottom: 33px;
	}

.add-on {
	padding-inline: 54px 70px;
	}

.add-on + .add-on {
	margin-top: 24px;
	}

.add-on p b { /* price */
	right: 14px;
	}

.add-on ul {
	margin-top: 24px;
	margin-inline: -40px -56px;
	}

#add-on-white-glove-list {
	display: block;
	}

#add-on-white-glove-list li + li {
	margin-top: 10px;
	}

#photog-floor-plan form {
	display: block;
	margin-top: -2px;
	}

#photog-floor-plan .floor-plan {
	width: auto;
	}

.floor-plan + .floor-plan {
	margin-top: 24px;
	}

.floor-plan .w {
	padding-inline: 62px 80px;
	}

.floor-plan .w label + p { /* price */
	font-size: 20px;
	}

[aria-labelledby="label-unlock-discount-modal"] > .w {
	max-width: 290px;
	}

#unlock-discount {
	display: block !important;
	}

#unlock-discount picture {
	width: 100%;
	}

#unlock-discount .w {
	padding: 16px;
	}

#unlock-discount .w::before {
	width: 162px;
	height: 24px;
	}

#unlock-discount h2 {
	margin-top: 16px;
	margin-inline: auto;
	max-width: 228px;
	font-size: 32px;
	}

#unlock-discount p {
	margin-top: 15px;
	font-size: 16px;
	}

#unlock-discount p br + br {
	display: none;
	}

#unlock-discount .btn {
	margin-top: 16px;
	min-height: 44px;
	font-size: 14px;
	}


/*  5. Video and 3D Tours  */

#video,
#tours-3d {
	padding-top: 40px;
	}

.js #video {
	opacity: 1;
	}

#video fieldset,
#tours-3d fieldset {
	display: block;
	}

#video.js .tier p .orig-text {
	position: static;
	}

#video.js .tier p .placeholder {
	display: none;
	}

#video fieldset + fieldset {
	margin-top: 16px;
	}

	[aria-describedby="personal-agent-info-incomplete"] > .w {
		padding: 21px 16px 16px;
		}
	
	#personal-agent-info-incomplete > svg {
		width: 70px;
		height: 70px;
		}
	
	#personal-agent-info-incomplete p {
		margin-top: 29px;
		font-size: 14px;
		line-height: 1.45;
		}
	
	#personal-agent-info-incomplete ul {
		column-count: revert;
		}
	
	#personal-agent-info-incomplete ul .ico-check-thick {
		left: 1px;
		}
	
	#personal-agent-info-incomplete .btn {
		padding-inline: 10px;
		min-height: 44px;
		font-size: 14px;
		}
	
/*  6. Floor Plan  */

#floor-plan {
	padding-top: 24px;
	}

#floor-plan form {
	display: block;
	}

#floor-plan .floor-plan {
	width: auto;
	}

#floor-plan :has(> .w > [id$="-free"]).floor-plan {
	margin-right: 0;
	}

#floor-plan .floor-plan .w {
	padding-block: 14px 16px;
	padding-right: 80px;
	min-height: 102px;
	}

#floor-plan .floor-plan .w label + p { /* price */
	font-size: 20px;
	}


/*  7. Drone and Twilight */

#drone,
#twilight {
	padding-top: 40px;
	}

:is(#drone, #twilight) form {
	flex-direction: column;
	}

/*  8. Listing Information  */

#list-info {
	padding-top: 24px;
	}

#list-info fieldset {
	padding: 17px 16px 16px;
	}

#list-info fieldset + fieldset {
	margin-top: 24px;
	}

[aria-labelledby="list-info-option-legend"] p small {
	margin-bottom: 0;
	}

#list-info :has(+ [aria-labelledby="list-info-list-info-legend"]) + fieldset {
	row-gap: 24px;
	}

:where(#list-info) fieldset > span {
	padding-bottom: 15px;
	font-size: 20px;
	}

#list-info-list-info-legend {
	padding-bottom: 7px;
	}

[aria-labelledby="list-info-list-info-legend"] > div {
	width: 100%;
	}

[aria-labelledby="list-info-list-info-legend"] :has(+ div > .single-line > #li-alarm, + div > .single-line > #li-lockbox, + div > .single-line > #li-lockbox-loc) + div {
	width: 100%;
	}


/*  9. Scheduling  */

#scheduling {
	padding-top: 25px;
	}

#scheduling form {
	display: block;
	}

#scheduling :nth-of-type(1) + fieldset {
	margin-top: 25px;
	}

#scheduling :nth-of-type(2) + fieldset {
	margin-top: 25px;
	}

:where(#scheduling) fieldset > span {
	font-size: 16px;
	}

[aria-labelledby="scheduling-photographer-legend"] .photographer {
	margin-top: 9px;
	}

[aria-labelledby="scheduling-photographer-legend"] > button, /* Change */
[aria-labelledby="scheduling-photographer-legend"] > a {
	font-size: 14px;
	}

.photographer :not(dd) > img {
	width: 40px;
	height: 40px;
	}

.photographer .w .w {
	position: static;
	display: block;
	margin-top: -1px;
	padding-top: 0;
	padding-left: 0;
	overflow: visible;
	}

.photographer .w .w p {
	position: static;
	padding-left: 0;
	}

.photographer .w .w p::before {
	content: none;
	}

.photographer .w .w p b {
	font-size: 14px;
	}

.photographer .w .w p + p {
	margin-right: 0;
	}

.photographer .w ul {
	margin-top: 16px;
	}

[aria-labelledby="scheduling-photographer-legend"] .photographer .w ul {
	margin-top: 18px;
	}

.photographer dl {
	position: static;
	display: block;
	margin-top: 4px;
	margin-right: 0;
	padding-left: 0;
	overflow: visible;
	}

[aria-labelledby="scheduling-photographer-legend"] .photographer dl {
	margin-top: 4px;
	}

.photographer dl > div {
	position: static;
	padding-left: 0;
	}

.photographer dl > div::before {
	content: none;
	}
	[aria-describedby="detail"] > .w {
		padding-right: 20px;
		padding-left: 20px;
		}
	
	#detail {
		padding-top: 44px;
		padding-bottom: 20px;
		}
	
	#detail header {
		display: block;
		padding-top: 0;
		padding-left: 0;
		font-size: 0;
		text-align: center;
		}
	
	#detail header .w:nth-child(1) {
		position: static;
		margin: 0 auto;
		}
	
	#detail header .w:nth-child(1) img:nth-child(2) {
		display: none;
		}
	
	#detail header .w:nth-child(2) {
		flex-direction: column;
		}
	
	#detail header .w:nth-child(2) h2 {
		margin-right: 0;
		}
	
	#detail header .w:nth-child(2) [aria-label="Ratings"] {
		order: 3;
		position: static;
		margin-top: 15px;
		margin-bottom: 32px;
		}
	
	#detail header .w:nth-child(2) p {
		order: 2;
		margin-top: 6px;
		}
	
	#detail header .w:nth-child(2) img {
		order: 4;
		display: inline;
		width: 100%;
		max-width: 173px;
		}
	
	#detail [role="region"]:nth-child(2) {
		margin-top: 65px;
		padding-left: 0;
		}
	
	#detail [role="region"]:nth-child(2) h3 {
		font-size: 20px;
		text-align: center;
		}
	
	#detail [role="region"]:nth-child(3) {
		margin-top: 59px;
		}
	
	#detail [role="region"]:nth-child(3) h3 {
		font-weight: 600;
		font-size: 20px;
		}
	
	#detail [role="region"]:nth-child(3) figure {
		margin-top: 25px;
		}
	
	[aria-describedby="login"] > .w {
		padding-top: 0;
		padding-right: 10px;
		padding-bottom: 20px;
		padding-left: 10px;
		}
	
	#login nav {
		margin-right: -10px;
		margin-bottom: 15px;
		margin-left: -10px;
		padding-bottom: 0;
		border-bottom: none;
		}
	
	#login nav ul li {
		margin-right: 0;
		margin-left: 0;
		width: 50%;
		}
	
	#login nav ul li a {
		position: relative;
		width: 100%;
		font-size: 12px;
		border: none;
		border-bottom: 1px solid #efefef;
		}
	
	#login nav ul li:nth-child(1) a {
		border-radius: 5px 0 0 0;
		}
	
	#login nav ul li:nth-child(2) a {
		border-radius: 0 5px 0 0;
		}
	
	#login nav ul li a::after {
		content: "";
		position: absolute;
		bottom: -6px;
		left: 50%;
		margin-left: -9px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 7px 9px 0 9px;
		border-color: transparent;
		transition: border 200ms;
		}
	
	#login nav ul li.ui-tabs-active a::after {
		border-top-color: #ffdab9;
		}
	
	#login #ru form div:nth-child(1),
	#login #ru form div:nth-child(2) {
		margin-bottom: 9px;
		width: auto;
		}
	
	#login #ru form div:nth-child(1) {
		float: none;
		}
	
	#login #ru form div:nth-child(2) {
		float: none;
		}
	
	#login #ru form div:last-child {
		padding-top: 30px;
		}
	
	#login #ru form div input[type="password"] ~ a {
		float: right;
		margin-top: 9px;
		}
	
	#login #cna form > fieldset {
		margin-bottom: 0;
		}
	
	#login #cna form > fieldset:nth-of-type(1) {
		padding-bottom: 11px;
		border-bottom: none;
		}
	
	#login #cna form > fieldset:nth-of-type(2) {
		margin-bottom: 10px;
		padding-bottom: 1px;
		border-bottom-width: 1px;
		}
	
	#login #cna form > fieldset > legend {
		margin-bottom: 20px;
		}
	
	#login #cna form > fieldset:nth-of-type(1) > div {
		margin-bottom: 9px;
		}
	
	#login #cna form > fieldset:nth-of-type(2) + div {
		margin-bottom: 10px;
		}
	
	#login #cna-promo-code {
		margin-bottom: 15px;
		width: 100%;
		}
	
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(-n+14),
	#login #cna form > fieldset:nth-of-type(2) > div:nth-of-type(-n+2) {
		width: auto;
		}
	
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(1),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(3),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(5),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(7),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(9),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(11),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(13),
	#login #cna form > fieldset:nth-of-type(2) > div:nth-of-type(1) {
		float: none;
		}
	
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(2),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(4),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(6),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(8),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(10),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(12),
	#login #cna form > fieldset:nth-of-type(1) > div:nth-of-type(14),
	#login #cna form > fieldset:nth-of-type(2) > div:nth-of-type(2) {
		float: none;
		}
	
	#login #cna form > fieldset fieldset {
		padding-bottom: 20px;
		}
	
	#login #cna form > fieldset fieldset legend {
		margin-bottom: 10px;
		}
	
	#login #cna form > fieldset:nth-of-type(2) > div {
		margin-bottom: 9px;
		}
	
	#login #cna form > fieldset div input#cna-phone {
		width: calc(100% - 230px);
		}
	
	#login #cna form > div:nth-last-child(2) {
		margin-top: 21px;
		}
	
	#login #cna form > div:last-child {
		margin-top: 20px;
		}
	
	#login section form div:last-of-type > button[type="button"] {
		margin-top: 10px;
		}

#datepicker .title {
	font-size: 16px;
	}

#datepicker .dates > div {
	aspect-ratio: 90 / 80;
	}

#datepicker .dates label {
	font-size: 16px;
	}

#datepicker .dates label small {
	font-size: 14px;
	}

[aria-labelledby="scheduling-time-legend"] .w {
	font-size: 14px;
	letter-spacing: -0.2px;
	}

[aria-labelledby="scheduling-time-legend"] label {
	height: 48px;
	}

[aria-labelledby="scheduling-time-legend"] p {
	margin-top: 9px;
	font-size: 12px;
	line-height: 1.5;
	}

[aria-labelledby="scheduling-time-legend"] p img {
	margin-top: 0;
	}

[aria-labelledby="scheduling-more-photographers-legend"] > .photographer {
	width: 100%;
	}

[aria-labelledby="scheduling-more-photographers-legend"] > .photographer + .photographer {
	margin-top: 16px;
	}

#choose-photographer {
	margin-inline: var(--dist-min-cont-edge);
	padding-top: 27px;
	font-weight: 400;
	text-align: center;
	}

#choose-photographer header {
	display: flex;
	align-items: flex-start;
	column-gap: 8px;
	margin-bottom: 16px;
	text-align: left;
	}

#choose-photographer header h1 {
	order: 1;
	color: #233040;
	font-weight: 600;
	font-size: 16px;
	font-family: "Open Sans", sans-serif;
	}

#choose-photographer header a {
	--color-icon: #3E4650;
	margin-top: -3px;
	}

#choose-photographer header a:is(:hover, :focus) {
	--color-icon: var(--color-primary);
	}

#choose-photographer header .ico {
	display: block;
	padding-inline: 8px;
	width: 24px;
	height: 24px;
	transform: scaleX(-1);
	fill: var(--color-icon);
	}

#choose-photographer .photographer + .photographer {
	margin-top: 16px;
	}

#lacks-skills {
	padding: 24px 16px 16px;
	font-size: 14px;
	line-height: 1.45;
	}

#lacks-skills svg {
	margin-bottom: 34px;
	width: 70px;
	height: 62px;
	}

#lacks-skills ul {
	grid-template-columns: 1fr;
	}

#lacks-skills li {
	padding-left: 21px;
	}

#lacks-skills li::before {
	left: 8px;
	}

#lacks-skills footer {
	margin-top: 39px;
	}

#lacks-skills footer .btn {
	padding-block: 8px;
	font-size: 14px;
	min-height: 44px;
	}


/* 10. Order Summary  */

#summary {
	padding-top: 25px;
	}

#summary h1 {
	margin-bottom: 24px;
	font-size: 20px;
	}

fieldset[aria-labelledby="summary-photographer-legend"] {
	float: none;
	width: auto;
	}

#summary fieldset > span {
	font-size: 16px;
	}

[aria-labelledby="summary-photographer-legend"] ul {
	margin-top: 16px;
	}

[aria-labelledby="summary-photographer-legend"] li {
	column-gap: 8px;
	}

[aria-labelledby="summary-photographer-legend"] li + li {
	margin-top: 15px;
	}

[aria-labelledby="summary-photographer-legend"] li img {
	width: 40px;
	height: 40px;
	}

[aria-labelledby="summary-photographer-legend"] li .w {
	max-width: calc(100% - 80px);
	font-size: 14px;
	}

[aria-labelledby="summary-photographer-legend"] li .w p + p {
	margin-top: 4px;
	}

:has(+ [aria-labelledby="summary-property-legend"]) + fieldset {
	float: none;
	margin-top: 25px;
	width: auto;
	column-gap: 8px;
	}

#summary-property-legend {
	margin-bottom: 15px;
	}

[aria-labelledby="summary-property-legend"] p {
	max-width: calc(100% - 32px);
	font-size: 14px;
	}

:has(+ [aria-labelledby="summary-message-legend"]) + fieldset {
	padding-top: 24px;
	}

:has(+ [aria-labelledby="summary-package-legend"]) + fieldset {
	margin-top: 23px;
	padding-top: 25px;
	}

[aria-labelledby="summary-package-legend"] ul {
	margin-bottom: 18px;
	}

[aria-labelledby="summary-package-legend"] li  + li,
[aria-labelledby="summary-total-legend"]   div + div {
	margin-top: 7px;
	}

:has(+ [aria-labelledby="summary-total-legend"]) + fieldset {
	margin-top: 26px;
	}

[aria-labelledby="summary-total-legend"] :nth-last-of-type(5) ~ div {
	margin-top: 20px;
	}

[aria-labelledby="summary-total-legend"] :has(+ div > p > strong) + div { /* Deposit to be Paid Now */
	padding-block: 13px 14px;
	align-items: center;
	}

[aria-labelledby="summary-total-legend"] :has(+ div > label[for="coupon-code"]) + div { /* Coupon or Promotional Reference Code */
	column-gap: 8px;
	margin-top: 24px;
	padding-bottom: 0;
	}

[aria-describedby="your-order"] > .w {
	--padding-wrapper: 16px;
	}

[aria-describedby="your-order"] .ui-dialog-titlebar {
	margin-bottom: 23px;
	}

[aria-describedby="your-order"] .ui-dialog-title {
	font-size: 20px;
	}

[aria-describedby="your-order"] .modal-close-button-v2 {
	margin-top: -1px;
	}

#your-order {
	font-size: 14px;
	line-height: 1.45;
	}

#your-order footer {
	margin-top: 24px;
	height: 76px;
	}

#your-order footer .btn {
	padding-block: 8px;
	width: 100%;
	min-height: 44px;
	font-size: 14px;
	}

}



/* 12. responsive ( 412px)
-------------------------------------------------------*/

@media (max-width:  412px) {

/*  9. Scheduling  */

#datepicker .dates {
	grid-template-columns: 1fr 1fr 1fr;
	}

}

#map .centerMarker
{
    position:absolute;
    /*url of the marker*/
    /*background:url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;*/
    background:url(../../images/newdesign/mymap.png) no-repeat;
    /*center the marker*/
    top:50%;left:50%;
    z-index:1;
    /*fix offset when needed*/
    margin-left: -17px;
    margin-top: -49px;
    /*size of the image*/
    height: 49px;
    width: 35px;
    cursor: pointer
}

#map {
	aspect-ratio: 1140 / 500; 
	width: 100%;
}

#map .gmnoprint, #map .gm-fullscreen-control{
	display:none;
}

em.invalid {
    margin-top: 7px;
    padding: 0 4px;
    color: red;
    font-style: italic;
    font-size: 12px;
    display: block;
    margin-bottom: 20px;
}