.svv-wgt-modal-container,
#svv-wgt-app {
  .svv-event-card-item,
  .svv-bundle-card-item {
    .item-provider-label {
      display: inline-block;
      //padding-left: 15px;

      .label-value {
        color: $svv_white;
        padding: 5px 10px 4px 10px;
        font-size: 12px;
        text-transform: capitalize;
        line-height: 1;
        border-radius: 8.5px;
        font-weight: 600;

        @include media-breakpoint-down(sm) {
          font-size: 8px;
        }
      }

      &.zoom {
        .label-value {
          //border: 1px solid $svv-blue_dark;
          background-color: $svv-text_black;
        }
      }
      &.offline {
        .label-value {
          border: 1px solid #46d26c;
          background-color: #359857;
        }
      }

      &.mobile {
        display: none;
      }

      &.small {
        padding-left: 5px;
        .label-value {
          padding: 3px 10px;
          font-size: 11px;
        }
      }

      @include media-breakpoint-down(md) {
        display: none;
        &.mobile {
          display: block;
        }
      }
    }

    .svv-event-metadata-container {
      color: $svv-text_gray;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      font-size: 12.5px;
      // @include media-breakpoint-down(md) {
      //   margin-left: 108px;
      // }
      svg {
        width: 20px;
        height: auto;
        color: $svv-text_gray;
        margin-right: 5px;
        padding-top: 3px;
      }

      .type-list-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        @include media-breakpoint-down(sm) {
          margin-bottom: 0;
        }
        //width: 24%;
        //min-width: 110px;
        margin-bottom: 10px;
        //flex: 1;
        flex-wrap: wrap;
        margin-right: 10px;

        .item-icon {
          line-height: 1;
          svg {
            fill: $svv_text_secondary;
          }
        }
        .item-value {
          color: $svv_text_secondary;
          line-height: 1;
          font-size: 12.5px;
          display: flex;
          flex-wrap: wrap;
          margin-top: 3px;
        }

        @include media-breakpoint-down(md) {
          margin-bottom: 5px;
          .item-value {
            font-size: 12px;
          }
        }
      }
    }

    .soc-sharing-buttons-container {
      display: absolute;

      .soc-sharing-buttons-inner-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
      }

      .close-share-controls {
        position: absolute;
        top: 15px;
        right: 15px;
      }
      .sharing-section-title {
        color: $svv-blue_dark;
        font-weight: 600;
        font-size: 16px;
      }

      .controls-container {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
    }

    .svv-event-bundle-events-list-container {
      margin-bottom: 10px;

      .bundle-events-list-title {
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        color: $svv-blue_dark;

        .svv-events-list-arrow-icon {
          width: 14px;
          height: 11px;
          fill: $svv-blue_dark;
          margin-left: 2px;
          position: relative;
          top: 1px;
        }
      }
      .bundle-events-list-wrapper {
      }
      .bundle-event-list-item {
        display: block;
        //align-items: center;
        //cursor: pointer;
        font-size: 14px;
        padding-left: 15px;
        position: relative;

        &:after {
          content: "";
          display: block;
          background-color: $svv-blue_dark;
          width: 4px;
          height: 4px;
          border-radius: 10px;
          position: absolute;
          left: 4px;
          top: 11px;
        }
      }
      .bundle-item-title {
      }
      .bundle-item-time {
        margin-left: 5px;
        color: $svv-text_gray;
      }
    }
  }

  .svv-event-card-item.list-layout-item,
  .svv-bundle-card-item.list-layout-item {
    border: 1px solid $svv-elements-border;
    //padding: 15px;
    background-color: $svv_white;
    transition: $global-transition;
    //max-width: 200px;
    //overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: row;
    // padding-top: 20px;
    //padding-bottom: 10px;
    padding-right: 20px;

    margin-top: 20px;
    position: relative;
    flex-shrink: 0;
    flex-basis: auto;
    border-radius: 14.5px;
    width: calc(100% - 22px);
    box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1),
      0 1px 3px 0 rgba(0, 0, 0, 0.1);
    @include media-breakpoint-down(md) {
      flex-direction: column;
      // padding-right: 10px;
      // padding-left: 10px;
      padding-right: 5px;
    }

    .svv-events-group-separator-label {
      position: absolute;
      line-height: 1;
      top: -14px;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      border: 1px solid $svv-text_border_gray;
      background-color: $svv_common_background;
      //color: $svv_text_gray;
      color: $svv-text_gray;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 190px;
      border-radius: 50px;
      padding: 6px 5px 8px 5px;
      z-index: 10;
      font-weight: 500;

      @include media-breakpoint-down(md) {
        top: -12px;
        padding: 6px 5px 5px 5px;
      }
      @include media-breakpoint-down(sm) {
        font-size: 11px;
      }
    }

    .svv-event-image-container {
      padding-right: 20px;
      @include media-breakpoint-down(md) {
        display: none;
      }
    }
    .svv-event-image {
      display: block;
      border-radius: 12.5px 0 0 12.5px;
      height: 100%;
      width: 190px;
      object-fit: cover;
      @include media-breakpoint-down(sm) {
        border-radius: 12.5px;
      }

      @include media-breakpoint-down(md) {
        height: 80px;
        width: 100px;
        min-width: 100px;
        margin-right: 10px;
      }
    }
    .svv-event-image-square {
      display: block;
      border-radius: 8px;
      height: 130px;
      width: 130px;

      @include media-breakpoint-down(md) {
        height: 100px;
        width: 100px;
        min-width: 100px;
        margin-right: 10px;
      }
    }

    .svv-event-main-info-outer-container {
      display: flex;
      flex-direction: row;
    }

    .svv-event-details-container {
      display: flex;
      flex-direction: column;
      flex: 1;

      .svv-event-image {
        display: none;

        @include media-breakpoint-down(md) {
          display: block;
        }
      }

      .svv-event-main-info-container {
        padding-top: 14px;
        display: flex;
        flex-direction: column;

        @include media-breakpoint-down(md) {
          flex: 1;
        }
      }
      .svv-event-datetime {
        font-size: 12.5px;
        color: $svv_text_secondary;
        font-weight: 600;
        display: flex;
        align-items: center;

        @include media-breakpoint-down(md) {
          display: flex;
          justify-content: space-between;
        }
      }
      .svv-event-topic {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 10px;

        a {
          margin-right: 10px;
        }
      }
      .svv-event-short-description {
        color: $svv-text_gray;
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 25px;

        &.bundle-description {
          margin-bottom: 15px;
        }
      }
    }

    .svv-purchase-controls-container {
      // height: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      // min-width: 96px;
      margin-left: 40px;

      .svv-event-controls {
        padding: 6.5px 0 14px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        height: 100%;
        @include media-breakpoint-down(sm) {
          flex-direction: row;
          width: 100%;
          padding: 3px 0 5px 0;
        }
        a {
          //display: block;
          // width: 96px;
          @include media-breakpoint-down(md) {
            margin-left: 10px;

            &:first-of-type {
              margin-left: 0;
            }
          }
        }

        svg {
          width: 25px;
          height: auto;
        }
      }
      .svv-add-to-cart-btn {
        color: $svv_white;
        display: flex;
        align-items: center;
        vertical-align: middle;
        justify-content: center;
        background-color: $svv-brand-primary;
        border: 1px solid $svv-brand-primary;
        padding: 7px 14px;
        // height: 31.5px;
        //min-width: 110px;
        line-height: 1;
        //z-index: 22;
        border-radius: 10.5px;
        //margin-right: 10px;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1),
          0 1px 3px 0 rgba(0, 0, 0, 0.1);
        transition: $global-transition;
        &:hover {
          transition: $global-transition;
          background-color: $svv-brand-secondary;
          color: $svv-brand-primary;
          border-color: $svv-brand-secondary;
        }
        &-sold-out {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: $svv_text_gray;
          color: $svv_white;
          // border: 1px solid $svv-blue_ultra_dark;
          padding: 8px 20px 3px 20px;
          height: 31.5px;
          //min-width: 110px;

          //z-index: 22;
          border-radius: 10.5px;
          //margin-right: 10px;
          font-size: 14px;
          &:hover {
            cursor: pointer;

            background-color: $svv_text_gray;
            color: $svv_text_black;
          }
        }
      }
      .svv-social-share-btn {
        color: $svv-brand-primary;
        width: 14px;
        height: 14px;
        border-radius: 10.5px;
        background-color: $svv_white;
        display: flex;
        align-items: center;
        padding: 8.5px;
        // border: 1px solid #e2e8f0;
        border: none;
        &:hover {
          color: $svv-brand-primary;
          border: none;
          background-color: $svv-brand-secondary;

          border-radius: 8.5px;
        }
      }

      @include media-breakpoint-down(md) {
        margin-left: 0;
        flex-direction: row-reverse;
      }
    }

    .svv-social-share-btn {
      display: block;
      color: $svv-brand-primary;
      margin-left: 10px;
      position: relative;
      top: 4px;
      width: 35px;
      height: 33px;
      border-radius: 10.5px;
      background-color: $svv_white;
      border: 1px solid $svv-elements-border;

      @include media-breakpoint-down(md) {
        margin-left: 10px;

        &:first-of-type {
          margin-left: 0;
        }
      }
      svg {
        width: 20px;
        height: auto;
      }
      &:hover {
        color: $svv-text_black;
      }
    }

    .svv-event-price {
      font-size: 20px;
      font-weight: 600;
      color: $svv-text_gray;
      text-align: right;

      span:first-of-type {
        margin-right: 3px;
      }
      .svv-event-quantity {
        font-size: 14px;
        display: block;
        font-weight: normal;
      }
    }
  }

  .svv-event-card-item.grid-layout-item,
  .svv-bundle-card-item.grid-layout-item {
    border: 1px solid $svv-elements-border;
    background-color: $svv_white;
    transition: $global-transition;
    // max-width: 205px;
    // width: 205px;
    height: 100%;
    display: flex;
    flex-direction: column;
    // margin: 0px 10px;
    margin-left: 0px;
    border-radius: 14.5px;
    justify-content: space-between;
    box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1),
      0 1px 3px 0 rgba(0, 0, 0, 0.1);
    .svv-grid-layout-separator {
      border-top: 1px solid $svv-elements-border;
      margin: 14px 15px;
      padding-top: 15px;
    }
    &-fluid {
      max-width: 205px;
      width: 205px;
      height: auto;
      margin: 15px 10px;
    }
    @include media-breakpoint-down(xs) {
      max-width: 97%;
      width: 97%;
      margin: 5px;
    }

    .svv-event-image-container {
      //@include media-breakpoint-down(md) {
      //  display: none;
      //}
      position: relative;
    }
    .svv-event-image {
      display: block;
      border-radius: 13.5px 13.5px 0 0;
      height: 180px;
      width: 100%;

      //@include media-breakpoint-down(md) {
      //  height: 80px;
      //  width: 100px;
      //  min-width: 100px;
      //  margin-right: 10px;
      //}
    }
    .svv-event-image-square {
      display: block;
      border-radius: 7px;
      width: 100%;
      aspect-ratio: 1 / 1;
    }
    .svv-event-main-info-container {
      padding: 5px;
    }

    .svv-event-datetime-top {
      padding: 5px 15px;
      position: absolute;
      top: 0;
      left: 10px;
      background-color: rgba(0, 0, 0, 0.8);
      color: $svv_white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 1.2;

      .datetime-top-date {
        font-size: 24px;
        font-weight: 600;
        line-height: 1;
      }

      .datetime-top-month {
        font-size: 14px;
        font-weight: 600;
      }
    }

    .item-provider-label {
      @include media-breakpoint-down(md) {
        display: block;
      }
    }

    .svv-event-topic {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
      //margin-bottom: 10px;

      //a {
      //  margin-right: 10px;
      //}
    }

    .full-event-date-time {
      color: $svv_text_secondary;
      font-size: 12.5px;
      margin-bottom: 10px;
      font-weight: 500;
    }

    .provider-social-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 5px;
      position: absolute;
      top: 10px;
      left: 10px;
      width: 90%;
    }

    .svv-event-short-description {
      color: $svv-text_gray;
      font-size: 14px;
      line-height: 1.2;
      margin-bottom: 5px;

      &.bundle-description {
        margin-bottom: 15px;
      }
    }

    .svv-social-share-btn {
      display: flex;
      justify-items: center;
      align-items: center;
      flex-direction: row;
      justify-content: center;
      color: $svv-brand-primary;
      margin-left: 10px;
      position: relative;
      top: 4px;
      width: 35px;
      height: 33px;
      border-radius: 10.5px;
      background-color: $svv_white;
      border: 1px solid $svv-elements-border;

      @include media-breakpoint-down(md) {
        margin-left: 10px;

        &:first-of-type {
          margin-left: 0;
        }
      }
      svg {
        width: 20px;
        height: auto;
      }
      &:hover {
        color: $svv-text_black;
      }
    }

    .svv-event-metadata-container {
      padding: 0 5px;

      .type-list-item {
        margin-bottom: 5px;
      }
    }

    .svv-purchase-controls-container {
      padding: 5px;
    }

    .svv-add-to-cart-btn {
      color: $svv_white;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $svv-brand-primary;
      border: 1px solid $svv-brand-primary;
      // padding: 7px 14px 7px 14px;
      height: 31.5px;
      width: 96px;
      align-self: flex-end;
      margin-left: auto;
      //min-width: 110px;
      line-height: 1;
      // width: 100%;
      //z-index: 22;
      border-radius: 7px;
      //margin-right: 10px;
      font-size: 14px;
      cursor: pointer;
      transition: $global-transition;
      box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1),
        0 1px 3px 0 rgba(0, 0, 0, 0.1);
      &:hover {
        transition: $global-transition;
        background-color: $svv-brand-secondary;
        color: $svv-brand-primary;
        border-color: $svv-brand-secondary;
      }
      &-sold-out {
        display: flex;
        align-items: center;
        justify-content: center;

        background-color: $svv_text_gray;
        color: $svv_white;
        // display: block;
        text-align: center;
        // border: 1px solid $svv-blue_ultra_dark;
        // padding: 7px 14px 7px 14px;
        height: 30px;
        //min-width: 110px;
        line-height: 1;
        //z-index: 22;
        border-radius: 100px;
        //margin-right: 10px;
        font-size: 14px;
        &:hover {
          cursor: pointer;

          background-color: $svv_text_gray;
          color: $svv_text_black;
        }
      }
    }

    .svv-event-price {
      font-size: 20px;
      font-weight: 600;
      color: $svv-text_gray;
      text-align: right;

      span:first-of-type {
        margin-right: 3px;
      }
      .svv-event-quantity {
        font-size: 14px;
        display: block;
        font-weight: normal;
        float: left;
        padding-top: 3px;
      }
    }

    .soc-sharing-buttons-container {
      display: absolute;

      .soc-sharing-buttons-inner-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
      }

      .close-share-controls {
        position: absolute;
        top: 15px;
        right: 15px;
      }
      .sharing-section-title {
        color: $svv-blue_dark;
        font-weight: 600;
        font-size: 16px;
      }

      .controls-container {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
    }
    .social-sharing-buttons-container {
      flex-direction: column;
    }
  }

  .svv-bundle-card-item.grid-layout-item {
    .provider-social-container {
      margin-bottom: 5px;
      align-items: center;

      .full-event-date-time {
        margin-bottom: 0;
      }
    }

    .svv-event-bundle-events-list-container {
    }

    .bundle-events-list-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      padding: 35px 10px 10px 10px;
      background-color: rgba(255, 255, 255, 0.96);
      border-radius: 8px;

      .bundle-events-list-inner-wrapper {
        overflow-y: scroll;
        height: 100%;
        width: 100%;
        padding-left: 10px;
      }

      .bundle-events-list-control {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
      }
    }
  }
}