File "_generic.scss"

Full path: /var/www/html/cemeau/wp-content/plugins/wp-statistics/assets/dev/sass/generic/_generic.scss
File size: 32.88 KB
MIME-type: text/csv
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

#wp_statistics_editor_meta_box,
#wp-statistics-summary-widget,
#wp-statistics-words-widget,
#wps_hits_postbox,
#wps_top_visitors_postbox,
#wps_search_postbox,
#wps_words_postbox,
#wps_recent_postbox,
#wps_map_postbox,
#wps_pages_postbox,
#wps_summary_postbox,
#wps_browsers_postbox,
#wps_referring_postbox,
#wps_countries_postbox,
#wps_pages_postbox,
#wp-statistics-about-widget,
#wp-statistics-post-widget,
.wps-wrap {
  .postbox .inside {
    padding: 0;
    margin-bottom: 24px;
  }

  .postbox-header .handle-actions {
    display: flex;
    align-items: center;
    margin-top: 8px;

    .handlediv:not(.wps-refresh) {
      height: unset !important;
    }

    .wps-refresh {
      width: 21px;
      height: 21px;
      top: unset;
      background: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgMTIgMTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDEuN0M0LjM1MDg2IDEuNyAyLjg5NTA1IDIuNTMxNzYgMi4wMzA2NiAzLjhIMy42VjVIMFYxLjRIMS4yVjIuODk5NjJDMi4yOTQyOSAxLjQ0MyA0LjAzNjU4IDAuNSA2IDAuNUM5LjMxMzY4IDAuNSAxMiAzLjE4NjI5IDEyIDYuNUgxMC44QzEwLjggMy44NDkwMyA4LjY1MDk4IDEuNyA2IDEuN1pNMS4yIDYuNUMxLjIgOS4xNTA5OCAzLjM0OTAzIDExLjMgNiAxMS4zQzcuNjQ5MTYgMTEuMyA5LjEwNDk0IDEwLjQ2ODIgOS45NjkzNiA5LjJIOC40VjhIMTJWMTEuNkgxMC44VjEwLjEwMDRDOS43MDU3MiAxMS41NTcgNy45NjM0NCAxMi41IDYgMTIuNUMyLjY4NjI5IDEyLjUgMCA5LjgxMzY4IDAgNi41SDEuMloiIGZpbGw9IiM1NjU4NUEiLz4KPC9zdmc+Cg==") center center no-repeat !important;

      &:hover {
        background: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgMTIgMTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDEuN0M0LjM1MDg2IDEuNyAyLjg5NTA1IDIuNTMxNzYgMi4wMzA2NiAzLjhIMy42VjVIMFYxLjRIMS4yVjIuODk5NjJDMi4yOTQyOSAxLjQ0MyA0LjAzNjU4IDAuNSA2IDAuNUM5LjMxMzY4IDAuNSAxMiAzLjE4NjI5IDEyIDYuNUgxMC44QzEwLjggMy44NDkwMyA4LjY1MDk4IDEuNyA2IDEuN1pNMS4yIDYuNUMxLjIgOS4xNTA5OCAzLjM0OTAzIDExLjMgNiAxMS4zQzcuNjQ5MTYgMTEuMyA5LjEwNDk0IDEwLjQ2ODIgOS45NjkzNiA5LjJIOC40VjhIMTJWMTEuNkgxMC44VjEwLjEwMDRDOS43MDU3MiAxMS41NTcgNy45NjM0NCAxMi41IDYgMTIuNUMyLjY4NjI5IDEyLjUgMCA5LjgxMzY4IDAgNi41SDEuMloiIGZpbGw9IiMwMDAiLz4KPC9zdmc+Cg==") center center no-repeat !important;
      }
    }
  }

  .postbox-header.postbox-toggle {
    cursor: pointer;

    .hndle {
      cursor: pointer !important;
    }

    h2 {
      margin: 0;
    }
  }

  .wps-ph-col-12 {
    width: 100%;
    max-width: 100%;

    .wps-ph-picture, .wps-ph-row {
      max-width: 100%;
    }
  }
}

.wps-wrap, .rtl .wps-wrap {
  .wps-postbox-wrap.postbox {
    padding: 20px 32px;
    @media(max-width: 600px) {
      padding: 20px 15px;
    }

    .postbox-header {
      border-bottom: 0 !important;
      padding: 0 !important;

      h2 {
        padding: 0;
        margin-bottom: 25px;
        margin-top: 0;
        font-size: 14px;
        font-weight: 500;
        line-height: 16.41px;
        display: flex;
        justify-content: flex-start;
        cursor: default;

        .wps-tooltip {
          flex-grow: unset;
        }
      }
    }
  }

  .postbox-container {
    border-radius: 8px;
    overflow: visible;

    .postbox {
      border-radius: 8px;
      border: 1px solid $light-color;
    }
  }
}

