:root {
  --nav-height: 3rem;
}
body {
  margin-top: var(--nav-height);
}
nav {
  top: 0;
  position: fixed;
  width: 100%;
}
.header--desktop {
  display: none;
}
.header--mobile {
  --mobile-icon-width: 2rem;
  background: var(--uphe-blue-dark);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  position: fixed;
  width: 100%;
  z-index: 10;
}

.btn-ghost.header--mobile-menu {
  background: none;
  border: none;
  width: var(--mobile-icon-width);
  height: var(--mobile-icon-width);
  margin-left: 1rem;
}
.header--mobile-menu::before,
.header--mobile-menu::after {
  content: "";
  display: block;
  position: absolute;
  width: 1.5rem;
  height: 0;
  border-top: 1px solid #fff;
  top: 1.25rem;
  transform-origin: center;
  transition: transform 0.3s;
}
.header--mobile-menu::after {
  top: 1.85rem;
}

.header--mobile-menu.lb-visible::before {
  top: 1.5rem;
  transform: rotate(45deg);
}
.header--mobile-menu.lb-visible::after {
  top: 1.5rem;
  transform: rotate(-45deg);
}
/* Uphe logo (mobile) */
.header--mobile-logo-wrapper {
  display: flex;
}
.header--mobile-logo-uphe {
  height: 2.5rem;
}

/* Search icon on the right */
.btn-ghost.header--mobile-search {
  margin-right: 1rem;
}

.header--mobile-icon-search {
  width: var(--mobile-icon-width);
}


/* Search Bar */
/* The wrapper contains field and close button */
.header_search-bar-wrapper {
  background: var(--uphe-blue-dark);
  display: flex;
  align-items: center;
  position: absolute;
  height: var(--nav-height);
  right: 0;
  width: calc(100% - 3em);
  justify-content: flex-end;
  padding-right: 0.5em;
  z-index: 11;
  display:none;
}
.header_search-bar_wrapper .form-item,  .form-actions{
  margin-top: 0;
  margin-bottom:0;	
}
.header_search-bar_submit .search-form{
  margin-bottom: 0;	
}
/* search text field */
.header .header_serach-bar_field,.form-search {
  position: relative;
  width: 100%;
  background: #fff;
  border: 0;
  color: var(--uphe-blue-dark);
  padding: 0.2em 0.2em 0.2em 1em;
  border-radius: 2em;
  transition: opacity var(--hover-transition-duration);
  opacity: 0.8;
  font-size: 0.95em;
  line-height: 1.5em;
  right: 0;
  top:auto;
}

/* search field placeholder text */
.header_serach-bar_field::placeholder,.form-search::placeholder {
  color: var(--uphe-dark-blue);
}
html.js input.form-autocomplete {
    background-image: none;
}
/* search filed focused border/outline */
.header_serach-bar_field:focus,.form-search::focus {
  outline: none;
  opacity: 1;
}

