:root {
  --gloap-navy: #0f2f46;
  --gloap-blue: #0f6f93;
  --gloap-sand: #fff8ef;
  --gloap-ink: #102f45;
  --gloap-line: rgba(15, 47, 70, 0.16);
}

body {
  background:
    radial-gradient(circle at 18% 18%, rgba(15, 111, 147, 0.16), transparent 28%),
    linear-gradient(135deg, #f7fbfd 0%, var(--gloap-sand) 100%) !important;
}

#noVNC_control_bar_anchor,
#noVNC_status_bar {
  border-color: var(--gloap-line) !important;
}

#noVNC_control_bar {
  background: linear-gradient(180deg, #123a55 0%, var(--gloap-navy) 100%) !important;
  border-radius: 0 14px 14px 0 !important;
  box-shadow: 8px 12px 28px rgba(15, 47, 70, 0.28) !important;
}

#noVNC_control_bar_handle {
  background-color: var(--gloap-navy) !important;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.26) !important;
}

#noVNC_control_bar .noVNC_scroll {
  padding: 8px 9px 8px 7px !important;
}

.noVNC_logo {
  display: block !important;
  background: transparent url("../images/gloap-logo.png") no-repeat center center !important;
  background-size: contain !important;
  color: transparent !important;
  text-shadow: none !important;
  overflow: hidden !important;
}

.noVNC_logo span,
.noVNC_logo br {
  display: none !important;
}

#noVNC_control_bar .noVNC_logo {
  width: 76px !important;
  height: 58px !important;
  margin: 6px auto 14px !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  background-size: 62px auto !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
  font-size: 0 !important;
}

#noVNC_connect_dlg .noVNC_logo,
#noVNC_credentials_dlg .noVNC_logo {
  width: 210px !important;
  height: 140px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  font-size: 0 !important;
  border-radius: 0 !important;
}

.noVNC_button {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 9px !important;
}

.noVNC_button:hover,
.noVNC_button:focus,
.noVNC_button.noVNC_selected {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.48) !important;
}

.noVNC_panel {
  background: rgba(5, 21, 32, 0.92) !important;
  color: #fff !important;
}

#noVNC_connect_dlg,
#noVNC_credentials_dlg {
  border: 1px solid var(--gloap-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 22px 70px rgba(15, 47, 70, 0.2) !important;
  padding: 24px !important;
}

#noVNC_connect_button,
#noVNC_credentials_button {
  background: linear-gradient(135deg, var(--gloap-blue), #0a5575) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  min-height: 34px !important;
  box-shadow: 0 12px 26px rgba(15, 111, 147, 0.26) !important;
}

#noVNC_credentials_dlg ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#noVNC_credentials_dlg li {
  margin: 0 0 12px !important;
}

#noVNC_credentials_dlg label {
  display: block !important;
  margin: 0 0 7px !important;
  color: var(--gloap-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
}

#noVNC_credentials_dlg input[type="password"],
#noVNC_credentials_dlg input[type="text"],
#noVNC_credentials_dlg input:not([type]) {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(15, 47, 70, 0.24) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--gloap-ink) !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
}