.postbox-container {
  &--two-col {
    display: flex;
    gap: 8px;
    flex-direction: column;
    @media(min-width: 759px) {
      flex-direction: row;
    }

    &.postbox-container--visitor {
      @media(min-width: 759px) {
        .postbox-container--first-col {
          width: 356px;
        }
        .postbox-container--second-col {
          width: calc(100% - 360px);
        }
      }
    }

    .postbox-container--first-col {
      display: inline-flex;
      flex-direction: column;
      gap: 8px;
      @media(min-width: 759px) {
        width: 304px;
      }
    }

    .postbox-container--second-col {
      display: inline-flex;
      flex-direction: column;
      gap: 8px;
      margin: 0;
      @media(min-width: 759px) {
        width: calc(100% - 308px);
        float: none;
      }
    }

    .wps-card {
      padding: 24px;
      gap: 24px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid #DADCE0;
      display: flex;
      flex-direction: column;

      &--table {
        gap: 8px;

        &__body {
          margin-right: -24px;
          margin-left: -24px;

          .o-table-wrapper {
            border-radius: 0 !important;
          }

          table {
            margin-top: 0;
          }
        }
      }

      &__title {
        h2 {
          margin: 0;
          color: #0C0C0D;
          font-size: 14px;
          font-weight: 500;
          line-height: 16.41px;
          display: flex;
          align-items: center;
          gap: 4px;
          padding: 0;
        }

        p {
          font-size: 12px;
          font-weight: 400;
          line-height: 14.06px;
          color: #56585A;
        }

        .wps-tooltip {
          display: flex;

          .wps-tooltip-icon.info {
            background-image: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE1IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTUgMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03LjQ5OTY3IDAuMzQzNzVDMy44MTc2NyAwLjM0Mzc1IDAuODMzMDA4IDMuMzI4NDIgMC44MzMwMDggNy4wMTA0MkMwLjgzMzAwOCAxMC42OTI0IDMuODE3NjcgMTMuNjc3MSA3LjQ5OTY3IDEzLjY3NzFDMTEuMTgxNyAxMy42NzcxIDE0LjE2NjMgMTAuNjkyNCAxNC4xNjYzIDcuMDEwNDJDMTQuMTY2MyAzLjMyODQyIDExLjE4MTcgMC4zNDM3NSA3LjQ5OTY3IDAuMzQzNzVaTTcuNDk5NjcgMS42NzcwOEM4LjkxNDE2IDEuNjc3MDggMTAuMjcwNyAyLjIzODk5IDExLjI3MDkgMy4yMzkxOEMxMi4yNzExIDQuMjM5MzcgMTIuODMzIDUuNTk1OTMgMTIuODMzIDcuMDEwNDJDMTIuODMzIDguNDI0OSAxMi4yNzExIDkuNzgxNDYgMTEuMjcwOSAxMC43ODE3QzEwLjI3MDcgMTEuNzgxOCA4LjkxNDE2IDEyLjM0MzcgNy40OTk2NyAxMi4zNDM3QzYuMDg1MTkgMTIuMzQzNyA0LjcyODYzIDExLjc4MTggMy43Mjg0NCAxMC43ODE3QzIuNzI4MjQgOS43ODE0NiAyLjE2NjM0IDguNDI0OSAyLjE2NjM0IDcuMDEwNDJDMi4xNjYzNCA1LjU5NTkzIDIuNzI4MjQgNC4yMzkzNyAzLjcyODQ0IDMuMjM5MThDNC43Mjg2MyAyLjIzODk5IDYuMDg1MTkgMS42NzcwOCA3LjQ5OTY3IDEuNjc3MDhaTTcuNDk5NjcgMy42NzcwOEM3LjMyMjg2IDMuNjc3MDggNy4xNTMyOSAzLjc0NzMyIDcuMDI4MjcgMy44NzIzNUM2LjkwMzI1IDMuOTk3MzcgNi44MzMwMSA0LjE2Njk0IDYuODMzMDEgNC4zNDM3NUM2LjgzMzAxIDQuNTIwNTYgNi45MDMyNSA0LjY5MDEzIDcuMDI4MjcgNC44MTUxNUM3LjE1MzI5IDQuOTQwMTggNy4zMjI4NiA1LjAxMDQyIDcuNDk5NjcgNS4wMTA0MkM3LjY3NjQ5IDUuMDEwNDIgNy44NDYwNiA0Ljk0MDE4IDcuOTcxMDggNC44MTUxNUM4LjA5NjEgNC42OTAxMyA4LjE2NjM0IDQuNTIwNTYgOC4xNjYzNCA0LjM0Mzc1QzguMTY2MzQgNC4xNjY5NCA4LjA5NjEgMy45OTczNyA3Ljk3MTA4IDMuODcyMzVDNy44NDYwNiAzLjc0NzMyIDcuNjc2NDkgMy42NzcwOCA3LjQ5OTY3IDMuNjc3MDhaTTYuODMzMDEgNS42NzcwOEM2LjY1NjIgNS42NzcwOCA2LjQ4NjYzIDUuNzQ3MzIgNi4zNjE2IDUuODcyMzVDNi4yMzY1OCA1Ljk5NzM3IDYuMTY2MzQgNi4xNjY5NCA2LjE2NjM0IDYuMzQzNzVDNi4xNjYzNCA2LjY2NTA4IDYuNDA1NjcgNi45MDUwOCA2LjcwNzY3IDYuOTY5MDhMNi4zMTIzNCA4Ljg4NTA4QzYuMTU3NjcgOS42NTkwOCA2LjcxMTAxIDEwLjM0MzcgNy40OTkwMSAxMC4zNDM3SDguMTY1NjdDOC4zNDI0OSAxMC4zNDM3IDguNTEyMDUgMTAuMjczNSA4LjYzNzA4IDEwLjE0ODVDOC43NjIxIDEwLjAyMzUgOC44MzIzNCA5Ljg1Mzg5IDguODMyMzQgOS42NzcwOEM4LjgzMjM0IDkuNTAwMjcgOC43NjIxIDkuMzMwNyA4LjYzNzA4IDkuMjA1NjhDOC41MTIwNSA5LjA4MDY1IDguMzQyNDkgOS4wMTA0MiA4LjE2NTY3IDkuMDEwNDJINy42NDU2N0w4LjE0NTY3IDYuNDY5MDhDOC4xNjU3NiA2LjM3MzE0IDguMTY0MTMgNi4yNzM5MSA4LjE0MDkgNi4xNzg2OEM4LjExNzY4IDYuMDgzNDQgOC4wNzM0NSA1Ljk5NDYgOC4wMTE0NSA1LjkxODY3QzcuOTQ5NDYgNS44NDI3NCA3Ljg3MTI2IDUuNzgxNjQgNy43ODI1OSA1LjczOTg0QzcuNjkzOTMgNS42OTgwNCA3LjU5NzAzIDUuNjc2NTkgNy40OTkwMSA1LjY3NzA4SDYuODMzMDFaIiBmaWxsPSIjNTY1ODVBIi8+Cjwvc3ZnPgo=");
          }
        }

      }


    }
  }
}

