#mobile-filter-toggle{display:block;width:100%;margin:0 auto 2em;padding:10px 20px;background:var(--gray);border:1px solid #757575;color:#000;&:before { content:'\e17c'; font-family:'Font Awesome 6 Sharp'; margin-right:10px; } @media screen and (min-width:600px){ display:none; }}#property-filters{padding:20px 0;& .flexed { row-gap: 10px; column-gap: 8px; display: block; @media screen and (min-width: 600px){ display: flex; } } & .container { max-width: 1600px; } & .property-filter { position: relative; margin-bottom: 20px; & > label { font-weight: 600; margin-right: 3px; display: block; } & > select { padding: 3px 10px; border-radius: 5px; } & input.datepicker { width:100%; position: relative; background-image: url('../images/calendar.svg'); background-repeat: no-repeat; background-position: 95% center; background-size: 12px; border-radius: 5px; @media screen and (min-width: 600px) { width: 150px; } } & .filter-button { background: #FFF; color: #000; padding: 10px 15px; border: 1px solid #000; letter-spacing: 0; text-align: left; position: relative; & .count { display: inline-block; width: 3ch; font-weight: 300; } & i.fa-angle-up, & i.fa-angle-down { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; @media screen and (min-width: 600px) { position: relative; top: auto; right: auto; transform: none; } } &#filter-toggle-availability { & i.fa-angle-up, & i.fa-angle-down { margin-left: 8px; } } @media screen and (min-width: 600px){ text-align: center; } } &:last-of-type { flex-basis: 100%; text-align: center; } @media screen and (min-width: 600px){ margin-bottom: 0; flex-basis: 48%; } @media screen and (min-width: 767px){ flex-basis: 30%; } @media screen and (min-width: 1210px){ flex-basis: auto; } @media screen and (min-width: 1440px){ &:last-of-type { flex-basis: auto; } } & input[type="text"], & select, & .filter-button { width: 100%; @media screen and (min-width: 1210px){ width: auto; } } & input[type="range"] { width: calc(100% - 6ch); } } .filter-description { font-size: 0.75rem; font-weight: 300; } #price-value { font-size: 1rem; } & input[type="submit"], & input[type="reset"] { padding: 12px 20px; &.reset-button { margin-left: 8px; background: transparent; color: #000; border: 1px solid #000; &[disabled]{ cursor: not-allowed; color: #CCC; border-color: #CCC; } &:not([disabled]):hover, &:not([disabled]):focus { background: #757575; color: #FFF; } } } & input[type="submit"] { border: 1px solid; }}#count-sort-wrapper{flex-basis:100%;align-items:flex-end;padding-bottom:10px;margin-bottom:1.5em;border-bottom:1px solid #c9c9c9;& #property-count { font-size: 1rem; margin-bottom: 0; & strong { font-weight: 600; color: var(--green); } } & select, & label { font-size: 1rem; } & select#sort-dropdown { appearance: none; -moz-appearance: none; -webkit-appearance: none; color: #000; border: 1px solid #000; min-width: 23ch; border-radius: 5px; padding: 2px 5px; background-image: url('../images/angle-down-sharp-light.svg'); background-repeat: no-repeat; background-position: calc(100% - 5px) center; background-size: 15px; background-color: #FFF; & > option { background-color: #FFF; color: #000; } }}.is-today .pika-button{background-color:#757575;color:#fff}.is-selected .pika-button,.has-event .pika-button{background-color:var(--green);color:#fff}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#000;background-color:var(--light-green)}.slick-dots{display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:18px;height:18px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:18px;height:18px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:0 0}.slick-dots li button:hover,.slick-dots li button:focus{outline:none}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1}.slick-dots li button:focus-visible:before{background-color:var(--green)}.slick-dots li button:before{position:absolute;top:0;left:0;width:18px;height:18px;content:'';text-align:center;color:var(--dark-blue);border-radius:50%;border:1px solid var(--dark-green);opacity:.5}.slick-dots li.slick-active button:before{opacity:1;background-color:var(--dark-green)}.slick-dots li button:focus-visible{outline:1px dashed var(--dark-green)}.filter-dropdown{position:absolute;background-color:#fff;z-index:800;padding:15px;width:90%;box-shadow:0 2px 10px rgba(0,0,0,.1);display:none;@media screen and (min-width:600px){width: 250px;}&.open { display: block; } & p { margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--green); text-transform: uppercase; } & ul { list-style: none; padding: 0; margin: 0; & li { margin-bottom: 6px; & input[type="checkbox"] { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; } } }}#property-wrapper{height:100%;position:relative;padding-inline:10px;& > .flexed { display: block; @media screen and (min-width: 1200px){ display: flex; } }}.mobile-toggle{display:block;@media screen and (min-width:1200px){display: none;}& button { padding: 10px 15px; }}#property-map-wrapper{height:calc(100vh - 150px);min-height:600px;@media screen and (min-width:1200px){flex-basis: calc(100% - 475px); position: sticky; top: 150px;}@media screen and (min-width:1600px){flex-basis: calc(100% - 750px);}& #map-error { display: block; @media screen and (min-width: 600px) { display: none; } } & #property-map { background: #efefef; height: 100%; margin: 0; }}#property-listings{display:block;@media screen and (min-width:720px){display: flex; flex-wrap: wrap; justify-content: space-between;}@media screen and (min-width:1200px){display: block; flex-basis: 420px;}@media screen and (min-width:1600px){flex-basis: 720px;}& .property-listing { border: 1px solid #C9C9C9; flex-basis: 49%; @media screen and (min-width: 1075px){ flex-basis: 32%; } & > .flexed { display: block; @media screen and (min-width: 1600px){ display: flex; } } & .property-image { position: relative; overflow: hidden; width: 100%; margin-bottom: 1.5em; max-width: 300px; margin-inline: auto; @media screen and (min-width: 1200px){ max-width: 400px; } @media screen and (min-width: 1600px){ margin-bottom: 0; margin-inline: 0; } & .slick-slide > div > a { aspect-ratio: 3/2; & img { block-size: 100%; inline-size: 100%; object-fit: cover; border-radius: 10px; } } } & .property-header { &.flexed { display: block; @media screen and (min-width: 360px){ display: flex; } & .price.text-right { text-align: left; @media screen and (min-width: 360px){ text-align: right; } } } margin-bottom: 10px; & a { font-weight: 600; text-decoration: underline; } } & .quick-stats { border-top: 1px solid #c9c9c9; padding-top: 10px; & .flexed { row-gap: 5px; } } & .quick-stat { font-size: 0.875rem; & i { color: var(--green); margin-right: 8px; } } & .property-actions { margin-top: 15px; & .flexed { display: block; @media screen and (min-width: 1600px){ display: flex; } } & a.button { display: block; text-align: center; font-size: 0.875rem; padding: 10px 5px; border: 1px solid var(--green); margin-bottom: 15px; @media screen and (min-width: 1600px) { margin-bottom: 0; } & i { margin-right: 10px; } &.ghost-button { background: #FFF; color: var(--green); &:hover, &:focus { background-color: var(--dark-green); border-color: var(--dark-green); color: #FFF; } } } } }}.inside-marker{padding:10px;max-width:360px;& h3 { font-size: 1.5rem; & a { font-weight: 600; text-decoration: underline; } } & .map_property_description { & p { font-size: 0.9375rem; } } & a.apartment-image { display: block; line-height: 1; aspect-ratio: 3/2; margin-bottom: 10px; & img { block-size: 100%; inline-size: 100%; object-fit: cover; object-position: center; border-radius: 10px; } } & .available-listing { padding-top: 15px; margin-top: 15px; & > p { margin-bottom: 5px; } & .property_title p { margin-bottom: 0.5rem; font-size: 18px; & a { text-decoration: underline; } } }}