@layer components {
  .panel,
  .panel_s {
    @apply tw-bg-white tw-mb-[25px] tw-rounded-md tw-border tw-border-solid tw-border-neutral-200 tw-shadow-sm;
  }
  .panel-body {
    @apply tw-p-6 tw-relative tw-bg-white tw-rounded-md;
  }
  .panel-heading {
    @apply tw-px-6 tw-py-2.5 tw-rounded-t-md tw-border-b-neutral-200;
  }
  .panel-heading > .dropdown .dropdown-toggle {
    @apply tw-text-inherit;
  }
  .panel-title {
    @apply tw-my-0 tw-text-base tw-text-inherit tw-font-semibold;
  }
  .panel-title > a,
  .panel-title > small,
  .panel-title > .small,
  .panel-title > small > a,
  .panel-title > .small > a {
    @apply tw-text-inherit;
  }
  .panel-footer {
    @apply tw-px-6 tw-py-3 tw-bg-neutral-50 tw-rounded-b-md tw-border-t tw-border-solid tw-border-neutral-200;
  }
  .panel > .list-group,
  .panel > .panel-collapse > .list-group {
    margin-bottom: 0;
  }
  .panel > .list-group .list-group-item,
  .panel > .panel-collapse > .list-group .list-group-item {
    border-width: 1px 0;
    border-radius: 0;
  }
  .panel > .list-group:first-child .list-group-item:first-child,
  .panel
    > .panel-collapse
    > .list-group:first-child
    .list-group-item:first-child {
    border-top: 0;
    border-top-left-radius: theme("borderRadius.md");
    border-top-right-radius: theme("borderRadius.md");
  }
  .panel > .list-group:last-child .list-group-item:last-child,
  .panel
    > .panel-collapse
    > .list-group:last-child
    .list-group-item:last-child {
    border-bottom: 0;
    border-bottom-right-radius: theme("borderRadius.md");
    border-bottom-left-radius: theme("borderRadius.md");
  }
  .panel
    > .panel-heading
    + .panel-collapse
    > .list-group
    .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .panel-heading + .list-group .list-group-item:first-child {
    border-top-width: 0;
  }
  .list-group + .panel-footer {
    border-top-width: 0;
  }
  .panel > .table,
  .panel > .table-responsive > .table,
  .panel > .panel-collapse > .table {
    margin-bottom: 0;
  }
  .panel > .table caption,
  .panel > .table-responsive > .table caption,
  .panel > .panel-collapse > .table caption {
    padding-right: 15px;
    padding-left: 15px;
  }
  .panel > .table:first-child,
  .panel > .table-responsive:first-child > .table:first-child {
    border-top-left-radius: theme("borderRadius.md");
    border-top-right-radius: theme("borderRadius.md");
  }
  .panel > .table:first-child > thead:first-child > tr:first-child,
  .panel
    > .table-responsive:first-child
    > .table:first-child
    > thead:first-child
    > tr:first-child,
  .panel > .table:first-child > tbody:first-child > tr:first-child,
  .panel
    > .table-responsive:first-child
    > .table:first-child
    > tbody:first-child
    > tr:first-child {
    border-top-left-radius: theme("borderRadius.md");
    border-top-right-radius: theme("borderRadius.md");
  }
  .panel
    > .table:first-child
    > thead:first-child
    > tr:first-child
    td:first-child,
  .panel
    > .table-responsive:first-child
    > .table:first-child
    > thead:first-child
    > tr:first-child
    td:first-child,
  .panel
    > .table:first-child
    > tbody:first-child
    > tr:first-child
    td:first-child,
  .panel
    > .table-responsive:first-child
    > .table:first-child
    > tbody:first-child
    > tr:first-child
    td:first-child,
  .panel
    > .table:first-child
    > thead:first-child
    > tr:first-child
    th:first-child,
  .panel
    > .table-responsive:first-child
    > .table:first-child
    > thead:first-child
    > tr:first-child
    th:first-child,
  .panel
    > .table:first-child
    > tbody:first-child
    > tr:first-child
    th:first-child,
  .panel
    > .table-responsive:first-child
    > .table:first-child
    > tbody:first-child
    > tr:first-child
    th:first-child {
    border-top-left-radius: theme("borderRadius.md");
  }
  .panel
    > .table:first-child
    > thead:first-child
    > tr:first-child
    td:last-child,
  .panel
    > .table-responsive:first-child
    > .table:first-child
    > thead:first-child
    > tr:first-child
    td:last-child,
  .panel
    > .table:first-child
    > tbody:first-child
    > tr:first-child
    td:last-child,
  .panel
    > .table-responsive:first-child
    > .table:first-child
    > tbody:first-child
    > tr:first-child
    td:last-child,
  .panel
    > .table:first-child
    > thead:first-child
    > tr:first-child
    th:last-child,
  .panel
    > .table-responsive:first-child
    > .table:first-child
    > thead:first-child
    > tr:first-child
    th:last-child,
  .panel
    > .table:first-child
    > tbody:first-child
    > tr:first-child
    th:last-child,
  .panel
    > .table-responsive:first-child
    > .table:first-child
    > tbody:first-child
    > tr:first-child
    th:last-child {
    border-top-right-radius: theme("borderRadius.md");
  }
  .panel > .table:last-child,
  .panel > .table-responsive:last-child > .table:last-child {
    border-bottom-right-radius: theme("borderRadius.md");
    border-bottom-left-radius: theme("borderRadius.md");
  }
  .panel > .table:last-child > tbody:last-child > tr:last-child,
  .panel
    > .table-responsive:last-child
    > .table:last-child
    > tbody:last-child
    > tr:last-child,
  .panel > .table:last-child > tfoot:last-child > tr:last-child,
  .panel
    > .table-responsive:last-child
    > .table:last-child
    > tfoot:last-child
    > tr:last-child {
    border-bottom-right-radius: theme("borderRadius.md");
    border-bottom-left-radius: theme("borderRadius.md");
  }
  .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
  .panel
    > .table-responsive:last-child
    > .table:last-child
    > tbody:last-child
    > tr:last-child
    td:first-child,
  .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
  .panel
    > .table-responsive:last-child
    > .table:last-child
    > tfoot:last-child
    > tr:last-child
    td:first-child,
  .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
  .panel
    > .table-responsive:last-child
    > .table:last-child
    > tbody:last-child
    > tr:last-child
    th:first-child,
  .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
  .panel
    > .table-responsive:last-child
    > .table:last-child
    > tfoot:last-child
    > tr:last-child
    th:first-child {
    border-bottom-left-radius: theme("borderRadius.md");
  }
  .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
  .panel
    > .table-responsive:last-child
    > .table:last-child
    > tbody:last-child
    > tr:last-child
    td:last-child,
  .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
  .panel
    > .table-responsive:last-child
    > .table:last-child
    > tfoot:last-child
    > tr:last-child
    td:last-child,
  .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
  .panel
    > .table-responsive:last-child
    > .table:last-child
    > tbody:last-child
    > tr:last-child
    th:last-child,
  .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
  .panel
    > .table-responsive:last-child
    > .table:last-child
    > tfoot:last-child
    > tr:last-child
    th:last-child {
    border-bottom-right-radius: theme("borderRadius.md");
  }
  .panel > .panel-body + .table,
  .panel > .panel-body + .table-responsive,
  .panel > .table + .panel-body,
  .panel > .table-responsive + .panel-body {
    border-top: 1px solid theme("colors.neutral.200");
  }
  .panel > .table > tbody:first-child > tr:first-child th,
  .panel > .table > tbody:first-child > tr:first-child td {
    border-top: 0;
  }
  .panel > .table-bordered,
  .panel > .table-responsive > .table-bordered {
    border: 0;
  }
  .panel > .table-bordered > thead > tr > th:first-child,
  .panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
  .panel > .table-bordered > tbody > tr > th:first-child,
  .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .panel > .table-bordered > tfoot > tr > th:first-child,
  .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .panel > .table-bordered > thead > tr > td:first-child,
  .panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
  .panel > .table-bordered > tbody > tr > td:first-child,
  .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .panel > .table-bordered > tfoot > tr > td:first-child,
  .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .panel > .table-bordered > thead > tr > th:last-child,
  .panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
  .panel > .table-bordered > tbody > tr > th:last-child,
  .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .panel > .table-bordered > tfoot > tr > th:last-child,
  .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .panel > .table-bordered > thead > tr > td:last-child,
  .panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
  .panel > .table-bordered > tbody > tr > td:last-child,
  .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .panel > .table-bordered > tfoot > tr > td:last-child,
  .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .panel > .table-bordered > thead > tr:first-child > td,
  .panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
  .panel > .table-bordered > tbody > tr:first-child > td,
  .panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
  .panel > .table-bordered > thead > tr:first-child > th,
  .panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
  .panel > .table-bordered > tbody > tr:first-child > th,
  .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
    border-bottom: 0;
  }
  .panel > .table-bordered > tbody > tr:last-child > td,
  .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .panel > .table-bordered > tfoot > tr:last-child > td,
  .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
  .panel > .table-bordered > tbody > tr:last-child > th,
  .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .panel > .table-bordered > tfoot > tr:last-child > th,
  .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
    border-bottom: 0;
  }
  .panel > .table-responsive {
    margin-bottom: 0;
    border: 0;
  }
  .panel-group {
    margin-bottom: 20px;
  }
  .panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
  }
  .panel-group .panel + .panel {
    margin-top: 5px;
  }
  .panel-group .panel-heading {
    border-bottom: 0;
  }
  .panel-group .panel-heading + .panel-collapse > .panel-body,
  .panel-group .panel-heading + .panel-collapse > .list-group {
    border-top: 1px solid theme("colors.neutral.200");
  }
  .panel-group .panel-footer {
    border-top: 0;
  }
  .panel-group .panel-footer + .panel-collapse .panel-body {
    border-bottom: 1px solid theme("colors.neutral.200");
  }
  .panel-default {
    border-color: theme("colors.neutral.200");
  }
  .panel-default > .panel-heading {
    @apply tw-bg-neutral-300 tw-text-neutral-900;
  }
  .panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: theme("colors.neutral.200");
  }
  .panel-default > .panel-heading .badge {
    /* color: #f5f5f5; */
    /* background-color: #333333; */
  }
  .panel-default > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: theme("colors.neutral.200");
  }
  .panel-primary {
    border: 0;
  }
  .panel-primary > .panel-heading {
    @apply tw-bg-primary-100 tw-text-primary-700 tw-border-0;
  }
  .panel-primary > .panel-heading + .panel-collapse > .panel-body {
    /* border-top-color: #337ab7; */
  }
  .panel-primary > .panel-heading .badge {
    /* color: #337ab7; */
    /* background-color: #fff; */
  }
  .panel-primary > .panel-footer + .panel-collapse > .panel-body {
    /* border-bottom-color: #337ab7; */
  }
  .panel-success {
    border: 0;
  }
  .panel-success > .panel-heading {
    @apply tw-bg-success-50 tw-text-success-700 tw-border-0;
  }
  .panel-success > .panel-heading + .panel-collapse > .panel-body {
    /* border-top-color: #d6e9c6; */
  }
  .panel-success > .panel-heading .badge {
    /* color: #dff0d8; */
    /* background-color: #3c763d; */
  }
  .panel-success > .panel-footer + .panel-collapse > .panel-body {
    /* border-bottom-color: #d6e9c6; */
  }
  .panel-info {
    border: 0;
  }
  .panel-info > .panel-heading {
    @apply tw-bg-info-100 tw-text-info-700 tw-border-0;
  }
  .panel-info > .panel-heading + .panel-collapse > .panel-body {
    /* border-top-color: #bce8f1; */
  }
  .panel-info > .panel-heading .badge {
    /* color: #d9edf7; */
    /* background-color: #31708f; */
  }
  .panel-info > .panel-footer + .panel-collapse > .panel-body {
    /* border-bottom-color: #bce8f1; */
  }
  .panel-warning {
    border: 0;
  }
  .panel-warning > .panel-heading {
    @apply tw-bg-warning-50 tw-text-warning-700 tw-border-0;
  }
  .panel-warning > .panel-heading + .panel-collapse > .panel-body {
    /* border-top-color: #faebcc; */
  }
  .panel-warning > .panel-heading .badge {
    /* color: #fcf8e3; */
    /* background-color: #8a6d3b; */
  }
  .panel-warning > .panel-footer + .panel-collapse > .panel-body {
    /* border-bottom-color: #faebcc; */
  }
  .panel-danger {
    border: 0;
  }
  .panel-danger > .panel-heading {
    @apply tw-bg-danger-50 tw-text-danger-700 tw-border-0;
  }
  .panel-danger > .panel-heading + .panel-collapse > .panel-body {
    /* border-top-color: #ebccd1; */
  }
  .panel-danger > .panel-heading .badge {
    /* color: #f2dede; */
    /* background-color: #a94442; */
  }
  .panel-danger > .panel-footer + .panel-collapse > .panel-body {
    /* border-bottom-color: #ebccd1; */
  }
}

