#kerasno_coupon_wrapper {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
    grid-gap: 15px;
    justify-items: center;
    background-color: #dc143c !important;
    margin: 0 !important;
    padding: 30px !important;

    @media screen and (max-width : 768px) {
        grid-template-columns: 1fr;
    }
}
.kerasno_coupon_card.kcou_not_active {
    background: #ffa2a2 !important;
}
.kerasno_coupon_card {
    width: 400px !important;
    height: 180px !important;
    border-radius: 5px !important;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2) !important;
    background-color: #fff !important;
    padding: 10px 10px !important;
    position: relative !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
  }
  .kerasno_coupon_main,
  .kerasno_coupon_copybutton {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 10px !important;
    align-items: center !important;
    flex-flow: row-reverse !important;
    width: 92%;
  }
  .kerasno_coupon_card::after {
    position: absolute !important;
    content: "" !important;
    height: 40px !important;
    right: -20px !important;
    border-radius: 40px !important;
    z-index: 1 !important;
    top: 70px !important;
    background-color: #dc143c !important;
    width: 40px !important;
  }
  .kerasno_coupon_card::before {
    position: absolute !important;
    content: "" !important;
    height: 40px !important;
    left: -20px !important;
    border-radius: 40px !important;
    z-index: 1 !important;
    top: 70px !important;
    background-color: #dc143c !important;
    width: 40px !important;
  }
  .kerasno_coupon_amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height: 100% !important;
    
    h3 {
      margin: 0;
      position: absolute;
      left: 50px;
      top: 35px;
      &.kcou_fixed {
        left: 20px;
        top: 45px;
      }
    }
    span {
        font-size: 30px !important;
    }
    .kerasno_coupon_text {
        font-size: 15px !important;
        margin: 0 !important;
        position: absolute;
        left: 65px;
        top: 5px;
    }
    .kerasno_coupon_currency {
        font-size: 13px !important;
    }
  }
  .kerasno_coupon_vertical {
    border-left: 2px dashed #bbbbbb !important;
    height: 100px !important;
    position: absolute !important;
    left: 40% !important;
  }
  .kerasno_coupon_content {
    p {
        margin: 0 !important;
    }
  }
  .kerasno_coupon_content h1 {
    font-size: 20px !important;
    margin-left: -20px !important;
    color: #565656 !important;
  }
  .kerasno_coupon_content h1 span {
    font-size: 18px;
  }
  .kerasno_coupon_content h2 {
    font-size: 18px !important;
    margin-left: -20px !important;
    color: #565656 !important;
    text-transform: uppercase !important;
  }
  .kerasno_coupon_content p {
    font-size: 16px !important;
    color: #696969 !important;
    margin-left: -20px !important;
  }
  .kerasno_coupon_copybutton {
    margin: 12px 0 -5px 0 !important;
    height: 45px !important;
    border-radius: 4px !important;
    padding: 0 5px !important;
    border: 1px solid #e1e1e1 !important;

    .kerasno_copybtn {
        font-family: inherit !important;
        font-size: 13px !important;
        min-width: 150px !important;
        padding: 3px 5px !important;

        &.kerasno_copybtn_disable {
            background-color: #4f4b4b !important;
            color: #fff !important;
        }
    }
    .kerasno_coupon_copyvalue {
        text-align: left !important;
    }
  }
  .kerasno_coupon_copybutton input {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    outline: none !important;
    font-size: 15px !important;
    background: transparent !important;
  }
  .kerasno_coupon_copybutton button {
    padding: 5px 20px !important;
    background-color: #dc143c !important;
    color: #fff !important;
    border: 1px solid transparent !important;
  }

  div#kerasno_coupon_pagination {
    grid-column: span 2;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    
    a,
    span {
        color: #fff;
        padding: 0 5px;
        border-radius: 4px;
        margin: 0 3px;
    }
    a {
        text-decoration: none;
    }
}
.kerasno_coupon_amount h3.kcou_fixed span.kerasno_coupon_currency.kcou_fixed_sub {
    position: absolute;
    right: 0;
    bottom: -10px;
}