/* UPA TIK UNRAM - osTicket 1.17 client portal header override.
   Load after unram-modern.css; REMOVE older header/nav override links. */
#container { overflow: visible !important; }
#container > #header {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 90px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px 24px !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
  padding: 16px 28px !important;
  margin: 0 !important;
  background: white !important;
  border-bottom: 1px solid #e5edf6 !important;
  z-index: 1 !important;
}
/* In default osTicket markup, account controls occur before the logo in HTML. */
#container > #header > a#logo {
  order: 0 !important;
  float: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 1 auto !important;
  max-width: 280px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  background: transparent !important;
}
#container > #header > a#logo img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 70px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
#container > #header > .pull-right {
  order: 1 !important;
  float: none !important;
  position: relative !important;
  display: block !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  text-align: right !important;
}
#container > #header > .pull-right p { margin: 3px 0 !important; }
#container > .clear { clear: both !important; height: 0 !important; }
/* Default osTicket client nav IS the UL itself, not a UL nested in #nav. */
#container > ul#nav {
  box-sizing: border-box !important;
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  width: 100% !important;
  min-height: 60px !important;
  height: auto !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
  padding: 10px 28px !important;
  margin: 0 !important;
  list-style: none !important;
  background: white !important;
  border-bottom: 1px solid #e5edf6 !important;
  z-index: 0 !important;
}
#container > ul#nav > li {
  display: block !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}
#container > ul#nav > li > a {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  position: relative !important;
  min-height: 42px !important;
  height: auto !important;
  padding: 10px 18px !important;
  border: 1px solid #dae8f4 !important;
  border-radius: 999px !important;
  background: #f8fbfe !important;
  background-image: none !important;
  color: #26445e !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 2px 6px rgba(14,53,86,.06) !important;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
/* osTicket uses classes such as 'home', 'new', 'status' on its nav anchors. */
#container > ul#nav > li > a::before,
#container > ul#nav > li > a::after,
#container > ul#nav > li > a i,
#container > ul#nav > li > a svg { content: none !important; display: none !important; }
#container > ul#nav > li > a:hover { background: #eaf7ff !important; color: #087fc5 !important; box-shadow: 0 4px 12px rgba(34,169,240,.12) !important; }
#container > ul#nav > li > a.active {
  background: #168fd3 !important;
  color: #fff !important;
  border-color: #168fd3 !important;
  box-shadow: 0 5px 14px rgba(34,169,240,.22) !important;
}
/* Home link is already first in default UserNav; additionally prioritize its class. */
#container > ul#nav > li:has(> a.home) { order: -1 !important; }
#container > #content { box-sizing: border-box !important; position: relative !important; float: none !important; clear: both !important; margin-top: 0 !important; }
@media (max-width: 700px) {
  #container > #header { padding: 14px 16px !important; align-items: flex-start !important; }
  #container > #header > a#logo { max-width: min(240px,100%) !important; }
  #container > #header > a#logo img { max-height: 55px !important; }
  #container > #header > .pull-right { margin: 0 !important; text-align: left !important; }
  #container > ul#nav { padding: 10px 14px !important; min-height: 0 !important; }
  #container > ul#nav > li > a { min-height: 38px !important; padding: 8px 13px !important; font-size: 12px !important; }
}