:global {

  .nbugs-component-card-wrap {

    &.clearfix::before,
    &.clearfix::after {
      content: ' ';
      display: table;
    }

    &.clearfix::after {
      clear: both;
    }

    position: relative;

    .operation-text-wrap,
    .operation-text-wrap-normal {
      display: none;
    }

    .card-loader {
      background: #fff;

      &.hide {
        display: none;
      }
    }

    .card-content {
      &.hide {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        overflow: hidden;
      }
    }

    &.show-operation-text {
      &.open {
        .card-content {
          margin-bottom: 50px;
        }

        .linear-gradient-wrap {
          display: none;
        }

        .operation-text-wrap {
          &.large,
          &.middle {
            padding: 25px 0;
            background: #fff;

            .text {
              padding-bottom: 14px;
            }
          }
        }
      }

      .operation-text-wrap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        color: #1786ec;
        text-align: center;

        &.large {
          padding: 100px 0 20px 0;

          .text {
            padding-bottom: 20px;
          }
        }

        &.middle {
          padding: 55px 0 20px 0;

          .text {
            padding-bottom: 15px;
          }
        }

        .text {
          position: absolute;
          z-index: 2;
          left: 0;
          right: 0;
          bottom: 0;
        }

        .linear-gradient-wrap {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            // mix-blend-mode: overlay;
          }
        }
      }

      .arrow {
        width: 10.5px;
        margin-left: 6px;
        position: relative;
        top: -3px;
      }

      .arrow-up {
        position: relative;
        top: 0;
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 6px;
        border-top: 1px;
        border-right: 1px;
        border-style: solid;
        border-bottom: none;
        border-left: none;
        transform: rotate(-45deg);
        border-color: #1786ec;
      }

      .arrow-down {
        position: relative;
        top: -4px;
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 6px;
        border-top: 1px;
        border-right: 1px;
        border-style: solid;
        border-bottom: none;
        border-left: none;
        transform: rotate(135deg);
        border-color: #1786ec;
      }

      .operation-text-wrap-normal {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        color: #1786ec;
        text-align: center;
        padding: 35px 0 20px 0;
        background-color: #fff;

        .text {
          position: absolute;
          z-index: 2;
          left: 0;
          right: 0;
          bottom: 0;
          padding-bottom: 20px;
        }
      }
    }
  }
}