/* Chrome 56 shipped before unprefixed CSS Grid. Keep this layout isolated so
   Chrome 57+ continues to use the established grid composition unchanged. */
html.compat-flex-layout .login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
}

html.compat-flex-layout .login-card form {
  display: block;
}

html.compat-flex-layout .login-card form > * {
  width: 100%;
  margin-top: 12px;
}

html.compat-flex-layout .login-card form > *:first-child {
  margin-top: 0;
}

html.compat-flex-layout .mark,
html.compat-flex-layout .metric-icon,
html.compat-flex-layout .speaker-mark,
html.compat-flex-layout .voice-rank,
html.compat-flex-layout .record-item > i,
html.compat-flex-layout .member-avatar,
html.compat-flex-layout .duty-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

html.compat-flex-layout .board {
  position: relative;
  display: block;
}

html.compat-flex-layout .board-header,
html.compat-flex-layout .metric-grid,
html.compat-flex-layout .main-grid,
html.compat-flex-layout footer.news-ticker {
  position: absolute;
  left: 8px;
  right: 8px;
}

html.compat-flex-layout .board-header {
  top: 8px;
  height: 54px;
  display: flex;
  align-items: stretch;
}

html.compat-flex-layout .metric-grid {
  top: 70px;
  height: 88px;
  display: flex;
}

html.compat-flex-layout .main-grid {
  top: 166px;
  bottom: 80px;
  display: block;
}

html.compat-flex-layout footer.news-ticker {
  bottom: 8px;
  height: 64px;
  display: flex;
}

html.compat-flex-layout .board-header .title-block {
  flex: 0 1 25%;
}

html.compat-flex-layout .board-header .time-block {
  flex: 0 1 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 14px;
}

html.compat-flex-layout .time-block > * {
  min-width: 0;
  margin-left: 10px;
}

html.compat-flex-layout .time-block > *:first-child {
  margin-left: 0;
}

html.compat-flex-layout .time-block #shiftText {
  flex: 1 1 36%;
}

html.compat-flex-layout .time-block #clockText {
  flex: 0 0 auto;
}

html.compat-flex-layout .time-block #dateText {
  flex: 1 1 34%;
}

html.compat-flex-layout .board-header .action-block {
  flex: 1 1 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 14px;
}

html.compat-flex-layout .action-block > * {
  min-width: 0;
  margin-left: 8px;
}

html.compat-flex-layout .action-block > *:first-child {
  margin-left: 0;
}

html.compat-flex-layout .action-block #voiceBtn {
  flex: 1 1 112px;
}

html.compat-flex-layout .action-block #fullBtn,
html.compat-flex-layout .action-block #logoutBtn {
  flex: 0 0 66px;
}

html.compat-flex-layout .action-block #accountText {
  flex: 0.72 1 116px;
}

html.compat-flex-layout .action-block #refreshBtn {
  flex: 0.58 1 96px;
}

html.compat-flex-layout .metric-card {
  width: calc((100% - 50px) / 6);
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 10px;
}

html.compat-flex-layout .metric-card:first-child {
  margin-left: 0;
}

html.compat-flex-layout .metric-card .metric-icon {
  flex: 0 0 48px;
}

html.compat-flex-layout .metric-copy {
  min-width: 0;
  display: block;
  flex: 1 1 auto;
  margin-left: 10px;
}

html.compat-flex-layout .metric-copy label,
html.compat-flex-layout .metric-copy strong,
html.compat-flex-layout .metric-copy small {
  display: block;
}

html.compat-flex-layout .metric-copy label { height: 16px; line-height: 16px; }
html.compat-flex-layout .metric-copy strong { height: 34px; line-height: 34px; }
html.compat-flex-layout .metric-copy small { height: 14px; line-height: 14px; }

html.compat-flex-layout .main-grid > .queue-panel,
html.compat-flex-layout .main-grid > .voice-panel,
html.compat-flex-layout .main-grid > .bottom-grid {
  position: absolute;
  min-width: 0;
  min-height: 0;
}

html.compat-flex-layout .main-grid > .queue-panel {
  top: 0;
  bottom: 26%;
  left: 0;
  width: calc(52.8302% - 4px);
}

