html[data-theme="dark"],
body[data-theme="dark"] {
  background: #141414;
  color: #cfcfcf;
}

html[data-theme="light"],
body[data-theme="light"] {
  background: #f3f3f3;
  color: #202020;
}

.navbar.navbar-default {
  margin: 0 !important;
  min-height: 44px !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

body[data-theme="dark"] .navbar.navbar-default {
  background: #1a1a1a !important;
  border-bottom-color: #2d2d2d !important;
}

body[data-theme="light"] .navbar.navbar-default {
  background: #ffffff !important;
  border-bottom-color: #d8d8d8 !important;
}

body[data-theme="dark"] .navbar-default .navbar-brand,
body[data-theme="dark"] .navbar-default .navbar-nav > li > a,
body[data-theme="dark"] .navbar-default .navbar-nav > li > a:focus,
body[data-theme="dark"] .navbar-default .navbar-nav > li > a:hover,
body[data-theme="dark"] .navbar-default .navbar-toggle {
  color: #d8d8d8 !important;
}

body[data-theme="light"] .navbar-default .navbar-brand,
body[data-theme="light"] .navbar-default .navbar-nav > li > a,
body[data-theme="light"] .navbar-default .navbar-nav > li > a:focus,
body[data-theme="light"] .navbar-default .navbar-nav > li > a:hover,
body[data-theme="light"] .navbar-default .navbar-toggle {
  color: #202020 !important;
}

body[data-theme="dark"] .navbar-default .navbar-nav > .open > a,
body[data-theme="dark"] .navbar-default .navbar-nav > .open > a:focus,
body[data-theme="dark"] .navbar-default .navbar-nav > .open > a:hover {
  background: #242424 !important;
}

body[data-theme="light"] .navbar-default .navbar-nav > .open > a,
body[data-theme="light"] .navbar-default .navbar-nav > .open > a:focus,
body[data-theme="light"] .navbar-default .navbar-nav > .open > a:hover {
  background: #efefef !important;
}

.metro-theme-dropdown .dropdown-menu {
  min-width: 170px;
}

body[data-theme="dark"] .dropdown-menu,
body[data-theme="dark"] .modal-content,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .list-group-item,
body[data-theme="dark"] #chat-panel,
body[data-theme="dark"] #online-users,
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .input-group-addon,
body[data-theme="dark"] .btn,
body[data-theme="dark"] #vm-list .thumbnail,
body[data-theme="dark"] #metro-vm-monitor-panel {
  background: #1f1f1f !important;
  color: #cfcfcf !important;
  border-color: #333 !important;
}

body[data-theme="light"] .dropdown-menu,
body[data-theme="light"] .modal-content,
body[data-theme="light"] .panel,
body[data-theme="light"] .list-group-item,
body[data-theme="light"] #chat-panel,
body[data-theme="light"] #online-users,
body[data-theme="light"] .form-control,
body[data-theme="light"] .input-group-addon,
body[data-theme="light"] .btn,
body[data-theme="light"] #vm-list .thumbnail,
body[data-theme="light"] #metro-vm-monitor-panel {
  background: #ffffff !important;
  color: #202020 !important;
  border-color: #d0d0d0 !important;
}

body[data-theme="dark"] .dropdown-menu > li > a,
body[data-theme="dark"] .caption,
body[data-theme="dark"] .label,
body[data-theme="dark"] #chat-user,
body[data-theme="dark"] #status,
body[data-theme="dark"] a:not(.btn) {
  color: #d8d8d8 !important;
}

body[data-theme="light"] .dropdown-menu > li > a,
body[data-theme="light"] .caption,
body[data-theme="light"] .label,
body[data-theme="light"] #chat-user,
body[data-theme="light"] #status {
  color: #202020 !important;
}

body[data-theme="light"] a:not(.btn) {
  color: #1d5fbf !important;
}

body[data-theme="dark"] #chat-box > li {
  border-bottom-color: #343434 !important;
}

body[data-theme="light"] #chat-box > li {
  border-bottom-color: #dddddd !important;
}

body[data-theme="dark"] #chat-box > li:hover,
body[data-theme="dark"] .dropdown-menu > li > a:hover,
body[data-theme="dark"] .dropdown-menu > li > a:focus {
  background: #2a2a2a !important;
}

body[data-theme="light"] #chat-box > li:hover,
body[data-theme="light"] .dropdown-menu > li > a:hover,
body[data-theme="light"] .dropdown-menu > li > a:focus {
  background: #f2f2f2 !important;
}

