File "add-ons.scss"

Full path: /var/www/html/cemeau/wp-content/plugins/wp-statistics/assets/dev/sass/pages/add-ons.scss
File size: 51.86 KB
MIME-type: text/plain
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

/*
 * WP Statistics Add-Ons Admin page
 */

@media(max-width: 768px) {
  .wps_plugins_page-title {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.wps_plugins_page-title {
  font-size: 20px;
}

.wps-install-addon-btn {
  background: #12121B;
  padding: 12px 16px;
  gap: 8px;
  border-radius: 6px;
  color: #FFFFFF !important;
  font-size: 14px;
  font-weight: 500 !important;
  line-height: 16.41px;
  display: inline-flex;
  margin-left: 24px;

  @media(max-width: 768px) {
    width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
    justify-content: center;
  }

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

  &:hover {
    background: #12121BE5;
  }

  &:active {
    background: #0C0C11;
  }

  &.disabled {
    background: #F1F1F9;

    span {
      color: #B2B2CF;
    }

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

  &:before {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjY2NjgzIDYuNjY2NjdIMTIuMDAwMkw4LjAwMDE2IDEwLjY2NjdMNC4wMDAxNiA2LjY2NjY3SDcuMzMzNVYySDguNjY2ODNWNi42NjY2N1pNMi42NjY4MyAxMi42NjY3SDEzLjMzMzVWOEgxNC42NjY4VjEzLjMzMzNDMTQuNjY2OCAxMy43MDE1IDE0LjM2ODQgMTQgMTQuMDAwMiAxNEgyLjAwMDE2QzEuNjMxOTggMTQgMS4zMzM1IDEzLjcwMTUgMS4zMzM1IDEzLjMzMzNWOEgyLjY2NjgzVjEyLjY2NjdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K") center center no-repeat;
  }
}

.wps-postbox-addon-container {
  width: 764px;
  max-width: 100%;
  float: left;
  margin-right: 20px;

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

  .wps-postbox-addon {
    display: flex;
    padding: 32px;
    gap: 32px;
    border: 1px solid #DADCE0;
    border-radius: 8px;
    box-shadow: none;
    flex-direction: column;
    background: #fff;

    @media(max-width: 768px) {
      padding: 32px 16px;
    }

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

    &__title {
      padding: 0;
      margin: 0;
      color: #56585A;
      gap: 8px;
      font-size: 11px;
      font-weight: 500;
      line-height: 12.89px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    &__items {
      display: flex;
      gap: 16px;
      flex-direction: column;
    }

    &__item {
      padding: 16px;
      gap: 16px;
      border-radius: 8px;
      border: 1px solid #DADCE0;
      position: relative;

      & > div:first-child {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        @media(max-width: 768px) {
          flex-direction: column;
          align-items: flex-end;
          padding-bottom: 40px;

          .wps-postbox-addon__item--info {
            order: 2;
            display: block;
            width: 100%;
          }
          .wps-postbox-addon__item--actions {
            order: 1;
            gap: 8px;
            align-items: self-start;
            height: calc(100% - 32px);
           }
        }
      }


      &--info {
        display: flex;
        gap: 16px;

        &__img {
          background: #404BF214;
          padding: 8px;
          border-radius: 6px;
          width: 48px;
          min-width: 48px;
          height: 48px;
          align-items: center;
          display: flex;
          justify-content: center;
          box-sizing: border-box;

          @media(max-width: 768px) {
            margin-bottom: 8px;
          }

          a, img {
            width: 24px;
            min-width: 24px;
            height: 24px;
          }
        }

        &__text {
          display: flex;
          gap: 4px;
          flex-direction: column;
        }

        &__title {
          a {
            color: #0C0C0D;
            font-size: 15px;
            font-weight: 500;
            line-height: 17.58px;
            display: flex;
            gap: 4px;
            align-items: center;
            white-space: nowrap;
          }

          color: #0C0C0D;
          font-size: 15px;
          font-weight: 500;
          line-height: 17.58px;
          min-height: 27px;
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;

          span.wps-postbox-addon__version {
            color: #898A8E;
            font-size: 11px;
            display: inline-block;
            font-weight: 400;
            line-height: 16px;
          }
        }

        &__desc {
          color: #717274;
          font-size: 13px;
          font-weight: 400;
          line-height: 16px;
          margin: 0 !important;
        }
      }

      &.active {
        .wps-addon__item__license {
          display: flex;
        }
      }

      .wps-addon__item__license {
        border-top: 1px solid #EEEFF1;
        gap: 16px;
        flex-direction: column;
        padding-top: 16px;
        margin-top: 16px;
        display: none;

        .wps-addon__item__update_license {
          display: flex;
          gap: 16px;
          justify-content: space-between;
          @media(max-width: 768px) {
            flex-direction: column;
          }

          input {
            padding: 10px 14px !important;
            border-radius: 3px;
            border: 1px solid #DADCE0 !important;
            font-size: 14px;
            font-weight: 400;
            width: 100%;

            &::placeholder {
              color: #8F9093;
            }

            &.wps-danger {
              border: 1px solid #D63638 !important;
              box-shadow: 0 0 0 3px #D6363833;
              outline: 2px solid rgba(0, 0, 0, 0);
            }

            &.wps-warning {
              border: 1px solid #EE8B44 !important;
              box-shadow: 0 0 0 3px #EE8B4433;
              outline: 2px solid rgba(0, 0, 0, 0);
            }

            &:focus, &:active {
              border: 1px solid #404BF2 !important;
              box-shadow: 0 0 0 3px #404BF233;
              outline: 2px solid rgba(0, 0, 0, 0);
            }
          }

          button {
            padding: 8px 16px;
            gap: 6px;
            border-radius: 4px;
            background: #12121B;
            font-size: 14px;
            font-weight: 500;
            line-height: 22px;
            color: #FFFFFF;
            white-space: nowrap;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;

            &.redirecting {
              background: transparent !important;
              color: #56585A !important;
              font-size: 14px;
              font-weight: 500;
              opacity: 1;
              border: none;

              &:after {
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                -webkit-animation-name: wps-cycle;
                -webkit-animation-duration: 2s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-fill-mode: forwards;
                animation-name: wps-cycle;
                animation-duration: 2s;
                animation-iteration-count: infinite;
                animation-fill-mode: forwards;
                -moz-animation-name: wps-cycle;
                -moz-animation-duration: 2s;
                -moz-animation-iteration-count: infinite;
                -moz-animation-fill-mode: forwards;
                background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjQxNzIgMi45NTM3OEM0LjgxMDM4IDEuOTQzMjggNi4zMzM4MSAxLjMzMjAzIDguMDAwMDEgMS4zMzIwM0MxMS42ODE5IDEuMzMyMDMgMTQuNjY2NyA0LjMxNjggMTQuNjY2NyA3Ljk5ODdDMTQuNjY2NyA5LjQyMjc2IDE0LjIyMDEgMTAuNzQyNiAxMy40NTk1IDExLjgyNThMMTEuMzMzMyA3Ljk5ODdIMTMuMzMzM0MxMy4zMzMzIDUuMDUzMTggMTAuOTQ1NSAyLjY2NTM2IDguMDAwMDEgMi42NjUzNkM2LjU2NjU2IDIuNjY1MzYgNS4yNjUxOSAzLjIzMDg4IDQuMzA2ODMgNC4xNTA5OEwzLjY0MTcyIDIuOTUzNzhaTTEyLjM1ODMgMTMuMDQzNkMxMS4xODk2IDE0LjA1NDEgOS42NjYyMSAxNC42NjU0IDguMDAwMDEgMTQuNjY1NEM0LjMxODExIDE0LjY2NTQgMS4zMzMzNCAxMS42ODA2IDEuMzMzMzQgNy45OTg3QzEuMzMzMzQgNi41NzQ2IDEuNzc5ODcgNS4yNTQ4IDIuNTQwNTQgNC4xNzE2Nkw0LjY2NjY4IDcuOTk4N0gyLjY2NjY4QzIuNjY2NjggMTAuOTQ0MiA1LjA1NDQ5IDEzLjMzMiA4LjAwMDAxIDEzLjMzMkM5LjQzMzQ4IDEzLjMzMiAxMC43MzQ4IDEyLjc2NjUgMTEuNjkzMiAxMS44NDY0TDEyLjM1ODMgMTMuMDQzNloiIGZpbGw9IiM1NjU4NUEiLz4KPC9zdmc+Cg==") center center no-repeat;
              }

              &:hover {
                background: transparent;
              }
            }

            &:hover {
              background: #12121BE5;

              &.redirecting {
                background: transparent;
              }
            }

            &.disabled {
              pointer-events: none;
              background: #F1F1F9;
              color: #B2B2CF;
              position: relative;
            }
          }
        }
      }

    }
  }
}

.wps-postbox-addon__step {
  width: 764px;
  max-width: 100%;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  padding: 32px;
  border-radius: 8px;
  display: block;
  box-sizing: border-box;

  @media (max-width: 768px) {
    padding: 32px 16px;
  }

  .wps-addon__step {
    &__image {
      width: 56px;
      height: 56px;
      padding: 16px;
      border-radius: 200px;
      background-color: #1219261A;
      margin-bottom: 24px;
      display: inline-block;
      box-sizing: border-box;
      background-position: center center;
      background-repeat: no-repeat;

      &--lock {
        background-image: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMC43NTc3IDExLjgyOTRMMTguNjA2NiAzLjk4MDQ3TDIwLjAyMDggNS4zOTQ2OEwxOC42MDY2IDYuODA4ODlMMjEuMDgxNSA5LjI4Mzc3TDE5LjY2NzMgMTAuNjk4TDE3LjE5MjQgOC4yMjMxMUwxNS43NzgyIDkuNjM3MzJMMTcuODk5NSAxMS43NTg3TDE2LjQ4NTMgMTMuMTcyOUwxNC4zNjQgMTEuMDUxNkwxMi4xNzE5IDEzLjI0MzZDMTMuNDU4MSAxNS4xODUgMTMuMjQ2IDE3LjgyNjQgMTEuNTM1NSAxOS41MzY4QzkuNTgyOTEgMjEuNDg5NSA2LjQxNzA5IDIxLjQ4OTUgNC40NjQ0NyAxOS41MzY4QzIuNTExODQgMTcuNTg0MiAyLjUxMTg0IDE0LjQxODQgNC40NjQ0NyAxMi40NjU4QzYuMTc0OTMgMTAuNzU1MyA4LjgxNjMzIDEwLjU0MzIgMTAuNzU3NyAxMS44Mjk0Wk0xMC4xMjEzIDE4LjEyMjZDMTEuMjkyOSAxNi45NTEgMTEuMjkyOSAxNS4wNTE2IDEwLjEyMTMgMTMuODhDOC45NDk3NSAxMi43MDg0IDcuMDUwMjUgMTIuNzA4NCA1Ljg3ODY4IDEzLjg4QzQuNzA3MTEgMTUuMDUxNiA0LjcwNzExIDE2Ljk1MSA1Ljg3ODY4IDE4LjEyMjZDNy4wNTAyNSAxOS4yOTQyIDguOTQ5NzUgMTkuMjk0MiAxMC4xMjEzIDE4LjEyMjZaIiBmaWxsPSIjMTIxMjFCIi8+Cjwvc3ZnPgo=");
        background-size: 24px;
      }

      &--checked {
        width: 41px;
        height: 41px;
        background-color: #165E2E1A;
        background-image: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE3IiBoZWlnaHQ9IjE3IiB2aWV3Qm94PSIwIDAgMTcgMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03LjA4MzEyIDEwLjc0NTZMMTMuNTk0NCA0LjIzNDM4TDE0LjU5NjEgNS4yMzYxMUw3LjA4MzEyIDEyLjc0OTFMMi41NzUzMiA4LjI0MTMzTDMuNTc3MDYgNy4yMzk2MUw3LjA4MzEyIDEwLjc0NTZaIiBmaWxsPSIjMTY1RTJFIi8+Cjwvc3ZnPgo=");
        background-size: 17px;
      }
    }

    &__title {
      color: #0C0C0D;
      font-size: 20px;
      font-weight: 500;
      line-height: 24px;
      margin: 0 0 8px;
      padding: 0;
    }

    &__desc {
      font-size: 14px;
      font-weight: 400;
      line-height: 16.41px;
      color: #56585A;
      margin: 0;
      padding: 0;
    }

    &__faq {
      border-top: 1px solid #EEEFF1;
      margin-top: 32px;
      padding-top: 32px;

      ul {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;

        li {
          margin: 0;

          a {
            font-size: 13px;
            font-weight: 400;
            line-height: 21px;
            border-bottom: 1px solid #56585A;
            color: #56585A;

            &:after {
              content: "";
              width: 10px;
              height: 10px;
              display: inline-block;
              background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE3ODA4XzU2NjQpIj4KPHBhdGggZD0iTTcuNzQwMTcgNS4xNjk4M0w0LjU3MzkyIDEuOTEzMjdMNS40MDg2OSAxLjA1NDY5TDkuOTk5OTkgNS43NzY5NUw1LjQwODY5IDEwLjQ5OTFMNC41NzM5MiA5LjY0MDU1TDcuNzQwMTcgNi4zODQwNkgwLjU1NTU0MlY1LjE2OTgzSDcuNzQwMTdaIiBmaWxsPSIjNTY1ODVBIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTc4MDhfNTY2NCI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=") center center no-repeat;
              margin-left: 5px;

              .rtl & {
                transform: rotate(180deg);
                margin-left: 0;
                margin-right: 5px;
              }
            }


            &:hover {
              color: #0C0C0D;
              border-bottom: 1px solid #0C0C0D;

              &:after {
                background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE3ODA4XzU2NjgpIj4KPHBhdGggZD0iTTcuNzQwMTcgNS4xNjk4M0w0LjU3MzkyIDEuOTEzMjdMNS40MDg2OSAxLjA1NDY5TDkuOTk5OTkgNS43NzY5NUw1LjQwODY5IDEwLjQ5OTFMNC41NzM5MiA5LjY0MDU1TDcuNzQwMTcgNi4zODQwNkgwLjU1NTU0MlY1LjE2OTgzSDcuNzQwMTdaIiBmaWxsPSIjMEMwQzBEIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTc4MDhfNTY2OCI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=") center center no-repeat;
              }
            }
          }

          &:first-child {
            a {
              border-bottom: 1px solid #404BF2;
              color: #404BF2;

              &:after {
                background: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjEwIiBoZWlnaHQ9IjExIiB2aWV3Qm94PSIwIDAgMTAgMTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xNjQ5M183MDU3MykiPgo8cGF0aCBkPSJNNy43NDAyOSA1LjE2OTgzTDQuNTc0MDQgMS45MTMyN0w1LjQwODgxIDEuMDU0NjlMMTAuMDAwMSA1Ljc3Njk1TDUuNDA4ODEgMTAuNDk5MUw0LjU3NDA0IDkuNjQwNTVMNy43NDAyOSA2LjM4NDA2SDAuNTU1NjY0VjUuMTY5ODNINy43NDAyOVoiIGZpbGw9IiM0MDRCRjIiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8xNjQ5M183MDU3MyI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) center center no-repeat;
              }

              &:hover {
                color: #0C0C0D;
                border-bottom: 1px solid #0C0C0D;

                &:after {
                  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE3ODA4XzU2NjgpIj4KPHBhdGggZD0iTTcuNzQwMTcgNS4xNjk4M0w0LjU3MzkyIDEuOTEzMjdMNS40MDg2OSAxLjA1NDY5TDkuOTk5OTkgNS43NzY5NUw1LjQwODY5IDEwLjQ5OTFMNC41NzM5MiA5LjY0MDU1TDcuNzQwMTcgNi4zODQwNkgwLjU1NTU0MlY1LjE2OTgzSDcuNzQwMTdaIiBmaWxsPSIjMEMwQzBEIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTc4MDhfNTY2OCI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=") center center no-repeat;
                }
              }
            }
          }
        }
      }
    }

    &__license {
      gap: 16px;
      flex-direction: column;
      display: flex;

      .wps-alert {
        margin-top: 16px;
      }


      .wps-addon__step__active-license {
        display: flex;
        gap: 16px;
        justify-content: space-between;
        margin-top: 32px;

        @media(max-width: 768px) {
          flex-direction: column;
        }

        input {
          padding: 10px 14px !important;
          border-radius: 3px;
          border: 1px solid #DADCE0 !important;
          font-size: 14px;
          font-weight: 400;
          width: 100%;

          &::placeholder {
            color: #8F9093;
          }

          &.wps-danger {
            border: 1px solid #D63638 !important;
            box-shadow: 0 0 0 3px #D6363833;
            outline: 2px solid rgba(0, 0, 0, 0);
          }

          &.wps-warning {
            border: 1px solid #EE8B44 !important;
            box-shadow: 0 0 0 3px #EE8B4433;
            outline: 2px solid rgba(0, 0, 0, 0);
          }

          &:focus, &:active {
            border: 1px solid #404BF2 !important;
            box-shadow: 0 0 0 3px #404BF233;
            outline: 2px solid rgba(0, 0, 0, 0);
          }
        }
      }
    }

    &__download {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .wps-addon__download__items {
        display: flex;
        gap: 16px;
        flex-direction: column;
      }

      .wps-addon__download__title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 32px;

        h3 {
          font-size: 16px;
          font-weight: 500;
          line-height: 18.75px;
          color: #0C0C0D;
          margin: 0;
        }

        a {
          font-size: 14px;
          font-weight: 500;
          line-height: 16.41px;
          border-bottom: 1px solid;
          cursor: pointer;
        }
      }

      .wps-addon__download__item {
        border: 1px solid #DADCE0;
        padding: 16px;
        gap: 16px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;

        @media (max-width: 768px) {
          flex-direction: column;
          align-items: flex-end;
          gap: 0;
          position: relative;
         }

        &.wps-has-checkbox:not(.wps-addon__download__item--disabled):hover {
          background: #FAFAFB;
          border: 1px solid #56585A
        }

        &--disabled {
          background: #EEEFF1;

          &:hover {
            background: #EEEFF1;
            border: 1px solid #DADCE0;
          }
        }

        .wps-postbox-addon__read-more {
          padding: 3px 4px;
          gap: 3px;
          border-radius: 4px;
          background: #404BF20D;
          font-size: 11px;
          font-weight: 500;
          color: #6972F9;
          display: inline-flex;
          align-items: center;
          white-space: nowrap;

          &:hover {
            color: #0C0C0D;

            &:after {
              filter: grayscale(1) brightness(0.5);
            }
          }

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

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

        &--info {
          display: flex;
          gap: 16px;

          @media (max-width: 768px) {
            order: 2;
            display: block;
            width: 100%;
          }

          &__img {
            background: #404BF214;
            padding: 8px;
            border-radius: 6px;
            width: 48px;
            min-width: 48px;
            height: 48px;
            align-items: center;
            display: flex;
            justify-content: center;
            box-sizing: border-box;

            @media(max-width: 768px) {
              margin-bottom: 8px;
            }

            img {
              width: 24px;
              height: 24px;
            }
          }

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

          &__title {
            color: #0C0C0D;
            font-size: 15px;
            font-weight: 500;
            line-height: 17.58px;
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
            min-height: 27px;

            span.wps-postbox-addon__version {
              color: #898A8E;
              font-size: 11px;
              font-weight: 500;
              line-height: 16px;
            }


          }

          &__desc {
            color: #717274;
            font-size: 13px;
            font-weight: 400;
            line-height: 16px;
            margin: 0 !important;
          }
        }

        &--select {
          display: flex;
          gap: 12px;
          align-items: flex-start;
          position: absolute;
          justify-content: flex-end;
          top: 16px;
          right: 16px;

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

          @media (max-width: 768px) {
            order: 1;
          }

          .wps-postbox-addon__status {

            &--disable {
              color: #56585A;
            }
          }

          input[type=checkbox] {
            margin: 0 !important;
          }
        }

      }

    }

    &__action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 32px;

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

      .wps-addon__step__back {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        font-weight: 500;
        line-height: 15.23px;
        color: #56585A;

        @media (max-width: 768px) {
          order: 2
        }

        &:hover {
          color: #0C0C0D;

          &:before {
            background-image: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01Ljg3MTMyIDguMjUxNjNIMTVWOS43NTE2M0g1Ljg3MTMyTDkuODk0MyAxMy43NzQ2TDguODMzNjUgMTQuODM1MkwzIDkuMDAxNjNMOC44MzM2NSAzLjE2Nzk3TDkuODk0MyA0LjIyODYzTDUuODcxMzIgOC4yNTE2M1oiIGZpbGw9IiMwQzBDMEQiLz4KPC9zdmc+Cg==");
          }
        }

        &:before {
          content: '';
          display: inline-block;
          width: 18px;
          height: 18px;
          background-size: 12px 11.6px;
          background-image: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01Ljg3MTMyIDguMjUxNjNIMTVWOS43NTE2M0g1Ljg3MTMyTDkuODk0MyAxMy43NzQ2TDguODMzNjUgMTQuODM1MkwzIDkuMDAxNjNMOC44MzM2NSAzLjE2Nzk3TDkuODk0MyA0LjIyODYzTDUuODcxMzIgOC4yNTE2M1oiIGZpbGw9IiM1NjU4NUEiLz4KPC9zdmc+Cg==");
          background-repeat: no-repeat;
          background-position: center;

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

      }

      .wps-postbox-addon-button {
        padding: 8px 16px;
        @media (max-width: 768px) {
          padding: 8px;
          width: 100%;
          box-sizing: border-box;
        }
      }
    }

    &__back-to-addons {
      margin-top: 44px;
      display: flex;
      gap: 4px;
      color: #56585A;

      &:before {
        content: '';
        width: 18px;
        min-width: 18px;
        height: 18px;
        background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuODcxMzIgOC4yNTE2M0gxNVY5Ljc1MTYzSDUuODcxMzJMOS44OTQzIDEzLjc3NDZMOC44MzM2NSAxNC44MzUyTDMgOS4wMDE2M0w4LjgzMzY1IDMuMTY3OTdMOS44OTQzIDQuMjI4NjNMNS44NzEzMiA4LjI1MTYzWiIgZmlsbD0iIzU2NTg1QSIvPgo8L3N2Zz4K") center center no-repeat;

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

      &:hover {
        color: #0C0C0D;

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


    }
  }
}





@media(max-width: 768px){
  .wps-addon__download__items--get-started .wps-addon__download__item--info{
    margin-bottom: 44px!important;
  }
}



.wps-postbox-addon__label {
  font-size: 10px;
  font-weight: 500;
  line-height: 11.72px;
  letter-spacing: 0.07em;
  padding: 4px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;

  &--new {
    color: #404BF2;
    background: #ECEDFE;
  }

  &--updated {
    color: #4F2DBC;
    background: #EBE9F0;
  }
}

.wps-postbox-addon__status {
  padding: 2px 4px;
  gap: 3px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 15.23px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  @media(max-width: 768px) {
    margin-top: 4px;
  }

  &--success {
    color: #196140;
    background: #1961400D;
  }

  &--installed {
    color: #196140;
    background: transparent;
  }

  &--danger {
    color: #D5201C;
    background: #D5201C0D;
  }

  &--primary {
    color: #56585A;
    background: transparent;
  }

  &--purple {
    color: #7362BF;
    background: #7362BF0D;
  }

  &--waiting {
    color: #7362BF;
    background: #7362BF0D;
  }

  &--disable {
    color: #56585A;
    background: transparent;
  }

}

.wps-postbox-addon-button , .wps-wrap a.wps-postbox-addon-button{
  border: none;
  padding: 8px 16px;
  gap: 8px;
  border-radius: 4px;
  background: #12121B;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #FFFFFF ;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 154px;

  &.disabled {
    background: #F1F1F9;
    color: #B2B2CF;
    pointer-events: none;

    &:after {
      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE3ODU1XzEwNjM1NSkiPgo8cGF0aCBkPSJNOS4yODgyNCA1LjYwNjE0TDUuNDg4NzQgMS42OTgyN0w2LjQ5MDQ2IDAuNjY3OTY5TDEyIDYuMzM0NjhMNi40OTA0NiAxMi4wMDEzTDUuNDg4NzQgMTAuOTcxTDkuMjg4MjQgNy4wNjMyMUgwLjY2NjY4N1Y1LjYwNjE0SDkuMjg4MjRaIiBmaWxsPSIjQjJCMkNGIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTc4NTVfMTA2MzU1Ij4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=") center center no-repeat;
    }

  }

  &.redirecting, &.redirecting.wps-loading-button, &.redirecting.disabled {
    background: transparent !important;
    color: #56585A !important;
    font-size: 14px;
    font-weight: 500;
    opacity: 1;

    &:hover {
      background: transparent;
    }

    &:after {
      position: relative;
      width: 16px;
      min-width: 16px;
      height: 16px;
      -webkit-animation-name: wps-cycle;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-fill-mode: forwards;
      animation-name: wps-cycle;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
      -moz-animation-name: wps-cycle;
      -moz-animation-duration: 2s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-fill-mode: forwards;
      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjQxNzIgMi45NTM3OEM0LjgxMDM4IDEuOTQzMjggNi4zMzM4MSAxLjMzMjAzIDguMDAwMDEgMS4zMzIwM0MxMS42ODE5IDEuMzMyMDMgMTQuNjY2NyA0LjMxNjggMTQuNjY2NyA3Ljk5ODdDMTQuNjY2NyA5LjQyMjc2IDE0LjIyMDEgMTAuNzQyNiAxMy40NTk1IDExLjgyNThMMTEuMzMzMyA3Ljk5ODdIMTMuMzMzM0MxMy4zMzMzIDUuMDUzMTggMTAuOTQ1NSAyLjY2NTM2IDguMDAwMDEgMi42NjUzNkM2LjU2NjU2IDIuNjY1MzYgNS4yNjUxOSAzLjIzMDg4IDQuMzA2ODMgNC4xNTA5OEwzLjY0MTcyIDIuOTUzNzhaTTEyLjM1ODMgMTMuMDQzNkMxMS4xODk2IDE0LjA1NDEgOS42NjYyMSAxNC42NjU0IDguMDAwMDEgMTQuNjY1NEM0LjMxODExIDE0LjY2NTQgMS4zMzMzNCAxMS42ODA2IDEuMzMzMzQgNy45OTg3QzEuMzMzMzQgNi41NzQ2IDEuNzc5ODcgNS4yNTQ4IDIuNTQwNTQgNC4xNzE2Nkw0LjY2NjY4IDcuOTk4N0gyLjY2NjY4QzIuNjY2NjggMTAuOTQ0MiA1LjA1NDQ5IDEzLjMzMiA4LjAwMDAxIDEzLjMzMkM5LjQzMzQ4IDEzLjMzMiAxMC43MzQ4IDEyLjc2NjUgMTEuNjkzMiAxMS44NDY0TDEyLjM1ODMgMTMuMDQzNloiIGZpbGw9IiM1NjU4NUEiLz4KPC9zdmc+Cg==") center center no-repeat;

      .rtl & {
        transform: none;
      }
    }
  }

  &:hover {
    background: #12121BE5;
  }

  &:focus, &:active {
    background: #0C0C11;
  }

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

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

 }

.wps-addon__download__item, .wps-postbox-addon__item {
  &--actions {
    display: flex;
    gap: 12px;
    align-items: center;
    position: absolute;
    top: 16px;
    right: 16px;

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

    @media (max-width: 768px) {
      justify-content: flex-end;
      order: 1;
      gap: 8px;
      align-items: self-start;
      height: calc(100% - 32px);
      top: 16px;
    }

    .wps-addon--actions {
      position: relative;

      &.active .wps-addon--submenus {
        display: block
      }


      span.wps-addon--actions--show-more {
        position: relative;
        display: block;
        cursor: pointer;
        width: 27px;
        height: 27px;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNSAxLjg3NUM2LjgxMjUgMS44NzUgNi4yNSAyLjQzNzUgNi4yNSAzLjEyNUM2LjI1IDMuODEyNSA2LjgxMjUgNC4zNzUgNy41IDQuMzc1QzguMTg3NSA0LjM3NSA4Ljc1IDMuODEyNSA4Ljc1IDMuMTI1QzguNzUgMi40Mzc1IDguMTg3NSAxLjg3NSA3LjUgMS44NzVaTTcuNSAxMC42MjVDNi44MTI1IDEwLjYyNSA2LjI1IDExLjE4NzUgNi4yNSAxMS44NzVDNi4yNSAxMi41NjI1IDYuODEyNSAxMy4xMjUgNy41IDEzLjEyNUM4LjE4NzUgMTMuMTI1IDguNzUgMTIuNTYyNSA4Ljc1IDExLjg3NUM4Ljc1IDExLjE4NzUgOC4xODc1IDEwLjYyNSA3LjUgMTAuNjI1Wk03LjUgNi4yNUM2LjgxMjUgNi4yNSA2LjI1IDYuODEyNSA2LjI1IDcuNUM2LjI1IDguMTg3NSA2LjgxMjUgOC43NSA3LjUgOC43NUM4LjE4NzUgOC43NSA4Ljc1IDguMTg3NSA4Ljc1IDcuNUM4Ljc1IDYuODEyNSA4LjE4NzUgNi4yNSA3LjUgNi4yNVoiIGZpbGw9IiMxMjEyMUIiLz4KPC9zdmc+Cg==");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 15px;
        background-color: #12121B0A;
        border-radius: 4px;

        &:hover {
          background-color: #12121B0F;
        }
      }

      &.active {
        span.wps-addon--actions--show-more, span.wps-addon--actions--show:hover {
          background-color: #12121B;
          background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNSAxLjg3NUM2LjgxMjUgMS44NzUgNi4yNSAyLjQzNzUgNi4yNSAzLjEyNUM2LjI1IDMuODEyNSA2LjgxMjUgNC4zNzUgNy41IDQuMzc1QzguMTg3NSA0LjM3NSA4Ljc1IDMuODEyNSA4Ljc1IDMuMTI1QzguNzUgMi40Mzc1IDguMTg3NSAxLjg3NSA3LjUgMS44NzVaTTcuNSAxMC42MjVDNi44MTI1IDEwLjYyNSA2LjI1IDExLjE4NzUgNi4yNSAxMS44NzVDNi4yNSAxMi41NjI1IDYuODEyNSAxMy4xMjUgNy41IDEzLjEyNUM4LjE4NzUgMTMuMTI1IDguNzUgMTIuNTYyNSA4Ljc1IDExLjg3NUM4Ljc1IDExLjE4NzUgOC4xODc1IDEwLjYyNSA3LjUgMTAuNjI1Wk03LjUgNi4yNUM2LjgxMjUgNi4yNSA2LjI1IDYuODEyNSA2LjI1IDcuNUM2LjI1IDguMTg3NSA2LjgxMjUgOC43NSA3LjUgOC43NUM4LjE4NzUgOC43NSA4Ljc1IDguMTg3NSA4Ljc1IDcuNUM4Ljc1IDYuODEyNSA4LjE4NzUgNi4yNSA3LjUgNi4yNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
        }
      }

      .wps-addon--submenus {
        display: none;
        position: absolute;
        border: 1px solid #DADCE0;
        box-shadow: 1px 0 8px 0 #0000000D;
        background: #fff;
        border-radius: 4px;
        width: 193px;
        margin: 0;
        z-index: 9;
        gap: 4px;
        padding: 4px 0;
        box-sizing: border-box;
        top: -1px;
        left: calc(100% + 4px);

        .rtl & {
          left: unset;
          right: calc(100% + 4px);
        }

        @media(max-width: 1105px) {
          right: 0;
          left: unset;
          top: calc(100% + 4px);

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

        li {
          margin: 0 auto 4px auto;
          display: flex;
          width: calc(100% - 8px);

          .wps-separator {
            background: #EEEFF1;
            height: 1px;
            box-sizing: border-box;
            border-radius: 0;
            width: calc(100% + 8px);
            margin-right: -4px;
            margin-left: -4px;
          }

          &:last-child {
            margin-bottom: 0;
          }

          a {
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 500;
            line-height: 15.23px;
            color: #5F6368;
            width: 100%;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;

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

            &:hover {
              background: #FAFAFB;
              color: #0C0C0D;

              &.wps-addon--submenu__settings span:before {
                background: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE2IiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgMTYgMTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjkxMzU3IDcuNTAwNjFDMS45MTM1NyA2Ljk2MDI5IDEuOTgyMTQgNi40MzU5OCAyLjExMTA0IDUuOTM1OTJDMi43OTI0NiA1Ljk3MTI1IDMuNDY4ODcgNS42MzIwNyAzLjgzMzQ1IDUuMDAwNjJDNC4xOTc3NCA0LjM2OTY0IDQuMTUzNjEgMy42MTQ5MiAzLjc4MzA4IDMuMDQyNjFDNC41MjgyOSAyLjMxMDI5IDUuNDU2MjcgMS43NjMzNyA2LjQ5MjM0IDEuNDc2NTZDNi44MDI0NSAyLjA4NDM5IDcuNDM0MzkgMi41MDA2MiA4LjE2MzU3IDIuNTAwNjJDOC44OTI3NiAyLjUwMDYyIDkuNTI0NyAyLjA4NDM5IDkuODM0ODIgMS40NzY1NkMxMC44NzA5IDEuNzYzMzcgMTEuNzk4OSAyLjMxMDI5IDEyLjU0NDEgMy4wNDI2MUMxMi4xNzM1IDMuNjE0OTIgMTIuMTI5NCA0LjM2OTY0IDEyLjQ5MzcgNS4wMDA2MkMxMi44NTgzIDUuNjMyMDcgMTMuNTM0NyA1Ljk3MTI1IDE0LjIxNjEgNS45MzU5MkMxNC4zNDUgNi40MzU5OCAxNC40MTM2IDYuOTYwMjkgMTQuNDEzNiA3LjUwMDYxQzE0LjQxMzYgOC4wNDA5MiAxNC4zNDUgOC41NjUyMyAxNC4yMTYxIDkuMDY1MjlDMTMuNTM0NyA5LjAyOTk4IDEyLjg1ODMgOS4zNjkxNyAxMi40OTM3IDEwLjAwMDZDMTIuMTI5NCAxMC42MzE2IDEyLjE3MzUgMTEuMzg2MyAxMi41NDQxIDExLjk1ODZDMTEuNzk4OSAxMi42OTA5IDEwLjg3MDkgMTMuMjM3OSA5LjgzNDgyIDEzLjUyNDdDOS41MjQ3IDEyLjkxNjkgOC44OTI3NiAxMi41MDA2IDguMTYzNTcgMTIuNTAwNkM3LjQzNDM5IDEyLjUwMDYgNi44MDI0NSAxMi45MTY5IDYuNDkyMzQgMTMuNTI0N0M1LjQ1NjI3IDEzLjIzNzkgNC41MjgyOSAxMi42OTA5IDMuNzgzMDggMTEuOTU4NkM0LjE1MzYxIDExLjM4NjMgNC4xOTc3NCAxMC42MzE2IDMuODMzNDUgMTAuMDAwNkMzLjQ2ODg3IDkuMzY5MTcgMi43OTI0NiA5LjAyOTk4IDIuMTExMDQgOS4wNjUyOUMxLjk4MjE0IDguNTY1MjMgMS45MTM1NyA4LjA0MDkyIDEuOTEzNTcgNy41MDA2MVpNNC45MTU5OCA5LjM3NTZDNS4zMDk3OSAxMC4wNTc3IDUuNDIyNjkgMTAuODQxOSA1LjI2ODY5IDExLjU3OEM1LjUyMzU2IDExLjc1OTQgNS43OTQ4NiAxMS45MTY1IDYuMDc5MTMgMTIuMDQ3QzYuNjM5NjcgMTEuNTQ1MiA3LjM3NTU3IDExLjI1MDYgOC4xNjM1NyAxMS4yNTA2QzguOTUxNTcgMTEuMjUwNiA5LjY4NzQ1IDExLjU0NTIgMTAuMjQ4IDEyLjA0N0MxMC41MzIzIDExLjkxNjUgMTAuODAzNiAxMS43NTk0IDExLjA1ODQgMTEuNTc4QzEwLjkwNDQgMTAuODQxOSAxMS4wMTczIDEwLjA1NzcgMTEuNDExMiA5LjM3NTZDMTEuODA0OSA4LjY5MzU0IDEyLjQyNzYgOC4yMDM3MyAxMy4xNDIgNy45NjkwNEMxMy4xNTYzIDcuODE0MTcgMTMuMTYzNiA3LjY1Nzk4IDEzLjE2MzYgNy41MDA2MUMxMy4xNjM2IDcuMzQzMjkgMTMuMTU2MyA3LjE4NzA0IDEzLjE0MiA3LjAzMjIzQzEyLjQyNzYgNi43OTc1NCAxMS44MDQ5IDYuMzA3NzMgMTEuNDExMiA1LjYyNTYyQzExLjAxNzMgNC45NDM1MSAxMC45MDQ0IDQuMTU5MzQgMTEuMDU4NCAzLjQyMzI2QzEwLjgwMzYgMy4yNDE5MSAxMC41MzIzIDMuMDg0NzcgMTAuMjQ4IDIuOTU0MThDOS42ODc0NSAzLjQ1NjAxIDguOTUxNTcgMy43NTA2MiA4LjE2MzU3IDMuNzUwNjJDNy4zNzU1NyAzLjc1MDYyIDYuNjM5NjcgMy40NTYwMSA2LjA3OTEzIDIuOTU0MThDNS43OTQ4NiAzLjA4NDc3IDUuNTIzNTYgMy4yNDE5MSA1LjI2ODY5IDMuNDIzMjZDNS40MjI2OSA0LjE1OTM0IDUuMzA5NzkgNC45NDM1MSA0LjkxNTk4IDUuNjI1NjJDNC41MjIxNyA2LjMwNzczIDMuODk5NTQgNi43OTc1NCAzLjE4NTE0IDcuMDMyMjNDMy4xNzA4MSA3LjE4NzA0IDMuMTYzNTcgNy4zNDMyOSAzLjE2MzU3IDcuNTAwNjFDMy4xNjM1NyA3LjY1Nzk4IDMuMTcwODEgNy44MTQxNyAzLjE4NTE0IDcuOTY5MDRDMy44OTk1NCA4LjIwMzczIDQuNTIyMTcgOC42OTM1NCA0LjkxNTk4IDkuMzc1NlpNOC4xNjM1NyA5LjM3NTZDNy4xMjgwMSA5LjM3NTYgNi4yODg1NyA4LjUzNjE3IDYuMjg4NTcgNy41MDA2MUM2LjI4ODU3IDYuNDY1MTEgNy4xMjgwMSA1LjYyNTYyIDguMTYzNTcgNS42MjU2MkM5LjE5OTE0IDUuNjI1NjIgMTAuMDM4NiA2LjQ2NTExIDEwLjAzODYgNy41MDA2MUMxMC4wMzg2IDguNTM2MTcgOS4xOTkxNCA5LjM3NTYgOC4xNjM1NyA5LjM3NTZaTTguMTYzNTcgOC4xMjU2QzguNTA4NzYgOC4xMjU2IDguNzg4NTcgNy44NDU3OSA4Ljc4ODU3IDcuNTAwNjFDOC43ODg1NyA3LjE1NTQyIDguNTA4NzYgNi44NzU2MSA4LjE2MzU3IDYuODc1NjFDNy44MTgzOSA2Ljg3NTYxIDcuNTM4NTcgNy4xNTU0MiA3LjUzODU3IDcuNTAwNjFDNy41Mzg1NyA3Ljg0NTc5IDcuODE4MzkgOC4xMjU2IDguMTYzNTcgOC4xMjU2WiIgZmlsbD0iIzBDMEMwRCIvPgo8L3N2Zz4K") center center no-repeat;
              }

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

            &.wps-addon--submenu__settings {
              display: flex;
              gap: 6px;
              align-items: center;

              span {
                display: flex;
                align-items: center;
                gap: 8px;

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

            }

          }
        }
      }

    }

    .wps-postbox-addon__buttons {
      display: flex;
      gap: 12px;
      align-items: center;
      @media (max-width: 768px) {
        position: absolute;
        bottom: 0;
      }
    }

    .wps-postbox-addon__button {
      padding: 6px 12px;
      gap: 2px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 500;
      line-height: 15.23px;
      color: #56585A;
      transition: all .3s ease-in-out;
      cursor: pointer;
      user-select: none;
      background: #12121B0A;
      border: none;

      &:focus, &:active {
        background: #12121B14;
        color: #12121B;
      }

      &:hover {
        background: #12121B0F;
        color: #56585A;

        &.active {
          background: #121926CC;
          color: #fff;
        }
      }

      &.active {
        background: #12121B;
        color: #fff;

        &:focus, &:active {
          background: #0E0E15;
          color: #fff;
        }
      }

      &.js-addon-active-plugin-btn , &.button-retry-addon-download{
        background: #404BF20A;
        color: #404BF2;

        &:hover {
          background: #404BF20F;
        }

        &:focus, &:active {
          background: #404BF214;
        }

      }
    }
  }
}

.wps-review_premium {
  margin-top: 32px;
  padding: 24px;
  gap: 24px;
  display: flex;
  border-radius: 8px;
  border: 1px solid #F6585E4D;
  background: linear-gradient(84.03deg, #FFF7F7 0.71%, #FFFFFF 99.08%);
  @media (max-width: 768px) {
    display: block;
    &:before {
      display: none !important;
    }
    h4 {
      &:before {
        content: "";
        width: 20px;
        min-width: 20px;
        height: 20px;
        display: inline-block;
        background: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjI2IiBoZWlnaHQ9IjI2IiB2aWV3Qm94PSIwIDAgMjYgMjYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy44MTAxIDMuMzU5MzhDMTUuODQ5MiAzLjM1OTM4IDE0LjA5NDIgNC4zMTI3MSAxMy4wMDAxIDUuNzc1MjFDMTEuOTA1OSA0LjMxMjcxIDEwLjE1MDkgMy4zNTkzOCA4LjE5MDA4IDMuMzU5MzhDNC44NjQyNSAzLjM1OTM4IDIuMTY2NzUgNi4wNjc3MSAyLjE2Njc1IDkuNDE1MjFDMi4xNjY3NSAxMC43MDQ0IDIuMzcyNTggMTEuODk2IDIuNzMwMDggMTMuMDAxQzQuNDQxNzUgMTguNDE3NyA5LjcxNzU4IDIxLjY1NjkgMTIuMzI4NCAyMi41NDUyQzEyLjY5NjcgMjIuNjc1MiAxMy4zMDM0IDIyLjY3NTIgMTMuNjcxNyAyMi41NDUyQzE2LjI4MjYgMjEuNjU2OSAyMS41NTg0IDE4LjQxNzcgMjMuMjcwMSAxMy4wMDFDMjMuNjI3NiAxMS44OTYgMjMuODMzNCAxMC43MDQ0IDIzLjgzMzQgOS40MTUyMUMyMy44MzM0IDYuMDY3NzEgMjEuMTM1OSAzLjM1OTM4IDE3LjgxMDEgMy4zNTkzOFoiIGZpbGw9IiNGNjU4NUUiLz4KPC9zdmc+Cg==) center center no-repeat;
        background-size: contain;
        margin-top: 5px;
        float: left;
        margin-right: 5px;

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

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

  &__content {
    display: flex;
    gap: 14px;
    flex-direction: column;

    h4 {
      font-size: 19px;
      font-weight: 500;
      line-height: 26px;
      color: rgba(45, 30, 31, 1);
      margin: 0;
      padding: 0;
      @media (max-width: 768px) {
        font-size: 17px;
      }
    }

    p {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: rgba(118, 98, 99, 1);
      margin: 0;
      @media (max-width: 768px) {
        font-size: 14px;
      }
    }

    p:last-child {
      margin-top: -2px;
    }
  }

  &__actions {
    display: flex;
    gap: 32px;
    flex-direction: row;
    margin-top: 24px;
    align-items: center;
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 16px;
    }

    &__review-btn {
      background: #f6585e;
      padding: 8px 23px;
      gap: 6px;
      border-radius: 4px;
      color: #FFFFFF !important;
      font-size: 15px;
      font-weight: 500;
      line-height: 22px;
      display: inline-flex;
      align-items: center;
      @media (max-width: 768px) {
        font-size: 17px;
      }

      &:hover {
        background: #F6585ECC;
      }

      &:after {
        content: '';
        width: 11.33px;
        min-width: 11.33px;
        height: 11.33px;
        display: inline-flex;
        background: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgMTIgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05LjI4ODA1IDUuNjA2MTRMNS40ODg1NSAxLjY5ODI3TDYuNDkwMjggMC42Njc5NjlMMTEuOTk5OCA2LjMzNDY4TDYuNDkwMjggMTIuMDAxM0w1LjQ4ODU1IDEwLjk3MUw5LjI4ODA1IDcuMDYzMjFIMC42NjY1MDRWNS42MDYxNEg5LjI4ODA1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==") center center no-repeat;

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

    &__overview-btn {
      color: #56585A !important;
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
      @media (max-width: 768px) {
        font-size: 13px;
      }

      &:hover {
        color: rgba(12, 12, 13, 1) !important;
      }
    }
  }
}

.wps-alert {
  padding: 16px;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  align-items: flex-start;

  & > div {
    display: flex;
    gap: 6px;
    flex-direction: column;
    align-items: self-start;

    p {
      margin: 0;
      padding: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #0C0C0D;
      word-break: break-word;
    }

    a {
      font-size: 13px;
      font-weight: 400;
      line-height: 21px;
      border-bottom: 1px solid;
    }
  }

  &--warning {
    border: 1px solid #EE8B4466;
    background: #EE8B440D;

    span.icon {
      width: 17px;
      height: 22px;
      display: inline-block;
      min-width: 17px;
      background: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE3IiBoZWlnaHQ9IjE3IiB2aWV3Qm94PSIwIDAgMTcgMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjUwMTMgMTUuNTg0NkM0LjU4OTI4IDE1LjU4NDYgMS40MTc5NyAxMi40MTMzIDEuNDE3OTcgOC41MDEzQzEuNDE3OTcgNC41ODkyOCA0LjU4OTI4IDEuNDE3OTcgOC41MDEzIDEuNDE3OTdDMTIuNDEzMyAxLjQxNzk3IDE1LjU4NDYgNC41ODkyOCAxNS41ODQ2IDguNTAxM0MxNS41ODQ2IDEyLjQxMzMgMTIuNDEzMyAxNS41ODQ2IDguNTAxMyAxNS41ODQ2Wk03Ljc5Mjk3IDcuNzkyOTdWMTIuMDQzSDkuMjA5NjRWNy43OTI5N0g3Ljc5Mjk3Wk03Ljc5Mjk3IDQuOTU5NjRWNi4zNzYzSDkuMjA5NjRWNC45NTk2NEg3Ljc5Mjk3WiIgZmlsbD0iI0VFOEI0NCIvPgo8L3N2Zz4K") center center no-repeat;
    }
  }

  &--danger {
    background: #D636380D;
    border: 1px solid #D6363866;

    span.icon {
      width: 17px;
      height: 22px;
      display: inline-block;
      min-width: 17px;
      background: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE3IiBoZWlnaHQ9IjE5IiB2aWV3Qm94PSIwIDAgMTcgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjUwMTEgMTcuNTg0NkM0LjU4OTA5IDE3LjU4NDYgMS40MTc3NyAxNC40MTMzIDEuNDE3NzcgMTAuNTAxM0MxLjQxNzc3IDYuNTg5MjggNC41ODkwOSAzLjQxNzk3IDguNTAxMSAzLjQxNzk3QzEyLjQxMzEgMy40MTc5NyAxNS41ODQ0IDYuNTg5MjggMTUuNTg0NCAxMC41MDEzQzE1LjU4NDQgMTQuNDEzMyAxMi40MTMxIDE3LjU4NDYgOC41MDExIDE3LjU4NDZaTTcuNzkyNzcgOS43OTI5N1YxNC4wNDNIOS4yMDk0NFY5Ljc5Mjk3SDcuNzkyNzdaTTcuNzkyNzcgNi45NTk2NFY4LjM3NjNIOS4yMDk0NFY2Ljk1OTY0SDcuNzkyNzdaIiBmaWxsPSIjRDYzNjM4Ii8+Cjwvc3ZnPgo=") center center no-repeat;
    }
  }

  &--success {
    background: #1961400D;
    border: 1px solid #19614066;

    span.icon {
      width: 17px;
      height: 22px;
      display: inline-block;
      min-width: 17px;
      background: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE3IiBoZWlnaHQ9IjE3IiB2aWV3Qm94PSIwIDAgMTcgMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjQ5OTg0IDE1LjU4NDZDNC41ODc4MiAxNS41ODQ2IDEuNDE2NSAxMi40MTMzIDEuNDE2NSA4LjUwMTNDMS40MTY1IDQuNTg5MjggNC41ODc4MiAxLjQxNzk3IDguNDk5ODQgMS40MTc5N0MxMi40MTE4IDEuNDE3OTcgMTUuNTgzMiA0LjU4OTI4IDE1LjU4MzIgOC41MDEzQzE1LjU4MzIgMTIuNDEzMyAxMi40MTE4IDE1LjU4NDYgOC40OTk4NCAxNS41ODQ2Wk03Ljc5MzM1IDExLjMzNDZMMTIuODAyIDYuMzI1OTZMMTEuODAwMyA1LjMyNDIzTDcuNzkzMzUgOS4zMzExOUw1Ljc4OTkgNy4zMjc2Nkw0Ljc4ODE2IDguMzI5NDZMNy43OTMzNSAxMS4zMzQ2WiIgZmlsbD0iIzE5NjE0MCIvPgo8L3N2Zz4K") center center no-repeat;
    }
  }

  &.wps-hide {
    display: none;
  }
}

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