.crud-page {
  width: 100%;
  .container {
    width: 100%;

    .item-create {
      width: 40%;
    }

    .items-list {
      display: inline-block;
      width: 60%;
    }

    .item-detail {
      display: inline-block;
      width: 40%;
      padding-left: 30px;
    }
  }

  .panel {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    overflow-x: auto;
    table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #dee2e6;
      width: 100%;
      th, td {
        border: 1px solid #dee2e6;
        border-right-width: 0;
      }
      thead > tr > th {
        color: #343a40;
        border-bottom: 1px solid #e9ecef;
        border-top: 0;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        &:first-child {
          border-left-width: 0;
        }
      }
      tbody > tr {
        td {
          border-top-width: 0;
          padding: .75rem;
          vertical-align: top;
          &:first-child {
            border-left-width: 0;
          }
          &.text-center {
            text-align: center;
          }
          &.actions {
            text-align: center;
            button {
              display: inline-block;
              margin: 0 5px 0 5px;
            }
          }
        }
        &.selected td {
          background-color: #d0e6fd;
          color: #043364;
        }
        &:last-child > td {
          border-bottom-width: 0
        }
      }
    }
  }
}


@media (max-width: 992px) {
  .crud-page .container .item-create,
  .crud-page .container .items-list,
  .crud-page .container .item-detail {
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
    table td.actions button {
      margin: 5px !important;
    }
  }
}