/*
  NOTE: This CSS file is maintained for legacy purposes.
  Wherever possible, use Tailwind CSS for styling instead of custom CSS.
  The goal is to transition fully to Tailwind and phase out these styles over time.
*/

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav:before, .nav:after {
  display: table;
  content: " ";
}
.nav:after {
  clear: both;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover, .nav > li > a:focus {
  text-decoration: none;
  background-color: rgb(238.425, 238.425, 238.425);
}
.nav > li.disabled > a {
  color: rgb(119.085, 119.085, 119.085);
}
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
  color: rgb(119.085, 119.085, 119.085);
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  background-color: rgb(238.425, 238.425, 238.425);
  border-color: #33bbff;
}
.nav > li > a > img {
  max-width: none;
}
.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #33bbff;
}

.nav > li > a {
  font-weight: normal;
  font-size: 15px;
}

/*old product nav */
ul.nav.nav-productheader {
  margin-top: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  min-height: 60px;
}

ul.nav.nav-productheader li a.logo {
  padding-left: 0;
  padding-top: 16px;
}

ul.nav.nav-productheader li a.logo:hover,
ul.nav.nav-productheader li a.logo:active,
ul.nav.nav-productheader li a.logo:focus {
  background: none;
}

ul.nav.nav-productheader li.button a {
  margin-top: 18px;
  margin-left: 10px;
  padding: 4px 7px;
  color: white;
  transition: background-color 0.7s ease;
}

ul.nav.nav-productheader li.button a:hover {
  background-color: #33bbff;
}

ul.nav.nav-productheader li.pull-right a {
  padding: 4px 10px;
}

/*new product nav */
.wrap-productnav {
  background: #1a1a1a;
  box-shadow: inset 0 0 3px #000000;
}

.container.nav-productheader {
  position: relative;
}

.container.nav-productheader .navbar-main,
.container.nav-productheader .navbar-right {
  padding-top: 10px;
}

.container.nav-productheader .navbar-main > li > a,
.container.nav-productheader .navbar-right > li > a {
  color: #fff;
}

.container.nav-productheader .navbar-main > li.active > a,
.container.nav-productheader .navbar-right > li.active > a {
  color: #33bbff;
}

.container.nav-productheader ul.nav > li > a:hover,
.container.nav-productheader ul.nav > li > a:focus {
  text-decoration: none;
  background-color: transparent;
}

.container.nav-productheader ul.navbar-right .btn-blue,
.container.nav-productheader ul.navbar-right .btn-video {
  padding: 6px 15px 6px 15px;
}

.container.nav-productheader ul.navbar-right .btn-video {
  padding-left: 40px;
  margin-right: 15px;
  color: #33bbff;
}

.container.nav-productheader ul.navbar-right .btn-video:hover {
  background-color: #0b2633;
}

.container.nav-productheader ul.navbar-right .btn-blue {
  background-color: #33bbff;
  transition: background-color 0.7s ease;
  color: white;
}

.container.nav-productheader ul.navbar-right .btn-blue:hover {
  background-color: #33bbff;
}