#wp-statistics-post-widget.postbox {

  &.handle {
    .postbox-header .handle-actions {
      .handlediv.wps-refresh {
        display: inline-block !important;
      }
    }
  }

  .postbox-header .handle-actions {
    margin-top: 0 !important;

    .handlediv.wps-refresh {
      width: 1.62rem !important;
      height: 1.62rem;
    }
  }
}

#wp_statistics_editor_meta_box,
#wp-statistics-summary-widget,
#wp-statistics-words-widget,
#wps_hits_postbox,
#wps_top_visitors_postbox,
#wps_search_postbox,
#wps_words_postbox,
#wps_recent_postbox,
#wps_map_postbox,
#wps_pages_postbox,
#wps_summary_postbox,
#wps_browsers_postbox,
#wps_referring_postbox,
#wps_countries_postbox,
#wps_pages_postbox{
  &.postbox .inside {
    padding: 0;
    margin-bottom: 24px;
  }
}

#wp_statistics_editor_meta_box,
#wp-statistics-summary-widget,
#wp-statistics-words-widget,
#wps_hits_postbox,
#wps_top_visitors_postbox,
#wps_search_postbox,
#wps_words_postbox,
#wps_recent_postbox,
#wps_map_postbox,
#wps_pages_postbox,
#wps_summary_postbox,
#wps_browsers_postbox,
#wps_referring_postbox,
#wps_countries_postbox,
#wps_pages_postbox {
  overflow: visible;

  &.postbox.has-focus {
    z-index: 9999;
  }

  .postbox-header {

    h2 {
      font-weight: 500;
      font-size: 14px;
      margin: 0;
      line-height: 16.41px;
    }
  }

  button {
    &:focus {
      outline: none;
      box-shadow: none;
    }
  }

  table {
    tr td, tr th {
      white-space: nowrap;
    }
  }

  .handle-actions {
    margin-top: 0 !important;
  }
}

.inside .wp-statistics-widget {
  box-shadow: none;
  margin: 2em 0;
}



.wps_page {

  .wrap:not(.wps-wrap) {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 0 20px;
  }
}


.wps-date-range {
  background: #F4F4F4;
  padding: 2px 4px 2px 4px;
  border-radius: 2px;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 14.06px !important;
  margin-right: 8px;
  color: #393B3D !important;

  .rtl &{
    margin-right: 0;
    margin-left: 8px;
  }
}

// Customization - Add-on
#wp-statistics-about-metabox {
  .inside {
    margin-bottom: 24px !important;

    :first-child {
      margin-top: 0 !important;
    }
  }
}

