/* CUSTOM BPE */
.logo
{
  margin-left: 8%;
  margin-right: 40%;
}
/* END CUSTOM BPE */

.navbar-view
{
  display: table;
}

.navbar
{
  position: fixed;
  background-color: #444;
  z-index: 1020;
  border: 0;
}

.navbar .navul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar .navli a
{
  display: block;
  color: white;
  text-decoration: none;
}

.navbar .navbottom > .navli a,
.navbar .navtop > .navopts > .navli a
{
  padding: 9px 0 9px 50px;
}

.horizontal .navbar .navbottom > .navli a,
.horizontal .navbar .navtop > .navopts > .navli a
{
  height: 60px;
  padding: 14px 0 20px 50px;
}

.onlyText.horizontal .navbar .navbottom > .navli a,
.onlyText.horizontal .navbar .navtop > .navopts > .navli a
{
  padding-top: 20px;
}

.navbar .navtop > .navopts > .dropdown > .dropdown-menu > .navli a
{
  height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  text-align: left;
  min-width: 120px;
}

.navbar .navdropdownmenu .navli a
{
  padding: 8px 15px 8px 15px;
}

.navbar .navli a:hover:not(.navopt-active),
.navbar .dropdown-menu a:hover
{
  background-color: #222;
}

.navbar .navbottom > .navli > a.navopt-active,
.navbar .navtop > .navopts > .navli > a.navopt-active
{
  color: black;
  background-color: white;
}

.vertical .navbar
{
  width: 220px;
  height: 100%;
}

.vertical .navbar .navul
{
  width: 100%;
}

.vertical .navbar .navbottom
{
  position: absolute;
  bottom: 0;
}

.vertical.onlyIcons .navbar
{
  width: 80px;
  height: 100%;
}

.vertical.onlyIcons .navbar .navul
{
  width: 100%;
}

.vertical.onlyIcons .navbar .navbottom
{
  position: absolute;
  bottom: 0;
}

.vertical.onlyText .navbar
{
  width: 180px;
  height: 100%;
}

.horizontal .navbar
{
  width: 100%;
  top: 0;
  white-space: nowrap;
}

.horizontal .navbar .navul
{
  display: inline-block;
  white-space: nowrap;
}

.horizontal .navbar .navbottom
{
  right: 0;
  position: absolute;
}

.horizontal .navbar .navul > .navli,
.horizontal .navbar .navtop > .navopts > .navli
{
  display: inline-block;
  vertical-align: middle;
}

.horizontal .navbar .navbottom > .navli a,
.horizontal .navbar .navtop > .navopts > .navli a
{
  text-align: center;
  padding-right: 10px;
}

.onlyText .navbottom > .navli > a > .navopt-icon,
.onlyText .navtop > .navopts > .navli > a > .navopt-icon
{
  display: none;
}

.onlyIcons .navbottom > .navli > a > .navopt-title,
.onlyIcons .navtop > .navopts > .navli > a > .navopt-title
{
  display: none;
}

.main-view.vertical
{
  margin-left: 220px;
}

.main-view.vertical.onlyIcons
{
  margin-left: 80px;
}

.main-view.vertical.onlyText
{
  margin-left: 180px;
}

.main-view.horizontal
{
  margin-top: 60px;
}

.navdropdown.navdropdown.navdropdown.navdropdown
{
  display: none;
}

.navdropdownmenu.navdropdownmenu,
.navopt .dropdown-menu
{
  background-color: #444;
  margin: 0;
  border-width: 0;
}

.navdropdowntoggle.navdropdowntoggle.navdropdowntoggle.navdropdowntoggle
{
  padding: 8px 15px 7px 15px;
}

.navdropdownspan
{
  font-size: 30px;
}

.navbar .navopt-icon
{
  font-size: 32px;
  display: inline-block;
  margin: 0 8px 0 0;
  vertical-align: middle;
}

.horizontal.onlyIcons .navbar a .navopt-icon,
.horizontal .navbar a.without-title .navopt-icon
{
  margin-left: 8px;
}

.navbar .navopt-title,
.navbar .navopt-custom-title
{
  vertical-align: middle;
  display: inline-block;
}

.vertical .navbar .navopt-title,
.vertical .navbar .navopt-custom-title
{
  max-width: 140px;
}

.vertical .navbar .navbottom > .navli > a,
.vertical .navbar .navtop > .navopts > .navli > a
{
  padding-left: 21px;
  border-left: 4px solid transparent;
  border-bottom-style: none;
}

.horizontal .navbar .navbottom > .navli > a,
.horizontal .navbar .navtop > .navopts > .navli > a
{
  padding-left: 10px;
  border-left-style: none;
  border-bottom: 4px solid transparent;
}

.horizontal .navbar .navbottom > .navli a.without-title,
.horizontal .navbar .navtop > .navopts > .navli a.without-title
.horizontal.onlyIcons .navbar .navbottom > .navli a,
.horizontal.onlyIcons .navbar .navtop > .navopts > .navli a
{
  padding-left: 10px;
  padding-right: 10px;
}

.navbar .caret
{
  position: absolute;
  right: 5px;
  top: 50%;
  margin-top: -3px;
}

.horizontal .navbar .navtop > .navopts > .navopt a > .caret,
.horizontal .navbar .navbottom > .navopt a > .caret
{
  left: 50%;
  margin-left: -3px;
  top: auto;
  bottom: 5px;
}

.vertical .navbar .right-caret
{
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  border-left: 4px solid;
}

.vertical .navbar .dropdown-menu
{
  top: 0;
  left : 100%;
}

@media screen and (max-height:400px)
{
  .vertical.vertical.vertical .navbar .navtop > .navopts > .navopt.navopt.navopt
  {
    display: none;
  }

  .vertical.vertical.vertical .navdropdown.navdropdown.navdropdown.navdropdown
  {
    display: inline-block;
  }
}

@media screen and (max-width:767px),
screen and (max-height:400px)
{
  .vertical.vertical.vertical .navbar
  {
    width: 60px;
    height: 100%;
  }

  .vertical .navbar .navul
  {
    width: 100%;
  }

  .vertical .navbar .navbottom
  {
    position: absolute;
    bottom: 0;
  }

  .main-view.vertical.vertical.vertical
  {
    margin-left: 60px;
  }

  .vertical.vertical .navbar .navbottom > .navli > a,
  .vertical.vertical .navbar .navtop > .navopts > .navli > a
  {
    padding-left: 11px;
  }
}

@media screen and (max-width:767px)
{
  .navbar .navtop > .navopts > .navopt.navopt.navopt
  {
    display: none;
  }

  .navdropdown.navdropdown.navdropdown.navdropdown
  {
    display: inline-block;
  }

  .navbar-view.textAndIcons .navbottom > .navli > a > .navopt-title,
  .navbar-view.textAndIcons .navtop > .navopts > .navli > a > .navopt-title
  {
    display: none;
  }

  .horizontal.horizontal .navbar .navbottom > .navli a,
  .horizontal.horizontal .navbar .navtop > .navopts > .navli a
  {
    height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .horizontal .navbar .navopt-title,
  .horizontal .navbar .navopt-custom-title
  {
    max-width: 140px;
  }

  .horizontal .navbar .navul .navdropdownmenu
  {
    white-space: normal;
  }
  
  .horizontal .navbar .navdropdownmenu .right-caret
  {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid;
  }
}