@import 'src/@fuse/scss/fuse';

app-alert-config {
  .content {
    .cards {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;

      .card {
        display: flex;
        align-items: flex-start;
        padding: 48px 12px 0px 65px;
        margin-bottom: 40px;

        .card-preview {
          display: flex;
          min-width: 320px;
        }

        .card-source {
          display: none;
        }
      }
    }

    &.source {
      .cards {
        flex-direction: column;

        .card {
          width: 100%;
          margin-bottom: 24px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.12);

          .card-source {
            background: #263238;
            display: flex !important;
            flex: 1;
            max-height: 400px;
            min-width: 400px;
            margin-left: 24px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
          }
        }
      }
    }
  }
}