.wps-postbox-chart {
  padding-right: 24px;
  padding-left: 24px;

  &--container {
    position: relative;

    .wps-chart-tooltip {
      background: #fff;
      padding: 12px;
      box-shadow: 1px 1px 2px 0px #00000005;
      border: 0.5px solid #EEEFF1;
      border-radius: 2px;
      width: 199px;


      & > div {
        display: flex;
        gap: 8px;
        flex-direction: column;
      }

      .current-data, .previous-data {
        font-size: 13px;
        font-style: italic;
        font-weight: 400;
        line-height: 15.23px;
        color: #56585A;
        display: flex;
        justify-content: space-between;
        align-items: center;


        &__value {
          font-weight: 500;
          color: #0C0C0D;
        }

        & > div {
          display: flex;
          align-items: center;
          gap: 7px;
          text-transform: capitalize;

          .previous-data__colors {
            display: flex;
            align-items: center;
            gap: 1px;

            .previous-data__color {
              width: 5px;
              height: 3px;
              display: inline-block;
              border-radius: 3px;
            }
          }

          .current-data__color {
            width: 12px;
            height: 3px;
            display: inline-block;
            border-radius: 3px;
          }
        }
      }

      .chart-title {
        color: #0C0C0D;
        font-size: 13px;
        font-style: italic;
        font-weight: 400;
        line-height: 15.23px;
      }
    }

    canvas {
      width: 100% !important;
      height: auto;
      max-height: 299px;
    }

    .o-wrap--no-dat {
      padding-top: 20px !important;
    }
  }


  &--data {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 20px;


    @media (max-width: 550px) {
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 20px;
    }

    .wps-postbox-chart--items {
      display: flex;
      column-gap: 48px;
      row-gap: 20px;
      margin-bottom: 24px;
      flex-wrap: wrap;
      @media (max-width: 550px) {
        column-gap: 40px;
      }
    }

    .wps-postbox-chart--item {
      display: flex;
      flex-direction: column;
      gap: 8px;

      & > span {
        font-size: 13px;
        font-style: italic;
        font-weight: 400;
        line-height: 15.23px;
        color: #56585A;
        text-transform: capitalize;
      }

      & > div {
        display: flex;
        gap: 16px;
        align-items: center;
        cursor: pointer;

        div {
          font-size: 14px;
          font-weight: 400;
          line-height: 14px;
          display: flex;
          align-items: center;
          gap: 6px;

          &:first-child {
            color: #0C0C0D;
            font-weight: 500;
            line-height: 16.41px;

            .wps-postbox-chart--item--color {
              display: inline-flex;
              width: 6px;
              height: 0;
              border: 3px solid;
              border-radius: 3px
            }
          }

          &:last-child {
            color: #56585A;

            & > span {
              display: inline-flex;
              gap: 1px;
              align-items: center;
            }

            .wps-postbox-chart--item--color {
              display: inline-flex;
              width: 3px;
              height: 0;
              border: 2px dashed;
              border-radius: 2px;
            }
          }
        }

      }
    }

  }

  &--previousPeriod {
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    line-height: 15.23px;
    color: #898A8E;
    display: none;
    gap: 6px;
    align-items: center;
    white-space: nowrap;

    &:before {
      content: "- -";
      color: #898A8E;
    }
  }

  &--LoggedInUsersChart {
    .wps-postbox-chart--items {
      .wps-postbox-chart--item {
        &:first-child {
          &>span{
            display: flex;
            gap: 6px;
            align-items: center;

            &:before{
              content:'';
              width: 13px;
              height: 12px;
              display: inline-flex;
              background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE4OTY4XzI2NDkwNCkiPgo8cGF0aCBkPSJNNyA1LjkxNDA2QzguMzgwNzEgNS45MTQwNiA5LjUgNC43OTQ3NyA5LjUgMy40MTQwNkM5LjUgMi4wMzMzNSA4LjM4MDcxIDAuOTE0MDYyIDcgMC45MTQwNjJDNS42MTkyOSAwLjkxNDA2MiA0LjUgMi4wMzMzNSA0LjUgMy40MTQwNkM0LjUgNC43OTQ3NyA1LjYxOTI5IDUuOTE0MDYgNyA1LjkxNDA2WiIgZmlsbD0iIzU2NTg1QSIvPgo8cGF0aCBkPSJNMTEuNDY4MyA5LjU3MTk5QzExLjQ2ODMgMTAuOTYwMSAxMS40NjgzIDEyLjA4NTQgNyAxMi4wODU0QzIuNTMxNzQgMTIuMDg1NCAyLjUzMTc0IDEwLjk2MDEgMi41MzE3NCA5LjU3MTk5QzIuNTMxNzQgOC4xODM4NyA0LjUzMjI0IDcuMDU4NTkgNyA3LjA1ODU5QzkuNDY3NzYgNy4wNTg1OSAxMS40NjgzIDguMTgzODcgMTEuNDY4MyA5LjU3MTk5WiIgZmlsbD0iIzU2NTg1QSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzE4OTY4XzI2NDkwNCI+CjxyZWN0IHdpZHRoPSIxMyIgaGVpZ2h0PSIxMiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuNSAwLjUpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==") center center no-repeat;
            }
          }
        }

        &:last-child {
          &>span{
            display: flex;
            gap: 6px;
            align-items: center;

            &:before{
              content:'';
              width: 13px;
              height: 13px;
              display: inline-flex;
              background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE4OTY4XzI2NDkyMCkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIuNzY4NDkgNC4yMzI2OUwyLjUyNDI1IDUuMjA5NjRIMS4yNzFDMS4wMzM2OSA1LjIwOTY0IDAuODQxMzA5IDUuNDAyMDIgMC44NDEzMDkgNS42MzkzMkMwLjg0MTMwOSA1Ljg3NjYzIDEuMDMzNjkgNi4wNjkwMSAxLjI3MSA2LjA2OTAxSDEyLjcyOTNDMTIuOTY2NiA2LjA2OTAxIDEzLjE1OSA1Ljg3NjYzIDEzLjE1OSA1LjYzOTMyQzEzLjE1OSA1LjQwMjAyIDEyLjk2NjYgNS4yMDk2NCAxMi43MjkzIDUuMjA5NjRIMTEuNDc2MUwxMS4yMzE4IDQuMjMyNjlDMTAuOTE5MiAyLjk4MjIgMTAuNzYyOSAyLjM1Njk1IDEwLjI5NjcgMS45OTI5M0M5LjgzMDQzIDEuNjI4OTEgOS4xODU5NiAxLjYyODkxIDcuODk2OTUgMS42Mjg5MUg2LjEwMzM4QzQuODE0MzcgMS42Mjg5MSA0LjE2OTg5IDEuNjI4OTEgMy43MDM2NSAxLjk5MjkzQzMuMjM3NDIgMi4zNTY5NSAzLjA4MTExIDIuOTgyMiAyLjc2ODQ5IDQuMjMyNjlaTTMuODQ5MTIgMTEuMzY4NUM0Ljc3OTA2IDExLjM2ODUgNS41NjExNCAxMC43MzU1IDUuNzg3OTcgOS44NzY3OUw2LjQyMzY5IDkuNTU4OTNDNi43ODY1OCA5LjM3NzQ5IDcuMjEzNzUgOS4zNzc0OSA3LjU3NjYzIDkuNTU4OTNMOC4yMTIzNCA5Ljg3Njc5QzguNDM5MTYgMTAuNzM1NSA5LjIyMTI1IDExLjM2ODUgMTAuMTUxMiAxMS4zNjg1QzExLjI1ODcgMTEuMzY4NSAxMi4xNTY0IDEwLjQ3MDcgMTIuMTU2NCA5LjM2MzI4QzEyLjE1NjQgOC4yNTU4MyAxMS4yNTg3IDcuMzU4MDcgMTAuMTUxMiA3LjM1ODA3QzkuMjAwMTEgNy4zNTgwNyA4LjQwMzY5IDguMDIwMjUgOC4xOTc3MyA4LjkwODY3TDcuOTYxIDguNzkwMzFDNy4zNTYxMiA4LjQ4Nzg3IDYuNjQ0MjEgOC40ODc4NyA2LjAzOTMyIDguNzkwMzFMNS44MDI1OCA4LjkwODY3QzUuNTk2NjUgOC4wMjAyNSA0LjgwMDIxIDcuMzU4MDcgMy44NDkxMiA3LjM1ODA3QzIuNzQxNjcgNy4zNTgwNyAxLjg0MzkxIDguMjU1ODMgMS44NDM5MSA5LjM2MzI4QzEuODQzOTEgMTAuNDcwNyAyLjc0MTY3IDExLjM2ODUgMy44NDkxMiAxMS4zNjg1WiIgZmlsbD0iIzU2NTg1QSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzE4OTY4XzI2NDkyMCI+CjxyZWN0IHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuNSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K") center center no-repeat;
            }
          }
        }
      }
    }
  }

  &--info{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
  }
}