html.compat-flex-layout .main-grid > .voice-panel {
  top: 0;
  right: 0;
  bottom: 26%;
  width: calc(47.1698% - 4px);
  display: flex;
  flex-direction: column;
}

html.compat-flex-layout .main-grid > .bottom-grid {
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(26% - 8px);
  display: flex;
}

html.compat-flex-layout .queue-list {
  display: block;
}

html.compat-flex-layout .queue-item {
  display: flex;
  align-items: center;
  margin-top: 7px;
}

html.compat-flex-layout .queue-item:first-child {
  margin-top: 0;
}

html.compat-flex-layout .queue-item > * {
  min-width: 0;
  margin-left: 8px;
}

html.compat-flex-layout .queue-item > *:first-child {
  margin-left: 0;
}

html.compat-flex-layout .queue-priority {
  flex: 0 0 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html.compat-flex-layout .queue-avatar {
  flex: 0 0 70px;
  align-self: center;
}

html.compat-flex-layout .queue-pet { flex: 1 1 23%; }
html.compat-flex-layout .queue-task { flex: 1.1 1 30%; }

html.compat-flex-layout .queue-plan,
html.compat-flex-layout .queue-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html.compat-flex-layout .queue-plan { flex: 0 0 84px; }
html.compat-flex-layout .queue-state { flex: 0 0 98px; }

html.compat-flex-layout .voice-panel > .panel-head {
  flex: 0 0 28px;
}

html.compat-flex-layout .call-board {
  flex: 1 1 46%;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

html.compat-flex-layout .current-call-main {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}

html.compat-flex-layout .current-call-main .speaker-mark {
  flex: 0 0 108px;
}

html.compat-flex-layout .current-call-main .call-content {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  margin-left: 22px;
}

html.compat-flex-layout .next-call-preview {
  display: block;
  flex: 0 0 auto;
}

html.compat-flex-layout .next-call-preview > * {
  display: block;
}

html.compat-flex-layout .next-call-preview strong {
  margin-top: 6px;
}

html.compat-flex-layout .voice-queue-panel {
  min-height: 0;
  display: flex;
  flex: 1.15 1 54%;
  flex-direction: column;
  margin-top: 8px;
}

html.compat-flex-layout .voice-queue-head {
  flex: 0 0 30px;
}

html.compat-flex-layout .voice-queue {
  min-height: 0;
  display: block;
  flex: 1 1 auto;
}

html.compat-flex-layout .voice-row {
  min-height: 0;
  height: 25%;
  display: flex;
  align-items: center;
}

html.compat-flex-layout .voice-row > * {
  min-width: 0;
  margin-left: 8px;
}

html.compat-flex-layout .voice-row > *:first-child { margin-left: 0; }
html.compat-flex-layout .voice-rank { flex: 0 0 28px; }
html.compat-flex-layout .voice-target { flex: 0.9 1 120px; }
html.compat-flex-layout .voice-task { flex: 1 1 130px; }
html.compat-flex-layout .voice-plan { flex: 0 0 100px; }
html.compat-flex-layout .voice-wait { flex: 0 0 48px; }
html.compat-flex-layout .voice-countdown { flex: 0 0 96px; }

html.compat-flex-layout .voice-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.compat-flex-layout .bottom-grid > .panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}

html.compat-flex-layout .bottom-grid > .panel:first-child { margin-left: 0; }
html.compat-flex-layout .bottom-grid > .room-panel { flex: 0 0 calc(52.8302% - 4px); }
html.compat-flex-layout .bottom-grid > .type-panel { flex: 0 0 calc(16.5094% - 6px); }
html.compat-flex-layout .bottom-grid > .record-panel { flex: 1 1 auto; }

html.compat-flex-layout .bottom-grid .panel-head {
  flex: 0 0 auto;
}

html.compat-flex-layout .room-grid {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
}

html.compat-flex-layout .room-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  margin-left: 6px;
}

html.compat-flex-layout .room-card:first-child { margin-left: 0; }

html.compat-flex-layout .bed-grid {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-content: flex-start;
}

html.compat-flex-layout .bed {
  width: calc((100% - 6px) / 3);
  margin-top: 3px;
  margin-left: 3px;
}

html.compat-flex-layout .bed:nth-child(3n + 1) { margin-left: 0; }
html.compat-flex-layout .bed:nth-child(-n + 3) { margin-top: 0; }

