:root {
  --workspace-panel-height: max(calc(100vh - 7.4rem), 2200px);
  --workspace-panel-height-mobile: 85vh;
}

.workspace-shell {
  min-height: var(--workspace-panel-height) !important;
}

.workspace-stage {
  display: grid !important;
  align-items: stretch !important;
  min-height: var(--workspace-panel-height) !important;
  height: var(--workspace-panel-height) !important;
}

.workspace-stage.single {
  grid-template-columns: 1fr !important;
}

.workspace-stage.single .workspace-slot-left {
  display: flex !important;
  flex-direction: column !important;
  min-height: var(--workspace-panel-height) !important;
  height: var(--workspace-panel-height) !important;
}

.workspace-stage.single .workspace-slot-right,
.workspace-stage.single .workspace-divider {
  display: none !important;
}

.workspace-stage.split {
  grid-template-columns: minmax(320px, var(--left-pane)) 12px minmax(320px, calc(100% - var(--left-pane))) !important;
  column-gap: .75rem !important;
  min-height: var(--workspace-panel-height) !important;
  height: var(--workspace-panel-height) !important;
}

.workspace-stage.split .workspace-slot-left,
.workspace-stage.split .workspace-slot-right {
  display: flex !important;
  flex-direction: column !important;
  min-height: var(--workspace-panel-height) !important;
  height: var(--workspace-panel-height) !important;
}

.workspace-slot {
  display: none;
  min-height: var(--workspace-panel-height) !important;
  height: var(--workspace-panel-height) !important;
}

.workspace-panel-header {
  display: none !important;
}

.workspace-slot .workspace-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: var(--workspace-panel-height) !important;
  height: var(--workspace-panel-height) !important;
  overflow: hidden !important;
}

.workspace-panel-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.workspace-iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
}

.workspace-divider {
  position: relative !important;
  width: 12px !important;
  min-height: var(--workspace-panel-height) !important;
  height: var(--workspace-panel-height) !important;
  align-self: stretch !important;
  cursor: col-resize !important;
  background: transparent !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
}

.workspace-divider::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 3px !important;
  height: 64px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  background: #94a3b8 !important;
}

@media (max-width: 1200px) {
  .workspace-stage.split {
    grid-template-columns: 1fr !important;
    row-gap: 1rem !important;
    height: auto !important;
    min-height: auto !important;
  }

  .workspace-stage.split .workspace-slot-left,
  .workspace-stage.split .workspace-slot-right,
  .workspace-slot .workspace-panel,
  .workspace-stage.single .workspace-slot-left {
    min-height: var(--workspace-panel-height-mobile) !important;
    height: var(--workspace-panel-height-mobile) !important;
  }

  .workspace-divider {
    display: none !important;
  }
}