/* Submit search button. May not be necessary */
.header_search-bar_submit,.search-submit .form-submit {
  position: absolute;
  right: 3.5em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 2em;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background-color: transparent;
  background-image: url(../images/search.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  cursor: pointer;
  color:transparent;
  filter: invert(1);
}

/* close search field button */
.header_search-bar_close {
  position: relative;
  right: 0;
  background: none;
  border: none;
  color: var(--uphe-blue-light);
  color: #fff;
  font-size: 1em;
  cursor: pointer;
  width: 2em;
  top:auto;
}

/* Mobile main menu css **/

header #mobile-main-menu {
    background-color: rgba(128,128,128,.95);
    margin-top:48px;
	display:none;
}
@media (max-width: 720px) {
  header #mobile-main-menu {
    float: none;
    clear: both;
    width: 100%;
    height: 100vh;
    padding: 0 30px 20vh;
    color: #fff;
	overflow: scroll;
	pointer-events: all;
 }
 /* Font size for the root item  (MOVIES/TV/VIDEO/REDEEM DIGITAL)*/
 header #mobile-main-menu .nav-item__link {
    font-size: 1.75em;
 }
 header #mobile-main-menu ul.menu {
   padding-left: 20px;
 }
 header #mobile-main-menu a:hover {
    background-color: transparent;
 }
 header #mobile-main-menu .nav-separator, header #mobile-main-menu .nav-item span.nolink  {display:none}
 header #mobile-main-menu a {
    border: 0;
    color: #fff;
    display: block;
    font-weight: 400;
    padding: 0.8rem 0.5rem .8rem;
	border-bottom: 1px solid #aaa;
    -webkit-text-size-adjust: 100%;
 }
 header #mobile-main-menu .last a {
    border-bottom: none;
 }
 header #mobile-main-menu .menu a {
    border-bottom: none;
 }
 header #mobile-main-menu li .menu li:nth-child(1),header #mobile-main-menu li .menu li:nth-child(2){
  margin-left: -1em;
 }
 header #mobile-main-menu .nav-item:has(ul) .nav-item__link{
  position: relative;
 }
 header #mobile-main-menu .nav-item:has(ul) .nav-item__link::after {
     content: "⌝";
     position: absolute;
     width: 1em;
     height: 1em;
     top: 0.5em;
     right: 0.5em;
     transform: rotate(135deg);
     transform-origin: .5em .45em;
     transition: transform .1s;
 }
 header #mobile-main-menu .nav-item:has(ul.collapse-down) .nav-item__link::after {
    transform: rotate(-45deg);
 }
 header #mobile-main-menu ul#nav__top-menu{
  padding:0;
 }
 header #mobile-main-menu ul li.collapsed, header #mobile-main-menu ul li.expanded {
    list-style-image: none;
    list-style-type: none;
 }
 header #mobile-main-menu .nav-item span.nolink{
  display: block;
  padding: 0.5rem;
}

header #mobile-main-menu li.expanded .menu.collapse-up {
    max-height: 0;
    overflow: hidden;
}
header #mobile-main-menu li.expanded .menu.collapse-down {
    height: auto;
    max-height: 292px;
    max-height: 29.2rem;
    overflow: unset;
}
header #mobile-main-menu li  .menu li:nth-child(2) {
    background: #54596e;
}