html.compat-flex-layout .type-chart {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}

html.compat-flex-layout .type-donut {
  display: flex;
  flex: 0 1 46%;
  align-items: center;
  justify-content: center;
}

html.compat-flex-layout .type-donut span {
  display: block;
}

html.compat-flex-layout .type-legend {
  min-width: 0;
  display: block;
  flex: 1 1 54%;
  margin-left: 6px;
}

html.compat-flex-layout .type-legend > div {
  display: flex;
  align-items: center;
  margin-top: 6px;
}

html.compat-flex-layout .type-legend > div:first-child { margin-top: 0; }
html.compat-flex-layout .type-legend > div > * { margin-left: 4px; }
html.compat-flex-layout .type-legend > div > *:first-child { margin-left: 0; }
html.compat-flex-layout .type-legend i { flex: 0 0 8px; }
html.compat-flex-layout .type-legend span { flex: 1 1 auto; }
html.compat-flex-layout .type-legend strong { flex: 0 0 20px; }
html.compat-flex-layout .type-legend small { flex: 0 0 30px; }

html.compat-flex-layout .record-list {
  min-height: 0;
  display: block;
  flex: 1 1 auto;
}

html.compat-flex-layout .record-head,
html.compat-flex-layout .record-item {
  min-width: 0;
  display: flex;
  align-items: center;
}

html.compat-flex-layout .record-head { height: 24px; }
html.compat-flex-layout .record-item { height: calc((100% - 24px) / 5); }

html.compat-flex-layout .record-head > *,
html.compat-flex-layout .record-item > * {
  min-width: 0;
  margin-left: 4px;
}

html.compat-flex-layout .record-head > *:first-child,
html.compat-flex-layout .record-item > *:first-child { margin-left: 0; }
html.compat-flex-layout .record-head > *:nth-child(1),
html.compat-flex-layout .record-item > *:nth-child(1) { flex: 0 1 15%; }
html.compat-flex-layout .record-head > *:nth-child(2),
html.compat-flex-layout .record-item > *:nth-child(2) { flex: 1.2 1 23%; }
html.compat-flex-layout .record-head > *:nth-child(3),
html.compat-flex-layout .record-item > *:nth-child(3) { flex: 0.8 1 15%; }
html.compat-flex-layout .record-head > *:nth-child(4),
html.compat-flex-layout .record-item > *:nth-child(4) { flex: 1.2 1 24%; }
html.compat-flex-layout .record-head > *:nth-child(5),
html.compat-flex-layout .record-item > *:nth-child(5) { flex: 0.8 1 16%; }
html.compat-flex-layout .record-head > *:nth-child(6),
html.compat-flex-layout .record-item > *:nth-child(6) { flex: 0 0 16px; }

html.compat-flex-layout .duty-list {
  min-width: 0;
  height: 100%;
  display: flex;
  flex: 0 0 calc(52.8302% - 4px);
  box-sizing: border-box;
}

html.compat-flex-layout .duty-group {
  min-width: 0;
  height: 100%;
  display: flex;
  flex: 0 0 calc((100% - 4px) / 2);
  box-sizing: border-box;
  margin-left: 4px;
}

html.compat-flex-layout .duty-group:first-child { margin-left: 0; }

