/* General layout */
.media-container {
  display: grid;
  grid-template-columns: 20% auto;
  grid-gap: 15px;
  padding: 15px;
}

.media-col-main-panel {
  flex: 0 0 var(--mediamanager-col-main-panel-width);
  max-width: var(--mediamanager-col-main-panel-width);
}

.media-col-side-panel {
  flex: 0 0 var(--mediamanager-col-side-panel-width);
  max-width: var(--mediamanager-col-side-panel-width);
}

[class^='media-col'],
[class*=' media-col'] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-inline-start: calc(var(--mediamanager-col-gutter-width) / 2);
  padding-inline-end: calc(var(--mediamanager-col-gutter-width) / 2);
}

@media (--hiq-upper-font-range) {
  [class^='media-col'],
  [class*=' media-col'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.media-main {
  position: relative;
  height: calc(100vh - 160px);
  overflow: hidden;
  background-color: var(--hiq-html-background-color);
  border: 1px solid var(--mediamanager-border-color);
  border-radius: var(--mediamanager-border-radius);

  > div {
    position: relative;
  }
}

.media-sidebar {
  height: calc(100vh - 160px);
  overflow-y: auto;
}
