.box-widget {
    .box-widget-card {
        background-color : $white;
        position         : relative;
        box-shadow       : $overview-boxShadow;
        color            : $g-900;
        font-size        : 14px;
        font-weight      : 400;
        vertical-align   : middle;
        padding          : 15px 20px;
        margin           : 0 10px 20px 10px;
        border-radius    : 4px;
        height           : 180px;
        width            : 240px;
        @include state-border(2px, transparent, 4px);

        &:hover {
           @include state-border(2px, $grape75, 4px);
        }
        &:focus-visible {
            @include state-border(2px, $grape90, 0px);
        }
        &:active {
            @include state-border(1px, $grape90, 4px);
            @include inset-border(1px, transparent);
        }

        .box-widget-card-body {
            display        : flex;
            flex-direction : column;
            height         : 100%;
        }
        .box-widget-card-header {
            cursor : pointer;
            .box-widget-card-title {
                //height             : 48px;
                display            : -webkit-box;
                -webkit-line-clamp : 2;
                -webkit-box-orient : vertical;
                text-overflow      : ellipsis;
                white-space        : initial;
                overflow           : hidden;
                max-height         : 100%;
                font-size          : 18px;
                font-weight        : 400;
                line-height        : 24px;
                margin             : 0;
            }
        }
        .box-widget-card-text {
          cursor : pointer;
          margin-top: 6px;
          [class^=ri-], [class*=" ri-"] {
              vertical-align: 0;
          }
          .box-widget-card-date {
            font-size: 12px;
            line-height: 16px;
            color: $g-700;
          }
          .box-widget-card-status {
            margin-top: 4px;
            font-size: 12px;
            line-height: 14px;
            color: $g-700;
            i:before {
              display   : inline-block;
              width     : 16px;
              height    : 16px;
              font-size: 1.1em;
              align-content: end;
              text-align: center;
            }
          }
        }
        .box-widget-card-footer {
            display         : flex;
            flex-grow       : 1;
            justify-content : flex-end;
            flex-direction  : column;
            outline         : none;
            .box-widget-card-footer-items {
                display         : flex;
                justify-content : space-between;
                align-items     : baseline;
              .box-widget-card-footer-response {
                font-size: 14px;
                line-height: 20px;
                color: $g-700;
              }
            }
            .icons {
                display     : inline-flex;
                align-items : center;
                gap         : 8px;
                font-weight : $font-weight-normal;
                a, button {
                    display         : inline-flex;
                    align-items     : center;
                    justify-content : center;
                    width           : 30px; // icon (24px) + 2 * padding (3px)
                    height          : 30px;
                    padding         : 3px;
                    font-size       : $font-size-xl; // 24px
                    line-height     : 1;
                    @include state-border(2px, transparent);
                }
                a:focus-visible {
                    @include state-border(2px, $grape90, 0px);
                }
                a:hover {
                    background-color : $g-200;
                }
                a.active {
                    color   : $purple;
                    outline : none;
                }
                .dropdown.ls-action_dropdown {
                    margin  : 0;
                    padding : 0;
                    width   : 30px;
                    height  : 30px;
                }
                .dropdown.ls-action_dropdown button {
                    box-shadow       : none;
                    background-color : $white;
                    color            : $g-700;
                    &:focus-visible {
                        box-shadow : none;
                        @include state-border(2px, $grape90);
                    }
                    &:hover {
                        background-color : $g-200;
                    }
                }
            }
        }
    }
    .card-link-highlight {
      color: var(--bs-info) !important;
      border: solid 2px var(--bs-info) !important;
    }
    .box-widget-card.card-link {
      display: block;
      background-color : inherit;
      align-content: center;
      text-align: center;
      color: $g-700;
      border: solid 2px $g-700;
      cursor: pointer;

        .box-widget-card-body {
          flex-direction: row;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-weight: 500;
          line-height: 20px;
          i:before {
            display: block;
            padding-right: 4px;
            width: 20px;
            height: 20px;
          }
        }
        .box-widget-card {
            border : solid $g-700 3px;
            color  : $g-700;
        }
    }
    .box-widget-card.card-placeholder {
        cursor           : default;
        background-color : $white;
        box-shadow       : none;
        border           : none;
    }
    .box-widget-loadmore  {
        width      : 100%;
        text-align : center;
        #load-more {
            display    : inline-block;
            padding    : 5px;
            margin-top : 25px;
        }
    }
    .survey-state {
        color : $g-700;
    }
}
