.store-locator {overflow: hidden}
  .store-locator .stores-list {float: left; width: 34%; padding: 100px 20px}
    .store-locator .stores-list .stores-list-inner {display: block; margin: 0 auto; width: 540px; max-width: 100%; overflow: hidden; overflow-y: scroll}
  .store-locator .stores-map {float: left; width: 66%; background-color: var(--off-white); padding: 165px 20px}
    .store-locator .stores-map svg {display: block; max-width: 100%; height: auto; width: 100%; margin: 0 auto}

    .store-locator h3 {margin: 0 0 20px 0}

.store-locator ul {margin: 0; padding: 0}
  .store-locator ul li {list-style: none; margin: 0; padding: 15px 0 15px 0; cursor: default;}
  .store-locator .stores-list-inner > ul > li {border-bottom: 1px solid var(--black-2); padding-left: 5px}

  .store-li:not(.selected){
    cursor: pointer;
    transition: 0.3s;
  }
  .store-li:not(.selected):hover{
    background: rgba(96, 157, 158, 0.2);
  }

  
  .store-locator ul li.has-logo {overflow: hidden}
    .store-locator ul li.has-logo .store-logo {float: left; width: 72px; margin-right: 25px;}
    .store-locator ul li.has-logo .store-logo .image {height: 72px; width: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); border-radius: 6px; overflow: hidden; background-color: var(--white)}
    .store-locator ul li.has-logo .store-logo .image img {display: block; width: 100%; height: auto; position: relative; top: 50%; transform: translateY(-50%);}
    .store-locator ul li.has-logo .store-content {float: left; width: calc(100% - 97px);}

  .store-locator ul li .rest-of-info {max-height: 0; transition: max-height 0.6s ease-out, opacity 0.4s ease-out; overflow: hidden; opacity: 0}
  .store-locator ul li h4 {font-size: 18px; margin: 0 0 10px 0; line-height: 1.4;}
  .store-locator ul li p {font-size: 14px; color: var(--black-6); margin: 0 0 5px 0; line-height: 1.4}
  .store-locator ul li p:last-child {margin: 0}
  .store-locator ul li .description {margin: 10px 0}

  .store-locator ul li a {font-size: 14px; font-weight: bold; color: var(--black-6); cursor: pointer}
  .store-locator ul li li {font-size: 14px; line-height: 1.4; padding: 0}
  .store-locator ul li .expand-collapse {display: none}


  .store-locator ul li.selected {background-color: var(--trim); border-bottom: 1px solid var(--trim); padding: 15px 15px 15px 15px; color: var(--white)}
    .store-locator ul li.selected .expand-collapse {display: inline-block}
    .store-locator li.selected li {color: var(--white)}
    .store-locator li.selected h4 {color: var(--white)}
    .store-locator li.selected p {color: var(--white)}
    .store-locator li.selected a {color: var(--white)}

  .store-locator ul li.selected.expanded .rest-of-info {max-height: 1000px; opacity: 1}


  .store-locator ul li .expand-collapse {cursor: pointer; margin-top: 18px;}
  .store-locator ul li .expand-collapse {padding-right: 53px; padding-left: 0; background: transparent url(../../images/arrow-right.png) 100% 50% / 34.5px 8px no-repeat;}
  .store-locator ul li.expanded .expand-collapse {padding-right: 0; padding-left: 32px; background: transparent url(../../images/arrow-left.png) 0 50% / 15px 8px no-repeat;}



/* CUSTOM SELECT */

.store-locator label {margin-bottom: 5px; display: block}

a.select-field {text-decoration: none !important;}
.select-field * {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.page-stores select {display: none}

.select-field {position: relative; font-size: 14px; background: transparent; cursor: pointer; display: block; text-decoration: none; color: var(--black); border-radius: 6px;}
.select-field {margin-bottom: 15px}

.select-field.active {}
.select-field.active::before {transform: translateY(-50%) rotate(180deg);}
  .select-field .select-inner {}
    .select-field .selected {padding: 14px 34px 14px 18px; border: 1px solid var(--trim); background: var(--trim) url(../../images/dropdown.png) calc(100% - 20px) / 10px 5px no-repeat;  color: var(--white); font-weight: bold; border-radius: 6px; position: relative; z-index: 10; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);}
    .select-field.active .selected {background-image: url(../../images/dropdown-2.png);}

    .select-field .options {display: none; position: absolute; top: calc(100% - 10px); left: 0; width: 100%; background-color: var(--light-trim); z-index: 1000; border: 1px solid var(--light-trim); border-top: 0; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); border-radius: 6px; padding-top: 10px;; z-index: 9}
    .select-field.active .options {display: block;}
      .select-field .options .option {color: var(--black); padding: 0.2755rem 0.5555rem; display: block; text-decoration: none !important; font-weight: bold}
      .select-field .options .option:hover,
      .select-field .options .option.active {color: var(--black); background-color: var(--white)}


.store-locator input {border-radius: 6px; border: 1px solid var(--trim); padding: 0 18px; height: 46px; background-color: var(--white); width: 100%; margin: 0 0 14px 0}

/*.stores-map {position: relative;}*/

/*#Shopfronts_Entry_Points_ATMS_Toilets path,
#Shopfronts_Entry_Points_ATMS_Toilets polygon,
#Shopfronts_Entry_Points_ATMS_Toilets rect {filter: grayscale(100%);}*/
#Shopfronts_Entry_Points_ATMS_Toilets .active {fill: var(--trim)}
#marker {width: 56px; height: 73.5px; background: transparent url(../../images/marker.png) 50% 50% / 100% no-repeat; position: absolute;}