.card {
  &.system-card {
    border: 0;
    box-shadow: 0px 0px 12px -3px #ccc;
    border-radius: 10px;
    overflow: hidden;
    font-size: 14px;
    height: 100%;
    padding: 0;
    max-width: 100%;
    width: 100%;

    .card-img-top {
      height: 12em;
      // object-fit: scale-down;
      // padding:2em;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 7em;
        width:100%;
        height: auto;
        object-fit: contain;
      }
    }

    .card-title {
      font-size: 18px;
      color: #333;
      margin: 0;
      line-height: 1.5;
    }

    .card-text {
      color: #555;
    }

    .card-body {
      background-color: #dfdfdf;
      width: 100%;
    }

    &.active {
      .card-body {
        background-color: #68f1ff;
      }
    }

    &:disabled {
      filter: grayscale(0.5);
      opacity: 0.7;
    }
  }

  &.system-card.horizontal {
    border: 0;
    box-shadow: 0px 0px 12px -3px #ccc;
    border-radius: 10px;
    overflow: hidden;
    font-size: 14px;
    height: 100%;
    padding: 0;
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: 0 0.5em;

    .card-img-top {
      height: 3em;
      width: 3em;
      // object-fit: scale-down;
      // padding:2em;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 7em;
        width:100%;
        height: auto;
        object-fit: contain;
      }
    }

    .card-title {
      font-size: 18px;
      color: #333;
      margin: 0;
      line-height: 1.5;
    }

    .card-text {
      color: #555;
    }

    .card-body {
      background-color: #fff;
      width: 100%;
      padding: 0.5em;
    }

    &.active {
      .card-body {
        background-color: #68f1ff;
      }
    }

    &:disabled {
      filter: grayscale(0.5);
      opacity: 0.7;
    }
  }
  &.system-card.list {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
    font-size: 14px;
    height: auto;
    padding: 0;
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: 0 0.5em;
    justify-content: flex-start;
    background-color: #fff;
    &:hover {
      background-color: #f0f0f0;


    }

    .card-img-top {
      height: 1.5em;
      width: 1.5em;
      // object-fit: scale-down;
      // padding:2em;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 1.5em;
        width:100%;
        height: auto;
        object-fit: contain;
      }
    }

    .card-title {
      font-size: 0.8rem;
      color: #333;
      margin: 0;
      line-height: 1.5;
      text-align: right;
    }

    .card-text {
      color: #555;
    }

    .card-body {
      background-color: inherit;
      width: 100%;
      padding: 0.5em;
    }

    &.active {
      .card-body {
        background-color: #68f1ff;
      }
    }

    &:disabled {
      filter: grayscale(0.5);
      opacity: 0.7;
    }
  }
}