.sellers-header {
   padding: 0 0 40px;
   display: flex;
   align-items: flex-end;

   .sellers-title {
      margin-right: 60px;
   }

   h6 {
      margin-bottom: 25px;
   }

   h1 {
      margin: 0;
   }
}

.sellers-map-outer {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 750px;

   .map-sellers {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
   }

   .map-inactive {
      &::before {
         content: "";
         display: block;
         position: absolute;
         z-index: 1;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: $black;
         opacity: .3;
      }
   }

   .sellers-map-label {
      width: 41px;
      height: 41px;
      display: none !important;
      align-items: center;
      justify-content: center;
      background: $brand-primary;
      border-radius: 50%;
      overflow: visible !important;

      i {
         color: $white;
         font-size: 18px;
      }

      &::after {
         content: "";
         display: block;
         position: absolute;
         border: 1px solid $brand-primary;
         border-radius: 50%;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         transition: all $transition-speed;
      }

      &.hover {
         &::after {
            top: -8px;
            left: -8px;
            right: -8px;
            bottom: -8px;
         }
      }
   }

   .sellers-map-label-h,
   .sellers-map-label-r {
      background: $brand-secondary;

      &::after {
         border-color: $brand-secondary;
      }
   }

   .cluster {
      display: flex;
      align-items: center;
      justify-content: center;
      color: $white;
      font-size: 20px;

      > div {
         top: calc(50% - 12px);
      }
   }
}

.seller-map-info {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   font-size: $font-size-base;
   max-width: 370px;

   h5 {
      font-size: $font-size-larger;
   }

   h5,
   a {
      width: 100%;
   }

   .seller-street,
   .seller-opening {
      width: 50%;
   }

   .seller-opening {
      max-width: 140px;
   }
}

@media screen and (max-width: 1374px) {
   .sellers-header {
      flex-wrap: wrap;

      .sellers-title {
         margin-right: 0;
         margin-bottom: 40px;
         flex: 100%;
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .sellers-map-outer {
      height: auto;
      flex-wrap: wrap;

      .map-sellers {
         position: relative;
         height: 750px;
         width: 100%;
      }

      .map-inactive {
         height: 0;
      }
   }
}
