.main-header {
  position: relative;
}

.help-inline {
  color:red;
}
.main-header .user-profile {
  position: absolute;
  top: 0;
  right: 0;
}
.progress-nomargin {
  margin-bottom: 0;
}
#node-theme-name.loading {
  display: inline-block;
  padding-right: 30px;
  background: url('../img/loading.gif') no-repeat right;
}
.alert.alert-error {
  background: #d54a51;
  color: #fbf0f0;
  border-left: 3px solid #962329;
  border-color: #eed3d7;
}
.node-management .module-header a {
  color: #8693a0;
}
.nowrap {
  white-space: nowrap;
}

.wordbreak-all {
  word-break: break-all;
}
.hidden-child {
  display: none;
}
.display-child .fa {
  width: 18px;
}
.display-child:hover .hidden-child {
  display: inline-block;
}
.display-child:hover .toggle-child {
  display: none;
}
#celery-queue {
  top: auto;
  bottom: 0;
  padding: 8px;
}
#celery-queue h3 {
  font-size: 16px;
  background: #404951;
  padding: 7px;
  color: #8693a0;
  margin-bottom: 0;
}
#celery-queue ol {
  padding-left: 20px;
}
#celery-queue ul li.odd {
    background: #32383d;
}
#celery-queue ul li.even {
    background: #383f46;
}
#celery-queue ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}
#celery-queue ol li, #celery-queue ul li {
  color: #f5f5f5;
  font-size: 12px;
}
#celery-queue li {
  padding-left: 10px;
  margin: 0;
}
#celery-queue ol li span {
  padding: 0;
  display: inline-block;
  margin-left: -45px;
}
#celery-queue ul li span {
  display: inline-block;
  margin-left: -40px;
}

#celery-queue .icon {

}
.comment-form {
  margin-top: 20px;
}
ul.comments {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.comments li {
  border-left: 2px solid #767296;
  border-bottom: 1px solid #eee;
  margin-bottom: 5px;
  padding: 3px 3px 3px 10px;
}
div.comment {
  position: relative;
}
div.comment p {
  margin-bottom: 0;
}
div.comment p.meta {
  margin-bottom: 3px;
}
div.comment a.close {
  position: absolute;
  top: 5px;
  right: 5px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #000;
  opacity: 0.4;
}
div.comment a.close:hover {
  opacity: 1;
}

.vcenter {
  vertical-align: middle !important;
}

#config_table .copy {
  float: right;
}

#config_table .truncated {
    white-space: nowrap;
}

span.btn {
  cursor: default;
}

tr.instance td {
  vertical-align: middle !important;
}

.ssm_handle:hover {
  cursor: pointer;
}

.ssm_handle:active {
  cursor: grabbing;
}

/* =================================
   Per-environment colour theme
   ---------------------------------
   The body gets one of these classes via the `deployment` context
   processor (env-sandbox / env-staging / env-prod / env-local). Each
   env has a single accent colour used for the top stripe + the env
   badge on the login page + the sidebar header underline. Local has
   no accent — looks the same as the original theme.
   ================================= */
:root {
  --env-accent: transparent;
  --env-accent-fg: #fff;
}
.env-sandbox  { --env-accent: #e88534; --env-accent-fg: #fff; } /* BLAZING ORANGE */
.env-staging  { --env-accent: #4cabb1; --env-accent-fg: #fff; } /* BRIGHT TEAL    */
.env-prod     { --env-accent: #2c3e50; --env-accent-fg: #fff; } /* SLATE BLUE     */

/* 4px stripe at the very top of every page; instantly tells you
   what env you're looking at. */
.env-stripe {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--env-accent);
  z-index: 1100;
  pointer-events: none;
}
.env-local .env-stripe { display: none; }

/* Small pill rendered in the sidebar header + the login screen. */
.env-badge {
  display: inline-block;
  padding: 2px 10px;
  margin: 0 0 12px 0;
  border-radius: 999px;
  background: var(--env-accent);
  color: var(--env-accent-fg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Re-tint the TIND box at the very top-left of the icon sidebar with the
   env accent colour. Doubles as the env indicator without needing a
   separate pill cluttering the navigation. Local keeps the original
   purple from kato.css. */
.env-sandbox .sidebar-header,
.env-staging .sidebar-header,
.env-prod    .sidebar-header {
  background: var(--env-accent);
  color: var(--env-accent-fg);
}

/* =================================
   Login page polish
   ================================= */
.login-box {
  position: relative;
}
.login-box .env-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
}
.login-box .login-error {
  background: #fdecea;
  color: #b1322a;
  border-left: 3px solid #b1322a;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 13px;
}
.login-box .login-divider {
  text-align: center;
  margin: 16px 0;
  color: #999;
  font-size: 12px;
  position: relative;
}
.login-box .login-divider:before,
.login-box .login-divider:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #e0e0e0;
}
.login-box .login-divider:before { left: 0; }
.login-box .login-divider:after  { right: 0; }
.login-box .login-divider span { background: #fff; padding: 0 8px; position: relative; }

.login-box .login-btn {
  display: block;
  width: 100%;
}

/* Google's brand guidelines: white background, dark text, full width
   so it lines up with the Login button below. */
.login-box .google-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  color: #3c4043 !important;
  font-family: "Roboto", "Maven Pro", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  float: none !important;          /* override .login-box a { float: right } */
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.login-box .google-signin-btn:hover,
.login-box .google-signin-btn:focus {
  background: #f8f9fa;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.15);
  text-decoration: none;
  color: #3c4043 !important;
}
.login-box .google-signin-btn .google-g {
  display: inline-flex;
}

/* =================================
   Deployed image version
   ---------------------------------
   Rendered below the login form and pinned to the bottom of the
   sidebar so operators can see at a glance which image tag is running
   (12-char commit SHA on sandbox, release tag like v2026.05.11 on
   staging/prod). Hidden entirely when APP_VERSION isn't set, e.g. local
   `runserver`. See balder/utils/context_processors.py.
   ================================= */
.login-box .app-version {
  margin-top: 18px;
  text-align: center;
  font-family: "Menlo", "Consolas", monospace;
  font-size: 11px;
  color: #999;
  letter-spacing: 0.02em;
  word-break: break-all;
}

.sidebar-footer {
  position: absolute;
  left: 64px;     /* clear of the icon column (.sidebar-icon width) */
  right: 0;
  bottom: 0;
  padding: 8px 12px;
  background: #32383d;
  border-top: 1px solid #404951;
  color: #8693a0;
  font-family: "Menlo", "Consolas", monospace;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.02em;
  word-break: break-all;
  z-index: 1; /* sit above the absolutely-positioned .sidebar-group */
}