.panel-table-full .dataTables_wrapper .table-responsive {
  @apply -tw-mx-6 tw-border-b tw-border-solid tw-border-neutral-200/70 tw-mb-4;
}

.panel-table-full .dataTables_wrapper.app_dt_empty .table-responsive {
  @apply tw-border-b-0;
}

.panel-table-full .dataTables_wrapper table.dataTable {
  margin-bottom: 0 !important;
}

.panel-table-full .dataTables_wrapper thead > tr > th:first-child {
  border-left: 0 !important;
}

.panel-table-full .dataTables_wrapper thead > tr > th:last-child {
  border-right: 0 !important;
}

.panel-full-width-tabs.horizontal-scrollable-tabs .scroller {
  padding: 8.5px 10px !important;
  margin-top: 3px;
}

@media (min-width: 768px) {
  .panel-full-width-tabs {
    margin-left: -24px !important;
    margin-right: -24px !important;
  }
}

.panel-full-width-tabs .nav {
  margin-top: -24px !important;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  padding-left: 22px;
  padding-right: 22px;
}

.modal .panel-full-width-tabs {
  margin-left: -16px !important;
  margin-right: -16px !important;
}

.modal .panel-full-width-tabs .nav {
  padding-left: 16px;
  padding-right: 16px;
}

.panel-full-width-tabs
  .nav
  .panel-full-width-tabs
  .arrow-right[style="display: block;"]
  ~ .horizontal-tabs
  > .nav-tabs {
  padding-left: 0;
  padding-right: 0;
}

.panel-full-width-tabs .nav li a {
  padding-top: 14px;
  padding-bottom: 12px;
}

@media screen and (max-width: 767px) {
  .panel-table-full .table-responsive {
    border: 0;
    width: auto;
  }
}

/* panel-heading is for backward comp */
.panel_s .hr-panel-heading,
.panel_s .hr-panel-separator,
.panel .hr-panel-heading,
.panel .hr-panel-separator {
  @apply tw-my-5 -tw-mx-6 tw-border-neutral-200;
}

.modal-body .panel_s .hr-panel-heading,
.modal-body .panel_s .hr-panel-separator,
.modal-body .panel .hr-panel-heading,
.modal-body .panel .hr-panel-separator {
  @apply -tw-mx-4;
}

.panel_s > .hr-panel-heading,
.panel_s > .hr-panel-separator,
.panel > .hr-panel-heading,
.panel > .hr-panel-separator {
  @apply tw-mx-0;
}