/* osTicket 1.17 UPA TIK UNRAM - header and navigation collision fix.
   Include AFTER unram-modern.css. Designed for client portal only. */
#container { overflow: visible; }
#header {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  height: auto !important;
  min-height: 90px;
  padding: 16px 28px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #e4edf5;
}
#header > *, #header #logo, #header .pull-right {
  position: static !important;
  float: none !important;
  clear: none !important;
  margin-top: 0;
  margin-bottom: 0;
}
#header #logo { display: inline-flex; align-items: center; flex: 0 1 auto; max-width: 100%; min-width: 0; }
#header #logo img { display: block; max-width: min(270px, 100%); max-height: 65px; width: auto; height: auto; object-fit: contain; }
#header .pull-right { margin-left: auto; max-width: 100%; line-height: 1.6; }
/* osTicket installations may have #nav as a UL or a div containing a UL. */
#nav {
  position: relative !important;
  z-index: 1;
  display: block !important;
  clear: both !important;
  float: none !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  padding: 6px 20px !important;
  margin: 0 !important;
  background: #fff;
  border-bottom: 1px solid #e4edf5;
  box-sizing: border-box;
}
#nav ul, ul#nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 4px 6px;
  float: none !important;
  clear: both !important;
  width: 100%;
  height: auto !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
ul#nav { padding: 6px 20px !important; }
#nav li {
  position: relative;
  display: block !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
#nav li a {
  display: block;
  position: static !important;
  float: none !important;
  height: auto !important;
  min-height: 38px;
  line-height: 20px !important;
  padding: 9px 14px !important;
  white-space: normal;
  text-decoration: none;
  border-radius: 9px;
  box-sizing: border-box;
}
#content { position: relative; clear: both; z-index: 0; }
@media(max-width: 700px) {
  #header { padding: 14px 16px !important; gap: 10px; }
  #header .pull-right { margin-left: 0; }
  #nav { padding: 6px 10px !important; }
  ul#nav { padding: 6px 10px !important; }
  #nav li a { padding: 8px 10px !important; font-size: 13px; }
}