body[data-theme="dark"] .has-turn { background: #2b4750 !important; }
body[data-theme="dark"] .waiting-turn { background: #514b1b !important; }
body[data-theme="light"] .has-turn { background: #d9f3ff !important; }
body[data-theme="light"] .waiting-turn { background: #fff3b8 !important; }

body[data-theme="dark"] .label-success { background: #2f5d32 !important; }
body[data-theme="dark"] .label-danger { background: #6b2b2b !important; }
body[data-theme="light"] .label-success { background: #dff0d8 !important; color: #234b29 !important; }
body[data-theme="light"] .label-danger { background: #f2dede !important; color: #742a2a !important; }

.metro-userline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.metro-flag,
.metro-flag-placeholder {
  display: inline-flex;
  width: 1.4em;
  justify-content: center;
}

.metro-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metro-rank-badge {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  padding: 4px 6px;
  border: 1px solid currentColor;
  letter-spacing: .06em;
}

#online-users .list-group-item,
#online-users .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#online-users .dropdown-menu {
  min-width: 220px;
}

.metro-admin-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.metro-vm-monitor-panel {
  margin-top: 12px;
  padding: 10px;
}

.metro-vm-monitor-header {
  margin-bottom: 8px;
  font-weight: 600;
}

.metro-vm-monitor-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

#vm-monitor-output {
  width: 100%;
  min-height: 220px;
  font-family: Consolas, Monaco, monospace;
  resize: vertical;
}

.metro-vm-online {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.82;
}

.metro-theme-dropdown > a {
  font-weight: 600;
}

.metro-theme-dropdown .dropdown-menu > li.active > a,
.metro-theme-dropdown .dropdown-menu > li.active > a:hover,
.metro-theme-dropdown .dropdown-menu > li.active > a:focus {
  font-weight: 700;
}

body[data-theme="dark"] .metro-theme-dropdown .dropdown-menu > li.active > a {
  background: #303030 !important;
}

body[data-theme="light"] .metro-theme-dropdown .dropdown-menu > li.active > a {
  background: #ececec !important;
}

body[data-theme="dark"] #display-outer,
body[data-theme="dark"] #display,
body[data-theme="dark"] #main-row,
body[data-theme="dark"] #vm-view {
  background: #141414 !important;
}

body[data-theme="light"] #display-outer,
body[data-theme="light"] #display,
body[data-theme="light"] #main-row,
body[data-theme="light"] #vm-view {
  background: #f3f3f3 !important;
}

#display {
  overflow: hidden;
}

#display > * {
  transform-origin: top left;
}

.metro-user-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}

#online-users > .dropdown {
  position: relative;
}

#online-users .metro-user-menu {
  right: 0;
  left: auto;
  min-width: 200px;
}

#online-users .dropdown.open > .metro-user-toggle {
  opacity: 0.95;
}

.metro-xss-addon {
  padding: 0 10px !important;
  white-space: nowrap;
}

.metro-xss-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.metro-xss-label input {
  margin: 0;
}

body[data-theme="dark"] .metro-xss-addon {
  background: #1f1f1f !important;
  color: #d8d8d8 !important;
  border-color: #333 !important;
}

body[data-theme="light"] .metro-xss-addon {
  background: #ffffff !important;
  color: #202020 !important;
  border-color: #d0d0d0 !important;
}

body[data-theme="dark"] .metro-user-menu > li > a {
  color: #d8d8d8 !important;
}

body[data-theme="light"] .metro-user-menu > li > a {
  color: #202020 !important;
}

@media (min-width: 1245px) {
  html.metro-display-scaled,
  body.metro-display-scaled {
    overflow-x: hidden;
    overflow-y: auto;
  }
}


html.metro-modernized,
body.metro-modernized {
  min-height: 100%;
}

#display {
  line-height: 0;
}

#display > * {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#chat-panel {
  overflow-y: auto;
}

@media (min-width: 1500px) {
  #online-users {
    max-height: none !important;
  }

  #kbd-container+div>.col-md-8>:first-child {
    height: auto !important;
    max-height: none !important;
  }
}


#online-users > * {
  position: relative;
}

#online-users > * .metro-user-toggle-menu {
  padding-right: 4px;
}

#online-users > * .metro-user-toggle-menu .caret {
  margin-left: 10px;
  flex: 0 0 auto;
}

#display {
  display: block;
}

#display > * {
  transform-origin: top left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.metro-user-context-menu {
  position: fixed;
  z-index: 2000;
  min-width: 220px;
  border: 1px solid #333;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.metro-user-context-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.metro-user-context-list > li > a {
  display: block;
  padding: 8px 14px;
  text-decoration: none;
  white-space: nowrap;
}