/* Hide | bars */
header #nav__top-menu > .nav-item > span.nolink{
  display: none;
}
}
ul.menu li{
   margin:0;
   padding:0;
}
ul li.leaf{
    list-style-image: none;
    list-style-type: none;	
	
}
.nav-left  li.expanded, .nav-left  li.collapsed, .nav-left li.leaf {
    padding: 0;
    margin: 0;
}
/* Mobile main menu css **/
@media (min-width: 700px) {
  .nav-left .nav-item__link .menu ,.nav-left li.nav-item .menu{
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: var(--nav-height);
    padding: 1em;
    list-style: none;
    background: var(--uphe-light-gray);
  /*  margin-left: -1.05em;*/
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .nav-left .nav-item__link:hover .menu,.nav-left li.nav-item:hover .menu {
    display: flex;
    opacity: 1;
    pointer-events: all;
  }

  .nav-item__link .leaf, .nav-left li.nav-item .leaf {
    position: relative;
  }

  /* Each rows of the dropdown */
  /* All Movies/TV  wrapper <li>*/
  .nav-item__link .leaf.first,.nav-left li.nav-item .leaf.first {
    background: #fff;
    border-radius: 2em;
    overflow: hidden;
  }

  /* <a> or <span> part of the dropdown item */
  .nav-item__link .leaf .nolink,
  .nav-item__link .leaf a,
  .nav-left li.nav-item .leaf .nolink,
  .nav-left li.nav-item .leaf a  {
    display: inline-block;
    width: 13em;
    background: none;
    color: var(--uphe-blue-dark);
    font-size: 1em;
    font-weight: 600;
    margin-left: 0;
    padding: 0.5em 1em;
  }

  /* All Movies/TV  <a>*/
  .nav-item__link .leaf.first a, .nav-left li.nav-item .leaf.first a {
    width: 100%;
    font-size: 1.15em;
    padding: 0.5em 1em;
    background: none;
    color: var(--uphe-blue-dark);
    border-color: var(--uphe-blue-light);
    text-align: center;
  }

  /* Recent Releases header -- wrapper <li> */
  .nav-item__link .leaf:has(.nolink) ,.nav-left li.nav-item .leaf:has(.nolink){
    border-color: none;
    font-weight: 400;
    margin-top: 1em;
  }
  /* Recent Released header <span> */
  .nav-item__link .leaf .nolink,.nav-left li.nav-item .leaf .nolink  {
    font-weight: 400;
    text-align: left;
    border-color: transparent;
    color: var(--uphe-dark-gray);
  }

  /* Mouse over states for genre & all movies/tv shows */
  .nav-item__link .leaf a:hover, .nav-left li.nav-item .leaf a:hover  {
    background: var(--uphe-blue-dark);
    color: #fff;
  }
}

@media (min-width: 700px) {
  :root {
    --nav-height: min(4vw, 4rem);
  }
  body {
    margin-top: var(--nav-height);
  }
  nav {
    display: flex;
    position: absolute;
  }
  .header--mobile {
    --mobile-icon-width: 2rem;
    display: none;
  }
  #mobile-main-menu{
	display:none;  
  }
  .header--desktop {
    display: block;
    background: var(--uphe-blue-dark);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    font-size: calc(var(--nav-height) / 4);
    height: var(--nav-height);
  }

  nav a {
    color: #fff;
    text-decoration: none;
  }

  /* Left aligned items wrapper. UPHE logo, Movies, TV, Video, Redeem Digital */
  .nav-left {
    list-style: none;
    display: flex;
    gap: 1vw;
    gap: 0;
    margin: 0 0 0 1em;
    padding: 0;
	float: left;
  }

  /* Right aligned items wrapper. Social icons, Get Updates, Search */
  .nav-right {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0 1em 0 0;
    gap: 1vw;
    float: right;
  }

  #nav__logo {
    /* margin-top: 0.15%; */
  }
  #nav__top-menu {
    margin-left: 0;
  }

  /* UPHE logo button */
  .logo-uphe {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .nav-logo-uphe {
    height: 3.75em;
  }

  /* <li> for link items  */
  .nav-item {
    display: flex;
    align-items: center;
    font-size: 1.2em;
  }

  .nav-right .nav-item {
    padding: 1em 0;
  }
  /* <a> in the .nav-link */
  .nav-item__link {
    transition: background-color var(--hover-transition-duration);
    position: relative;
  }
  .nav-item__link.selected,.nav-item__link.active {
    opacity: 0.5;
    pointer-events: none;
  }
  li a.active {
    color: #fff;
    opacity: 0.5;
    pointer-events: none;
  }
  .nav-left .nav-item__link {
    /* padding: 1em 1.05em; */
    padding: 1.05em;
  }

  .nav-item__link:hover {
    opacity: 0.8;
  }

  .nav-left .nav-item__link:hover {
    opacity: 1;
    background-color: var(--uphe-light-gray);
    /* border-bottom: 1px solid var(--uphe-light-gray); */
  }

  .nav-separator,.nav-item span.nolink  {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    margin: 0 -0.2em;
    color: rgb(162 158 217 / 30%);
  }

  .nav-social {
    height: 1.4em;
    transition: opacity var(--hover-transition-duration);
  }
  .nav-social.x-logo {
    height: 1.2em;
  }
  .nav-social:hover {
    opacity: 0.7;
  }

  /* [GET UPDATES] button */
  .btn--updates {
    color: var(--uphe-blue-dark);
    background-color: #fff;
    border: 1px solid #fff;
    padding: 0.2em 0.8em;
    border-radius: 0.5em;
    font-size: 0.9em;
    display: flex;
    transition: background-color var(--hover-transition-duration),
      color var(--hover-transition-duration);
  }
  .btn--updates:hover {
    background-color: var(--uphe-blue-dark);
    color: #fff;
  }

  /* Search icon button */
  .header--desktop-search {
    display: flex;
    cursor: pointer;
    transition: opacity var(--hover-transition-duration);
	font-size: inherit;
  }
  .header--desktop-search:hover {
    opacity: 0.8;
  }
  .header--desktop-icon-search {
    height: 1.4em;
  }
  .header_search-bar-wrapper {
	width: max(28%, 15rem);
    justify-content: flex-end;
  }
}


#nav {
  /* The root wrapper */
  /* Discreet positioning for admin header */
  position: absolute;
  top: 0;
  width: 100%;
  z-index:8;
}
.search-box{ display:none;}
.navbar-administration header {
    margin-top: 40px;
}
.tabs li a.active{
    color: #000;
}