.fill {
  width: 100%;
  height: 100vh;
}
.fill-width {
  width: 100%;
}
.fill-height {
  height: 100vh;
}
.scroll-y {
  overflow-y: auto;
}
.scroll-x {
  overflow-x: auto;
}
.scroll-all {
  overflow-y: auto;
  overflow-x: auto;
}
.bold {
  font-weight: bolder;
}
.ph-banner-cta {
  background: #003a50;
  padding: 10px 0;
}
.ph-banner-cta.-expired {
  background-color: rgba(241, 202, 3, 0.2);
}
.ph-banner-cta.-expired img {
  display: none;
}
.ph-banner-cta.-expired > div > div {
  width: 100%;
}
.ph-banner-cta.-expired > div > div p {
  color: #333;
}
.ph-banner-cta.-expired > div > div p i {
  display: inline-block;
}
.ph-banner-cta.-expired button {
  display: none;
}
.ph-banner-cta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0 auto;
  max-width: 1300px;
  width: 90%;
}
.ph-banner-cta > div > img {
  height: 35px;
}
.ph-banner-cta > div > div {
  text-align: center;
}
.ph-banner-cta > div > div p {
  color: #fff;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
}
.ph-banner-cta > div > div p i {
  display: none;
  top: 3px;
  margin-right: 9px;
}
.ph-banner-cta > div > button,
.ph-banner-cta > div > a {
  padding: 12px 25px;
  height: unset;
  font-size: 12px;
}
.ph-nav-body {
  width: 100%;
  height: 100vh;
  float: right;
  -webkit-transition: margin 300ms ease-out;
  -moz-transition: margin 300ms ease-out;
  -o-transition: margin 300ms ease-out;
  transition: margin 300ms ease-out;
}
.ph-active {
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 2px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.navbar-nav > li > a {
  height: 50px;
  line-height: 20px;
  color: #777;
}
.navbar-nav > li > a.navbar-backLink:hover span {
  left: -2px;
}
.navbar-nav > li > a.navbar-backLink span {
  line-height: 20px;
  margin-right: 5px;
  font-size: 13px;
  left: 1px;
  transition: left 0.25s ease-out;
}
.ph-main-navbar {
  background-color: #00adef;
  border-color: #008fc6;
  font-size: 13px;
  height: 50px;
}
.ph-main-navbar .container {
  padding-left: 0px;
  padding-right: 0px;
}
.ph-main-navbar .nav-icon {
  font-size: 1.8em;
}
.ph-main-navbar .navbar-brand {
  color: white;
  font-size: 24px;
  font-weight: bold;
}
.ph-main-navbar .navbar-brand:hover,
.ph-main-navbar .navbar-brand:focus {
  color: white;
  background-color: transparent;
}
.ph-main-navbar .navbar-text {
  color: white;
}
.ph-main-navbar .navbar-nav > li > a {
  color: white;
  max-height: 50px;
  line-height: 20px;
  letter-spacing: 0.75px;
}
.ph-main-navbar .navbar-nav > li > a:hover {
  color: white;
  background-color: #00a2e0;
}
.ph-main-navbar .navbar-nav > li > a:focus {
  color: white;
  background-color: #008fc6;
}
.ph-main-navbar .navbar-nav > .active > a,
.ph-main-navbar .navbar-nav > .active > a:hover,
.ph-main-navbar .navbar-nav > .active > a:focus {
  color: white;
  background-color: #008fc6;
}
.ph-main-navbar .navbar-nav > .disabled > a,
.ph-main-navbar .navbar-nav > .disabled > a:hover,
.ph-main-navbar .navbar-nav > .disabled > a:focus {
  color: #444;
  background-color: transparent;
}
.ph-main-navbar .navbar-toggle {
  border-color: #333;
}
.ph-main-navbar .navbar-toggle:hover,
.ph-main-navbar .navbar-toggle:focus {
  background-color: #0088bc;
}
.ph-main-navbar .navbar-toggle .icon-bar {
  background-color: #fff;
}
.ph-main-navbar .navbar-collapse {
  padding-left: 0;
}
.ph-main-navbar .navbar-collapse,
.ph-main-navbar .navbar-form {
  border-color: #008fc6;
}
.ph-main-navbar .navbar-nav > .open > a,
.ph-main-navbar .navbar-nav > .open > a:hover,
.ph-main-navbar .navbar-nav > .open > a:focus {
  background-color: #008fc6;
  color: white;
}
@media (max-width: 768px) {
  .ph-main-navbar .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #008fc6;
  }
  .ph-main-navbar .navbar-nav .open .dropdown-menu .divider {
    background-color: #008fc6;
  }
  .ph-main-navbar .navbar-nav .open .dropdown-menu > li > a {
    color: white;
  }
  .ph-main-navbar .navbar-nav .open .dropdown-menu > li > a:hover,
  .ph-main-navbar .navbar-nav .open .dropdown-menu > li > a:focus {
    color: white;
    background-color: #00a2e0;
  }
  .ph-main-navbar .navbar-nav .open .dropdown-menu > .active > a,
  .ph-main-navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
  .ph-main-navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: white;
    background-color: #008fc6;
  }
  .ph-main-navbar .navbar-nav .open .dropdown-menu > .disabled > a,
  .ph-main-navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .ph-main-navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
  }
}
.ph-main-navbar .navbar-link {
  color: white;
}
.ph-main-navbar .navbar-link:hover {
  color: white;
}
.ph-main-navbar .btn-link {
  color: white;
}
.ph-main-navbar .btn-link:hover,
.ph-main-navbar .btn-link:focus {
  color: white;
}
.ph-main-navbar .btn-link[disabled]:hover,
fieldset[disabled] .ph-main-navbar .btn-link:hover,
.ph-main-navbar .btn-link[disabled]:focus,
fieldset[disabled] .ph-main-navbar .btn-link:focus {
  color: #444;
}
.ph-main-navbar .ph-dropdown {
  color: white;
  background-color: #00adef;
}
.ph-main-navbar .ph-navbar-logout {
  background-color: #00adef;
  color: white;
  width: calc(100% - 40px);
  display: block;
  margin: 15px auto;
  height: 34px;
  border: none;
  border-radius: 2px !important;
  font-size: 12px;
}
.ph-main-navbar .ph-navbar-logout:hover {
  background-color: #008fb7;
  border-color: #008fb7;
}
.ph-navbar-container a {
  cursor: pointer;
}
@media (max-width: 767px) {
  .ph-navbar-container .ph-nav-inner {
    z-index: 1000;
    position: relative;
    background: #00adef;
    width: 100%;
    margin: -16px 0 0 0;
    padding: 0;
    border-top: none;
  }
  .ph-navbar-container .ph-nav-inner ul {
    margin: 0;
  }
  .ph-navbar-container .ph-nav-inner ul li {
    margin: 0;
    width: 100%;
  }
  .ph-navbar-container .ph-nav-inner ul li a {
    max-height: 50px;
    line-height: 48px;
    padding: 0 20px;
  }
}
.ph-secondary-navbar {
  background-color: #efefef;
}
.ph-secondary-navbar > .ph-navbar-container {
  height: 50px;
}
@media (max-width: 767px) {
  .ph-secondary-navbar > .ph-navbar-container {
    height: unset;
    padding: 20px;
  }
}
.ph-secondary-navbar > .ph-navbar-container .navbar-left {
  float: left;
  margin: 0;
}
.ph-secondary-navbar > .ph-navbar-container .navbar-right {
  float: right;
  margin: 0;
}
.ph-secondary-navbar > .ph-navbar-container .navbar-nav {
  height: 50px;
  font-size: 12px;
}
@media (max-width: 767px) {
  .ph-secondary-navbar > .ph-navbar-container .navbar-nav {
    height: unset;
  }
}
.ph-secondary-navbar > .ph-navbar-container .navbar-nav .active > a {
  background-color: transparent;
}
.ph-secondary-navbar > .ph-navbar-container .navbar-nav > li {
  height: 50px;
}
.ph-secondary-navbar > .ph-navbar-container .navbar-nav > li > a {
  height: 50px;
  cursor: pointer;
  text-align: center;
  padding: 15px;
  line-height: 20px;
  letter-spacing: 0.5px;
}
@media (max-width: 767px) {
  .ph-secondary-navbar > .ph-navbar-container .navbar-nav > li > a {
    text-align: left;
    padding: 5px;
  }
}
.ph-secondary-navbar > .ph-navbar-container .navbar-nav > li > button {
  margin: 8px 5px;
}
.ph-secondary-navbar > .ph-navbar-container .navbar-nav > li.active {
  font-weight: 600;
  pointer-events: none;
}
.ph-secondary-navbar > .ph-navbar-container .navbar-nav > li.active:hover {
  color: #333;
}
.ph-secondary-navbar > .ph-navbar-container .navbar-nav > li.active:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 10px solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.ph-nav-control {
  height: 50px;
}
.ph-nav-control > li {
  min-height: 30px;
  cursor: pointer;
}
.ph-nav-control > li > a {
  padding: 5px 20px 5px 20px;
}
@media (min-width: 768px) {
  .ph-navbar-container .navbar-nav.navbar-left > li {
    top: 0;
  }
  .navbar-nav {
    font-size: 13px;
  }
  .navbar-nav .ph-nav-control[type='text'] {
    width: 200px;
    padding: 10px;
    font-size: 12px;
  }
}
.companyDropdownContainer .open > a,
.companyDropdownContainer .open > a:hover {
  background-color: #008fc6;
}
.companyDropdown {
  height: 50px;
  padding: 0 15px;
  font-size: 13px;
  text-decoration: none !important;
  cursor: pointer;
  display: table;
  transition: all 0.25s ease-out;
}
.companyDropdown img {
  height: 34px;
  margin: 8px 10px 8px 0;
}
.companyDropdown:hover {
  background-color: #00a2e0;
}
.companyDropdown:focus {
  background-color: #008fc6;
}
.companyDropdownContainer ul {
  width: 250px;
  padding-top: 0;
  top: 47px;
}
.companyDropdownContainer ul li {
  font-size: 12px;
}
.companyDropdownContainer ul .panel-default {
  margin-bottom: 10px;
  background-color: #f4f4f4;
}
.companyDropdownContainer ul .panel-default.panel-noClick {
  pointer-events: none;
}
.companyDropdownContainer ul .panel-default.panel-noClick:hover {
  background-color: #f9f9f9;
}
.companyDropdownContainer ul .panel-default.panel-noClick:active {
  background-color: #f9f9f9;
}
.companyDropdownContainer ul .panel-default:hover {
  background-color: #eee;
}
.companyDropdownContainer ul .panel-default:active {
  background-color: #ddd;
}
.companyDropdownContainer ul .panel-default .panel-heading {
  background: none;
  position: relative;
  font-size: 14px;
  color: #333;
  word-break: break-all;
  font-weight: 600;
  padding: 20px 50px 20px 20px;
}
.companyDropdownContainer ul .panel-default .panel-heading i {
  position: absolute;
  font-size: 20px;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: #999;
}
.companyDropdownContainer ul .panel-default .panel-heading .trial-status {
  color: #999;
  padding-top: 5px;
}
.supportDropdownContainer .open > a,
.supportDropdownContainer .open > a:hover {
  background-color: #008fc6;
}
.supportDropdownContainer:hover .dropdown-menu {
  display: block;
}
.supportDropdownContainer .dropdown-menu {
  border-top-color: rgba(0, 0, 0, 0.15);
  width: 200px;
  padding: 10px 0;
  z-index: 1060;
  border-radius: 0 0 2px 2px !important;
}
.supportDropdownContainer ul {
  top: 47px;
}
.supportDropdownContainer ul li {
  font-size: 12px;
}
.supportDropdown {
  height: 50px;
  padding: 15px;
  font-size: 13px;
  text-decoration: none !important;
  cursor: pointer;
  display: table;
  transition: all 0.25s ease-out;
}
.supportDropdown:hover {
  background-color: #00a2e0;
}
.supportDropdown:focus {
  background-color: #008fc6;
}
.dropdown-menu .divider {
  pointer-events: none;
}
.dropdown-menu > li > a {
  padding: 5px 20px;
  min-height: 30px;
}
.dropdown-menu > li > a > .ph-newInd {
  margin: 9px 8px 0 0;
}
.ph-footer {
  height: 50px;
  padding: 4px 0;
  background-color: #ebebeb;
  display: -webkit-box;
  width: 100%;
  transition: all 0.25s;
}
.ph-footer img {
  width: 120px;
  display: block;
  margin: 0 auto;
}
.trial-status {
  font-size: 12px;
  font-weight: 600;
}
.trial-status > span {
  font-weight: 400;
}
.form-control {
  height: 34px;
  border-radius: 2px;
}
.form-control:focus {
  border-color: #9eccf1;
  border-width: 2px;
}
.search {
  padding-left: 10px;
  padding-right: 10px;
  top: 5px;
  position: relative;
  border: 1px solid #ddd;
  height: 34px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="number"],