.wps-horizontal-bar {
  display: flex;
  gap: 16px;
  flex-direction: column;

  &__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    position: relative;


    &:first-child {
      .wps-horizontal-bar__label-image-container {
        .wps-horizontal-bar__label {
          font-weight: 500;
        }
      }

      .wps-horizontal-bar__data span:first-child {
        color: #0C0C0D;
        font-weight: 500;
        font-size: 14px;
        line-height: 15.23px;
      }
    }

    .wps-horizontal-bar__background {
      position: absolute;
      z-index: 1;
      left: 0;
      background: #3288D726;
      height: 100%;
      top: 0;
      border-radius: 4px;

      .rtl & {
        left: unset;
        right: 0;
      }
    }
  }

  .wps-horizontal-bar__data {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;

    span {
      min-width: 49px;
      display: inline-flex;
      justify-content: flex-end;
      font-size: 13px;
      font-weight: 400;
      line-height: 15.23px;
      color: #65686A;

      &:first-child {
        justify-content: flex-start;
        font-size: 14px;
      }

      &:last-child {
        color: #0C0C0D;
        font-weight: 500;
        font-size: 13px;
        line-height: 15.23px;
      }
    }
  }

  &__label-image-container {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 2;

    .wps-horizontal-bar__image {
      width: 13px;
      height: 13px;
    }

    .wps-horizontal-bar__label {
      font-size: 14px;
      font-weight: 400;
      line-height: 16.41px;
      color: #0C0C0D;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 143px;
    }
  }
}



#wp-statistics-browsers-widget,
#wp-statistics-platforms-widget,
#wp-statistics-models-widget,
#wp-statistics-devices-widget {
  .o-wrap {
    padding: 0 24px;
  }
}

.wps-line-through {
  text-decoration: line-through;
  color: #A9AAAE !important;
  span.wps-postbox-chart--item--color {
    border-color: #DADCE0 !important;
  }

  &.previous-data{
    color: #898A8E !important;
    span.wps-postbox-chart--item--color {
      border-color: #898A8E !important;
    }
  }


}

.wps-gutenberg {
  #wp-statistics-post-widget.postbox .postbox-header .handle-actions .handlediv:not(.wps-refresh) {
    height: 44px !important;
  }

  .postbox .handle-order-higher, .postbox .handle-order-lower, .postbox .handlediv {
    &:focus {
      box-shadow: none !important;
    }
  }
}

.wps-hide {
  display: none !important;
}

.tooltipster-base.tooltipster-flat.tooltip-premium {
  .tooltipster-arrow .tooltipster-arrow-background {
    background: #fffdfd !important;
  }

  .tooltipster-box {
    background: #fffdfd !important;
    border-radius: 8px !important;
    border: 1px solid #DDE0E8;

    .tooltipster-content {
      padding: 0 !important;

      & > div {
        display: flex;
        align-items: center;
        height: 100%;

        div {
          padding: 12px;
          height: 100%;
          white-space: nowrap;
          font-size: 13px;
          font-weight: 500;
          line-height: 15.23px;
        }

        div:first-child {
          background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
          linear-gradient(0deg, rgba(64, 75, 242, 0.05), rgba(64, 75, 242, 0.05));

          a {
            color: #404BF2;
            text-decoration: none;
          }
        }

        div:last-child {
          background: #fff;
          color: #56585A;
        }
      }
    }
  }
}

.wps-visitor__information .wps-tooltip_templates {
  display: none;
}

.wps-tooltip-premium {
  border: none;
  outline: none;
  box-shadow: none;
  position: relative;
  background: #FAFAFB;
  color: #BFC2C9;

  &:hover {
    background: #F4F4FB;
    color: #ADB4C1;

    .tooltip-premium {
      visibility: visible;
      opacity: 1;
    }

    a.wps-tooltip-premium__link {
      color: #ADB4C1 !important;
    }
  }


}

.wps-wrap table tbody tr td a {
  &.wps-tooltip-premium__link {
    color: #bfc2c9 !important;

    &:hover {
      color: #ADB4C1 !important;
    }
  }
}