body[data-theme="dark"] .metro-user-context-menu {
  background: #1f1f1f;
  border-color: #333;
}

body[data-theme="light"] .metro-user-context-menu {
  background: #ffffff;
  border-color: #d0d0d0;
}

body[data-theme="dark"] .metro-user-context-list > li > a {
  color: #d8d8d8;
}

body[data-theme="light"] .metro-user-context-list > li > a {
  color: #202020;
}

body[data-theme="dark"] .metro-user-context-list > li > a:hover,
body[data-theme="dark"] .metro-user-context-list > li > a:focus {
  background: #2a2a2a;
}

body[data-theme="light"] .metro-user-context-list > li > a:hover,
body[data-theme="light"] .metro-user-context-list > li > a:focus {
  background: #f2f2f2;
}

#online-users > *.metro-user-menu-open {
  z-index: 2;
}


#display > * > * {
  transform-origin: 0 0;
}


#kbd-container {
  overflow-x: auto;
  overflow-y: visible;
}

#kbd-outer {
  max-width: 100%;
}


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

body.metro-vm-view-active,
html.metro-vm-view-active {
  overflow-y: hidden !important;
}

body.metro-vm-view-active.metro-keyboard-open,
html.metro-vm-view-active.metro-keyboard-open {
  overflow-y: auto !important;
}

body.metro-vm-view-active #vm-view {
  padding-bottom: 0 !important;
}


@media (min-width: 1500px) {
  #metro-vm-shell.metro-dock-active {
    display: grid !important;
    grid-template-columns: 200px minmax(640px, 1024px) minmax(320px, 1fr);
    align-items: start;
    column-gap: 24px;
    width: 100%;
    min-height: 0;
  }

  #metro-left-dock,
  #metro-center-dock,
  #metro-right-dock {
    min-height: 0;
  }

  #metro-left-dock,
  #metro-right-dock {
    overflow: hidden;
  }


  #metro-center-dock {
    min-width: 0;
    overflow: hidden;
    padding: 0 24px 0 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #metro-center-dock > * {
    width: 100%;
    max-width: 1024px;
    min-width: 0;
    flex: 0 0 auto;
  }

  #metro-center-dock #display-outer {
    overflow-x: hidden;
    margin: 0 !important;
    width: 100% !important;
    max-width: 1024px !important;
  }

  #metro-center-dock #display-outer {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
    display: flex;
    flex-direction: column;
  }

  #metro-center-dock #display {
    flex: 1 1 auto;
    min-height: 0;
  }

  #metro-center-dock #display-outer > div:nth-child(2),
  #metro-center-dock #display-outer > div:nth-child(3),
  #metro-center-dock #display-outer > div:nth-child(4),
  #metro-center-dock #display-outer > h3 {
    flex: 0 0 auto;
  }

  #metro-center-dock #display-outer > div:nth-child(4) {
    margin-top: 10px !important;
  }

  #metro-center-dock #display-outer > h3 {
    margin-top: 10px !important;
  }

  #metro-center-dock #kbd-container {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 1024px !important;
  }

  #metro-center-dock #display-outer > div:nth-child(4),
  #metro-center-dock #display-outer > h3 {
    display: block !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #metro-center-dock #display-outer > div:nth-child(4) {
    padding-right: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  #metro-center-dock #display,
  #metro-center-dock #display > * {
    max-width: 100%;
  }

  #metro-center-dock #admin-btns,
  #metro-center-dock #metro-modern-admin-tools,
  #metro-center-dock .metro-admin-tools {
    max-width: 100%;
  }


  #metro-left-dock > .col-md-4,
  #metro-right-dock > .col-md-8 {
    float: none !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #metro-left-dock .panel,
  #metro-left-dock .list-group,
  #metro-right-dock .input-group,
  #metro-right-dock > .col-md-8 > div {
    margin-bottom: 0 !important;
  }

  #metro-right-dock > .col-md-8,
  #metro-right-dock > .col-md-8 > :first-child,
  #metro-right-dock #chat-panel {
    min-height: 0;
  }

  #metro-right-dock #chat-panel {
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  #metro-left-dock #online-users {
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  #metro-vm-shell.metro-dock-active + .row {
    display: none !important;
  }

  html.metro-vm-view-active.metro-dock-layout,
  body.metro-vm-view-active.metro-dock-layout,
  html.metro-vm-view-active.metro-dock-layout.metro-keyboard-open,
  body.metro-vm-view-active.metro-dock-layout.metro-keyboard-open {
    overflow: hidden !important;
  }
}