zoneminder/web/skins/classic/css/base/views/console.css

#systemTime {
    float: left;
}

#title {
    margin: 0 auto;
    text-align: center;
    width: 50%;
}

#systemStats {
    float: right;
}

#systemStats .warning {
    color: orange;
}

#systemStats .error {
    color: red;
}

#systemStats .critical {
    color: red;
    text-decoration: blink;
}

#monitorSummary {
    float: left;
    text-align: left;
    width: 20%;
}

#devices {
    float: left;
}

#loginBandwidth {
    margin: 0 auto;
    text-align: center;
    width: 40%;
}

#cycleMontage {
    float: right;
}

#options {
    float: right;
    text-align: right;
    width: 20%;
}

.consoleTable {
    width: 100%;
    height: 100%; /* parent is flex-height */
}

.consoleTable tr.highlight {
    background-color: #eeeeee;
}

.consoleTable thead {
  flex: 0 0 auto;
}
.consoleTable tbody {
  flex: 1 1 auto;
}

.consoleTable thead th {
    padding-bottom: 4px;
    vertical-align: middle;
}

.consoleTable thead th .material-icons {
    vertical-align: middle;
    line-height: inherit;
}

.consoleTable tfoot td {
    padding-top: 4px;
    vertical-align: middle;
}

.consoleTable th,td {
    text-align: left;
}

.consoleTable .colMark {
    width: 32px;
    text-align: center;
}

.consoleTable .colEvents {
    text-align: right;
}

.consoleTable .colZones {
    text-align: right;
}
.consoleTable .colFunction {
    width: 120px;
    text-align: center;
}

.consoleTable .colId {
    width: 70px;
    text-align: center;
}

.consoleTable .colLeftButtons {
    text-align: left;
}
.FunctionFilter select {
  min-width: 90px;
}
.StatusFilter select {
  min-width: 130px;
}
#FunctionFunction {
  margin-bottom: 2rem;
}

/* .MonitorNameFilter,
.FunctionFilter,
.StatusFilter,
.SourceFilter,
.MonitorFilter {
  display: inline-block;
} */

#monitorsContainer {
  flex: 1 1 auto;
  overflow: hidden; /* Ensures height is correct if content too large */
}

#monitorFiltersForm,
#monitorForm
{
  height: 100%;
  /*
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 auto;
  */
}
#monitorList {
}
/*
body.sticky #monitorList {
  overflow: auto; 
}
*/
body.sticky #monitorList thead {
  position: sticky;
  top: 0;
  box-shadow: 0 0px 0, 0 -3px 0 #dfe4ea;
}
#toolbar,
#contentButtons {
  float: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.rightButtons {
  margin-left: auto;
}
.statusBreakdown {
  margin-right: auto;
}

@media screen and (max-width:1280px) {
}
@media screen and (max-width:900px) {
  #header {
    flex-wrap: wrap;
  }
}
@media screen and (max-width:564px) {
  button .text {
    display: none;
  }
  #contentButtons {
    padding: 0;
  }
  button .material-icons {
    font-size: 16px;
  }
}

.colThumbnail {
  position: relative;
}

/* Make the boot-strap table monitor list scrollable instead of content div */
#content {
  display: flex;
  flex-direction: column;
}
#monitorList {
  overflow: hidden;
  height: 100%;
}

#monitorList .bootstrap-table {
  overflow: hidden;
  height: 100%;
}

#monitorList .bootstrap-table {
  display: flex;
  flex-direction: column;
    flex-wrap: nowrap;
}
#monitorList .fixed-table-container {
  overflow: hidden; /* Ensures height doesn't expand */
}

#fbpanel {
  flex: 0 0 auto; /* Don't grow, don't shrink, size based on content */
}
.bootstrap-table .fixed-table-toolbar .bs-bars {
  margin: 0;
}