#ui.v3.panel-list-view,
#ui.v3 yon-list-view-layout {
  display: block;
  .mr-3,
  .mr-2 .mr-1,
  .pr-1,
  .pr-2,
  .ml-2,
  .ml-1 {
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
  }
  section.v3.has-right-panel .component.row {
    display: flex;
    grid-gap: 0;

    yon-list-view-main-col,
    .yon-list-view-main-col {
      flex: auto;
      width: 100%;
      max-width: calc(100% - var(--layout-right-slimpanel-width));
      flex-grow: 1;
    }
    yon-list-view-right-col {
      width: var(--layout-right-slimpanel-width);
      min-width: var(--layout-right-slimpanel-width);
      flex-grow: 0;
      background-color: var(--color-bg-right-modal);
      padding: var(--layout-grid-gap);
      padding-top: 10px;
      .row > div.col-xl-12 {
        display: flex;
        width: 100%;
        yon-card {
          flex-grow: 1;
        }
        div {
          height: auto;
          padding-bottom: 0;
          margin: 0;
          vertical-align: top;
          background-image: none;
          background-color: transparent;
          padding: 5px;
          min-height: 0;
          hr {
            display: none;
          }
          h4 {
            display: block !important;
            width: 100%;
          }
        }
      }
      .close-cont {
        width: 100%;
        text-align: right;
        margin-bottom: 101px;
        flex-grow: 1;
        cursor: pointer;
        button {
          border: none;
          background-color: transparent;
          cursor: pointer;
          border-radius: 20px;
          height: 40px;
        }
        button:hover img {
          opacity: 0.65;
        }
        img {
          width: 40px;
        }
      }
      .card-block {
        margin-bottom: var(--layout-grid-gap);
        padding: var(--layout-grid-gap);
        border-radius: var(--layout-card-radius);
        width: 100%;
        border: 1px solid #8080802b;
        .card__header-row h4 {
          font: inherit;
          font-size: 15px;
        }
        .text-center {
          text-align: right;
          padding-right: var(--layout-grid-gap);
          span {
            font-weight: 500 !important;
            font-size: 30px !important;
          }
        }
      }
    }
    yon-card-header-left {
      yon-entity-table-search {
        border-radius: 20px;
        margin-right: 20px;
      }
      yon-entity-table-filter yon-button button.mat-mdc-button {
        background-color: transparent;
      }
      yon-entity-table-filter:nth-child(1) yon-button button.mat-mdc-button {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        padding: 0 0;
      }
    }
    yon-entity-table-filter:nth-child(2) yon-button button.mat-mdc-button {
      padding: 0 10px;
    }
  }
  yon-entity-table-card {
    .card__header-row {
      margin: 0 var(--layout-grid-gap);
      min-height: var(--layout-top-panel-height);
      border-radius: var(--layout-card-radius);
      background-image: var(--layout-bg-top-gradient);
      padding-left: 28px;
      flex-grow: 0;
      height: var(--layout-top-panel-height);
      align-items: flex-end;
      padding-bottom: 25px;
      .mat-mdc-select {
        padding: 0 0;
        background-color: transparent;
      }
    }
    .card .card-block {
      display: flex;
      flex-direction: column;
      height: 100vh;
      padding-bottom: var(--layout-grid-gap);
      padding-top: var(--layout-grid-gap);
      > hr {
        display: none;
      }
      .error-message {
        background-color: var(--color-red-error);
        color: #fff;
        margin: var(--layout-grid-gap);
        margin-bottom: 0;
        padding: 4px var(--layout-grid-gap);
        border-radius: 4px;
        text-align: center;
        a {
          background-color: #ffffff3d;
          color: white;
          margin: 0 10px;
          padding: 2px 20px;
          border-radius: 12px;
          cursor: pointer;
        }
      }
      section.panel-list-main {
        display: flex;
        flex-direction: column;
        height: 100%;
        yon-entity-table {
          padding-top: 0;
          overflow-y: hidden;
          padding-bottom: 0;
          padding-right: 0;
          margin: var(--layout-grid-gap);
          margin-bottom: 0;
          display: flex !important;
          flex-direction: column;
          height: 100%;
          mat-table.mat-mdc-table {
            overflow-x: auto;
            width: 0;
            min-width: 100%;
          }
          .entity-table__container {
            padding-top: 0;
            padding-bottom: 0;
          }
          .entity-table__loading {
            &::after {
              background-color: var(--color-bg-table-loading);
              border-radius: 7px;
              top: var(--layout-grid-gap);
              z-index: 5;
              left: var(--layout-grid-gap);
              right: var(--layout-grid-gap);
              bottom: var(--layout-grid-gap);
            }
          }
          > div {
            display: flex;
            flex-direction: column;
            height: 100%;
            .entity-table__container {
              overflow: scroll;
              height: 0;
              flex-grow: 1;
              padding: var(--layout-grid-gap);
              padding-bottom: 0;
              padding-right: 0;
              padding-top: 0;
            }
            div.tooling-container {
              flex-grow: 0;
              justify-content: flex-end;
              .entity-table__checkbox-actions {
                position: absolute;
                margin-top: 14px;
                margin-left: 29px;
                .entity-table__checkbox-selection-info-text {
                  line-height: 30px;
                }
              }
              .paginator-container {
                width: 100%;
                padding: var(--layout-grid-gap);
                margin-top: 0;
                background-color: var(--layout-bg-color-card);
                mat-paginator {
                  margin-bottom: 0;
                  background-color: var(--layout-bg-color);
                }
              }
            }
          }
          mat-table.mat-mdc-table {
            overflow-y: clip;
            overflow-x: visible;
            padding: 0 10px;
            .mat-mdc-header-cell:not(.mat-column-checkbox):first-child,
            .mat-mdc-cell:not(.entity-table__checkbox-cell):first-child {
              padding-left: 10px;
            }
            td.entity-table__error-cell {
              width: calc(100% - 30px);
              position: absolute;
              background-color: var(--color-bg-table-drilled-level3);

              padding: 7px 20px !important;
              margin: 0 0;
              right: 20px;
              left: 20px;
              border-radius: 4px;
            }
            mat-header-row.mat-mdc-header-row {
              position: sticky;
              top: 0;
              z-index: 3;
              background-color: var(--layout-bg-color-card);
              mat-header-cell.mat-mdc-header-cell {
                padding-top: 0;
                background-color: var(--layout-bg-color-card);
                min-height: 65px;
                padding-top: var(--layout-grid-gap);
                p {
                  margin-bottom: 0;
                }
              }
            }
            .entity-table__loading-bar-row {
              position: sticky;
              left: 0;
              width: 100%;
              margin-top: -8px;
              height: 4px;
              margin-bottom: 4px;
              mat-header-cell.mat-mdc-header-cell {
                padding-top: 0;
              }
            }
          }
          .tooling-container {
            mat-paginator {
              background-color: var(--color-bg-paginator);
              display: flex;
              flex-grow: 1;
              border-radius: 8px;
              padding-right: 20px;
              justify-content: flex-end;
              height: 52px;
              .mat-mdc-paginator-container {
                min-height: 52px;
              }
              .mat-mdc-paginator-page-size {
                padding-left: 20px;
                border-radius: 18px;
                align-items: center;
                mat-form-field div {
                  align-items: center;
                }
              }
              .mat-mdc-paginator-range-actions {
                button {
                  margin-top: 2px;
                  line-height: 42px;
                  width: 34px !important;
                  height: 34px !important;
                }
                button.mat-mdc-paginator-navigation-next {
                  background-color: var(--color-bg-paginate-next);
                }
                button.mat-mdc-paginator-navigation-next.mat-mdc-button-disabled {
                  background-color: transparent;
                }
              }
            }
          }
        }
      }
    }
  }
}
#ui.v3 yon-list-view-layout.main-menu-open #main-menu.component div.menu-spacer yon-button {
  margin-top: 15px;
}

#ui.v3 yon-list-view-layout.orders {
  yon-entity-table-card yon-entity-table .paginator-container {
    right: var(--layout-right-slimpanel-width);
  }
}

#ui.v3 yon-list-view-layout {
  mat-cell.mat-mdc-cell.entity-table__checkbox-cell.mat-mdc-table-sticky,
  mat-header-cell.mat-mdc-header-cell.entity-table__checkbox-cell.mat-mdc-table-sticky {
    left: 10px !important;
    width: 35px;
  }
  mat-cell.mat-mdc-cell.entity-table__checkbox-cell.mat-mdc-table-sticky:before,
  mat-header-cell.mat-mdc-header-cell.entity-table__checkbox-cell.mat-mdc-table-sticky:before {
    content: '';
    display: block;
    position: absolute;
    width: 40px;
    height: 44px;
    background-color: var(--layout-bg-color-card);
    left: -40px;
  }
}