.wps-head-filters__item {
  .wps-tooltip-premium {
    padding: 4px 16px;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    flex-wrap: nowrap;
    display: inline-flex;
    gap: 4px;
    line-height: 24px;
    border: 1px solid #DADCE0;
    font-size: 12px;
    font-weight: 400;
    align-items: center;
    background: #fafafb !important;
    color: #bfc2c9 !important;

    &:after {
      content: '';
      width: 12px;
      height: 12px;
      display: inline-flex;
      background: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE2IiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgMTYgMTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03LjgzMzQ3IDAuODgyODEyQzQuMTc0ODUgMC44ODI4MTIgMS4yMTU4MiAzLjg0MTg1IDEuMjE1ODIgNy41MDA0NkMxLjIxNTgyIDguODcxMjYgMS42MjIzMyAxMC4xMjg2IDIuMzIxOTEgMTEuMTc4QzMuMzQyOTIgMTIuNjkwNiA0Ljk1OTUyIDEzLjc1ODkgNi44NDA4MiAxNC4wMzNDNy4xNjIyNSAxNC4wODk3IDcuNDkzMTMgMTQuMTE4MSA3LjgzMzQ3IDE0LjExODFDOC4xNzM4IDE0LjExODEgOC41MDQ2OSAxNC4wODk3IDguODI2MTEgMTQuMDMzQzEwLjcwNzQgMTMuNzU4OSAxMi4zMjQgMTIuNjkwNiAxMy4zNDUgMTEuMTc4QzE0LjA0NDYgMTAuMTI4NiAxNC40NTExIDguODcxMjYgMTQuNDUxMSA3LjUwMDQ2QzE0LjQ1MTEgMy44NDE4NSAxMS40OTIxIDAuODgyODEyIDcuODMzNDcgMC44ODI4MTJaTTEwLjcyNjMgNy4yOTI0OEw5Ljk0MTY2IDguMDc3MTRDOS44MDkzMSA4LjIwOTQ5IDkuNzMzNjggOC40NjQ3NSA5Ljc4MDk1IDguNjUzODJMMTAuMDA3OCA5LjYyNzU2QzEwLjE4NzUgMTAuMzkzMyA5Ljc4MDk1IDEwLjY5NTggOS4xMDAyNyAxMC4yODkzTDguMTU0OSA5LjczMTU1QzcuOTg0NzMgOS42Mjc1NiA3LjcwMTEyIDkuNjI3NTYgNy41MzA5NSA5LjczMTU1TDYuNTg1NTcgMTAuMjg5M0M1LjkwNDkgMTAuNjg2NCA1LjQ5ODM4IDEwLjM5MzMgNS42NzgwMSA5LjYyNzU2TDUuOTA0OSA4LjY1MzgyQzUuOTQyNzEgOC40NzQyIDUuODc2NTMgOC4yMDk0OSA1Ljc0NDE4IDguMDc3MTRMNC45NDA2MSA3LjI5MjQ4QzQuNDc3MzcgNi44MjkyNCA0LjYyODY0IDYuMzY2MDEgNS4yNzE0OSA2LjI2MjAxTDYuMjgzMDUgNi4wOTE4NUM2LjQ1MzIyIDYuMDYzNDkgNi42NTE3NCA1LjkxMjIyIDYuNzI3MzggNS43NjA5Nkw3LjI4NTE1IDQuNjQ1NDJDNy41ODc2NyA0LjA0MDM4IDguMDc5MjcgNC4wNDAzOCA4LjM4MTc5IDQuNjQ1NDJMOC45Mzk1NiA1Ljc2MDk2QzkuMDE1MTkgNS45MTIyMiA5LjIxMzcyIDYuMDYzNDkgOS4zOTMzNCA2LjA5MTg1TDEwLjQwNDkgNi4yNjIwMUMxMS4wMzgzIDYuMzY2MDEgMTEuMTg5NiA2LjgyOTI0IDEwLjcyNjMgNy4yOTI0OFoiIGZpbGw9IiNCRkMyQzkiLz4KPC9zdmc+Cg==) center center/contain no-repeat;
    }

    &:hover {
      background: #F4F4FB !important;
      color: #ADB4C1 !important;

      &:after {
        background: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE2IiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgMTYgMTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03LjgzMzQ3IDAuODgyODEyQzQuMTc0ODUgMC44ODI4MTIgMS4yMTU4MiAzLjg0MTg1IDEuMjE1ODIgNy41MDA0NkMxLjIxNTgyIDguODcxMjYgMS42MjIzMyAxMC4xMjg2IDIuMzIxOTEgMTEuMTc4QzMuMzQyOTIgMTIuNjkwNiA0Ljk1OTUyIDEzLjc1ODkgNi44NDA4MiAxNC4wMzNDNy4xNjIyNSAxNC4wODk3IDcuNDkzMTMgMTQuMTE4MSA3LjgzMzQ3IDE0LjExODFDOC4xNzM4IDE0LjExODEgOC41MDQ2OSAxNC4wODk3IDguODI2MTEgMTQuMDMzQzEwLjcwNzQgMTMuNzU4OSAxMi4zMjQgMTIuNjkwNiAxMy4zNDUgMTEuMTc4QzE0LjA0NDYgMTAuMTI4NiAxNC40NTExIDguODcxMjYgMTQuNDUxMSA3LjUwMDQ2QzE0LjQ1MTEgMy44NDE4NSAxMS40OTIxIDAuODgyODEyIDcuODMzNDcgMC44ODI4MTJaTTEwLjcyNjMgNy4yOTI0OEw5Ljk0MTY2IDguMDc3MTRDOS44MDkzMSA4LjIwOTQ5IDkuNzMzNjggOC40NjQ3NSA5Ljc4MDk1IDguNjUzODJMMTAuMDA3OCA5LjYyNzU2QzEwLjE4NzUgMTAuMzkzMyA5Ljc4MDk1IDEwLjY5NTggOS4xMDAyNyAxMC4yODkzTDguMTU0OSA5LjczMTU1QzcuOTg0NzMgOS42Mjc1NiA3LjcwMTEyIDkuNjI3NTYgNy41MzA5NSA5LjczMTU1TDYuNTg1NTcgMTAuMjg5M0M1LjkwNDkgMTAuNjg2NCA1LjQ5ODM4IDEwLjM5MzMgNS42NzgwMSA5LjYyNzU2TDUuOTA0OSA4LjY1MzgyQzUuOTQyNzEgOC40NzQyIDUuODc2NTMgOC4yMDk0OSA1Ljc0NDE4IDguMDc3MTRMNC45NDA2MSA3LjI5MjQ4QzQuNDc3MzcgNi44MjkyNCA0LjYyODY0IDYuMzY2MDEgNS4yNzE0OSA2LjI2MjAxTDYuMjgzMDUgNi4wOTE4NUM2LjQ1MzIyIDYuMDYzNDkgNi42NTE3NCA1LjkxMjIyIDYuNzI3MzggNS43NjA5Nkw3LjI4NTE1IDQuNjQ1NDJDNy41ODc2NyA0LjA0MDM4IDguMDc5MjcgNC4wNDAzOCA4LjM4MTc5IDQuNjQ1NDJMOC45Mzk1NiA1Ljc2MDk2QzkuMDE1MTkgNS45MTIyMiA5LjIxMzcyIDYuMDYzNDkgOS4zOTMzNCA2LjA5MTg1TDEwLjQwNDkgNi4yNjIwMUMxMS4wMzgzIDYuMzY2MDEgMTEuMTg5NiA2LjgyOTI0IDEwLjcyNjMgNy4yOTI0OFoiIGZpbGw9IiNBREI0QzEiLz4KPC9zdmc+Cg==) center center/contain no-repeat;
      }
    }

  }
}

