html, body {
  margin: 0;
  min-height: 100%;
  height: 100%;
}

.dx-viewport {
  --side-panel-min-width: 60px;

  .dx-popup-wrapper {
    z-index: 1510 !important;
  }

  #root {
    height: 100%;
  }

  * {
    box-sizing: border-box;
  }

  .app {
    background-color: var(--base-bg-darken-5);
    display: flex;
    height: 100%;
    width: 100%;
    min-width: 320px;
  }

  .content {
    line-height: 1.5;
    flex-grow: 1;
    padding: 20px 40px;

    h2 {
      font-size: 32px;
      margin: 0;
      line-height: 40px;
    }
  }

  .screen-x-small .content {
    padding: 20px;
  }

  .container {
    height: 100%;
    flex-direction: column;
    display: flex;
  }

  .layout-body {
    flex: 1;
    min-height: 0;
  }

  .side-nav-outer-toolbar .dx-drawer {
    height: calc(100% - 56px)
  }

  .content-block {
    margin-top: 20px;
  }

  .responsive-paddings {
    padding: 20px;
  }

  .screen-large .responsive-paddings {
    padding: 40px;
  }

  .dx-card.wide-card {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    border-right: 0;
    border-left: 0;
  }

  .with-footer > .dx-scrollable-wrapper >
  .dx-scrollable-container > .dx-scrollable-content {
    height: 100%;

    & > .dx-scrollview-content {
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }
  }
}

.dx-theme-fluent {
  .dx-drawer-wrapper {
    .dx-drawer-panel-content,
    .dx-overlay-content {
      box-shadow: 0 4px 4px 0 var(--shadow-color-first), 0 1px 2px 0 var(--shadow-color-second);
    }
  }
}
