/* ===============================================
    1. General Styles
================================================== */
body {
    position: relative;
    margin: 0;
    padding: 0;
    color: #636363;
    font-weight: normal;
    font-style: normal;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    background: white;
    font-family: 'Open Sans', sans-serif;
    font-smoothing: antialiased;
    line-height: 1;
}
.clear {
    position: relative;
    display: block;
    display: table;
    margin-bottom: 30px;
    clear: both;
}
.uppercase { text-transform: uppercase }
strong { font-weight:bold }
/* ===[ Containers ]=== */
.container {
    padding: 50px 0 20px;
    border-bottom: 1px solid #dedede;
}
.main-content { padding-bottom: 30px }
.main-content h1,
.main-content h3 {
    margin-bottom: 28px;
    color: #01b09b;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
}
.main-content h1 {
    font-size: 26px;
}
.main-content p {
    margin-bottom: 30px;
    font-size: 15px;
}
.container-top {
    padding-top: 20px;
    border-bottom: 1px solid #dedede;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
.container-sub {
    margin-top: 20px;
    padding-top: 24px;
    padding-bottom: 10px;
    border-top: 1px solid #f0f0f0;
}
/* ===[ Colors ]=== */
.light-grey-bg { background-color: #fcfcfc }
.price {
    color: #01b09b;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8em;
}
/* ===[ Alignments ]=== */
.center-align { text-align: center }
/* ===[ Dividers ]=== */
hr {
    height: 10px;
    margin: 10px 0;
    border: none;
    clear: both;
}
/* ===[ Header ]=== */
header {
    width: 100%;
    background: rgba(255,255,255,0.9);
    background : white\9;
    nowhitespace: afterproperty;
    z-index: 9999;
}
/* ===[ Sidebar ]=== */
.sidebar {
  /* margin-top: -51px;*/
    padding-top: 0;
}
@media (max-width: 768px) {
    .sidebar { display: none; }
}
/* ===[ Default header styles ]=== */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.6em;
    color: #636363;
    font-weight: normal;
    font-style: normal;
    line-height: 1.2em;
    font-family: 'Open Sans', sans-serif;
    text-rendering: optimizeLegibility;
}
h1 { font-size: 34px }
h2 { font-size: 26px }
h3 { font-size: 23px }
h4 { font-size: 19px }
h5 { font-size: 17px }
h6 { font-size: 16px }
.heading {
    margin-bottom: 50px;
    color: #01b09b;
}
.topheading,
.emailheading {
    margin-bottom: 0;
    padding-top: 25px;
    color: #727272;
    font-style: italic;
}
.small-text {
    display: block;
    float: right;
    margin-right: 39px;
    font-size: 13px;
    overflow: hidden;
    line-height: 1.6em;
}
.emailheading {
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.subheading {
    margin-bottom: 20px;
    color: #01b09b;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
}
p {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.6;
	font-family: 'Open Sans', sans-serif;
    text-rendering: optimizeLegibility;
}
/* ===[ Custom Lists Styles ]=== */
ul,
ol,
dl {
    margin-bottom: 0;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.9;
    list-style: none;
}
/* ===[ Links ]=== */
a {
    color: #01b09b;
    text-decoration: none;
    -moz-transition: background-color 0.4s ease 0s, border 0s ease 0s, color 0.4s ease 0s, opacity 0.4s ease-in-out 0s;
    -o-transition: background-color 0.4s ease 0s, border 0s ease 0s, color 0.4s ease 0s, opacity 0.4s ease-in-out 0s;
    -webkit-transition: background-color 0.4s ease 0s, border 0s ease 0s, color 0.4s ease 0s, opacity 0.4s ease-in-out 0s;
    transition: background-color 0.4s ease 0s, border 0s ease 0s, color 0.4s ease 0s, opacity 0.4s ease-in-out 0s;
}
a:hover { color: #999 }
a:focus { outline: none }
a img { border: none }
.cf-icon {
    position: relative;
    top: -1px;
    margin-right: 30px;
}
.bt-icon {
    float: right;
    margin-right: 0;
}
/* ===[ Icon Blocks ]=== */
.iconbox-container { margin-bottom: 0 }
.image-container { margin-bottom: 50px }
.image-container h6 {
    padding-top: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 0.9em;
}
.image-container p {
    margin: 0.4em 0 0;
    font-size: 13px;
    line-height: 1.4em;
}
.flat-icons,
.img-frame,
.img-frame-footer {
    float: left;
    width: 64px;
    height: 60px;
    margin-right: 20px;
    padding-top: 3px;
    text-align: center;
}
.img-frame {
    position: relative;
    height: 140px;
	width:140px;
    text-align: center;
    line-height: 100px;
	margin-right:20px;
	padding:0;
}
.img-frame img {
		max-width:100%;
	}
.img-frame-footer {
    width: 175px;
    height: 43px;
    margin-right: 20px;
    padding-top: 0;
}
.icon-left-text, .icon-left-text2,
.icon-left-text-footer {
    display: block;
    /* Font Awesome's own CSS matches any class starting with "icon-"
       ([class^="icon-"]) to apply its icon font - purely coincidental
       for this theme's unrelated "icon-left-text*" classes, but it means
       everything inside inherits font-family: FontAwesome unless reset
       here. */
    font-family: inherit;
    padding-top: 0;
    overflow: hidden;
}
.icon-left-text {
    display: block;
    padding-top: 0;
	min-height:145px;
    overflow: hidden;
}
.textbox-sb {
    display: block;
    overflow: hidden;
}
.textbox-sb h4 {
    color: #fff;
    font-weight: 600;
}
.slider-container, .slider-container2, .slider-container3 {
    position: relative;
    height: 424px;
    padding: 40px 20px;
    background-image: url(../images/slide_1.jpg);
}
.slider-container2 {
    background-image: url(../images/slide_2.jpg);
}
.slider-container3 {
    background-image: url(../images/slide_3.jpg);
}
.slider-label {
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    padding: 0 20px 0;
    background-color: rgba(127, 185, 67, 0.95);
    overflow: hidden;
}
.slider-label p {
    margin-bottom: 15px;
    color: #fff;
    font-size: 16px;
    line-height: 1;
}
.testimonial-container {
    padding: 20px 30px;
    border: 1px solid #d6d6d6;
}
.testimonial {
    display: block;
    overflow: hidden;
}
.testimonial p {
    color: #636363;
    font-size: 15px;
    font-style: italic;
}
.quote-marks {
    float: left;
    width: 26px;
    height: 21px;
    margin: 20px 20px 0 0;
}
.icon-left-text-footer { padding-top: 10px }
/* ===[ Info Boxes ]=== */
.infobox,
.infobox2,
.infobox3 {
    position: relative;
    display: block;
    margin-bottom: 25px;
    padding: 28px 32px 32px;
    background-color: #79c142;
    text-align: left;
    border: 1px solid #d6d6d6;
    overflow: hidden;
    z-index: 0;
}
.infobox h4,
.infobox2 h4,
.infobox3 h4 {
    margin-bottom: 0;
    margin: 8px 0 4px;
    color: #fff;
    font-weight: 600;
}
.infobox2 h4 { color: #636363 }
.infobox3 p {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4em;
}
.infobox2 { background-color: #fff }
.sidebar-benefits {
    margin-top: 10px;
}
.sidebar-benefits li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 18px;
    color: #636363;
    font-size: 13px;
    line-height: 1.5em;
}
.sidebar-benefits li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: #01b09b;
    border-radius: 50%;
}
.infobox3 {
    position: relative;
    padding: 30px 35px;
    color: #fff;
    background: #79c142;
}
.infobox {
    position: relative;
    padding: 30px 35px;
    color: #fff;
    background: #01b09b;
}
.ribbon_tl,
.ribbon_br {
    position: absolute;
    width: 99px;
    height: 60px;
}
.ribbon_tl {
    top: 0;
    left: 0;
    background: url(../images/ribbon.png) no-repeat;
}
.ribbon_br {
    right: 0;
    bottom: 0;
    background: url(../images/ribbon2.png) no-repeat;
}
/* ===[ Welcome banner ]=== */
.welcome-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Right-aligns each wrapped line once the languages no longer fit on
       one line, rather than the default left-align. Overridden to
       centre on the fully-stacked mobile view (see the <=500px query). */
    justify-content: flex-end;
    gap: 0.9rem 1.1rem;
    color: #333333;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.welcome-banner .dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    background-color: #79c142;
    border-radius: 50%;
    display: inline-block;
}
.welcome-banner .arabic {
    font-family: 'Noto Sans Arabic', 'Open Sans', sans-serif;
    font-weight: 600;
    direction: rtl;
}
.welcome-banner .hindi {
    font-family: 'Noto Sans Devanagari', 'Open Sans', sans-serif;
    font-weight: 600;
}
@media (max-width: 500px) {
    .welcome-banner { gap: 0.6rem 0.8rem; }
}
/* ===[ Header CTA / registration nav ]===
   Three colour-coded pill buttons (Tenant/Agent/Local Authority
   Registration), per the Figma header design (node 5:183). Local
   Authority gets its own blue (rather than reusing the Agent teal) so
   the three are easy to tell apart at a glance - blue is a deliberate
   nod to the civic/local-government association without clashing with
   the site's teal/green pair. */
.header-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}
.header-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 20px;
    background: #01b09b;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.header-cta-btn:hover,
.header-cta-btn:focus {
    /* Overrides the site-wide "a:hover { color: #999 }" rule, which would
       otherwise win on :hover since it's more specific than the plain
       .header-cta-btn base rule. */
    color: #fff;
}
.header-cta-btn--tenant { background: #79c142; }
.header-cta-btn--tenant:hover,
.header-cta-btn--tenant:focus { background: #67a438; }
.header-cta-btn--agent { background: #01b09b; }
.header-cta-btn--agent:hover,
.header-cta-btn--agent:focus { background: #018b7c; }
/* A softer, muted steel-blue rather than the vivid GOV.UK blue - keeps
   the civic association while sitting more calmly alongside the site's
   muted green/teal pair instead of overpowering them. */
.header-cta-btn--council { background: #2e6a9e; }
.header-cta-btn--council:hover,
.header-cta-btn--council:focus { background: #275a86; }
.header-cta-btn.is-active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75);
}
/* ===[ Share Block ]=== */
.share-block { margin: 12px 0 0 }
.header-right > .share-block {
    /* Always renders at zero height (the AddThis widget is inert), but
       still ate into the .header-right flex column's "gap" as if it were
       a real row - pushing the block's own bottom edge (used to bottom-
       align the buttons with the tagline) below the actual button row.
       Cancel that one gap unit so it stays invisible either way. */
    margin-top: -30px;
}

/* ===[ Header layout ]===
   Two blocks side by side: logo+tagline on the left, and on the right a
   welcome-banner+email line sitting above the three registration buttons.
   Matches the Figma header design (node 5:183, DSS_Select_New). */
.header-flex {
    display: flex;
    flex-wrap: nowrap;
    /* Bottom-align the two blocks, so the buttons line up with the
       bottom of the tagline text rather than the top of the logo. */
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 0 20px;
}
.header-left {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 12px;
}
.header-right {
    display: flex;
    /* flex-shrink (not the default 0-shrink of "auto") plus min-width: 0
       lets this block give up its natural/preferred width and shrink as
       the header narrows - its own children (the welcome-banner+email
       line, and the button group) each wrap internally within whatever
       width that leaves, instead of the whole block dropping onto its
       own line below the logo the moment it can't fit at full size. */
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 30px;
}
.header-right__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px 40px;
}
.header-flex .topheading {
    padding-top: 0;
    max-width: 330px;
}
.header-flex .emailheading {
    padding-top: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

/* ---[ Tablet / narrow desktop (501-992px): logo keeps its spot, welcome
   + email stay beside it, buttons drop to their own full-width row ]---
   Below 993px there isn't room to also fit three buttons on the logo's
   row, but the logo and the welcome/email line still fit fine together -
   only the buttons need to move. Switching .header-flex to a 2-column
   grid (rather than wrapping the whole right-hand block, which used to
   drag welcome/email down with the buttons) lets the logo+welcome pairing
   stay exactly as it is on desktop, while header-cta is placed on an
   explicit second row spanning both columns. .header-right is unwrapped
   (display: contents) so its own children - header-right__top and
   header-cta - become direct grid items instead of a nested column. */
@media (min-width: 501px) and (max-width: 992px) {
    .header-flex {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        column-gap: 20px;
        row-gap: 16px;
        padding: 4px 0 20px;
    }
    .header-left {
        grid-column: 1;
        grid-row: 1;
    }
    .header-right {
        display: contents;
    }
    .header-right__top {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
    }
    /* Horizontal, filling the full width of the row (both grid columns)
       rather than staying a right-aligned cluster or stacking. */
    .header-cta {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }
    .header-cta-btn {
        flex: 1 1 0;
    }
    /* Inert (AddThis never actually renders) - hide rather than let it
       take an auto-placed grid cell of its own below the buttons. */
    .header-right > .share-block {
        display: none;
    }
}
/* ---[ Mobile view (<=500px): fully stacked and centred ]--- */
@media (max-width: 500px) {
    .header-flex {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 4px 0 20px;
    }
    .header-left {
        align-items: center;
        width: 100%;
    }
    .share-block {
        display: none;
    }
    /* Centred across the full page rather than confined under the
       (left-aligned) logo. */
    .header-flex .topheading {
        max-width: none;
        text-align: center;
    }
    .header-right {
        align-items: center;
        width: 100%;
    }
    .header-right__top {
        justify-content: center;
        width: 100%;
    }
    /* Each sits on its own line and is centred; the welcome banner's
       font size flows fluidly with the viewport (clamp) so its longer
       set of languages keeps fitting on one line as the window resizes,
       rather than jumping between fixed sizes at fixed breakpoints. */
    .welcome-banner {
        flex: 1 1 100%;
        justify-content: center;
        font-size: clamp(9px, 2.7vw, 13px);
    }
    .header-flex .emailheading {
        flex: 1 1 100%;
        justify-content: center;
        /* Fixed, not fluid - stays readable at 13px regardless of
           viewport width, since it already has its own line to itself. */
        font-size: 13px;
    }
    .emailheading a {
        white-space: normal;
        word-break: break-word;
    }
    /* Full-width, stacked buttons rather than 3 cramped side-by-side
       pills - each keeps its comfortable >=48px tap target instead of
       shrinking to fit, which is the easier/safer mobile pattern for a
       short, high-value list of actions like this. */
    .header-cta {
        width: 100%;
    }
    .header-cta-btn {
        flex: 1 1 100%;
        width: 100%;
    }
}
/* ===[ Tablet sidebar fix ]===
   The sidebar (misconception blurb + testimonial slider) stacks full-width
   at tablet widths, which also seems to be what confuses flexslider into
   rendering every slide side by side instead of one at a time. Put the two
   blocks side by side instead: text on the left, slider on the right, both
   the slider's own natural height - the text column stretches to match via
   the grid and centers its content vertically rather than being forced
   into a fixed height of its own. */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: stretch;
    }
    .sidebar-infobox-col,
    .sidebar-slider-col {
        width: auto;
        float: none;
        display: flex;
    }
    .sidebar-infobox-col > .row,
    .sidebar-slider-col > .row {
        width: 100%;
        max-width: none;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    .sidebar-infobox-col .infobox {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        margin-bottom: 0;
    }
    .sidebar-slider-col .flexslider {
        flex: 1 1 auto;
        margin-bottom: 0;
    }
}
/* ===[ Tablet property showcase grid ]===
   The property cards stack one per row at tablet widths (Foundation's
   large-4 columns fall back to 100% below the "large" breakpoint) - lay
   them out two per row instead. */
@media (min-width: 769px) and (max-width: 1024px) {
    .property-showcase > .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
    }
    .property-showcase > .row > .large-12.columns {
        grid-column: 1 / -1;
    }
    .property-showcase .image-container {
        width: auto;
        float: none;
    }
}
/* ===[ Footer ]=== */
.footer {
    padding: 40px 0;
    background: #2e3d3b;
}
.footer h4 {
    margin-bottom: 4px;
    color: #79c142;
}
.contacts-icon-align {
    float: left;
    padding-right: 10px;
    font-size: 14p;
}
.footer-links {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 20px;
}
.footer-links a {
    display: inline-block;
    color: #79c142;
    font-size: 13px;
    font-weight: 600;
}
.footer-links a:hover {
    color: #fff;
}
.footer-regions {
    clear: both;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-regions__heading {
    margin-bottom: 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.footer-regions__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-regions__list a {
    color: #b7c4c1;
    font-size: 13px;
}
.footer-regions__list a:hover {
    color: #79c142;
}

/* ===[ Breadcrumbs ]=== */
.breadcrumbs {
    margin: 0 0 20px;
}
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}
.breadcrumbs li {
    display: flex;
    align-items: center;
    color: #918f8f;
}
.breadcrumbs li:not(:last-child)::after {
    content: "\203A";
    margin: 0 8px;
    color: #cfcfcf;
}
.breadcrumbs a {
    color: #727272;
}
.breadcrumbs a:hover {
    color: #01b09b;
}
.breadcrumbs span[aria-current] {
    color: #4a4a4a;
}

/* ===[ Location (region/district) pages ]=== */
.location-intro {
    margin-bottom: 30px;
}
.location-intro p {
    font-size: 15px;
    line-height: 1.7;
}
.district-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 28px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
@media (max-width: 500px) {
    .district-list { grid-template-columns: 1fr; }
}
.district-list a {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

/* ===[ Local authorities page ]=== */
.la-hero {
    position: relative;
    margin-bottom: 20px;
    border: 1px solid #b8e6d3;
    border-radius: 4px;
    overflow: hidden;
    background: #eafaf3 url(../images/section_bg.jpg) center / cover no-repeat;
}
.la-hero__content {
    padding: 34px 36px;
    background: linear-gradient(90deg, rgba(234, 250, 243, .95) 0%, rgba(234, 250, 243, .88) 100%);
}
.la-hero__lead {
    margin-bottom: 14px;
    color: #01b09b;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4em;
}
.la-hero__content p:not(.la-hero__lead) {
    max-width: 560px;
    font-size: 15px;
}
.la-hero__btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 3px;
    background: #01b09b;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s ease;
}
.la-hero__btn:hover,
.la-hero__btn:focus {
    background: #018b7c;
    color: #fff;
}

.council-services {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
@media (min-width: 600px) {
    .council-services { grid-template-columns: 1fr 1fr; }
}
.service-card {
    position: relative;
    padding: 24px 22px 22px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    background: #fff;
}
.service-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #01b09b;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.service-card__title {
    margin-bottom: 10px;
    color: #4a4a4a;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
}
.service-card__text {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.6em;
}

.la-enquiry {
    padding-top: 30px;
    border-top: 1px solid #e4e4e4;
}
.la-closing {
    padding: 30px 0;
    border-top: 1px solid #e4e4e4;
}
.la-closing p:last-child {
    margin-bottom: 0;
}

/* ---[ Sidebar pull-out panels: photo + coverage map teaser ]--- */
.sidebar-photo-panel {
    margin-bottom: 25px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.sidebar-photo-panel__img {
    display: block;
    width: 100%;
    height: auto;
}
.sidebar-photo-panel__caption {
    margin: 0;
    padding: 14px 16px;
    color: #636363;
    font-size: 13px;
    line-height: 1.5em;
}
.sidebar-map-panel {
    display: block;
    width: 100%;
    margin-bottom: 25px;
    padding: 0;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    text-align: left;
}
.sidebar-map-panel__img {
    display: block;
    width: 100%;
    height: auto;
}
.sidebar-map-panel__label {
    display: block;
    padding: 12px 16px;
    color: #01b09b;
    font-size: 13px;
    font-weight: 600;
}