.view-more {
  .wps-tooltip-premium {
    padding: 4px 24px 4px 24px;
    border-radius: 4px;
    border: 1px solid #EEEFF1;
    font-size: 12px;
    font-weight: 400;
    line-height: 20.4px;
    display: flex;
    gap: 4px;
    align-items: center;

    &:hover {
      &:before {
        background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMDAwMTcgMS4yMDcwM0MzLjA3MzI4IDEuMjA3MDMgMC43MDYwNTUgMy41NzQyNiAwLjcwNjA1NSA2LjUwMTE1QzAuNzA2MDU1IDcuNTk3NzkgMS4wMzEyNiA4LjYwMzY3IDEuNTkwOTMgOS40NDMxN0MyLjQwNzc0IDEwLjY1MzIgMy43MDEwMSAxMS41MDc5IDUuMjA2MDUgMTEuNzI3MkM1LjQ2MzIgMTEuNzcyNiA1LjcyNzkgMTEuNzk1MyA2LjAwMDE3IDExLjc5NTNDNi4yNzI0NCAxMS43OTUzIDYuNTM3MTUgMTEuNzcyNiA2Ljc5NDI5IDExLjcyNzJDOC4yOTkzMyAxMS41MDc5IDkuNTkyNjEgMTAuNjUzMiAxMC40MDk0IDkuNDQzMTdDMTAuOTY5MSA4LjYwMzY3IDExLjI5NDMgNy41OTc3OSAxMS4yOTQzIDYuNTAxMTVDMTEuMjk0MyAzLjU3NDI2IDguOTI3MDYgMS4yMDcwMyA2LjAwMDE3IDEuMjA3MDNaTTguMzE0NDYgNi4zMzQ3Nkw3LjY4NjczIDYuOTYyNDlDNy41ODA4NCA3LjA2ODM4IDcuNTIwMzQgNy4yNzI1OCA3LjU1ODE2IDcuNDIzODRMNy43Mzk2NyA4LjIwMjgzQzcuODgzMzcgOC44MTU0MyA3LjU1ODE2IDkuMDU3NDUgNy4wMTM2MiA4LjczMjI0TDYuMjU3MzIgOC4yODYwMkM2LjEyMTE4IDguMjAyODMgNS44OTQyOSA4LjIwMjgzIDUuNzU4MTYgOC4yODYwMkw1LjAwMTg1IDguNzMyMjRDNC40NTczMiA5LjA0OTg5IDQuMTMyMTEgOC44MTU0MyA0LjI3NTggOC4yMDI4M0w0LjQ1NzMyIDcuNDIzODRDNC40ODc1NyA3LjI4MDE0IDQuNDM0NjMgNy4wNjgzOCA0LjMyODc0IDYuOTYyNDlMMy42ODU4OSA2LjMzNDc2QzMuMzE1MyA1Ljk2NDE3IDMuNDM2MzEgNS41OTM1OSAzLjk1MDU5IDUuNTEwMzlMNC43NTk4NCA1LjM3NDI2QzQuODk1OTcgNS4zNTE1NyA1LjA1NDc5IDUuMjMwNTYgNS4xMTUzIDUuMTA5NTVMNS41NjE1MiA0LjIxNzEyQzUuODAzNTMgMy43MzMwOCA2LjE5NjgxIDMuNzMzMDggNi40Mzg4MyA0LjIxNzEyTDYuODg1MDUgNS4xMDk1NUM2Ljk0NTU1IDUuMjMwNTYgNy4xMDQzNyA1LjM1MTU3IDcuMjQ4MDcgNS4zNzQyNkw4LjA1NzMyIDUuNTEwMzlDOC41NjQwNCA1LjU5MzU5IDguNjg1MDUgNS45NjQxNyA4LjMxNDQ2IDYuMzM0NzZaIiBmaWxsPSIjQURCNEMxIi8+Cjwvc3ZnPgo=") center center no-repeat;
      }
    }

    &:before {
      content: '';
      width: 12px;
      height: 12px;
      display: inline-flex;
      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMDAwMTcgMS4yMDcwM0MzLjA3MzI4IDEuMjA3MDMgMC43MDYwNTUgMy41NzQyNiAwLjcwNjA1NSA2LjUwMTE1QzAuNzA2MDU1IDcuNTk3NzkgMS4wMzEyNiA4LjYwMzY3IDEuNTkwOTMgOS40NDMxN0MyLjQwNzc0IDEwLjY1MzIgMy43MDEwMSAxMS41MDc5IDUuMjA2MDUgMTEuNzI3MkM1LjQ2MzIgMTEuNzcyNiA1LjcyNzkgMTEuNzk1MyA2LjAwMDE3IDExLjc5NTNDNi4yNzI0NCAxMS43OTUzIDYuNTM3MTUgMTEuNzcyNiA2Ljc5NDI5IDExLjcyNzJDOC4yOTkzMyAxMS41MDc5IDkuNTkyNjEgMTAuNjUzMiAxMC40MDk0IDkuNDQzMTdDMTAuOTY5MSA4LjYwMzY3IDExLjI5NDMgNy41OTc3OSAxMS4yOTQzIDYuNTAxMTVDMTEuMjk0MyAzLjU3NDI2IDguOTI3MDYgMS4yMDcwMyA2LjAwMDE3IDEuMjA3MDNaTTguMzE0NDYgNi4zMzQ3Nkw3LjY4NjczIDYuOTYyNDlDNy41ODA4NCA3LjA2ODM4IDcuNTIwMzQgNy4yNzI1OCA3LjU1ODE2IDcuNDIzODRMNy43Mzk2NyA4LjIwMjgzQzcuODgzMzcgOC44MTU0MyA3LjU1ODE2IDkuMDU3NDUgNy4wMTM2MiA4LjczMjI0TDYuMjU3MzIgOC4yODYwMkM2LjEyMTE4IDguMjAyODMgNS44OTQyOSA4LjIwMjgzIDUuNzU4MTYgOC4yODYwMkw1LjAwMTg1IDguNzMyMjRDNC40NTczMiA5LjA0OTg5IDQuMTMyMTEgOC44MTU0MyA0LjI3NTggOC4yMDI4M0w0LjQ1NzMyIDcuNDIzODRDNC40ODc1NyA3LjI4MDE0IDQuNDM0NjMgNy4wNjgzOCA0LjMyODc0IDYuOTYyNDlMMy42ODU4OSA2LjMzNDc2QzMuMzE1MyA1Ljk2NDE3IDMuNDM2MzEgNS41OTM1OSAzLjk1MDU5IDUuNTEwMzlMNC43NTk4NCA1LjM3NDI2QzQuODk1OTcgNS4zNTE1NyA1LjA1NDc5IDUuMjMwNTYgNS4xMTUzIDUuMTA5NTVMNS41NjE1MiA0LjIxNzEyQzUuODAzNTMgMy43MzMwOCA2LjE5NjgxIDMuNzMzMDggNi40Mzg4MyA0LjIxNzEyTDYuODg1MDUgNS4xMDk1NUM2Ljk0NTU1IDUuMjMwNTYgNy4xMDQzNyA1LjM1MTU3IDcuMjQ4MDcgNS4zNzQyNkw4LjA1NzMyIDUuNTEwMzlDOC41NjQwNCA1LjU5MzU5IDguNjg1MDUgNS45NjQxNyA4LjMxNDQ2IDYuMzM0NzZaIiBmaWxsPSIjQkZDMkM5Ii8+Cjwvc3ZnPgo=") center center no-repeat;
    }

    .js-wps-openPremiumModal:before {
      display: none;
    }
  }
}