.listSelector-search {
  height: 34px;
}
label {
  font-weight: normal;
}
@keyframes warnInput {
  0% {
    background-color: #fff;
  }
  50% {
    background-color: rgba(255, 214, 0, 0.3);
  }
  100% {
    background-color: #fff;
  }
}
@keyframes dangerInput {
  0% {
    background-color: #fff;
  }
  50% {
    background-color: rgba(178, 46, 46, 0.1);
  }
  100% {
    background-color: #fff;
  }
}
.popover {
  border-radius: 2px;
  border: none;
  padding: 0;
  max-width: 1000px;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
  font-family: "Open Sans";
}
.popover .arrow {
  display: none;
}
.popover .popover-inner .popover-content {
  padding: 0;
}
.uib-datepicker-popup {
  padding: 0 5px 5px 5px;
  background-color: #f4f4f4;
}
.uib-datepicker-popup .btn.active {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.uib-datepicker-popup .btn-info,
.uib-datepicker-popup .btn-info.btn-default {
  background-color: #00adef;
  border-color: #00adef;
  box-shadow: none;
}
.uib-datepicker-popup .btn-info:hover,
.uib-datepicker-popup .btn-info.btn-default:hover {
  background-color: #0088c0 !important;
  border-color: #0088c0 !important;
}
.uib-datepicker-popup .btn-info span,
.uib-datepicker-popup .btn-info.btn-default span {
  color: #fff;
}
.uib-datepicker-popup .btn-info .text-info::before,
.uib-datepicker-popup .btn-info.btn-default .text-info::before {
  background-color: #fff;
}
.uib-datepicker-popup .btn[disabled] {
  background-color: #f4f4f4;
  border: solid 2px #fff;
  color: #999;
  cursor: not-allowed;
}
.uib-datepicker-popup .btn-group .btn,
.uib-datepicker-popup .uib-datepicker-popup .btn-success {
  min-width: 90px;
  padding: 7px 0;
}
.uib-datepicker-popup .btn-primary {
  font-size: 12px;
  margin-left: 5px;
}
.uib-datepicker-popup .btn-default {
  font-size: 12px;
  background-color: #fff;
  border-color: #fff;
  border-width: 0;
  border-radius: 2px;
  padding: 10px 15px;
  height: 45px;
  transition: none;
}
.uib-datepicker-popup .btn-default:hover {
  background-color: #eee !important;
}
.uib-datepicker-popup .btn-default:active {
  background-color: #ddd !important;
}
.uib-datepicker-popup .btn-default.uib-left,
.uib-datepicker-popup .btn-default.uib-right {
  background-color: #f9f9f9;
  border: solid 1px #ddd;
  border-radius: 2px;
  margin-top: -20px;
  height: 34px;
  width: 34px;
  padding: 0;
}
.uib-datepicker-popup .btn-default .text-info {
  color: #00adef;
  top: -4px;
  position: relative;
}
.uib-datepicker-popup .btn-default .text-info::before {
  content: '';
  position: absolute;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  height: 4px;
  width: 4px;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #00adef;
}
.uib-datepicker-popup .text-center > em {
  display: none;
}
.uib-datepicker-popup > li {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 2px;
  border: 1px solid #ccc;
  margin-top: 5px;
}
.uib-datepicker-popup .uib-weeks td:first-child {
  display: none;
}
.uib-datepicker-popup .uib-daypicker table:first-child tr:nth-child(2) th:first-child {
  display: none;
}
.uib-datepicker-popup .uib-daypicker .pull-right {
  margin-left: -60px;
}
.uib-datepicker-popup .uib-daypicker tr {
  margin-bottom: 10px;
}
.uib-datepicker-popup .uib-datepicker div:first-child:focus {
  outline: 0 ;
}
.uib-datepicker-popup .uib-title {
  background-color: #f9f9f9;
  border-color: #ddd;
  border-width: 1px;
  max-width: 216px;
  margin-bottom: 20px;
  height: 34px;
  padding: 5px;
}
.uib-datepicker-popup .uib-button-bar {
  background-color: #f4f4f4;
  border: none;
  padding: 10px;
  height: 54px;
}
.uib-datepicker-popup .uib-button-bar button {
  height: 34px;
  border-radius: 2px !important;
  min-width: 100px;
}
.uib-datepicker-popup .uib-button-bar .btn-danger {
  display: none;
}
.ph-scrollNoHover {
  cursor: default !important;
}
.ph-scrollNoHover:hover,
.ph-scrollNoHover:active {
  background-color: #FFFFFF !important;
}
.ph-noScroll {
  overflow: visible !important;
}
.ph-scrollTable {
  margin-bottom: 15px;
}
.ph-scrollTable.ph-scrollNoAnimate .tableRow {
  transition: none !important;
}
.ph-scrollTable.noTopBorderRadius {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.ph-scrollTable.noBottomBorderRadius {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ph-scrollTable .tableHeaderRow > div,
.ph-scrollTable .tableHeaderRow > table-col-header,
.ph-scrollTable .tableRow > div,
.ph-scrollTable .tableFooterRow > div {
  text-align: left;
  float: left;
  padding: 0 15px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-scrollTable .tableHeaderRow > div.text-right,
.ph-scrollTable .tableHeaderRow > table-col-header.text-right,
.ph-scrollTable .tableRow > div.text-right,
.ph-scrollTable .tableFooterRow > div.text-right {
  text-align: right;
  justify-content: flex-end;
}
.ph-scrollTable .tableHeaderRow.emptyTable {
  height: 10px;
}
.ph-scrollTable .tableHeaderRow.emptyTable * {
  display: none;
}
.ph-scrollTable .tableHeaderRow {
  font-weight: 600;
}
.ph-scrollTable .tableHeaderRow,
.ph-scrollTable .tableFooterRow {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 51px;
  background-color: #f4f4f4;
  border: 1px solid #dddddd;
}
.ph-scrollTable .tableHeaderRow:not(.noCorners) {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.ph-scrollTable .tableFooterRow {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  border-top: none;
  font-weight: 700;
}
.ph-scrollTable .tableFooterRow.buttonFooterRow {
  height: 65px;
  padding: 15px 0;
}
.ph-scrollTable .tableFooterRow.buttonFooterRow > div {
  line-height: 34px;
  height: 34px;
  overflow: visible;
}
.ph-scrollTable > .scrollContainer {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 360px);
  border: solid 1px #ddd;
  border-top: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-height: 700px) {
  .ph-scrollTable > .scrollContainer {
    max-height: 300px !important;
  }
}
.ph-scrollTable > .scrollContainer > .rowContainer {
  width: 100%;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow {
  width: 100%;
  position: relative;
  height: 50px;
  min-height: 0;
  border-bottom: 1px solid #dddddd;
  cursor: pointer;
  background-color: #FFFFFF;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.25s ease-out, height 0.25s ease-out;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow.ng-enter,
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow.ng-leave.ng-leave-active {
  opacity: 0;
  height: 0;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow.ng-leave,
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow.ng-enter.ng-enter-active {
  opacity: 1;
  height: 50px;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow:last-child {
  border-bottom: none;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow > div {
  min-height: 50px;
  position: relative;
  display: flex;
  align-items: center;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow > div.textLinkCol {
  color: #00adef;
  position: relative;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow > div.textLinkCol span {
  cursor: pointer;
  position: relative;
  margin-bottom: 0;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow > div.textLinkCol span:hover + .ion-ios-arrow-right {
  left: 7px;
  opacity: 1;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow > div.textLinkCol .ion-ios-arrow-right {
  top: 1px;
  left: 0;
  opacity: 0;
  z-index: 99;
  transition: all 0.25s ease-out;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow > div > input {
  display: table-cell;
  vertical-align: middle;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow > div > .cell-colour-span {
  height: 24px;
  width: 5px;
  float: left;
  border-radius: 5px;
  margin: 13px 10px 13px 0;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow .sm-close {
  top: 24px;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .emptyTableRow {
  width: 100%;
  height: 140px;
  line-height: 140px;
  background-color: #fcfcfc;
  text-align: center;
  font-size: 14px;
  color: #999;
  font-weight: 200;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .emptyTableRow.addToEmptyTable {
  height: 130px;
  position: relative;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .emptyTableRow.addToEmptyTable > *:first-child {
  height: 34px;
  display: inline-block;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .emptyTableRow.addToEmptyTable > span:nth-child(2) {
  height: 30px;
  line-height: 30px;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow:hover {
  background-color: #fafafa;
}
.ph-scrollTable > .scrollContainer > .rowContainer > .tableRow:active {
  background-color: #eee;
}
.ph-stat {
  position: relative;
  height: 62px;
  float: left;
  padding: 0 20px;
  display: block;
}
.ph-stat.ph-statRight .statTitle,
.ph-stat.ph-statRight .statValue {
  text-align: right;
}
.ph-stat.ph-statHidden .statTitle,
.ph-stat.ph-statHidden .statValue {
  opacity: 0;
  pointer-events: none !important;
}
.ph-stat.ph-statMini {
  height: 40px;
}
.ph-stat .statTitle,
.ph-stat .statSubValue {
  height: 18px;
  line-height: 18px;
  color: #999;
  margin-bottom: 5px;
}
.ph-stat .statTitle {
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ph-stat .statTitle .ph-required-icon {
  color: #d9534f;
  font-size: 9px;
  margin-left: 5px;
  position: relative;
  top: -1px;
}
.ph-stat .statSubValue {
  font-size: 12px;
}
.ph-stat .statValue {
  font-size: 18px;
  line-height: 34px;
  height: 35px;
  font-weight: 600;
  padding-left: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ph-stat .statValue.earningsTotal {
  text-overflow: unset;
  white-space: unset;
  overflow: unset;
}
.ph-stat .statValue.earningsTotal > span {
  float: right;
  margin-left: 10px;
  line-height: 1;
  margin-top: 8px;
}
.ph-stat .statValue.earningsTotal > stat-difference {
  clear: both;
  margin-right: 0;
}
.ph-stat .statValue .ph-dateFormat {
  color: #999;
  font-weight: 200;
}
.ph-stat .statValue.smallStat {
  font-size: 12px;
  font-weight: 500;
}
.ph-stat .statValue.bigStat {
  font-size: 26px;
  margin-top: 8px;
  font-weight: 600;
}
.ph-stat .statValue.hugeStat {
  font-size: 34px;
  font-weight: 700;
}
.ph-stat .statValue.hugeStat .statUnit {
  font-size: 20px;
  font-weight: 500;
}
.ph-stat .statValue .statUnit {
  color: #999;
  font-size: 14px;
  font-weight: 200;
}
.ph-stat .statValue.collapseTitle {
  position: relative;
  float: left;
  max-width: 100%;
  padding-right: 25px;
}
.ph-stat .statValue > i {
  margin-right: 5px;
  top: 1px;
}
.ph-stat .statValue > i.collapseArrow {
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
}
.ph-stat .statInput {
  height: 34px;
}
.ph-statRow {
  width: 100%;
  padding: 20px 15px 15px;
  position: relative;
  overflow: auto;
}
.ph-statRow.statRowLarge {
  padding: 30px 10px 20px 10px;
}
.ph-statRow.statRowMini {
  padding: 15px 0;
}
.ph-statRow.statRowMini .ph-stat {
  height: 52px;
}
.ph-statRow.statRowMini .ph-stat .statTitle {
  height: 22px;
  line-height: 22px;
  margin: 0;
}
.ph-statRow.statRowMini .ph-stat .statValue {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
.ph-statRow.statRowMini .ph-stat .statValue .statUnit {
  font-size: 12px;
}
.ph-statRow.statRowWithTitle {
  padding-top: 50px;
}
.ph-statRow.statRowWithTitle .ph-statRowTitle {
  color: #333;
  font-size: 12px;
  left: 20px;
  top: -30px;
  position: absolute;
  font-weight: 600;
}
.ph-statRow .ph-payMenu {
  position: absolute;
  right: 30px;
  top: 30px;
}
.ph-contentContainer {
  width: 100%;
  overflow: visible;
}
.ph-contentContainer.contentContainerBorder {
  border: 1px solid #DDDDDD;
  border-radius: 2px;
}
.ph-contentContainer.contentContainerBorder .ph-contentHeader {
  border-top: none;
  border-left: none;
  border-right: none;
}
.ph-contentContainer.contentContainerBorder .ph-content {
  border-left: none;
  border-right: none;
}
.ph-contentContainer.contentContainerBorder .ph-contentFooter {
  border-bottom: none;
  border-left: none;
  border-right: none;
}
.ph-contentContainer.selectable {
  cursor: pointer;
}
.ph-contentContainer.selectable:hover {
  color: #000;
}
.ph-contentContainer > .ph-contentHeader {
  position: relative;
  height: 50px;
  width: 100%;
  background-color: #f4f4f4;
  border: 1px solid #dddddd;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  padding: 7px 10px;
}
.ph-contentContainer > .ph-contentHeader.headerLight {
  background-color: #FFFFFF;
}
.ph-contentContainer > .ph-contentHeader.headerLight .lg-close {
  top: 24px;
}
.ph-contentContainer > .ph-contentHeader > .collapsePayButton {
  float: left;
  height: 49px;
  width: 34px;
  padding: 0;
  border-left: none;
  border-top: none;
  margin-top: -7px;
  margin-left: -10px;
}
.ph-contentContainer > .ph-contentHeader > .collapsePayButton .ion {
  font-size: 12px;
}
.ph-contentContainer > .ph-contentHeader > .headerName {
  font-weight: 600;
  font-size: 12px;
  padding: 0 10px;
  float: left;
  line-height: 34px;
  height: 34px;
}
.ph-contentContainer > .ph-content {
  background-color: #FFFFFF;
  width: 100%;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.ph-contentContainer > .ph-content.padded {
  padding: 25px;
}
.ph-contentContainer > .ph-content > .innerHeader {
  width: 100%;
  height: 30px;
  font-size: 16px;
  color: #333;
  line-height: 30px;
  margin-bottom: 10px;
}
.ph-contentContainer > .ph-contentFooter {
  width: 100%;
  height: 75px;
  padding: 20px;
  background-color: #efefef;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border: 1px solid #ddd;
}
.ph-contentContainer.animate .ph-content {
  transition: all 0.25s ease-out;
}
.ph-toolbar {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 2px;
}
.ph-toolbar h2 {
  margin: 0;
}
.ph-toolbar .ph-search {
  float: right;
}
.ph-toolbar super-search {
  margin-right: 7px;
  float: right;
}
.ph-toolbar .ph-save,
.ph-toolbar .ph-downloaded {
  height: 34px;
  width: 34px;
  margin-right: 7px;
}
.ph-toolbar .ph-downloaded {
  padding: 3px;
}
.ph-toolbar .tableHeading {
  width: 100%;
  height: 34px;
  line-height: 50px;
  font-size: 16px;
}
.ph-toolbar > button {
  margin-left: 7px;
  margin-right: 0;
  min-width: 100px;
}
.ph-toolbar > button:first-child {
  margin-left: 0;
}
.ph-toolbar > * {
  min-height: 34px;
  float: left;
}
.ph-toolbar > .pull-left {
  float: left;
}
.ph-toolbar > .pull-right {
  float: right;
}
.ph-toolbar > .toolbarItem {
  border-radius: 2px;
  padding: 0 15px;
  text-align: left;
  line-height: 32px;
  width: 250px;
  background-color: #fff;
}
.ph-toolbar > .toolbarItem > div > div {
  float: right;
  font-weight: bold;
}
.ph-toolbar > .toolbarText {
  font-size: 22px;
  font-weight: normal;
  margin: 0 20px 0 0;
  line-height: 34px;
  max-width: 50%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ph-toolbar > .toolbarText i {
  margin-right: 7px;
  margin-left: 2px;
}
.ph-toolbar > .toolbarText i.ion-ios-checkmark-empty {
  top: 4px;
}
.ph-toolbar > .toolbarText .projectColour {
  top: 4px;
}
.ph-toolbar > .toolbarText .lightText {
  font-weight: 200;
}
.ph-toolbar .ph-badge {
  top: 6px;
  min-height: unset;
  min-width: 70px;
}
.ph-toolbar:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.ph-toolbar.filter {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #DDDDDD;
  background-color: #f9f9f9;
  padding: 25px;
  border-radius: 2px;
  display: flex;
}
.ph-toolbar.filter > .toolbar-left {
  width: 350px;
  margin-right: auto;
}
.ph-toolbar.filter > .toolbar-right {
  display: flex;
  width: calc(100% - 350px);
  margin-left: auto;
}
.ph-toolbar.filter > .toolbar-right > * {
  margin-left: 7px;
}
.ph-toolbar.filter > .toolbar-right > *:first-child {
  margin-left: auto;
}
.ph-toolbar.filter > .toolbar-right list-selector {
  max-width: 250px;
  width: 100%;
}
.ph-toolbar.filter .toggle {
  width: 34px;
  height: 86px;
  background-color: #FFFFFF;
  top: -1px;
  right: -1px;
  bottom: -1px;
  position: absolute;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
}
.ph-toolbar.filter .toggle span {
  font-size: 12px;
}
.ph-toolbar.hasToggle {
  padding-right: 55px;
}
.ph-tabContainer {
  width: 100%;
  height: 55px;
  position: relative;
}
.ph-tabContainer.bottomBorder .ph-tabBar {
  border-bottom: 1px solid #dddddd;
}
.ph-tabContainer .ph-tabList {
  height: 45px;
  width: 100%;
  margin-bottom: -1px;
  z-index: 2;
}
.ph-tabContainer .ph-tabList .ph-tab {
  padding: 0 25px;
  height: 45px;
  line-height: 43px;
  border: 1px solid #dddddd;
  border-radius: 2px 2px 0 0;
  background-color: #ffffff;
  float: left;
  overflow: hidden;
  margin-right: 1px;
  cursor: pointer;
  color: #00adef;
}
.ph-tabContainer .ph-tabList .ph-tab a {
  color: #00adef;
}
.ph-tabContainer .ph-tabList .ph-tab a > .ph-tab-icon {
  top: 2px;
  left: -5px;
}
.ph-tabContainer .ph-tabList .ph-tab:hover {
  background-color: #fafafa;
}
.ph-tabContainer .ph-tabList .ph-tab:active {
  background-color: #eee;
}
.ph-tabContainer .ph-tabList .ph-tab *,
.ph-tabContainer .ph-tabList .ph-tab *:hover {
  text-decoration: none;
}
.ph-tabContainer .ph-tabList .ph-tabSelected {
  background-color: #efefef;
  border-bottom: 1px solid #efefef;
  color: #333;
}
.ph-tabContainer .ph-tabList .ph-tabSelected a {
  color: #333;
}
.ph-tabContainer .ph-tabList .ph-tabSelected:hover,
.ph-tabContainer .ph-tabList .ph-tabSelected:active {
  background-color: #efefef;
}
.ph-tabContainer .ph-tabList .disabledUserActionTab:hover {
  background-color: white;
}
.ph-tabContainer .ph-tabList .disabledUserActionTab > .disabledUserActionTab-outer {
  color: #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
}
.ph-tabContainer .ph-tabList .disabledUserActionTab > .disabledUserActionTab-outer .disabledUserActionTab-inner {
  position: relative;
}
.ph-tabContainer .ph-tabBar {
  z-index: 1;
  width: 100%;
  height: 11px;
  border: 1px solid #dddddd;
  background-color: #efefef;
}
.ph-search {
  float: right;
  width: 40%;
  max-width: 250px;
  position: relative;
}
.ph-search .ion-ios-search-strong {
  position: absolute;
  font-size: 14px;
  left: 12px;
  top: 50%;
  color: #ccc;
  transform: translateY(-50%);
}
.ph-search input {
  width: 100%;
  padding-left: 30px;
}
.ph-search .sm-close {
  right: 7px !important;
}
.ph-search .sm-close:hover {
  right: 4px !important;
}
.ph-progressArrowContainer {
  color: #00adef;
  cursor: pointer;
  position: relative;
  display: inline-block;
}
.ph-progressArrowContainer > span:first-child:hover + .ph-progressArrow {
  opacity: 1;
  right: -13px;
}
.ph-progressArrowContainer > .ph-progressArrow {
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0;
  z-index: 99;
  height: 26px;
  line-height: 26px;
  color: #00adef;
  transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
}
.ph-hugeFooter {
  background-color: #efefef;
  margin-bottom: 20px;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
}
.ph-hugeFooter .ph-hugeFooterBtnRow {
  width: 100%;
  height: 64px;
  padding: 0 30px 30px;
}
.ph-hugeFooter .ph-hugeFooterBtnRow list-drop-down {
  margin-left: 7px;
}
.ph-hugeFooter .ph-hugeFooterBtnRow .btn-success {
  min-width: 100px;
}
.ph-contentFooter.ph-hugeFooter {
  padding: 0;
  margin-bottom: 0;
  height: 176px;
}
.ph-contentFooter.ph-hugeFooter .ph-hugeFooterBtnRow {
  width: 100%;
  height: 54px;
  padding: 0 30px 20px;
}
.ph-stepTracker {
  width: 100%;
  display: flex;
  padding: 0 0 10px 0;
  border-top: solid 1px #f4f4f4;
}
.ph-stepTracker .ph-step {
  width: calc(100% / 3);
  position: relative;
  margin-right: 20px;
  transition: all 0.25s ease-out;
}
.ph-stepTracker .ph-step:after {
  opacity: 0;
  transition: all 0.25s ease-out;
}
.ph-stepTracker .ph-step > p {
  font-size: 14px;
  line-height: 30px;
  color: #ccc;
  text-align: left;
  transition: all 0.25s;
  margin: 25px 0 0 0;
}
.ph-stepTracker .ph-step > p > .ph-step-tick {
  position: absolute;
  left: 0;
  top: 24px;
  width: 30px;
}
.ph-stepTracker .ph-step.ph-stepCurrent > p {
  color: #333;
  font-weight: 600;
}
.ph-stepTracker .ph-step.ph-stepComplete {
  transition: all 0.25s ease-out;
}
.ph-stepTracker .ph-step.ph-stepComplete > p {
  color: #5eb22e;
  padding-left: 38px;
  font-weight: 600;
}
.ph-stepTracker .ph-step.ph-stepComplete.ph-stepCurrent > p {
  color: #5eb22e;
}
.ph-stepTracker .ph-step:last-child {
  margin-right: 0;
}
.ph-step-progressBar {
  display: table;
  width: 100%;
  height: 4px;
  background-color: #fbfbfb;
  border-radius: 2px;
  margin-bottom: 30px;
  position: relative;
}
.ph-step-progressBar > .bar {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2px;
  height: 4px;
  width: 0;
  background: #eee;
  transition: width 0.25s ease;
}
.ph-swipe-outerContainer {
  position: relative;
  overflow-x: hidden;
}
.ph-swipe-outerContainer .ph-swipe-innerContainer {
  height: 100%;
  transition: margin-left 0.35s ease-out;
}
.ph-swipe-outerContainer .ph-swipe-innerContainer .ph-swipeItem {
  overflow: hidden;
  display: inline-block;
  float: left;
  min-height: 100%;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease-out, visibility 0.35s ease-out;
}
.ph-swipe-outerContainer .ph-swipe-innerContainer .ph-swipeItem.ph-swipeHidden {
  opacity: 0;
  visibility: hidden;
}
input.ph-inputErr-input {
  border-color: #b22e2e !important;
  animation-name: dangerInput;
  animation-duration: 1s;
}
input.ph-inputErr-input:focus {
  border-width: 1px;
}
input.warn {
  animation-name: warnInput;
  animation-duration: 2s;
}
input-date-picker.ph-inputErr-input button,
input-date-picker.ph-inputErr-input input {
  border-color: #b22e2e !important;
}
.input-group.ph-inputErr-input input,
.input-group.ph-inputErr-input span.input-group-addon {
  border-color: #b22e2e !important;
  animation-name: dangerInput;
  animation-duration: 1s;
}
list-drop-down.ph-inputErr-input button {
  border-color: #b22e2e !important;
  animation-name: dangerInput;
  animation-duration: 1s;
}
list-selector.ph-inputErr-input input {
  border-color: #b22e2e !important;
  animation-name: dangerInput;
  animation-duration: 1s;
}
.ph-inputErr-message {
  color: #b22e2e;
  display: block;
  line-height: 34px;
}
.ph-inputErr-message > i {
  top: 2px;
  margin-right: 3px;
  animation-name: notifyIcon;
  animation-duration: 0.5s;
}
.ph-card {
  background-color: #fff;
  padding: 20px 50px 20px 60px;
  position: relative;
  border-bottom: solid 1px #ddd;
  cursor: default;
}
.ph-card:active {
  background-color: #eee;
}
.ph-card i,
.ph-card img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 18px;
  color: #ccc;
  font-size: 38px;
}
.ph-card img {
  width: 25px;
}
.ph-card .ion-ios-clock-outline {
  font-size: 25px;
  left: 20px;
}
.ph-card .ion-record {
  font-size: 10px;
  color: #00adef;
  left: 26px;
}
.ph-card .ion-alert-circled {
  left: 21px;
  font-size: 26px;
}
.ph-card .ion-ios-arrow-right {
  right: 25px;
  left: auto;
}
.ph-card .ion-ios-plus-outline {
  font-size: 30px;
  left: 19px;
}
.ph-card .ion-ios-bolt-outline {
  left: 22px;
}
.ph-card h4 {
  color: #00adef;
  font-size: 14px;
  text-align: left;
  margin: 0;
}
.ph-card h4 span {
  color: #999999;
  float: right;
  font-size: 10px;
}
.ph-card p {
  line-height: 1.5;
  margin-top: 5px;
  margin-bottom: 0;
}
.ph-card.actionCard {
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  margin: 15px;
  border: none;
  cursor: pointer;
}
.ph-card.actionCard:hover {
  background-color: #fafafa;
}
.ph-card.actionCard:active {
  background-color: #eee;
}
.ph-toggle {
  float: left;
  cursor: pointer;
}
.ph-toggle .ph-toggle-track {
  position: relative;
  background: #f4f4f4;
  border: solid 1px #ddd;
  height: 10px;
  width: 25px;
  border-radius: 20px;
  transition: all 0.25s;
}
.ph-toggle .ph-toggle-track .ph-toggle-icon {
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: solid 1px #ddd;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: all 0.25s ease;
}
.ph-toggle.ph-toggled .ph-toggle-track {
  background: #5eb22e !important;
  border: solid 1px rgba(94, 178, 46, 0.2) !important;
}
.ph-toggle.ph-toggled .ph-toggle-track .ph-toggle-icon {
  background: #fff;
  border: solid 1px #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  left: 14px;
}
.ph-warningsContainer,
.ph-errorsContainer {
  position: relative;
  width: 100%;
  padding: 20px 0 0 20px;
  border-radius: 2px;
  margin-bottom: 10px;
  transition: all 0.25s;
}
.ph-warningsContainer > span,
.ph-errorsContainer > span {
  position: absolute;
  right: 25px;
  top: 21px;
  cursor: pointer;
  color: #00adef;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  transition: top 0.25s;
}
.ph-warningsContainer .ph-warningsHeader,
.ph-errorsContainer .ph-warningsHeader,
.ph-warningsContainer .ph-errorsHeader,
.ph-errorsContainer .ph-errorsHeader {
  color: #333;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 15px;
  position: relative;
}
.ph-warningsContainer .ph-warningsHeader .ion-alert-circled,
.ph-errorsContainer .ph-warningsHeader .ion-alert-circled,
.ph-warningsContainer .ph-errorsHeader .ion-alert-circled,
.ph-errorsContainer .ph-errorsHeader .ion-alert-circled {
  margin-right: 7px;
  top: 1px;
  transition: font-size 0.25s;
}
.ph-warningsContainer ul.ph-warningsList,
.ph-errorsContainer ul.ph-warningsList,
.ph-warningsContainer ul.ph-errorsList,
.ph-errorsContainer ul.ph-errorsList {
  font-size: 12px;
  padding: 5px 15px 10px 40px;
  margin: 0;
  overflow: overlay;
  max-height: 200px;
}
.ph-warningsContainer ul.ph-warningsList li.ph-warningsListItem,
.ph-errorsContainer ul.ph-warningsList li.ph-warningsListItem,
.ph-warningsContainer ul.ph-errorsList li.ph-warningsListItem,
.ph-errorsContainer ul.ph-errorsList li.ph-warningsListItem,
.ph-warningsContainer ul.ph-warningsList li.ph-errorsListItem,
.ph-errorsContainer ul.ph-warningsList li.ph-errorsListItem,
.ph-warningsContainer ul.ph-errorsList li.ph-errorsListItem,
.ph-errorsContainer ul.ph-errorsList li.ph-errorsListItem {
  padding-right: 60px;
  margin-bottom: 15px;
}
.ph-warningsContainer {
  background-color: rgba(241, 202, 3, 0.2);
  border: solid 1px rgba(241, 202, 3, 0.5);
}
.ph-errorsContainer {
  background-color: rgba(178, 46, 46, 0.2);
  border: solid 1px rgba(178, 46, 46, 0.5);
}
.ph-warningsSupportLink {
  font-size: 10px;
}
.ph-creditCard {
  padding: 5px 25px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border: solid 1px #eee;
  border-radius: 4px;
}
.ph-creditCard > div {
  float: left;
  width: 100%;
  height: 70px;
}
.ph-creditCard > div:first-child {
  display: flex;
  align-items: center;
}
.ph-creditCard .ph-cardDetails > img {
  width: 35px;
  margin-right: 20px;
}
.ph-creditCard .ph-cardDetails > div {
  width: calc(100% - 55px);
}
.ph-creditCard .ph-cardDetails h4 {
  margin-top: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ph-creditCard .ph-cardDetails .ph-cardName {
  line-height: 72px;
  font-size: 12px;
  color: #999;
  text-align: right;
}
.ph-creditCard .ph-cardDetails .ph-cardNumber {
  font-size: 12px;
  color: #999;
}
.ph-creditCard .ph-cardDetails .ph-cardNumber > span {
  color: #333;
}
.ph-whatsThis {
  cursor: pointer;
  height: 14px;
  width: 14px;
  text-align: center;
  line-height: 14px;
  font-size: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}
.ph-whatsThis:hover {
  opacity: 0.8;
}
.ph-whatsThis:active {
  opacity: 0.5;
}
.ph-whatsThisContainer {
  height: 14px;
  width: 14px;
  position: absolute;
}
.ph-whatsThisContainer.settingsLabel {
  position: relative;
  display: inline-block;
  top: 2px;
  margin-left: 4px;
}
.ph-whatsThisContainer.infoIcon {
  position: relative;
  display: inline-block;
  top: 19px;
  margin-left: 8px;
}
.ph-whatsThisContainer .ph-whatsThis {
  top: 0;
  left: 0;
  transform: none;
}
.ph-whatsThisContainer .ion-alert-circled {
  font-size: 20px;
  top: -3px;
}
.btn {
  position: relative;
  font-size: 12px;
  border-radius: 2px;
  height: 34px;
  transition: background-color ease 0.25s, border ease 0.25s, color ease 0.25s, box-shadow ease 0.25s;
}
.btn.ng-hide.ng-hide-animate,
.btn.ng-leave {
  display: none;
}
.btn:focus {
  outline: 0 !important;
}
.btn.transparent {
  background: transparent;
}
.btn.transparent:active,
.btn.transparent:hover,
.btn.transparent:focus {
  background: transparent;
}
button {
  height: 34px;
  line-height: 20px;
  border-radius: 2px;
}
button.sm {
  font-size: 18px;
  min-width: 34px !important;
  padding: 0;
  margin: 0;
}
button.xs {
  min-width: 20px !important;
  height: 20px;
  padding: 0;
  margin: 0;
}
button.xs .ion {
  font-size: 10px;
}
button.xs .ion.ion-edit {
  top: -1px;
  color: #aaa;
}
button.xs .ion.ion-ios-checkmark-empty {
  top: -2px;
}
button.xs .ion.ion-ios-checkmark-empty:before {
  font-size: 22px;
}
button.ion {
  font-size: 16px;
}
button > i {
  font-size: 16px;
}
button > i.glyphicon {
  font-size: 12px;
}
div .btn[disabled],
ul .btn[disabled] {
  background-color: #f4f4f4;
  border-color: #ccc;
  color: #999;
  cursor: not-allowed;
}
div .btn[disabled]:hover,
ul .btn[disabled]:hover {
  background-color: #f4f4f4;
  border-color: #ccc;
  color: #999;
}
a.supportLink {
  font-weight: 400;
}
a.supportLink.offset {
  display: block;
  margin-top: 20px;
}
a.supportLink.inCol {
  display: block;
  margin-top: 5px;
}
a.supportLink > i {
  top: 0;
  margin-left: 3px;
}
a,
.btn-link {
  color: #00adef;
}
a:hover,
.btn-link:hover {
  color: #008fb7;
}
a:focus,
.btn-link:focus {
  color: #006e96;
  outline: 0;
}
a.danger,
.btn-link.danger {
  color: #d9534f;
}
a.danger:hover,
.btn-link.danger:hover {
  color: #b22e2e;
}
a.danger:focus,
.btn-link.danger:focus {
  color: #a32f2f;
}
a.grey,
.btn-link.grey {
  color: #999;
}
a.grey:hover,
.btn-link.grey:hover {
  color: #999;
}
a.grey:focus,
.btn-link.grey:focus {
  color: #999;
}
a.btn-xero-fix,
.btn-link.btn-xero-fix {
  padding: 0;
  border: 0;
  line-height: 1;
  top: -1px;
}
.btn-link-grey {
  background-color: #FFFFFF !important;
  border: none !important;
  color: #999 !important;
}
.btn-default {
  background-color: #FFF;
}
.btn-default:hover {
  background-color: #f4f4f4;
}
.btn-default:focus {
  background-color: #FFF;
  border-color: #ddd;
}
.btn-default.small {
  width: 34px;
  padding: 0;
}
.btn-default.small > i {
  color: #777;
}
.btn-grey {
  background-color: #efefef;
  border: none;
}
.btn-grey:hover {
  background-color: #e5e5e5;
  border: none;
}
.btn-grey:focus {
  background-color: #DDDDDD;
  border: none;
}
.btn-grey.small {
  width: 34px;
  padding: 0;
}
.btn-grey.small > i {
  color: #777;
}
.btn-success,
.btn-default,
.btn-danger,
.btn-archive {
  padding: 6px 20px;
}
.btn-success {
  background-color: #5eb22e;
  border: none;
  color: #fff;
}
.btn-success:hover {
  background-color: #549e29;
  border: none;
  color: #fff;
}
.btn-success:focus {
  background-color: #5eb22e;
  border: none;
  color: #fff;
}
.btn-filter {
  background-color: rgba(94, 178, 46, 0.08);
  border-color: #5eb22e;
  color: #5eb22e;
}
.btn-filter:hover {
  background-color: rgba(85, 158, 41, 0.1);
  border-color: #5eb22e;
  color: #549e29;
}
.btn-filter:focus {
  background-color: rgba(94, 178, 46, 0.08);
  border-color: #5eb22e;
  color: #5eb22e;
}
.btn-archive {
  min-width: 110px;
  background-color: #fff;
  border: solid 1px #ddd;
  color: #333;
}
.btn-archive .ion-ios-box-outline {
  top: 1px;
  margin-right: 4px;
  color: #bbb;
}
.btn-archive:hover {
  background-color: #ddd;
  border: solid 1px #ccc;
}
.btn-archive:focus {
  background-color: #fff;
  border: solid 1px #ddd;
  color: #333;
}
.btn-restore {
  background-color: #fff;
  border: solid 1px #ddd;
  color: #333;
  min-width: 100px;
  padding: 6px 20px;
}
.btn-restore:hover {
  background-color: #5eb22e;
  border: solid 1px #5eb22e;
  color: #fff;
}
.btn-restore:focus {
  background-color: #fff;
  border: solid 1px #ddd;
  color: #333;
}
.btn-danger {
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0);
  border: solid 1px #ccc;
  color: #333;
}
.btn-danger:hover {
  background-color: #d9534f;
  border-color: #d9534f;
  color: #fff;
}
.btn-danger:hover .ion {
  color: #fff;
}
.btn-danger:focus .ion {
  color: #fff;
}
.btn-danger-sm {
  padding: 0;
  width: 34px;
  background-color: rgba(0, 0, 0, 0);
  border: solid 1px #ccc;
}
.btn-danger-sm:hover {
  background-color: #d9534f;
  border-color: #d9534f;
  color: #fff;
}
.btn-danger .ion {
  font-size: 13px;
  color: #999;
  margin-right: 5px;
  transition: all 0.25s;
}
.btn-sm .btn-danger {
  font-size: 12px;
}
.btn-dropdown {
  padding: 6px 10px 6px 15px;
  text-align: left;
}
.btn-options {
  background-color: #fff;
  width: 34px;
  padding: 0 !important;
}
.btn-options i {
  left: 10px;
  top: 2px;
}
.btn-options:focus {
  background-color: #fff;
  border-color: #dcdcdc;
}
.btn-edit-sm {
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
}
.btn-edit-sm > i {
  font-size: 14px;
  color: #aaa;
}
.btn-edit-sm:hover {
  background-color: #fafafa;
}
.btn-edit-sm:active {
  background-color: #eee;
}
i {
  position: relative;
}
@keyframes notifyIcon {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(1.2);
  }
  66% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
i.notify {
  animation-name: notifyIcon;
  animation-duration: 0.5s;
}
i.sm-icon {
  font-size: 16px;
}
i.sm-icon.ion-ios-checkmark-empty::before {
  font-size: 22px;
}
i.md-icon {
  font-size: 22px;
}
i.md-icon.ion-ios-checkmark-empty::before {
  font-size: 30px;
}
i.lg-icon {
  font-size: 30px;
}
i.lg-icon.ion-ios-checkmark-empty::before {
  font-size: 38px;
}
i.success {
  color: #5eb22e;
}
i.primary {
  color: #00adef;
}
i.passive {
  color: #bbb;
}
i.warning {
  color: #f1ca03;
}
i.danger {
  color: #b22e2e;
}
i.ion-ios-close-empty {
  cursor: pointer;
  border-radius: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: content-box;
  transition: all 0.25s ease-out;
}
i.ion-ios-close-empty:before {
  top: calc(50% + 1px);
  left: calc(50% + 0.5px);
  transform: translate(-50%, -50%);
  position: absolute;
}
i.ion-ios-close-empty.sm-close {
  font-size: 20px;
  padding: 5px;
  height: 10px;
  width: 10px;
  right: 11px;
}
i.ion-ios-close-empty.sm-close:hover {
  padding: 8px;
  right: 8px;
}
i.ion-ios-close-empty.lg-close {
  font-size: 30px;
  padding: 5px;
  height: 20px;
  width: 20px;
  right: 15px;
}
i.ion-ios-close-empty.lg-close:hover {
  padding: 8px;
  right: 12px;
}
i.ion-ios-close-empty:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
i.ion-ios-close-empty:active {
  background-color: rgba(0, 0, 0, 0.3);
}
.glyphicon-calendar {
  color: #777;
  font-size: 12px;
  font-weight: normal !important;
}
.iconHolder {
  display: inline-flex;
  align-items: center;
}
:root {
  --ph-color-blue: #00adef;
  --ph-color-primary: #337ab7;
  --ph-color-success: #5eb22e;
  --ph-color-danger: #d9534f;
  --ph-color-yellow: #fdd835;
  --ph-color-grey: #ccc;
  --ph-color-grey-dark: #999;
  --ph-color-grey-very-dark: #777;
  --ph-color-grey-light: #efefef;
  --ph-color-grey-very-light: #fafafa;
  --ph-color-dark: #333;
  --ph-color-black: #000000;
  --ph-color-white: #ffffff;
  --ph-color-border: #dedede;
  --ph-color-border-light: #f2f2f2;
  --ph-error-background: #b22e2ebf;
  --ph-error-border: #b22e2ebf;
  --ph-info-background: #00adef1a;
  --ph-info-border: #00adef80;
  --ph-warning-background: #f1ca031a;
  --ph-warning-border: #f1ca0380;
  --ph-gradient-blue: linear-gradient(to bottom right, #006b7f, #009bd6);
  --ph-border: 1px solid var(--ph-color-border);
  --ph-border-light: 1px solid var(--ph-color-border-light);
  --ph-border-radius: 3px;
  --ph-transition: 0.2s ease-out;
  --ph-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.05);
  --ph-inset-card-box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.07);
}
.ph-publicHolidayLabel {
  color: #999999;
  position: relative;
  top: -5px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 10px;
  font-weight: 400;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.ph-publicHolidayLabel.employeeView {
  top: -15px;
}
.ph-publicHolidayLabel.publicHolidayToday {
  color: #00adef;
}
.form-control {
  transition: none;
}
.ph-support-link {
  position: relative;
  font-size: 18px;
  float: left;
  display: flex;
  align-items: center;
  height: 34px;
}
.ph-support-link img {
  width: 14px;
  height: 14px;
}
@media (min-width: 752px) {
  .modal-mediumLarge .modal-dialog {
    width: 750px !important;
  }
}
img.app-splash-logo {
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.loadingIcon.app-splash-spinner {
  top: auto !important;
  bottom: 100px !important;
}
.app-footer {
  display: block;
  transition: all 0.25s;
  margin: 10px auto 30px auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.app-footer .app-footer-fromFlexitime {
  width: 90%;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-footer .app-footer-fromFlexitime.-cursor {
  cursor: pointer;
}
.app-footer .app-footer-fromFlexitime > img {
  max-width: 130px;
  margin: 0 7px;
}
.ph-segmentClockInfo {
  text-align: left;
  height: 40px;
}
.ph-segmentClockInfo.-infoLight > span {
  color: #999;
}
.ph-segmentClockInfo.-infoLight b.-clockTime,
.ph-segmentClockInfo.-infoLight b.-clockLocation {
  font-weight: 500;
  color: #333;
}
.ph-segmentClockInfo > div {
  height: 20px;
}
.ph-segmentClockInfo > div > * {
  height: 20px;
  line-height: 20px;
}
.ph-segmentClockInfo > div > span {
  float: left;
  min-width: 80px;
}
.ph-segmentClockInfo > div b.-clockTime {
  float: left;
  min-width: 60px;
}
.ph-segmentClockInfo > div b.-clockLocation {
  margin-left: 5px;
}
.modal-row .addFilter-type {
  float: left;
  border-radius: 2px;
  height: 44px;
  padding: 0 10px;
  margin-right: 0;
  width: 100%;
}
.modal-row .addFilter-type > div {
  height: 36px;
  line-height: 23px;
  background-color: #fff;
  border: 1px solid #efefef;
  border-radius: 2px;
  cursor: pointer;
  padding: 5px 10px;
  float: left;
  width: 110px;
  transition: all 0.25s ease;
}
.modal-row .addFilter-type > div > div {
  float: left;
}
.modal-row .addFilter-type > div radio-button {
  float: right;
  margin-top: 3px;
}
.modal-row .addFilter-type > div .addFilter-checkBox {
  float: right;
}
.modal-row .addFilter-type > div .addFilter-checkBox button {
  width: 16px !important;
  height: 16px !important;
  padding: 0px !important;
  top: -1px;
}
.modal-row .addFilter-type > div:hover {
  transition: all 0.25s ease;
  background-color: #fafafa;
}
.modal-row .addFilter-type > div:last-child {
  float: right;
  width: 130px;
}
.modal-row .addFilter-type > div:not(:last-child) {
  margin-right: 8px;
}
.modal-row .addFilter-argsHeader {
  width: 100%;
  height: 20px;
  line-height: 20px;
  margin: 10px 0;
  padding-left: 10px;
}
.modal-row .addFilter-args {
  width: calc(100% - 20px);
  border: 1px solid #dddddd;
  position: relative;
  background-color: #fcfcfc;
  min-height: 150px;
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 2px;
  height: auto;
  margin: 10px;
}
.modal-row .addFilter-args .addFilter-arg {
  position: relative;
  width: 100%;
  height: 38px;
  background-color: #fff;
  border-bottom: solid 1px #ddd;
  padding: 5px 20px;
  text-align: left;
  line-height: 27px;
}
.modal-row .addFilter-args .addFilter-arg i {
  top: 18px;
}
.modal-row .addFilter-args .addFilter-arg .emptyArg {
  color: #777777;
}
.modal-row .addFilter-dynamicFunc,
.modal-row .addFilter-dynamicDuration,
.modal-row .addFilter-dynamicInterval {
  float: left;
  width: 100px !important;
}
.modal-row .addFilter-dynamicFunc button,
.modal-row .addFilter-dynamicDuration button,
.modal-row .addFilter-dynamicInterval button {
  width: 100px;
  border-color: #cccccc;
}
.modal-row .addFilter-dynamicFunc {
  width: 100px;
}
.modal-row .addFilter-dynamicFunc button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.modal-row .addFilter-dynamicDuration {
  width: calc(100% - 200px) !important;
  border-radius: 0;
  border-right: 0;
  border-left: 0;
}
.modal-row .addFilter-dynamicInterval {
  width: 100px;
}
.modal-row .addFilter-dynamicInterval button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.finalisePayModal-text,
.finalisePayModal-confirm {
  line-height: 1.6;
  font-weight: 400;
  text-align: center;
  padding: 10px;
}
.finalisePayModal-confirm {
  margin-bottom: 7px !important;
}
.finalisePayModal-options {
  display: block;
  margin: 10px auto 20px;
  width: 100%;
  padding: 0;
}
.finalisePayModal-options > .dd-warning {
  text-align: center;
  margin-bottom: 25px;
}
.finalisePayModal-options > p {
  margin-bottom: 10px;
  font-weight: 600;
}
.finalisePayModal-options > .payDetail {
  position: relative;
  background-color: rgba(94, 178, 46, 0.05);
  border: solid 1px #5eb22e;
  border-radius: 2px;
  width: 100%;
  padding: 15px 20px 15px 40px;
  margin: 0 auto 10px auto;
}
.finalisePayModal-options > .payDetail.warning {
  background-color: rgba(241, 202, 3, 0.1);
  border: solid 1px rgba(241, 202, 3, 0.5);
}
.finalisePayModal-options > .payDetail.info {
  background-color: #f9f9f9;
  border: solid 1px #ddd;
}
.finalisePayModal-options > .payDetail.info > i {
  left: 16px;
}
.finalisePayModal-options > .payDetail.selectedOption {
  background-color: #00adef10;
  border: solid 1px var(--app-color-payhero);
  padding-left: 40px;
}
.finalisePayModal-options > .payDetail.option {
  background-color: #00adef10;
  border: solid 1px var(--app-color-payhero);
  padding: 15px 20px;
}
.finalisePayModal-options > .payDetail.option .optionTitle,
.finalisePayModal-options > .payDetail.option .optionContainer {
  margin-top: 5px;
}
.finalisePayModal-options > .payDetail.option .optionTitle .optionDetail,
.finalisePayModal-options > .payDetail.option .optionContainer .optionDetail {
  display: flex;
  min-height: 35px;
  align-items: center;
  margin-bottom: 5px;
}
.finalisePayModal-options > .payDetail.option .optionTitle .optionDetail radio-button,
.finalisePayModal-options > .payDetail.option .optionContainer .optionDetail radio-button {
  margin-right: 10px;
}
.finalisePayModal-options > .payDetail.option .optionTitle .optionDetail .ph-whatsThisContainer.infoIcon,
.finalisePayModal-options > .payDetail.option .optionContainer .optionDetail .ph-whatsThisContainer.infoIcon {
  top: 2px;
  margin-left: 5px;
}
.finalisePayModal-options > .payDetail.option .optionTitle .optionDetail .disabled-tooltip,
.finalisePayModal-options > .payDetail.option .optionContainer .optionDetail .disabled-tooltip {
  width: 100%;
  height: 25%;
  margin-top: 20px;
}
.finalisePayModal-options > .payDetail.option .optionTitle .optionDetail .optionMessage.disabled,
.finalisePayModal-options > .payDetail.option .optionContainer .optionDetail .optionMessage.disabled {
  opacity: 0.65;
}
.finalisePayModal-options > .payDetail > i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 17px;
}
.finalisePayModal-options > .payDetail > i.ion-ios-checkmark-empty:before {
  color: #5eb22e;
  font-size: 27px;
}
.finalisePayModal-options > .payDetail .actionList {
  padding-left: 15px;
  margin-top: 20px;
  list-style-position: outside;
  max-height: 205px;
  overflow-y: auto;
}
.finalisePayModal-options > .payDetail .actionList > li {
  font-weight: 600;
  margin-bottom: 15px;
}
.finalisePayModal-options > .payDetail .actionList > li > span {
  opacity: 0.5;
  font-size: 10px;
  font-weight: normal;
}
.finalisePayModal-loading {
  margin-right: 10px;
}
.modal-header i.ion-ios-paperplane {
  font-size: 60px;
  color: #00adef;
}
.modal-header i.ion-ios-paperplane.sm {
  color: #005e82;
  font-size: 35px;
  margin-left: -25px;
  margin-bottom: 10px;
}
.modal-header stepped-progress {
  display: flex;
  justify-content: center;
}
.modal-header stepped-progress .steppedProgress-container {
  width: 30%;
}
.modal-header stepped-progress .steppedProgress-container .steppedProgress-bar.spInner {
  background-color: var(--app-color-payhero);
}
.payLine-container .modal-cellContent check-box {
  display: block;
  margin: 0 auto;
  width: 34px;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-partDay list-drop-down button {
  width: 100%;
}
.modal-container.ph-requestLeaveModal .dateInputContainer {
  width: 100%;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-balanceBlocks {
  margin-top: 10px;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-balanceBlocks .modal-cellContent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-balanceBlocks .modal-cellContent .ph-requestLeaveModal-detailBlock {
  padding: 20px 22px;
  background-color: #f9f9f9;
  border: solid 1px #ddd;
  border-radius: 2px;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-balanceBlocks .modal-cellContent .ph-requestLeaveModal-detailBlock .detailBlock-sublabel {
  color: #999;
  margin-top: 5px;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-balanceBlocks .modal-cellContent .ph-requestLeaveModal-detailBlock > p {
  text-align: left;
  margin-bottom: 0;
  padding: 0;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-balanceBlocks .modal-cellContent .ph-requestLeaveModal-detailBlock > p:first-child {
  color: #999;
  margin-bottom: 5px;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-balanceBlocks .modal-cellContent .ph-requestLeaveModal-detailBlock > p:nth-child(2) {
  font-size: 18px;
  font-weight: 600;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-balanceBlocks .modal-cellContent .ph-requestLeaveModal-detailBlock > p > span {
  font-weight: 100;
  color: #999;
  font-size: 12px;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-otherEmployeeLeave {
  margin-top: 10px;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-otherEmployeeLeave .ph-requestLeaveModal-otherEmployeeContainer {
  max-height: 250px;
  overflow-y: scroll;
  border-top: solid 1px #eee;
  border-bottom: solid 1px #eee;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-otherEmployeeLeave .ph-requestLeaveModal-otherEmployeeContainer .ph-requestLeaveModal-otherEmployee {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: solid 1px #eee;
  margin-bottom: -1px;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-otherEmployeeLeave .ph-requestLeaveModal-otherEmployeeContainer .ph-requestLeaveModal-otherEmployee > div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 10px;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-otherEmployeeLeave .ph-requestLeaveModal-otherEmployeeContainer .ph-requestLeaveModal-otherEmployee > div:nth-child(1) {
  width: 45%;
  font-weight: 600;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-otherEmployeeLeave .ph-requestLeaveModal-otherEmployeeContainer .ph-requestLeaveModal-otherEmployee > div:nth-child(2) {
  width: 30%;
}
.modal-container.ph-requestLeaveModal .ph-requestLeaveModal-otherEmployeeLeave .ph-requestLeaveModal-otherEmployeeContainer .ph-requestLeaveModal-otherEmployee > div:nth-child(3) {
  width: 25%;
  padding-right: 15px;
  text-align: right;
}
.leavePayLineDetailsContainer {
  margin-right: 10px;
  margin-top: 20px;
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
  width: 100%;
  padding: 5px;
}
.leavePayLineDetailsContainer .payRateDetails {
  height: unset;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.leavePayLineDetailsContainer .payRateDetails.selectedRate {
  background-color: rgba(94, 178, 46, 0.1);
  border: 1px solid #5eb22e !important;
  border-radius: 2px;
}
.leavePayLineDetailsContainer .payRateDetails .ph-stat {
  height: unset;
  margin: 0;
  padding: 0;
}
.leavePayLineDetailsContainer .payRateDetails .ph-stat:first-child {
  margin-left: 0;
}
.leavePayLineDetailsContainer .payRateDetails .ph-stat:last-child {
  border-left: 1px solid #DDDDDD;
  margin-right: 0;
  width: 175px;
}
.leavePayLineDetailsContainer .payRateDetails .ph-stat .ph-statRowTitle {
  width: 250px;
  left: 0;
}
.leavePayLineDetailsContainer .payRateDetails .ph-stat .statTitle {
  margin-bottom: 0;
  min-width: 120px;
}
.leavePayLineDetailsContainer .payCalculationBreakdown {
  border-top: 1px solid #EEEEEE;
  padding: 40px 0 20px 0;
  display: flex;
}
.leavePayLineDetailsContainer .payCalculationBreakdown .ph-stat {
  margin: 0 auto;
}
.leavePayLineDetailsContainer .payCalculationBreakdown .ph-stat .statValue span {
  color: #999;
  font-size: 16px;
  font-weight: 300;
}
.averageOrdinaryStatContainer {
  background-color: #fafafa;
  border: 1px solid #DDDDDD;
  border-top: none;
  margin-bottom: 20px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  width: 100%;
  height: 120px;
}
.leaveTakenContainer {
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
  padding: 5px;
  overflow-y: hidden;
  overflow-x: auto;
}
.leaveTakenContainer .ph-statRow {
  height: unset;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.leaveTakenContainer .ph-statRow .ph-statRowTitle {
  left: 0;
}
.leaveTakenContainer .ph-statRow .ph-stat {
  height: unset;
  margin: 0;
  padding: 0;
}
.leaveTakenContainer .ph-statRow .ph-stat:last-child {
  border-left: 1px solid #DDDDDD;
  margin-right: 0;
  width: 175px;
}
.leaveDaysCalendar {
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
  padding: 10px 0 40px 0;
  overflow-y: hidden;
  overflow-x: auto;
  margin-top: 20px;
}
.leaveDaysCalendar .leaveRequestDetailsTitle {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding-left: 20px;
  font-weight: 600;
}
.leaveDaysCalendar .leaveRequestDetails {
  height: 101px;
  padding-bottom: 20px;
  position: relative;
  margin: 10px 20px 20px 20px;
  border-bottom: 1px solid #DDDDDD;
}
.leaveDaysCalendar .leaveRequestDetails .leaveLineTypeColor {
  float: left;
  height: 80px;
  width: 5px;
  margin-right: 15px;
  border-radius: 5px;
}
.leaveDaysCalendar .leaveRequestDetails .leaveLineTypeName {
  float: left;
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  font-size: 14px;
  width: calc(60% - 15px);
}
.leaveDaysCalendar .leaveRequestDetails .leaveLinePeriod {
  float: left;
  height: 25px;
  line-height: 25px;
  width: calc(60% - 15px);
  font-weight: 400;
}
.leaveDaysCalendar .leaveRequestDetails .leaveLinePeriod span {
  color: #999;
  font-weight: 200;
}
.leaveDaysCalendar .leaveRequestDetails .leaveLineApprovalStatus {
  float: left;
  height: 25px;
  line-height: 25px;
  color: #999;
  width: calc(60% - 15px);
}
.leaveDaysCalendar .leaveRequestDetails .leaveLineApprovalStatus span {
  color: #333;
  font-weight: 600;
}
.leaveDaysCalendar .leaveRequestDetails .leaveLineDays {
  position: absolute;
  right: 0;
  height: 80px;
  text-align: right;
  width: 40%;
  padding: 9px 0;
}
.leaveDaysCalendar .leaveRequestDetails .leaveLineDays .ph-stat {
  float: right;
}
.leaveDaysCalendar .leaveDaysCalendarScroll {
  position: relative;
  overflow: hidden;
  display: flex;
  min-width: 100%;
  padding: 0 20px;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth {
  width: 250px;
  position: relative;
  margin: 0 auto;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarMonthName {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarMonthName > span {
  color: #999;
  font-weight: 200;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarDayLabels,
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarWeek {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  justify-items: center;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarDayLabels {
  width: 100%;
  height: 24px;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarDayLabels .calendarDayLabel {
  color: #DDDDDD;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarWeek {
  width: 100%;
  height: 34px;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarWeek .calendarDay {
  width: 100%;
  height: 100%;
  position: relative;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarWeek .calendarDay .calendarDayInner {
  background-color: #FAFAFA;
  border-radius: 20px;
  width: 28px;
  height: 28px;
  color: #333333;
  line-height: 28px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarWeek .calendarDay .calendarDayInner.differentMonth {
  display: none;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarWeek .calendarDay .calendarDayInner.invalidRequestDay {
  background-color: #fff !important;
  color: #333 !important;
  border: 1px solid;
  line-height: 25px;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarWeek .calendarDay .calendarDayInner.requestDay {
  cursor: pointer;
  font-weight: 600;
}
.leaveDaysCalendar .leaveDaysCalendarScroll .calendarMonth .calendarWeek .calendarDay .calendarDayInner.requestDay:hover {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.leaveDaysContainer {
  overflow: auto;
  max-height: 400px;
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
}
.leaveDaysContainer .leaveDay {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #DDDDDD;
}
.leaveDaysContainer .leaveDay.leaveDayOpen {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  margin-bottom: 15px;
}
.leaveDaysContainer .leaveDay:first-child {
  border-top: none;
}
.leaveDaysContainer .leaveDay:last-child {
  border-bottom: none;
}
.leaveDaysContainer .leaveDay:last-child.leaveDayOpen {
  margin-bottom: 0;
}
.leaveDaysContainer .leaveDay:not(:last-child):not(.leaveDayOpen) {
  border-bottom: none;
}
.leaveDaysContainer .leaveDay .leaveDayRow {
  cursor: pointer;
}
.leaveDaysContainer .leaveDay .leaveDayRow .ph-stat .validLeaveDay {
  height: 52px;
  line-height: 52px;
}
.leaveDaysContainer .leaveDay .leaveDayRow .ph-statRight {
  float: right;
}
.leaveDaysContainer .leaveDay .leaveDayDetails {
  background-color: #fcfcfc;
  border-top: 1px solid #DDDDDD;
  transition: height 0.3s ease;
  overflow: hidden;
}
.leaveDaysContainer .leaveDay .leaveDayDetails.ng-enter,
.leaveDaysContainer .leaveDay .leaveDayDetails.ng-leave.ng-leave-active {
  height: 0;
}
.leaveDaysContainer .leaveDay .leaveDayDetails.ng-leave,
.leaveDaysContainer .leaveDay .leaveDayDetails.ng-enter.ng-enter-active {
  height: 165px;
}
.leaveDaysContainer .leaveDay .leaveDayDetails .ph-stat {
  width: 50%;
}
.modal-container.ph-holidayLeaveContainer {
  padding: 25px 25px 0 25px;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveCalcContainer {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #00adef;
  border-radius: 2px;
  color: #00adef;
  font-weight: 600;
  background-color: rgba(0, 173, 239, 0.15);
  margin-bottom: 10px;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveCalcContainer i.ion {
  margin-right: 5px;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveRow {
  border-bottom: 1px solid #DDDDDD;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveRow .ph-holidayLeaveRow-header {
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  font-weight: 600;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveRow .ph-statRow.ph-holidayLeaveRow-details {
  background-color: #FAFAFA;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
  overflow: hidden;
  height: unset;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveRow .ph-statRow.ph-holidayLeaveRow-details .ph-stat {
  height: auto;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveRow .ph-statRow.ph-holidayLeaveRow-details .ph-stat:first-child {
  border-right: 1px solid #DDDDDD;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveRow .ph-statRow.ph-holidayLeaveRow-details .ph-stat:last-child {
  border-left: 1px solid #DDDDDD;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveRow .ph-statRow.ph-holidayLeaveRow-details .ph-stat .statValue span {
  color: #999;
  font-weight: 400;
  font-size: 12px;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveRow .ph-holidayLeaveRow-footer {
  height: 70px;
  line-height: 70px;
  text-align: right;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  padding-right: 10px;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveRow .ph-holidayLeaveRow-footer > div {
  color: #333;
  font-weight: 600;
  font-size: 16px;
  float: right;
  min-width: 120px;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveTotal {
  height: 100px;
  line-height: 100px;
  text-align: right;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  padding-right: 10px;
}
.modal-container.ph-holidayLeaveContainer .ph-holidayLeaveTotal > div {
  color: #333;
  font-weight: 600;
  font-size: 16px;
  float: right;
  min-width: 120px;
}
.modal-table.xero-payItemModalTable .tableHeaderRow > div,
.modal-table.xero-payItemModalTable .tableHeaderRow > table-col-header {
  width: calc(50% / 2);
}
.modal-table.xero-payItemModalTable .tableHeaderRow > div:nth-child(1),
.modal-table.xero-payItemModalTable .tableHeaderRow > table-col-header:nth-child(1) {
  width: 50%;
}
.modal-container.ph-docUploadModal #file-upload {
  display: none;
}
.modal-container.ph-docUploadModal .ph-docUpload-file {
  width: 100%;
  padding: 30px;
  display: block;
  margin: 0 auto 15px auto;
  border-radius: 2px;
  text-align: center;
}
.modal-container.ph-docUploadModal .ph-docUpload-file.upload {
  cursor: pointer;
  background-color: #f9f9f9;
  border: dashed 1px #ddd;
  transition: all 0.25s ease;
}
.modal-container.ph-docUploadModal .ph-docUpload-file.upload:hover {
  border: dashed 1px #00adef;
  background-color: rgba(0, 173, 239, 0.1);
}
.modal-container.ph-docUploadModal .ph-docUpload-file.upload:hover i,
.modal-container.ph-docUploadModal .ph-docUpload-file.upload:hover p {
  color: #00adef;
}
.modal-container.ph-docUploadModal .ph-docUpload-file.upload p {
  font-weight: 200;
}
.modal-container.ph-docUploadModal .ph-docUpload-file > div i {
  margin: 0 0 10px 0;
  color: #ddd;
  font-size: 50px;
  transition: color 0.3s ease;
}
.modal-container.ph-docUploadModal .ph-docUpload-file > div p {
  padding: 0;
  text-align: center;
  font-size: 14px;
  word-break: break-all;
}
.modal-container.ph-docUploadModal .ph-docUpload-fileCancel {
  margin: -20px auto 40px;
  display: block;
}
.employeeSelectorModal.modal-container super-search {
  width: 100%;
  margin-bottom: 20px;
}
.employeeSelectorModal.modal-container .employeeSelectContainer {
  max-height: 500px;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
  overflow-y: auto;
}
.employeeSelectorModal.modal-container .employeeSelectContainer .employeeSelectRow {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 10px;
  cursor: pointer;
}
.employeeSelectorModal.modal-container .employeeSelectContainer .employeeSelectRow:not(:last-child) {
  border-bottom: 1px solid #DDDDDD;
}
.employeeSelectorModal.modal-container .employeeSelectContainer .employeeSelectRow:hover {
  background-color: #FAFAFA;
}
.employeeSelectorModal.modal-container .employeeSelectContainer .employeeSelectRow > check-box {
  margin-right: 10px;
}
.employeeSelectorModal.modal-container .selectAllEmployees {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 15px 10px;
}
.employeeSelectorModal.modal-container .selectAllEmployees check-box {
  margin-right: 10px;
}
.employeeSelectorModal.modal-container .selectAllEmployees .selectAllEmployees-count {
  text-align: right;
  margin-left: auto;
}
.modal-container.ph-expenseUploadModal {
  max-height: 650px;
}
.modal-container.ph-expenseUploadModal #file-upload {
  display: none;
}
.modal-container.ph-expenseUploadModal .ph-receiptUpload-file {
  width: 100%;
  padding: 30px;
  display: block;
  border-radius: 2px;
  text-align: center;
}
.modal-container.ph-expenseUploadModal .ph-receiptUpload-file.ph-receiptUpload-changeFile {
  padding: 30px 10px 20px 10px;
  background-color: #ffffff;
  border: solid 1px #ddd;
}
.modal-container.ph-expenseUploadModal .ph-receiptUpload-file.receiptUpload {
  cursor: pointer;
  background-color: #f9f9f9;
  border: dashed 1px #ddd;
  display: inline-block;
  transition: all 0.25s ease;
}
.modal-container.ph-expenseUploadModal .ph-receiptUpload-file.receiptUpload:hover {
  border: dashed 1px #00adef;
  background-color: rgba(0, 173, 239, 0.1);
}
.modal-container.ph-expenseUploadModal .ph-receiptUpload-file.receiptUpload:hover i,
.modal-container.ph-expenseUploadModal .ph-receiptUpload-file.receiptUpload:hover p {
  color: #00adef;
}
.modal-container.ph-expenseUploadModal .ph-receiptUpload-file > div i.ion-ios-copy-outline {
  margin: 0 0 10px 0;
  color: #ddd;
  font-size: 50px;
  transition: color 0.3s ease;
}
.modal-container.ph-expenseUploadModal .ph-receiptUpload-file > div p {
  padding: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 200;
  word-break: break-all;
  transition: color 0.25s ease;
}
.modal-container.ph-expenseUploadModal .ph-receiptUpload-file-escape {
  float: right;
  position: relative;
}
.modal-container.ph-expenseUploadModal .ph-receiptPreview {
  padding: 20px;
  background-color: #ffffff;
  border: solid 1px #ddd;
  text-align: center;
}
.modal-container.ph-expenseUploadModal .ph-receiptPreview .ph-receiptImage {
  max-width: 95%;
  display: block;
  margin: 0 auto;
}
.modal-container.ph-expenseUploadModal .ph-receiptPreview i.ion-ios-copy-outline {
  margin: 0 auto 10px auto;
  display: block;
  color: #ddd;
  font-size: 50px;
  transition: color 0.3s ease;
}
.ph-admin-confirmTransfer check-box {
  position: relative;
  top: -2px;
  margin-right: 8px;
}
.companySetupModalWindow > .modal-dialog {
  min-width: 450px;
}
.companySetupModalWindow > .modal-dialog > .modal-content {
  padding: 0;
  border-radius: 5px;
}
.modal-container.companySetupModal-container {
  border: none;
}
.modal-container.companySetupModal-container > h2 {
  text-align: center;
}
.modal-container.companySetupModal-container > h6 {
  text-align: center;
  color: #999;
  margin-bottom: 30px;
}
.modal-container.companySetupModal-container input.form-control {
  width: 350px;
  height: 46px;
  margin: 10px auto;
  display: block;
}
.modal-container.companySetupModal-container button.btn-success {
  width: 350px;
  height: 46px;
  margin: 25px auto 20px auto;
  display: block;
}
.modal-header .timeModal-clockInfo {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}
.modal-header .timeModal-clockInfo > div {
  text-align: center;
  width: 50%;
}
.modal-header .timeModal-clockInfo > div .-clockLabel {
  width: 100%;
  color: var(--ph-color-grey-dark);
  margin-bottom: 5px;
}
.modal-header .timeModal-clockInfo > div .-clockTime {
  width: 100%;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-header .timeModal-clockInfo > div .-clockTime .-clockLocation {
  max-width: calc(100% - 70px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-header .timeModal-clockInfo > div .-clockTime span:not(.-clockLocation) {
  color: var(--ph-color-grey-dark);
  margin: 0 3px;
}
.twoFactorQR {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.twoFactorQR div {
  position: relative;
  width: 100%;
}
.twoFactorQR .twoFactorQRKey {
  width: 100%;
  border-radius: 3px;
  background-color: #fcfcfc;
  margin-top: 5px;
  padding-right: 75px;
  cursor: pointer;
}
.twoFactorQR .ph-login-2fa-qrKey {
  position: absolute;
  top: 54%;
  right: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}
.modal-header img {
  height: 50px;
}
.modal-cellContent span {
  color: #999;
}
.modal-container.noPadding {
  padding: 0;
}
.modal-container.akahuModal-acknowledge {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.modal-container .loadContainer {
  display: flex;
  justify-content: center;
}
.modal-container .loadContainer .loadSpinner {
  height: 40px;
}
.modal-container .akahuModal-learnMore {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  line-height: 18px;
}
.modal-container .akahuModal-errorContainer .akahuModal-errorTitle {
  font-size: 18px;
}
.modal-container .akahuModal-twoFactorContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal-container .akahuModal-twoFactorContainer .akahuModal-twoFactorError {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  line-height: 20px;
  background-color: #b22e2ebf;
  color: #fff;
  border-radius: 3px;
  text-align: center;
  transition: all ease-in 0.15s;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}
.modal-container .akahuModal-twoFactorContainer .akahuModal-twoFactorError.showError {
  height: 40px;
  padding: 10px;
  margin-bottom: 10px;
  opacity: 1;
}
.modal-container .akahuModal-twoFactorContainer .akahuModal-twoFactorTitle {
  line-height: 34px;
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  text-align: center;
}
.modal-container .akahuModal-twoFactorContainer .akahuModal-twoFactorInfo span {
  font-weight: 600;
}
.modal-container .akahuModal-twoFactorContainer input {
  max-width: 300px;
  margin: auto;
}
.modal-container .akahuModal-accountList {
  max-height: 500px;
}
.modal-container .akahuModal-accountList .akahuModal-lastRefresh {
  text-align: center;
  font-size: 10px;
  color: #999;
}
.modal-container {
  max-height: calc(100vh - 210px) !important;
}
.header-subtitle {
  font-size: 14px;
  padding-top: 3px;
}
.terms p {
  text-align: left !important;
  padding: 5px 10px !important;
}
.terms ol li:last-child {
  margin-top: 5px;
}
.modal-container.-manageUacModal .-inviteSupportMessage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  font-size: 13px;
  text-align: center;
}
.modal-container.-manageUacModal .-inviteSupportMessage > :not(:first-child) {
  margin-top: 30px;
}
.modal-container.-manageUacModal .modal-row .modal-cellFull-splitContent {
  display: flex;
  align-items: center;
}
.modal-container.-manageUacModal .modal-row .modal-cellFull-splitContent .modal-cellHeader {
  width: 25%;
  float: none;
}
.modal-container.-manageUacModal .modal-row .modal-cellFull-splitContent .modal-cellContent {
  width: 75%;
  float: none;
  display: flex;
  align-items: center;
}
.modal-container.-manageUacModal .modal-row .modal-cellFull-splitContent .modal-cellContent > :not(:first-child) {
  margin-left: 10px;
}
.modal-container.-manageUacModal .modal-row .modal-cellFull-splitContent .modal-cellContent > input,
.modal-container.-manageUacModal .modal-row .modal-cellFull-splitContent .modal-cellContent > list-drop-down {
  width: 250px;
  max-width: 250px;
}
.modal-container.-manageUacModal .modal-row .modal-cellFull-splitContent .modal-cellContent > div {
  font-weight: 600;
}
.modal-container.-manageUacModal .modal-row .modal-cellFull-splitContent .modal-cellContent .-grey {
  color: var(--app-color-grey-dark);
  font-weight: 400;
}
.modal-container.-manageUacModal .modal-row.-loginEmail .modal-cellContent .-passwordReset {
  margin-left: auto;
}
.modal-container.-manageUacModal .modal-row.-access .modal-cellContent .-accessToggle {
  margin-left: auto;
  margin-right: 15px;
}
.optionDetails {
  padding: 10px;
}
.optionDetails .optionTitle {
  margin-bottom: 10px;
}
.optionDetails .optionContainer {
  display: flex;
  margin-top: 5px;
  min-height: 35px;
  align-items: center;
}
.optionDetails .optionContainer label {
  margin-bottom: 0;
}
.optionDetails .optionContainer label.grey {
  color: #999;
}
.optionDetails .optionContainer radio-button {
  margin-right: 10px;
}
.optionDetails .optionPost {
  margin-top: 10px;
}
.goToPageModal-customDetail {
  text-align: left;
}
.goToPageModal-customDetail .customDetailTitle {
  font-weight: 600;
  color: var(--app-color-payhero);
  margin-bottom: 10px;
}
.goToPageModal-customDetail .customDetailHeader,
.goToPageModal-customDetail .customDetailDetail {
  margin-bottom: 20px;
}
.modal-header i.ion-ios-paperplane {
  font-size: 60px;
  color: #00adef;
}
.modal-header i.ion-ios-paperplane.sm {
  color: #005e82;
  font-size: 35px;
  margin-left: -25px;
  margin-bottom: 10px;
}
.modal-container > p {
  margin-bottom: 25px;
}
.modal-container > p.header {
  font-size: 13px;
  margin-bottom: 20px;
}
.modal-container .dd-modal-warning {
  padding: 25px 10px 5px 10px;
  font-size: 12px;
  color: #aaa;
  margin-bottom: 15px;
}
.modal-container .dd-modal-warning.-support {
  padding-top: 0;
}
.modal-container .dd-modal-warning > i {
  margin-right: 4px;
}
.modal-container .blue-box {
  background-color: #00adef10;
  border: solid 1px var(--app-color-payhero);
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modal-container .blue-box p {
  display: flex;
  align-items: center;
}
.modal-container .blue-box p .blue-number {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--app-color-payhero);
  padding: 0 20px;
}
.modal-container.-question {
  margin-top: 10px;
}
.modal-container.-question > p {
  font-size: 14px;
}
.modal-btnFooter .modal-btnLeft > div {
  margin-top: 8px;
}
.modal-btnFooter .modal-btnLeft > div > span {
  vertical-align: middle;
  margin-left: 5px;
}
.modal-open {
  overflow: initial;
}
.modal-sm {
  min-width: 600px;
}
@media (max-width: 600px) {
  .modal-sm {
    min-width: 90%;
  }
}
.modal-content {
  position: relative;
  background-color: #f4f4f4;
  padding: 25px 20px 20px 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background-clip: padding-box;
  outline: 0;
  min-height: 100px;
  overflow: auto;
}
.modal-header {
  position: relative;
  width: 100%;
  text-align: center;
  color: #333;
  margin: 0 0 15px 0;
  border-bottom: none;
  padding: 0;
}
.modal-header .ion {
  font-size: 50px;
  color: #bbb;
  margin-bottom: 10px;
}
.modal-header .ion-edit {
  font-size: 40px;
}
.modal-header img {
  margin-bottom: 13px;
  max-width: 100px;
}
.modal-header img.image-icon {
  max-height: 60px;
  max-width: 300px;
  margin: 5px 0 15px 0;
}
.modal-header .ph-finishIcon {
  margin: 7px 0 15px 0;
  width: 30px;
}
.modal-header .headerCenter {
  width: 100%;
  line-height: 28px;
  color: #333;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: normal;
}
.modal-header .headerCenter > .headerDetail {
  font-size: 14px;
  color: #999;
}
.modal-header .headerLeft {
  height: 40px;
  line-height: 40px;
  float: left;
  color: #fafafa;
  font-size: 20px;
}
.modal-header .headerRight {
  height: 40px;
  float: right;
}
.modal-header i.modal-close {
  font-size: 30px;
  top: 10px;
  right: 0;
  color: unset;
}
.modal-header i.modal-close:hover {
  right: -3px;
}
.modal-containerHeader {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-weight: 600;
}
.modal-scrollContainer {
  overflow-y: auto;
  max-height: 50vh;
  position: relative;
}
.modal-container {
  position: relative;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  padding: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  overflow: auto;
  max-height: 10000px;
  transition: max-height 2s ease;
}
.modal-container.ng-enter,
.modal-container.ng-leave.ng-leave-active {
  max-height: 0;
}
.modal-container.ng-leave,
.modal-container.ng-enter.ng-enter-active {
  max-height: 10000px;
}
.modal-container p {
  line-height: 1.6;
  padding: 10px;
  text-align: center;
}
.modal-container p:last-child {
  margin-bottom: 0;
}
.modal-container h5 {
  margin: 0;
  text-align: center;
  line-height: 1.5;
  font-size: 12px;
  padding: 10px;
}
.modal-container .timeModal-content {
  float: left;
  width: 50%;
  padding: 10px;
  position: relative;
}
.modal-container .timeModal-startEnd {
  float: left;
  width: 50%;
}
.modal-container .timeModal-startEnd:first-child {
  padding-right: 5px;
}
.modal-container .modal-dateButton {
  position: relative;
  top: 0;
  padding: 0 0 0 2px;
  width: 34px;
  border: solid 1px #ccc;
  background-color: #f4f4f4;
  border-radius: 2px 0 0 2px;
}
.modal-container .dateInputContainer {
  height: 34px;
  float: left;
}
.modal-container .dateInputContainer > button {
  float: left;
  width: 34px;
}
.modal-container .dateInputContainer > input {
  float: left;
  width: calc(100% - 34px) !important;
}
.modal-container .modal-dateInput {
  width: 115px;
  float: left;
  margin-left: -1px;
  border-radius: 0 2px 2px 0;
  padding: 6px 6px 6px 12px;
  text-align: left;
}
.modal-container .modal-dateInput[type="date"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display: none;
}
.modal-container .modal-info {
  border-radius: 2px;
  padding: 20px;
  margin-bottom: 15px;
}
.modal-container .modal-info.warning {
  background-color: rgba(241, 202, 3, 0.1);
  border: solid 1px rgba(241, 202, 3, 0.5);
}
.modal-container .modal-info.warning > i {
  color: #f1ca03;
}
.modal-container .modal-info.info {
  background-color: rgba(0, 173, 239, 0.1);
  border: solid 1px rgba(0, 173, 239, 0.5);
}
.modal-container .modal-info.info > i {
  color: #00adef;
}
.modal-container .modal-info.error {
  background-color: rgba(178, 46, 46, 0.75);
  border: solid 1px #b22e2e;
}
.modal-container .modal-info.error > i,
.modal-container .modal-info.error > span {
  color: #fff;
}
.modal-container .modal-info > i {
  top: 1px;
  margin-right: 4px;
}
.modal-container .modal-info p {
  display: table;
  padding: 0;
  margin: 20px auto 0 auto;
}
.modal-container .modal-row {
  width: 100%;
  display: block;
  height: auto;
  clear: both;
}
.modal-container .modal-row:after {
  clear: both;
  content: "";
  display: table;
}
.modal-container .modal-row .modal-cellFull,
.modal-container .modal-row .modal-cellHalf,
.modal-container .modal-row .modal-cellThird,
.modal-container .modal-row .modal-cellQuarter,
.modal-container .modal-row .modal-cellFull-splitContent {
  float: left;
  padding: 10px;
  position: relative;
}
.modal-container .modal-row .modal-cellFull,
.modal-container .modal-row .modal-cellFull-splitContent {
  width: 100%;
}
.modal-container .modal-row .modal-cellHalf {
  width: 50%;
}
.modal-container .modal-row .modal-cellThird {
  width: 33%;
}
.modal-container .modal-row .modal-cellQuarter {
  width: 25%;
}
.modal-container .modal-row .modal-cellFull .modal-cellHeader,
.modal-container .modal-row .modal-cellHalf .modal-cellHeader,
.modal-container .modal-row .modal-cellThird .modal-cellHeader,
.modal-container .modal-row .modal-cellQuarter .modal-cellHeader,
.modal-container .modal-row .modal-cellFull .modal-cellFooter,
.modal-container .modal-row .modal-cellHalf .modal-cellFooter,
.modal-container .modal-row .modal-cellThird .modal-cellFooter,
.modal-container .modal-row .modal-cellQuarter .modal-cellFooter {
  font-size: 12px;
  font-weight: 200;
  width: 100%;
  height: 17px;
}
.modal-container .modal-row .modal-cellFull .modal-cellHeader .ph-required-icon,
.modal-container .modal-row .modal-cellHalf .modal-cellHeader .ph-required-icon,
.modal-container .modal-row .modal-cellThird .modal-cellHeader .ph-required-icon,
.modal-container .modal-row .modal-cellQuarter .modal-cellHeader .ph-required-icon,
.modal-container .modal-row .modal-cellFull .modal-cellFooter .ph-required-icon,
.modal-container .modal-row .modal-cellHalf .modal-cellFooter .ph-required-icon,
.modal-container .modal-row .modal-cellThird .modal-cellFooter .ph-required-icon,
.modal-container .modal-row .modal-cellQuarter .modal-cellFooter .ph-required-icon {
  font-size: 8px;
  top: -1px;
  left: 3px;
}
.modal-container .modal-row .modal-cellFull .modal-cellHeader,
.modal-container .modal-row .modal-cellHalf .modal-cellHeader,
.modal-container .modal-row .modal-cellThird .modal-cellHeader,
.modal-container .modal-row .modal-cellQuarter .modal-cellHeader {
  margin-bottom: 10px;
}
.modal-container .modal-row .modal-cellFull .modal-cellFooter,
.modal-container .modal-row .modal-cellHalf .modal-cellFooter,
.modal-container .modal-row .modal-cellThird .modal-cellFooter,
.modal-container .modal-row .modal-cellQuarter .modal-cellFooter {
  margin-top: 10px;
}
.modal-container .modal-row .modal-cellFull .modal-cellContent,
.modal-container .modal-row .modal-cellHalf .modal-cellContent,
.modal-container .modal-row .modal-cellThird .modal-cellContent,
.modal-container .modal-row .modal-cellQuarter .modal-cellContent {
  width: 100%;
  min-height: 34px;
}
.modal-container .modal-row .modal-cellFull .modal-cellContent > .radioButtons,
.modal-container .modal-row .modal-cellHalf .modal-cellContent > .radioButtons,
.modal-container .modal-row .modal-cellThird .modal-cellContent > .radioButtons,
.modal-container .modal-row .modal-cellQuarter .modal-cellContent > .radioButtons {
  padding-top: 5px;
}
.modal-container .modal-row .modal-cellFull .modal-cellContent > .radioButtons > #empLabel,
.modal-container .modal-row .modal-cellHalf .modal-cellContent > .radioButtons > #empLabel,
.modal-container .modal-row .modal-cellThird .modal-cellContent > .radioButtons > #empLabel,
.modal-container .modal-row .modal-cellQuarter .modal-cellContent > .radioButtons > #empLabel {
  margin-right: 30px;
}
.modal-container .modal-row .modal-cellFull-splitContent .modal-cellHeader {
  height: 34px;
  line-height: 34px;
  width: 40%;
  float: left;
  font-weight: 200;
}
.modal-container .modal-row .modal-cellFull-splitContent .modal-cellHeader .ph-required-icon {
  font-size: 8px;
  top: -1px;
  left: 3px;
}
.modal-container .modal-row .modal-cellFull-splitContent .modal-cellContent {
  height: 34px;
  line-height: 34px;
  width: 60%;
  float: right;
}
.modal-container .modal-row list-selector,
.modal-container .modal-row list-drop-down {
  width: 100%;
}
.modal-container .modal-row input.form-control {
  width: 100%;
  height: 34px;
  font-size: 12px;
}
.modal-container .modal-row input.form-control::-ms-clear {
  display: none;
}
.modal-container .modal-row input.form-control::-webkit-clear-button {
  display: none;
}
.modal-container .modal-row .timeInputContainer {
  font-size: 12px;
}
.modal-container .modal-row .timeInputContainer input {
  cursor: pointer;
}
.modal-container .modal-notesRow {
  padding: 15px 10px 10px 10px;
}
.modal-container .modal-notesRow .modal-notesRowHeader {
  cursor: pointer;
  color: #00adef;
}
.modal-container .modal-notesRow .modal-notesRowInput {
  width: 100%;
  height: 0;
  padding: 0 10px;
  border: solid 0px #ddd;
  margin-top: 0;
  max-width: 100%;
  max-height: 300px;
  border-radius: 2px;
  resize: none;
  transition: padding 0.25s ease-out, border 0.25s ease-out, margin-top 0.25s ease-out;
}
.modal-container .modal-notesRow .modal-notesRowInput.modal-notesRowInputOpen {
  height: 120px;
  padding: 10px;
  border: solid 1px #ddd;
  margin-top: 7px;
}
.modal-container textarea {
  resize: vertical;
  font-size: 12px;
  width: 100%;
  max-width: 100% !important;
  max-height: 200px;
  height: 80px;
  padding: 10px;
}
.modal-container textarea:focus {
  border-color: #9eccf1 !important;
  border-width: 2px !important;
  outline: 0;
}
.modal-container .modal-row.textarea-row {
  overflow: hidden;
}
.modal-container.ph-adminModal .modal-info {
  margin-bottom: 30px;
}
.modal-container.ph-adminModal > h5:not(.modal-info) {
  margin-top: 20px;
}
.modal-table {
  margin-bottom: 0;
}
.modal-table .scrollContainer {
  max-height: 500px !important;
}
.modal-table .scrollContainer .modal-tableRow {
  background-color: #fff;
}
.modal-table .scrollContainer list-drop-down {
  margin-top: 8px;
}
.modal-btnFooter {
  width: 100%;
  height: 54px;
  position: relative;
  border: none;
  padding: 20px 0 0 0;
}
.modal-btnFooter .modal-btnLeft {
  float: left;
  min-width: 100px;
  margin-right: 10px;
}
.modal-btnFooter .modal-btnCenter {
  display: block;
  width: 100px;
  margin: 0 auto;
}
.modal-btnFooter .modal-btnRight {
  float: right;
  min-width: 100px;
  margin-left: 7px;
}
.modal-btnFooter .btn-danger {
  background-color: #d9534f;
  border-color: #d9534f;
  color: #fff;
}
.modal-btnFooter .btn-danger.empty {
  background-color: rgba(0, 0, 0, 0);
  border: solid 1px #ccc;
  color: #333;
}
.modal-btnFooter .btn-danger.empty:hover {
  background-color: #d9534f;
  border-color: #d9534f;
  color: #fff;
}
.modal-btnFooter .btn-danger.empty:active {
  background-color: #ac2925;
  border-color: #761c19;
  color: #fff;
}
.modal-btnFooter .btn-danger:hover {
  background-color: #c9302c;
  border-color: #ac2925;
}
.modal-btnFooter .btn-danger:active {
  background-color: #ac2925;
  border-color: #761c19;
}
.modalError {
  background-color: rgba(178, 46, 46, 0.75);
  border: solid 1px #b22e2e;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  margin-top: -2px;
  opacity: 0;
  font-size: 0;
  transition: all 0.25s ease-out;
}
.modalError span {
  font-size: 0;
}
.modalError .ion {
  position: relative;
  top: 3px;
  right: 4px;
  transition: all 0.25s ease-out;
}
.modalErrorOpen {
  padding: 13px 20px 20px 20px;
  margin-top: 7px;
  opacity: 1;
  line-height: 1.5;
  font-size: 12px;
}
.modalErrorOpen span {
  font-size: 22px;
}
.errorModal.modal-container {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  min-height: 0;
}
.errorModal.modal-container h5 {
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
.errorModal.modal-btnFooter button {
  width: 100px;
  display: block;
  margin: 0 auto;
}
.iframe-container {
  position: relative;
  height: 470px;
  display: block;
  width: 100%;
  border-radius: 5px;
}
.iframe-container > iframe {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
}
time-summary-panel-directive .tSummary-container {
  width: 100%;
}
time-summary-panel-directive .tSummary-container .tSummary-headerDates {
  width: 100%;
  height: 40px;
  display: flex;
  margin-top: 30px;
  border-bottom: solid 1px #ddd;
  padding: 0 5px 0 0;
}
time-summary-panel-directive .tSummary-container .tSummary-headerDates .tSummary-headerSelect {
  min-width: 250px;
  padding-left: 30px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
}
time-summary-panel-directive .tSummary-container .tSummary-headerDates .tSummary-headerSelect .tSummary-headerSelect-employees {
  padding-left: 10px;
}
time-summary-panel-directive .tSummary-container .tSummary-headerDates .tSummary-headerDate {
  position: relative;
  height: 40px;
  width: calc(100% / 7);
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  align-self: flex-end;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll {
  width: calc(100% + 20px);
  max-height: calc(100vh - 370px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer {
  width: calc(100% - 13px);
  height: 134px;
  overflow: visible;
  padding-left: 250px;
  padding-right: 5px;
  position: relative;
  margin-bottom: 10px;
  border: 1px solid #dddddd;
  border-radius: 2px;
  background-color: #f9f9f9;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer:first-child {
  border-top: 0;
  border-radius: 0 0 2px 2px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDetails {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  float: left;
  width: 210px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDetails .toggle {
  width: 60px;
  height: 100%;
  float: left;
  padding: 20px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDetails .employeeDetails-name {
  display: flex;
  align-items: center;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDetails .employeeDetails-name .name {
  line-height: 25px;
  font-size: 14px;
  font-weight: 400;
  color: #00adef;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 15px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDetails .employeeDetails-name .name > span:first-child:hover + .progressArrow {
  opacity: 1;
  right: 2px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDetails .employeeDetails-name .name > .progressArrow {
  position: absolute;
  right: 10px;
  top: 1px;
  font-size: 12px;
  opacity: 0;
  z-index: 99;
  height: 26px;
  line-height: 26px;
  color: #00adef;
  transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDetails .totalDuration {
  float: left;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  font-weight: bold;
  width: 100%;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDetails .totalDuration .durationLabel {
  color: #999;
  font-size: 12px;
  font-weight: 400;
  float: left;
  width: 70px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDetails employee-clock-label {
  margin-left: -25px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays {
  width: 100%;
  display: flex;
  height: 100%;
  float: left;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay {
  float: left;
  text-align: center;
  margin: 15px 5px;
  width: calc(100% / 7);
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay:hover {
  background-color: #fafafa !important;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay:active {
  background-color: #eee !important;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay:hover .segment {
  width: 6px;
  cursor: default;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay:hover .employeeDayDuration .durationContainer .duration-andPredicted.animate {
  left: 0;
  transition: 0.25s ease left;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay:hover .employeeDayDuration .durationContainer .duration-andPredicted.animate .employeeDayPredicted {
  opacity: 1 !important;
  transition: 0.25s ease opacity;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay.hasExpectedHours {
  background-color: #f9f9f9;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay.hasExpectedHours:hover {
  background-color: #f4f4f4 !important;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay.hasExpectedHours:active {
  background-color: #eee !important;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .ph-whatsThisContainer {
  left: 16px;
  bottom: 10px;
  width: 12px;
  height: 12px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .ph-whatsThisContainer .ph-whatsThis {
  opacity: 0.795;
  width: 100%;
  height: 100%;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .segmentState {
  width: 100%;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .segmentState div {
  height: 12px;
  width: 12px;
  border-radius: 2px;
  float: left;
  margin-right: 5px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .day-tooltipOpener segment-list-popover,
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .ph-whatsThisContainer segment-list-popover {
  width: 100%;
  height: 100%;
  z-index: 100;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration {
  width: 100%;
  height: 100px;
  font-size: 17px;
  font-weight: 550;
  color: #333;
  cursor: pointer;
  user-select: none;
  padding: 10px 8px 10px 16px;
  display: grid;
  line-height: 14px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .leave {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: fit-content;
  align-items: start;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .leave .leaveLabels {
  display: inline-flex;
  flex-wrap: wrap;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .leave .leaveLabels .leaveLabel .labelSmall {
  font-size: smaller;
  left: -4px;
  position: relative;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .leave .approvedTag {
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .durationContainer,
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .predictedDuration {
  align-self: end;
  justify-self: end;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .durationContainer .duration-break,
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .predictedDuration .duration-break {
  font-size: 13px;
  color: #999;
  text-align: end;
  margin-bottom: 7px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .durationContainer .duration-andPredicted,
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .predictedDuration .duration-andPredicted {
  display: flex;
  align-items: end;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .durationContainer .duration-andPredicted.animate,
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .predictedDuration .duration-andPredicted.animate {
  position: relative;
  left: 100%;
  transition: 0.25s ease left;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .durationContainer .duration-andPredicted.animate .durationOuter,
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .predictedDuration .duration-andPredicted.animate .durationOuter {
  position: absolute;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .durationContainer .duration-andPredicted.animate .durationOuter .duration,
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .predictedDuration .duration-andPredicted.animate .durationOuter .duration {
  position: relative;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .durationContainer .duration-andPredicted.animate .durationOuter .duration .durationString,
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .predictedDuration .duration-andPredicted.animate .durationOuter .duration .durationString {
  position: relative;
  left: -100%;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .durationContainer .duration-andPredicted.animate .employeeDayPredicted,
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .predictedDuration .duration-andPredicted.animate .employeeDayPredicted {
  margin-left: 1px;
  opacity: 0;
  transition: 0.25s ease opacity;
  color: #999;
  font-weight: 400;
  font-size: 12px;
  line-height: 10px;
  cursor: pointer;
  display: inline;
  align-self: end;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .durationContainer .duration-andPredicted.animate .employeeDayPredicted .predicted,
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration .predictedDuration .duration-andPredicted.animate .employeeDayPredicted .predicted {
  display: flex;
}
@media screen and (max-width: 1150px) {
  time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration {
    font-size: 15px;
  }
  time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .employeeDayDuration.leave {
    font-size: 15px;
    line-height: 20px;
  }
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .segment {
  height: 90px;
  width: 4px;
  position: absolute;
  top: 3px;
  left: 6px;
  bottom: 0;
  transition: width 0.25s ease-out;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .segment > div {
  width: 100%;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .segment > div > div {
  border-radius: 2px;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .segment div .projectColor {
  width: 100%;
  height: 100%;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .segment div .projectDesc {
  padding: 1px 0 0 5px;
  color: #fff;
  text-align: left;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .segment .projectTitle {
  float: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: calc(100% - 39px);
  text-align: left;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-employeeContainer .employeeDays .employeeDay .segment .projectDuration {
  float: right;
}
time-summary-panel-directive .tSummary-container .tSummary-contentScroll .tSummary-emptyWeek {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #999;
  font-weight: 200;
  margin-top: 200px;
}
ph-drop-down .dropdown-toggle {
  font-size: 18px;
  padding: 0;
  width: 34px;
}
.PHDropDownList {
  min-width: 220px;
  width: 220px;
}
.PHDropDownItem {
  line-height: 34px;
  cursor: pointer;
  padding-left: 15px;
  position: relative;
}
.PHDropDownItem > span {
  font-size: 12px !important;
}
.PHDropDownItem:hover {
  background-color: #337ab7;
  color: #fafafa;
}
.PHDropDownItem-color {
  position: absolute;
  left: 10px;
  top: 5px;
  bottom: 5px;
  border-radius: 3px;
  width: 5px;
  height: 20px;
  margin: 2px 10px 2px 0;
}
.labelDD-container {
  position: relative;
  height: 34px;
}
.labelDD-container > button {
  height: 34px;
  width: 100%;
  min-width: 100px;
  background-color: #FFFFFF;
  padding: 6px 12px;
}
.labelDD-container > button.labelsToggled {
  background-color: rgba(94, 178, 46, 0.08);
  border-color: #5eb22e;
  color: #5eb22e;
}
.labelDD-container > button > span:first-child {
  float: left;
  margin-right: 10px;
}
.labelDD-container > button > span:last-child {
  font-size: 10px;
  float: right;
  margin-top: 4px;
}
.labelDD {
  width: 280px;
  margin: 5px 0 0 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.14902);
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.172549) 0 6px 12px 0;
  background-color: #FFFFFF;
  position: absolute;
  z-index: 100;
  min-height: 20px;
}
.labelDD > .labelDD-header {
  width: 100%;
  height: 44px;
  padding: 5px 10px 0 10px;
  position: relative;
}
.labelDD > .labelDD-header > button.labelDD-add {
  position: absolute;
  z-index: 30;
  color: #fff;
  width: 24px;
  height: 24px;
  padding: 0;
  top: 10px;
  margin-left: 5px;
  right: 15px;
  font-size: 17px !important;
  float: right;
}
.labelDD > .labelDD-header > button.labelDD-add:disabled {
  color: #777777;
}
.labelDD > .labelDD-header > .ion-ios-search-strong {
  position: absolute;
  font-size: 14px;
  left: 20px;
  top: 22px;
  color: #ccc;
}
.labelDD > .labelDD-header > .labelDD-search {
  float: left;
  height: 34px;
  width: 100%;
  padding: 0 12px 0 25px;
}
.labelDD > .labelDD-header > .labelDD-search:focus {
  outline: none;
}
.labelDD > .labelDD-header > .labelDD-color {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 42px;
  top: 10px;
  z-index: 20;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
.labelDD > .labelDD-header > .labelDD-color > .sp-replacer {
  width: 24px;
  height: 24px;
  padding: 0;
}
.labelDD > .labelDD-header > .labelDD-color > .sp-replacer > .sp-preview {
  margin: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.labelDD > .labelDD-header > .labelDD-color > .sp-replacer > .sp-dd {
  width: 23px;
  top: 3px;
  font-size: 7px;
}
.labelDD .labelDD-list {
  padding: 10px;
  overflow: auto;
  max-height: 600px;
}
.labelDD .labelDD-list .reportLabel {
  height: 26px;
  line-height: 26px;
  color: #fafafa;
  border-radius: 2px;
  float: left;
  font-size: 12px;
  margin: 3px;
  padding: 0 10px;
  cursor: pointer;
  position: relative;
}
.labelDD .labelDD-list .reportLabel:hover {
  color: #fff;
  -webkit-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
}
.labelDD .labelDD-list > .reportLabelRow {
  width: 100%;
  height: 38px;
  padding: 6px 10px;
  cursor: pointer;
}
.labelDD .labelDD-list > .reportLabelRow:hover {
  background-color: #FAFAFA;
}
.labelDD .labelDD-list > .reportLabelRow:active {
  background-color: #eee;
}
.labelDD .labelDD-list > .reportLabelRow:last-child {
  border-bottom: none;
}
.labelDD .labelDD-list > .reportLabelRow .reportLabel {
  margin: 0;
  padding-left: 28px;
  width: 100%;
}
.labelDD .labelDD-list > .reportLabelRow .reportLabel:hover {
  box-shadow: none;
}
.labelDD .labelDD-list > .reportLabelRow .reportLabel .reportLabelToggle {
  height: 8px;
  width: 8px;
  line-height: 8px;
  border-radius: 2px;
  position: absolute;
  left: 10px;
  top: 9px;
  background-color: #ffffff;
}
.labelDD .labelDD-list > .noResults {
  width: 100%;
  min-height: 40px;
  padding: 10px;
  line-height: 20px;
  color: #888888;
  font-size: 12px;
}
pay-cycle-selector {
  display: inline-block;
  float: left;
  width: 550px;
}
pay-cycle-selector list-drop-down {
  width: 250px;
}
pay-cycle-selector list-drop-down button {
  min-width: 250px !important;
}
pay-cycle-selector .cycleSelectorLabel,
pay-cycle-selector .periodSelectorLabel {
  height: 18px;
  line-height: 18px;
  width: 100%;
  color: #999999;
  margin-bottom: 5px;
}
pay-cycle-selector .cycleSelectorContainer {
  height: 62px;
  float: left;
  margin-right: 25px;
}
pay-cycle-selector .cycleSelectorContainer .btn-group {
  height: 34px;
  width: 250px;
}
pay-cycle-selector .cycleSelectorContainer .btn-group > button {
  width: 250px;
}
pay-cycle-selector .cycleSelectorContainer .btn-group > button > div:first-child {
  float: left;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
pay-cycle-selector .cycleSelectorContainer .btn-group > button[disabled] {
  color: #333 !important;
  opacity: 1;
}
pay-cycle-selector .cycleSelectorContainer.isReview {
  height: 34px;
  margin-left: 15px;
}
pay-cycle-selector .cycleSelectorContainer.isReview > .cycleSelectorLabel {
  display: none;
}
pay-cycle-selector .periodSelectorContainer {
  height: 62px;
  float: left;
  padding: 0 20px;
}
pay-cycle-selector .periodSelectorContainer .periodSelector > button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  float: left;
  padding: 6px !important;
}
pay-cycle-selector .periodSelectorContainer .periodSelector > div {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
}
pay-cycle-selector .periodSelectorContainer .periodSelector > div span {
  color: #999;
  font-weight: 300;
}
pay-cycle-selector .periodSelectorContainer .periodSelector > .periodPicker {
  float: left;
  margin-right: 0;
  position: relative;
  width: 34px;
}
pay-cycle-selector .periodSelectorContainer .periodSelector > .periodPicker > button {
  min-width: 34px;
  width: 34px;
  height: 34px;
  top: 0;
  bottom: 0;
  padding: 6px !important;
  float: left;
  z-index: 2;
}
pay-cycle-selector .periodSelectorContainer .periodSelector > .periodPicker > input {
  width: 1px;
  border: none;
  padding: 0;
  float: left;
  border-left: 1px solid #dcdcdc;
  right: 1px;
  position: absolute;
  z-index: 1;
}
pay-cycle-selector .customPeriodSelector {
  float: left;
}
pay-cycle-selector .periodSelectorContainer {
  padding: 0 30px;
}
pay-cycle-selector .customPeriodSelector > .ph-stat {
  padding: 0 30px;
}
input-date-picker {
  width: 100%;
  height: 34px;
  display: inline-block;
}
input-date-picker .inputDatePicker {
  width: 100%;
}
input-date-picker .inputDatePicker input[disabled] {
  box-shadow: none !important;
}
input-date-picker .inputDatePicker span.input-group-btn {
  width: 34px;
}
input-date-picker .inputDatePicker span.input-group-btn button {
  width: 34px;
  padding: 6px;
  background-color: #eee;
}
input-link-date-picker .inputLinkDatePickerBtn {
  padding: 0;
  border: none;
  font-size: 18px;
  line-height: 34px;
  height: 34px;
  font-weight: 600;
  color: #00adef;
}
leave-calendar {
  display: table;
  width: 100%;
  opacity: 1;
  transition: all 0.5s ease;
}
leave-calendar > div {
  position: relative;
}
leave-calendar .weekRow,
leave-calendar .calDatesRow,
leave-calendar .calDateCell {
  transition: height 0.5s, line-height 0.5s, border-width 0.5s;
}
leave-calendar .weekRow.ng-hide.ng-hide-animate,
leave-calendar .calDatesRow.ng-hide.ng-hide-animate,
leave-calendar .calDateCell.ng-hide.ng-hide-animate,
leave-calendar .weekRow.ng-leave,
leave-calendar .calDatesRow.ng-leave,
leave-calendar .calDateCell.ng-leave {
  display: none !important;
}
leave-calendar.collapseLeave {
  opacity: 0;
}
leave-calendar.collapseLeave .weekRow,
leave-calendar.collapseLeave .calDatesRow {
  height: 0 !important;
  border-width: 0 !important;
}
leave-calendar.collapseLeave .weekRow .calDateCell,
leave-calendar.collapseLeave .calDatesRow .calDateCell {
  line-height: 0px !important;
}
leave-calendar .calDatesRow {
  width: 100%;
  height: 40px;
  display: flex;
}
leave-calendar .calDatesRow .calDateCell {
  position: relative;
  height: 40px;
  width: calc(100% / 7);
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  align-self: flex-end;
}
leave-calendar .calContainer {
  width: 100%;
  height: auto;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
}
leave-calendar .calContainer > .weekRow {
  display: flex;
  width: 100%;
  height: 110px;
  border-bottom: 1px solid #DDDDDD;
}
leave-calendar .calContainer > .weekRow:last-child {
  border-bottom: none;
}
leave-calendar .calContainer > .weekRow > .dayCell {
  width: calc(100% / 7);
  height: 100%;
  border-left: 1px solid #DDDDDD;
  float: left;
  position: relative;
  transition: transform 0.25s ease-out, z-index 0.25s ease-out;
}
leave-calendar .calContainer > .weekRow > .dayCell.hasLeave:hover {
  background-color: #f4f4f4 !important;
}
leave-calendar .calContainer > .weekRow > .dayCell.hasLeave:active {
  background-color: #eee !important;
}
leave-calendar .calContainer > .weekRow > .dayCell:first-child {
  border-left: none;
}
leave-calendar .calContainer > .weekRow > .dayCell .dayDate {
  width: 30px;
  height: 100%;
  line-height: 30px;
  text-align: center;
  position: relative;
  float: left;
  font-size: 14px;
}
leave-calendar .calContainer > .weekRow > .dayCell .dayDate.isToday {
  font-weight: bold;
}
leave-calendar .calContainer > .weekRow > .dayCell .dayDate > .isToday {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 5px;
  height: 5px;
  background: #00adef;
  border-radius: 30px;
}
leave-calendar .calContainer > .weekRow > .dayCell .dayHoliday {
  position: absolute;
  bottom: 10px;
  left: 10px;
  margin-right: 5px;
  font-size: 10px;
}
leave-calendar .calContainer > .weekRow > .dayCell .iconContainer {
  width: calc(100% - 30px);
  height: 100%;
  float: left;
}
leave-calendar .calContainer > .weekRow > .dayCell .iconContainer .leaveIcon {
  width: 26px;
  height: 26px;
  margin: 5px 3px;
  border-radius: 20px;
  background-color: #00adef;
  float: left;
  border: 1px solid rgba(0, 0, 0, 0);
}
leave-calendar .calContainer > .weekRow > .dayCell .iconContainer .leaveIcon > div {
  color: #fff;
  text-align: center;
  height: 24px;
  line-height: 24px;
  width: 24px;
  letter-spacing: -1px;
  font-size: 11px;
}
leave-calendar .calContainer > .weekRow > .dayCell .selectedLeaveCell {
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  opacity: 0;
  transition: 0.2s ease-in;
}
leave-calendar .calContainer > .weekRow > .dayCell .otherMonth {
  color: #DDDDDD;
}
leave-calendar .dayCellPopover {
  width: 400px;
  background-color: #ffffff;
}
leave-calendar .dayCellPopover .leaveListHeader,
leave-calendar .dayCellPopover .leaveListContainer {
  position: absolute;
  left: 0;
  transition: 0.3s ease-in;
  opacity: 1;
}
leave-calendar .dayCellPopover .leaveDetailsHeader,
leave-calendar .dayCellPopover .leaveDetailsContainer {
  position: absolute;
  left: 350px;
  transition: 0.3s ease-in;
  opacity: 0;
}
leave-calendar .dayCellPopover > .popoverHeader {
  height: 61px;
  width: 100%;
  background-color: #F9F9F9;
  border-bottom: 1px solid #DDDDDD;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
}
leave-calendar .dayCellPopover > .popoverHeader .leaveListHeader,
leave-calendar .dayCellPopover > .popoverHeader .leaveDetailsHeader {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding: 0 15px;
  width: 100%;
}
leave-calendar .dayCellPopover > .popoverHeader .leaveListHeader > span {
  color: #999;
  font-weight: 200;
}
leave-calendar .dayCellPopover > .popoverHeader .leaveDetailsHeader {
  position: relative;
}
leave-calendar .dayCellPopover > .popoverHeader .leaveDetailsHeader > * {
  float: left;
}
leave-calendar .dayCellPopover > .popoverHeader .leaveDetailsHeader .leaveHeaderBackCol {
  width: 34px;
  height: 34px;
  text-align: center;
  cursor: pointer;
  color: #999;
  position: absolute;
  left: 10px;
  top: 3px;
  border-radius: 2px;
  background-color: #f4f4f4;
}
leave-calendar .dayCellPopover > .popoverHeader .leaveDetailsHeader .leaveHeaderBackCol:hover {
  background-color: #efefef;
}
leave-calendar .dayCellPopover > .popoverHeader .leaveDetailsHeader .leaveHeaderBackCol:active {
  background-color: #ddd;
}
leave-calendar .dayCellPopover > .popoverHeader .leaveDetailsHeader .leaveHeaderBackCol:before {
  top: -2px;
  left: -1px;
  position: relative;
}
leave-calendar .dayCellPopover > .popoverHeader .leaveDetailsHeader .leaveHeaderIcon {
  color: #fff;
  text-align: center;
  height: 26px;
  line-height: 26px;
  width: 26px;
  font-size: 11px;
  border-radius: 100px;
  position: relative;
  margin-right: 10px;
  top: 7px;
}
leave-calendar .dayCellPopover > .popoverHeader .leaveDetailsHeader .leaveHeaderNameCol {
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 20px;
  width: calc(100% - 75px);
}
leave-calendar .dayCellPopover > .popoverHeader .leaveDetailsHeader .btn-edit-sm {
  margin-top: 4px;
}
leave-calendar .dayCellPopover > .popoverContents {
  width: 100%;
  padding: 10px 0;
  transition: 0.3s ease-in;
  position: relative;
  overflow: hidden;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer {
  width: 100%;
  transition: 0.3s ease-in;
  overflow-y: auto;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  border-radius: 2px;
  cursor: pointer;
  padding: 0 15px;
  position: relative;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem:hover {
  background-color: #fafafa;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem:active {
  background-color: #eee;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem > * {
  float: left;
  height: 50px;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem .leaveColorCol {
  width: 15px;
  padding: 5px 10px 5px 0;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem .leaveColorCol > div {
  width: 5px;
  height: 40px;
  border-radius: 5px;
  background-color: #00adef;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem .leaveNameCol {
  width: 205px;
  color: #00adef;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem .leaveNameCol > div:first-child {
  padding-top: 7px;
  height: 24px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem .leaveNameCol > div:last-child {
  height: 16px;
  line-height: 20px;
  font-size: 10px;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem .leaveDateCol {
  width: 125px;
  text-align: right;
  font-size: 12px;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem .leaveDateCol span {
  color: #999;
}
leave-calendar .dayCellPopover > .popoverContents .leaveListContainer .leaveListItem .leaveArrowCol {
  position: absolute;
  width: 15px;
  text-align: right;
  color: #ccc;
  font-size: 12px;
  opacity: 1;
  transition: 0.2s ease-in;
  right: 20px;
}
leave-calendar .dayCellPopover > .popoverContents .leaveDetailsContainer {
  padding: 0 10px;
  width: 100%;
  border: none;
  height: 120px;
}
leave-calendar .dayCellPopover > .popoverContents .leaveDetailsContainer .detailsRow {
  width: 95%;
  display: block;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
}
leave-calendar .dayCellPopover > .popoverContents .leaveDetailsContainer .detailsRow .ion-ios-box-outline {
  margin-right: 5px;
  top: 2px;
}
leave-calendar .dayCellPopover > .popoverContents .leaveDetailsContainer .detailsRow .rowLabel {
  float: left;
  color: #999;
  width: 120px;
}
leave-calendar .dayCellPopover > .popoverContents .leaveDetailsContainer .detailsRow .rowValue {
  float: right;
  text-align: right;
  width: calc(100% - 120px);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
leave-calendar .dayCellPopover > .popoverContents .leaveDetailsContainer .detailsRow .rowValue > ph-drop-down {
  float: right;
  margin-top: 5px;
  margin-left: 10px;
}
leave-calendar .dayCellPopover > .popoverContents .leaveDetailsContainer .detailsRow .rowValue > span {
  color: #999;
}
leave-calendar .dayCellPopover > .popoverContents .leaveDetailsContainer .detailsRow .rowValue .selectedLeaveColor {
  margin-top: -1px;
  display: inline-block;
  position: relative;
  height: 20px;
  width: 4px;
  border-radius: 2px;
  margin-right: 7px;
  top: 6px;
}
leave-calendar .dayCellPopover > .popoverContents .leaveDetailsContainer .detailsRow .rowValue list-drop-down {
  top: 3px;
}
week-selector {
  position: relative;
  width: 337px;
  height: 34px;
  float: left;
}
week-selector > button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  float: left;
  padding: 6px !important;
}
week-selector > button.weekSelector-selectDateBtn {
  margin-left: 5px;
}
week-selector > div {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 18px;
  font-weight: 600;
  margin: 0 10px;
  width: 210px;
  text-align: center;
}
week-selector > div span {
  color: #999;
  font-weight: 300;
}
year-selector {
  position: relative;
  width: 168px;
  height: 34px;
  float: left;
}
year-selector > button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  float: left;
  padding: 6px !important;
}
year-selector > div {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 18px;
  font-weight: 600;
  margin: 0 10px;
  width: 80px;
  text-align: center;
}
timesheets-table .tsTable-content {
  width: 100%;
}
timesheets-table .tsTable-content .tsTable-headerDates {
  display: flex;
  width: 100%;
}
timesheets-table .tsTable-content .tsTable-headerDates .tsTable-headerDate {
  width: calc(100% / 7);
}
time-summary-panel-directive .tsTable-content {
  width: calc(100% + 18px);
}
time-summary-panel-directive .tsTable-content .tsTable-headerDates {
  display: flex;
  width: calc(100% + 18px);
}
time-summary-panel-directive .tsTable-content .tsTable-headerDates .tsTable-headerDate {
  width: calc(100% / 7);
}
timesheets-table,
time-summary-panel-directive {
  width: 100%;
}
timesheets-table .tsTable-headerFilterstsTable-headerFilters,
time-summary-panel-directive .tsTable-headerFilterstsTable-headerFilters {
  width: 100%;
  border: solid 1px #ccc;
  border-radius: 2px;
  padding: 20px;
  background-color: #f4f4f4;
  height: 77px;
  margin-bottom: 30px;
}
timesheets-table .tsTable-headerFilterstsTable-headerFilters .tsTable-headerDropDowns,
time-summary-panel-directive .tsTable-headerFilterstsTable-headerFilters .tsTable-headerDropDowns {
  float: right;
  width: calc(100% - 402px);
  height: 35px;
}
timesheets-table .tsTable-headerFilterstsTable-headerFilters .tsTable-headerDropDowns .tsTable-headerDropDownContainer,
time-summary-panel-directive .tsTable-headerFilterstsTable-headerFilters .tsTable-headerDropDowns .tsTable-headerDropDownContainer {
  width: calc(100% / 3);
  height: 100%;
  float: right;
  padding: 0 7px 0 0;
}
timesheets-table .tsTable-content,
time-summary-panel-directive .tsTable-content {
  height: calc(100vh - 355px);
  position: relative;
}
timesheets-table .tsTable-content .tsTable-headerDates,
time-summary-panel-directive .tsTable-content .tsTable-headerDates {
  margin-top: 30px;
  height: 40px;
  padding-left: 245px;
  padding-right: 192px;
  border-bottom: solid 1px #ccc;
  position: relative;
}
timesheets-table .tsTable-content .tsTable-headerDates .tsTable-headerDate,
time-summary-panel-directive .tsTable-content .tsTable-headerDates .tsTable-headerDate {
  height: 40px;
  position: relative;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  align-self: flex-end;
}
timesheets-table .tsTable-content .tsTable-headerDates .tsTable-totalHoursHeading,
time-summary-panel-directive .tsTable-content .tsTable-headerDates .tsTable-totalHoursHeading {
  position: absolute;
  font-size: 14px;
  right: 50px;
  top: 0;
  font-weight: 400;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter {
  width: 100%;
  max-height: calc(100vh - 395px);
  overflow-y: auto;
  z-index: 10;
  -webkit-overflow-scrolling: touch;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-noRows,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-noRows {
  width: 100%;
  height: 150px;
  line-height: 150px;
  font-size: 14px;
  font-weight: 200;
  color: #999;
  text-align: center;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner {
  width: calc(100% - 15px);
  height: calc(100% - 10px);
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer {
  width: 100%;
  margin: 10px 0 15px 0;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow {
  height: 37px;
  line-height: 26px;
  font-size: 14px;
  padding: 4px 10px 7px 2px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow > div,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow > div {
  height: 26px;
  cursor: pointer;
  color: #00adef;
  float: left;
  position: relative;
  margin-right: 20px;
  min-width: 230px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow > div > span:first-child,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow > div > span:first-child {
  float: left;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow > div > span:first-child:hover + .progressArrow,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow > div > span:first-child:hover + .progressArrow {
  opacity: 1;
  margin-left: 5px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow > div > .progressArrow,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow > div > .progressArrow {
  float: left;
  font-size: 12px;
  opacity: 0;
  z-index: 99;
  height: 26px;
  line-height: 26px;
  color: #00adef;
  transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow > span,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeNameRow > span {
  float: left;
  text-align: right;
  font-size: 12px;
  color: #999;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows {
  width: 100%;
  overflow: hidden;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd {
  width: 47px;
  height: 52px;
  padding: 8px 13px 8px 0;
  float: left;
  position: relative;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div {
  position: absolute;
  top: 8px;
  left: 0;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > button,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > button {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 16px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > ul,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > ul {
  width: 100%;
  font-size: 12px;
  margin-top: 5px;
  max-height: 300px;
  overflow: auto;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > ul > li,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > ul > li {
  width: 100%;
  height: 30px;
  font-weight: normal;
  line-height: 30px;
  cursor: pointer;
  padding: 0 0 0 10px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > ul > li .task-color,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > ul > li .task-color {
  width: 5px;
  height: 20px;
  float: left;
  margin: 5px 5px 5px 0;
  border-radius: 3px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > ul > li:hover,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > ul > li:hover {
  background-color: #efefef;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > button,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskAdd > div > button {
  width: 34px;
  height: 34px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer {
  width: calc(100% - 60px);
  float: left;
  background-color: #f9f9f9;
  border: solid 1px #ddd;
  border-radius: 2px;
  position: relative;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer {
  float: left;
  width: 100%;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow {
  height: 50px;
  position: relative;
  width: 100%;
  padding: 10px 0;
  opacity: 1;
  transition: opacity 0.25s ease-out, height 0.25s ease-out, padding 0.25s ease-out;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow .taskColor,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow .taskColor,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow .taskName,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow .taskName,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow .taskDelete,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow .taskDelete,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow input,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow input {
  height: 30px !important;
  transition: height 0.25s ease-out;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave.ng-leave-active,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave.ng-leave-active {
  opacity: 0;
  height: 0;
  padding: 0;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter .taskColor,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter .taskColor,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave.ng-leave-active .taskColor,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave.ng-leave-active .taskColor,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter .taskName,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter .taskName,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave.ng-leave-active .taskName,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave.ng-leave-active .taskName,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter .taskDelete,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter .taskDelete,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave.ng-leave-active .taskDelete,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave.ng-leave-active .taskDelete,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter input,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter input,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave.ng-leave-active input,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave.ng-leave-active input {
  height: 0 !important;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter.ng-enter-active,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter.ng-enter-active {
  opacity: 1;
  height: 50px;
  padding: 10px 0;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave .taskColor,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave .taskColor,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter.ng-enter-active .taskColor,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter.ng-enter-active .taskColor,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave .taskName,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave .taskName,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter.ng-enter-active .taskName,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter.ng-enter-active .taskName,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave .taskDelete,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave .taskDelete,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter.ng-enter-active .taskDelete,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter.ng-enter-active .taskDelete,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave input,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-leave input,
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter.ng-enter-active input,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow.ng-enter.ng-enter-active input {
  height: 30px !important;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskColor,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskColor {
  width: 5px;
  height: 30px;
  margin: 0 10px;
  border-radius: 2px;
  float: left;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskName,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskName {
  float: left;
  height: 30px;
  padding-right: 10px;
  line-height: 30px;
  width: 170px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskName > i,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskName > i {
  margin-right: 5px;
  padding-left: 1px;
  color: #aaa;
  top: 2px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskName span,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskName span {
  color: #999999;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .noProjectBlocks,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .noProjectBlocks {
  width: 100%;
  padding-left: 120px;
  text-align: center;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .noProjectBlocks .btn,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .noProjectBlocks .btn {
  height: 30px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .noProjectBlocks span,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .noProjectBlocks span {
  color: #999999;
  height: 30px;
  line-height: 30px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskDays,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskDays {
  display: flex;
  width: calc(100% - 350px);
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskDays > input,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskDays > input {
  width: calc((100% / 7) - 10px);
  margin: 0 5px;
  float: left;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  text-align: center;
  background-color: #ffffff;
  box-shadow: none !important;
  padding: 6px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskDays > input.disabledTaskDay,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskDays > input.disabledTaskDay {
  background-color: #efefef;
  pointer-events: none;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskDelete,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskDelete {
  width: 24px;
  height: 30px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskDelete > i,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .taskDelete > i {
  line-height: 30px;
  text-align: center;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .totalHours,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .totalHours {
  width: 120px;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 15px;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .totalHours > div,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .totalHours > div {
  color: #333;
  text-align: right;
  width: 100%;
  font-size: 15px;
  font-weight: bold;
}
timesheets-table .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .totalHours > div > span:first-child,
time-summary-panel-directive .tsTable-content .tsTable-contentScrollOuter .tsTable-contentScrollInner .tsTable-employeeContainer > .employeeProjectRows > .taskOuterContainer > .taskInnerContainer > .taskRow > .totalHours > div > span:first-child {
  color: #999;
  font-size: 12px;
  font-weight: 400;
}
employee-time-table {
  display: block;
  padding: 10px 0 50px 0;
  position: relative;
  float: left;
  width: 100%;
}
employee-time-table .table-header {
  width: 100%;
  height: 50px;
  position: relative;
  z-index: 10;
  display: flex;
}
employee-time-table .table-header .table-headerTabContainer {
  width: calc(100% / 7 - 20px);
  height: 40px;
  float: left;
  margin: 0 10px;
}
employee-time-table .table-header .table-headerTabContainer .table-headerTab {
  width: 100%;
  position: relative;
  height: 30px;
  border: 1px solid #dddddd;
  background-color: #f9f9f9;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease-out;
}
employee-time-table .table-header .table-headerTabContainer .table-headerTab .table-timeNumber {
  position: absolute;
  top: calc(50% - 14px);
  left: calc(50% - 18px);
}
employee-time-table .table-header .table-headerTabContainer .table-headerTab .ion-arrow-up-b,
employee-time-table .table-header .table-headerTabContainer .table-headerTab .ion-arrow-down-b {
  font-size: 11px;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}
employee-time-table .table-header .table-headerTabContainer .table-headerTab.table-headerSelectedTab {
  width: 100%;
  height: 50px;
  background-color: #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  transition: all 0.25s ease-out;
}
employee-time-table .table-header .table-headerTabContainer:hover .table-headerTab {
  background-color: #f2f2f2;
}
employee-time-table .table-header .table-headerTabContainer:hover .table-headerTabArrowInner {
  border-top: 9px solid #f2f2f2;
}
employee-time-table .table-rowContainer {
  width: 100%;
  border: 1px solid #dddddd;
  border-radius: 2px;
  position: relative;
  top: -1px;
  z-index: 1;
}
employee-time-table .table-rowContainer .table-rowHeader {
  width: 100%;
  height: 60px;
  background-color: #f4f4f4;
}
employee-time-table .table-rowContainer .table-rowHeader .table-rowHeaderDate {
  float: left;
  height: 30px;
  font-weight: 600;
  line-height: 30px;
  margin: 15px 20px 15px 20px;
  font-size: 16px;
}
employee-time-table .table-rowContainer .table-taskRow {
  width: 100%;
  position: relative;
  border-top: 1px solid #dddddd;
  box-shadow: none;
  overflow: hidden;
  transition: height 0.3s ease-out, padding 0.3s ease-out;
  height: 105px;
  padding: 15px 0 15px 0;
}
employee-time-table .table-rowContainer .table-taskRow.ng-enter,
employee-time-table .table-rowContainer .table-taskRow.ng-leave.ng-leave-active {
  height: 0;
  padding: 0;
}
employee-time-table .table-rowContainer .table-taskRow.ng-leave,
employee-time-table .table-rowContainer .table-taskRow.ng-enter.ng-enter-active {
  height: 105px;
  padding: 15px 0 15px 0;
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowColor {
  width: 5px;
  margin-left: 10px;
  border-radius: 2px;
  height: 100%;
  float: left;
  background-color: steelblue;
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowInfo {
  height: 30px;
  padding: 4px 15px 0 15px;
  margin-bottom: 10px;
  width: calc(100% - 20px);
  float: left;
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowInfo > div {
  width: 50%;
  height: 20px;
  float: left;
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowInfo > div .taskRowTitle {
  font-size: 14px;
  cursor: default;
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowInfo > div .taskRowTitle i {
  color: #aaa;
  margin-right: 5px;
  top: 1px;
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowInfo > div.taskRowTotalContainer {
  text-align: right;
  font-size: 15px;
  position: relative;
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowInfo > div.taskRowTotalContainer > span {
  font-size: 12px;
  color: #999;
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowInfo .ion-ios-close-empty.sm-close.removeProjectRow {
  right: 0;
  top: 10px;
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowInfo .ion-ios-close-empty.sm-close.removeProjectRow:hover {
  right: -3px;
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowDays {
  height: 30px;
  display: flex;
  width: calc(100% - 35px);
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowDays .table-taskRowDay {
  width: calc(100% / 7);
  height: 30px;
  margin-left: 15px;
  float: left;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  text-align: center;
  line-height: 30px;
  box-shadow: none !important;
  transition: none !important;
}
employee-time-table .table-rowContainer .table-taskRow .table-taskRowDays .table-taskRowDay.disabledTaskRowDay {
  background-color: #efefef;
  pointer-events: none;
}
employee-time-table .table-newRow {
  width: 100%;
  height: 64px;
  padding: 15px;
  border-top: 1px solid #dddddd;
}
employee-time-table .table-newRow .table-newRow-noTime {
  float: left;
  height: 34px;
  line-height: 34px;
  width: calc(100% - 34px);
  text-align: center;
  color: #999;
  font-size: 12px;
  font-weight: 100;
}
employee-time-table .table-segmentRow {
  position: relative;
  width: 100%;
  border-top: 1px solid #dddddd;
  overflow: hidden;
  transition: height 0.5s, padding 0.5s;
  height: 90px;
  padding: 15px 21px 15px 0;
  display: flex;
  justify-content: flex-start;
}
employee-time-table .table-segmentRow.ng-enter,
employee-time-table .table-segmentRow.ng-leave.ng-leave-active {
  height: 0;
  padding: 0 21px 0 0;
}
employee-time-table .table-segmentRow.ng-leave,
employee-time-table .table-segmentRow.ng-enter.ng-enter-active {
  height: 90px;
  padding: 15px 21px 15px 0;
}
employee-time-table .table-segmentRow .table-segmentRow-left {
  min-width: 300px;
}
employee-time-table .table-segmentRow .table-segmentRow-left .table-segmentRowColor {
  width: 5px;
  margin: 0 15px 0 10px;
  border-radius: 2px;
  height: 100%;
  background-color: steelblue;
  float: left;
}
employee-time-table .table-segmentRow .table-segmentRow-left .table-segmentRowDetail {
  height: 100%;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}
employee-time-table .table-segmentRow .table-segmentRow-left .table-segmentRowDetail .table-segmentRowProject b {
  font-size: 14px;
}
employee-time-table .table-segmentRow .table-segmentRow-left .table-segmentRowDetail .table-segmentRowProject b i {
  margin-right: 5px;
  color: #aaa;
}
employee-time-table .table-segmentRow .table-segmentRow-left .table-segmentRowDetail .table-segmentRowTimes {
  font-size: 12px;
  color: #999;
}
employee-time-table .table-segmentRow .table-segmentRow-left .table-segmentRowDetail .table-segmentRowCreditLabel {
  color: #999;
}
employee-time-table .table-segmentRow .table-segmentRow-middle .table-segmentRowClock {
  float: left;
  height: 59px;
  padding: 10px 0 9px 20px;
}
employee-time-table .table-segmentRow .table-segmentRow-middle .table-segmentRowClock .ph-segmentClockInfo > span {
  color: #999;
}
employee-time-table .table-segmentRow .table-segmentRow-middle .table-segmentRowClock .ph-segmentClockInfo b.-clockTime,
employee-time-table .table-segmentRow .table-segmentRow-middle .table-segmentRowClock .ph-segmentClockInfo b.-clockLocation {
  font-weight: 500;
  color: #333;
}
employee-time-table .table-segmentRow .table-segmentRow-end {
  margin-left: auto;
}
employee-time-table .table-segmentRow .table-segmentRow-end .table-segmentRowDuration {
  height: 100%;
  float: right;
}
employee-time-table .table-segmentRow .table-segmentRow-end .table-segmentRowDuration > div {
  float: right;
  height: 40px;
  font-size: 15px;
  line-height: 58px;
  font-weight: bold;
}
employee-time-table .table-segmentRow .table-segmentRow-end .table-segmentRowDuration > div .segmentRowUnit {
  font-size: 12px;
  color: #999;
  font-weight: normal;
  margin-right: 5px;
}
employee-time-table .table-segmentRow .table-segmentRow-end .table-segmentRowDuration > button {
  float: right;
  height: 34px;
  width: 70px;
  padding: 0;
  margin: 10px 0 5px 20px;
  line-height: 16px;
}
employee-time-table .table-segmentRow .table-segmentRow-end .table-segmentRowEdit {
  height: 59px;
  width: 54px;
  padding: 13px 20px 12px 0;
  float: right;
}
employee-time-table .table-rowFooter {
  width: 100%;
  height: 65px;
  padding: 15px 21px 15px 15px;
  border-top: 1px solid #dddddd;
  background-color: #f4f4f4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
employee-time-table .table-rowFooter .table-rowFooterButtons {
  display: block;
}
employee-time-table .table-rowFooter .table-rowFooterButtons > * {
  margin-right: 15px;
}
employee-time-table .table-rowFooter .table-rowFooterText {
  height: 20px;
  text-align: right;
  font-size: 20px;
  font-size: 16px;
}
employee-time-table .table-rowFooter .table-rowFooterText > span {
  font-size: 12px;
  color: #999;
  font-weight: normal;
}
employee-time-calendar {
  height: 649px;
  width: 100%;
  display: block;
  overflow: visible;
  -moz-transition: height 0.5s, opacity 0.5s;
  -ms-transition: height 0.5s, opacity 0.5s;
  -o-transition: height 0.5s, opacity 0.5s;
  -webkit-transition: height 0.5s, opacity 0.5s;
  transition: height 0.5s, opacity 0.5s;
}
employee-time-calendar.fadeOut {
  overflow: hidden;
}
employee-time-calendar.fadeOut .vWeek-gridOuterContainerBorder,
employee-time-calendar.fadeOut .vWeek-gridOuterContainer {
  opacity: 0 !important;
}
employee-time-calendar .vWeek-gridDateLabelContainer {
  width: calc(100% + 5px);
  display: flex;
  height: 50px;
}
employee-time-calendar .vWeek-gridDateLabelContainer .vWeek-gridDateLabel {
  position: relative;
  width: calc(100% / 7);
  height: 50px;
  font-size: 14px;
  background-color: #ffffff;
  color: #333;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}
employee-time-calendar .vWeek-gridDateLabelContainer .vWeek-gridDateLabel.vWeek-gridDayToday {
  border-bottom: solid 2px #ccc;
}
employee-time-calendar .vWeek-gridOuterContainerBorder {
  width: calc(100% + 2px);
  height: 1px;
  border-top: 1px solid #dddddd;
  transition: opacity 0.5s;
}
employee-time-calendar .vWeek-gridOuterContainer {
  width: calc(100% + 140px);
  height: 587px;
  margin-left: -120px;
  overflow-y: scroll;
  transition: opacity 0.5s;
  -webkit-overflow-scrolling: touch;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer {
  width: calc(100% - 10px);
  overflow: hidden;
  position: relative;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridTimeLabel.vWeek-gridRowTop,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridCell.vWeek-gridRowTop {
  border-top: none !important;
  height: 59px !important;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridTimeLabelContainer {
  width: 120px;
  height: 100%;
  position: absolute;
  left: 0;
  z-index: 99;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridTimeLabelContainer .vWeek-gridTimeLabel {
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  color: #999;
  text-align: right;
  padding-right: 30px;
  font-size: 12px;
  position: relative;
  top: -3px;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridTimeLabelContainer .vWeek-gridTimeLabel > span:hover {
  cursor: pointer;
  color: #ccc;
}
@media (max-width: 1400px) {
  employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridTimeLabelContainer .vWeek-gridTimeLabel {
    padding-right: 15px;
  }
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridCol {
  float: left;
  border-left: 1px solid #dddddd;
  width: calc((100% - 120px) / 7);
  height: 100%;
  position: absolute;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridCol.vWeek-gridColLast {
  border-right: 1px solid #dddddd;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridCol.vWeek-gridColDisabled .vWeek-gridCell {
  background-color: #efefef;
  pointer-events: none;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridCol .vWeek-gridCell {
  width: 100%;
  height: 60px;
  border-top: 1px solid #dddddd;
  background-color: #fafafa;
  cursor: copy !important;
  position: relative;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridCol .vWeek-gridCell:hover {
  background-color: #efefef;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridCol .vWeek-gridCell.vWeek-gridCellToday {
  background-color: #fdfdfd !important;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer {
  position: absolute;
  width: calc(100% - 120px);
  margin-left: 120px;
  height: 100%;
  z-index: 10;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-newBlock {
  background-color: #0088d6;
  opacity: 0.7;
  border-radius: 2px;
  color: #fafafa;
  cursor: s-resize;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer {
  width: calc(100% - 120px);
  margin-left: 120px;
  overflow: hidden;
  z-index: 20;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer > div {
  pointer-events: none;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer > div li {
  padding: 0 2px 0 2px;
  pointer-events: auto;
  overflow-y: hidden;
  z-index: 20;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer > div li .vWeek-segBlockExtension {
  position: absolute;
  top: 0;
  width: 100%;
  height: 10px;
  cursor: none;
  padding: 5px 0 0 0;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock {
  background-color: #ffffff;
  color: #333;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #dddddd;
  position: relative;
  cursor: move;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock:hover,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock:hover {
  background-color: #fafafa;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock:active,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock:active {
  background-color: #eee;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock.vWeek-segBlockCopy,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock.vWeek-segBlockCopy {
  opacity: 0.7;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockColorBar,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockColorBar {
  width: 5px;
  position: absolute;
  border-radius: 2px;
  left: 5px;
  top: 5px;
  bottom: 5px;
  background-color: #fafafa;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContent,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContent {
  width: 100%;
  padding: 10px 5px 5px 22px;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContent .-segProject,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContent .-segProject {
  font-size: 13px;
  line-height: 1.5;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContent .-segProject i,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContent .-segProject i {
  color: #aaa;
  margin-right: 5px;
  top: 1px;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContent .-segTime,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContent .-segTime {
  font-size: 12px;
  color: #999;
  position: relative;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContent .-segTime i.ion-android-time,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContent .-segTime i.ion-android-time {
  font-size: 16px;
  margin-right: 5px;
  line-height: 16px;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContent .-segTimeMini,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContent .-segTimeMini {
  font-size: 10px;
  line-height: 20px;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContent .-segTimeMini > div:first-child,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContent .-segTimeMini > div:first-child {
  padding-left: 13px;
  float: left;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContent .-segTimeMini > div:last-child,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContent .-segTimeMini > div:last-child {
  float: right;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContent.vWeek-segBlockContentMini,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContent.vWeek-segBlockContentMini {
  padding: 0 5px 0 5px;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContent > div,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContent > div {
  margin-top: 5px;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContinued,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContinued {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10px;
  cursor: none;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContinued > div,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContinued > div,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockExtension > div,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockExtension > div {
  width: 33px;
  height: 5px;
  display: block;
  margin: 0 auto;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockContinued > div > div,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockContinued > div > div,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockExtension > div > div,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockExtension > div > div {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background-color: #eeeeee;
  float: left;
  margin: 0 3px 0 3px;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockHandle,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockHandle {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10px;
  cursor: pointer;
}
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-newBlockGridContainer .vWeek-segBlock .vWeek-segBlockHandle > div,
employee-time-calendar .vWeek-gridOuterContainer .vWeek-gridContainer .vWeek-gridOptionsContainer .vWeek-segBlock .vWeek-segBlockHandle > div {
  width: 20px;
  height: 5px;
  border-radius: 3px;
  background-color: #eeeeee;
  display: block;
  margin: 0 auto;
}
day-selector > div {
  width: 80px;
  height: 34px;
}
day-selector .daySelector-btn {
  width: 80px;
  height: 34px;
  background-color: #f4f4f4;
  border: solid 1px #ccc;
  padding: 0;
}
day-selector .daySelector-btn:focus {
  background-color: #f4f4f4;
}
day-selector .daySelector-btn > span:first-child {
  float: left;
  text-align: left;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
day-selector .daySelector-btn > span:last-child {
  float: right;
  margin: 14px 10px 14px 0;
}
day-selector .daySelector-ul {
  width: 80px;
  min-width: 80px;
  top: 36px;
  cursor: pointer;
  font-size: 12px;
}
day-selector .daySelector-ul > li {
  height: 30px;
}
day-selector .daySelector-ul > li > a {
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
}
day-selector .daySelector-ul > li > a:hover {
  background-image: none;
}
day-selector .daySelector-selectedDay,
day-selector .daySelector-selectedDay:hover > a {
  background-color: #eee !important;
}
time-input .timeInputContainer {
  height: 34px;
}
time-input .timeInputContainer.timeInputDisabled {
  pointer-events: none;
  background-color: #eee;
}
time-input .timeInputContainer input {
  float: left;
  cursor: pointer !important;
  -webkit-appearance: none;
  border: none !important;
  margin: 0 !important;
  font-size: 13px !important;
}
time-input .timeInputContainer input:nth-child(1),
time-input .timeInputContainer input:nth-child(3) {
  max-width: 18px;
  min-width: 18px;
  padding: 1px 0 !important;
}
time-input .timeInputContainer input:nth-child(4) {
  max-width: 30px;
  min-width: 30px;
  padding: 1px 0 1px 3px !important;
}
time-input .timeInputContainer span {
  float: left;
  padding: 0 3px 0 0;
}
time-input .timeInputContainer input::selection {
  background: #a8d1ff;
  /* WebKit/Blink Browsers */
}
time-input .timeInputContainer input::-moz-selection {
  background: #a8d1ff;
  /* Gecko Browsers */
}
time-input .timeInputContainer .timeInput-clear {
  right: 32px;
  font-size: 20px;
}
list-selector {
  position: relative;
  min-width: 100px;
  display: block;
}
list-selector .listSelector-search {
  cursor: text;
  padding-right: 30px;
}
list-selector .listSelector-showSearch {
  transform: rotate(90deg);
}
list-selector .listSelector-showSearch {
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  height: 14px;
  margin: auto;
  font-size: 14px;
  cursor: pointer;
  color: #ccc;
}
list-selector .listSelector-clearSearch {
  right: 7px !important;
}
list-selector .listSelector-clearSearch:hover {
  right: 4px !important;
}
list-selector .listSelector-dropdown {
  width: calc(100% - 10px);
  margin: 5px 5px 0 5px;
  overflow: hidden;
  padding: 5px 0 5px 0;
  border: 1px solid rgba(0, 0, 0, 0.14902);
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.172549) 0 6px 12px 0;
  background-color: #ffffff;
  position: absolute;
  z-index: 100;
}
list-selector .listSelector-dropdownItem {
  position: relative;
  width: 100%;
  height: 34px;
  padding: 0 15px;
  line-height: 34px;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
list-selector .listSelector-dropdownItem:hover {
  background-color: #fafafa;
}
list-selector .listSelector-dropdownItem:active {
  background-color: #eee;
}
list-selector .listSelector-dropdownItemSelected {
  background-color: #eee;
}
list-selector .listSelector-dropdownItemSelected:hover {
  background-color: #eee;
}
list-selector .listSelector-dropdownItemColor {
  background-color: red;
  border-radius: 3px;
  width: 5px;
  height: 20px;
  margin: 7px 10px 2px 0;
  float: left;
}
list-selector .listSelector-selectedItemColor {
  position: absolute;
  left: 8px;
  top: 5px;
  bottom: 5px;
  border-radius: 3px;
  width: 5px;
  height: 20px;
  margin: 2px 10px 2px 0;
}
list-selector .listSelector-subLabel {
  float: right;
  color: #999;
  font-size: 10px;
}
list-drop-down {
  position: relative;
  display: block;
  line-height: 20px;
  margin-right: 0;
  float: left;
}
list-drop-down > div {
  float: left;
  width: 100%;
}
list-drop-down > div button {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  position: relative;
  line-height: 20px;
}
list-drop-down > div button.buttonDisabled {
  pointer-events: none;
}
list-drop-down > div button.buttonDisabled.listDropDownDefault .caret {
  display: none;
}
list-drop-down > div button .listDropDownBtnAddon {
  width: auto;
  left: 0;
  top: 0;
  bottom: 0;
  margin-top: -6px;
  margin-left: -12px;
  float: left;
  background-color: #eee;
  border-right: 1px solid #ccc;
  padding: 6px 12px;
  font-weight: bold;
  margin-right: 10px;
}
list-drop-down > div button .buttonColor {
  float: left;
  margin-right: 9px;
  border-radius: 3px;
  width: 5px;
  height: 20px;
}
list-drop-down > div button .caret {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
list-drop-down > div button.listDropDownDefault.buttonDisabled {
  color: #333333 !important;
  opacity: 1 !important;
}
list-drop-down > div button.listDropDownDefault,
list-drop-down > div .listDropDownSuccess {
  height: 34px;
  min-width: 100px;
  text-align: left;
  line-height: 20px;
  padding: 6px 20px 6px 12px;
}
list-drop-down > div button.listDropDownDefault div,
list-drop-down > div .listDropDownSuccess div {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
list-drop-down > div button.listDropDownSuccess div {
  width: 100%;
  text-align: center;
  min-width: 90px;
}
list-drop-down > div button.listDropDownPlus {
  height: 34px;
  width: 34px;
  text-align: center;
  line-height: 20px;
  color: #FFFFFF;
  padding: 6px;
  font-size: 18px;
}
list-drop-down > div button.listDropDownMenu,
list-drop-down > div button.listDropDownSubMenu {
  height: 34px;
  width: 34px;
  text-align: center;
  line-height: 20px;
  padding: 6px;
  font-size: 18px;
}
list-drop-down > div button.listDropDownMenu i,
list-drop-down > div button.listDropDownSubMenu i {
  left: 0;
  right: 0;
  top: -2px;
}
list-drop-down > div button.listDropDownSubMenu i {
  top: 0;
}
list-drop-down > div button.smallBtn {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 14px;
  line-height: 18px;
}
.listDropDownUL {
  min-width: 220px;
  padding: 8px 0;
  overflow: auto;
}
.listDropDownUL .listDropDownSearchContainer {
  width: 100%;
  height: 34px;
  margin: 5px 0 10px 0;
  padding: 0 10px;
}
.listDropDownUL .listDropDownSearchContainer button.ion-ios-arrow-back {
  height: 34px;
  width: 34px;
  float: left;
  background-color: #fff;
  border-color: #ccc;
}
.listDropDownUL .listDropDownSearchContainer .listDropDownNestedListParent {
  float: left;
  width: calc(100% - 49px);
  height: 34px;
  line-height: 34px;
  font-size: 12px;
  margin-left: 15px;
  font-weight: 600;
}
.listDropDownUL .listDropDownSearchContainer .ph-search {
  width: 100%;
  float: none;
  height: 34px;
  max-width: unset;
}
.listDropDownUL .listDropDownSearchContainer .ph-search.-nestedListSearch {
  float: right;
  width: calc(100% - 44px);
}
.listDropDownUL li {
  line-height: 34px;
  padding: 0 15px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}
.listDropDownUL li.itemDelete {
  transition: all 0.25s;
}
.listDropDownUL li.itemDelete:hover {
  color: #fff;
  background-color: #d9534f;
}
.listDropDownUL li.itemDisabled {
  color: #DDDDDD;
  pointer-events: none;
}
.listDropDownUL li.itemTooltip {
  pointer-events: all;
}
.listDropDownUL li:hover {
  background-color: #fafafa;
}
.listDropDownUL li:active {
  background-color: #eee;
}
.listDropDownUL li div.itemColour {
  position: absolute;
  left: 13px;
  top: 7px;
  bottom: 5px;
  border-radius: 3px;
  width: 5px;
  height: 20px;
}
.listDropDownUL li div.itemProp {
  float: left;
  padding-right: 50px;
  font-size: 12px;
}
.listDropDownUL li div.itemSubProp {
  float: right;
  color: #777777;
  font-size: 11px;
}
.listDropDownUL li div.ph-toggle {
  right: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.listDropDownUL li i.ion.ion-chevron-right {
  right: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #777777;
  font-size: 12px;
}
.listDropDownUL li.itemSelected {
  background-color: rgba(94, 178, 46, 0.08) !important;
}
.listDropDownUL .ph-listDropDown-empty {
  line-height: 34px;
  padding: 0 15px;
  position: relative;
  text-align: center;
  font-size: 12px;
  color: #999;
}
multi-select-drop-down {
  position: relative;
  display: block;
  line-height: 20px;
  margin-right: 0;
  float: left;
}
multi-select-drop-down > div {
  float: left;
  width: 100%;
}
multi-select-drop-down > div button.multiSelectDropDown-btn {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  position: relative;
  line-height: 20px;
  height: 34px;
  width: 34px;
  text-align: center;
  color: #FFFFFF;
  padding: 6px;
  font-size: 18px;
}
multi-select-drop-down > div button.multiSelectDropDown-btn.buttonDisabled {
  cursor: default;
  pointer-events: none;
}
.multiSelectDropDown-UL {
  min-width: 220px;
  padding: 8px 0;
  transition: margin-top 0.3s ease;
}
.multiSelectDropDown-UL super-search {
  width: calc(100% - 25px);
  margin: 5px auto 10px;
  float: none;
  height: 34px;
  max-width: unset;
  font-size: 12px;
  display: block;
}
.multiSelectDropDown-UL .ph-search {
  width: calc(100% - 25px);
  margin: 5px auto 10px;
  float: none;
  height: 34px;
  max-width: unset;
}
.multiSelectDropDown-UL .multiSelectDropDown-toggleAllRow {
  height: 28px;
  width: 100%;
  overflow: hidden;
  padding: 0 16px;
  -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.05);
}
.multiSelectDropDown-UL .multiSelectDropDown-toggleAllRow .multiSelectDropDown-selectedCount {
  float: left;
  height: 28px;
  line-height: 28px;
  color: #999;
  font-size: 12px;
}
.multiSelectDropDown-UL .multiSelectDropDown-toggleAllRow .multiSelectDropDown-toggleAll {
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  padding: 0;
  border: none;
  float: right;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer {
  width: 100%;
  overflow-y: scroll;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li {
  line-height: 28px;
  padding: 4px 15px;
  position: relative;
  cursor: pointer;
  user-select: none;
  height: 38px;
  margin: 0;
  width: 100%;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li:first-child {
  margin-top: 5px;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li:last-child {
  margin-bottom: 5px;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li .multiSelectDropDown-LIInner {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  padding: 0 0 0 10px;
  display: flex;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li .multiSelectDropDown-LIInner div.itemColour {
  position: absolute;
  left: 25px;
  top: 9px;
  bottom: 9px;
  border-radius: 3px;
  width: 5px;
  height: 20px;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li .multiSelectDropDown-LIInner div.itemProp {
  float: left;
  font-size: 12px;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li .multiSelectDropDown-LIInner label-panel {
  flex: 1 1 auto;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li.itemDelete {
  transition: all 0.25s;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li.itemDelete:hover {
  color: #fff;
  background-color: #d9534f;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li.itemDisabled {
  color: #DDDDDD;
  pointer-events: none;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li:hover {
  background-color: #fafafa;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li:active .multiSelectDropDown-LIInner {
  background-color: #eee;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li.itemSelected .multiSelectDropDown-LIInner {
  background-color: rgba(94, 178, 46, 0.08) !important;
  border: 1px solid #5EB22E;
  font-weight: 600;
}
.multiSelectDropDown-UL .multiSelectDropDown-scrollContainer li.multiSelectDropDown-emptyItem {
  color: #999999;
  text-align: center;
  pointer-events: none;
  font-size: 12px;
}
.multiSelectDropDown-UL .multiSelectDropDown-bottomContainer {
  height: 42px;
  width: 100%;
  -webkit-box-shadow: 0px -3px 3px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px -3px 3px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px -3px 3px 0px rgba(0, 0, 0, 0.05);
}
.multiSelectDropDown-UL .multiSelectDropDown-bottomContainer button.multiSelectDropDown-addSelectedBtn {
  margin: 8px 10px 0 10px;
  width: calc(100% - 20px);
}
.multiSelectDropDown-UL .multiSelectDropDown-bottomContainer button.multiSelectDropDown-addSelectedBtn.buttonDisabled {
  cursor: default;
  pointer-events: none;
}
month-selector {
  display: block;
  height: 34px;
}
month-selector > * {
  float: left;
  margin: 0 7px;
}
month-selector .monthSelector-changeMonthBtn,
month-selector .monthSelector-selectMonthBtn {
  height: 34px;
  width: 34px;
  background-color: #fff;
  border-color: #ccc;
  padding: 0;
  margin: 0;
}
month-selector .monthSelector-selectMonthBtn {
  margin-left: 7px !important;
}
month-selector .monthSelector-selectedMonth {
  height: 34px;
  line-height: 34px;
  width: 170px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
month-selector .monthSelector-selectedMonth span {
  font-weight: 300;
  color: #999;
}
pay-cycle {
  width: 100%;
  display: block;
  position: relative;
  margin-bottom: 20px;
  opacity: 1;
}
pay-cycle .ph-contentHeader .btn-success {
  margin-right: 50px;
  min-width: 100px;
}
pay-cycle .ph-contentContainer {
  position: relative;
}
pay-cycle .ph-contentContainer .ph-content .ph-payCycleName {
  position: relative;
}
pay-cycle .ph-contentContainer .ph-content .ph-payCycleName .payCycleName {
  width: 100%;
  text-overflow: unset;
  white-space: normal;
  overflow: unset;
}
pay-cycle .ph-contentContainer .ph-content .ph-payCycleName .payCycleName > div {
  float: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 30px);
}
pay-cycle .ph-contentContainer .ph-content .ph-payCycleName input {
  float: left;
  width: calc(100% - 30px);
}
pay-cycle .ph-contentContainer .ph-content .ph-payCycleName .btn-edit.xs,
pay-cycle .ph-contentContainer .ph-content .ph-payCycleName .btn-success.xs {
  top: -1px;
  margin-left: 10px;
}
pay-cycle .ph-contentContainer .ph-content .ph-payCycleName .btn-success.xs {
  top: -2px;
}
pay-cycle .ph-contentContainer .ph-content .ph-payCycleName .ion-edit.passive {
  position: absolute;
  left: 20px;
  top: 33px;
  font-size: 14px;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails {
  max-height: 100%;
  transition: all 0.25s;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .ph-payCycle-tabContainer {
  height: 54px;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .employeeRowsHeader {
  font-size: 14px;
  width: 100%;
  height: 60px;
  padding: 13px 11px 13px 15px;
  transition: all 0.25s ease-out;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .employeeRowsHeader .ph-cycle-employees {
  float: left;
  line-height: 35px;
  transition: all 0.25s ease-out;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .employeeRowsHeader .ph-cycle-employees > span {
  color: #999;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .employeeRowsHeader .ph-search {
  transition: all 0.25s;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .employeeRowsHeader .ph-search input {
  transition: all 0.25s;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .ph-scrollTable .tableRow .col-sm-11 > span {
  font-weight: 600;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .ph-paycycle-footer {
  display: table;
  background-color: #f4f4f4;
  width: 100%;
  height: 65px;
  padding: 15px;
  pointer-events: all;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .ph-paycycle-footer list-drop-down {
  float: left;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .ph-paycycle-footer list-drop-down.payCycleOptions {
  right: 15px;
  top: 7px;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .ph-emptyState {
  margin-top: -2px;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .ph-emptyState.isSmallEmpty {
  height: 80px;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .ph-emptyState.isSmallEmpty > div {
  top: 27px;
}
pay-cycle .ph-contentContainer .ph-content .ph-cycle-employeeDetails .ph-emptyState.isSmallEmpty > div span {
  font-size: 12px;
  font-weight: 200;
  cursor: default;
  color: #999;
}
pay-cycle .ph-contentContainer .ph-content.newPayCycle {
  background-color: #f9f9f9;
  overflow: hidden;
  transition: all 0.25s ease-out;
  opacity: 1;
  height: 100%;
}
pay-cycle .ph-contentContainer .ph-content.newPayCycle .ph-statRow {
  height: 100%;
  padding: 20px 20px 0 20px;
  display: flow-root;
}
pay-cycle .ph-contentContainer .ph-content.newPayCycle .ph-statRow .ph-payCycleName .ion-edit {
  position: absolute;
  left: 20px;
  top: 33px;
  font-size: 14px;
  color: #ccc;
}
pay-cycle .ph-contentContainer .ph-content.newPayCycle .ph-statRow .ph-stat {
  height: 85px;
  padding-left: 10px;
  min-width: 180px;
}
pay-cycle .ph-contentContainer .ph-content.newPayCycle .ph-statRow .ph-stat:first-child {
  width: 30%;
}
pay-cycle .ph-contentContainer .ph-content.newPayCycle .monthlyPayType {
  float: left;
  height: 85px;
  padding: 0 30px;
}
pay-cycle .ph-contentContainer .ph-content.newPayCycle .monthlyPayType > div {
  width: 100%;
  margin-bottom: 7px;
  line-height: 25px;
}
pay-cycle .ph-contentContainer .ph-content.newPayCycle .monthlyPayType > div > span {
  margin-left: 8px;
  top: -2px;
  position: relative;
}
pay-cycle .ph-contentContainer .ph-content:not(.newPayCycle) .ph-statRow {
  padding-top: 26px;
  height: 120px;
}
pay-cycle .ph-contentContainer .ph-content:not(.newPayCycle) .ph-statRow .ph-stat {
  width: calc(100% / 4);
}
pay-cycle .ph-contentContainer .ph-content:not(.newPayCycle) .ph-statRow .lg-close {
  top: 52px;
}
pay-cycle .ph-contentContainer .ph-content .btnContainer {
  width: 100px;
  height: 70px;
  float: right;
}
pay-cycle .ph-contentContainer .ph-content .btnContainer .btn {
  width: 100%;
}
pay-cycle .ph-contentContainer .ph-content .btnContainer .btn:first-child {
  margin-bottom: 4px;
}
pay-cycle .ph-contentContainer .ph-content .ph-stat .statValue .payPeriodTo {
  height: 34px;
  line-height: 40px;
  color: #999;
  text-align: center;
  width: 70px;
  float: right;
  font-size: 12px;
}
pay-cycle .ph-contentContainer .ph-content .ph-stat .statValue .payPeriodEnd {
  width: 170px;
  height: 39px;
  line-height: 38px;
  color: #333;
  border-radius: 2px;
  float: right;
  font-size: 18px;
  font-weight: 600;
}
pay-cycle .ph-contentContainer .ph-content .ph-scrollTable {
  margin: 0 -1px;
  transition: all 0.25s;
}
pay-cycle .ph-contentContainer .ph-content .ph-scrollTable > .scrollContainer {
  max-height: 400px;
  border-top: solid 1px #ddd;
  transition: all 0.25s;
}
pay-cycle .ph-contentContainer .ph-content .ph-scrollTable > .scrollContainer > .rowContainer > .payCycleTableRow {
  transition: none;
}
pay-cycle.payCycle-collapse {
  margin-bottom: -1px;
}
pay-cycle.payCycle-collapse .ph-statRow:hover {
  background-color: #fafafa;
}
pay-cycle.payCycle-collapse .ph-statRow:active {
  background-color: #eee;
}
pay-cycle.payCycle-collapse .ph-content .ph-cycle-employeeDetails {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
pay-cycle.payCycle-collapse .ph-content .ph-cycle-employeeDetails .ph-paycycle-footer {
  margin-bottom: 0;
  height: 0;
  pointer-events: none;
}
pay-cycle.payCycle-collapse .ph-content .ph-cycle-employeeDetails > .employeeRowsHeader {
  height: 0;
  margin: 0;
}
pay-cycle.payCycle-collapse .ph-content .ph-cycle-employeeDetails > .employeeRowsHeader > div {
  line-height: 0px !important;
}
pay-cycle.payCycle-collapse .ph-content .ph-cycle-employeeDetails > .employeeRowsHeader .ph-search input {
  height: 0;
  padding: 0 12px 0 30px;
}
pay-cycle.payCycle-collapse .ph-content .ph-cycle-employeeDetails > .ph-scrollTable {
  margin-bottom: 0;
}
pay-cycle.payCycle-collapse .ph-content .ph-cycle-employeeDetails > .ph-scrollTable .scrollContainer {
  max-height: 0;
}
pay-cycle.payCycle-collapse .ph-content .ph-cycle-employeeDetails > list-drop-down {
  line-height: 0;
}
pay-cycle.payCycle-collapse .ph-content .ph-cycle-employeeDetails > list-drop-down button {
  margin-bottom: 0;
  height: 0;
  padding: 0;
  font-size: 0;
}
label-panel {
  min-width: 30px;
  padding: 4px 15px;
  height: 30px;
  position: relative;
  display: block;
}
label-panel .lPanel-labelContainer {
  height: 22px;
  width: 100%;
  position: relative;
}
label-panel .lPanel-labelContainer .lPanel-numHiddenLabels {
  height: 22px;
  width: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 11px;
  background-color: #EFEFEF;
  color: #555;
  font-size: 10px;
  margin-left: 5px;
  float: left;
}
label-panel .lPanel-labelContainer .lPanel-dropdownBtn {
  width: 26px;
  height: 26px;
  line-height: 26px;
  float: left;
}
label-panel .lPanel-labelContainer .lPanel-dropdownBtn .ion-more {
  color: #bbb;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  top: 2px;
  left: 6px;
}
label-panel .lPanel-labelContainer .lPanel-dropdownBtn .ion-more:hover {
  color: #bbb;
}
.lPanel-label {
  position: relative;
  height: 22px;
  color: #fff;
  width: auto;
  display: block;
  white-space: nowrap;
  font-size: 10px;
  padding-left: 10px;
  border-radius: 2px;
  margin-right: 5px;
  float: left;
}
.lPanel-label.mockLabel {
  position: absolute;
  opacity: 0;
}
.lPanel-label > div {
  line-height: 22px;
  height: 22px;
  float: left;
}
.lPanel-label > i.sm-close {
  right: 2px;
}
.lPanel-label > i.sm-close:hover {
  right: -1px;
}
.lPanel-label > div:nth-child(2) {
  margin: 0 10px;
}
.extraLabelsHolder {
  position: absolute;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  min-width: 150px;
  background-color: #fff;
  border: solid 1px #ddd;
  border-radius: 2px;
  z-index: 111;
  transition: all 0.25s ease-out;
  padding: 10px 5px 5px 10px;
  margin-top: 34px;
  min-height: 40px;
}
.extraLabelsHolder .lPanel-label {
  margin-bottom: 5px;
}
.extraLabelsHolder::after {
  display: none;
  content: "";
  position: absolute;
  left: 13px;
  top: -10px;
  width: 0;
  height: 0;
  border-bottom: 10px solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.extraLabelsHolder::before {
  display: none;
  content: "";
  position: absolute;
  left: 13px;
  top: -11px;
  width: 0;
  height: 0;
  border-bottom: 10px solid #ddd;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.extraLabelsHolder.extraLabelsHolder-open {
  visibility: visible;
  opacity: 1;
  padding: 15px 10px 12px 15px;
  margin-top: 18px;
}
.colourPickerContainer {
  width: 34px;
  height: 34px;
  border-radius: 2px;
  cursor: pointer;
  border: none;
}
.sp-container {
  border-radius: 2px !important;
  border: 1px solid #dddddd !important;
}
.sp-replacer {
  border: none !important;
  border-radius: 2px;
  width: 34px;
  height: 34px;
  padding: 0;
}
.sp-preview {
  border: none;
  margin: 0;
  width: 100%;
  height: 100%;
}
.sp-dd {
  display: none;
}
.sp-palette-container {
  background-color: #FFFFFF;
}
.sp-palette-row > span {
  border: none !important;
  border-radius: 2px !important;
  margin: 2px !important;
}
.checkbox-default {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 10px;
  background-color: #fff;
  border-color: #ddd;
  min-width: 0;
  transition: background-color 0.2s ease-in, border-color 0.2s ease-in;
}
.checkbox-default::before {
  top: -3px;
  font-size: 22px;
  position: relative;
  height: inherit;
}
.checkbox-active {
  background-color: #5eb22e;
  border-color: #5eb22e;
  color: #fff;
}
.checkbox-active:hover {
  color: #fff;
}
.checkbox-active:focus {
  color: #fff;
}
.checkbox-active:active {
  color: #fff;
}
pay-details.ph-noAnimateOnInit {
  margin-bottom: 0;
}
pay-details.ph-noAnimateOnInit:not(:last-child) .ph-contentContainer {
  border-bottom: none;
}
pay-details.ph-noAnimateOnInit .ph-content {
  max-height: 0;
  opacity: 0;
}
pay-details.ph-noAnimateOnInit .ph-contentFooter {
  height: 0;
  border: 0;
  padding: 0;
  opacity: 0;
}
pay-details {
  overflow: visible;
  display: block;
  margin-bottom: -1px;
}
pay-details .ph-statRow,
pay-details .ph-content,
pay-details .ph-contentFooter {
  transition: height 0.2s ease, max-height 0.2s ease, border 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
}
pay-details .payCycleTitle {
  max-width: 80% !important;
}
pay-details .loadingPopover {
  position: relative;
  display: inline-block;
}
pay-details .loadingPopover.-creating {
  left: 75%;
}
pay-details .loadingPopover.-sending {
  left: 0;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
}
pay-details img.payCycleTitle {
  position: absolute;
  width: 34px;
}
pay-details img.payrollLoader {
  width: 40px;
}
pay-details .ph-contentFooter.ph-payCreatingFooter {
  height: 100px;
}
pay-details .ph-contentFooter.ph-payCreatingFooter .ph-hugeFooterBtnRow {
  padding-top: 35px;
}
pay-details.payDetails-collapse .payDetails-stats:hover {
  background-color: #fafafa;
}
pay-details.payDetails-collapse .payDetails-stats:active {
  background-color: #eee;
}
pay-details.payDetails-collapse .ph-content {
  max-height: 0;
  opacity: 0;
}
pay-details.payDetails-collapse .tableFooterRow.buttonFooterRow {
  opacity: 0;
  height: 0;
  padding: 0 15px;
}
pay-details.payDetails-collapse .tableFooterRow.buttonFooterRow > div {
  line-height: 0;
  height: 0;
}
pay-details.payDetails-collapse .tableFooterRow.buttonFooterRow list-drop-down button {
  height: 0;
  padding: 0 6px;
  font-size: 0;
}
pay-details.payDetails-collapse .ph-contentFooter {
  height: 0;
  border: 0;
  padding: 0;
  opacity: 0;
}
pay-details .ph-contentContainer .payDetails-stats {
  cursor: pointer;
  height: 97px;
}
pay-details .ph-contentContainer .payDetails-stats .checkBoxContainer {
  width: 45px;
  float: left;
  height: 97px;
  padding: 39px 0 38px 20px;
}
pay-details .ph-contentContainer .payDetails-stats .ph-statRow {
  cursor: pointer;
  float: left;
  transition: width 0s, padding-left 0s !important;
}
pay-details .ph-contentContainer .payDetails-stats .ph-statRow .statInput {
  max-width: 180px;
  position: relative;
}
pay-details .ph-contentContainer .payDetails-stats .ph-statRow .statInput img {
  position: absolute;
  left: -40px;
  height: 34px;
  width: 34px;
}
pay-details .ph-contentContainer .payDetails-stats .ph-statRow .ion-ios-checkmark-empty {
  top: 4px;
}
pay-details .ph-warningsContainer,
pay-details .ph-errorsContainer {
  width: calc(100% - 30px);
  margin: 10px 15px;
  border-radius: 2px;
}
pay-details .payDetails-employeeSearchRow {
  width: 100%;
  height: 60px;
  padding: 13px 11px 13px 15px;
}
pay-details .payDetails-employeeSearchRow.isSentPay {
  margin-bottom: -47px;
}
pay-details .payDetails-employeeSearchRow list-drop-down {
  margin-left: 8px;
}
pay-details .payDetails-employeeSearchRow .payDetails-numEmployees {
  height: 34px;
  line-height: 34px;
  float: left;
  font-size: 14px;
}
pay-details .payDetails-employeeSearchRow .payDetails-numEmployees > span {
  color: #999;
}
pay-details .payDetails-employeeSearchRow .payDetails-numEmployees > .ion-alert-circled {
  margin-left: 1px;
  margin-right: 7px;
  top: 1px;
}
pay-details .payDetails-employeeSearchRow .ph-save,
pay-details .payDetails-employeeSearchRow .ph-downloaded {
  height: 34px;
  width: 34px;
  margin-right: 10px;
}
pay-details .payDetails-employeeSearchRow .ph-downloaded {
  padding: 4px;
}
pay-details .payDetails-employeeSearchRow .ph-search {
  position: relative;
  z-index: 99;
}
pay-details .ph-content {
  max-height: 855px;
  overflow: hidden;
}
pay-details .ph-content .scrollContainer {
  max-height: 400px;
}
pay-details .ph-content .ph-tabContainer {
  margin-bottom: -1px;
}
pay-details .ph-content .ph-tabContainer .ph-tabList {
  padding-left: 13px;
}
pay-details .ph-content .ph-tabContainer .ph-tabBar {
  width: calc(100% + 2px);
  margin: 0 -1px;
}
pay-details .ph-contentFooter {
  overflow: hidden;
}
pay-details .ph-contentFooter .ph-statRow {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
pay-details .ph-contentFooter .ph-statRow .spaceAbove {
  top: 80px;
}
pay-details .ph-contentFooter .ph-statRow .manualPayDetails {
  position: relative;
  width: auto;
  top: -27px;
  margin-left: 10px;
  background-color: #00adef10;
  border: solid 1px var(--app-color-payhero);
  border-radius: 2px;
  padding: 10px 20px;
  margin-right: auto;
}
pay-details .ph-contentFooter .ph-statRow .manualPayDetails .ph-warningsHeader {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  font-size: 13px;
  margin-top: 4px;
}
pay-details .ph-contentFooter .ph-statRow .manualPayDetails .ph-warningsHeader i {
  font-size: 22px;
  margin-right: 8px;
}
pay-details .ph-contentFooter .ph-statRow .manualPayDetails .ph-warningsList {
  margin-left: 25px;
}
pay-details .ph-contentFooter .ph-statRow .manualPayDetails .ph-warningsList .ph-warningsListItem {
  padding-bottom: 10px;
}
pay-details .ph-contentFooter .ph-statRow .manualPayDetails .ph-warningsList .ph-warningsListItem.-headsup {
  display: flex;
  align-items: center;
  font-size: 11px;
  padding: 0;
}
pay-details .ph-contentFooter .ph-statRow .manualPayDetails .ph-warningsList .ph-warningsListItem.-headsup i {
  padding-right: 5px;
}
pay-details .ph-contentFooter .ph-statRow .manualPayDetails .ph-warningsSupportLink {
  margin-bottom: 0;
  margin-top: 5px;
}
pay-details .ph-contentFooter .ph-statRow .manualPayDetails .indent {
  padding-left: 10px;
}
pay-details .ph-contentFooter .ph-statRow .manualPayDetails .indent span {
  font-weight: 600;
}
pay-details .ph-contentFooter .ph-statRow .payActionButtonContainer {
  position: relative;
  width: auto;
  margin-left: 10px;
  padding: inherit;
  margin-right: auto;
}
pay-details .ph-contentFooter .ph-save,
pay-details .ph-contentFooter .ph-downloaded {
  height: 34px;
  width: 34px;
  margin-right: 10px;
}
pay-details .ph-contentFooter .payDetails-gstTotal {
  margin-right: 30px;
}
pay-details .ph-contentFooter .payDetails-gstTotal .payDetails-gstTotal-number {
  font-weight: 700;
}
pay-details .ph-contentFooter .ph-downloaded {
  padding: 4px;
}
pay-details .ph-scrollTable.payDetailsEmployees .tableHeaderRow > .col:nth-child(1),
pay-details .ph-scrollTable.payDetailsEmployees .tableRow > .col:nth-child(1),
pay-details .ph-scrollTable.payDetailsEmployees .tableFooterRow > .col:nth-child(1) {
  width: 20%;
}
pay-details .ph-scrollTable.payDetailsEmployees .tableHeaderRow > .col:nth-child(1) .ion-alert-circled,
pay-details .ph-scrollTable.payDetailsEmployees .tableRow > .col:nth-child(1) .ion-alert-circled,
pay-details .ph-scrollTable.payDetailsEmployees .tableFooterRow > .col:nth-child(1) .ion-alert-circled {
  margin-right: 7px;
}
pay-details .ph-scrollTable.payDetailsEmployees .tableHeaderRow > .col:nth-child(2),
pay-details .ph-scrollTable.payDetailsEmployees .tableRow > .col:nth-child(2),
pay-details .ph-scrollTable.payDetailsEmployees .tableFooterRow > .col:nth-child(2) {
  width: 12%;
}
pay-details .ph-scrollTable.payDetailsEmployees .tableHeaderRow > .col:nth-child(3),
pay-details .ph-scrollTable.payDetailsEmployees .tableRow > .col:nth-child(3),
pay-details .ph-scrollTable.payDetailsEmployees .tableFooterRow > .col:nth-child(3) {
  width: 12%;
}
pay-details .ph-scrollTable.payDetailsEmployees .tableHeaderRow > .col:nth-child(4),
pay-details .ph-scrollTable.payDetailsEmployees .tableRow > .col:nth-child(4),
pay-details .ph-scrollTable.payDetailsEmployees .tableFooterRow > .col:nth-child(4) {
  width: 12%;
}
pay-details .ph-scrollTable.payDetailsEmployees .tableHeaderRow > .col:nth-child(5),
pay-details .ph-scrollTable.payDetailsEmployees .tableRow > .col:nth-child(5),
pay-details .ph-scrollTable.payDetailsEmployees .tableFooterRow > .col:nth-child(5) {
  width: 12%;
}
pay-details .ph-scrollTable.payDetailsEmployees .tableHeaderRow > .col:nth-child(6),
pay-details .ph-scrollTable.payDetailsEmployees .tableRow > .col:nth-child(6),
pay-details .ph-scrollTable.payDetailsEmployees .tableFooterRow > .col:nth-child(6) {
  width: 12%;
}
pay-details .ph-scrollTable.payDetailsEmployees .tableHeaderRow > .col:nth-child(7),
pay-details .ph-scrollTable.payDetailsEmployees .tableRow > .col:nth-child(7),
pay-details .ph-scrollTable.payDetailsEmployees .tableFooterRow > .col:nth-child(7) {
  width: 20%;
  padding-right: 40px;
  position: relative;
}
pay-details .ph-scrollTable.payDetailsEmployees .ion {
  margin-right: 8px;
}
pay-details .ph-scrollTable.payDetailsWarnings .scrollContainer {
  border-bottom: none;
}
pay-details .ph-scrollTable.payDetailsEmployees,
pay-details .ph-scrollTable.payDetailsWarnings {
  border-bottom: 0;
  margin: 0 -1px;
}
pay-details .ph-scrollTable.payDetailsEmployees .tableFooterRow,
pay-details .ph-scrollTable.payDetailsWarnings .tableFooterRow {
  border-bottom: 0;
  transition: 0s;
}
pay-details .tableFooterRow.buttonFooterRow {
  transition: all 0.25s;
  background-color: #f4f4f4;
  height: 65px;
  padding: 15px;
  position: relative;
}
pay-details .tableFooterRow.buttonFooterRow > div {
  line-height: 34px;
  height: 34px;
}
pay-details .tableFooterRow.buttonFooterRow list-drop-down button {
  transition: all 0.25s;
}
pay-tax-details .ph-warningsContainer {
  width: calc(100% - 30px);
  margin: 10px 15px;
  border-radius: 2px;
}
pay-tax-details .payTaxDetails-employeeSearchRow {
  width: 100%;
  height: 60px;
  padding: 13px 11px 13px 15px;
}
pay-tax-details .payTaxDetails-employeeSearchRow list-drop-down {
  margin-left: 8px;
}
pay-tax-details .payTaxDetails-employeeSearchRow .payDetails-numEmployees {
  height: 34px;
  line-height: 34px;
  float: left;
  font-size: 14px;
}
pay-tax-details .payTaxDetails-employeeSearchRow .payDetails-numEmployees > span {
  color: #999;
}
pay-tax-details .payTaxDetails-employeeSearchRow .payDetails-numEmployees > .ion-alert-circled {
  margin-left: 1px;
  margin-right: 7px;
  top: 1px;
}
pay-tax-details .payTaxDetails-employeeSearchRow .ph-save,
pay-tax-details .payTaxDetails-employeeSearchRow .ph-downloaded {
  height: 34px;
  width: 34px;
  margin-right: 10px;
}
pay-tax-details .payTaxDetails-employeeSearchRow .ph-downloaded {
  padding: 4px;
}
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees {
  border-bottom: 0;
  margin: 0 -1px;
}
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableHeaderRow > .col:nth-child(1),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableRow > .col:nth-child(1),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableFooterRow > .col:nth-child(1) {
  width: 24%;
}
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableHeaderRow > .col:nth-child(1) .ion-alert-circled,
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableRow > .col:nth-child(1) .ion-alert-circled,
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableFooterRow > .col:nth-child(1) .ion-alert-circled {
  margin-right: 7px;
}
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableHeaderRow > .col:nth-child(2),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableRow > .col:nth-child(2),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableFooterRow > .col:nth-child(2) {
  width: 12%;
}
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableHeaderRow > .col:nth-child(3),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableRow > .col:nth-child(3),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableFooterRow > .col:nth-child(3) {
  width: 12%;
}
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableHeaderRow > .col:nth-child(4),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableRow > .col:nth-child(4),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableFooterRow > .col:nth-child(4) {
  width: 12%;
}
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableHeaderRow > .col:nth-child(5),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableRow > .col:nth-child(5),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableFooterRow > .col:nth-child(5) {
  width: 12%;
}
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableHeaderRow > .col:nth-child(6),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableRow > .col:nth-child(6),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableFooterRow > .col:nth-child(6) {
  width: 13%;
}
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableHeaderRow > .col:nth-child(7),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableRow > .col:nth-child(7),
pay-tax-details .ph-scrollTable.payTaxDetailsEmployees .tableFooterRow > .col:nth-child(7) {
  width: 15%;
  padding-right: 40px;
  position: relative;
}
pay-tax-details .tableHeaderRow > div,
pay-tax-details .tableRow > div,
pay-tax-details .tableFooterRow > div,
pay-tax-details .tableHeaderRow > table-col-header,
pay-tax-details .tableRow > table-col-header,
pay-tax-details .tableFooterRow > table-col-header {
  width: calc((100% - 250px) / 6);
  padding-left: 20px;
}
pay-tax-details .tableHeaderRow > div:first-child,
pay-tax-details .tableRow > div:first-child,
pay-tax-details .tableFooterRow > div:first-child,
pay-tax-details .tableHeaderRow > table-col-header:first-child,
pay-tax-details .tableRow > table-col-header:first-child,
pay-tax-details .tableFooterRow > table-col-header:first-child {
  width: 250px;
}
pay-tax-details .tableHeaderRow > table-col-header:last-child,
pay-tax-details .tableRow > table-col-header:last-child,
pay-tax-details .tableFooterRow > table-col-header:last-child {
  padding-right: 40px;
}
pay-tax-details .tableHeaderRow .text-right,
pay-tax-details .tableRow .text-right,
pay-tax-details .tableFooterRow .text-right {
  padding-right: 40px;
}
super-search {
  display: inline-block;
  height: 34px;
  min-width: 230px;
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 0 0 0 25px;
  background-color: #FFFFFF;
  position: relative;
  cursor: text;
  width: 340px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
super-search:focus-within {
  border-color: #9eccf1;
  border-width: 2px;
}
super-search i.ion-ios-search-strong {
  float: left;
  color: #ccc;
  position: absolute;
  left: 10px;
  font-size: 14px;
  top: 50%;
  transform: translateY(-50%);
}
super-search .superSearch-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 32px;
  line-height: 32px;
  width: 100%;
}
super-search .superSearch-container .ssInput {
  border: none;
  width: 100%;
  float: left;
  padding: 0 0 0 3px;
  height: 32px;
  background-color: transparent;
}
super-search .superSearch-container .ssInput::placeholder {
  color: #999999;
}
super-search .superSearch-container .ssInput:focus {
  outline: none;
}
super-search .superSearch-container .superSearch-keyWord {
  margin-top: 2px;
  margin-right: 3px !important;
  background-color: #5eb22e !important;
  border-color: #5eb22e !important;
  color: #fafafa;
}
super-search .superSearch-container .superSearch-keyWord div.ion {
  color: #fff;
}
super-search .superSearch-container .sm-close {
  right: 7px;
}
super-search .superSearch-container .sm-close:hover {
  right: 4px;
}
super-search .superSearch-keyWordContainer {
  overflow: auto;
  float: left;
}
super-search .superSearch-keyWordContainer .superSearch-keyWord {
  position: relative;
  border: 1px solid #ddd;
  min-height: 22px;
  border-radius: 30px;
  background-color: #fafafa;
  line-height: 14px;
  overflow: hidden;
  padding: 4px 30px 4px 12px;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  cursor: default;
}
super-search .superSearch-keyWordContainer .superSearch-keyWord div {
  word-break: break-word;
  line-height: 14px;
  float: left;
}
super-search .superSearch-keyWordContainer .superSearch-keyWord div.ion {
  right: 3px;
}
super-search .superSearch-keyWordContainer .superSearch-keyWord div.ion:hover {
  right: 0;
}
super-search .superSearch-keyWordContainer.numWords {
  position: absolute;
  right: 0;
  top: 2px;
  transition: all ease-in 0.15s;
}
super-search .superSearch-dropdown {
  transition: all ease-in 0.15s;
  width: 100%;
  margin: 0 5px 0 -25px;
  overflow: hidden;
  padding: 10px 15px 15px;
  border: 1px solid rgba(0, 0, 0, 0.14902);
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.172549) 0 6px 12px 0;
  background-color: #ffffff;
  position: absolute;
  z-index: 100;
  cursor: default;
  opacity: 0;
}
super-search .superSearch-dropdown .superSearch-promptMessage {
  height: 22px;
  line-height: 22px;
  margin-bottom: -5px;
  width: 100%;
  color: #999999;
}
super-search .superSearch-dropdown .superSearch-promptMessage .kbd {
  display: inline-block;
  padding: 3px 7px 5px 7px;
  line-height: 10px;
  vertical-align: middle;
  background-color: #fafbfc;
  border: solid 1px #d1d5da;
  border-bottom-color: #c6cbd1;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #c6cbd1;
  font-size: 10px;
  margin: -1px 3px 0 3px;
}
super-search .superSearch-dropdown .superSearch-headerRow {
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #efefef;
  margin-bottom: 10px;
}
super-search .superSearch-dropdown .superSearch-headerRow .superSearch-headerTitle {
  color: #999999;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  float: left;
}
super-search .superSearch-dropdown .superSearch-headerRow .superSearch-headerTextBtn {
  color: #00adef;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  float: right;
  cursor: pointer;
}
super-search .superSearch-dropdown .superSearch-headerRow .superSearch-headerTextBtn:hover {
  text-decoration: underline;
}
table-col-header {
  height: 50px;
  display: inline-block;
  float: left;
}
table-col-header > div {
  width: 100%;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table-col-header > div > div {
  height: 50px;
  line-height: 50px;
  float: left;
}
table-col-header > div > div.rightAligned {
  float: right;
}
table-col-header > div > .tableOrderLabel {
  cursor: pointer;
  user-select: none;
}
table-col-header > div > .tableOrderLabel:not(.noHover):hover {
  color: #777777;
}
table-col-header > div > .tableOrderLabel.noHover {
  cursor: default;
}
table-col-header > div > .tableOrderArrow {
  margin: 0 7px;
  color: #555555;
  cursor: pointer;
  font-size: 12px;
  padding-top: 18px;
}
table-col-header > div > .tableOrderArrow:hover {
  color: #777777;
}
table-col-header > div > .tableOrderArrow.rightAligned {
  float: right;
}
stat-difference {
  margin: 0 5px;
  line-height: 14px;
  display: inline-block;
}
stat-difference .ion {
  font-size: 14px;
  top: 1px;
  padding-right: 2px;
}
stat-difference .statDifference {
  font-weight: 400;
  font-size: 12px;
}
stat-difference .statDifference.statPositive {
  color: #5eb22e;
}
stat-difference .statDifference.statNegative {
  color: #e53935;
}
stat-difference .noDifference {
  height: 10px;
  display: block;
}
stat-difference .noDifference > div {
  width: 5px;
  height: 5px;
  border-radius: 10px;
  background-color: #ccc;
  margin-top: 12px;
}
employee-time-graph {
  width: 100%;
  display: block;
}
employee-time-graph .timeGraph-labelContainer {
  width: 100%;
  height: 25px;
  margin-bottom: 5px;
}
employee-time-graph .timeGraph-labelContainer .timeGraph-label {
  height: 25px;
  min-width: 10px;
  max-width: 20px;
  padding-right: 4px;
  text-align: center;
  float: left;
  color: #999999;
  line-height: 25px;
}
employee-time-graph:hover .timeGraph-blockContainer {
  opacity: 0.5;
}
employee-time-graph .timeGraph-col {
  min-width: 10px;
  max-width: 20px;
  height: calc(100% - 30px);
  padding-right: 4px;
  float: left;
  position: relative;
  display: table;
}
employee-time-graph .timeGraph-col:last-child {
  margin-right: 0;
}
employee-time-graph .timeGraph-col segment-list-popover {
  width: 100%;
  height: calc(100% + 30px);
  top: -30px;
  z-index: 10;
}
employee-time-graph .timeGraph-col segment-list-popover:hover + .timeGraph-blockContainer {
  opacity: 1;
}
employee-time-graph .timeGraph-col .timeGraph-blockContainer {
  display: table-cell;
  vertical-align: bottom;
  width: 100%;
  height: 100%;
}
employee-time-graph .timeGraph-col .timeGraph-blockContainer .timeGraph-block {
  width: 100%;
  min-height: 2px;
  border-radius: 2px;
  height: 10px;
}
employee-time-graph .timeGraph-col .timeGraph-blockContainer .timeGraph-block:not(:first-child) {
  margin-top: 2px;
}
segment-list-popover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
segment-list-popover .hoverArea {
  background-color: transparent;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.popover {
  max-width: 800px;
}
.popover .segmentListPopover-container {
  background-color: #333;
  padding: 5px 15px;
  border-radius: 3px;
}
.popover .segmentListPopover-container .segmentListPopover-title {
  width: 100%;
  height: 24px;
  line-height: 24px;
  color: #ffffff;
  margin-top: 10px;
}
.popover .segmentListPopover-container .segmentListPopover-row {
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  position: relative;
  margin: 10px 0;
  padding-left: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #ffffff;
}
.popover .segmentListPopover-container .segmentListPopover-row .projectColorList {
  height: 35px;
  width: 5px;
  position: absolute;
  left: 0;
  border-radius: 5px;
}
.popover .segmentListPopover-container .segmentListPopover-row .workStartEnd {
  padding-top: 2px;
  font-size: 10px;
}
bank-account-input {
  width: 100%;
  height: 34px;
  display: block;
}
bank-account-input .row {
  margin: 0;
  display: flex;
}
bank-account-input .row input {
  margin: 0 5px;
}
bank-account-input .row input:first-child {
  width: 15%;
  margin-left: 0;
}
bank-account-input .row input:nth-child(2) {
  width: 22%;
}
bank-account-input .row input:nth-child(3) {
  width: 33%;
}
bank-account-input .row input:nth-child(4) {
  width: 25%;
  margin-right: 0;
}
bank-account-input .row > i {
  margin-right: -25px;
  top: 16px;
}
radio-button {
  width: 24px;
  height: 24px;
  line-height: 24px;
  display: inline-block;
  position: relative;
}
radio-button .ph-radioBtnOuter {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  margin-top: -1px;
  position: relative;
  padding: 0;
}
radio-button .ph-radioBtnOuter .ph-radioBtnInner {
  width: 14px;
  height: 14px;
  background-color: #5eb22e;
  border-radius: 8px;
  transition: width 0.25s, height 0.25s;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
radio-button.radioSmall {
  width: 18px;
  height: 18px;
  line-height: 18px;
}
radio-button.radioSmall .ph-radioBtnOuter {
  width: 18px;
  height: 18px;
  line-height: 18px;
}
radio-button.radioSmall .ph-radioBtnOuter .ph-radioBtnInner {
  width: 8px;
  height: 8px;
  line-height: 8px;
}
radio-button.disabled {
  width: 100px;
}
tax-details.ph-noAnimateOnInit {
  margin-bottom: 0;
}
tax-details.ph-noAnimateOnInit:not(:last-child) .ph-contentContainer {
  border-bottom: none;
}
tax-details.ph-noAnimateOnInit .ph-content {
  max-height: 0;
  opacity: 0;
}
tax-details.ph-noAnimateOnInit .ph-contentFooter {
  height: 0;
  border: 0;
  padding: 0;
  opacity: 0;
}
tax-details {
  overflow: hidden;
  display: block;
  margin-bottom: -1px;
}
tax-details .ph-statRow,
tax-details .ph-content,
tax-details .ph-contentFooter {
  transition: height 0.2s ease, max-height 0.2s ease, border 0.2s ease, opacity 0.2s ease;
}
tax-details.tax-collapse .taxDetails-stats:hover {
  background-color: #fafafa;
}
tax-details.tax-collapse .taxDetails-stats:active {
  background-color: #eee;
}
tax-details.tax-collapse .ph-content {
  max-height: 0;
  opacity: 0;
}
tax-details.tax-collapse .ph-contentFooter {
  height: 0;
  border: 0;
  padding: 0;
  opacity: 0;
}
tax-details .ph-contentContainer .taxDetails-stats {
  cursor: pointer;
}
tax-details .ph-contentContainer .taxDetails-stats .checkBoxContainer {
  width: 45px;
  float: left;
  height: 97px;
  padding: 39px 0 38px 20px;
}
tax-details .ph-contentContainer .taxDetails-stats .ph-statRow {
  display: flex;
  height: 97px;
  width: calc(100% - 45px);
}
tax-details .ph-contentContainer .taxDetails-stats .ph-statRow .ph-stat {
  width: calc((100% - 500px) / 4);
}
tax-details .ph-contentContainer .taxDetails-stats .ph-statRow .ph-stat:nth-child(1) {
  width: 280px;
}
tax-details .ph-contentContainer .taxDetails-stats .ph-statRow .ph-stat:nth-child(2) {
  width: 220px;
}
tax-details .ph-content {
  overflow: hidden;
}
tax-details .ph-content h4 {
  padding-left: 20px;
  margin: 20px 0 15px 0;
}
tax-details .ph-content h4 span {
  color: #999;
}
tax-details .ph-content .ph-scrollTable {
  margin: 0 -1px -1px -1px;
}
tax-details .ph-content .ph-scrollTable.taxSentPays .tableRow .ph-whatsThisContainer {
  position: relative;
  display: inline-block;
  margin-left: 8px;
}
tax-details .ph-content .ph-scrollTable.taxSentPays .tableRow .ion {
  margin-right: 7px;
}
tax-details .ph-content .tableHeaderRow > div,
tax-details .ph-content .tableRow > div,
tax-details .ph-content .tableFooterRow > div,
tax-details .ph-content .tableHeaderRow > table-col-header,
tax-details .ph-content .tableRow > table-col-header,
tax-details .ph-content .tableFooterRow > table-col-header {
  width: calc((100% - 310px) / 6);
  padding-left: 20px;
}
tax-details .ph-content .tableHeaderRow > div:first-child,
tax-details .ph-content .tableRow > div:first-child,
tax-details .ph-content .tableFooterRow > div:first-child,
tax-details .ph-content .tableHeaderRow > table-col-header:first-child,
tax-details .ph-content .tableRow > table-col-header:first-child,
tax-details .ph-content .tableFooterRow > table-col-header:first-child {
  width: 200px;
}
tax-details .ph-content .tableHeaderRow > div:nth-child(2),
tax-details .ph-content .tableRow > div:nth-child(2),
tax-details .ph-content .tableFooterRow > div:nth-child(2),
tax-details .ph-content .tableHeaderRow > table-col-header:nth-child(2),
tax-details .ph-content .tableRow > table-col-header:nth-child(2),
tax-details .ph-content .tableFooterRow > table-col-header:nth-child(2) {
  width: 110px;
}
tax-details .ph-content .tableHeaderRow > div:nth-child(2) .ph-badge,
tax-details .ph-content .tableRow > div:nth-child(2) .ph-badge,
tax-details .ph-content .tableFooterRow > div:nth-child(2) .ph-badge,
tax-details .ph-content .tableHeaderRow > table-col-header:nth-child(2) .ph-badge,
tax-details .ph-content .tableRow > table-col-header:nth-child(2) .ph-badge,
tax-details .ph-content .tableFooterRow > table-col-header:nth-child(2) .ph-badge {
  margin: 0;
  min-width: 70px;
}
tax-details .ph-content .tax-deductions .ph-statRow {
  margin-bottom: 20px;
}
tax-details .ph-contentFooter {
  overflow: hidden;
}
.ph-spinner {
  height: calc(100% - 50px);
  float: left;
  width: 100%;
}
.ph-spinner > div {
  height: 100%;
}
.ph-spinner.ph-loading > * {
  display: none !important;
}
.ph-spinner.ph-showSpinner > img {
  display: block !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 35px;
  max-height: 35px;
}
.ph-spinner > img {
  display: none;
}
button.groupedDD-btn {
  height: 34px;
  width: 34px;
  text-align: center;
  line-height: 20px;
  padding: 6px;
  font-size: 18px;
}
div.groupDD-div {
  padding: 0px 0;
  overflow-y: auto;
}
ul.groupedDD-parentList {
  min-width: 220px;
  padding: 5px 0;
  list-style-type: none;
  margin-bottom: 0px;
}
ul.groupedDD-parentList li {
  line-height: 34px;
  padding: 0 15px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
ul.groupedDD-parentList li:hover {
  background-color: #f4f4f4;
}
ul.groupedDD-childList {
  min-width: 220px;
  padding: 0px;
  list-style-type: none;
  margin-bottom: 0px;
}
ul.groupedDD-childList li {
  line-height: 34px;
  padding: 0 15px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
ul.groupedDD-childList li:hover {
  background-color: #f4f4f4;
}
span.groupedDD-forwardArrow {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 12px;
  color: #999;
  transition: 0.25s;
}
div.groupedDD-searchArea {
  position: relative;
  padding: 0px 10px 0px 45px;
}
span.groupedDD-backArrow {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 2px;
}
i.ion-ios-search-strong {
  position: absolute;
  font-size: 14px;
  left: 55px;
  top: 50%;
  color: #ccc;
  transform: translateY(-50%);
}
input.groupedDD-searchBar {
  margin: 8px 0px;
  padding-left: 25px;
}
input.groupedDD-searchBar:focus {
  border-color: #9eccf1;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
/*CSS for fade animations*/
.groupedDD-fade.ng-enter {
  transition: 0.25s linear all;
  opacity: 0;
}
.groupedDD-fade.ng-enter.ng-enter-active {
  opacity: 1;
}
employee-pay-lines {
  display: block;
  overflow: visible;
  width: 100%;
  border-radius: 2px;
  margin-top: -1px;
  padding: 0;
  background: none;
  border: none;
}
employee-pay-lines .ph-required-icon {
  position: absolute;
  left: -5px;
  font-size: 9px;
  top: 22px;
}
employee-pay-lines.defaultPayLines {
  padding: 20px 40px;
  background-color: #fcfcfc;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
employee-pay-lines.defaultPayLines .ph-payLines-line {
  background-color: #ffffff !important;
}
employee-pay-lines input.form-control.nonEditableForm,
employee-pay-lines div.form-control.nonEditableForm {
  background-color: #fafafa;
  box-shadow: none;
  line-height: 20px;
  pointer-events: none;
}
employee-pay-lines > .ph-payLines-group {
  position: relative;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-groupHeader {
  height: 50px;
  padding-right: 25px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-groupHeader > .col-sm-6,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupHeader > .col-sm-8 {
  padding-left: 0;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-groupHeader > div {
  line-height: 48px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-groupHeader span {
  color: #333;
  font-weight: 600;
  margin: 0 10px 0 0;
  font-size: 14px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-groupHeader list-drop-down {
  display: inline-block;
  top: 6px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-groupHeader list-drop-down button {
  transition: background-color 0.25s ease-out;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line {
  position: relative;
  border: solid 1px #ddd;
  border-radius: 2px;
  margin-bottom: 5px;
  margin-top: -1px;
  background-color: #fcfcfc;
  overflow: hidden;
  width: 100%;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line input {
  transition: none;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .input-group-addon {
  max-width: 80px;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .leaveQuantity > input {
  width: calc(100% - 76px);
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .leaveQuantity .leaveUnitsBtn {
  float: left;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .leaveQuantity .leaveUnitsBtn button {
  min-width: 75px;
  width: 75px;
  background-color: #eee;
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: bold;
  color: #555;
  border-color: #ccc;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .leaveQuantity .leaveUnitsBtn button:focus {
  border-color: #ccc !important;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-whatsThis {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -15px;
  z-index: 10;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-whatsThis.floatingWhatsThis {
  right: unset;
  margin-left: 15px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row {
  line-height: 50px;
  padding-right: 25px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowText {
  height: 34px;
  line-height: 28px;
  padding-right: 25px;
  padding-bottom: 6px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowText span {
  float: left;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowText .ph-toggle {
  margin: 9px 15px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails {
  float: left;
  min-height: 50px;
  overflow: hidden;
  width: 100%;
  line-height: 50px;
  text-align: right;
  padding-right: 25px;
  border-top: solid 1px #eee;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails .input-group,
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails list-drop-down,
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails div:not(.input-group) > input {
  margin-top: 8px;
  margin-bottom: 8px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails div:not(.input-group) > bank-account-input input {
  margin-top: 0;
  margin-bottom: 0;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails .ph-inputErr-message {
  margin: 0;
  float: right;
  text-align: right;
  color: #d9534f !important;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails .ph-payLines-rowDetailsLabel {
  text-align: left;
  padding-left: 40px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails .ph-payLines-rowDetailsLabel span {
  color: #333333;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails .bankAccountNumber {
  color: #333;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails .bankAccountNumber > span {
  margin-right: 10px;
  color: #999;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails > div {
  color: #999;
  height: 50px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails > div > input {
  margin: 8px 0;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails > div .sm-close {
  color: #333;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails.ph-payLines-balanceTracker .ph-payLines-balanceTrackerReduce > * {
  float: left;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-rowDetails.ph-payLines-balanceTracker .ph-payLines-balanceTrackerReduce check-box {
  margin-right: 10px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-lineDetails {
  width: 100%;
  overflow: hidden;
  margin: 0;
  background-color: #fafafa;
  border: 0 solid #ddd;
  border-bottom: none;
  max-height: 1000px;
  transition: max-height 0.5s ease, padding 0.5s ease;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-lineDetails.ng-enter,
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-lineDetails.ng-leave.ng-leave-active {
  max-height: 0;
  padding: 0 40px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-lineDetails.ng-leave,
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-lineDetails.ng-enter.ng-enter-active {
  max-height: 1000px;
  padding: 30px 40px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-lineDetailsButtons {
  width: 100%;
  overflow: hidden;
  height: 50px;
  background-color: #fafafa;
  border-left: 0 solid #ddd;
  border-right: 0 solid #ddd;
  transition: height 0.5s ease;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-lineDetailsButtons.ng-enter,
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-lineDetailsButtons.ng-leave.ng-leave-active {
  height: 0;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-lineDetailsButtons.ng-leave,
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-lineDetailsButtons.ng-enter.ng-enter-active {
  height: 50px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line .ph-payLines-lineDetailsButtons button {
  margin: 8px;
  float: right;
  min-width: 100px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row {
  height: 50px;
  margin: 0;
  position: relative;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div > input.form-control,
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div > div.input-group,
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div > list-drop-down {
  height: 34px;
  margin: 8px 0;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div > input.form-control:not(.lockableFormInput),
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div > div.input-group:not(.lockableFormInput),
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div > list-drop-down:not(.lockableFormInput) {
  width: 100%;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div > lock-button {
  height: 34px;
  margin: 8px 0 8px 5px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div.ph-payLines-lineDescription {
  padding-left: 20px;
  display: flex;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div.ph-payLines-lineDescription .ph-payLines-lineNew {
  position: relative;
  background-color: #00adef;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin: 22px 10px 22px 0;
  float: left;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div.ph-payLines-lineDescription > span {
  cursor: default;
  font-weight: 600;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div.ph-payLines-lineDescription > span.lineToggle {
  cursor: pointer;
  color: #00adef;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div.ph-payLines-lineDescription > span .ion {
  cursor: pointer;
  top: 1px;
  left: 5px;
  color: #333;
  font-size: 13px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div.ph-payLines-lineDescription > span .descriptionNoteSpacer {
  margin: 7px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div.ph-payLines-lineDescription > span .lineAdditional {
  color: #333;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div.ph-payLines-lineDescription > span .lineAdditional > span {
  color: #999;
  font-weight: 200;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div.ph-payLines-lineDescription .ph-support-link {
  height: 100%;
  margin-left: 15px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line > .row > div.ph-payLines-lineLeaveDays {
  padding-right: 70px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-groupEmpty {
  width: 100%;
  position: relative;
  background-color: #ffffff;
  height: 50px;
  margin-bottom: 5px;
  padding-bottom: 20px;
  border: dashed 1px #ddd;
  border-radius: 2px;
  margin-top: -1px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-groupEmpty span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 12px;
  color: #999;
  font-weight: 200;
  top: 15px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter {
  border-bottom: none;
  height: 60px;
  text-align: right;
  font-weight: bold;
  padding-right: 15px;
  font-size: 14px;
  margin-bottom: 20px;
  position: relative;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter > list-drop-down {
  top: 10px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter > .ph-payLines-groupFooterTotal {
  position: absolute;
  top: 10px;
  right: 41px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-lineRate .ph-payLines-lineRateValue {
  height: 34px;
  line-height: 34px;
  margin: 8px 0;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-enter,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-enter,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-leave.ng-leave-active,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-leave.ng-leave-active {
  opacity: 0;
  height: 0;
  line-height: 0px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-enter input,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-enter input,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-leave.ng-leave-active input,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-leave.ng-leave-active input,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-enter .input-group-addon,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-enter .input-group-addon,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-leave.ng-leave-active .input-group-addon,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-leave.ng-leave-active .input-group-addon {
  height: 0 !important;
  padding: 0 12px !important;
  line-height: 0px !important;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-enter .ph-payLines-lineQuantity,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-enter .ph-payLines-lineQuantity,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-leave.ng-leave-active .ph-payLines-lineQuantity,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-leave.ng-leave-active .ph-payLines-lineQuantity,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-enter .ph-payLines-lineRate,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-enter .ph-payLines-lineRate,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-leave.ng-leave-active .ph-payLines-lineRate,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-leave.ng-leave-active .ph-payLines-lineRate {
  padding-top: 0;
  transition: padding-top 0.25s ease-out;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-leave,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-leave,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-enter.ng-enter-active,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-enter.ng-enter-active {
  opacity: 1;
  height: 51px;
  line-height: 50px;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-leave input,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-leave input,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-enter.ng-enter-active input,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-enter.ng-enter-active input,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-leave .input-group-addon,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-leave .input-group-addon,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-enter.ng-enter-active .input-group-addon,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-enter.ng-enter-active .input-group-addon {
  height: 34px !important;
  padding: 6px 12px !important;
  line-height: 12px !important;
}
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-leave .ph-payLines-lineQuantity,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-leave .ph-payLines-lineQuantity,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-enter.ng-enter-active .ph-payLines-lineQuantity,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-enter.ng-enter-active .ph-payLines-lineQuantity,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-leave .ph-payLines-lineRate,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-leave .ph-payLines-lineRate,
employee-pay-lines > .ph-payLines-group .ph-payLines-line.ng-enter.ng-enter-active .ph-payLines-lineRate,
employee-pay-lines > .ph-payLines-group .ph-payLines-groupFooter.ng-enter.ng-enter-active .ph-payLines-lineRate {
  padding-top: 8px;
  transition: padding-top 0.25s ease-out;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > div:first-child {
  margin-top: 40px;
  height: 50px;
  line-height: 48px;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > div:first-child > div:first-child {
  font-weight: 600;
  font-size: 14px;
  padding-left: 0;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > div:first-child > div:last-child {
  text-align: right;
  padding-right: 40px;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > .ph-payLines-accruedLeaveLine {
  padding-left: 0;
  padding-right: 25px;
  height: 50px;
  line-height: 50px;
  border: solid 1px #ddd;
  background-color: #fcfcfc;
  border-radius: 2px;
  margin-bottom: 5px;
  position: relative;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > .ph-payLines-accruedLeaveLine .ph-whatsThis {
  margin-left: 15px;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > .ph-payLines-accruedLeaveLine .col-sm-5,
employee-pay-lines .ph-payLines-accruedLeaveLines > .ph-payLines-accruedLeaveLine .col-sm-9 {
  font-weight: 600;
  padding-left: 20px;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > .ph-payLines-accruedLeaveLine .col-sm-3 > span {
  color: #999;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > .ph-payLines-accruedLeaveLine .ph-payLines-accruedLeaveLine-total {
  text-align: right;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > .ph-payLines-accruedLeaveLine .input-group {
  padding-top: 7px;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > .ph-payLines-accruedLeaveLine .input-group.ph-payLines-accruedLeaveLine-totalInput {
  max-width: 120px;
  float: right;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > .ph-payLines-accruedLeaveLine .leaveBar {
  background-color: #00adef;
  height: 24px;
  width: 5px;
  float: left;
  border-radius: 5px;
  margin: 13px 10px 13px 0;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > .ph-payLines-accruedLeaveLine .lineAdditional {
  color: #333;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
employee-pay-lines .ph-payLines-accruedLeaveLines > .ph-payLines-accruedLeaveLine .lineAdditional > span {
  color: #999;
  font-weight: 200;
}
notification-banner {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 10px;
  transition: all 0.25s ease-out;
}
notification-banner .notifBan-card {
  background-color: #fff;
  border-radius: 3px;
  padding: 30px 250px 30px 100px;
  transition: all 0.25s ease-out;
}
notification-banner .notifBan-card .notifBan-icon {
  position: absolute;
  font-size: 50px;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
}
notification-banner .notifBan-card .notifBan-secondIcon {
  position: absolute;
  font-size: 33px;
  top: 60%;
  transform: translateY(-50%);
  left: 48px;
}
notification-banner .notifBan-card .notifBan-button {
  height: 34px;
  min-width: 100px;
  padding: 6px 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 60px;
}
notification-banner .notifBan-card .notifBan-button:hover {
  color: #fff;
}
notification-banner .notifBan-card .notifBan-close {
  color: #fff;
}
notification-banner .notifBan-card h2 {
  margin: 0 0 5px 0;
  line-height: 1.5;
}
notification-banner .notifBan-card p {
  line-height: 1.5;
  margin-bottom: 0;
}
notification-banner .notifBan-card h2,
notification-banner .notifBan-card p,
notification-banner .notifBan-card span {
  transition: margin 0.25s, font-size 0.25s, line-height 0.25s, padding 0.25s;
}
notification-banner .notifBan-card.primary {
  background-color: #00adef;
  color: #fff;
}
notification-banner .notifBan-card.primary .notifBan-icon {
  color: #fff;
}
notification-banner .notifBan-card.primary .notifBan-secondIcon {
  color: #005e82;
}
notification-banner .notifBan-card.primary .notifBan-button {
  background-color: #005e82;
}
notification-banner .notifBan-card.primary .notifBan-button:hover {
  background-color: #00445b;
}
notification-banner .notifBan-card.success {
  background-color: #5eb22e;
  color: #fff;
}
notification-banner .notifBan-card.success .notifBan-icon {
  color: #fff;
}
notification-banner .notifBan-card.success .notifBan-button {
  background-color: #448723;
}
notification-banner .notifBan-card.success .notifBan-button:hover {
  background-color: #31631c;
}
notification-banner .notifBan-card.passive {
  background-color: #fff;
  color: #333;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
notification-banner .notifBan-card.passive .notifBan-icon {
  font-size: 60px;
  color: #00adef;
}
notification-banner .notifBan-card.passive .notifBan-secondIcon {
  color: #005e82;
}
notification-banner .notifBan-card.passive .notifBan-button {
  color: #fff;
  background-color: #00adef;
}
notification-banner .notifBan-card.passive .notifBan-button:hover {
  background-color: #008ec7;
}
notification-banner .notifBan-card.passive .notifBan-close {
  color: #333;
}
notification-banner .notifBan-card.warning {
  background-color: rgba(218, 53, 53, 0.1);
  color: #333;
}
notification-banner .notifBan-card.warning .notifBan-icon {
  color: #da3535;
}
notification-banner .notifBan-card.warning .notifBan-button {
  color: #fff;
  background-color: #da3535;
}
notification-banner .notifBan-card.warning .notifBan-button:hover {
  background-color: #ab2424;
}
notification-banner .notifBan-card.warning .notifBan-close {
  color: #333;
}
notification-banner .notifBan-card.hideNotification {
  padding: 0 25px 0 100px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s;
}
notification-banner .notifBan-card.hideNotification > h2,
notification-banner .notifBan-card.hideNotification > p,
notification-banner .notifBan-card.hideNotification > span {
  font-size: 0;
  line-height: 0;
  margin: 0;
  transition: all 0.25s;
}
notification-banner .notifBan-card.hideNotification button {
  padding: 0 20px;
  height: 0;
}
notification-banner.hideNotification {
  margin: 0;
  pointer-events: none;
  transition: all 0.25s;
}
company-select {
  position: relative;
  display: block;
}
company-select .ph-toolbar {
  display: block;
  margin: 0 auto 5px auto;
  width: 100%;
}
company-select .ph-toolbar > h4 > span {
  color: #999;
}
company-select .ph-toolbar > .ph-search input {
  max-width: 350px;
}
company-select .ph-companySelect-companyCard {
  position: relative;
  display: block;
  margin: 0 auto 10px auto;
  padding: 0 30px 0 0;
  background-color: #FFFFFF;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
company-select .ph-companySelect-companyCard.-myCompany {
  margin-bottom: 30px;
}
company-select .ph-companySelect-companyCard.disabledCard {
  cursor: default;
  pointer-events: none;
}
company-select .ph-companySelect-companyCard.alreadyLoggedIn {
  background-color: #f4f4f4;
  border: 0;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.07);
}
company-select .ph-companySelect-companyCard.alreadyLoggedIn:hover,
company-select .ph-companySelect-companyCard.alreadyLoggedIn:active {
  background-color: #f1f1f1 !important;
}
company-select .ph-companySelect-companyCard .ph-statRow {
  padding: 15px;
}
company-select .ph-companySelect-companyCard .ph-statRow > .ph-company-image {
  float: left;
  display: block;
  height: 70px;
  position: relative;
}
company-select .ph-companySelect-companyCard .ph-statRow > .ph-company-image > img {
  position: relative;
  height: 70px;
  left: 10px;
  margin-right: 20px;
}
company-select .ph-companySelect-companyCard .ph-statRow > .ph-company-name {
  min-width: 250px;
  padding-top: 5px;
}
company-select .ph-companySelect-companyCard .ph-statRow > .ph-company-name .statValue {
  color: #00adef;
}
company-select .ph-companySelect-companyCard .ph-statRow > .ph-company-name .statTitle span:first-child {
  color: #333;
}
company-select .ph-companySelect-companyCard .ph-statRow i,
company-select .ph-companySelect-companyCard .ph-statRow .ph-company-state {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
company-select .ph-companySelect-companyCard .ph-statRow .ph-company-state {
  right: 45px;
  margin: 0;
}
company-select .ph-companySelect-companyCard .ph-statRow i {
  color: #bbb;
  right: 10px;
}
company-select .ph-companySelect-companyCard:hover {
  background-color: #fafafa;
}
company-select .ph-companySelect-companyCard:active {
  background-color: #eee;
}
company-select .ph-emptyState.-myClients {
  height: 100px;
}
company-select .ph-emptyState.-myClients > div {
  top: 40px;
}
company-select .ph-emptyState.-myCompany {
  margin-bottom: 30px;
  height: 100px;
  background-color: #fff;
  cursor: pointer;
}
company-select .ph-emptyState.-myCompany > div {
  top: 40px;
}
company-select .ph-emptyState.-myCompany > div a {
  font-weight: 500;
}
company-select .ph-emptyState.-myCompany:hover {
  background-color: #fcfcfc;
}
company-select .ph-emptyState.-myCompany:hover a {
  color: #008fb7;
}
dash-grid {
  display: block;
  overflow: hidden;
  width: 100%;
  min-height: 400px;
  margin-bottom: 30px;
}
dash-grid > div {
  display: block;
  overflow: hidden;
  width: 100%;
  min-height: 400px;
}
dash-grid > div .dashGrid-dashBlock .tableHeaderRow {
  cursor: move !important;
}
dash-grid > div .dashGrid-dashBlock .tableHeaderRow:hover {
  background-color: #efefef;
}
dash-grid > div .dashGrid-dashBlock .tableHeaderRow:active {
  background-color: #e4e4e4;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable {
  margin-bottom: 0;
  height: 100%;
  background-color: #f9f9f9;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .tableHeaderRow .ph-notification-clearAll {
  float: right;
  font-weight: normal;
  position: absolute;
  right: 15px;
  cursor: pointer;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .tableHeaderRow .ph-notification-counter {
  padding: 0;
  font-size: 10px;
  background-color: #00adef;
  position: relative;
  border-radius: 15px;
  height: 22px;
  width: 22px;
  transition: all 0.25s;
  color: #fff;
  line-height: 22px;
  text-align: center;
  margin-left: -5px;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .tableHeaderRow.emptyReportHeader {
  width: 100%;
  height: 100%;
  border: none;
  position: relative;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .tableHeaderRow.emptyReportHeader > .newReportContainer {
  position: absolute;
  width: 100%;
  height: 78px;
  top: 50%;
  left: 50%;
  transform: translateY(-30%) translateX(-50%);
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .tableHeaderRow.emptyReportHeader > .newReportContainer list-drop-down {
  margin: 0 auto;
  width: 34px;
  float: none;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .tableHeaderRow.emptyReportHeader > .newReportContainer > h4 {
  width: 100%;
  height: 34px;
  line-height: 34px;
  text-align: center;
  color: #bbb;
  cursor: move;
  float: left;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .scrollContainer {
  height: calc(100% - 51px);
  max-height: none !important;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .scrollContainer .ph-card-action:hover {
  background-color: #fafafa;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .scrollContainer .ph-notification-remove {
  left: unset;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .scrollContainer .ph-notification-date {
  color: #999;
  font-size: 10px;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .scrollContainer .ph-emptyState {
  height: 100%;
  border: none;
}
dash-grid > div .dashGrid-dashBlock .ph-scrollTable .scrollContainer .ph-emptyState > div {
  top: 50%;
  transform: translateY(-50%);
}
dash-grid > div .dashGrid-dashBlock .dashGrid-report .tableHeaderRow > div:last-child {
  float: right;
  width: 50px;
  position: relative;
}
dash-grid > div .dashGrid-dashBlock .dashGrid-report .scrollContainer {
  padding: 25px 10px 10px 25px;
  background-color: #fcfcfc;
  -webkit-overflow-scrolling: auto !important;
}
dash-grid > div .dashGrid-dashBlock .dashGrid-report report-table {
  height: 100%;
}
dash-grid > div .dashGrid-dashBlock .dashGrid-newReport {
  height: 100%;
  width: 100%;
  background-color: #f9f9f9;
  border: solid 1px #ddd;
  position: relative;
  cursor: move;
}
dash-grid > div .dashGrid-dashBlock .dashGrid-newReport > .ion-ios-close-empty {
  top: 20px;
}
report-table-settings .dts-colListHeader {
  width: 100%;
  height: 25px;
  margin-bottom: 5px;
  line-height: 25px;
  padding-left: 5px;
  font-weight: bold;
  overflow: hidden;
}
report-table-settings .dts-colListContainer {
  width: 100%;
  height: calc(100% - 119px - 75px);
  border: 1px solid #dddddd;
  border-radius: 2px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  background-color: #ffffff;
}
report-table-settings .dts-colList {
  width: 100%;
  background-color: #FFFFFF;
}
report-table-settings .dts-colList .dts-colListItemHeader {
  height: 35px;
  line-height: 35px;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #f4f4f4;
  border-bottom: solid 1px #ddd;
  position: relative;
}
report-table-settings .dts-colList .dts-colListItemHeader .dts-colListAddItemBtn {
  float: right;
  top: 5px;
}
report-table-settings .dts-colList .dts-colListEmpty {
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: #bbb;
}
report-table-settings .dts-colList .dts-colListSelectedItem {
  width: 100%;
  position: relative;
  height: 35px;
  line-height: 35px;
  padding-left: 15px;
  padding-right: 30px;
  overflow: hidden;
}
report-table-settings .dts-colList .dts-colListSelectedItem:nth-child(odd) {
  background-color: #fff;
}
report-table-settings .dts-colList .dts-colListSelectedItem:nth-child(even) {
  background-color: #f9f9f9;
}
report-table-settings .dts-colList .dts-colListSelectedItem .sm-close {
  top: 17px;
}
report-table-settings .dts-colList .dts-colListSelectedItem .itemAdd {
  position: absolute;
  font-size: 18px;
  top: 8px;
  right: 18px;
  color: #999;
}
report-table-settings .dts-colList .dts-colListSelectedItem .dts-colListItemFunc {
  height: 21px;
  float: right;
  margin: 5px 10px 0 0;
  width: 85px;
}
report-table-settings .dts-colList .dts-colListSelectedItem .dts-colListItemFunc > button {
  height: 25px;
  padding: 2px 21px 2px 12px;
  line-height: 15px;
  width: 100%;
  border: 1px solid #dddddd;
  border-radius: 2px;
  background-color: #FFFFFF;
}
report-table-settings .dts-colList .dts-colListSelectedItem .dts-colListItemFunc .caret {
  position: absolute;
  right: 5px;
  top: 9px;
}
.dts-colListItemFuncItem {
  cursor: pointer;
  font-size: 12px;
  height: 25px;
  padding-left: 15px;
  line-height: 25px;
}
.dts-colListItemFuncItem:hover {
  background-color: #FAFAFA;
}
report-filter-settings {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
}
report-filter-settings .filterSettings-available {
  width: 100%;
  border: 1px solid #dddddd;
  border-radius: 2px;
  min-height: 20px;
  height: calc(100% - 50px);
  background-color: #f9f9f9;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  transition: background-color ease 0.3s;
}
report-filter-settings .filterSettings-available.filterSettings-noFilters {
  background-color: #FFFFFF;
}
report-filter-settings .filterSettings-available .filterSettings-filter {
  height: auto;
  width: 100%;
  overflow: visible;
  position: relative;
}
report-filter-settings .filterSettings-available .filterSettings-filter .filterSettings-filterRow {
  width: 100%;
  height: 50px;
  position: relative;
  background-color: #FFFFFF;
  border-bottom: 1px solid;
  border-color: #dddddd;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.25s ease-out;
}
report-filter-settings .filterSettings-available .filterSettings-filter .filterSettings-filterRow:hover {
  background-color: #fafafa;
}
report-filter-settings .filterSettings-available .filterSettings-filter .filterSettings-filterRow:active {
  background-color: #eee;
}
report-filter-settings .filterSettings-available .filterSettings-filter .filterSettings-filterRow > div {
  float: left;
  line-height: 50px;
  padding-left: 15px;
  position: relative;
}
report-filter-settings .filterSettings-available .filterSettings-filter .filterSettings-filterRow .upDownArrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -15px !important;
  font-size: 14px !important;
  margin-left: 5px;
}
report-filter-settings .filterSettings-available .filterSettings-filter .filterSettings-filterRow > .ion-edit {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  font-size: 20px;
}
report-filter-settings .filterSettings-available .filterSettings-filter .filterSettings-filterRow > .ion-edit {
  right: 40px;
  font-size: 11px;
  top: calc(50% - 1px);
}
report-filter-settings .filterSettings-available .filterSettings-filter .filterSettings-filterRow > .sm-close {
  top: 24px;
}
report-filter-settings .filterSettings-available .filterSettings-filter .filterSettings-filterContent {
  width: 100%;
  padding: 5px 5px 10px 5px;
  background-color: #fff;
  border-bottom: 1px solid #dddddd;
  transition: all 0.25s ease-out;
}
report-filter-settings .filterSettings-available .filterSettings-filter .filterSettings-filterContent .filterSettings-filterContentRow {
  width: 100%;
  height: 35px;
  padding: 0 10px 0 10px;
  line-height: 35px;
}
report-filter-settings .filterSettings-handleRow {
  width: 100%;
  height: 44px;
  padding-top: 16px;
}
report-table {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
report-table .table-outerContainer {
  width: 100%;
  height: 100%;
  overflow: scroll;
  position: relative;
}
report-table .table-outerContainer .table-colHeaderRowBackground {
  position: absolute;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #F5F5F5;
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  z-index: 3;
  min-width: 100%;
}
report-table .table-outerContainer .table-innerContainer {
  min-width: 100%;
  min-height: 100%;
  position: relative;
  background: url("assets/reportsTableBackground.svg");
  margin-bottom: -5px;
  overflow: auto;
  display: table;
  table-layout: fixed;
}
report-table .table-outerContainer .table-innerContainer .table-colHeaderRowBackground {
  position: absolute;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #F5F5F5;
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  z-index: 3;
}
report-table .table-outerContainer .table-innerContainer .table-colContainer {
  height: 100%;
  position: relative;
  overflow: hidden;
  display: table-cell;
}
report-table .table-outerContainer .table-innerContainer .table-colContainer .table-col {
  float: left;
  position: relative;
  height: 100%;
  padding-top: 50px;
  width: calc(100% - 2px);
}
report-table .table-outerContainer .table-innerContainer .table-colContainer .table-col .table-headerRow {
  height: 50px;
  line-height: 40px;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  position: absolute;
  z-index: 4;
  cursor: pointer;
  top: 0;
}
report-table .table-outerContainer .table-innerContainer .table-colContainer .table-col .table-headerRow:hover {
  background-color: #fafafa;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
report-table .table-outerContainer .table-innerContainer .table-colContainer .table-col .table-headerRow > i {
  float: left;
  margin-top: 17px;
  margin-right: 5px;
  margin-left: 2px;
}
report-table .table-outerContainer .table-innerContainer .table-colContainer .table-col .table-headerRow .table-headerRowName {
  z-index: 5;
  font-weight: bold;
  height: 50px;
  padding: 5px 0;
}
report-table .table-outerContainer .table-innerContainer .table-colContainer .table-col .table-headerRow .table-headerRowName > span {
  height: 18px;
  line-height: 18px;
}
report-table .table-outerContainer .table-innerContainer .table-colContainer .table-col .table-headerRow .table-headerRowName > span:first-child {
  margin-right: 5px;
}
report-table .table-outerContainer .table-innerContainer .table-colContainer .table-col .table-headerRow .table-headerRowName > span:last-child {
  font-size: 12px;
  color: #757575;
}
report-table .table-outerContainer .table-innerContainer .table-colContainer .table-col .table-row {
  height: 25px;
  width: 100%;
  line-height: 25px;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
}
report-table .table-outerContainer .table-innerContainer .table-colResize {
  width: 10px;
  height: 100%;
  background-color: transparent;
  cursor: ew-resize;
  z-index: 5;
  border-right: 2px solid #dddddd;
  position: absolute;
  right: 0;
}
report-table .table-outerContainer .table-innerContainer .table-colResize:hover {
  border-right: 2px solid steelblue;
}
report-table .table-outerContainer::-webkit-scrollbar {
  width: 15px !important;
  height: 15px !important;
}
report-table .table-outerContainer::-webkit-scrollbar-track {
  background-color: #ffffff !important;
}
report-table .table-outerContainer::-webkit-scrollbar-thumb {
  background-color: #dddddd !important;
  background-clip: content-box !important;
}
report-table .table-outerContainer::-webkit-scrollbar-thumb:vertical {
  border-left: transparent solid 8px !important;
}
report-table .table-outerContainer::-webkit-scrollbar-thumb:horizontal {
  border-top: transparent solid 8px !important;
}
report-table .table-outerContainer::-webkit-scrollbar-corner {
  background-color: transparent !important;
}
report-table .table-borderBottom,
report-table .table-borderLeft,
report-table .table-borderRight {
  position: absolute;
  z-index: 10;
}
report-table .table-borderBottom {
  width: calc(100% - 15px);
  height: 1px;
  border-bottom: 1px solid #dddddd;
  bottom: 15px;
}
report-table .table-borderLeft {
  width: 1px;
  border-left: 1px solid #dddddd;
  height: calc(100% - 15px);
  left: 0;
}
report-table .table-borderRight {
  width: 1px;
  border-left: 1px solid #dddddd;
  height: calc(100% - 15px);
  right: 15px;
}
report-chart {
  width: 100%;
  height: 100%;
  display: block;
}
leave-request-day-popover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
leave-request-day-popover .hoverArea {
  background-color: transparent;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.popover .leaveRequestDayPopover-container {
  background-color: #fafafa;
  border-radius: 3px;
  width: 400px;
}
.popover .leaveRequestDayPopover-container .requestDayPopover-title {
  width: 100%;
  line-height: 60px;
  color: #333;
  background-color: #F9F9F9;
  height: 61px;
  border-bottom: 1px solid #DDDDDD;
  padding: 0 15px;
}
.popover .leaveRequestDayPopover-container .requestDayPopover-title span {
  float: right;
  color: #999999;
  font-size: 12px;
}
.popover .leaveRequestDayPopover-container .requestDayPopover-title span.validDay {
  color: #5eb22e;
}
.popover .leaveRequestDayPopover-container .requestDayPopover-details {
  min-height: 50px;
  background-color: #FFFFFF;
  width: 100%;
  padding: 10px 20px;
}
.popover .leaveRequestDayPopover-container .requestDayPopover-details .requestDayPopover-detailsRow {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
.popover .leaveRequestDayPopover-container .requestDayPopover-details .requestDayPopover-detailsRow .rowLabel {
  float: left;
  color: #999;
}
.popover .leaveRequestDayPopover-container .requestDayPopover-details .requestDayPopover-detailsRow .rowValue {
  float: right;
  color: #333;
}
pay-employee-messages-popover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
pay-employee-messages-popover .hoverArea {
  background-color: transparent;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.popover .payEmployeeMessagesContainer {
  background-color: #333;
  padding: 20px 25px;
  border-radius: 2px;
  color: #FFFFFF;
}
.popover .payEmployeeMessagesContainer .payEmployeeMessagesHeader {
  font-size: 14px;
  padding-top: 5px;
  padding-bottom: 15px;
}
.popover .payEmployeeMessagesContainer .payEmployeeMessagesHeader .ion-alert-circled {
  margin-right: 7px;
  top: 1px;
}
.popover .payEmployeeMessagesContainer.errorMessages .payEmployeeMessagesHeader {
  color: #b22e2e;
}
.popover .payEmployeeMessagesContainer.warningMessages .payEmployeeMessagesHeader {
  color: #f1ca03;
}
.popover .payEmployeeMessagesContainer .payEmployeeMessagesList {
  padding: 5px 15px 10px 40px;
  margin: 0;
  font-size: 12px;
}
.popover .payEmployeeMessagesContainer .payEmployeeMessagesList li:not(:last-child) {
  margin-bottom: 15px;
}
tooltip-popover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
tooltip-popover .hoverArea {
  background-color: transparent;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.popover .tooltipPopoverContent {
  border-radius: 2px;
  background-color: #333;
  padding: 10px 30px;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
toggle-popover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
toggle-popover .hoverArea {
  background-color: transparent;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.popover .togglePopoverContent {
  position: relative;
  border-radius: 2px;
  background-color: #333;
  padding: 10px 45px;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.popover .togglePopoverContent .ion-ios-close-empty {
  position: absolute;
  top: 20px;
  margin-right: 5px;
}
.popover .togglePopoverContent .ion-ios-close-empty:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
time-approved-lock {
  padding-left: 10px;
  color: #5eb22e;
}
lock-button {
  display: block;
  position: relative;
  overflow: hidden;
  float: left;
  margin-left: 7px;
}
lock-button > button.btn {
  width: 34px;
  height: 34px;
  display: block;
}
list-popover {
  position: absolute;
  height: 28px;
  width: 28px;
  float: left;
  margin: 11px 0 11px 7px;
}
list-popover .listPopover-icon {
  padding: 4.5px 0 5px 0;
  font-size: 10px;
  background-color: #eee;
  position: relative;
  border-radius: 15px;
  height: 28px;
  width: 28px;
  transition: all 0.25s;
  cursor: pointer;
  color: #999;
  line-height: 18px;
  text-align: center;
}
list-popover .listPopover-icon:hover {
  cursor: pointer;
  background-color: #ddd;
  color: #333;
}
.popover .listPopover-container {
  border-radius: 3px;
  background-color: #333;
  padding: 15px 20px;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1.5;
}
.popover .listPopover-container .listPopover-title {
  width: 100%;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 10px;
}
.popover .listPopover-container .listPopover-list {
  padding: 0;
  margin: 0;
  list-style-position: inside;
}
.popover .listPopover-container .listPopover-list > * + * {
  margin-top: 7px;
}
employee-clock-label {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  position: relative;
}
employee-clock-label .-timerIcon {
  background-color: #b22e2e;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  position: absolute;
  top: 12px;
  left: 5px;
}
employee-clock-label .-timerIcon.-breakTimerIcon {
  background-color: #f1ca03;
}
employee-clock-label .-clockLabel {
  color: #999;
  font-size: 12px;
  float: left;
  margin-left: 25px;
}
employee-clock-label .-clockLabel.-location {
  margin-left: 8px;
}
employee-clock-label .-projectColor {
  width: 5px;
  float: left;
  margin: 3px 0 3px 25px;
  border-radius: 5px;
}
employee-clock-label span {
  float: left;
  margin-left: 8px;
}
employee-clock-label span.-clockDate {
  float: right;
  margin-left: 0;
  color: #999;
}
employee-clock-label i {
  float: left;
  width: 20px;
  text-align: center;
  height: 34px;
  line-height: 34px;
  margin-left: 5px;
  color: #999;
  cursor: pointer;
}
user-access-icon {
  margin-left: 7px;
}
user-access-icon i {
  margin: 0;
}
user-access-icon .-expired {
  color: #d9534fCC;
}
user-access-icon .-pending {
  color: #00adef;
}
user-access-icon .-deactivated {
  color: #aaaaaa;
}
user-access-icon .-active {
  color: #00adef;
}
user-action {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  min-height: 200px;
  width: 100%;
  height: 100%;
}
user-action.-actionActive {
  display: none;
}
.akahuAccount {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin: 20px;
  padding: 20px;
  border: 1px solid #DDDDDD;
  border-radius: 3px;
}
.akahuAccount.selected {
  border-color: #5eb22e;
}
.akahuAccount img {
  height: 50px;
  margin-right: 20px;
  border-radius: 3px;
}
.akahuAccount .akahuAccount-radioBtnOuter {
  margin-right: 20px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  margin-top: -1px;
  position: relative;
  padding: 0;
}
.akahuAccount .akahuAccount-radioBtnOuter .akahuAccount-radioBtnInner {
  width: 14px;
  height: 14px;
  background-color: #5eb22e;
  border-radius: 8px;
  transition: width 0.25s, height 0.25s;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.akahuAccount .akahuAccount-accountInfo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-right: 20px;
}
.akahuAccount .akahuAccount-accountInfo .akahuAccount-accountName {
  font-size: 14px;
  margin-bottom: 5px;
}
.akahuAccount .akahuAccount-accountInfo .akahuAccount-accountNumber {
  color: #999;
}
.akahuAccount .akahuAccount-accountBalance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.akahuAccount .akahuAccount-accountBalance .akahuAccount-balanceName {
  color: #999;
}
.akahuAccount .akahuAccount-accountBalance .akahuAccount-balance {
  font-size: 14px;
  font-weight: 600;
  margin-top: 5px;
}
.akahuPaymentReview-container .akahuPaymentReview-accountLine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #dedede;
}
.akahuPaymentReview-container .akahuPaymentReview-accountLine .akahuPaymentReview-account {
  display: flex;
}
.akahuPaymentReview-container .akahuPaymentReview-accountLine .akahuPaymentReview-account img {
  height: 50px;
  margin-right: 10px;
  border-radius: 3px;
}
.akahuPaymentReview-container .akahuPaymentReview-accountLine .akahuPaymentReview-account .akahuPaymentReview-accountDetail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
}
.akahuPaymentReview-container .akahuPaymentReview-accountLine .akahuPaymentReview-account .akahuPaymentReview-accountDetail span {
  font-size: 12px;
  margin-top: 5px;
  color: #999;
}
.akahuPaymentReview-container .akahuPaymentReview-infoLine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #dedede;
}
.akahuPaymentReview-container .akahuPaymentReview-infoLine:last-child {
  padding: 20px 0 0 0;
  border: none;
}
.akahuPaymentReview-container .akahuPaymentReview-infoLine span {
  font-weight: 600;
}
.akahuPaymentsList-container .akahuPaymentsList-payments {
  max-height: 400px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.akahuPaymentsList-container .akahuPaymentsList-payments .akahuPaymentsList-payment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #dedede;
}
.akahuPaymentsList-container .akahuPaymentsList-payments .akahuPaymentsList-payment:first-child {
  padding-top: 0;
}
.akahuPaymentsList-container .akahuPaymentsList-payments .akahuPaymentsList-payment:last-child {
  padding-bottom: 0;
  border: none;
}
.akahuPaymentsList-container .akahuPaymentsList-payments .akahuPaymentsList-payment .akahuPaymentsList-paymentDetail {
  display: flex;
  flex-direction: column;
  font-weight: 600;
}
.akahuPaymentsList-container .akahuPaymentsList-payments .akahuPaymentsList-payment .akahuPaymentsList-paymentDetail span {
  margin-top: 5px;
  font-weight: 400;
  color: #999;
}
.akahuPaymentsList-container .akahuPaymentsList-payments .akahuPaymentsList-payment .akahuPaymentsList-paymentAmount {
  font-weight: 600;
}
.akahuPaymentsList-container .akahuPaymentsList-divider {
  width: 100%;
  height: 1px;
  background-color: #dedede;
}
.akahuPaymentsList-container .akahuPaymentsList-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 20px;
  color: #999;
}
.akahuPaymentsList-container .akahuPaymentsList-total span {
  margin-top: 5px;
  font-weight: 600;
  color: #333;
}
.steppedProgress-container {
  margin: 20px 0;
}
.steppedProgress-container .steppedProgress-headers {
  display: flex;
  margin-bottom: 5px;
}
.steppedProgress-container .steppedProgress-headers .steppedProgress-header {
  color: #999;
}
.steppedProgress-container .steppedProgress-headers .steppedProgress-header.completed {
  color: #337ab7;
}
.steppedProgress-container .steppedProgress-headers .steppedProgress-header.selected {
  font-weight: 600;
}
.steppedProgress-container .steppedProgress-bar {
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background-color: #dedede;
}
.steppedProgress-container .steppedProgress-bar.spInner {
  background-color: #337ab7;
  transition: width 0.15s ease;
}