.open-user-map {
  $marker_size: 22px;
  $info_width: 320px;

  $colors: (primary : #2271b1,
      highlight: red);

  input.oum-switch[type="checkbox"] {
    position: relative;
    left: 0;
    top: 0;
    z-index: 0;
    appearance: none;
    visibility: hidden;

    + label {
      position: relative;
      display: block;
      cursor: pointer;
      font-family: sans-serif;
      font-size: 1rem;
      line-height: 22px;
      padding-left: 50px;
      position: relative;
      margin-left: 4px !important;
      margin-top: -16px;

      &::before {
        width: 40px;
        height: 20px;
        border-radius: 30px;
        border: 2px solid #ddd;
        background-color: #eee;
        content: "";
        margin-right: 15px;
        transition: background-color 0.5s linear;
        z-index: 5;
        position: absolute;
        left: 0px;
      }

      &::after {
        width: 20px;
        height: 20px;
        border-radius: 30px;
        background-color: #fff;
        content: "";
        transition: margin 0.1s linear;
        box-shadow: 0px 0px 5px #aaa;
        position: absolute;
        left: 2px;
        top: 2px;
        z-index: 10;
      }
    }

    &:checked + label::before {
      background-color: #2271b1;
    }

    &:checked + label::after {
      margin: 0 0 0 20px;
    }
  }
  
  .box-wrap .map-wrap {
    position: relative;
    padding-top: 65%;

    @media screen and (max-width: 768px) {
      padding-top: 100%;

      &.map-size-mobile-landscape {
        padding-top: 65%; 
      }

      &.map-size-mobile-portrait {
        padding-top: 185%; 
      }
    }

    &.map-size-fullwidth {
      width: 100vw;
      margin-left: 50%;
      transform: translateX(-50%);
    }

    .map {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      height: 100%;

      img {
        width: 100%;
        height: auto;
      }
    }

    .leaflet-map {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      height: 100%;

      a {
        text-decoration: none !important;
      }

      .leaflet-popup-content-wrapper {
        border-radius: 0;

        .leaflet-popup-content {
          margin: 0;
          min-width: 250px;

          .oum_location_image {
            img {
              width: 100%;
              height: auto;
            }
          }

          .oum_location_text {
            padding: 15px;

            .oum_location_address {
              margin-bottom: 10px;
              color: #666;
            }

            .oum_location_name {
              font-size: 1rem;
              font-weight: bold;
              margin-top: 0;
              margin-bottom: 10px;
            }

            .oum_location_custom_fields {
              margin-bottom: 10px;
              a {
                display: block;
              }

              a[href*=facebook] {
                display: inline-block;
                margin: 6px 1px;
                top: -2px;
                position: relative;
                width: 20px;
                height: 20px;
                background: url(images/ico_facebook_50x50.png) no-repeat center center transparent;
                background-size: contain;
                text-indent: -9999px;
                margin: 6px 0;
              }

              a[href*=instagram] {
                display: inline-block;
                margin: 6px 1px;
                top: -2px;
                position: relative;
                width: 20px;
                height: 20px;
                background: url(images/ico_instagram_50x50.png) no-repeat center center transparent;
                background-size: contain;
                text-indent: -9999px;
                margin: 6px 0;
              }

              a[href*=linkedin] {
                display: inline-block;
                margin: 6px 1px;
                top: -2px;
                position: relative;
                width: 20px;
                height: 20px;
                background: url(images/ico_linkedin_50x50.png) no-repeat center center transparent;
                background-size: contain;
                text-indent: -9999px;
                margin: 6px 0;
              }

              a[href*=twitter] {
                display: inline-block;
                margin: 6px 1px;
                top: -2px;
                position: relative;
                width: 20px;
                height: 20px;
                background: url(images/ico_twitter_50x50.png) no-repeat center center transparent;
                background-size: contain;
                text-indent: -9999px;
                margin: 6px 0;
              }

              a[href*=youtube] {
                display: inline-block;
                margin: 6px 1px;
                top: -2px;
                position: relative;
                width: 20px;
                height: 20px;
                background: url(images/ico_youtube_50x50.png) no-repeat center center transparent;
                background-size: contain;
                text-indent: -9999px;
                margin: 6px 0;
              }

              a[href*=soundcloud] {
                display: inline-block;
                margin: 6px 1px;
                top: -2px;
                position: relative;
                width: 20px;
                height: 20px;
                background: url(images/ico_soundcloud_50x50.png) no-repeat center center transparent;
                background-size: contain;
                text-indent: -9999px;
                margin: 6px 0;
              }
            }

            audio {
              margin-top: 15px;
            }
          }
        }
      }

      &.map-style_Custom1 {
        // map tiles
        .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
          filter: saturate(3);
        }
        // label tiles
      }

      &.map-style_Custom2 {
        // map tiles
        .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
          filter: sepia(1) invert(0) saturate(28) hue-rotate(-53deg);
        }

        // label tiles
        .leaflet-tile-pane .leaflet-layer:nth-child(2) .leaflet-tile {
          filter: sepia(0) contrast(1) invert(1) brightness(2);
        }
      }

      &.map-style_Custom3 {
        // map tiles
        .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
          filter: sepia(1) invert(1) saturate(100) brightness(1) hue-rotate(-300deg);
        }

        // label tiles
        .leaflet-tile-pane .leaflet-layer:nth-child(2) .leaflet-tile {
          filter: sepia(0) contrast(1) invert(1) brightness(2);
        }
      }

      .leaflet-control-layers-overlays {
        label {
          img {
            height: 30px;
            margin-right: 6px;
            margin-left: 3px;
          }
        }
      }

      .leaflet-control-locate-location-arrow {
        mask-image: none;
        background-image: url(images/ico_mylocation.svg);
        background-color: transparent;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
      }
    }

    .open-add-location-overlay {
      box-sizing: border-box;
      position: absolute;
      top: 8px;
      right: 13px;
      z-index: 9999;
      background: map-get($colors, "primary");
      color: white;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
      display: flex;
      flex-direction: row;
      align-items: center;
      border-radius: 50px;
      text-align: center;
      text-decoration: none;
      height: 50px;
      cursor: pointer;
      padding: 0;
      width: 50px;
      overflow: hidden;
      transition: width 0.1s ease-in;

      span.btn_icon {
        display: block;
        position: absolute;
        z-index: 1;
        top: calc(50% - 15px);
        left: 10px;
        height: 30px;
        width: 30px;
        font-family: sans-serif;
        font-size: 35px;
        line-height: 25px;
      }

      span.btn_text {
        font-size: 16px;
        line-height: 1;
        padding-left: 45px;
        width: 140px;
        text-align: left;
        word-break: keep-all;
        opacity: 0;
      }

      &:hover,
      &:active {
        background: darken(map-get($colors, "primary"), 10%);
        width: 158px;

        span.btn_text {
          opacity: 1;
          transition: opacity 0.1s ease-in;
          transition-delay: 0.05s;
        }
      }
    }
  }

  .add-location {
    display: none;
    position: fixed;
    z-index: 99999;
    background: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9));
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
    overflow: auto;

    * {
      box-sizing: border-box;
    }

    @media screen and (max-width: 768px) {
      padding-top: 0;
    }

    .location-overlay-content {
      width: 768px;
      max-width: 80%;
      display: flex;
      flex-direction: column;
      background: #fff;
      color: #333;
      padding: 33px 43px;
      border-radius: 5px;

      @media screen and (max-width: 768px) {
        max-width: 100%;
        padding: 15px;
      }

      #oum_add_location {
        h2 {
          text-align: center;
          font-size: 26px;
          margin-bottom: 16px;
          color: #333;

          @media screen and (max-width: 768px) {
            text-align: left;
          }
        }

        label {
          color: #333;

          &.oum-label {
            display: block;
            font-weight: bold;
            margin: 0 0 10px 0;
            font-size: 16px;
          }
        }

        input[type=text],
        input[type=email],
        input[type=url],
        textarea,
        select {
          margin: 0 0 15px;
          font-size: 16px;
          border: 1px solid #888;
          border-radius: 2px;
          color: #333;
          background-color: #fff;
          outline: none;
          line-height: 1;
          padding: 9px 13px;
          width: 100%;
        }

        fieldset {
          display: flex;
          flex-wrap: wrap;
          border: none;
          padding: 0;
          margin: 0 0 15px;
          font-size: 16px;
          color: #333;
          width: 100%;

          legend {
            padding: 0;
            margin: 0 0 10px 0;
            font-weight: bold;
            font-size: 16px;
          }

          >div {
            margin: 0 10px 10px 0;
          }

          input[type=checkbox] {
            position: relative;
            top: 4px;
            width: 20px;
            height: 20px;
            margin-right: 6px;
          }

          input[type=radio] {
            position: relative;
            top: 4px;
            width: 20px;
            height: 20px;
            margin-right: 6px;
          }
        }

        #oum_location_title {
          width: 100%;
        }

        .map-wrap {
          position: relative;
          padding-top: 50%;
          margin: 0 2px 15px;

          @media screen and (max-width: 768px) {
            padding-top: 100%;
          }
      
          #mapGetLocation {
            position: absolute;
            z-index: 1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0; 

            @media screen and (max-width: 768px) {
              .leaflet-geosearch-bar {
                max-width: calc(100% - 67px);
                margin: 10px 10px 0 auto;
              }
            }

            a {
              text-decoration: none !important;
            }
    
            input.glass {
              border: none !important;
              box-shadow: none !important;
              margin: 0 !important;
              outline: none !important;
              font-size: 14px;

              @media screen and (max-width: 768px) {
                padding: 0;
                font-size: 16px;
              }
            }

            &.map-style_Custom1 {
              // map tiles
              .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
                filter: saturate(3);
              }
              // label tiles
            }
      
            &.map-style_Custom2 {
              // map tiles
              .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
                filter: sepia(1) invert(0) saturate(28) hue-rotate(-53deg);
              }
      
              // label tiles
              .leaflet-tile-pane .leaflet-layer:nth-child(2) .leaflet-tile {
                filter: sepia(0) contrast(1) invert(1) brightness(2);
              }
            }
      
            &.map-style_Custom3 {
              // map tiles
              .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
                filter: sepia(1) invert(1) saturate(100) brightness(1) hue-rotate(-300deg);
              }
      
              // label tiles
              .leaflet-tile-pane .leaflet-layer:nth-child(2) .leaflet-tile {
                filter: sepia(0) contrast(1) invert(1) brightness(2);
              }
            }
          }
        }

        #oum_location_address {
          width: 100%;
        }

        #oum_location_text {
          width: 100%;
          height: 100px;
          resize: none;
        }

        .oum_custom_field_description {
          font-size: 14px;
          font-style: italic;
          opacity: 0.8;
          margin-top: -9px;
          padding: 0 9px 20px;
        }

        label {
          font-size: 16px;
          margin-left: 10px;
          margin-right: 10px;

          @media screen and (max-width: 768px) {
            display: block;
            margin-left: 0;
          }
        }

        #oum_location_image {
          color: map-get($colors, "primary");
        }

        .oum_media {
          display: flex;
          margin-bottom: 15px;

          .media-upload {
            position: relative;

            label {
              display: inline-block;
              font-size: 20px;
              padding: 5px;
              margin: 0;
              line-height: 1;
              color: map-get($colors, "primary");
              cursor: pointer;

              &:hover {
                color: darken(map-get($colors, "primary"), 10%);
              }
              
              .dashicons {
                width: 25px;
                height: 25px;
                font-size: 25px;
              }
            }
  
            input[type=file] {
              // display: none;
              position: absolute;
              z-index: -1;
              bottom: 0;
              left: 0;
              opacity: 0;
              height: 100%;
              width: 100%;
              overflow: hidden;
              overflow: hidden;
              padding: 0;
              margin: 0;
            }

            .preview {
              display: inline-block;

              span {
                color: map-get($colors, "primary");
                font-size: 14px;
              }

              .remove-upload {
                display: none;
                opacity: 0.8;
                width: 20px;
                height: 20px;
                border-radius: 100px;
                cursor: pointer;
                line-height: 18px;
                text-align: center;
                background: indianred;
                color: #fff;
                font-family: sans-serif;
                font-size: 17px;
                margin-left: 4px;
                margin-right: 16px;
                position: relative;
                top: 1px;

                &:hover {
                  opacity: 1;
                }
              }

              &.active {
                .remove-upload {
                  display: inline-block;
                }
              }
            }
          }
        }

        #oum_author {
          display: none;
          justify-content: space-between;
          padding-top: 15px;

          &.active {
            display: flex;
          }

          input {
            width: 49%;
          }
        }

        input[type=submit] {
          cursor: pointer;
          font-size: 19px;
          margin: 40px 0 10px;
          background-color: map-get($colors, "primary");
          padding: 15px 30px;
          line-height: 1;
          border: none;
          color: white;
          position: relative;
          left: 50%;
          transform: translateX(-50%);

          &.oum-loading {
            text-indent: -9999px;
            background-image: url(images/loading.gif);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 30px;
            background-size: 40px;
            width: 100px;
            opacity: 0.6;
          }

          &:hover, 
          &:active {
            color: white;
            background-color: darken(map-get($colors, "primary"), 10%);
          }

          @media screen and (max-width: 768px) {
            width: 100%;
          }
        }
      }

      #oum_add_location_error {
        color: red;
      }

      #oum_add_location_thankyou {
        text-align: center;

        h3 {
          color: map-get($colors, "primary");
          margin-bottom: 20px;
        }

        button {
          margin: 30px 0 0;
          cursor: pointer;
          font-size: 19px;
          margin: 40px 0 10px;
          background-color: map-get($colors, "primary");
          padding: 15px 30px;
          line-height: 1;
          border: none;
          color: white;
          position: relative;

          &:hover, 
          &:active {
            color: white;
            background-color: darken(map-get($colors, "primary"), 10%);
          }
        }
      }
    }

    #close-add-location-overlay {
      color: #fff;
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 50px;
      line-height: 1;
      display: inline-block;
      cursor: pointer;

      &:hover {
        color: map-get($colors, "primary");
      }

      @media screen and (max-width: 768px) {
        color: #333;
        top: 7px;
        right: 16px;
      }
    }

    &.active {
      display: flex;
    }
  }

  .add-user-location {
    .map-wrap {
      position: relative;
      padding-top: 100%;
      margin: 15px 0;

      @media screen and (max-width: 768px) {
        padding-top: 100%;
      }
  
      #mapGetLocation {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; 

        @media screen and (max-width: 768px) {
          .leaflet-geosearch-bar {
            max-width: calc(100% - 67px);
            margin: 10px 10px 0 auto;
          }
        }

        input.glass {
          border: none !important;
          box-shadow: none !important;
          margin: 0 !important;
          outline: none !important;
          font-size: 14px;

          @media screen and (max-width: 768px) {
            padding: 0;
            font-size: 16px;
          }
        }

        &.map-style_Custom1 {
          // map tiles
          .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
            filter: saturate(3);
          }
          // label tiles
        }
  
        &.map-style_Custom2 {
          // map tiles
          .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
            filter: sepia(1) invert(0) saturate(28) hue-rotate(-53deg);
          }
  
          // label tiles
          .leaflet-tile-pane .leaflet-layer:nth-child(2) .leaflet-tile {
            filter: sepia(0) contrast(1) invert(1) brightness(2);
          }
        }
  
        &.map-style_Custom3 {
          // map tiles
          .leaflet-tile-pane .leaflet-layer:first-of-type .leaflet-tile {
            filter: sepia(1) invert(1) saturate(100) brightness(1) hue-rotate(-300deg);
          }
  
          // label tiles
          .leaflet-tile-pane .leaflet-layer:nth-child(2) .leaflet-tile {
            filter: sepia(0) contrast(1) invert(1) brightness(2);
          }
        }
      }
    }
  }
}

.open-user-map-image-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  .oum-gallery-item {
    aspect-ratio: 1;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
}

.open-user-map-location-map {
  aspect-ratio: 1.5;
}