.wps-tooltip_templates {
  position: relative;
  display: inline-block;
}

.tooltip-premium {
  visibility: hidden;
  min-width: 216px;
  position: absolute;
  z-index: 9;
  bottom: 100%;
  left: 50%;
  opacity: 0;
  transition: opacity 0.3s;

  & > span {
    border: 1px solid #DDE0E8;
    border-radius: 8px;
    position: relative;
    background-color: #fff;
    display: flex;
    box-sizing: border-box;
    box-shadow: 4px 4px 15px 0 #3130400D;
    cursor: default;

    a {
      background: #404BF20D;
      font-size: 13px;
      font-weight: 500;
      color: #404BF2;
      padding: 10px;
      cursor: pointer;
      white-space: nowrap;
      border-radius: 8px 0 0 8px;

      .rtl & {
        border-radius: 0 8px 8px 0;
      }
    }

    span {
      color: #56585A;
      font-size: 13px;
      font-weight: 500;
      padding: 10px;
      white-space: nowrap;
      cursor: default;
    }


    &:after, &:before {
      bottom: 100%;
      right: 30px;
      border: solid transparent;
      content: "";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;

      .rtl & {
        right: unset;
        left: 30px;
      }
    }

    &:after {
      border-color: rgba(255, 255, 255, 0);
      border-bottom-color: #fff;
      border-width: 5px;
    }

    &:before {
      border-color: rgba(221, 224, 232, 0);
      border-bottom-color: #DDE0E8;
      border-width: 6px;
      margin-right: -1px;

      .rtl & {
        margin-right: 0;
        margin-left: -1px;
      }
    }
  }

  &--bottom {
    top: 100%;
    padding-top: 8px;
  }

  &--side {
    top: 50%;
    bottom: unset;
    transform: translateY(-50%);
  }

  &--left {
    left: unset;
    right: 100%;
    padding-right: 8px;

    .rtl & {
      left: 100%;
      right: unset;
      padding-right: 0;
      padding-left: 8px;
    }

    &.tooltip-premium--side {
      & > span {
        &:after, &:before {
          left: 100%;
          top: 50%;
          bottom: unset;
          right: unset;
          margin-right: unset;
          transform: translateY(-50%);
          border: 6px solid rgba(0, 0, 0, 0);

          .rtl & {
            right: 100%;
            left: unset;
          }
        }

        &:after {
          border-left-color: #fff;

          .rtl & {
            border-left-color: transparent;
            border-right-color: #fff;
          }
        }

        &:before {
          border-left-color: #DDE0E8;
          border-width: 7px;

          .rtl & {
            border-left-color: transparent;
            border-right-color: #DDE0E8;
          }
        }
      }

    }
  }

  &--right {
    right: 0;
    left: unset;

    .rtl & {
      right: unset;
      left: 0;
    }
  }
}


@-webkit-keyframes wps-cycle {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes wps-cycle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-moz-keyframes wps-cycle {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@keyframes animated_online {
  0% {
    transform: scale(1);
  }
  5%, 20%, 35%, 50%, 65%, 80%, 95% {
    transform: scale(1.3);
  }
  10%, 25%, 40%, 55%, 70%, 85%, 100% {
    transform: scale(1);
  }
}

.v-image-lazy {
  transition: all .5s ease-in 0s;
}

.wps-card__footer{
  &__view-more{
    display: flex;
    justify-content: flex-end;
    a{
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      font-weight: 500;

      &:after{
        content: '';
        width: 16px;
        height: 16px;
        display: inline-block;
        background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjA4NTggNy40ODU3N0w3LjQwMzggNC43MjcyN0w4LjExMDkgNEwxMiA4LjAwMDAzTDguMTEwOSAxMkw3LjQwMzggMTEuMjcyN0wxMC4wODU4IDguNTE0MjlINFY3LjQ4NTc3SDEwLjA4NThaIiBmaWxsPSIjNDA0QkYyIi8+Cjwvc3ZnPgo=") center center no-repeat;

        .rtl &{
          transform: rotate(180deg);
        }
      }

      &:hover:after{
        filter: brightness(0);
      }
    }
  }
}

.wps-mb-16{
  margin-bottom: 16px;
}

@media screen and (max-width: 782px) {
  .wps-wrap .postbox .handlediv {
    margin-top: 0;
  }
}