/* Side Menu */
.page-sidebar {
  background-color: transparent;
  position: absolute;
  width: 85px;
  height: 100%;
  overflow: hidden;
}
.page-sidebar > ul.menu {
  background-color: #08252c;
  /* overridden in brandable.less */
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.page-sidebar > ul.menu > li {
  display: block;
  margin: 0;
  padding: 0;
  border: 0px;
  background-repeat: no-repeat;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 1;
  /* this overlays white bg but with a transparency to produce a lighter hover bg color */
}
.page-sidebar > ul.menu > li.item-disabled {
  cursor: default;
}
.page-sidebar > ul.menu > li:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.page-sidebar > ul.menu > li > a {
  display: block;
  position: relative;
  color: #ffffff;
  font-weight: 100;
  text-align: center;
  text-decoration: none !important;
  background-color: transparent;
  margin: 0;
  border: 0px;
  padding: 10px 0px;
  height: 70px;
  font-family: inherit;
  font-weight: 400;
  /* This code puts the selected arrow over nav item */
}
.page-sidebar > ul.menu > li > a.active:after,
.page-sidebar > ul.menu > li > a.nav-arrow-first:after {
  font-family: FontAwesome;
  content: "\f0d9";
  /* fa-caret-left */
  font-size: 36px;
  position: absolute;
  top: 10px;
  right: -2px;
  color: #ebebeb;
}
.page-sidebar > ul.menu > li > a.nav-arrow:hover::after,
.page-sidebar > ul.menu > li > a.nav-arrow.active::after {
  color: #ebebeb;
}
.page-sidebar > ul.menu > li > a.nav-arrow-first:hover::after,
.page-sidebar > ul.menu > li > a.nav-arrow-first.active::after {
  color: #ffffff;
}
@media (max-width: 992px) {
  .page-sidebar > ul.menu > li > a.nav-arrow-first:hover::after,
  .page-sidebar > ul.menu > li > a.nav-arrow-first.active::after {
    color: #ebebeb;
  }
}
.page-sidebar > ul.menu > li > a > span {
  display: block;
  position: absolute;
  width: 100%;
  line-height: 1;
}
.page-sidebar > ul.menu > li.active > a {
  padding: 12px 12px 12px 10px;
  color: #ffffff;
}
.page-sidebar .nav-profile {
  overflow: auto;
  padding: 15px;
}
.page-sidebar .nav-profile .position {
  font-weight: 100;
  font-size: 14px;
}
.page-sidebar .nav-profile button {
  margin-top: 5px;
}
.page-sidebar .profile-info {
  float: left;
  height: 70px;
  line-height: 70px;
  margin-top: 5px;
}
.page-sidebar .profile-img {
  width: 70px;
  height: 70px;
  background-size: cover;
  border-radius: 70px;
  margin-right: 15px;
  margin-top: 5px;
  float: left;
}
.page-sidebar .nav-profile .name,
.page-sidebar .nav-profile .position {
  color: #ffffff;
  font-size: 26px;
  font-weight: 100;
}
.page-sidebar .nav-profile .position {
  font-size: 20px;
}
.page-sidebar > ul > li {
  background-size: 35px auto;
}
.page-sidebar > ul > li .adp-fa-icon-dashboard:before,
.page-sidebar > ul > li .adp-fa-icon-onboarding:before {
  content: "\e609";
}
.page-sidebar > ul > li .adp-fa-icon-demo:before {
  content: "\e611";
  font-size: 30px;
}
.page-sidebar > ul > li .adp-fa-icon-pay:before {
  content: "\e601";
}
.page-sidebar > ul > li .adp-fa-icon-timeoff:before {
  content: "\e603";
}
.page-sidebar > ul > li .adp-fa-icon-connections:before {
  content: "\e60a";
}
.page-sidebar > ul > li .adp-fa-icon-benefits:before {
  content: "\e605";
}
.page-sidebar > ul > li .adp-fa-icon-policies:before {
  content: "\e606";
}
.page-sidebar > ul > li .adp-fa-icon-company:before {
  content: "\e612";
}
.page-sidebar > ul > li .adp-fa-icon-timecard:before {
  content: "\e602";
}
.page-sidebar > ul > li .adp-fa-icon-calendar:before {
  content: "\e600";
}
.page-sidebar > ul > li .adp-fa-icon-admin:before {
  content: "\e610";
}
.page-sidebar > ul > li .settings:before,
.page-sidebar > ul > li .tour:before,
.page-sidebar > ul > li .logout:before {
  font-family: FontAwesome;
  color: #ffffff;
  font-size: 3em;
  float: left;
  margin-top: 8px;
  padding-left: 15px;
}
.page-sidebar > ul > li .settings:before {
  content: "\f013";
}
.page-sidebar > ul > li .tour:before {
  content: "\f018";
}
.page-sidebar > ul > li .logout:before {
  content: "\f011";
}
.page-sidebar > ul > li .feedback:before {
  content: "\f118";
}
.page-sidebar > ul > li .talent:before {
  content: "\f091";
}
.page-container {
  width: 100%;
  margin-left: 85px;
  padding-right: 85px;
}
.page-container.full-width {
  margin-left: 0;
  padding-right: 0;
}
/* Side Menu */
.page-sidebar,
.page-sidebar ul {
  width: 275px;
}
.page-sidebar > ul > li {
  background-position: 15px center;
}
.page-sidebar > ul > li > a > span {
  bottom: 50%;
  margin-bottom: -12px;
  left: 60px;
  text-align: left;
  font-size: 26px;
}
.menu-close .page-sidebar {
  left: -275px;
}
.menu-close .page-container {
  margin-left: 0px;
  padding-right: 0px;
}
.menu-close .page-sidebar > ul > li > a > span {
  left: -60px;
}
.menu-open .page-sidebar {
  left: 0px;
}
.menu-open .page-container {
  margin-left: 275px;
  padding-right: 0px;
}
@media (min-width: 992px) {
  .page-sidebar > ul > li > div:before {
    font-family: adp-font-awesome;
    color: #ffffff;
    font-size: 30px;
    float: left;
    vertical-align: middle;
    text-align: center;
    display: block;
    width: 100%;
    padding-top: 15px;
  }
  .page-sidebar > ul > li .talent:before,
  .page-sidebar > ul > li .feedback:before {
    font-family: FontAwesome;
    color: #ffffff;
    font-size: 30px;
    float: left;
    vertical-align: middle;
    text-align: center;
    display: block;
    width: 100%;
    padding-top: 15px;
  }
  .page-sidebar,
  .page-sidebar ul {
    width: 85px;
  }
  .page-sidebar > ul > li {
    background-position: center 15px;
    color: #ffffff;
  }
  .page-sidebar > ul > li > a > span {
    bottom: 10px;
    margin-bottom: 0px;
    left: 0px;
    text-align: center;
    font-size: 16px;
  }
  .page-sidebar .fa {
    font-size: 28px;
  }
  .menu-open .page-sidebar {
    left: 0px;
  }
  .menu-open .page-container {
    margin-left: 85px;
    padding-right: 85px;
  }
  .menu-close .page-sidebar {
    left: -85px;
  }
  .menu-close .page-container {
    margin-left: 0px;
    padding-right: 0px;
  }
  .page-sidebar > ul > li:first-child {
    /*display: none; this was redbox, not sure why this is here */
  }
}
/* mobile nav sizes */
@media (max-width: 992px) {
  .page-sidebar > ul > li .adp-fa-icon-dashboard:before,
  .page-sidebar > ul > li .adp-fa-icon-pay:before,
  .page-sidebar > ul > li .adp-fa-icon-timeoff:before,
  .page-sidebar > ul > li .adp-fa-icon-connections:before,
  .page-sidebar > ul > li .adp-fa-icon-benefits:before,
  .page-sidebar > ul > li .adp-fa-icon-onboarding:before,
  .page-sidebar > ul > li .adp-fa-icon-demo:before,
  .page-sidebar > ul > li .adp-fa-icon-policies:before,
  .page-sidebar > ul > li .adp-fa-icon-company:before,
  .page-sidebar > ul > li .adp-fa-icon-calendar:before,
  .page-sidebar > ul > li .adp-fa-icon-timecard:before,
  .page-sidebar > ul > li .adp-fa-icon-admin:before {
    font-family: adp-font-awesome;
    color: #ffffff;
    font-size: 30px;
    float: left;
    padding-left: 15px;
    padding-top: 20px;
  }
  .page-sidebar > ul > li .talent:before,
  .page-sidebar > ul > li .feedback:before {
    font-family: FontAwesome;
    color: #ffffff;
    font-size: 30px;
    float: left;
    padding-left: 15px;
    padding-top: 20px;
  }
  .page-sidebar > ul > li .tour:before {
    padding-top: 3px;
    font-size: 34px;
  }
  /* Landscape view of all tablet devices */
  .page-sidebar {
    position: absolute;
    width: 50px;
    margin: 0;
    overflow: visible !important;
  }
}
@media (max-width: 768px) {
  /* doesn't line up with search bar in phones so need to make gray */
  .page-sidebar > ul > li > a.nav-arrow-first:hover::after,
  .page-sidebar > ul > li > a.nav-arrow-first.active::after {
    color: #ebebeb;
  }
  .page-sidebar {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}
/*** Phones ***/
@media (max-width: 640px) {
  /* doesn't line up with search bar in phones so need to make gray */
  .page-sidebar > ul > li > a.nav-arrow-first:hover::after,
  .page-sidebar > ul > li > a.nav-arrow-first.active::after {
    color: #ebebeb;
  }
  .page-sidebar {
    overflow-x: hidden;
  }
}
@media screen and (max-height: 750px) {
  .page-container {
    min-height: 750px;
  }
}
@media screen and (min-height: 751px) {
  .page-container {
    min-height: 1024px;
  }
}