html.compat-flex-layout .duty-group-head {
  display: flex;
  flex: 0 0 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html.compat-flex-layout .member-list {
  min-width: 0;
  position: relative;
  flex: 1 1 auto;
}

html.compat-flex-layout .member-page {
  display: flex;
  align-items: stretch;
}

html.compat-flex-layout .member-item {
  min-width: 0;
  display: flex;
  flex: 0 0 16.6667%;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html.compat-flex-layout .ticker-feed {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  margin-left: 8px;
}

html.compat-flex-layout .ticker-label {
  flex: 0 0 auto;
}

html.compat-flex-layout .ticker-window {
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-height: 840px) {
  html.compat-flex-layout .board-header,
  html.compat-flex-layout .metric-grid,
  html.compat-flex-layout .main-grid,
  html.compat-flex-layout footer.news-ticker {
    left: 6px;
    right: 6px;
  }

  html.compat-flex-layout .board-header { top: 6px; height: 50px; }
  html.compat-flex-layout .metric-grid { top: 62px; height: 80px; }
  html.compat-flex-layout .main-grid { top: 148px; bottom: 66px; }
  html.compat-flex-layout footer.news-ticker { bottom: 6px; height: 54px; }

  html.compat-flex-layout .metric-card { width: calc((100% - 30px) / 6); margin-left: 6px; }
  html.compat-flex-layout .metric-copy { margin-left: 6px; }
  html.compat-flex-layout .metric-copy label { height: 14px; line-height: 14px; }
  html.compat-flex-layout .metric-copy strong { height: 30px; line-height: 30px; }
  html.compat-flex-layout .metric-copy small { height: 12px; line-height: 12px; }

  html.compat-flex-layout .main-grid > .queue-panel,
  html.compat-flex-layout .main-grid > .voice-panel { bottom: 26%; }
  html.compat-flex-layout .main-grid > .bottom-grid { height: calc(26% - 6px); }
  html.compat-flex-layout .main-grid > .queue-panel { width: calc(52.8302% - 3px); }
  html.compat-flex-layout .main-grid > .voice-panel { width: calc(47.1698% - 3px); }
  html.compat-flex-layout .bottom-grid > .panel { margin-left: 6px; }
  html.compat-flex-layout .bottom-grid > .panel:first-child { margin-left: 0; }
  html.compat-flex-layout .bottom-grid > .room-panel { flex-basis: calc(52.8302% - 3px); }

  html.compat-flex-layout .queue-item { margin-top: 6px; }
  html.compat-flex-layout .queue-item > * { margin-left: 6px; }
  html.compat-flex-layout .queue-item > *:first-child { margin-left: 0; }
  html.compat-flex-layout .queue-priority { flex-basis: 50px; }
  html.compat-flex-layout .queue-avatar { flex-basis: 58px; }
  html.compat-flex-layout .queue-plan { flex-basis: 72px; }
  html.compat-flex-layout .queue-state { flex-basis: 78px; }

  html.compat-flex-layout .voice-panel > .panel-head { flex-basis: 24px; }
  html.compat-flex-layout .call-board { margin-top: 5px; }
  html.compat-flex-layout .current-call-main .speaker-mark { flex-basis: 84px; }
  html.compat-flex-layout .current-call-main .call-content { margin-left: 12px; }
  html.compat-flex-layout .voice-queue-panel { margin-top: 5px; }
  html.compat-flex-layout .voice-queue-head { flex-basis: 24px; }
  html.compat-flex-layout .voice-row > * { margin-left: 5px; }
  html.compat-flex-layout .voice-row > *:first-child { margin-left: 0; }
  html.compat-flex-layout .voice-rank { flex-basis: 24px; }
  html.compat-flex-layout .voice-target { flex-basis: 100px; }
  html.compat-flex-layout .voice-task { flex-basis: 105px; }
  html.compat-flex-layout .voice-plan { flex-basis: 82px; }
  html.compat-flex-layout .voice-wait { flex-basis: 42px; }
  html.compat-flex-layout .voice-countdown { flex-basis: 82px; }

  html.compat-flex-layout .room-card { margin-left: 4px; }
  html.compat-flex-layout .room-card:first-child { margin-left: 0; }
  html.compat-flex-layout .bed { width: calc((100% - 4px) / 3); margin-top: 2px; margin-left: 2px; }
  html.compat-flex-layout .type-legend { margin-left: 5px; }
  html.compat-flex-layout .type-legend > div { margin-top: 3px; }
  html.compat-flex-layout .type-legend > div > * { margin-left: 3px; }
  html.compat-flex-layout .type-legend > div > *:first-child { margin-left: 0; }

  html.compat-flex-layout .record-head { height: 18px; }
  html.compat-flex-layout .record-item { height: calc((100% - 18px) / 5); }

  html.compat-flex-layout .duty-list { flex-basis: calc(52.8302% - 3px); }
  html.compat-flex-layout .ticker-feed { margin-left: 6px; }
  html.compat-flex-layout .duty-group { flex-basis: calc((100% - 3px) / 2); margin-left: 3px; }
  html.compat-flex-layout .duty-group:first-child { margin-left: 0; }
  html.compat-flex-layout .duty-group-head { flex-basis: 32px; }
}