@charset "UTF-8";
/** this file contains generic styles to be used accross the app in order to keep things consistent
**/
/** this file contains all colours to be used accross the app in order to keep things consistent
    Hex codes for colours should not be used. instead - use the colours defined in this file.
**/
.text-grey {
  color: #636363;
}

.text-light-grey {
  color: #878787;
}

.text-blue {
  color: #125d8f;
}

.text-orange {
  color: #dca91b;
}

.text-red {
  color: #b62116;
}

.text-green {
  color: #16b68b;
}

.text-package-hr-success {
  color: #299AE5;
}

.text-package-hr-essentials {
  color: #299AE5;
}

.text-package-leave {
  color: #125d8f;
}

.text-package-time {
  color: #f3836b;
}

/** this file contains generic styles to be used accross the app in order to keep things consistent
**/
/** this file contains all colours to be used accross the app in order to keep things consistent
    Hex codes for colours should not be used. instead - use the colours defined in this file.
**/
.text-grey {
  color: #636363;
}

.text-light-grey {
  color: #878787;
}

.text-blue {
  color: #125d8f;
}

.text-orange {
  color: #dca91b;
}

.text-red {
  color: #b62116;
}

.text-green {
  color: #16b68b;
}

.text-package-hr-success {
  color: #299AE5;
}

.text-package-hr-essentials {
  color: #299AE5;
}

.text-package-leave {
  color: #125d8f;
}

.text-package-time {
  color: #f3836b;
}

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}

.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: rgb(255, 255, 255);
}

.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3);
}

html {
  height: 100%;
}

html, body {
  min-width: 320px;
  overflow: auto;
}

@media (min-width: 992px) {
  body {
    height: 100%;
  }
}
body {
  font-family: "Roboto", "Open Sans";
  font-size: 13px;
}

.body-container {
  min-height: 100%;
  margin-bottom: -40px;
}

.body-container:after {
  content: "";
  display: block;
  height: 40px;
}

.container.wide-screen {
  width: 100%;
}

.splash-msg {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 4;
  background: #45474d linear-gradient(#444, #555);
  color: #ffffff;
  font-weight: lighter;
  font-size: 1.2em;
  letter-spacing: 1px;
  text-align: center;
  padding: 10px 5px;
}
.splash-msg button.dismiss {
  color: #cdcdcd;
  position: absolute;
  top: 10px;
  right: 10px;
}

.splash-msg.trial {
  background: #444;
  height: 50px;
  padding-top: 14px;
}
@media (max-width: 1100px) {
  .splash-msg.trial {
    padding-left: 8px;
    text-align: left;
  }
}
.splash-msg.trial a.purchse {
  color: orange;
}
.splash-msg.trial a.purchse:hover {
  text-decoration: underline;
}
.splash-msg.trial .trial-buttons {
  position: absolute;
  top: 10px;
}
.splash-msg.trial .trial-buttons.left {
  left: 8px;
}
@media (max-width: 1100px) {
  .splash-msg.trial .trial-buttons.left {
    display: none;
  }
}
.splash-msg.trial .trial-buttons.right {
  right: 8px;
}
.splash-msg.trial .trial-buttons button, .splash-msg.trial .trial-buttons a {
  min-width: 160px;
  font-size: 12px;
  border-radius: 100px;
}
.splash-msg.trial .trial-buttons .btn-talent-hub {
  color: #fff;
  width: auto;
}

.splash-msg.sandbox .flex {
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

.splash-msg.partner {
  background: #D4E6F1;
  color: #2a6182;
}
.splash-msg.partner .flex {
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

.splash-msg.sm {
  font-size: 1em;
}

.splash-msg.warning {
  background: #a94442;
}

.splash-msg.soft-warning {
  background: #fdeeea;
  color: #ED4B27;
  border: 1px solid #f48e77;
}

.splash-msg.preview {
  background: #f3836b;
}

.splash-msg.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-item-grow {
  flex-grow: 1;
}

.unsupported-browser-msg {
  padding: 0px 5px;
  height: 60px;
  background-color: #b62116;
  color: white;
  z-index: 5;
  position: fixed;
  top: 0px;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
  -webkit-box-shadow: 0px 4px 5px 3px rgb(204, 204, 204);
  -moz-box-shadow: 0px 4px 5px 3px rgb(204, 204, 204);
  box-shadow: 0px 4px 5px 3px rgb(204, 204, 204);
}
.unsupported-browser-msg .text {
  padding-right: 5px;
  flex: 1px;
  text-align: center;
}
.unsupported-browser-msg .close {
  font-size: 18px;
  cursor: pointer;
}

body {
  background-color: #f4f4f4;
}

.header {
  border-bottom: 1px solid #C3C3C3;
  background-color: #fff;
  z-index: 9;
}
.header .material-icons {
  font-size: 25px;
}
.header .btn-mobile {
  background: transparent;
  border: 0px;
  color: #9EAAB6;
  padding: 0px;
  outline: none;
}
.header .btn-mobile :hover {
  color: #333;
}
.header .appogee-logo {
  height: 50px;
}
.header .appogee-logo img {
  height: 100%;
}
.header .customer-logo {
  max-width: 250px;
}
.header .toolbar a, .header .toolbar span {
  color: #a0aab6;
  margin-left: 20px;
}
.header .toolbar a :hover, .header .toolbar span :hover {
  color: #333;
}
.header .toolbar a.btn-book-demo {
  color: #fff;
}
.header .toolbar a.btn-book-demo:hover {
  color: #16b68b;
}
.header .toolbar a.btn-demo-mode {
  color: #fff;
}
.header .toolbar a.btn-demo-mode:hover {
  color: #f3836b;
}
.header .toolbar .avatar {
  vertical-align: baseline;
}
.header .toolbar .sep {
  width: 1px;
  background-color: #ededed;
  height: 100%;
  display: inline-block;
  height: 30px;
  margin-left: 20px;
}
.header .toolbar .profile-picture img {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  vertical-align: unset;
}
.header .toolbar .alerts {
  position: relative;
}
.header .toolbar .alerts .active {
  display: none;
}
.header .toolbar .alerts .inactive {
  display: inline-block;
}
.header .toolbar .alerts.active .active {
  display: inline-block;
}
.header .toolbar .alerts.active .inactive {
  display: none;
}
.header .toolbar .alerts.active .count {
  display: inline;
}
.header .toolbar .alerts.panel-active {
  color: #333;
}
.header .toolbar .alerts.panel-active :hover {
  color: #a0aab6;
}
.header .toolbar .alerts .count {
  display: none;
  position: absolute;
  top: -8px;
  left: 11px;
  width: 20px;
  height: 20px;
  font-size: 11px;
  border: 1px solid #fff;
  border-radius: 15px;
  margin: auto;
  text-align: center;
  background: #b62116;
  color: #fff;
  padding-top: 2px;
}

.main-menu {
  background-color: #1674b4;
  z-index: 5;
  transition: width 0.5s ease;
  /*
  a span {
    position: relative;
    top: calc(50% - 15px);
    padding: 0px 18px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
  }

  a span.menu-label {
    margin-top: 10px;
  }
  */
  /* Create btn and open/close holder */
}
.main-menu .material-icons {
  font-size: 26px;
}
.main-menu a.menu-toggle {
  border: none;
  outline: none;
  padding: 15px 18px;
}
.main-menu a.menu-toggle i {
  font-size: 16px;
}
.main-menu a.menu-toggle:hover {
  background-color: inherit;
}
.main-menu a {
  display: flex;
  color: #fff;
  vertical-align: middle;
  min-height: 45px;
  border-left: 4px solid #1674b4;
  padding: 9px 8px 9px 15px;
  /*
   &[data-alias="welcome"] {
     background-color: $orange;
     border-radius: 30px;
     margin: 10px 0px;
     &.selected {
       background-color: $orange;
     }
     &:hover {
       background-color: $orange;
     }
     .menu-label {
       margin-top: 6px;
     }
   }
   */
  /*
  &[data-alias="welcome"] {
    background-color: $secondary-color;
    border-radius: 30px;
    margin: 10px 0px;
    &.selected {
      background-color: $secondary-color;
    }
    &:hover {
      background-color: $secondary-color;
    }
    .menu-label {
      margin-top: 6px;
    }
  }
   */
}
.main-menu a.selected {
  border-left: 4px solid #f3836b;
  background-color: #125d8f;
  color: #fff;
}
.main-menu a:hover {
  background-color: #125d8f;
  border-left-color: #125d8f;
  color: #fff;
}
.main-menu a.selected:hover {
  border-left-color: #f3836b;
}
.main-menu a .menu-icon {
  display: block;
  float: left;
  width: 26px;
}
.main-menu a .menu-label {
  display: block;
  float: left;
  margin-top: 5px;
  margin-left: 15px;
  width: 132px;
}
.main-menu .sep {
  background-color: #125d8f;
  height: 1px;
  width: 85%;
  margin: 5px auto;
}
.main-menu .menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.main-menu .menu-header .menu-toggle {
  margin-left: 5px;
}
.main-menu .menu-header .btn-create {
  margin: 10px 10px;
  cursor: pointer;
}
.main-menu .menu-header .btn-create .menu-icon i {
  font-weight: bold;
  color: #fff;
}
.main-menu .menu-header .sep {
  margin: 0px;
  width: 100%;
}
.main-menu .menu-header-mobile {
  display: none;
  padding-top: 5px;
}
.main-menu .menu-header-mobile a {
  font-style: italic;
}
.main-menu .menu-header-mobile a i {
  margin-right: 5px;
}

.partners-menu {
  background-color: #f3836b;
  z-index: 5;
  transition: width 0.5s ease;
  /*
  a span {
    position: relative;
    top: calc(50% - 15px);
    padding: 0px 18px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
  }

  a span.menu-label {
    margin-top: 10px;
  }
  */
  /* Create btn and open/close holder */
}
.partners-menu .material-icons {
  font-size: 26px;
}
.partners-menu a.menu-toggle {
  border: none;
  outline: none;
  padding: 15px 18px;
}
.partners-menu a.menu-toggle i {
  font-size: 16px;
}
.partners-menu a.menu-toggle:hover {
  background-color: inherit;
}
.partners-menu a {
  display: flex;
  color: #fff;
  vertical-align: middle;
  min-height: 45px;
  border-left: 4px solid #f3836b;
  padding: 9px 8px 9px 15px;
  /*
   &[data-alias="welcome"] {
     background-color: $orange;
     border-radius: 30px;
     margin: 10px 0px;
     &.selected {
       background-color: $orange;
     }
     &:hover {
       background-color: $orange;
     }
     .menu-label {
       margin-top: 6px;
     }
   }
   */
  /*
  &[data-alias="welcome"] {
    background-color: $secondary-color;
    border-radius: 30px;
    margin: 10px 0px;
    &.selected {
      background-color: $secondary-color;
    }
    &:hover {
      background-color: $secondary-color;
    }
    .menu-label {
      margin-top: 6px;
    }
  }
   */
}
.partners-menu a.selected {
  border-left: 4px solid #f3836b;
  background-color: #e16e57;
  color: #fff;
}
.partners-menu a:hover {
  background-color: #e16e57;
  border-left-color: #e16e57;
  color: #fff;
}
.partners-menu a.selected:hover {
  border-left-color: #f3836b;
}
.partners-menu a .menu-icon {
  display: block;
  float: left;
  width: 26px;
}
.partners-menu a .menu-label {
  display: block;
  float: left;
  margin-top: 5px;
  margin-left: 15px;
  width: 132px;
}
.partners-menu .sep {
  background-color: #e16e57;
  height: 1px;
  width: 85%;
  margin: 5px auto;
}
.partners-menu .menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.partners-menu .menu-header .menu-toggle {
  margin-left: 5px;
}
.partners-menu .menu-header .btn-create {
  margin: 10px 10px;
  cursor: pointer;
}
.partners-menu .menu-header .btn-create .menu-icon i {
  font-weight: bold;
  color: #fff;
}
.partners-menu .menu-header .sep {
  margin: 0px;
  width: 100%;
}
.partners-menu .menu-header-mobile {
  display: none;
  padding-top: 5px;
}
.partners-menu .menu-header-mobile a {
  font-style: italic;
}
.partners-menu .menu-header-mobile a i {
  margin-right: 5px;
}

.sub-menu {
  width: 210px;
  background-color: #fff;
  overflow: auto;
  padding: 20px 20px 20px 20px;
  border-right: 1px solid #C3C3C3;
  z-index: 10;
  position: fixed;
  bottom: 0px;
  top: 60px;
  left: 210px;
  display: none;
}
.sub-menu .btn-create {
  border-radius: 17px;
  width: 35px;
  text-align: center;
  padding: 7px;
}
.sub-menu .btn-close {
  color: #aab3be;
  padding: 0;
  outline: none;
}
.sub-menu .item {
  display: block;
  padding: 10px 0px;
  color: #757b83;
}

.main-container {
  margin-top: 60px;
  transition: margin-left 0.5s ease;
}

.sub-menu-h {
  transition: left 0.5s ease;
  z-index: 8;
}

.sub-menu2-h {
  z-index: 8;
}

.page-container {
  transition: margin-right 0.5s ease;
}

.footer {
  transition: margin-right 0.5s ease;
}

.page-container.submenu-h {
  margin-top: 100px;
}
.page-container.submenu-h .alerts-panel-container {
  top: 101px;
}
.page-container.submenu-h .content-container {
  min-height: calc(100vh - 60px - 40px - 80px);
}

.page-container.submenu2-h {
  margin-top: 140px;
}
.page-container.submenu2-h .content-container {
  min-height: calc(100vh - 60px - 40px - 40px - 80px);
}
.page-container.submenu2-h .sub-menu2-h {
  top: 100px;
}
.page-container.submenu2-h .alerts-panel-container {
  top: 141px;
}

.page-container.ribbon {
  margin-top: 135px;
}
.page-container.ribbon .content-container {
  min-height: calc(100vh - 60px - 75px - 80px);
}
.page-container.ribbon .alerts-panel-container {
  top: 136px;
}

.page-container.ribbon.ribbon-sm {
  margin-top: 125px;
}
.page-container.ribbon.ribbon-sm .content-container {
  min-height: calc(100vh - 60px - 65px - 80px);
}
.page-container.ribbon.ribbon-sm .alerts-panel-container {
  top: 126px;
}

.page-container.submenu-h.ribbon {
  margin-top: 175px;
}
.page-container.submenu-h.ribbon .content-container {
  min-height: calc(100vh - 60px - 40px - 75px - 80px);
}
.page-container.submenu-h.ribbon .alerts-panel-container {
  top: 176px;
}
.page-container.submenu-h.ribbon.ribbon-sm {
  margin-top: 165px;
}
.page-container.submenu-h.ribbon.ribbon-sm .content-container {
  min-height: calc(100vh - 60px - 40px - 65px - 80px);
}
.page-container.submenu-h.ribbon.ribbon-sm .sub-menu-h {
  top: 60px;
}
.page-container.submenu-h.ribbon.ribbon-sm .static-header {
  top: 100px;
}
.page-container.submenu-h.ribbon.ribbon-sm .alerts-panel-container {
  top: 166px;
}
.page-container.submenu-h.ribbon .sub-menu-h {
  top: 135px;
}
.page-container.submenu-h.ribbon .employee-ribbon {
  box-shadow: none;
}

.page-container.submenu2-h.ribbon {
  margin-top: 215px;
}
.page-container.submenu2-h.ribbon .content-container {
  min-height: calc(100vh - 60px - 40px - 40px - 75px - 80px);
}
.page-container.submenu2-h.ribbon .alerts-panel-container {
  top: 216px;
}
.page-container.submenu2-h.ribbon.ribbon-sm {
  margin-top: 205px;
}
.page-container.submenu2-h.ribbon.ribbon-sm .content-container {
  min-height: calc(100vh - 60px - 40px - 40px - 65px - 80px);
}
.page-container.submenu2-h.ribbon.ribbon-sm .sub-menu-h {
  top: 60px;
}
.page-container.submenu2-h.ribbon.ribbon-sm .sub-menu2-h {
  top: 100px;
}
.page-container.submenu2-h.ribbon.ribbon-sm .static-header {
  top: 140px;
}
.page-container.submenu2-h.ribbon.ribbon-sm .alerts-panel-container {
  top: 206px;
}
.page-container.submenu2-h.ribbon .sub-menu-h {
  top: 135px;
}
.page-container.submenu2-h.ribbon .sub-menu2-h {
  top: 175px;
}
.page-container.submenu2-h.ribbon .employee-ribbon {
  box-shadow: none;
}

.page-container.alerts {
  margin-right: 275px;
}
.page-container.alerts .alerts-panel-container {
  right: 0px;
}

.page-container.menu .main-container {
  width: calc(100% - 210px);
  margin-left: 210px;
}
.page-container.menu:not(.submenu-h):not(.ribbon) .content-container {
  min-height: calc(100vh - 60px - 80px);
}
.page-container.menu .employee-ribbon, .page-container.menu .static-header {
  left: 210px;
  border-bottom: 1px solid #f5f5f5;
}
@media (min-width: 992px) {
  .page-container.menu .sub-menu-h {
    left: 210px;
  }
}

.page-container.collapsed .main-menu {
  width: 65px;
}
.page-container.collapsed .main-menu a .menu-label {
  display: none;
}
.page-container.collapsed .main-menu a[data-alias=welcome] {
  border-radius: 0px;
}
.page-container.collapsed .main-menu .menu-header {
  flex-wrap: wrap;
}
.page-container.collapsed .main-menu .menu-header .btn-create {
  margin: 0px 18px;
}
.page-container.collapsed .main-menu .menu-scroll {
  top: 143px;
  width: 65px;
}
.page-container.collapsed .employee-ribbon, .page-container.collapsed .static-header {
  left: 65px;
}
.page-container.collapsed .sub-menu {
  left: 65px;
}
@media (min-width: 992px) {
  .page-container.collapsed .sub-menu-h {
    left: 65px;
  }
}
.page-container.collapsed .main-container {
  width: calc(100% - 65px);
  margin-top: 60px;
  margin-right: 60px;
  margin-left: 65px;
}

@media (max-width: 991px) {
  .page-container.menu .main-container {
    width: 100%;
    margin-left: 0px;
  }
  .page-container.menu .employee-ribbon, .page-container.menu .static-header {
    left: 0px;
  }
}
.content-container {
  padding: 15px;
}
.content-container .appogee-page-header2 {
  margin-bottom: 10px;
}
.content-container .appogee-page-header2 .title-label {
  font-size: 0.8em;
  color: grey;
}
.content-container .appogee-page-header2 h1 {
  color: grey;
  margin-top: 0px;
  font-size: 18px;
  font-weight: normal;
}
.content-container .appogee-page-header2 h2 {
  font-size: 14px;
  margin: 0px 0px 6px 0px;
}
.content-container .appogee-page-content {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  min-height: 300px;
  margin-bottom: 20px;
  overflow: auto;
  border: 1px solid #f4f4f4;
}
.content-container .appogee-page-content.appogee-tabs {
  background-color: inherit;
  box-shadow: none;
  padding: 0px;
  overflow: inherit;
}

.page-app .header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 60px;
}
.page-app .header > div {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
}
.page-app .header .toolbar {
  display: flex;
  align-items: center;
}
.page-app .header .toolbar .trial-expiry-notice {
  color: #f3836b;
  border: 1px solid #f3836b;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  padding: 5px 10px;
  text-align: center;
  margin-top: -14px;
}
.page-app .main-menu {
  width: 210px;
  position: fixed;
  bottom: 0px;
  top: 59px;
  overflow-x: hidden;
  overflow-y: hidden;
}
.page-app .main-menu .menu-scroll {
  width: 210px;
  overflow-y: auto;
  padding-bottom: 50px;
  position: fixed;
  bottom: 0px;
  top: 112px;
}

.page-app.banner .header {
  top: 50px;
}
.page-app.banner .employee-ribbon, .page-app.banner .static-header {
  top: 110px;
}
.page-app.banner .main-menu {
  top: 109px;
}
.page-app.banner .main-menu .menu-scroll {
  top: 162px;
}
.page-app.banner .page-container.collapsed .main-menu {
  top: 109px;
}
.page-app.banner .page-container.collapsed .main-menu .menu-scroll {
  top: 193px;
}
.page-app.banner .alerts-panel-container {
  top: 110px;
}
.page-app.banner .sub-menu {
  top: 110px;
}
.page-app.banner .sub-menu-h {
  top: 110px;
}
.page-app.banner .sub-menu2-h {
  top: 150px;
}
.page-app.banner .sub-menu-h-x {
  top: 185px;
}
.page-app.banner .page-container {
  margin-top: 110px;
}
.page-app.banner .page-container .content-container {
  min-height: calc(100vh - 50px - 60px - 80px);
}
.page-app.banner .page-container.submenu-h {
  margin-top: 150px;
}
.page-app.banner .page-container.submenu-h .alerts-panel-container {
  top: 150px;
}
.page-app.banner .page-container.submenu-h .content-container {
  min-height: calc(100vh - 50px - 60px - 40px - 80px);
}
.page-app.banner .page-container.submenu2-h {
  margin-top: 190px;
}
.page-app.banner .page-container.submenu2-h .content-container {
  min-height: calc(100vh - 50px - 60px - 40px - 40px - 80px);
}
.page-app.banner .page-container.submenu2-h .alerts-panel-container {
  top: 190px;
}
.page-app.banner .page-container.ribbon {
  margin-top: 185px;
}
.page-app.banner .page-container.ribbon .content-container {
  min-height: calc(100vh - 50px - 60px - 75px - 80px);
}
.page-app.banner .page-container.ribbon .alerts-panel-container {
  top: 186px;
}
.page-app.banner .page-container.submenu-h.ribbon {
  margin-top: 225px;
}
.page-app.banner .page-container.submenu-h.ribbon .content-container {
  min-height: calc(100vh - 50px - 60px - 40px - 75px - 80px);
}
.page-app.banner .page-container.submenu-h.ribbon .sub-menu-h {
  top: 186px;
}
.page-app.banner .page-container.submenu-h.ribbon .alerts-panel-container {
  top: 226px;
}
.page-app.banner .page-container.submenu2-h.ribbon {
  margin-top: 265px;
}
.page-app.banner .page-container.submenu2-h.ribbon .content-container {
  min-height: calc(100vh - 50px - 60px - 40px - 40px - 75px - 80px);
}
.page-app.banner .page-container.submenu2-h.ribbon .sub-menu-h {
  top: 185px;
}
.page-app.banner .page-container.submenu2-h.ribbon .sub-menu2-h {
  top: 225px;
}
.page-app.banner .page-container.submenu2-h.ribbon .alerts-panel-container {
  top: 266px;
}
.page-app.banner .page-container.submenu-h.ribbon.ribbon-sm {
  margin-top: 215px;
  a: 50px;
}
.page-app.banner .page-container.submenu-h.ribbon.ribbon-sm .content-container {
  min-height: calc(100vh - 50px - 60px - 40px - 65px - 80px);
}
.page-app.banner .page-container.submenu-h.ribbon.ribbon-sm .sub-menu-h {
  top: 176px;
}
.page-app.banner .page-container.submenu-h.ribbon.ribbon-sm .alerts-panel-container {
  top: 257px;
}
.page-app.banner .page-container.submenu2-h.ribbon.ribbon-sm {
  margin-top: 255px;
  a: 50px;
}
.page-app.banner .page-container.submenu2-h.ribbon.ribbon-sm .content-container {
  min-height: calc(100vh - 50px - 60px - 40px - 40px - 65px - 80px);
}
.page-app.banner .page-container.submenu2-h.ribbon.ribbon-sm .sub-menu-h {
  top: 110px;
}
.page-app.banner .page-container.submenu2-h.ribbon.ribbon-sm .sub-menu2-h {
  top: 151px;
}
.page-app.banner .page-container.submenu2-h.ribbon.ribbon-sm .static-header {
  top: 191px;
}

.page-app.banner-sm .header {
  top: 32px;
}
.page-app.banner-sm .employee-ribbon, .page-app.banner-sm .static-header {
  top: 92px;
}
.page-app.banner-sm .main-menu {
  top: 91px;
}
.page-app.banner-sm .main-menu .menu-scroll {
  top: 144px;
}
.page-app.banner-sm .page-container.collapsed .menu-scroll {
  top: 175px;
}
.page-app.banner-sm .alerts-panel-container {
  top: 91px;
}
.page-app.banner-sm .sub-menu {
  top: 92px;
}
.page-app.banner-sm .sub-menu-h {
  top: 92px;
}
.page-app.banner-sm .sub-menu-h-x {
  top: 167px;
}
.page-app.banner-sm .page-container {
  margin-top: 92px;
}
.page-app.banner-sm .page-container .content-container {
  min-height: calc(100vh - 32px - 60px - 80px);
}
.page-app.banner-sm .page-container.submenu-h {
  margin-top: 132px;
}
.page-app.banner-sm .page-container.submenu-h .content-container {
  min-height: calc(100vh - 32px - 60px - 40px - 80px);
}
.page-app.banner-sm .page-container.ribbon {
  margin-top: 167px;
}
.page-app.banner-sm .page-container.ribbon .content-container {
  min-height: calc(100vh - 32px - 60px - 75px - 80px);
}
.page-app.banner-sm .page-container.submenu-h.ribbon {
  margin-top: 207px;
}
.page-app.banner-sm .page-container.submenu-h.ribbon .employee-ribbon, .page-app.banner-sm .page-container.submenu-h.ribbon .static-header {
  top: 132px;
}
.page-app.banner-sm .page-container.submenu-h.ribbon .content-container {
  min-height: calc(100vh - 32px - 60px - 40px - 75px - 80px);
}
.page-app.banner-sm .page-container.submenu-h.ribbon-sm {
  margin-top: 10px;
}
.page-app.banner-sm .page-container.submenu-h.ribbon-sm .content-container {
  height: calc(100vh - 10px);
}

.page-app.banner-xl .header {
  top: 68px;
}
.page-app.banner-xl .employee-ribbon, .page-app.banner-xl .static-header {
  top: 128px;
}
.page-app.banner-xl .main-menu {
  top: 127px;
}
.page-app.banner-xl .main-menu .menu-scroll {
  top: 180px;
}
.page-app.banner-xl .page-container.collapsed .menu-scroll {
  top: 211px;
}
.page-app.banner-xl .alerts-panel-container {
  top: 127px;
}
.page-app.banner-xl .sub-menu {
  top: 128px;
}
.page-app.banner-xl .sub-menu-h {
  top: 128px;
}
.page-app.banner-xl .sub-menu-h-x {
  top: 203px;
}
.page-app.banner-xl .page-container {
  margin-top: 128px;
}
.page-app.banner-xl .page-container .content-container {
  min-height: calc(100vh - 68px - 60px - 80px);
}
.page-app.banner-xl .page-container.submenu-h {
  margin-top: 168px;
}
.page-app.banner-xl .page-container.submenu-h .content-container {
  min-height: calc(100vh - 68px - 60px - 40px - 80px);
}
.page-app.banner-xl .page-container.ribbon {
  margin-top: 203px;
}
.page-app.banner-xl .page-container.ribbon .content-container {
  min-height: calc(100vh - 68px - 60px - 75px - 80px);
}
.page-app.banner-xl .page-container.submenu-h.ribbon {
  margin-top: 243px;
}
.page-app.banner-xl .page-container.submenu-h.ribbon .employee-ribbon, .page-app.banner-xl .page-container.submenu-h.ribbon .static-header {
  top: 168px;
}
.page-app.banner-xl .page-container.submenu-h.ribbon .content-container {
  min-height: calc(100vh - 68px - 60px - 40px - 75px - 80px);
}
.page-app.banner-xl .page-container.submenu-h.ribbon-sm {
  margin-top: 10px;
}
.page-app.banner-xl .page-container.submenu-h.ribbon-sm .content-container {
  height: calc(100vh - 10px);
}

.page-simple .header {
  height: 50px;
}
.page-simple .header .appogee-logo {
  height: 50px;
}
.page-simple .header .toolbar {
  margin-top: 15px;
}
.page-simple .header .toolbar span, .page-simple .header .toolbar a {
  display: inline-block;
  color: #636363;
  vertical-align: middle;
  margin-right: 20px;
}
.page-simple .header .toolbar .locale_flags {
  display: inline-block;
}
.page-simple .header .toolbar .locale_flags a {
  margin-right: 0;
  margin-left: 5px;
}

.static-header {
  position: fixed;
  top: 60px;
  right: 0;
  height: 65px;
  background-color: #fff;
  padding: 10px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
}

.appogee-tabs .tab-header-container {
  display: flex;
  align-items: center;
  background-color: #f4f4f4;
}
.appogee-tabs .tab-panel .tab-header-container {
  background-color: #ffffff;
}
.appogee-tabs .tab-header {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: nowrap;
  z-index: 1;
  padding: 4px;
  border-radius: 5px;
  background-color: #f4f4f4;
}
.appogee-tabs .tab-header .dropdown {
  z-index: 8;
}
.appogee-tabs .tab-header a {
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 20px;
  transition: background-color 250ms linear;
  transition: color 250ms linear;
  white-space: nowrap;
  margin-right: 2px;
  visibility: hidden;
}
.appogee-tabs .tab-header a:hover, .appogee-tabs .tab-header a:focus {
  background-color: #1674b4;
  color: #ffffff;
}
.appogee-tabs .tab-header a:last-child {
  margin-right: 0px;
}
.appogee-tabs .tab-header a:hover {
  background-color: #1674b4;
  color: #ffffff;
}
.appogee-tabs .tab-header a.selected {
  font-weight: bold;
  color: #636363;
  background-color: #ffffff;
}
.appogee-tabs .tab-header a.right {
  float: right;
  margin-left: 3px;
}
.appogee-tabs .tab-header a.hidden {
  display: none;
}
.appogee-tabs .tab-header .dropdown {
  display: inline-block;
  border-radius: 20px;
}
.appogee-tabs .tab-header .dropdown.selected {
  background-color: #ffffff;
}
.appogee-tabs .tab-header .dropdown > button {
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 20px;
  transition: background-color 250ms linear;
  transition: color 250ms linear;
  white-space: nowrap;
  color: #1674b4;
  border-radius: 20px;
  background-color: inherit;
  min-width: unset;
  height: inherit;
  line-height: inherit;
  margin-left: 2px;
  border: none;
}
.appogee-tabs .tab-header .dropdown > button:hover, .appogee-tabs .tab-header .dropdown > button:focus {
  background-color: #1674b4;
  color: #ffffff;
}
.appogee-tabs .tab-header .dropdown .dropdown-menu {
  padding: 5px;
  border-radius: 20px;
  border: 1px solid #f4f4f4;
  z-index: 5;
}
.appogee-tabs .tab-header .dropdown .dropdown-menu > a {
  display: block;
  text-align: left;
  width: 100%;
}
.appogee-tabs .tab-header .dropdown.hidden {
  display: none;
}
.appogee-tabs .tab-header .dropdown.open {
  background-color: #1674b4;
  color: #ffffff;
}
.appogee-tabs .tab-header .dropdown > a.selected {
  background-color: #ffffff;
}
.appogee-tabs .tab-panel {
  display: none;
  padding: 20px 20px;
  background: #fff;
  border-radius: 20px;
}
.appogee-tabs .tab-panel .subtab-header, .appogee-tabs .tab-panel .subtab-header-x {
  margin-top: -10px;
  z-index: 3;
}
.appogee-tabs .tab-panel .tab-panel {
  padding: 0px;
}
.appogee-tabs .tab-panel.selected {
  display: block;
}
.appogee-tabs .subtab-header, .appogee-tabs .subtab-header-x {
  margin-bottom: 20px;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: nowrap;
  z-index: 1;
  padding: 4px;
  border-radius: 5px;
}
.appogee-tabs .subtab-header a, .appogee-tabs .subtab-header-x a {
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 20px;
  transition: background-color 250ms linear;
  transition: color 250ms linear;
  white-space: nowrap;
  margin-right: 2px;
  visibility: hidden;
}
.appogee-tabs .subtab-header a:hover, .appogee-tabs .subtab-header a:focus, .appogee-tabs .subtab-header-x a:hover, .appogee-tabs .subtab-header-x a:focus {
  background-color: #1674b4;
  color: #ffffff;
}
.appogee-tabs .subtab-header a:last-child, .appogee-tabs .subtab-header-x a:last-child {
  margin-right: 0px;
}
.appogee-tabs .subtab-header a:hover, .appogee-tabs .subtab-header-x a:hover {
  background-color: #1674b4;
  color: #ffffff;
}
.appogee-tabs .subtab-header .dropdown-menu a, .appogee-tabs .subtab-header-x .dropdown-menu a {
  text-align: left;
}
.appogee-tabs .subtab-header span, .appogee-tabs .subtab-header-x span {
  display: inline-block;
}
.appogee-tabs .subtab-header a.selected, .appogee-tabs .subtab-header span.selected, .appogee-tabs .subtab-header-x a.selected, .appogee-tabs .subtab-header-x span.selected {
  font-weight: bold;
  background-color: #f4f4f4;
  color: #636363;
}
.appogee-tabs .subtab-header .with-btn .btn, .appogee-tabs .subtab-header-x .with-btn .btn {
  margin-left: 5px;
  border: 0px;
}
.appogee-tabs .subtab-header .dropdown, .appogee-tabs .subtab-header-x .dropdown {
  display: inline-block;
  border-radius: 20px;
}
.appogee-tabs .subtab-header .dropdown > button, .appogee-tabs .subtab-header-x .dropdown > button {
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 20px;
  transition: background-color 250ms linear;
  transition: color 250ms linear;
  white-space: nowrap;
  color: #1674b4;
  border-radius: 20px;
  background-color: inherit;
  min-width: unset;
  height: inherit;
  line-height: inherit;
  margin-left: 2px;
  border: none;
}
.appogee-tabs .subtab-header .dropdown > button:hover, .appogee-tabs .subtab-header .dropdown > button:focus, .appogee-tabs .subtab-header-x .dropdown > button:hover, .appogee-tabs .subtab-header-x .dropdown > button:focus {
  background-color: #1674b4;
  color: #ffffff;
}
.appogee-tabs .subtab-header .dropdown .dropdown-menu, .appogee-tabs .subtab-header-x .dropdown .dropdown-menu {
  padding: 5px;
  border-radius: 20px;
  border: 1px solid #f4f4f4;
  z-index: 5;
}
.appogee-tabs .subtab-header .dropdown .dropdown-menu > a, .appogee-tabs .subtab-header-x .dropdown .dropdown-menu > a {
  display: block;
  text-align: left;
  width: 100%;
}
.appogee-tabs .subtab-header .dropdown.hidden, .appogee-tabs .subtab-header-x .dropdown.hidden {
  display: none;
}
.appogee-tabs .subtab-header .dropdown.open, .appogee-tabs .subtab-header-x .dropdown.open {
  background-color: #1674b4;
  color: #ffffff;
}
.appogee-tabs .subtab-header .dropdown.selected, .appogee-tabs .subtab-header-x .dropdown.selected {
  background-color: #f4f4f4;
}
.appogee-tabs .subtab-header .dropdown > a.selected, .appogee-tabs .subtab-header-x .dropdown > a.selected {
  background-color: #f4f4f4;
}
.appogee-tabs .subtab-header-x {
  display: block;
}
.appogee-tabs .subtab-header-x a {
  visibility: visible;
}

.alerts-panel-container {
  border-left: 1px solid #C3C3C3;
  z-index: 5;
  background-color: #fff;
  width: 275px;
  position: fixed;
  bottom: 0px;
  right: -275px;
  top: 60px;
  transition: right 0.5s ease;
}
.alerts-panel-container header, .alerts-panel-container footer {
  position: absolute;
  right: 0px;
  background-color: #fff;
  width: 274px;
}
.alerts-panel-container header {
  height: 25px;
  text-align: right;
  border-bottom: 1px solid #c7d3e1;
  padding: 3px 6px 0px;
  background-color: #fff;
}
.alerts-panel-container header a {
  color: #636363;
}
.alerts-panel-container header a :hover {
  color: #333;
}
.alerts-panel-container .subtab-header {
  display: flex;
  justify-content: space-around;
}
.alerts-panel-container .subtab-header a {
  color: #1674b4;
}
.alerts-panel-container .subtab-header a:hover {
  border-bottom: 1px solid #7f8c8d;
}
.alerts-panel-container .subtab-header a.selected {
  border-bottom: 1px solid #50ACE9;
}
.alerts-panel-container section {
  overflow-y: auto;
  position: absolute;
  top: 25px;
  bottom: 55px;
  width: 275px;
}
.alerts-panel-container section .btn-thumbs-up, .alerts-panel-container section .btn-thumbs-down {
  margin-right: 4px;
}
.alerts-panel-container section .btn-thumbs-up:hover, .alerts-panel-container section .btn-thumbs-up:active, .alerts-panel-container section .btn-thumbs-up:focus, .alerts-panel-container section .btn-thumbs-down:hover, .alerts-panel-container section .btn-thumbs-down:active, .alerts-panel-container section .btn-thumbs-down:focus {
  outline: none;
  background-color: #fff;
  box-shadow: none;
}
.alerts-panel-container section .btn-thumbs-down {
  margin-right: 15px;
}
.alerts-panel-container section .btn-thumbs-up.selected {
  background-color: #16b68b;
  color: #ffffff;
}
.alerts-panel-container section .btn-thumbs-down.selected {
  background-color: #b62116;
  color: #ffffff;
}
.alerts-panel-container footer {
  height: 55px;
  bottom: 0px;
}
.alerts-panel-container footer > div {
  border-top: 1px solid #ecf2f4;
  padding: 5px 10px;
}
.alerts-panel-container footer .footer-actions {
  display: none;
  font-style: italic;
  text-align: center;
}
.alerts-panel-container footer .social {
  border-top-style: dashed;
}
.alerts-panel-container footer .social a {
  margin-left: 5px;
}
.alerts-panel-container footer .social img {
  width: 24px;
  border-radius: 5px;
}
.alerts-panel-container footer.actions {
  height: 85px;
}
.alerts-panel-container footer.actions .footer-actions {
  display: flex;
  justify-content: space-around;
}
.alerts-panel-container .no-results {
  text-align: center;
  color: #636363;
  font-size: 16px;
  margin-top: 50px;
}
.alerts-panel-container .no-results .working {
  background-position: center;
  margin-bottom: 10px;
}

.dlg-announcement .announcement-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dlg-announcement header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dlg-announcement .btn-thumbs-up, .dlg-announcement .btn-thumbs-down {
  margin-right: 4px;
}
.dlg-announcement .btn-thumbs-up:hover, .dlg-announcement .btn-thumbs-up:active, .dlg-announcement .btn-thumbs-up:focus, .dlg-announcement .btn-thumbs-down:hover, .dlg-announcement .btn-thumbs-down:active, .dlg-announcement .btn-thumbs-down:focus {
  outline: none;
  background-color: #fff;
  box-shadow: none;
}
.dlg-announcement .btn-thumbs-down {
  margin-right: 15px;
}
.dlg-announcement .btn-thumbs-up.selected {
  background-color: #16b68b;
  color: #ffffff;
}
.dlg-announcement .btn-thumbs-down.selected {
  background-color: #b62116;
  color: #ffffff;
}
.dlg-announcement .announcement-title {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 5px;
}

.assistant-buttons {
  position: relative;
  right: 30px;
  top: 400px;
  transform-origin: 0 0;
  transform: rotate(270deg);
}
.assistant-buttons button {
  width: 130px;
  text-align: center;
  position: static;
  border-radius: 10px 10px 0 0;
}

.main-menu-container {
  /**
  NOTE: THIS IS NOT THE MAIN VERTICAL MENU IN THE APP
  THIS IS THE MAIN MENU HORIZONTAL MENU ON THE "base_simple" PAGES (ie LOGIN etc)
   */
  height: 40px;
  background: #1674b4;
}
.main-menu-container > .container {
  position: relative;
}
.main-menu-container .main-menu {
  float: left;
}
.main-menu-container .main-menu a {
  color: #ffffff;
  display: inline-block;
  padding: 12px;
  font-size: 0.9em;
  height: 40px;
  letter-spacing: 1px;
  font-weight: 200;
}
.main-menu-container .main-menu a:hover {
  color: #DDD;
}
.main-menu-container .main-menu a.selected {
  border-bottom: 4px solid #f3836b;
}
.main-menu-container .main-menu a.role {
  text-transform: uppercase;
  position: relative;
  text-align: center;
}
.main-menu-container .main-menu a.role i {
  position: absolute;
  top: 32px;
  margin-left: -6px;
}
.main-menu-container .main-menu a.role-switcher {
  padding: 3px 10px 4px 15px;
  height: auto;
  border-radius: 5px;
  margin: 7px 10px 0px 0px;
  background-color: #f3836b;
  color: white;
}
.main-menu-container .main-menu a.role-switcher i {
  margin-left: 5px;
}
.main-menu-container .main-menu span.sep {
  color: white;
  margin-right: 12px;
  border-left: 1px solid white;
}
.main-menu-container .customer-logoX {
  float: right;
  height: 60px;
  background: linear-gradient(#eee, #fff);
  border-top: 1px solid #f1f1f1;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 0px 10px;
}
.main-menu-container .customer-logoX img {
  max-height: 100%;
  padding: 10px;
}
.main-menu-container .customer-logo {
  height: 50px;
  border: 1px solid #f1f1f1;
  box-shadow: 0px 3px 5px #ddd;
  padding: 0px 10px;
  margin-top: -5px;
  background: #fff;
  position: absolute;
  right: 15px;
}
.main-menu-container .customer-logo img {
  max-height: 100%;
  max-width: 100%;
  padding: 5px;
}

@media (max-width: 991px) {
  .page-app .main-menu {
    display: none;
    width: 100%;
    z-index: 1000;
  }
  .page-app .main-menu .menu-header {
    display: none;
  }
  .page-app .main-menu .menu-header-mobile {
    display: flex;
  }
  .page-app .main-menu .menu-scroll {
    width: 100%;
  }
}
.mobile-app .mobile-menu-admin-note {
  font-style: italic;
  color: #f4f4f4;
  text-align: center;
  max-width: 300px;
  margin: auto;
  border: solid #f4f4f4;
  border-width: 1px 0;
  padding: 5px 0;
}
.mobile-app .menu-icon {
  font-size: large;
}
.mobile-app .menu-label {
  font-size: large;
  margin-top: 2px !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .customer-logo {
    max-width: 235px;
  }
  .customer-logo img {
    max-width: 100%;
  }
}
.sub-menu-h {
  position: fixed;
  top: 60px;
  height: 40px;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid #f4f4f4;
}
.sub-menu-h a {
  padding: 10px 0px;
  display: inline-block;
  color: #878787;
  margin-left: 20px;
  margin-right: 20px;
}
.sub-menu-h a:hover {
  color: #636363;
}
.sub-menu-h a.selected {
  border-bottom: 2px solid #636363;
  color: #636363;
  padding-left: 20px;
  padding-right: 20px;
}
.sub-menu-h .sep {
  border-left: 1px solid #ccc;
}
.sub-menu-h .chevron {
  display: inline-block;
  margin-right: 15px;
  color: #878787;
}
.sub-menu-h .ddl-menu {
  width: auto;
  display: inline;
  margin-right: 15px;
}
.sub-menu-h .btn-submenu-btn {
  margin: 4px 0;
}
.sub-menu-h .btn-submenu-btn:last-child {
  margin-right: 20px;
}

.sub-menu2-h a.selected {
  border: 0px;
  border-radius: 30px;
  padding: 2px 10px;
  color: #fff;
  margin-top: 9px;
  background: #1674b4;
  font-size: 0.9em;
}
.sub-menu2-h a.selected:hover {
  background: #125d8f;
}
.sub-menu2-h .form-inline {
  display: inline;
  margin-right: 15px;
}
.sub-menu2-h .form-inline .input-group-addon {
  padding: 0;
}
.sub-menu2-h .form-inline .input-group-addon a {
  padding: 6px 8px;
  margin: 0;
  font-size: 12px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .sub-menu-h {
    overflow-x: auto;
    white-space: nowrap;
  }
  .sub-menu-h a {
    padding: 10px 0;
    display: inline-flex;
    margin-left: 7px;
    margin-right: 7px;
  }
  .sub-menu-h a:first-child {
    margin-left: 14px;
  }
  .sub-menu-h a.selected {
    background: #fff;
    color: #1674b4;
    border: 0;
    padding: 0;
  }
  .sub-menu-h .sep {
    margin: 0 5px;
  }
}
.appogee-page-header {
  background-color: #f7f9fa;
  border-bottom: 1px solid #f1f1f1;
  padding: 5px 0px 10px;
  min-height: 55px;
}
.appogee-page-header hgroup {
  float: left;
}
.appogee-page-header h1 {
  color: #1674b4;
  margin: 5px 0px 6px;
}
.appogee-page-header h2 {
  font-size: 14px;
  margin: 0px 0px 6px 0px;
}
.appogee-page-header h2:last-child {
  margin: 0px;
}
.appogee-page-header .actions {
  float: right;
  margin-top: 9px;
}

.appogee-page-header.lg {
  height: 72px;
}
.appogee-page-header.lg .actions {
  margin-top: 22px;
}

.pp-box {
  background-image: url("/img/hr/profile/avatar-placeholder.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.pp-overlay {
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  -webkit-transition: opacity 0.35s ease;
  -moz-transition: opacity 0.35s ease;
  font-size: 1.8em;
}

.pp-box:hover .pp-overlay {
  opacity: 1;
  cursor: pointer;
}

.pp-icon {
  color: white;
  /* change with a local img */
  background: url("/img/hr/profile/1024px-Black_pencil.svg.png") no-repeat center center;
  background-size: 25px 25px;
  -webkit-filter: invert(95%);
  filter: invert(95%);
}

/* shapes */
.circle {
  border-radius: 100%;
}

.employee-ribbon {
  position: fixed;
  top: 60px;
  right: 0;
  height: 75px;
  background-color: #fff;
  padding: 5px 10px;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  transition: left 0.5s ease;
}
.employee-ribbon .employee-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.employee-ribbon .employee-header :first-child {
  min-width: unset;
}
.employee-ribbon .employee-header .sep {
  float: left;
  margin: 0px 20px 0px 0px;
  width: 1px;
  height: 70px;
  background-color: #ccd7e4;
}
.employee-ribbon .employee-header .employee-header-section {
  margin-right: 15px;
  min-width: 200px;
  height: 71px;
  overflow: auto;
}
.employee-ribbon .employee-header .employee-header-section.profile-picture {
  min-width: 65px;
}
.employee-ribbon .employee-header .employee-header-section.profile-picture img {
  width: 65px;
  height: 65px;
  border-radius: 100%;
  vertical-align: unset;
}
.employee-ribbon .employee-header .employee-header-section.profile-picture .avatar {
  margin-right: 0px;
}
.employee-ribbon .employee-header .status-active {
  color: #5ab463;
  font-size: 12px;
}
.employee-ribbon .employee-header .employee-name {
  font-size: 16px;
}
.employee-ribbon .employee-header .employee-info {
  font-size: 14px;
  color: #878787;
  white-space: nowrap;
}
.employee-ribbon .employee-header .employee-more-info {
  margin-left: 5px;
  color: #125d8f;
  text-align: center;
  font-size: 20px;
  border: none;
  outline: none;
  cursor: pointer;
  line-height: 0px;
}
.employee-ribbon .employee-header .employee-more-info i {
  line-height: 0px;
}
.employee-ribbon .employee-header .employee-more-info:hover {
  color: #156da7;
}
.employee-ribbon .employee-header .team {
  background: url(/img/core/team-icon.png) no-repeat 0px center;
  padding-left: 50px;
}
.employee-ribbon .employee-header .team .team-name {
  font-size: 16px;
}
.employee-ribbon .employee-header .team .team-manager {
  font-size: 14px;
  color: #aab3be;
}
.employee-ribbon .employee-header .hr-manager {
  background: url(/img/core/hr-icon.png) no-repeat 0px center;
  padding-left: 50px;
  font-size: 14px;
  color: #aab3be;
  margin-top: 15px;
}

.employee-selector {
  color: #757b83;
}
.employee-selector .team-container {
  font-size: 16px;
  margin-bottom: 5px;
}
.employee-selector .team-container select {
  width: 100%;
}
.employee-selector .adu-team-container {
  display: flex;
  justify-content: space-between;
  max-width: 300px;
}
.employee-selector .adu-team-container > div {
  width: 50%;
}
.employee-selector .search-container {
  display: flex;
}
.employee-selector .search-container .glyphicon-search {
  color: inherit;
  left: 4px;
}
.employee-selector .employee-container .employee {
  display: inline-block;
  margin-right: 20px;
  text-align: center;
  color: #a0aab6;
  font-size: 14px;
}
.employee-selector .employee-container .employee .profile-picture {
  display: block;
}
.employee-selector .employee-container .employee .profile-picture img {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  vertical-align: unset;
}

.employee-selector-ma .avatar {
  margin-right: 0;
}

.employee-ribbon-popup {
  position: absolute;
  background: #fff;
  padding: 10px;
  width: 500px;
  border-radius: 20px;
}
.employee-ribbon-popup .info-group {
  display: flex;
  font-size: 14px;
  margin-bottom: 5px;
}
.employee-ribbon-popup .info-group .info-group-label {
  min-width: 150px;
}
.employee-ribbon-popup .info-group-data {
  color: #878787;
  word-break: break-all;
}

/** generic styles used on dashboard style pages **/
.dash-nav {
  margin-bottom: 20px;
}
.dash-nav a {
  color: #636363;
  margin-right: 20px;
}
.dash-nav a.selected {
  border-bottom: 3px solid #337ab7;
  padding-bottom: 3px;
}

.dash-panel {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  overflow: auto;
  margin-bottom: 20px;
}

.dash-actions {
  background-color: #fff;
  text-align: center;
  border-bottom: 1px solid #f1f1f1;
}
.dash-actions a {
  border-right: 1px solid #f1f1f1;
  display: inline-block;
  padding: 10px 30px;
  color: #636363;
}
.dash-actions a span {
  display: block;
}
.dash-actions a:first-child {
  border-left: 1px solid #f1f1f1;
}
.dash-actions a:hover {
  background-color: #f9f9f9;
  color: rgba(0, 0, 0, 0.8);
}

/* wrote for v11 but didn't make it in
.appogee-breadcrumb {
  font-style: italic;
  background: #ddd;
  padding: 10px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  box-shadow: 1px 1px 1px #aaa;
}
*/
/*
.appogee-breadcrumb {
  background: $background-grey;
  border-bottom: 1px solid $layout-border-color;
  padding: 5px 0px;
}
*/
.appogee-breadcrumb {
  background: #f7f9fa;
  padding-top: 5px;
  font-style: italic;
  font-size: 0.9em;
}

.appogee-page-header.with-breadcrumb {
  padding-top: 0px;
  min-height: 45px;
}
.appogee-page-header.with-breadcrumb .actions {
  margin-top: 4px;
}

.appogee-page-header.lg.with-breadcrumb {
  height: 62px;
}

/** this file contains all colours to be used accross the app in order to keep things consistent
    Hex codes for colours should not be used. instead - use the colours defined in this file.
**/
.text-grey {
  color: #636363;
}

.text-light-grey {
  color: #878787;
}

.text-blue {
  color: #125d8f;
}

.text-orange {
  color: #dca91b;
}

.text-red {
  color: #b62116;
}

.text-green {
  color: #16b68b;
}

.text-package-hr-success {
  color: #299AE5;
}

.text-package-hr-essentials {
  color: #299AE5;
}

.text-package-leave {
  color: #125d8f;
}

.text-package-time {
  color: #f3836b;
}

.footer {
  height: 80px;
  overflow: hidden;
  text-align: center;
}
.footer .logo a {
  display: inline-block;
  transition: all 0.3s ease-in-out;
  font-size: 22px;
  opacity: 0.35;
  color: #1674b4;
}
.footer .logo a span {
  color: #f3836b;
}
.footer .logo a:hover {
  transform: scale(1.1);
  opacity: 1;
}
.footer .copyright {
  margin-top: 10px;
  color: #C3C3C3;
}

.mobile-app .footer {
  margin-top: 100px;
}

@media (max-width: 991px) {
  footer.footer {
    background-color: transparent;
    height: auto;
  }
}
.account-popup {
  border: 1px solid #f1f1f1;
  border-radius: 3px;
  background: #f5f5f5;
  width: 420px;
}
.account-popup .content {
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  padding: 10px;
}
.account-popup .content .image {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  float: left;
}
.account-popup .content .image img {
  width: auto;
  height: 100%;
}
.account-popup .content .account-details {
  float: left;
  padding: 30px 10px 0px 10px;
}
.account-popup .content .account-details .account-name {
  font-size: 1.2em;
}
.account-popup .content .account-details .account-email {
  font-size: 0.9em;
}
.account-popup .customer {
  background: #fcfcfc;
  border-bottom: 1px solid #f1f1f1;
  padding: 10px;
}
.account-popup .customer:hover {
  background: #f9f9f9;
  cursor: pointer;
}
.account-popup .popup-footer {
  padding: 10px;
}

.alerts-popup {
  background: #fff;
}
.alerts-popup header a {
  width: 200px;
  padding: 10px;
  text-align: center;
  display: inline-block;
  border-bottom: 2px solid #f1f1f1;
  margin-left: -3px;
}
.alerts-popup header a:first-child {
  margin-left: 0px;
}
.alerts-popup header a.selected {
  color: #c62828;
  border-bottom: 2px solid #c62828;
}
.alerts-popup nav {
  border-bottom: 1px solid #f1f1f1;
}
.alerts-popup nav a {
  display: inline-block;
  padding: 5px 12px 0px;
  color: #636363;
  border-right: 1px solid #f1f1f1;
  margin-left: -3px;
}
.alerts-popup nav a:first-child {
  margin-left: 0px;
}
.alerts-popup nav a.selected {
  background-color: #efefef;
}
.alerts-popup ul {
  margin: 0px;
  padding: 5px 0px;
  border-bottom: 1px solid #f1f1f1;
}
.alerts-popup li {
  list-style: none;
  padding: 5px 10px;
  margin: 0px;
  border-bottom: 1px solid #f1f1f1;
}
.alerts-popup li:last-child {
  border: 0px;
}
.alerts-popup footer {
  padding: 10px;
  background: #f5f5f5;
}

.role-switcher-popup {
  background: #fff;
}
.role-switcher-popup a {
  display: block;
  padding: 5px 20px;
  border-top: 1px solid #f1f1f1;
  color: #636363;
}
.role-switcher-popup a.sep {
  border-top-color: #aaa;
  border-top-style: dotted;
}
.role-switcher-popup a:last-child {
  border-bottom: 0px;
}
.role-switcher-popup a:hover {
  color: #000;
}

.support-popup {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 3px;
  width: 350px;
}
.support-popup header {
  padding: 0px 10px 10px;
}
.support-popup .loading {
  background: url("/img/spinners/working_16.gif") no-repeat;
  padding-left: 22px;
  margin: 0px 10px 10px;
}
.support-popup a.static {
  display: block;
  padding: 10px;
  background-color: #f7f9fa;
  border-top: 1px solid #f1f1f1;
}
.support-popup a.static:hover {
  background-color: #f1f1f1;
}
.support-popup .search-results {
  border-bottom: 1px inset #aaa;
}
.support-popup a.search-result {
  display: block;
}

.employees-popup {
  background: #fff;
  width: 300px;
  max-height: 500px;
  overflow: auto;
}
.employees-popup .employees-popup-search-header {
  padding: 10px 10px 5px 10px;
  background: #ddd;
  color: #666;
}
.employees-popup .employees-popup-search-header .clear-search {
  background: none;
  border: none;
  color: #666;
}
.employees-popup a {
  display: block;
  padding: 7px 5px;
  border-top: 1px solid #f1f1f1;
  color: #636363;
  height: 50px;
}
.employees-popup a .img {
  width: 35px;
  height: 35px;
  border-radius: 18px;
  margin-right: 10px;
  display: inline-block;
}
.employees-popup a .initials {
  background: #1674b4;
  color: #fff;
  text-align: center;
  padding-top: 9px;
}
.employees-popup a:hover {
  background-color: #eff4fa;
}

.create-popup {
  width: 250px;
  padding: 5px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.create-popup .element {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid #f4f4f4;
  min-height: 34px;
}
.create-popup .element img {
  width: 24px;
}
.create-popup .element i, .create-popup .element img {
  color: #ABABAB;
  margin-right: 10px;
}
.create-popup .element:last-child {
  border: none;
}

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.popup {
  position: absolute;
  z-index: 400;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  visibility: hidden;
}

.floating-header {
  display: none;
  background: #efefef;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 3;
  border-bottom: 1px solid #ddd;
  top: 0px;
}
.floating-header .notifier {
  top: 3px;
}
.floating-header .btn-sm {
  margin-top: 9px;
}

@media (max-width: 767px) {
  .floating-header {
    top: 50px;
  }
}
i.context-help {
  cursor: pointer;
}

div.context-help {
  background-color: #fff;
  padding: 10px;
  width: 400px;
  border-radius: 3px;
  border: 1px solid #ccc;
  position: absolute;
  display: none;
  z-index: 2500;
  box-shadow: 3px 3px 3px #ccc;
}
div.context-help h4 {
  margin-bottom: 3px;
  margin-top: 0px;
  line-height: 18px;
  font-size: 14px;
}
div.context-help p {
  margin-bottom: 0px;
}

.tab_container {
  border: 1px solid #ddd;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.tab_header {
  border-bottom: 1px solid #ddd;
  background: #eee;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.tab_header a {
  display: inline-block;
  padding: 7px 10px;
  color: #333;
  font-size: 12px;
}

.tab_header a:hover, .tab_header a:focus {
  text-decoration: none;
}

.tab_header a.selected {
  background: #fff;
  border-bottom: 1px solid #fff;
  margin: 0px 0px -1px 0px;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

.tab_header a.selected:first-child {
  border-top-left-radius: 8px;
  border-left: 0px;
}

.tab_header a, .subtab_header a {
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.tab_header a:focus, .subtab_header a:focus {
  outline: none;
}

.tab_header a::-moz-focus-inner, .subtab_header a::-moz-focus-inner {
  border: 0;
}

div.tab_panel {
  display: none;
  padding: 20px 20px;
}

div.tab_panel div.tab_panel {
  padding: 10px 0px;
}

div.tab_panel.selected {
  display: block;
}

.tab_container2 .tab_header {
  border-bottom: 1px solid #ddd;
  background: #eee;
  border-top: 1px solid #ddd;
  border-radius: 0px;
}

.tab_container2 .tab_header a {
  display: inline-block;
  padding: 5px 15px;
  color: #333;
}

.tab_container2 .tab_header a.selected {
  background: #fff;
  padding: 6px 10px;
  border-bottom: 1px solid #fff;
  margin: 5px 0px -1px 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tab_container2 .tab_panel {
  padding: 20px 0px;
}

.tab_panel.subtab_container {
  padding-top: 0px;
}

.subtab_header {
  border-bottom: 1px solid #ddd;
  background: #fff;
  padding-top: 3px;
  margin: 0px -10px;
}

.subtab_header .subtab {
  display: inline-block;
  padding: 5px 15px;
  margin-right: 15px;
}

.subtab_header .subtab .btn {
  margin-left: 5px;
  border: 0px;
}

.subtab_header .subtab:hover, .subtab_header .subtab:focus {
  text-decoration: none;
}

.subtab_header .subtab.selected {
  border-bottom: 3px solid #428bca;
}

.form-horizontal .control-label {
  text-align: left;
}

.form-horizontal .control-label.text-right {
  text-align: right;
}

.subtable .control-label {
  text-align: right;
}

@media (max-width: 991px) {
  .subtab_header .subtab {
    margin-right: 0px;
  }
}
.form-group.mandatory > label:first-child:after {
  content: "*";
  color: red;
  margin-left: 4px;
}

.filter-group.mandatory > label:first-child:after {
  content: "*";
  color: red;
  margin-left: 4px;
}

th.mandatory div:first-child:after {
  content: "*";
  color: red;
  margin-left: 4px;
}

.table tr th .table-label {
  font-weight: bold;
}
.table tr th .table-label.mandatory:first-child:after {
  content: "*";
  color: red;
  margin-left: 4px;
}

.form-group.read {
  margin-bottom: 0px;
}

label {
  font-weight: normal;
}

.form-control.error, select.error {
  border-color: #A94442;
}

label.error {
  color: #A94442;
}

.btn-file {
  position: relative;
  overflow: hidden;
  height: 20px;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 999px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

.btn-file + input[type=text] {
  background-color: #fff;
}

.form-buttons {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 15px;
}

.form-buttons-left {
  text-align: left;
  border-top: 1px solid #ddd;
  padding-top: 15px;
}

.form-buttons-top {
  text-align: right;
  padding-bottom: 15px;
}

/*.icon-user-lookup {
	background-image: url("/img/picons2013/Basic2/16/basic2-105_user.png");
	background-repeat: no-repeat;
	background-position: right 10px center;
}*/
/*.icon-calendar-lookup {
	background-image: url("/img/picons2013/Basic2/16/basic2-259_calendar.png");
	background-repeat: no-repeat;
	background-position: right 5px center;
}*/
.form-control-rounded {
  padding-left: 15px;
  padding-right: 30px;
  width: 300px;
  background-color: #eff4fa;
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 10px center;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
}
.form-control-rounded:active {
  outline: none;
  box-shadow: none;
}
.form-control-rounded:hover {
  outline: none;
  box-shadow: none;
}
.form-control-rounded:focus {
  outline: none;
  box-shadow: none;
}
.form-control-rounded:visited {
  outline: none;
  box-shadow: none;
}
.form-control-rounded.search {
  padding-left: 40px;
}
.form-control-rounded.input-sm {
  line-height: inherit;
}

select.form-control-rounded {
  background-image: url("/img/icon-arrow-down-gray-128.png");
}

/*
width: 300px;
box-shadow: none;
border-radius: 0px;
outline: none;
border-radius: 20px;
border: 0px;
padding-left: 40px;
border-color: #e0e6e8;
*/
.appogee-form .form-group {
  margin-bottom: 30px;
}
.appogee-form label {
  font-size: 1.2em;
}
.appogee-form input, .appogee-form textarea, .appogee-form select {
  color: #636363;
  font-size: 1em;
  padding: 15px;
}
.appogee-form input, .appogee-form select {
  height: 50px;
}

table.table-shaded thead th {
  background-color: #f9f9f9;
}

.table > thead > tr > th {
  vertical-align: middle;
  font-weight: normal;
}

.table > thead > tr > th, .table > thead > tr > td {
  border-bottom-width: 1px;
}

.table > tbody + tbody {
  border-top: 1px solid #ddd;
}

td.no_results {
  text-align: center;
  font-style: italic;
}

td.no-results {
  text-align: center;
  font-style: italic;
}

.table > thead > tr > td,
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
  border-left: 0px;
  border-right: 0px;
}

.table-bordered {
  border-left: 0px;
  border-right: 0px;
}

.table.table-vbordered {
  border-right: 1px solid #ddd;
}

.table.table-vbordered > thead > tr > td,
.table.table-vbordered > thead > tr > th,
.table.table-vbordered > tbody > tr > td,
.table.table-vbordered > tbody > tr > th,
.table.table-vbordered > tfoot > tr > td,
.table.table-vbordered > tfoot > tr > th {
  border-left: 1px solid #ddd;
}

.table > thead > tr > th button.dropdown-toggle {
  padding: 0px;
}

table thead button {
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

table.sortable thead tr:first-child th:first-child {
  width: 15px;
}

table.sortable tbody tr td:first-child {
  width: 15px;
}

table.sortable tbody tr td.sort-handle {
  cursor: move;
  background: url("/img/grippy.png") no-repeat center;
}

table td.actions a {
  padding-left: 0px;
}

table td.actions a:last-child {
  padding-right: 5px;
}

th.col_check, th.col-check {
  width: 20px;
}

table.table-bordered th.border-left {
  border-left: 1px solid #ddd;
}

table.table-bordered th.border-right {
  border-right: 1px solid #ddd;
}

table.table-bordered td.border-left {
  border-left: 1px solid #ddd;
}

table.table-bordered td.border-right {
  border-right: 1px solid #ddd;
}

table.table-bordered > thead > tr > th.border-left-dark {
  border-left: 1px solid #bbb;
}

table.table-bordered > thead > tr > th.border-right-dark {
  border-right: 1px solid #bbb;
}

table.table-bordered > tbody > tr > td.border-left-dark {
  border-left: 1px solid #bbb;
}

table.table-bordered > tbody > tr > td.border-right-dark {
  border-right: 1px solid #bbb;
}

table.table-bordered > tfoot > tr > td.border-left-dark {
  border-left: 1px solid #bbb;
}

table.table-bordered > tfoot > tr > td.border-right-dark {
  border-right: 1px solid #bbb;
}

table.table-bordered > tfoot > tr > th.border-left-dark {
  border-left: 1px solid #bbb;
}

table.table-bordered > tfoot > tr > th.border-right-dark {
  border-right: 1px solid #bbb;
}

table.table-bordered th.vert-middle {
  vertical-align: middle;
}

table.table-bordered td.vert-middle {
  vertical-align: middle;
}

table.table-borderless th.vert-middle {
  vertical-align: middle;
}

table.table-borderless td.vert-middle {
  vertical-align: middle;
}

table.table-borderless tbody tr td, table.table-borderless thead tr td, table.table-borderless tfoot tr td {
  border: 0px;
}
table.table-borderless tbody tr td:first-child, table.table-borderless thead tr th:first-child, table.table-borderless tfoot tr td:first-child {
  padding-left: 0px;
}

table.audit {
  font-size: 0.9em;
}

table.audit > tbody > tr > td {
  vertical-align: top;
  border-left-width: 1px;
  border-right-width: 1px;
}

.audit_detail {
  margin-top: 10px;
  display: none;
}

table.table-audit-detail {
  border: 0px;
  margin-bottom: 0px;
}

table.table-audit-detail > tbody > tr th {
  border-top: 0px;
}

table.table-audit-detail > tbody > tr th:first-child {
  border-left: 0px;
}

table.table-audit-detail > tbody > tr:first-child td {
  border-top: 0px;
}

table.table-audit-detail > tbody > tr td:first-child {
  border-left: 0px;
}

table.table-audit-detail > tbody > tr th:last-child {
  border-right: 0px;
}

table.table-audit-detail > tbody > tr td:last-child {
  border-right: 0px;
}

table.table-audit-detail > tbody > tr:last-child td {
  border-bottom: 0px;
}

.table > thead > tr > th.nopadding, .table > tbody > tr > th.nopadding, .table > tfoot > tr > th.nopadding, .table > thead > tr > td.nopadding, .table > tbody > tr > td.nopadding, .table > tfoot > tr > td.nopadding {
  padding: 0px;
}

.audit_value {
  padding: 5px;
}

.audit-comments {
  padding: 5px;
  border-top: 1px solid #ddd;
}

table.table-highlightable tbody tr:hover td {
  background-color: #FFFde7;
}

/* table-round class */
table.table-round {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 20px;
}
table.table-round thead tr:first-child th:first-child, table.table-round thead tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}
table.table-round thead tr:first-child th:last-child, table.table-round thead tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}
table.table-round thead tr:first-child th:only-child, table.table-round thead tr:first-child td:only-child {
  border-radius: 20px 20px 0 0;
}
table.table-round thead tr th {
  border-top: none;
  border-bottom: none;
  padding: 12px;
  color: #636363;
}
table.table-round thead tr th, table.table-round thead tr td {
  position: relative;
}
table.table-round thead tr th .help-icon, table.table-round thead tr th i.context-help, table.table-round thead tr td .help-icon, table.table-round thead tr td i.context-help {
  position: absolute;
  top: 5px;
  right: 5px;
}
table.table-round thead tr th:last-child .help-icon, table.table-round thead tr th:last-child i.context-help, table.table-round thead tr td:last-child .help-icon, table.table-round thead tr td:last-child i.context-help {
  top: 8px;
  right: 8px;
}
table.table-round thead tr.total th, table.table-round thead tr.total td {
  background-color: #D4E6F1;
  color: #2a6182;
}
table.table-round thead tr.bold th, table.table-round thead tr.bold td {
  font-weight: bold;
  color: #636363;
}
table.table-round thead tr thead tr th {
  padding: 10px;
  border-bottom: 0;
  border-top: 0;
  color: #888888;
}
table.table-round thead tr.default th, table.table-round thead tr.default td {
  background-color: #7f8c8d;
  color: #ffffff;
}
table.table-round thead tr.primary th, table.table-round thead tr.primary td {
  background-color: #1674b4;
  color: #ffffff;
}
table.table-round thead tr.secondary th, table.table-round thead tr.secondary td {
  background-color: #f3836b;
  color: #ffffff;
}
table.table-round thead tr.danger th, table.table-round thead tr.danger td {
  background-color: #b62116;
  color: #ffffff;
}
table.table-round thead tr.success th, table.table-round thead tr.success td {
  background-color: #16b68b;
  color: #ffffff;
}
table.table-round thead tr.warning th, table.table-round thead tr.warning td {
  background-color: #dca91b;
  color: #ffffff;
}
table.table-round thead tr.alert-info th, table.table-round thead tr.alert-info td {
  background-color: #D4E6F1;
  color: #2a6182;
}
table.table-round thead tr.alert-danger th, table.table-round thead tr.alert-danger td {
  background-color: #F2D7D5;
  color: #853029;
}
table.table-round thead tr.alert-warning th, table.table-round thead tr.alert-warning td {
  background-color: #FCF3CF;
  color: #a8890b;
}
table.table-round thead tr.alert-success th, table.table-round thead tr.alert-success td {
  background-color: #D1F2EB;
  color: #268571;
}
table.table-round thead tr th, table.table-round tbody tr th, table.table-round tfoot tr th {
  background-color: #ECEFF1;
  border: none;
  padding: 12px;
  vertical-align: middle;
}
table.table-round thead tr th.v-border-left, table.table-round tbody tr th.v-border-left, table.table-round tfoot tr th.v-border-left {
  border-left: 1px solid #ffffff;
}
table.table-round thead tr th.v-border-right, table.table-round tbody tr th.v-border-right, table.table-round tfoot tr th.v-border-right {
  border-right: 1px solid #ffffff;
}
table.table-round thead tr td .flex button, table.table-round thead tr td .flex a, table.table-round thead tr th .flex button, table.table-round thead tr th .flex a, table.table-round tbody tr td .flex button, table.table-round tbody tr td .flex a, table.table-round tbody tr th .flex button, table.table-round tbody tr th .flex a, table.table-round tfoot tr td .flex button, table.table-round tfoot tr td .flex a, table.table-round tfoot tr th .flex button, table.table-round tfoot tr th .flex a {
  margin-right: 10px;
}
table.table-round thead tr td .flex button:last-child, table.table-round thead tr td .flex a:last-child, table.table-round thead tr th .flex button:last-child, table.table-round thead tr th .flex a:last-child, table.table-round tbody tr td .flex button:last-child, table.table-round tbody tr td .flex a:last-child, table.table-round tbody tr th .flex button:last-child, table.table-round tbody tr th .flex a:last-child, table.table-round tfoot tr td .flex button:last-child, table.table-round tfoot tr td .flex a:last-child, table.table-round tfoot tr th .flex button:last-child, table.table-round tfoot tr th .flex a:last-child {
  margin-right: 0px;
}
table.table-round thead.cloned-sticky tr td, table.table-round thead.cloned-sticky tr td:first-child, table.table-round thead.cloned-sticky tr td:last-child, table.table-round thead.cloned-sticky tr td:only-child,
table.table-round thead.cloned-sticky tr th, table.table-round thead.cloned-sticky tr th:first-child, table.table-round thead.cloned-sticky tr th:last-child, table.table-round thead.cloned-sticky tr th:only-child {
  border-radius: 0px;
}
table.table-round tbody tr:first-child th:first-child, table.table-round tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}
table.table-round tbody tr:first-child th:last-child, table.table-round tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}
table.table-round tbody tr:first-child th:only-child, table.table-round tbody tr:first-child td:only-child {
  border-radius: 20px 20px 0 0;
}
table.table-round tbody tr td {
  border-top: 0px;
  border-bottom: 1px solid #ECEFF1;
  padding: 12px;
  vertical-align: middle;
}
table.table-round tbody tr td:first-child {
  border-left: 1px solid #ECEFF1;
}
table.table-round tbody tr td:last-child {
  border-right: 1px solid #ECEFF1;
}
table.table-round tbody tr td:only-child {
  border-left: 1px solid #ECEFF1;
  border-right: 1px solid #ECEFF1;
}
table.table-round tbody tr td.no_results {
  text-align: center;
  font-style: italic;
}
table.table-round tbody tr td.v-border-left {
  border-left: 1px solid #ECEFF1;
}
table.table-round tbody tr td.v-border-right {
  border-right: 1px solid #ECEFF1;
}
table.table-round tbody tr:first-child td {
  border-top: 1px solid #ECEFF1;
}
table.table-round tbody tr:last-child td:first-child, table.table-round tbody tr:last-child th:first-child {
  border-radius: 0 0 0 20px;
}
table.table-round tbody tr:last-child td:last-child, table.table-round tbody tr:last-child th:last-child {
  border-radius: 0 0 20px 0;
}
table.table-round tbody tr:last-child td:only-child, table.table-round tbody tr:last-child th:only-child {
  border-radius: 0 0 20px 20px;
}
table.table-round tbody tr:only-child th:first-child, table.table-round tbody tr:only-child td:first-child {
  border-radius: 20px 0 0 20px;
}
table.table-round tbody tr:only-child th:last-child, table.table-round tbody tr:only-child td:last-child {
  border-radius: 0 20px 20px 0;
}
table.table-round tbody tr:only-child th:only-child, table.table-round tbody tr:only-child td:only-child {
  border-radius: 20px 20px 20px 20px;
}
table.table-round tbody tr.total th, table.table-round tbody tr.total td {
  background-color: #D4E6F1;
  color: #2a6182;
}
table.table-round tbody tr.bold th, table.table-round tbody tr.bold td {
  font-weight: bold;
  color: #636363;
}
table.table-round tbody tr thead tr th {
  padding: 10px;
  border-bottom: 0;
  border-top: 0;
  color: #888888;
}
table.table-round tbody tr.default th, table.table-round tbody tr.default td {
  background-color: #7f8c8d;
  color: #ffffff;
}
table.table-round tbody tr.primary th, table.table-round tbody tr.primary td {
  background-color: #1674b4;
  color: #ffffff;
}
table.table-round tbody tr.secondary th, table.table-round tbody tr.secondary td {
  background-color: #f3836b;
  color: #ffffff;
}
table.table-round tbody tr.danger th, table.table-round tbody tr.danger td {
  background-color: #b62116;
  color: #ffffff;
}
table.table-round tbody tr.success th, table.table-round tbody tr.success td {
  background-color: #16b68b;
  color: #ffffff;
}
table.table-round tbody tr.warning th, table.table-round tbody tr.warning td {
  background-color: #dca91b;
  color: #ffffff;
}
table.table-round tbody tr.alert-info th, table.table-round tbody tr.alert-info td {
  background-color: #D4E6F1;
  color: #2a6182;
}
table.table-round tbody tr.alert-danger th, table.table-round tbody tr.alert-danger td {
  background-color: #F2D7D5;
  color: #853029;
}
table.table-round tbody tr.alert-warning th, table.table-round tbody tr.alert-warning td {
  background-color: #FCF3CF;
  color: #a8890b;
}
table.table-round tbody tr.alert-success th, table.table-round tbody tr.alert-success td {
  background-color: #D1F2EB;
  color: #268571;
}
table.table-round thead + tbody tr:first-child td, table.table-round thead + tbody tr:first-child td:first-child, table.table-round thead + tbody tr:first-child td:last-child, table.table-round thead + tbody tr:first-child td:only-child,
table.table-round thead + tbody tr:first-child th, table.table-round thead + tbody tr:first-child th:first-child, table.table-round thead + tbody tr:first-child th:last-child, table.table-round thead + tbody tr:first-child th:only-child {
  border-radius: 0px;
}
table.table-round thead + tbody tr:first-child td {
  border-top: none;
}
table.table-round thead + tbody tr:last-child td:first-child, table.table-round thead + tbody tr:last-child th:first-child {
  border-radius: 0 0 0 20px;
}
table.table-round thead + tbody tr:last-child td:last-child, table.table-round thead + tbody tr:last-child th:last-child {
  border-radius: 0 0 20px 0;
}
table.table-round thead + tbody tr:last-child td:only-child, table.table-round thead + tbody tr:last-child th:only-child {
  border-radius: 0 0 20px 20px;
}
table.table-round.table-footer tbody tr td, table.table-round.table-footer tbody tr td:first-child, table.table-round.table-footer tbody tr td:last-child, table.table-round.table-footer tbody tr td:only-child,
table.table-round.table-footer tbody tr th, table.table-round.table-footer tbody tr th:first-child, table.table-round.table-footer tbody tr th:last-child, table.table-round.table-footer tbody tr th:only-child {
  border-radius: 0px;
}
table.table-round.table-footer tbody tr:last-child td, table.table-round.table-footer tbody tr:last-child td:first-child, table.table-round.table-footer tbody tr:last-child td:last-child, table.table-round.table-footer tbody tr:last-child td:only-child,
table.table-round.table-footer tbody tr:last-child th, table.table-round.table-footer tbody tr:last-child th:first-child, table.table-round.table-footer tbody tr:last-child th:last-child, table.table-round.table-footer tbody tr:last-child th:only-child {
  border-radius: 0px;
}
table.table-round.table-footer tfoot tr td {
  background-color: #ECEFF1;
  border-top: none;
  border-bottom: none;
  padding: 12px;
  color: #636363;
}
table.table-round.table-footer tfoot tr:last-child td:first-child, table.table-round.table-footer tfoot tr:last-child th:first-child {
  border-radius: 0 0 0 20px;
}
table.table-round.table-footer tfoot tr:last-child td:last-child, table.table-round.table-footer tfoot tr:last-child th:last-child {
  border-radius: 0 0 20px 0;
}
table.table-round.table-footer tfoot tr:last-child td:only-child, table.table-round.table-footer tfoot tr:last-child th:only-child {
  border-radius: 0 0 20px 20px;
}
table.table-round.table-footer tfoot tr.total th, table.table-round.table-footer tfoot tr.total td {
  background-color: #D4E6F1;
  color: #2a6182;
}
table.table-round.table-footer tfoot tr.bold th, table.table-round.table-footer tfoot tr.bold td {
  font-weight: bold;
  color: #636363;
}
table.table-round.table-footer tfoot tr thead tr th {
  padding: 10px;
  border-bottom: 0;
  border-top: 0;
  color: #888888;
}
table.table-round.table-footer tfoot tr.default th, table.table-round.table-footer tfoot tr.default td {
  background-color: #7f8c8d;
  color: #ffffff;
}
table.table-round.table-footer tfoot tr.primary th, table.table-round.table-footer tfoot tr.primary td {
  background-color: #1674b4;
  color: #ffffff;
}
table.table-round.table-footer tfoot tr.secondary th, table.table-round.table-footer tfoot tr.secondary td {
  background-color: #f3836b;
  color: #ffffff;
}
table.table-round.table-footer tfoot tr.danger th, table.table-round.table-footer tfoot tr.danger td {
  background-color: #b62116;
  color: #ffffff;
}
table.table-round.table-footer tfoot tr.success th, table.table-round.table-footer tfoot tr.success td {
  background-color: #16b68b;
  color: #ffffff;
}
table.table-round.table-footer tfoot tr.warning th, table.table-round.table-footer tfoot tr.warning td {
  background-color: #dca91b;
  color: #ffffff;
}
table.table-round.table-footer tfoot tr.alert-info th, table.table-round.table-footer tfoot tr.alert-info td {
  background-color: #D4E6F1;
  color: #2a6182;
}
table.table-round.table-footer tfoot tr.alert-danger th, table.table-round.table-footer tfoot tr.alert-danger td {
  background-color: #F2D7D5;
  color: #853029;
}
table.table-round.table-footer tfoot tr.alert-warning th, table.table-round.table-footer tfoot tr.alert-warning td {
  background-color: #FCF3CF;
  color: #a8890b;
}
table.table-round.table-footer tfoot tr.alert-success th, table.table-round.table-footer tfoot tr.alert-success td {
  background-color: #D1F2EB;
  color: #268571;
}
table.table-round.table-border {
  border: inherit;
}
table.table-round.table-border tbody td {
  border-left: 1px solid #ECEFF1;
}
table.table-round.table-border tbody th {
  border-left: 1px solid #ffffff;
}
table.table-round.table-border thead tr td:not(:first-child), table.table-round.table-border thead tr th:not(:first-child), table.table-round.table-border tfoot tr td:not(:first-child), table.table-round.table-border tfoot tr th:not(:first-child) {
  border-left: 1px solid #ffffff;
}
table.table-round.table-border thead tr:not(:first-child) td, table.table-round.table-border thead tr:not(:first-child) th, table.table-round.table-border tfoot tr:not(:first-child) td, table.table-round.table-border tfoot tr:not(:first-child) th {
  border-top: 1px solid #ffffff;
}
table.table-round.table-shaded thead th {
  background-color: #f9f9f9;
}
table.table-round.table-no-border thead th {
  border: none;
}
table.table-round.table-no-border tbody th, table.table-round.table-no-border tbody td {
  border: none;
}
table.table-round.table-no-border tbody tr:last-child td {
  border-bottom: 1px solid #ECEFF1;
}
table.table-round.table-no-border tfoot th, table.table-round.table-no-border tfoot td {
  border: none;
}
table.table-round.table-condensed thead tr td, table.table-round.table-condensed thead tr th, table.table-round.table-condensed tbody tr td, table.table-round.table-condensed tbody tr th, table.table-round.table-condensed tfoot tr td, table.table-round.table-condensed tfoot tr th {
  padding: 6px 12px;
}
table.table-round.table-audit tr td table, table.table-round.audit tr td table {
  border: none;
  width: 100%;
}
table.table-round.table-audit tr td table tr td, table.table-round.table-audit tr td table tr td:first-child, table.table-round.table-audit tr td table tr td:last-child, table.table-round.table-audit tr td table tr td:only-child,
table.table-round.table-audit tr td table tr th, table.table-round.table-audit tr td table tr th:first-child, table.table-round.table-audit tr td table tr th:last-child, table.table-round.table-audit tr td table tr th:only-child, table.table-round.audit tr td table tr td, table.table-round.audit tr td table tr td:first-child, table.table-round.audit tr td table tr td:last-child, table.table-round.audit tr td table tr td:only-child,
table.table-round.audit tr td table tr th, table.table-round.audit tr td table tr th:first-child, table.table-round.audit tr td table tr th:last-child, table.table-round.audit tr td table tr th:only-child {
  border-radius: 0px;
}
table.table-round.table-audit tr td table tr td, table.table-round.table-audit tr td table tr th, table.table-round.audit tr td table tr td, table.table-round.audit tr td table tr th {
  border: none;
  font-weight: normal;
}
table.table-round.table-audit tr:last-child td:last-child table, table.table-round.audit tr:last-child td:last-child table {
  border-radius: 0px 0px 20px 0px;
}
table.table-round.table-audit tr:last-child td:last-child table thead, table.table-round.table-audit tr:last-child td:last-child table tbody, table.table-round.table-audit tr:last-child td:last-child table tfoot, table.table-round.audit tr:last-child td:last-child table thead, table.table-round.audit tr:last-child td:last-child table tbody, table.table-round.audit tr:last-child td:last-child table tfoot {
  border-radius: 0px 0px 20px 0px;
}
table.table-round.table-audit tr:last-child td:last-child table thead tr, table.table-round.table-audit tr:last-child td:last-child table tbody tr, table.table-round.table-audit tr:last-child td:last-child table tfoot tr, table.table-round.audit tr:last-child td:last-child table thead tr, table.table-round.audit tr:last-child td:last-child table tbody tr, table.table-round.audit tr:last-child td:last-child table tfoot tr {
  border-radius: 0px 0px 20px 0px;
}
table.table-round.table-audit tr:last-child td:last-child table thead tr:last-child, table.table-round.table-audit tr:last-child td:last-child table tbody tr:last-child, table.table-round.table-audit tr:last-child td:last-child table tfoot tr:last-child, table.table-round.audit tr:last-child td:last-child table thead tr:last-child, table.table-round.audit tr:last-child td:last-child table tbody tr:last-child, table.table-round.audit tr:last-child td:last-child table tfoot tr:last-child {
  border-radius: 0px 0px 20px 0px;
}
table.table-round.table-audit tr:last-child td:last-child table thead tr:last-child td:last-child, table.table-round.table-audit tr:last-child td:last-child table tbody tr:last-child td:last-child, table.table-round.table-audit tr:last-child td:last-child table tfoot tr:last-child td:last-child, table.table-round.audit tr:last-child td:last-child table thead tr:last-child td:last-child, table.table-round.audit tr:last-child td:last-child table tbody tr:last-child td:last-child, table.table-round.audit tr:last-child td:last-child table tfoot tr:last-child td:last-child {
  border-radius: 0px 0px 20px 0px;
}

thead.week-calendar th.column-title {
  font-size: 1.5em;
}
thead.week-calendar th.date {
  text-align: center;
}
thead.week-calendar th.date .weekday {
  text-transform: uppercase;
}
thead.week-calendar th.date .date {
  font-size: 1.5em;
}
thead.week-calendar th.date .times {
  font-size: 0.8em;
}
thead.week-calendar th.date.today {
  color: #fff;
  padding: 5px 10px;
}
thead.week-calendar th.date.today > div {
  background: #0282c7;
  width: 50px;
  border-radius: 100%;
  height: 50px;
  padding-top: 4px;
  display: inline-block;
}

.view-filters {
  margin-top: 5px;
}
.view-filters span {
  display: inline-block;
  padding: 5px 5px 5px 0px;
}
.view-filters a {
  display: inline-block;
  padding: 5px 10px;
}
.view-filters a.selected {
  border-bottom: 2px solid #20358A;
}

.view-filters.pull-right {
  text-align: right;
  padding-bottom: 10px;
}

.appogee-view .appogee-view-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.appogee-view .appogee-view-header .pagination {
  display: block;
  margin: 0px;
}

table.with-action-btns td:not(:only-child):last-child {
  padding-left: 0;
}

/** this file contains generic styles to be used accross the app in order to keep things consistent
**/
/** this file contains all colours to be used accross the app in order to keep things consistent
    Hex codes for colours should not be used. instead - use the colours defined in this file.
**/
.text-grey {
  color: #636363;
}

.text-light-grey {
  color: #878787;
}

.text-blue {
  color: #125d8f;
}

.text-orange {
  color: #dca91b;
}

.text-red {
  color: #b62116;
}

.text-green {
  color: #16b68b;
}

.text-package-hr-success {
  color: #299AE5;
}

.text-package-hr-essentials {
  color: #299AE5;
}

.text-package-leave {
  color: #125d8f;
}

.text-package-time {
  color: #f3836b;
}

/* Variables*/
.btn-group .btn:not(.btn-icon), .btn-icon-stroked, .btn-icon-basic, .btn-icon-raised, .btn-icon, .btn-stroked, .btn-basic, .btn-raised, .btn {
  border: none;
  outline: none;
  min-width: inherit;
  max-width: inherit;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: none;
  vertical-align: middle;
  outline: none;
  transition: border-color 0.4s, background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.btn-group .btn:active:not(.btn-icon), .btn-icon-stroked:active, .btn-icon-basic:active, .btn-icon-raised:active, .btn-icon:active, .btn-stroked:active, .btn-basic:active, .btn-raised:active, .btn:active, .btn-group .btn:hover:not(.btn-icon), .btn-icon-stroked:hover, .btn-icon-basic:hover, .btn-icon-raised:hover, .btn-icon:hover, .btn-stroked:hover, .btn-basic:hover, .btn-raised:hover, .btn:hover, .btn-group .btn:focus:not(.btn-icon), .btn-icon-stroked:focus, .btn-icon-basic:focus, .btn-icon-raised:focus, .btn-icon:focus, .btn-stroked:focus, .btn-basic:focus, .btn-raised:focus, .btn:focus {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
}

.btn-stroked, .btn-basic, .btn-raised, .btn {
  border-radius: 20px;
  padding: 0 20px;
  min-width: 100px;
  height: 40px;
  font-size: 13px;
  line-height: 40px;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  letter-spacing: 0.3px;
}

.btn-icon-stroked, .btn-icon-basic, .btn-icon-raised, .btn-icon {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  min-width: 40px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-raised {
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.26);
}

.btn.btn-default, .btn-raised.btn-default {
  border-color: #7f8c8d;
  color: #7f8c8d;
  border: 1px solid #7f8c8d;
  border-color: #7f8c8d;
  background-color: transparent;
}
.btn.btn-default:hover, .btn.btn-default:active, .btn-raised.btn-default:hover, .btn-raised.btn-default:active {
  background-color: #dde1e1;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn.btn-primary, .btn-raised.btn-primary {
  background-color: #1674b4;
  border: 1px solid #1674b4;
  color: #ffffff;
}
.btn.btn-primary:hover, .btn.btn-primary:active, .btn-raised.btn-primary:hover, .btn-raised.btn-primary:active {
  background-color: #ffffff;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn.btn-secondary, .btn-raised.btn-secondary {
  background-color: #f3836b;
  border: 1px solid #f3836b;
  color: #ffffff;
}
.btn.btn-secondary:hover, .btn.btn-secondary:active, .btn-raised.btn-secondary:hover, .btn-raised.btn-secondary:active {
  background-color: #ffffff;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn.btn-danger, .btn-raised.btn-danger {
  background-color: #b62116;
  border: 1px solid #b62116;
  color: #ffffff;
}
.btn.btn-danger:hover, .btn.btn-danger:active, .btn-raised.btn-danger:hover, .btn-raised.btn-danger:active {
  background-color: #ffffff;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn.btn-warning, .btn-raised.btn-warning {
  background-color: #dca91b;
  border: 1px solid #dca91b;
  color: #ffffff;
}
.btn.btn-warning:hover, .btn.btn-warning:active, .btn-raised.btn-warning:hover, .btn-raised.btn-warning:active {
  background-color: #ffffff;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn.btn-success, .btn-raised.btn-success {
  background-color: #16b68b;
  border: 1px solid #16b68b;
  color: #ffffff;
}
.btn.btn-success:hover, .btn.btn-success:active, .btn-raised.btn-success:hover, .btn-raised.btn-success:active {
  background-color: #ffffff;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn.btn-xl, .btn-raised.btn-xl {
  padding: 0 35px;
  min-width: 180px;
  border-radius: 90px;
  font-size: 15px;
  height: 50px;
  line-height: 50px;
}

.btn.btn-sm, .btn-raised.btn-sm {
  padding: 0 15px;
  min-width: 55px;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
}

.btn-icon-raised {
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.26);
}

.btn-icon.btn-default, .btn-icon-raised.btn-default {
  background-color: #7f8c8d;
  border: 1px solid #7f8c8d;
  color: #ffffff;
}
.btn-icon.btn-default:hover, .btn-icon.btn-default:active, .btn-icon-raised.btn-default:hover, .btn-icon-raised.btn-default:active {
  background-color: #ffffff;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn-icon.btn-primary, .btn-icon-raised.btn-primary {
  background-color: #1674b4;
  border: 1px solid #1674b4;
  color: #ffffff;
}
.btn-icon.btn-primary:hover, .btn-icon.btn-primary:active, .btn-icon-raised.btn-primary:hover, .btn-icon-raised.btn-primary:active {
  background-color: #ffffff;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn-icon.btn-secondary, .btn-icon-raised.btn-secondary {
  background-color: #f3836b;
  border: 1px solid #f3836b;
  color: #ffffff;
}
.btn-icon.btn-secondary:hover, .btn-icon.btn-secondary:active, .btn-icon-raised.btn-secondary:hover, .btn-icon-raised.btn-secondary:active {
  background-color: #ffffff;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn-icon.btn-danger, .btn-icon-raised.btn-danger {
  background-color: #b62116;
  border: 1px solid #b62116;
  color: #ffffff;
}
.btn-icon.btn-danger:hover, .btn-icon.btn-danger:active, .btn-icon-raised.btn-danger:hover, .btn-icon-raised.btn-danger:active {
  background-color: #ffffff;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn-icon.btn-warning, .btn-icon-raised.btn-warning {
  background-color: #dca91b;
  border: 1px solid #dca91b;
  color: #ffffff;
}
.btn-icon.btn-warning:hover, .btn-icon.btn-warning:active, .btn-icon-raised.btn-warning:hover, .btn-icon-raised.btn-warning:active {
  background-color: #ffffff;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn-icon.btn-success, .btn-icon-raised.btn-success {
  background-color: #16b68b;
  border: 1px solid #16b68b;
  color: #ffffff;
}
.btn-icon.btn-success:hover, .btn-icon.btn-success:active, .btn-icon-raised.btn-success:hover, .btn-icon-raised.btn-success:active {
  background-color: #ffffff;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn-icon.btn-sm, .btn-icon-raised.btn-sm {
  font-size: 13px;
  height: 30px;
  width: 30px;
  min-width: 30px;
  line-height: 30px;
}

/* btn basic */
.btn-basic.btn-default {
  border: 1px solid transparent;
  color: #7f8c8d;
  background: transparent;
}
.btn-basic.btn-default:hover, .btn-basic.btn-default:active {
  background: transparent;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn-basic.btn-primary {
  border: 1px solid transparent;
  color: #1674b4;
  background: transparent;
}
.btn-basic.btn-primary:hover, .btn-basic.btn-primary:active {
  background: transparent;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn-basic.btn-secondary {
  border: 1px solid transparent;
  color: #f3836b;
  background: transparent;
}
.btn-basic.btn-secondary:hover, .btn-basic.btn-secondary:active {
  background: transparent;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn-basic.btn-danger {
  border: 1px solid transparent;
  color: #b62116;
  background: transparent;
}
.btn-basic.btn-danger:hover, .btn-basic.btn-danger:active {
  background: transparent;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn-basic.btn-warning {
  border: 1px solid transparent;
  color: #dca91b;
  background: transparent;
}
.btn-basic.btn-warning:hover, .btn-basic.btn-warning:active {
  background: transparent;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn-basic.btn-success {
  border: 1px solid transparent;
  color: #16b68b;
  background: transparent;
}
.btn-basic.btn-success:hover, .btn-basic.btn-success:active {
  background: transparent;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn-basic.btn-xl {
  padding: 0 35px;
  min-width: 180px;
  border-radius: 90px;
  font-size: 15px;
  height: 50px;
  line-height: 50px;
}

.btn-basic.btn-sm {
  padding: 0 15px;
  min-width: 55px;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
}

/* btn icon basic */
.btn-icon-basic.btn-default {
  border: 1px solid transparent;
  color: #7f8c8d;
  background: transparent;
}
.btn-icon-basic.btn-default:hover, .btn-icon-basic.btn-default:active {
  background: transparent;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn-icon-basic.btn-primary {
  border: 1px solid transparent;
  color: #1674b4;
  background: transparent;
}
.btn-icon-basic.btn-primary:hover, .btn-icon-basic.btn-primary:active {
  background: transparent;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn-icon-basic.btn-secondary {
  border: 1px solid transparent;
  color: #f3836b;
  background: transparent;
}
.btn-icon-basic.btn-secondary:hover, .btn-icon-basic.btn-secondary:active {
  background: transparent;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn-icon-basic.btn-danger {
  border: 1px solid transparent;
  color: #b62116;
  background: transparent;
}
.btn-icon-basic.btn-danger:hover, .btn-icon-basic.btn-danger:active {
  background: transparent;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn-icon-basic.btn-warning {
  border: 1px solid transparent;
  color: #dca91b;
  background: transparent;
}
.btn-icon-basic.btn-warning:hover, .btn-icon-basic.btn-warning:active {
  background: transparent;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn-icon-basic.btn-success {
  border: 1px solid transparent;
  color: #16b68b;
  background: transparent;
}
.btn-icon-basic.btn-success:hover, .btn-icon-basic.btn-success:active {
  background: transparent;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn-icon-basic.btn-sm {
  font-size: 13px;
  height: 30px;
  width: 30px;
  min-width: 30px;
  line-height: 30px;
}

.btn-stroked {
  border-width: 1px;
  border-style: solid;
  background-color: #ffffff;
}

.btn-stroked.btn-default {
  border-color: #7f8c8d;
  color: #7f8c8d;
  border: 1px solid #7f8c8d;
  border-color: #7f8c8d;
  background-color: transparent;
}
.btn-stroked.btn-default:hover, .btn-stroked.btn-default:active {
  background-color: #dde1e1;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn-stroked.btn-primary {
  border-color: #1674b4;
  color: #1674b4;
  border: 1px solid #1674b4;
  border-color: #1674b4;
  background-color: transparent;
}
.btn-stroked.btn-primary:hover, .btn-stroked.btn-primary:active {
  background-color: #d0e8f9;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn-stroked.btn-secondary {
  border-color: #f3836b;
  color: #f3836b;
  border: 1px solid #f3836b;
  border-color: #f3836b;
  background-color: transparent;
}
.btn-stroked.btn-secondary:hover, .btn-stroked.btn-secondary:active {
  background-color: #fde6e1;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn-stroked.btn-danger {
  border-color: #b62116;
  color: #b62116;
  border: 1px solid #b62116;
  border-color: #b62116;
  background-color: transparent;
}
.btn-stroked.btn-danger:hover, .btn-stroked.btn-danger:active {
  background-color: #fad4d2;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn-stroked.btn-warning {
  border-color: #dca91b;
  color: #dca91b;
  border: 1px solid #dca91b;
  border-color: #dca91b;
  background-color: transparent;
}
.btn-stroked.btn-warning:hover, .btn-stroked.btn-warning:active {
  background-color: #f9ecca;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn-stroked.btn-success {
  border-color: #16b68b;
  color: #16b68b;
  border: 1px solid #16b68b;
  border-color: #16b68b;
  background-color: transparent;
}
.btn-stroked.btn-success:hover, .btn-stroked.btn-success:active {
  background-color: #d2faef;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn-stroked.btn-xl {
  padding: 0 35px;
  min-width: 180px;
  border-radius: 90px;
  font-size: 15px;
  height: 50px;
  line-height: 50px;
}

.btn-stroked.btn-sm {
  padding: 0 15px;
  min-width: 55px;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
}

/* btn icon stroked */
.btn-icon-stroked {
  border-width: 1px;
  border-style: solid;
  background-color: #ffffff;
}

.btn-icon-stroked.btn-default {
  border-color: #7f8c8d;
  color: #7f8c8d;
  border: 1px solid #7f8c8d;
  border-color: #7f8c8d;
  background-color: transparent;
}
.btn-icon-stroked.btn-default:hover, .btn-icon-stroked.btn-default:active {
  background-color: #dde1e1;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn-icon-stroked.btn-primary {
  border-color: #1674b4;
  color: #1674b4;
  border: 1px solid #1674b4;
  border-color: #1674b4;
  background-color: transparent;
}
.btn-icon-stroked.btn-primary:hover, .btn-icon-stroked.btn-primary:active {
  background-color: #d0e8f9;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn-icon-stroked.btn-secondary {
  border-color: #f3836b;
  color: #f3836b;
  border: 1px solid #f3836b;
  border-color: #f3836b;
  background-color: transparent;
}
.btn-icon-stroked.btn-secondary:hover, .btn-icon-stroked.btn-secondary:active {
  background-color: #fde6e1;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn-icon-stroked.btn-danger {
  border-color: #b62116;
  color: #b62116;
  border: 1px solid #b62116;
  border-color: #b62116;
  background-color: transparent;
}
.btn-icon-stroked.btn-danger:hover, .btn-icon-stroked.btn-danger:active {
  background-color: #fad4d2;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn-icon-stroked.btn-warning {
  border-color: #dca91b;
  color: #dca91b;
  border: 1px solid #dca91b;
  border-color: #dca91b;
  background-color: transparent;
}
.btn-icon-stroked.btn-warning:hover, .btn-icon-stroked.btn-warning:active {
  background-color: #f9ecca;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn-icon-stroked.btn-success {
  border-color: #16b68b;
  color: #16b68b;
  border: 1px solid #16b68b;
  border-color: #16b68b;
  background-color: transparent;
}
.btn-icon-stroked.btn-success:hover, .btn-icon-stroked.btn-success:active {
  background-color: #d2faef;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn-icon-stroked.btn-grey {
  border-color: #636363;
  color: #636363;
  border: 1px solid #636363;
  border-color: #636363;
  background-color: transparent;
}
.btn-icon-stroked.btn-grey:hover, .btn-icon-stroked.btn-grey:active {
  background-color: #e3e3e3;
  border: 1px solid #636363;
  color: #636363;
}

.btn-icon-stroked.btn-sm {
  font-size: 13px;
  height: 30px;
  width: 30px;
  min-width: 30px;
  line-height: 30px;
}

/* Disabled */
.btn[disabled],
.btn-raised[disabled],
.btn-stroked[disabled],
.btn-basic[disabled],
.btn-icon[disabled],
.btn-icon-raised[disabled],
.btn-icon-stroked[disabled],
.btn-icon-basic[disabled],
.btn.disabled,
.btn-raised.disabled,
.btn-stroked.disabled,
.btn-basic.disabled,
.btn-icon.disabled,
.btn-icon-raised.disabled,
.btn-icon-stroked.disabled,
.btn-icon-basic.disabled {
  background-color: #C3C3C3;
  color: #636363;
  border: none;
}
.btn[disabled]:hover, .btn[disabled]:active,
.btn-raised[disabled]:hover,
.btn-raised[disabled]:active,
.btn-stroked[disabled]:hover,
.btn-stroked[disabled]:active,
.btn-basic[disabled]:hover,
.btn-basic[disabled]:active,
.btn-icon[disabled]:hover,
.btn-icon[disabled]:active,
.btn-icon-raised[disabled]:hover,
.btn-icon-raised[disabled]:active,
.btn-icon-stroked[disabled]:hover,
.btn-icon-stroked[disabled]:active,
.btn-icon-basic[disabled]:hover,
.btn-icon-basic[disabled]:active,
.btn.disabled:hover,
.btn.disabled:active,
.btn-raised.disabled:hover,
.btn-raised.disabled:active,
.btn-stroked.disabled:hover,
.btn-stroked.disabled:active,
.btn-basic.disabled:hover,
.btn-basic.disabled:active,
.btn-icon.disabled:hover,
.btn-icon.disabled:active,
.btn-icon-raised.disabled:hover,
.btn-icon-raised.disabled:active,
.btn-icon-stroked.disabled:hover,
.btn-icon-stroked.disabled:active,
.btn-icon-basic.disabled:hover,
.btn-icon-basic.disabled:active {
  background-color: #C3C3C3;
  color: #636363;
  border: none;
  pointer-events: none;
}

/* Currently the button groups are not widly used in the app there for this file only contains basic option
  - the design is relay on bootstrap .btn-group and tweeks it with our colors
*/
.btn-group .btn:not(.btn-icon) {
  background-color: #ffffff;
  color: #C3C3C3;
}
.btn-group .btn:not(.btn-icon):active, .btn-group .btn:not(.btn-icon).active {
  outline: none;
  outline-style: none;
}
.btn-group .btn:not(.btn-icon) + .btn {
  margin-left: 0px;
}
.btn-group .btn:not(.btn-icon).btn-default {
  color: #878787;
  border: 1px solid #C3C3C3;
}
.btn-group .btn:not(.btn-icon).btn-default.active, .btn-group .btn:not(.btn-icon).btn-default:active {
  background-color: #C3C3C3;
  color: #ffffff;
}
.btn-group .btn:not(.btn-icon).btn-primary {
  color: #1674b4;
  border: 1px solid #1674b4;
}
.btn-group .btn:not(.btn-icon).btn-primary.active, .btn-group .btn:not(.btn-icon).btn-primary:active {
  background-color: #1674b4;
  color: #ffffff;
}
.btn-group .btn:not(.btn-icon).btn-danger {
  color: #b62116;
  border: 1px solid #b62116;
}
.btn-group .btn:not(.btn-icon).btn-danger.active, .btn-group .btn:not(.btn-icon).btn-danger:active {
  background-color: #b62116;
  color: #ffffff;
}
.btn-group .btn:not(.btn-icon).btn-success {
  color: #16b68b;
  border: 1px solid #16b68b;
}
.btn-group .btn:not(.btn-icon).btn-success.active, .btn-group .btn:not(.btn-icon).btn-success:active {
  background-color: #16b68b;
  color: #ffffff;
}

.table-view-container .search-container {
  max-width: 400px;
  margin-bottom: 10px;
}
.table-view-container .table-view .selected-column {
  white-space: nowrap;
}
.table-view-container .filter.filtered {
  color: #c62828;
}
.table-view-container .view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.table-view-container .view-header .view-controls select {
  display: inline-block;
}
.table-view-container .view-header .view-controls .pagination-button {
  width: 100px;
}
@media (max-width: 767px) {
  .table-view-container .view-header .view-controls .pagination-button {
    font-size: 13px;
    height: 30px;
    width: 30px;
    min-width: 30px;
    line-height: 30px;
    padding: 0;
  }
  .table-view-container .view-header .view-controls .pagination-button > span {
    display: none;
  }
}

.table-view-popup {
  background: #fff;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid #efefef;
  width: 350px;
}
.table-view-popup.date-popup .date-container {
  margin: 10px;
}
.table-view-popup footer {
  margin-top: 10px;
  text-align: right;
}

.select-columns-popup {
  background: #fff;
  width: 220px;
  border-radius: 15px;
}
.select-columns-popup section {
  max-height: 300px;
  overflow: auto;
  padding: 10px;
}
.select-columns-popup header {
  border-bottom: 1px solid #ddd;
  padding: 10px;
}
.select-columns-popup footer {
  border-top: 1px solid #ddd;
  padding: 10px;
  text-align: right;
}
.select-columns-popup footer button {
  width: 75px;
}

/* jquery ui */
.ui-dialog {
  z-index: 10;
  position: absolute;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  outline: none;
  background-image: linear-gradient(225deg, #f3836b 49px, #ffffff 0px);
  border-radius: 20px;
}
.ui-dialog a, .ui-dialog button {
  outline: none;
}
.ui-dialog a, .ui-dialog button:focus {
  outline: none;
}
.ui-dialog .actions-container {
  text-align: right;
}
.ui-dialog .action-comments-container {
  display: none;
}
.ui-dialog .allowance-details-container section {
  border-top: 1px dashed #C3C3C3;
  padding-top: 10px;
  padding-bottom: 10px;
}
.ui-dialog .requested-time-container section {
  border-top: 1px dashed #C3C3C3;
  border-bottom: 1px dashed #C3C3C3;
  padding-top: 10px;
  padding-bottom: 10px;
}
.ui-dialog .request-reason-container {
  padding-top: 8px;
}
.ui-dialog .recurring-container {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.ui-dialog .recurring-container > * {
  margin-right: 10px;
  width: 50%;
}
.ui-dialog .appogee-tabs .tab-panel {
  padding: 20px 0;
}
.ui-dialog .appogee-tabs .tab-panel .tab-panel {
  padding: 0 0 0 20px;
}

@media (min-width: 992px) {
  .ui-dialog {
    max-width: 95%;
  }
}
@media (max-width: 991px) {
  .ui-dialog {
    max-width: unset;
    width: 550px !important;
  }
  .ui-dialog.responsive {
    max-width: unset;
    width: 95% !important;
  }
}
@media (min-width: 576px) {
  .alert .buttons {
    display: inline-flex;
    width: 100%;
  }
  .buttons {
    text-align: right;
  }
  .buttons button.btn {
    min-width: 100px;
    margin-left: 10px;
  }
  .buttons button.btn:first-of-type {
    float: left;
  }
  .buttons label.checkbox-inline {
    float: left;
    padding-top: 6px;
  }
  .buttons.center {
    text-align: center;
  }
  .buttons.center button.btnClose {
    float: unset;
  }
}
@media (max-width: 575px) {
  .ui-dialog {
    max-width: unset;
    width: 90% !important;
  }
  .ui-dialog .buttons button.btn {
    width: 49%;
  }
  .ui-dialog .buttons button.btn.btnClose {
    display: none;
  }
}
@media (max-width: 479px) {
  .ui-dialog label.radio-inline {
    display: block;
    margin-left: 0px;
  }
}
.ui-dialog-titlebar {
  /*
  background-color: #fff;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding: 5px 15px;
  cursor: move;
  padding-bottom: 15px;
  */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 20px 40px 25px 40px;
  cursor: move;
  text-align: center;
}

.ui-dialog-title {
  color: #1674b4;
  font-weight: bold;
  font-size: 16px;
}

.ui-dialog-titlebar-close {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  line-height: 12px;
  top: 20px;
  color: #ffffff;
}

.ui-dialog-titlebar-close::after {
  content: "×";
  font-size: 28px;
}

.ui-dialog-content {
  background-color: #ffffff;
  min-height: auto !important;
}

.no-buttons .ui-dialog-content {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.dlg-no-padding .ui-dialog-content {
  padding: 0px;
}

.ui-dialog-buttonpane {
  background: #ffffff;
  text-align: right;
  padding: 5px 10px 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.ui-dialog-buttonpane button {
  margin-left: 5px;
  outline: none;
  min-width: 70px;
}

.dialog-buttons {
  text-align: right;
  padding-top: 10px;
}
.dialog-buttons button, .dialog-buttons a {
  outline: none;
  min-width: 100px;
}

.dialog-buttons.center {
  text-align: center;
}

.dialog-buttons-flex {
  display: flex;
  justify-content: space-between;
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0.15+100;Neutral+Density */
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a6000000", endColorstr="#26000000", GradientType=0); /* IE6-9 */
}

/* dialog styles */
.dialog {
  padding: 0px 30px 30px 30px;
  display: none;
  z-index: 5;
  max-height: none !important;
}

.dialog.tabbed {
  padding: 10px 0px;
}

.dialog.tabbed .tab_panel {
  padding: 20px;
}

.dialog h3:first-child {
  margin-top: 0px;
}

.dialog h4:first-child {
  margin-top: 0px;
}

.dialog p:first-child {
  margin-top: 0px;
}

.dialog p:last-child {
  margin-bottom: 0px;
}

/* prevent textareas from being resized inside dialogs */
.dialog textarea {
  resize: none;
}

.dialog.tab_container {
  padding: 0px;
}

.dialog.tab_container div.tab_panel {
  padding: 15px 20px;
}

.dialog.tab_container div.tab_header {
  background-color: #efefef;
  padding-top: 5px;
}

/* for alert dialogs, remove marigns and paddings */
.dialog-alert {
  display: none;
  z-index: 10;
}

.dialog-alert .alert {
  margin: 0px;
  border-radius: 0px;
  border: 0px;
}

.dialog-alert .alert h3 {
  margin-top: 0px;
}

.dialog-alert .alert h4 {
  font-size: 1.2em;
}

.dialog-alert textarea {
  resize: none;
}

.alert-flashmsg h4 {
  border-bottom: 1px solid;
  background-color: #337ab7;
  padding: 10px;
  color: #fff;
  margin-top: 15px;
}

.dlg-validation {
  background: #ffffff;
}
.dlg-validation .ui-dialog-titlebar {
  padding: 8px;
  background-color: #b62116;
}
.dlg-validation .ui-dialog-titlebar .ui-dialog-title {
  font-size: 13px;
  color: #ffffff;
}
.dlg-validation > p {
  padding: 10px 0px 0px;
  margin: 0px;
}
.dlg-validation .ui-dialog-titlebar-close {
  display: none;
}
.dlg-validation h4.text-danger {
  color: #a94442;
}
.dlg-validation h4 span {
  margin-left: 10px;
}
.dlg-validation .alert + p {
  margin-left: 26px;
}
.dlg-validation .ui-dialog-buttonset {
  text-align: center;
  margin-bottom: 5px;
}

.dlg-success .ui-dialog-titlebar {
  background-color: #16b68b;
}

.dlg-about {
  padding: 0 10px;
}
.dlg-about .buttons {
  margin-top: 20px;
  text-align: center;
}
.dlg-about .buttons button.btn:first-of-type {
  float: unset;
}
.dlg-about button {
  width: 100px;
}
.dlg-about dt {
  text-decoration: underline;
}

.freshwidget-container {
  overflow: auto;
}

@media screen and (max-width: 768px) {
  .ui-widget-overlay {
    background: white;
  }
  .ui-dialog-titlebar {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 10px 40px 10px 40px;
  }
  .ui-dialog {
    position: absolute;
    top: 0 !important;
    box-shadow: none;
    border: none;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    max-height: 100%;
    background: #fff;
  }
  .ui-dialog-titlebar-close {
    color: #0f0f0f;
  }
}
/* wizard styles */
.wizard_header {
  margin-bottom: 10px;
}

.wizard_header div.tab {
  border: 1px solid #bbb;
  border-width: 1px 0px 1px 1px;
  padding: 10px;
  text-align: center;
  background-color: #E5F0F7;
  line-height: 20px;
  letter-spacing: 1px;
}

.wizard_header div.tab i.glyphicon-play {
  position: absolute;
  right: 0px;
  top: -4px;
  margin-right: -39px;
  color: #E5F0F7;
  font-size: 46px;
}

.wizard_header div.tab i.glyphicon-ok-sign {
  display: none;
  position: absolute;
  right: 7px;
  top: 50%;
  margin-top: -7px;
  color: #fff;
}

.wizard_header div.tab.completed i.glyphicon-ok-sign {
  display: inline;
}

.wizard_header div.tab.last-selected i {
  color: #E5F0F7;
}

.wizard_header div.tab.selected i {
  color: #2A94D6;
}

.wizard_header div.tab.completed i.glyphicon-play {
  color: #2A94D6;
}

.wizard_header div.tab.selected i {
  z-index: 1;
}

.wizard_header div.tab.selected {
  background-color: #2A94D6;
  color: #fff;
}

.wizard_header div.tab.completed {
  background-color: #2A94D6; /*background-color: #5cb85c;*/
  color: #fff;
}

.wizard_header div.tab.last {
  border-width: 1px;
}

.wizard_buttons {
  text-align: right;
  padding: 8px;
}

.wizard_header div.tab .num {
  font-size: 1.6em;
  float: left;
}

.wizard_header div.tab .title {
  margin-left: 10px;
}

.wizard_header div.tab.selected + .tab .num {
  padding-left: 35px;
}

.wizard_header #step-title {
  font-size: 1.5em;
  font-weight: 200;
  margin-bottom: 5px;
}

.wizard_header div.tab.last.selected > :last-child {
  font-size: 1.4em;
  float: right;
}

.btn-primary.btn-appogee {
  background-color: #1674b4;
  color: #fff;
}

.btn-primary.btn-appogee:hover {
  color: #f3836b;
}

.btn-primary.btn-appogee:hover:disabled {
  color: #fff;
}

.btn-action {
  width: 120px;
  padding: 5px;
  border-radius: 100px;
  outline: none;
  background-color: #fff;
  outline: none;
  display: inline-block;
  text-align: center;
}

.btn-action:hover {
  color: #fff;
}

.btn-action:focus {
  outline: none;
}

.btn-blue {
  border: 1px solid #125d8f;
  color: #125d8f;
}

.btn-blue:hover {
  background-color: #125d8f;
}

.btn-green {
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn-green:hover {
  background-color: #16b68b;
}

.btn-red {
  border: 1px solid #b62116;
  color: #b62116;
}

.btn-red:hover {
  background-color: #b62116;
}

/* next 4 classes developed for goals, but shout-out not button used elsewhere */
.btn-img {
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
  width: 50px;
}

.btn-text-img {
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 10px center;
}
.btn-text-img p {
  padding-left: 23px;
}

.btn-shout-out {
  background-image: url(/img/goals/shout-out.png);
}

.btn-request-check-in {
  background-image: url(/img/goals/request-check-in.png);
}

.btn-submit-check-in {
  background-image: url(/img/goals/submit-check-in.png);
}

.btn-round-icon {
  border-radius: 100%;
  width: 30px;
  height: 30px;
  border: none;
  padding: 0px;
}
.btn-round-icon.btn-success {
  color: #ffffff;
  background-color: #16b68b;
}
.btn-round-icon.btn-primary {
  color: #ffffff;
  background-color: #125d8f;
}

button:focus {
  outline: 0;
}

/** this file contains all colours to be used accross the app in order to keep things consistent
    Hex codes for colours should not be used. instead - use the colours defined in this file.
**/
.text-grey {
  color: #636363;
}

.text-light-grey {
  color: #878787;
}

.text-blue {
  color: #125d8f;
}

.text-orange {
  color: #dca91b;
}

.text-red {
  color: #b62116;
}

.text-green {
  color: #16b68b;
}

.text-package-hr-success {
  color: #299AE5;
}

.text-package-hr-essentials {
  color: #299AE5;
}

.text-package-leave {
  color: #125d8f;
}

.text-package-time {
  color: #f3836b;
}

label {
  font-weight: normal;
}

.help-block.text-danger {
  color: #a94442;
}

.help-block.text-warning {
  color: #8a6d3b;
}

.form-container .help-block.text-danger {
  color: #a94442;
}
.form-container .help-block.text-warning {
  color: #8a6d3b;
}

/* styles for drop down menus */
.dropdown-backdrop {
  position: static;
}

.dropdown-menu > li > a,
.dropdown-submenu > a {
  text-align: left;
}

.dropdown-menu > li > a.selected,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-submenu:focus > a,
.dropdown-submenu:hover > a {
  background-color: #1674b4;
  background-image: none;
  color: #ffffff;
}

.dropdown-menu > li > label {
  margin-left: 10px;
  line-height: 18px;
  margin: 5px 10px;
}

.dropdown-menu.dropdown-menu-icons a {
  padding-left: 13px;
}
.dropdown-menu.dropdown-menu-icons a i {
  width: 15px;
}
.dropdown-menu.dropdown-menu-icons img.gapps {
  width: 14px;
  margin-left: -2px;
  margin-right: 3px;
}
.dropdown-menu.dropdown-menu-icons img.o365 {
  width: 14px;
  margin-left: -2px;
  margin-right: 3px;
}

.alert {
  border: none;
  border-radius: 20px;
}

.alert-flat {
  margin: 10px -10px;
  border-radius: 0;
  border-width: 1px 0;
}

.alert-about {
  display: none;
}

.btn-primary {
  background-color: #1674b4;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:active:hover {
  background-color: #125d8f;
}

.btn-secondary {
  color: #ffffff;
  background-color: #f3836b;
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:active:hover {
  background-color: #f59783;
}

.btn-success {
  background-color: #16b68b;
}

.btn-success:hover, .btn-success:active, .btn-success:active:hover, .btn-success:focus {
  background-color: #19c99a;
}

.btn-warning {
  background-color: #dca91b;
}

.btn-warning:hover, .btn-warning:active, .btn-warning:active:hover, .btn-warning:focus {
  background-color: #e5b329;
}

.btn-danger {
  background-color: #b62116;
}

.btn-danger:hover, .btn-danger:active, .btn-danger:active:hover, .btn-danger:focus {
  background-color: #C92519;
}

.btn-info {
  background-color: #50ACE9;
}

.btn-info:hover, .btn-info:active, .btn-info:active:hover, .btn-info:focus {
  background-color: #63B5EC;
}

.btn-toolbar {
  /*
  .btn-group-sm>.btn, .btn-sm {
    padding: 7px 15px;
  }
  */
}
.btn-toolbar .btn {
  margin-left: 7px;
}

.btn.btn-gapps {
  background-image: url(/img/account/gsuite_64.png);
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: 8px center;
  padding-left: 26px !important;
}

.btn.btn-o365 {
  background-image: url(/img/account/microsoft.png);
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: 8px center;
  padding-left: 27px !important;
}

.form-group-radio div.radio:first-child {
  margin-top: 0px;
}

.form-group .controls-indented {
  margin-left: 20px;
}

.input-group-float .form-control:first-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.input-group-float .input-group-btn .btn {
  margin-left: 0px;
  border: 0px;
}

.input-group-select .input-group-btn .btn {
  margin-left: 5px;
  border-radius: 3px;
}

.alert-info {
  color: #2a6182;
  background-color: #D4E6F1;
  border-color: #aed0e4;
}
.alert-info a {
  text-decoration: underline;
}

.alert-warning {
  color: #a8890b;
  background-color: #FCF3CF;
  border-color: #f9e79f;
}

.alert-success {
  color: #268571;
  background-color: #D1F2EB;
  border-color: #a9e7da;
}

.alert-danger {
  color: #853029;
  background-color: #F2D7D5;
  border-color: #e6b2ae;
}

.soft-hide, .soft-hidden {
  display: none;
}

.table-responsive {
  border: none !important;
}

.ck-editor__editable {
  --ck-border-radius: 20px;
}

.ck-toolbar {
  --ck-border-radius: 20px;
}

.appogee-progress {
  background-color: #C3C3C3;
  box-shadow: none;
  height: 10px;
  border-radius: 0px;
}
.appogee-progress .progress-bar {
  background-color: #125d8f;
  height: 11px;
}
.appogee-progress.complete .progress-bar {
  background-color: #16b68b;
}

.w16 {
  width: 16px;
}

.w24 {
  width: 24px;
}

.w32 {
  width: 32px;
}

.w40 {
  width: 40px;
}

.w50 {
  width: 50px;
}

.w60 {
  width: 60px;
}

.w75 {
  width: 75px;
}

.w85 {
  width: 85px;
}

.w100 {
  width: 100px;
}

.w110 {
  width: 110px;
}

.w125 {
  width: 125px;
}

.w150 {
  width: 150px;
}

.w175 {
  width: 175px;
}

.w200 {
  width: 200px;
}

.w250 {
  width: 250px;
}

.w300 {
  width: 300px;
}

.w350 {
  width: 350px;
}

.w400 {
  width: 400px;
}

.w500 {
  width: 500px;
}

.w600 {
  width: 600px;
}

.w700 {
  width: 700px;
}

.wAuto {
  width: auto;
}

.w75-force {
  width: 75px !important;
}

.w100-force {
  width: 100px !important;
}

.w125-force {
  width: 100px !important;
}

.w150-force {
  width: 150px !important;
}

.w200-force {
  width: 200px !important;
}

.w400-force {
  width: 400px !important;
}

.w-min-75 {
  min-width: 75px;
}

.w-min-80 {
  min-width: 80px;
}

.w-min-100 {
  min-width: 100px;
}

.w-max-100 {
  max-width: 100px;
}

.w-max-200 {
  max-width: 200px;
}

.w-max-320 {
  max-width: 320px;
}

.w-max-400 {
  max-width: 400px;
}

.w-max-600 {
  max-width: 600px;
}

.w-max-700 {
  max-width: 700px;
}

.w-max-900 {
  max-width: 900px;
}

/* datepicker */
.ui-datepicker {
  padding: 0.2em 0.2em 0;
  display: none;
  background: #fff;
  z-index: 2001 !important;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
  font-size: 0.9em;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title { /*margin: 0px 30px;*/
  line-height: 1.8em;
  text-align: center;
  padding: 5px;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month-year {
  width: 100%;
}

.ui-datepicker select.ui-datepicker-month {
  width: 100px;
  margin-right: 2px;
}

.ui-datepicker select.ui-datepicker-year {
  width: 100px;
  margin-left: 2px;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px 5px;
}

.ui-datepicker td span, .ui-datepicker td a {
  display: block;
  padding: 0px 0.2em;
  text-align: right;
  text-decoration: none;
  padding-left: 0px;
  color: #0088CC;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

.ui-datepicker {
  padding: 5px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border: 1px solid #f4f4f4;
  border-radius: 20px;
}

.ui-datepicker .ui-datepicker-header { /*padding: .2em 20px; width: 170px;*/ }

.ui-datepicker .ui-datepicker-title {
  background: #ffffff;
}
.ui-datepicker .ui-datepicker-title select {
  background-color: #f4f4f4;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  min-width: 20px;
  border: 0;
  border: 1px solid #f4f4f4;
  line-height: inherit;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  padding-right: 25px;
  background-image: url("/img/icon-arrow-down-gray-128.png");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 10px center;
}
.ui-datepicker .ui-datepicker-title select:active, .ui-datepicker .ui-datepicker-title select:hover, .ui-datepicker .ui-datepicker-title select:focus, .ui-datepicker .ui-datepicker-title select:visited {
  outline: none;
  box-shadow: none;
}
.ui-datepicker .ui-datepicker-title select:active, .ui-datepicker .ui-datepicker-title select:hover, .ui-datepicker .ui-datepicker-title select:focus {
  border: 1px solid #dbdbdb;
}
.ui-datepicker .ui-datepicker-title select.force-white-bg {
  background-color: white;
}

.ui-datepicker .ui-datepicker-prev {
  left: 5px;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev span {
  color: #fff;
  background-color: #1674b4;
  padding: 2px 4px;
  border-radius: 4px;
}

.ui-datepicker .ui-datepicker-next {
  right: 20px;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-next span {
  color: #fff;
  background-color: #1674b4;
  padding: 2px 4px;
  border-radius: 4px;
}

/*.ui-datepicker .ui-datepicker-unselectable { background: whitesmoke; }*/
.ui-datepicker .used {
  background: whitesmoke;
  color: #ababab;
}

.ui-datepicker .ui-datepicker-current-day a {
  background-color: #f3836b;
  color: #ffffff;
  border-radius: 5px;
  padding-left: 3px;
  text-align: center;
  margin-left: -3px;
}

.ui-datepicker td.ui-datepicker-today a {
  background-color: #C3C3C3;
  color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding-left: 3px;
  text-align: center;
  margin-left: -3px;
}

.ui-datepicker td.ui-datepicker-unselectable span {
  color: #cdcdcd;
}

/* removed the forward / next buttons */
.hide_prev_next .ui-datepicker-next {
  display: none;
}

.hide_prev_next .ui-datepicker-prev {
  display: none;
}

.appogee-time-picker {
  font-size: 12px;
  height: 140px;
  line-height: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  border: 1px solid #999;
  cursor: default;
  position: absolute;
  z-index: 202;
  display: none;
}
.appogee-time-picker div {
  color: #222;
  white-space: nowrap;
  padding: 0 3em 0 1em;
}
.appogee-time-picker div:hover {
  background-color: #E7EbEF;
}

.appogee-time-picker::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0 0 0 7px;
  min-height: 28px;
  padding: 100px 0 0;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}

.appogee-time-picker::-webkit-scrollbar {
  height: 16px;
  overflow: visible;
  width: 16px;
}

.appogee-time-picker::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}

.appogee-time-picker::-webkit-scrollbar-track {
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0 0 0 7px;
}

.appogee-time-picker::-webkit-scrollbar-corner {
  background: transparent;
}

.appogee-toggle-group {
  display: flex;
  align-items: end;
  margin-bottom: 15px;
}
.appogee-toggle-group .appogee-toggle {
  margin-right: 10px;
}

.appogee-toggle {
  position: relative;
  width: 45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.appogee-toggle input[type=checkbox] {
  display: none;
}
.appogee-toggle input[type=checkbox]:checked + label {
  background-color: #125d8f;
  border-color: #125d8f;
}
.appogee-toggle input[type=checkbox]:checked + label:before {
  right: 0px;
  border-color: #125d8f;
}
.appogee-toggle label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  height: 18px;
  padding: 0px;
  line-height: 18px;
  border: 2px solid #C3C3C3;
  border-radius: 18px;
  background-color: #C3C3C3;
  transition: background-color 0.3s ease-in;
  margin: 0px;
}
.appogee-toggle label:before {
  content: "";
  display: block;
  width: 18px;
  margin: 0px;
  background: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 26px;
  border: 2px solid #C3C3C3;
  border-radius: 18px;
  transition: all 0.3s ease-in 0s;
  height: inherit;
}

/* adu dropdown menu */
.adus-menu {
  color: #777;
  min-width: 200px;
  position: absolute;
  z-index: 3;
}
.adus-menu button {
  border: 0;
  background: inherit;
  font-size: 14px;
  padding: 0;
  outline: none;
}
.adus-menu ul {
  background-color: #fff;
  list-style: none;
  padding: 0;
  display: none;
  border: 1px solid #ddd;
  margin: 0;
}
.adus-menu li {
  list-style: none;
  margin-bottom: 2px;
}
.adus-menu li a {
  color: #777;
  display: block;
}
.adus-menu li.lvl1 {
  padding-left: 10px;
}
.adus-menu li.lvl2 {
  padding-left: 30px;
}
.adus-menu li.lvl3 {
  padding-left: 50px;
}
.adus-menu li.lvl4 {
  padding-left: 70px;
}
.adus-menu li.lvl5 {
  padding-left: 90px;
}
.adus-menu li.selected {
  border-radius: 10px;
  background-color: #fff;
  color: #2A94D6;
}
.adus-menu li.selected a {
  color: #2A94D6;
}

@media (max-width: 992px) {
  .header {
    background: #f7f9fa;
  }
  .header a {
    padding: 7px 0;
  }
  .appogee-page-header {
    background-color: #fff;
    border-top: 1px solid #f1f1f1;
  }
  .customer-logo {
    float: right;
    height: 50px;
    padding: 5px;
  }
  .body-container {
    overflow: auto;
    width: 100%;
  }
}
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  max-height: 100%;
  background: #323232;
  padding: 20px;
  z-index: 100;
  overflow-x: auto;
  display: none;
  max-width: 500px;
  color: #c2c2c2;
  z-index: 999;
}
.mobile-menu a {
  color: #c2c2c2;
}
.mobile-menu header {
  margin-bottom: 30px;
}
.mobile-menu header h4 {
  float: right;
  color: #c2c2c2;
  font-size: 12px;
  text-transform: uppercase;
}
.mobile-menu header a {
  margin-top: -5px;
}
.mobile-menu header span i, .mobile-menu header p i {
  margin-left: 15px;
}
.mobile-menu header .row {
  padding: 0 10px 0 10px;
}
.mobile-menu header #logout i {
  margin-left: 10px;
}
.mobile-menu nav a.selected {
  color: #323232;
  background: #c2c2c2;
}
.mobile-menu nav a {
  border: 1px solid #c2c2c2;
  padding: 10px;
  font-size: 14px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
}
.mobile-menu nav .menu-items {
  display: none;
}
.mobile-menu nav .menu-items.selected {
  display: block;
}
.mobile-menu footer.footer {
  color: #c2c2c2;
  background-color: #323232 !important;
  bottom: 0px;
  position: fixed;
  max-width: 500px;
  border-top: 0;
  min-height: 0px;
}
.mobile-menu footer.footer a {
  color: #c2c2c2;
}
.mobile-menu footer.footer .left, .mobile-menu footer.footer .middle, .mobile-menu footer.footer .right {
  padding: 0;
}
.mobile-menu footer.footer .left {
  text-align: left;
}
.mobile-menu footer.footer .right {
  text-align: right;
  float: right;
}
.mobile-menu footer.footer .middle {
  width: 0;
  margin-left: 0;
  left: 50%;
}
.mobile-menu footer.footer .middle a {
  display: inline-block;
}

@media (max-width: 390px) {
  .mobile-menu nav a {
    font-size: 9px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .mobile-menu footer.footer.footer-mobile .container {
    width: 100%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .main-menu-container .customer-logo {
    max-width: 250px;
  }
}
@media (min-width: 1200px) {
  .main-menu-container .customer-logo {
    max-width: 300px;
  }
}
.org-selector.org-selector-right {
  text-align: right;
}

@media (max-width: 575px) {
  #orgSelector.pull-left, #orgSelector.pull-right {
    float: unset !important;
  }
}
.org-selector.inline {
  display: flex;
}
.org-selector.inline .form-container {
  margin-right: 20px;
  min-width: 180px;
}

.location-selector .filter-group {
  width: 200px;
}
.location-selector .dropdown .btn {
  background-color: #f4f4f4;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  min-width: 20px;
  border: 0;
  border: 1px solid #f4f4f4;
  line-height: inherit;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  padding-right: 25px;
  background-image: url("/img/icon-arrow-down-gray-128.png");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 10px center;
  height: 30px;
  width: 100%;
  text-align: left;
}
.location-selector .dropdown .btn:active, .location-selector .dropdown .btn:hover, .location-selector .dropdown .btn:focus, .location-selector .dropdown .btn:visited {
  outline: none;
  box-shadow: none;
}
.location-selector .dropdown .btn:active, .location-selector .dropdown .btn:hover, .location-selector .dropdown .btn:focus {
  border: 1px solid #dbdbdb;
}
.location-selector .dropdown .btn.force-white-bg {
  background-color: white;
}
.location-selector .dropdown-menu {
  width: 100%;
  margin: 0px;
  padding: 5px;
  border-radius: 20px;
  overflow-x: hidden;
}
.location-selector .dropdown-menu li a.location {
  display: flex;
  padding: -2px;
  font-size: 12px;
  color: #333333;
  white-space: normal;
}
.location-selector .dropdown-menu li a.location:hover {
  background-color: #f4f4f4;
  color: #333333;
  cursor: pointer;
}
.location-selector .dropdown-menu li .location.zone {
  padding-left: 33px;
}
.location-selector .dropdown-menu li .location.select, .location-selector .dropdown-menu li .location.all {
  padding-left: 33px;
}
.location-selector .dropdown-menu li .location.selected {
  background-color: #f4f4f4;
}
.location-selector .color-icon {
  margin-right: 5px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  display: inline-block;
}
.location-selector .form-container {
  z-index: 6;
}
.location-selector.mandatory label:after {
  content: "*";
  color: red;
  margin-top: -5px;
  margin-left: 5px;
}

.appogee-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
  min-height: 28px;
  padding: 100px 0 0;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}

.appogee-scroll::-webkit-scrollbar {
  height: 16px;
  overflow: visible;
  width: 8px;
}

.appogee-scroll::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}

.appogee-scroll::-webkit-scrollbar-track {
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0 0 0 7px;
}

.appogee-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

.avatar-container {
  text-wrap: nowrap;
}

.avatar {
  width: 35px;
  height: 35px;
  border-radius: 100%;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  background: #efefef no-repeat center;
  background-size: 35px;
}

.initials {
  background: #1674b4 !important;
  color: #fff !important;
  text-align: center;
  padding-top: 10px;
}

.avatar-20 {
  width: 20px;
  height: 20px;
  background-size: 20px !important;
}

.avatar-20.initials {
  padding-top: 5px;
  font-size: 10px;
}

.avatar-25 {
  width: 25px;
  height: 25px;
  background-size: 25px !important;
}

.avatar-25.initials {
  padding-top: 5px;
  font-size: 11px;
}

.avatar-30 {
  width: 30px;
  height: 30px;
  background-size: 30px !important;
}

.avatar-30.initials {
  padding-top: 7px;
}

.avatar-50 {
  width: 50px;
  height: 50px;
  background-size: 50px !important;
}

.avatar-50.initials {
  font-size: 16px;
  padding-top: 14px;
}

.avatar-65 {
  width: 65px;
  height: 65px;
  background-size: 65px !important;
}

.avatar-65.initials {
  font-size: 16px;
  padding-top: 14px;
}

.avatar-90 {
  width: 90px;
  height: 90px;
  background-size: 90px !important;
}

.avatar-90.initials {
  font-size: 36px;
  padding-top: 22px;
}

.avatar-120 {
  width: 120px;
  height: 120px;
  background-size: 120px;
}

.avatar-120.initials {
  font-size: 40px;
  padding-top: 34px;
}

.btn-try {
  line-height: 11px;
}

.trial-checklist {
  display: flex;
  flex-direction: column;
}
.trial-checklist * {
  display: flex;
}
.trial-checklist header {
  height: 70px;
  background-color: #1674b4;
  color: #ffffff;
  align-items: center;
  padding: 0px 10px;
  top: 0px;
  width: 100%;
  position: fixed;
  z-index: 2;
}
.trial-checklist header .progress-container {
  flex-shrink: 0;
}
.trial-checklist header .progress-container canvas {
  height: 55px !important;
  width: 55px !important;
}
.trial-checklist header .title-container {
  flex-grow: 1;
  padding: 0 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.trial-checklist header .title-container h1 {
  margin: 0;
}
.trial-checklist .section-container {
  margin-top: 70px;
  flex-direction: column;
  overflow: auto;
}
.trial-checklist .section-container section {
  padding: 10px 15px;
  flex-direction: column;
  background-color: #ffffff;
  margin: 5px;
}
.trial-checklist .section-container section:first-of-type {
  margin-top: 10px;
}
.trial-checklist .section-container section .item .check-element {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #1674b4;
  color: #1674b4;
  font-size: 1.1em;
  transition: all 0.3s ease;
  cursor: pointer;
}
.trial-checklist .section-container section .item .check-element.completed {
  background-color: #1674b4;
  color: #ffffff;
  border-radius: 50%;
  font-size: 10px;
  padding-bottom: 2px;
}
.trial-checklist .section-container section .item .title {
  flex-grow: 1;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
}
.trial-checklist .section-container section .item .toggle-extras {
  align-items: center;
  cursor: pointer;
}
.trial-checklist .section-container section .item-extras {
  color: #8d939c;
  flex-direction: column;
  padding-top: 10px;
}
.trial-checklist .section-container section .item-extras.hide {
  display: none;
}
.trial-checklist .section-container section .item-extras .step {
  flex-direction: column;
}
.trial-checklist .section-container section .item-extras .step:not(:last-child) {
  margin-bottom: 10px;
}
.trial-checklist .section-container section .item-extras .step .step-id {
  flex-shrink: 0;
  color: #1674b4;
}
.trial-checklist .section-container section .item-extras .step .step-id .material-icons {
  margin-top: -3px;
}
.trial-checklist .section-container section .item-extras .step-video {
  margin-top: 5px;
}
.trial-checklist .section-container section .item-extras .step-video iframe {
  width: 100%;
}

/*
ChartJs tooltip design
*/
.chart-js-tooltip {
  background: #424242;
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
}

#preLoader {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
#preLoader .loader,
#preLoader .loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
#preLoader .loader {
  margin: 30px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#preLoader .message {
  color: #f4f4f4;
  width: 300px;
  text-align: center;
  font-size: 1.4em;
}

.alerts-view .tab-header {
  background-color: #f4f4f4;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-bottom: 1px solid #c7d3e1;
}
.alerts-view .tab-header a {
  width: 25%;
  text-align: center;
  padding: 10px;
  color: #636363;
  border-left: 1px solid #C3C3C3;
}
.alerts-view .tab-header a .text {
  display: none;
}
.alerts-view .tab-header a .icon {
  display: block;
}
.alerts-view .tab-header a:first-child {
  border-left: 0px;
}
.alerts-view .tab-header a :hover {
  color: #333;
}
.alerts-view .tab-header a.selected {
  width: 50%;
  background-color: #fff;
  color: #125d8f;
}
.alerts-view .tab-header a.selected .text {
  display: block;
}
.alerts-view .tab-header a.selected .icon {
  display: none;
}
.alerts-view .tab-panel {
  display: none;
  padding: 5px;
}
.alerts-view .tab-panel.selected {
  display: block;
}
.alerts-view .alert-section-header {
  background: #f4f4f4;
  border: 1px solid #c7d3e1;
  border-width: 1px 0px;
  padding: 1px 10px;
  margin: 0px -5px 5px;
}
.alerts-view .alert {
  display: flex;
  padding: 10px 5px;
  margin-bottom: 0px;
  border-bottom: 1px solid #ecf2f4;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-radius: 0px;
}
.alerts-view .alert .avatar {
  width: 24px;
  height: 24px;
  background-size: 24px;
  padding-top: 5px;
  font-size: 11px;
}
.alerts-view .alert .title {
  display: flex;
  justify-content: space-between;
}
.alerts-view .alert .action-buttons {
  margin-top: 5px;
}
.alerts-view .alert .btn-action {
  width: 100%;
  height: 25px;
  line-height: 25px;
}
.alerts-view .alert .btn-action.btn-short {
  width: 49%;
}
.alerts-view .alert .icon {
  width: 35px;
  color: #878787;
}
.alerts-view .alert .icon img {
  width: 24px;
}
.alerts-view .alert .detail {
  width: 100%;
}
.alerts-view .alert .dismiss {
  color: #b62116;
  display: block;
  width: 18px;
  text-align: right;
}
.alerts-view .alert .youtube-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.alerts-view .alert .youtube-container .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.alerts-view .assistant-card {
  border: 2px solid #1674b4;
  border-radius: 5px;
  margin-bottom: 10px;
}
.alerts-view .assistant-card .card-header {
  background: #1674b4;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 5px;
}
.alerts-view .assistant-card .card-header.inactive {
  color: #b62116;
  text-decoration: line-through;
}
.alerts-view .assistant-card .card-body {
  padding: 5px;
}
.alerts-view .assistant-card .card-body img {
  max-width: 100%;
}
.alerts-view .assistant-card .card-body ul {
  margin-bottom: 0px;
}
.alerts-view .assistant-card .card-buttons {
  display: flex;
  justify-content: space-around;
  padding: 5px 5px 10px;
}
.alerts-view .announcement .date {
  display: flex;
  justify-content: space-between;
}
.alerts-view .announcement .title {
  font-size: 16px;
  margin: 3px 0px;
}
.alerts-view .announcement .notification-body {
  margin-top: 3px;
}
.alerts-view .announcement .toggle-expand {
  margin: 3px 0px;
}
.alerts-view .announcement .img-container {
  text-align: center;
}
.alerts-view .announcement .img-container img {
  max-width: 220px;
  border-radius: 3px;
}

/*
Sticky element
- used with stickyHeader jquery plugin
 */
.cloned-sticky {
  position: fixed;
  visibility: hidden;
  z-index: 4;
}

.badge {
  background: none;
  border: solid 2px;
  min-width: 50px;
  font-size: 0.8em;
  margin-bottom: 3px;
  font-weight: normal;
  /*
  &.badge-company {
    border-color: $goal-type-company;
    color: $goal-type-company;
  }
  &.badge-team {
    border-color: $goal-type-team;
    color: $goal-type-team;
  }
  &.badge-personal {
    border-color: $goal-type-personal;
    color: $goal-type-personal;
  }
  */
}
.badge.badge-lg {
  font-size: 1em;
}
.badge.badge-no-border {
  border: none;
}
.badge.badge-grey {
  border-color: #636363;
  color: #636363;
}
.badge.badge-light-grey {
  border-color: #878787;
  color: #878787;
}
.badge.badge-dolphin-grey {
  border-color: #ABABAB;
  color: #ABABAB;
}
.badge.badge-blue {
  border-color: #125d8f;
  color: #125d8f;
}
.badge.badge-red {
  border-color: #b62116;
  color: #b62116;
}
.badge.badge-green {
  border-color: #16b68b;
  color: #16b68b;
}
.badge.badge-orange {
  border-color: #dca91b;
  color: #dca91b;
}
.badge.badge-salmon {
  border-color: #f3836b;
  color: #f3836b;
}

.badge.badge-round {
  min-width: 30px;
  height: 30px;
  border-radius: 100%;
  padding: 0;
  border: 1px solid;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
}

a.badge-grey:hover {
  background-color: #636363;
  color: #fff;
}

a.badge-grey:focus {
  border-color: #636363;
  outline: none;
}

a.badge-blue:hover {
  background-color: #125d8f;
  color: #fff;
}

a.badge-blue:focus {
  border-color: #125d8f;
  outline: none;
}

a.badge-red:hover {
  background-color: #b62116;
  color: #fff;
}

a.badge-red:focus {
  border-color: #b62116;
  outline: none;
}

a.badge-green:hover {
  background-color: #16b68b;
  color: #fff;
}

a.badge-green:focus {
  border-color: #16b68b;
  outline: none;
}

a.badge-orange:hover {
  background-color: #dca91b;
  color: #fff;
}

a.badge-orange:focus {
  border-color: #dca91b;
  outline: none;
}

.badge.status-badge {
  border-radius: 15px;
  padding-top: 5px;
  min-width: 75px;
  font-size: 0.9em;
  color: white;
}
.badge.status-badge.badge-red {
  background-color: #b62116;
}
.badge.status-badge.badge-orange {
  background-color: #dca91b;
}
.badge.status-badge.badge-green {
  background-color: #16b68b;
}

.badge-danger-inverse {
  font-size: inherit;
  background: #853029;
  /* color: white; */
  padding: 9px;
  text-align: center;
  width: 100%;
  margin-top: 10px;
}

.dlg-sexy .ui-dialog-titlebar {
  display: none;
}
.dlg-sexy .dialog {
  padding: 0px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.dlg-sexy .ui-dialog-content .head {
  min-height: 155px;
  background-image: url("/img/core/dlg-sexy-bg.png");
  color: #ffffff;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.dlg-sexy .ui-dialog-content .head .dlg-icon {
  padding-top: 20px;
}
.dlg-sexy .ui-dialog-content .head .title {
  font-size: 30px;
  text-align: center;
  padding: 10px 0 3px 0;
}
.dlg-sexy .ui-dialog-content .head .sub-title {
  font-size: 14px;
  text-align: center;
  padding: 3px 0 15px 0;
}
.dlg-sexy .ui-dialog-content .head .sub-title span {
  display: block;
  font-size: 12px;
  text-align: center;
  font-style: italic;
}
.dlg-sexy .ui-dialog-content .head.head-sm {
  min-height: 120px;
  text-align: center;
}
.dlg-sexy .ui-dialog-content .body {
  padding: 10px;
}
.dlg-sexy .ui-dialog-content .dialog-buttons {
  margin-bottom: 5px;
}

.dlg-shout-out .employee-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-left: 60px;
}
.dlg-shout-out .selected-employee {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  min-width: 200px;
  height: 70px;
}
.dlg-shout-out .selected-employee .remove {
  cursor: pointer;
}
.dlg-shout-out .selected-employee .remove i {
  color: #C92519;
  margin-left: 5px;
}
.dlg-shout-out .selected-employee .remove i:hover {
  color: #b62116;
}
.dlg-shout-out .select-employee {
  margin-top: 5px;
  padding-bottom: 5px;
  display: flex;
  justify-content: center;
}
.dlg-shout-out .select-employee .has-feedback {
  position: relative;
}
.dlg-shout-out .select-employee .has-feedback input {
  width: 300px;
  padding-right: 20px;
  padding-left: 30px;
}
.dlg-shout-out .select-employee .has-feedback i {
  position: absolute;
  padding: 9px;
  font-size: 15px;
  color: #636363;
}

@media screen and (max-width: 768px) {
  .dlg-sexy .ui-dialog-content .head {
    border-radius: 0;
  }
}
.notifier {
  display: none;
  position: absolute;
  text-align: center;
  padding: 3px 20px;
  background-color: #f4f4f4;
  color: #2a6182;
  border: 1px solid #aed0e4;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: 20px center;
  margin-top: -5px;
  z-index: 3;
  font-size: 12px;
}

.notifier.ajax {
  background-image: url("/img/spinners/ajax-loader.gif");
  padding-left: 65px;
  border-color: #C3C3C3;
  color: #636363;
}

.notifier.danger {
  background-color: #F2D7D5;
  color: #853029;
  border-color: #e6b2ae;
}

.notifier.success {
  background-color: #D1F2EB;
  color: #268571;
  border-color: #a9e7da;
}

.mobile-app .notifier {
  margin-top: -16px;
  max-width: 100%;
  background-color: #1674b4;
  color: #f4f4f4;
  border: none;
  border-radius: 0px;
  font-size: 9px;
  position: relative !important;
  left: 0px !important;
  padding: 3px 8px;
  font-style: italic;
}
.mobile-app .notifier.ajax {
  padding-left: initial;
  background-image: none;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-even {
  display: flex;
  justify-content: space-evenly;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-left {
  display: flex;
  justify-content: flex-start;
}

.flex-gap {
  gap: 10px;
}

.flex-right {
  display: flex;
  justify-content: flex-end;
}

.flex-align-center {
  align-items: center;
}

.flex-align-end {
  align-items: end;
}

.date-range-container {
  display: flex;
}
.date-range-container input, .date-range-container select {
  width: 150px;
}
.date-range-container .form-container + i {
  margin-left: 10px;
  color: #C3C3C3;
}
.date-range-container input {
  margin: 0px 5px;
}
.date-range-container > div {
  display: flex;
  align-items: baseline;
  margin-left: 15px;
}

.color-icon.color-icon-15 {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  display: inline-block;
}
.color-icon.color-icon-25 {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  display: inline-block;
}

.color-icon-wrapper {
  display: flex;
  align-items: center;
}
.color-icon-wrapper > div:first-child {
  margin-right: 10px;
}

/* this is a global css to overwrite the original appearance of the native html color selector */
input[type=color] {
  -webkit-appearance: none;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

input[type=color]::-webkit-color-swatch-wrapper {
  padding: 1;
}

input[type=color]::-webkit-color-swatch {
  border: none;
}

.progress-header {
  padding: 10px 0px;
}
.progress-header .steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.progress-header .steps .step {
  display: flex;
  align-items: center;
  flex-basis: 100%;
}
.progress-header .steps .step .number {
  border: 2px solid #ffffff;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  line-height: 27px;
  text-align: center;
  background-color: #f4f4f4;
  color: #636363;
}
.progress-header .steps .step .number i {
  font-size: 11px;
}
.progress-header .steps .step .name {
  padding: 0px 5px;
  width: max-content;
}
.progress-header .steps .step .stepper-progress-bar {
  flex: 1;
}
.progress-header .steps .step .stepper-progress-bar .progress {
  margin-bottom: 0px;
  height: 2px;
  background-color: #f4f4f4;
}
.progress-header .steps .step .stepper-progress-bar .progress .progress-bar {
  width: 0%;
  background-color: #16b68b;
}
.progress-header .steps .step .stepper-progress-bar .progress .progress-bar.completed {
  width: 100%;
}
.progress-header .steps .last-step {
  flex-basis: auto;
}
.progress-header .steps .step.current .number {
  background-color: #16b68b;
  color: #ffffff;
}
.progress-header .steps .step.previous .number {
  background-color: #16b68b;
  color: #ffffff;
}
.progress-header .steps .step.next .name {
  color: #878787;
  width: max-content;
}

@media screen and (max-width: 768px) {
  .progress-header .steps {
    display: block;
  }
  .progress-header .steps .step .stepper-progress-bar {
    display: none;
  }
}
/** this file contains all colours to be used accross the app in order to keep things consistent
    Hex codes for colours should not be used. instead - use the colours defined in this file.
**/
.text-grey {
  color: #636363;
}

.text-light-grey {
  color: #878787;
}

.text-blue {
  color: #125d8f;
}

.text-orange {
  color: #dca91b;
}

.text-red {
  color: #b62116;
}

.text-green {
  color: #16b68b;
}

.text-package-hr-success {
  color: #299AE5;
}

.text-package-hr-essentials {
  color: #299AE5;
}

.text-package-leave {
  color: #125d8f;
}

.text-package-time {
  color: #f3836b;
}

.contents-page {
  display: flex;
  flex-wrap: wrap;
  gap: 0 50px;
  max-width: 1200px;
}
.contents-page > a, .contents-page > .tile {
  display: flex;
  width: 270px;
  padding: 10px;
  border-radius: 10px;
  color: inherit;
}
.contents-page > a > div:first-child, .contents-page > .tile > div:first-child {
  min-width: 30px;
}
.contents-page > a > div:first-child i, .contents-page > .tile > div:first-child i {
  font-size: 22px;
}
.contents-page > a > div:last-child h4, .contents-page > .tile > div:last-child h4 {
  margin-top: 2px;
}
.contents-page > a > div:last-child p, .contents-page > .tile > div:last-child p {
  color: #636363;
  font-size: 0.9em;
}
.contents-page > a:hover {
  background-color: #f4f4f4;
}
.contents-page > a:hover h4, .contents-page > a:hover i {
  color: #1674b4;
}

.contents-page.integrations {
  max-width: 1300px;
}
.contents-page.integrations > a, .contents-page.integrations > .tile {
  width: 400px;
  padding: 20px;
}
.contents-page.integrations > a > div:first-child, .contents-page.integrations > .tile > div:first-child {
  min-width: 75px;
}
.contents-page.integrations > a > div:first-child img, .contents-page.integrations > .tile > div:first-child img {
  width: 64px;
}
.contents-page.integrations > a > div:first-child i, .contents-page.integrations > .tile > div:first-child i {
  font-size: 48px;
}

@media print {
  .no-print, .no-print * {
    display: none !important;
  }
}
/** this file contains generic styles to be used accross the app in order to keep things consistent
**/
/** this file contains all colours to be used accross the app in order to keep things consistent
    Hex codes for colours should not be used. instead - use the colours defined in this file.
**/
.text-grey {
  color: #636363;
}

.text-light-grey {
  color: #878787;
}

.text-blue {
  color: #125d8f;
}

.text-orange {
  color: #dca91b;
}

.text-red {
  color: #b62116;
}

.text-green {
  color: #16b68b;
}

.text-package-hr-success {
  color: #299AE5;
}

.text-package-hr-essentials {
  color: #299AE5;
}

.text-package-leave {
  color: #125d8f;
}

.text-package-time {
  color: #f3836b;
}

.mulit-team-emp-selector .team-emp-container {
  display: flex;
  flex-wrap: wrap;
}
.mulit-team-emp-selector .team-emp-container .selected {
  display: flex;
  align-items: center;
  padding: 2px 6px;
  margin: 3px 3px 3px 0px;
  border: 1px solid #ABABAB;
  border-radius: 20px;
  font-size: 0.8em;
}
.mulit-team-emp-selector .team-emp-container .selected .name {
  flex: 1;
}
.mulit-team-emp-selector .team-emp-container .selected .remove {
  cursor: pointer;
  color: #636363;
  padding-left: 10px;
}
.mulit-team-emp-selector .team-emp-container .selected .remove:hover {
  color: #b62116;
}
.mulit-team-emp-selector select {
  marign: 0px;
}

.multi-team-selector-view table > tbody > tr > td,
.multi-team-selector-view table > tfoot > tr > td,
.multi-team-selector-view table > thead > tr > th {
  vertical-align: middle;
}
.multi-team-selector-view .org-selector {
  margin: 0px;
}

.select-month-view .dropdown-menu {
  height: 300px;
  overflow: auto;
}

a {
  color: #125d8f;
}

a:hover {
  color: #156da7;
}

p.leading {
  font-size: 1.2em;
}

a:hover, a:focus, a:visited, a:active {
  text-decoration: none;
}

/* font headings */
h1 {
  font-size: 22px;
  font-weight: normal;
}

h1.large {
  font-size: 44px;
}

h2 {
  font-size: 20px;
  font-weight: normal;
}

h3 {
  font-size: 18px;
  font-weight: normal;
}

h4 {
  font-size: 16px;
  font-weight: normal;
}

h5 {
  font-size: 14px;
  font-weight: normal;
}

h6 {
  font-size: 13px;
  font-weight: bold;
}

p.leading {
  font-size: 1.2em;
}

.font-italic {
  font-style: italic;
}

.appogee-tooltip-container {
  z-index: 3;
  position: absolute;
  background: #424242;
  color: white;
  padding: 5px 10px;
  max-width: 300px;
  display: none;
  border-radius: 3px;
}

.appogee-tooltip-container.success {
  color: #268571;
  background-color: #D1F2EB;
  border: 1px solid #a9e7da;
}

.appogee-tooltip-container.warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border: 1px solid #faebcc;
}

.appogee-tooltip-container.danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.load_hide {
  display: none;
}

.working {
  background-image: url("/img/spinners/working_16.gif");
  background-repeat: no-repeat;
  background-position: 0 center;
  padding-left: 25px;
}

div.working {
  min-height: 16px;
  min-width: 16px;
}

.btn-delete:hover {
  color: #b62116;
}

/* userpicker */
.user_picker {
  position: absolute;
  display: none;
  background: #FFFFFF;
  border: 1px solid #C3C3C3;
  max-height: 150px;
  width: 350px;
  overflow: auto;
  z-index: 2001;
  border-radius: 20px;
}
.user_picker div {
  padding: 5px 10px;
  cursor: pointer;
}
.user_picker div.selected {
  background: #EFEFEF;
}

input[type=text].form-control.loading {
  background-image: url("/img/spinners/working_16.gif");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.dropdown-menu-sm .divider {
  margin: 5px 0;
}
.dropdown-menu-sm li a {
  font-size: 12px;
}

input.dummy {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.red {
  color: #a94442;
}

.jumbo {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 60px;
}

.btn-signin, .btn-signup {
  background-size: 23px;
  background-repeat: no-repeat;
  background-position: 10px;
  display: block;
  width: 100%;
}

.img-gsuit {
  background-image: url("/img/account/gsuite_64.png");
}

.img-o365 {
  background-image: url("/img/account/microsoft.png");
}

.img-xero {
  background-image: url("/img/xero/xero-logo-hires-RGB.png");
  background-size: 28px;
  background-position: 7px;
}

button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .desktop-only {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .mobile-only {
    display: none !important;
  }
}
.no-gutter {
  padding-left: 0;
  padding-right: 0;
}

/* this class allows to hide the native appearance of an element
   e.g. a select will look like a span it won't have border or chevrons
   to indicate it's nature but it will still be clickable and the behavior
   will still be the same
*/
.hide-appearance {
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  background: none;
}

.hide-appearance:active,
.hide-appearance:hover,
.hide-appearance:focus,
.hide-appearance:visited {
  outline: none;
}

/* Helper classes to display groups of filters in a responsive way.
 * This means that each group will be displayed in line while the screen is > 576px
 * with appropriate spacing withing each group, and one below the other hiding any label
 * when screen is < 576px
 */
.filters {
  margin-bottom: 10px;
}

@media (max-width: 575px) {
  .filters .filter-group label {
    display: none;
  }
  .filters .filter-group select, .filters .filter-group input[type=text] {
    width: 100%;
    margin-bottom: 10px;
  }
}
@media (min-width: 576px) {
  .filters .filter-group {
    display: inline-block;
    margin-right: 10px;
  }
  .filters .filter-group select, .filters .filter-group input[type=text] {
    width: 200px;
  }
  .filters .filter-group.parent-group {
    margin-right: 0px;
  }
}
.audit-header {
  padding: 5px 0px 0px 5px;
}

#launcher-frame {
  display: none;
}

input[type=radio]:focus {
  outline: none;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-40 {
  margin-left: 40px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-30 {
  margin-right: 30px;
}

.mr-40 {
  margin-right: 40px;
}

/* scss code for the jquery plugin maxLength.js */ /** this file contains generic styles to be used accross the app in order to keep things consistent
**/
/** this file contains all colours to be used accross the app in order to keep things consistent
    Hex codes for colours should not be used. instead - use the colours defined in this file.
**/
.text-grey {
  color: #636363;
}

.text-light-grey {
  color: #878787;
}

.text-blue {
  color: #125d8f;
}

.text-orange {
  color: #dca91b;
}

.text-red {
  color: #b62116;
}

.text-green {
  color: #16b68b;
}

.text-package-hr-success {
  color: #299AE5;
}

.text-package-hr-essentials {
  color: #299AE5;
}

.text-package-leave {
  color: #125d8f;
}

.text-package-time {
  color: #f3836b;
}

.text-counter {
  color: #ABABAB;
  padding: 3px 0px;
  text-align: right;
  font-style: italic;
}

/** this file contains generic styles to be used accross the app in order to keep things consistent
**/
/** this file contains all colours to be used accross the app in order to keep things consistent
    Hex codes for colours should not be used. instead - use the colours defined in this file.
**/
.text-grey {
  color: #636363;
}

.text-light-grey {
  color: #878787;
}

.text-blue {
  color: #125d8f;
}

.text-orange {
  color: #dca91b;
}

.text-red {
  color: #b62116;
}

.text-green {
  color: #16b68b;
}

.text-package-hr-success {
  color: #299AE5;
}

.text-package-hr-essentials {
  color: #299AE5;
}

.text-package-leave {
  color: #125d8f;
}

.text-package-time {
  color: #f3836b;
}

.select2-container--default .select2-selection--multiple {
  border-color: #ccc !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: none !important;
  background-color: #eee !important;
  font-size: 12px !important;
  color: #555 !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #ccc !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #125d8f !important;
}

/* Variables*/
.btn, .btn-raised, .btn-icon, .btn-icon-raised, .btn-basic, .btn-icon-basic, .btn-stroked, .btn-icon-stroked, .btn-group .btn:not(.btn-icon) {
  border: none;
  outline: none;
  min-width: inherit;
  max-width: inherit;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: none;
  vertical-align: middle;
  outline: none;
  transition: border-color 0.4s, background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.btn:active, .btn-raised:active, .btn-icon:active, .btn-icon-raised:active, .btn-basic:active, .btn-icon-basic:active, .btn-stroked:active, .btn-icon-stroked:active, .btn-group .btn:active:not(.btn-icon), .btn:hover, .btn-raised:hover, .btn-icon:hover, .btn-icon-raised:hover, .btn-basic:hover, .btn-icon-basic:hover, .btn-stroked:hover, .btn-icon-stroked:hover, .btn-group .btn:hover:not(.btn-icon), .btn:focus, .btn-raised:focus, .btn-icon:focus, .btn-icon-raised:focus, .btn-basic:focus, .btn-icon-basic:focus, .btn-stroked:focus, .btn-icon-stroked:focus, .btn-group .btn:focus:not(.btn-icon) {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
}

.btn, .btn-raised, .btn-basic, .btn-stroked {
  border-radius: 20px;
  padding: 0 20px;
  min-width: 100px;
  height: 40px;
  font-size: 13px;
  line-height: 40px;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  letter-spacing: 0.3px;
}

.btn-icon, .btn-icon-raised, .btn-icon-basic, .btn-icon-stroked {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  min-width: 40px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-raised {
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.26);
}

.btn.btn-default, .btn-raised.btn-default {
  border-color: #7f8c8d;
  color: #7f8c8d;
  border: 1px solid #7f8c8d;
  border-color: #7f8c8d;
  background-color: transparent;
}
.btn.btn-default:hover, .btn.btn-default:active, .btn-raised.btn-default:hover, .btn-raised.btn-default:active {
  background-color: #dde1e1;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn.btn-primary, .btn-raised.btn-primary {
  background-color: #1674b4;
  border: 1px solid #1674b4;
  color: #ffffff;
}
.btn.btn-primary:hover, .btn.btn-primary:active, .btn-raised.btn-primary:hover, .btn-raised.btn-primary:active {
  background-color: #ffffff;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn.btn-secondary, .btn-raised.btn-secondary {
  background-color: #f3836b;
  border: 1px solid #f3836b;
  color: #ffffff;
}
.btn.btn-secondary:hover, .btn.btn-secondary:active, .btn-raised.btn-secondary:hover, .btn-raised.btn-secondary:active {
  background-color: #ffffff;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn.btn-danger, .btn-raised.btn-danger {
  background-color: #b62116;
  border: 1px solid #b62116;
  color: #ffffff;
}
.btn.btn-danger:hover, .btn.btn-danger:active, .btn-raised.btn-danger:hover, .btn-raised.btn-danger:active {
  background-color: #ffffff;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn.btn-warning, .btn-raised.btn-warning {
  background-color: #dca91b;
  border: 1px solid #dca91b;
  color: #ffffff;
}
.btn.btn-warning:hover, .btn.btn-warning:active, .btn-raised.btn-warning:hover, .btn-raised.btn-warning:active {
  background-color: #ffffff;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn.btn-success, .btn-raised.btn-success {
  background-color: #16b68b;
  border: 1px solid #16b68b;
  color: #ffffff;
}
.btn.btn-success:hover, .btn.btn-success:active, .btn-raised.btn-success:hover, .btn-raised.btn-success:active {
  background-color: #ffffff;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn.btn-xl, .btn-raised.btn-xl {
  padding: 0 35px;
  min-width: 180px;
  border-radius: 90px;
  font-size: 15px;
  height: 50px;
  line-height: 50px;
}

.btn.btn-sm, .btn-raised.btn-sm {
  padding: 0 15px;
  min-width: 55px;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
}

.btn-icon-raised {
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.26);
}

.btn-icon.btn-default, .btn-icon-raised.btn-default {
  background-color: #7f8c8d;
  border: 1px solid #7f8c8d;
  color: #ffffff;
}
.btn-icon.btn-default:hover, .btn-icon.btn-default:active, .btn-icon-raised.btn-default:hover, .btn-icon-raised.btn-default:active {
  background-color: #ffffff;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn-icon.btn-primary, .btn-icon-raised.btn-primary {
  background-color: #1674b4;
  border: 1px solid #1674b4;
  color: #ffffff;
}
.btn-icon.btn-primary:hover, .btn-icon.btn-primary:active, .btn-icon-raised.btn-primary:hover, .btn-icon-raised.btn-primary:active {
  background-color: #ffffff;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn-icon.btn-secondary, .btn-icon-raised.btn-secondary {
  background-color: #f3836b;
  border: 1px solid #f3836b;
  color: #ffffff;
}
.btn-icon.btn-secondary:hover, .btn-icon.btn-secondary:active, .btn-icon-raised.btn-secondary:hover, .btn-icon-raised.btn-secondary:active {
  background-color: #ffffff;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn-icon.btn-danger, .btn-icon-raised.btn-danger {
  background-color: #b62116;
  border: 1px solid #b62116;
  color: #ffffff;
}
.btn-icon.btn-danger:hover, .btn-icon.btn-danger:active, .btn-icon-raised.btn-danger:hover, .btn-icon-raised.btn-danger:active {
  background-color: #ffffff;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn-icon.btn-warning, .btn-icon-raised.btn-warning {
  background-color: #dca91b;
  border: 1px solid #dca91b;
  color: #ffffff;
}
.btn-icon.btn-warning:hover, .btn-icon.btn-warning:active, .btn-icon-raised.btn-warning:hover, .btn-icon-raised.btn-warning:active {
  background-color: #ffffff;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn-icon.btn-success, .btn-icon-raised.btn-success {
  background-color: #16b68b;
  border: 1px solid #16b68b;
  color: #ffffff;
}
.btn-icon.btn-success:hover, .btn-icon.btn-success:active, .btn-icon-raised.btn-success:hover, .btn-icon-raised.btn-success:active {
  background-color: #ffffff;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn-icon.btn-sm, .btn-icon-raised.btn-sm {
  font-size: 13px;
  height: 30px;
  width: 30px;
  min-width: 30px;
  line-height: 30px;
}

/* btn basic */
.btn-basic.btn-default {
  border: 1px solid transparent;
  color: #7f8c8d;
  background: transparent;
}
.btn-basic.btn-default:hover, .btn-basic.btn-default:active {
  background: transparent;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn-basic.btn-primary {
  border: 1px solid transparent;
  color: #1674b4;
  background: transparent;
}
.btn-basic.btn-primary:hover, .btn-basic.btn-primary:active {
  background: transparent;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn-basic.btn-secondary {
  border: 1px solid transparent;
  color: #f3836b;
  background: transparent;
}
.btn-basic.btn-secondary:hover, .btn-basic.btn-secondary:active {
  background: transparent;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn-basic.btn-danger {
  border: 1px solid transparent;
  color: #b62116;
  background: transparent;
}
.btn-basic.btn-danger:hover, .btn-basic.btn-danger:active {
  background: transparent;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn-basic.btn-warning {
  border: 1px solid transparent;
  color: #dca91b;
  background: transparent;
}
.btn-basic.btn-warning:hover, .btn-basic.btn-warning:active {
  background: transparent;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn-basic.btn-success {
  border: 1px solid transparent;
  color: #16b68b;
  background: transparent;
}
.btn-basic.btn-success:hover, .btn-basic.btn-success:active {
  background: transparent;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn-basic.btn-xl {
  padding: 0 35px;
  min-width: 180px;
  border-radius: 90px;
  font-size: 15px;
  height: 50px;
  line-height: 50px;
}

.btn-basic.btn-sm {
  padding: 0 15px;
  min-width: 55px;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
}

/* btn icon basic */
.btn-icon-basic.btn-default {
  border: 1px solid transparent;
  color: #7f8c8d;
  background: transparent;
}
.btn-icon-basic.btn-default:hover, .btn-icon-basic.btn-default:active {
  background: transparent;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn-icon-basic.btn-primary {
  border: 1px solid transparent;
  color: #1674b4;
  background: transparent;
}
.btn-icon-basic.btn-primary:hover, .btn-icon-basic.btn-primary:active {
  background: transparent;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn-icon-basic.btn-secondary {
  border: 1px solid transparent;
  color: #f3836b;
  background: transparent;
}
.btn-icon-basic.btn-secondary:hover, .btn-icon-basic.btn-secondary:active {
  background: transparent;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn-icon-basic.btn-danger {
  border: 1px solid transparent;
  color: #b62116;
  background: transparent;
}
.btn-icon-basic.btn-danger:hover, .btn-icon-basic.btn-danger:active {
  background: transparent;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn-icon-basic.btn-warning {
  border: 1px solid transparent;
  color: #dca91b;
  background: transparent;
}
.btn-icon-basic.btn-warning:hover, .btn-icon-basic.btn-warning:active {
  background: transparent;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn-icon-basic.btn-success {
  border: 1px solid transparent;
  color: #16b68b;
  background: transparent;
}
.btn-icon-basic.btn-success:hover, .btn-icon-basic.btn-success:active {
  background: transparent;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn-icon-basic.btn-sm {
  font-size: 13px;
  height: 30px;
  width: 30px;
  min-width: 30px;
  line-height: 30px;
}

.btn-stroked {
  border-width: 1px;
  border-style: solid;
  background-color: #ffffff;
}

.btn-stroked.btn-default {
  border-color: #7f8c8d;
  color: #7f8c8d;
  border: 1px solid #7f8c8d;
  border-color: #7f8c8d;
  background-color: transparent;
}
.btn-stroked.btn-default:hover, .btn-stroked.btn-default:active {
  background-color: #dde1e1;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn-stroked.btn-primary {
  border-color: #1674b4;
  color: #1674b4;
  border: 1px solid #1674b4;
  border-color: #1674b4;
  background-color: transparent;
}
.btn-stroked.btn-primary:hover, .btn-stroked.btn-primary:active {
  background-color: #d0e8f9;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn-stroked.btn-secondary {
  border-color: #f3836b;
  color: #f3836b;
  border: 1px solid #f3836b;
  border-color: #f3836b;
  background-color: transparent;
}
.btn-stroked.btn-secondary:hover, .btn-stroked.btn-secondary:active {
  background-color: #fde6e1;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn-stroked.btn-danger {
  border-color: #b62116;
  color: #b62116;
  border: 1px solid #b62116;
  border-color: #b62116;
  background-color: transparent;
}
.btn-stroked.btn-danger:hover, .btn-stroked.btn-danger:active {
  background-color: #fad4d2;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn-stroked.btn-warning {
  border-color: #dca91b;
  color: #dca91b;
  border: 1px solid #dca91b;
  border-color: #dca91b;
  background-color: transparent;
}
.btn-stroked.btn-warning:hover, .btn-stroked.btn-warning:active {
  background-color: #f9ecca;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn-stroked.btn-success {
  border-color: #16b68b;
  color: #16b68b;
  border: 1px solid #16b68b;
  border-color: #16b68b;
  background-color: transparent;
}
.btn-stroked.btn-success:hover, .btn-stroked.btn-success:active {
  background-color: #d2faef;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn-stroked.btn-xl {
  padding: 0 35px;
  min-width: 180px;
  border-radius: 90px;
  font-size: 15px;
  height: 50px;
  line-height: 50px;
}

.btn-stroked.btn-sm {
  padding: 0 15px;
  min-width: 55px;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
}

/* btn icon stroked */
.btn-icon-stroked {
  border-width: 1px;
  border-style: solid;
  background-color: #ffffff;
}

.btn-icon-stroked.btn-default {
  border-color: #7f8c8d;
  color: #7f8c8d;
  border: 1px solid #7f8c8d;
  border-color: #7f8c8d;
  background-color: transparent;
}
.btn-icon-stroked.btn-default:hover, .btn-icon-stroked.btn-default:active {
  background-color: #dde1e1;
  border: 1px solid #7f8c8d;
  color: #7f8c8d;
}

.btn-icon-stroked.btn-primary {
  border-color: #1674b4;
  color: #1674b4;
  border: 1px solid #1674b4;
  border-color: #1674b4;
  background-color: transparent;
}
.btn-icon-stroked.btn-primary:hover, .btn-icon-stroked.btn-primary:active {
  background-color: #d0e8f9;
  border: 1px solid #1674b4;
  color: #1674b4;
}

.btn-icon-stroked.btn-secondary {
  border-color: #f3836b;
  color: #f3836b;
  border: 1px solid #f3836b;
  border-color: #f3836b;
  background-color: transparent;
}
.btn-icon-stroked.btn-secondary:hover, .btn-icon-stroked.btn-secondary:active {
  background-color: #fde6e1;
  border: 1px solid #f3836b;
  color: #f3836b;
}

.btn-icon-stroked.btn-danger {
  border-color: #b62116;
  color: #b62116;
  border: 1px solid #b62116;
  border-color: #b62116;
  background-color: transparent;
}
.btn-icon-stroked.btn-danger:hover, .btn-icon-stroked.btn-danger:active {
  background-color: #fad4d2;
  border: 1px solid #b62116;
  color: #b62116;
}

.btn-icon-stroked.btn-warning {
  border-color: #dca91b;
  color: #dca91b;
  border: 1px solid #dca91b;
  border-color: #dca91b;
  background-color: transparent;
}
.btn-icon-stroked.btn-warning:hover, .btn-icon-stroked.btn-warning:active {
  background-color: #f9ecca;
  border: 1px solid #dca91b;
  color: #dca91b;
}

.btn-icon-stroked.btn-success {
  border-color: #16b68b;
  color: #16b68b;
  border: 1px solid #16b68b;
  border-color: #16b68b;
  background-color: transparent;
}
.btn-icon-stroked.btn-success:hover, .btn-icon-stroked.btn-success:active {
  background-color: #d2faef;
  border: 1px solid #16b68b;
  color: #16b68b;
}

.btn-icon-stroked.btn-grey {
  border-color: #636363;
  color: #636363;
  border: 1px solid #636363;
  border-color: #636363;
  background-color: transparent;
}
.btn-icon-stroked.btn-grey:hover, .btn-icon-stroked.btn-grey:active {
  background-color: #e3e3e3;
  border: 1px solid #636363;
  color: #636363;
}

.btn-icon-stroked.btn-sm {
  font-size: 13px;
  height: 30px;
  width: 30px;
  min-width: 30px;
  line-height: 30px;
}

/* Disabled */
.btn[disabled],
.btn-raised[disabled],
.btn-stroked[disabled],
.btn-basic[disabled],
.btn-icon[disabled],
.btn-icon-raised[disabled],
.btn-icon-stroked[disabled],
.btn-icon-basic[disabled],
.btn.disabled,
.btn-raised.disabled,
.btn-stroked.disabled,
.btn-basic.disabled,
.btn-icon.disabled,
.btn-icon-raised.disabled,
.btn-icon-stroked.disabled,
.btn-icon-basic.disabled {
  background-color: #C3C3C3;
  color: #636363;
  border: none;
}
.btn[disabled]:hover, .btn[disabled]:active,
.btn-raised[disabled]:hover,
.btn-raised[disabled]:active,
.btn-stroked[disabled]:hover,
.btn-stroked[disabled]:active,
.btn-basic[disabled]:hover,
.btn-basic[disabled]:active,
.btn-icon[disabled]:hover,
.btn-icon[disabled]:active,
.btn-icon-raised[disabled]:hover,
.btn-icon-raised[disabled]:active,
.btn-icon-stroked[disabled]:hover,
.btn-icon-stroked[disabled]:active,
.btn-icon-basic[disabled]:hover,
.btn-icon-basic[disabled]:active,
.btn.disabled:hover,
.btn.disabled:active,
.btn-raised.disabled:hover,
.btn-raised.disabled:active,
.btn-stroked.disabled:hover,
.btn-stroked.disabled:active,
.btn-basic.disabled:hover,
.btn-basic.disabled:active,
.btn-icon.disabled:hover,
.btn-icon.disabled:active,
.btn-icon-raised.disabled:hover,
.btn-icon-raised.disabled:active,
.btn-icon-stroked.disabled:hover,
.btn-icon-stroked.disabled:active,
.btn-icon-basic.disabled:hover,
.btn-icon-basic.disabled:active {
  background-color: #C3C3C3;
  color: #636363;
  border: none;
  pointer-events: none;
}

/* Currently the button groups are not widly used in the app there for this file only contains basic option
  - the design is relay on bootstrap .btn-group and tweeks it with our colors
*/
.btn-group .btn:not(.btn-icon) {
  background-color: #ffffff;
  color: #C3C3C3;
}
.btn-group .btn:not(.btn-icon):active, .btn-group .btn:not(.btn-icon).active {
  outline: none;
  outline-style: none;
}
.btn-group .btn:not(.btn-icon) + .btn {
  margin-left: 0px;
}
.btn-group .btn:not(.btn-icon).btn-default {
  color: #878787;
  border: 1px solid #C3C3C3;
}
.btn-group .btn:not(.btn-icon).btn-default.active, .btn-group .btn:not(.btn-icon).btn-default:active {
  background-color: #C3C3C3;
  color: #ffffff;
}
.btn-group .btn:not(.btn-icon).btn-primary {
  color: #1674b4;
  border: 1px solid #1674b4;
}
.btn-group .btn:not(.btn-icon).btn-primary.active, .btn-group .btn:not(.btn-icon).btn-primary:active {
  background-color: #1674b4;
  color: #ffffff;
}
.btn-group .btn:not(.btn-icon).btn-danger {
  color: #b62116;
  border: 1px solid #b62116;
}
.btn-group .btn:not(.btn-icon).btn-danger.active, .btn-group .btn:not(.btn-icon).btn-danger:active {
  background-color: #b62116;
  color: #ffffff;
}
.btn-group .btn:not(.btn-icon).btn-success {
  color: #16b68b;
  border: 1px solid #16b68b;
}
.btn-group .btn:not(.btn-icon).btn-success.active, .btn-group .btn:not(.btn-icon).btn-success:active {
  background-color: #16b68b;
  color: #ffffff;
}

.input-group .form-control:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-rigth-radius: 0px;
}
.input-group .form-control:last-child {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.input-group .input-group-btn:first-child button:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-rigth-radius: 0px;
}
.input-group .input-group-btn:first-child > .btn, .input-group .input-group-btn:first-child > .btn + .btn {
  margin-right: 0px;
}
.input-group .input-group-btn:last-child button:last-child {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.input-group .input-group-btn:last-child > .btn, .input-group .input-group-btn:last-child > .btn + .btn {
  margin-right: 0px;
}
.input-group .input-group-addon {
  background-color: #ffffff;
  border: 2px solid #f4f4f4;
}
.input-group .input-group-addon:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-rigth-radius: 0px;
}
.input-group .input-group-addon:last-child {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.input-group-sm .input-group-addon, .input-group-sm .form-control {
  line-height: 1;
}

input.form-control, textarea.form-control {
  background-color: #f4f4f4;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  min-width: 20px;
  border: 0;
  border: 1px solid #f4f4f4;
  line-height: inherit;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
}
input.form-control:active, input.form-control:hover, input.form-control:focus, input.form-control:visited, textarea.form-control:active, textarea.form-control:hover, textarea.form-control:focus, textarea.form-control:visited {
  outline: none;
  box-shadow: none;
}
input.form-control:active, input.form-control:hover, input.form-control:focus, textarea.form-control:active, textarea.form-control:hover, textarea.form-control:focus {
  border: 1px solid #dbdbdb;
}
input.form-control.force-white-bg, textarea.form-control.force-white-bg {
  background-color: white;
}

select.form-control {
  background-color: #f4f4f4;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  min-width: 20px;
  border: 0;
  border: 1px solid #f4f4f4;
  line-height: inherit;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  padding-right: 25px;
  background-image: url("/img/icon-arrow-down-gray-128.png");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 10px center;
}
select.form-control:active, select.form-control:hover, select.form-control:focus, select.form-control:visited {
  outline: none;
  box-shadow: none;
}
select.form-control:active, select.form-control:hover, select.form-control:focus {
  border: 1px solid #dbdbdb;
}
select.form-control.force-white-bg {
  background-color: white;
}

select[multiple].form-control {
  padding-left: 10px;
  padding-right: 15px;
  background-image: none;
}

/* Common mixins for radio and checkbox */
/* checkbox base */
/* common design for input and select used with form-group */
/*
reset/unset/overwrite bootstrap or our own code for input fields
*/
.form-container span.label {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.form-container .form-control {
  max-width: unset;
  min-width: unset;
  width: 100%;
}
.form-container .form-control:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
}
.form-container .input-group input {
  z-index: 1;
}
.form-container .input-group input:focus, .form-container .input-group input:active, .form-container .input-group input:hover {
  z-index: 1;
}

.checkbox + .checkbox, .radio + .radio {
  margin-top: 15px;
}

.controls-indented .form-container {
  margin-top: 20px;
  margin-left: 20px;
}

.control-label.control-label-blue {
  color: #1674b4;
}

.form-container .form-control {
  box-sizing: border-box;
  display: block;
  border: 1px solid #C3C3C3;
  color: #636363;
  border-radius: 20px;
  font-size: 14px;
  background-color: #ffffff;
}
.form-container .form-control.invalid {
  border-color: #b62116 !important;
}
.form-container .form-control:focus, .form-container .form-control:active, .form-container .form-control:hover {
  border: 1px solid #C3C3C3;
}
.form-container .form-control:focus ~ label, .form-container .form-control:not(:placeholder-shown) ~ label {
  color: #1674b4;
}
.form-container .form-control:disabled, .form-container .form-control:read-only {
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.form-container .form-control:disabled + label, .form-container .form-control:read-only + label {
  color: #636363;
  border: 1px solid #ffffff;
}
.form-container .form-control:disabled:placeholder-shown ~ label, .form-container .form-control:read-only:placeholder-shown ~ label {
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.form-container .title-block {
  display: block;
  font-size: 14px;
  width: 100%;
  position: absolute;
  top: 52px;
  left: 25px;
  padding: 10px 0px;
  color: #878787;
}
.form-container .help-block {
  color: #878787;
}
.form-container > label, .form-container > .input-group > label {
  color: #1674b4;
  position: absolute;
  left: 0px;
  top: 0px;
  white-space: nowrap;
  transform: translate(0, 0);
  transform-origin: 0 0;
  background: #ffffff;
  transition: transform 140ms ease-in;
  font-size: 13px;
  font-weight: normal;
  pointer-events: none;
  border: 1px solid #ffffff;
  border-radius: 20px;
  z-index: 3;
  overflow: hidden;
  padding: 0px 6px;
  margin: 10px 12px 0px 14px;
}
.form-container .form-control {
  font-size: 13px;
}
.form-container .form-control:focus ~ label, .form-container .form-control:not(:placeholder-shown) ~ label {
  font-size: 12px;
  transform: translate(2px, -20px) scale(1);
  color: #1674b4;
}
.form-container input, .form-container textarea {
  padding: 18px 20px 18px 35px;
}
.form-container input[type=file] {
  cursor: pointer;
  padding: 0px;
  padding: 0px 20px 38px 20px;
}
.form-container input[type=file] ~ .prefix {
  background-color: #1674b4;
  color: #ffffff;
}
.form-container input[type=file]::file-selector-button {
  cursor: pointer;
  border: none;
  height: 38px;
  padding: 0px 20px;
  margin-left: -20px;
  border-radius: 20px;
  background-color: #1674b4;
  color: #ffffff;
  transition: 1s;
  font-size: 13px;
}
.form-container .input-group.prefix, .form-container .input-group.postfix {
  /*
  this base mixin is used if the input field has prefix or postfix
  - the reason why we have to reverse the order because the animation is depend on .label state
    but the prefix in the ui comes first, reverse order makes possible to put the prefix after the input filed..
    Because of this we have to put the postfix before the input.
  */
  border-radius: 20px;
}
.form-container .input-group.prefix.disabled, .form-container .input-group.postfix.disabled {
  background-color: #f4f4f4;
}
.form-container .input-group.prefix.disabled .form-control:placeholder-shown ~ label, .form-container .input-group.postfix.disabled .form-control:placeholder-shown ~ label {
  background-color: #f4f4f4;
  border-color: #f4f4f4;
}
.form-container .input-group.prefix.prefix, .form-container .input-group.prefix.postfix, .form-container .input-group.postfix.prefix, .form-container .input-group.postfix.postfix {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
}
.form-container .input-group.prefix.prefix .form-control, .form-container .input-group.prefix.postfix .form-control, .form-container .input-group.postfix.prefix .form-control, .form-container .input-group.postfix.postfix .form-control {
  flex: 1;
  border-radius: 20px;
}
.form-container .input-group.prefix.prefix > .prefix, .form-container .input-group.postfix.prefix > .prefix {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border: 1px solid #C3C3C3;
  border-right: 0px solid #ffffff;
  color: #125d8f;
  font-weight: bold;
  display: flex;
  align-items: center;
  height: unset;
  padding-left: 35px;
}
.form-container .input-group.prefix.prefix > .prefix select.form-control, .form-container .input-group.postfix.prefix > .prefix select.form-control {
  all: unset;
  background-color: #f4f4f4;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  min-width: 20px;
  border: 0;
  border: 1px solid #f4f4f4;
  line-height: inherit;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  padding-right: 25px;
  background-image: url("/img/icon-arrow-down-gray-128.png");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 10px center;
}
.form-container .input-group.prefix.prefix > .prefix select.form-control:active, .form-container .input-group.prefix.prefix > .prefix select.form-control:hover, .form-container .input-group.prefix.prefix > .prefix select.form-control:focus, .form-container .input-group.prefix.prefix > .prefix select.form-control:visited, .form-container .input-group.postfix.prefix > .prefix select.form-control:active, .form-container .input-group.postfix.prefix > .prefix select.form-control:hover, .form-container .input-group.postfix.prefix > .prefix select.form-control:focus, .form-container .input-group.postfix.prefix > .prefix select.form-control:visited {
  outline: none;
  box-shadow: none;
}
.form-container .input-group.prefix.prefix > .prefix select.form-control:active, .form-container .input-group.prefix.prefix > .prefix select.form-control:hover, .form-container .input-group.prefix.prefix > .prefix select.form-control:focus, .form-container .input-group.postfix.prefix > .prefix select.form-control:active, .form-container .input-group.postfix.prefix > .prefix select.form-control:hover, .form-container .input-group.postfix.prefix > .prefix select.form-control:focus {
  border: 1px solid #dbdbdb;
}
.form-container .input-group.prefix.prefix > .prefix select.form-control.force-white-bg, .form-container .input-group.postfix.prefix > .prefix select.form-control.force-white-bg {
  background-color: white;
}
.form-container .input-group.prefix.prefix > .prefix .btn.dropdown-toggle, .form-container .input-group.prefix.prefix > .prefix .btn.dropdown-toggle:hover, .form-container .input-group.prefix.prefix > .prefix .btn.dropdown-toggle:focus, .form-container .input-group.prefix.prefix > .prefix .btn.dropdown-toggle:active,
.form-container .input-group.prefix.prefix > .prefix .btn.dropdown-toggle.open, .form-container .input-group.postfix.prefix > .prefix .btn.dropdown-toggle, .form-container .input-group.postfix.prefix > .prefix .btn.dropdown-toggle:hover, .form-container .input-group.postfix.prefix > .prefix .btn.dropdown-toggle:focus, .form-container .input-group.postfix.prefix > .prefix .btn.dropdown-toggle:active,
.form-container .input-group.postfix.prefix > .prefix .btn.dropdown-toggle.open {
  border: none;
  background-color: transparent;
  color: #125d8f;
  padding: 0px;
  text-align: left;
  min-width: 20px;
}
.form-container .input-group.prefix.prefix > .form-control, .form-container .input-group.postfix.prefix > .form-control {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px solid #ffffff;
}
.form-container .input-group.prefix.prefix > .form-control:placeholder-shown ~ span.prefix, .form-container .input-group.postfix.prefix > .form-control:placeholder-shown ~ span.prefix {
  display: none;
}
.form-container .input-group.prefix.prefix > .form-control:placeholder-shown, .form-container .input-group.postfix.prefix > .form-control:placeholder-shown {
  border-left: 1px solid #C3C3C3;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.form-container .input-group.prefix.prefix.disabled > .form-control:placeholder-shown, .form-container .input-group.postfix.prefix.disabled > .form-control:placeholder-shown {
  border-left: 1px solid #f4f4f4;
}
.form-container .input-group.prefix.prefix.disabled > .prefix, .form-container .input-group.postfix.prefix.disabled > .prefix {
  border: 1px solid #f4f4f4;
}
.form-container .input-group.prefix.postfix > .postfix, .form-container .input-group.postfix.postfix > .postfix {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border: 1px solid #C3C3C3;
  border-left: 0px solid #ffffff;
  color: #636363;
  display: flex;
  align-items: center;
  height: unset;
}
.form-container .input-group.prefix.postfix > .postfix select, .form-container .input-group.postfix.postfix > .postfix select {
  all: unset;
  background-color: #f4f4f4;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  min-width: 20px;
  border: 0;
  border: 1px solid #f4f4f4;
  line-height: inherit;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  padding-right: 25px;
  background-image: url("/img/icon-arrow-down-gray-128.png");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 10px center;
}
.form-container .input-group.prefix.postfix > .postfix select:active, .form-container .input-group.prefix.postfix > .postfix select:hover, .form-container .input-group.prefix.postfix > .postfix select:focus, .form-container .input-group.prefix.postfix > .postfix select:visited, .form-container .input-group.postfix.postfix > .postfix select:active, .form-container .input-group.postfix.postfix > .postfix select:hover, .form-container .input-group.postfix.postfix > .postfix select:focus, .form-container .input-group.postfix.postfix > .postfix select:visited {
  outline: none;
  box-shadow: none;
}
.form-container .input-group.prefix.postfix > .postfix select:active, .form-container .input-group.prefix.postfix > .postfix select:hover, .form-container .input-group.prefix.postfix > .postfix select:focus, .form-container .input-group.postfix.postfix > .postfix select:active, .form-container .input-group.postfix.postfix > .postfix select:hover, .form-container .input-group.postfix.postfix > .postfix select:focus {
  border: 1px solid #dbdbdb;
}
.form-container .input-group.prefix.postfix > .postfix select.force-white-bg, .form-container .input-group.postfix.postfix > .postfix select.force-white-bg {
  background-color: white;
}
.form-container .input-group.prefix.postfix > .form-control, .form-container .input-group.postfix.postfix > .form-control {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right: 0px solid #ffffff;
}
.form-container .input-group.prefix.postfix.disabled > .postfix, .form-container .input-group.postfix.postfix.disabled > .postfix {
  border: 1px solid #f4f4f4;
}
.form-container .input-group.prefix .prefix {
  height: 38px;
  min-width: 30px;
  padding: 0px 5px 0px 20px;
}
.form-container .input-group.prefix .prefix select {
  background-color: #f4f4f4;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  min-width: 20px;
  border: 0;
  border: 1px solid #f4f4f4;
  line-height: inherit;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  padding-right: 25px;
  background-image: url("/img/icon-arrow-down-gray-128.png");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 10px center;
}
.form-container .input-group.prefix .prefix select:active, .form-container .input-group.prefix .prefix select:hover, .form-container .input-group.prefix .prefix select:focus, .form-container .input-group.prefix .prefix select:visited {
  outline: none;
  box-shadow: none;
}
.form-container .input-group.prefix .prefix select:active, .form-container .input-group.prefix .prefix select:hover, .form-container .input-group.prefix .prefix select:focus {
  border: 1px solid #dbdbdb;
}
.form-container .input-group.prefix .prefix select.force-white-bg {
  background-color: white;
}
.form-container .input-group.prefix input, .form-container .input-group.prefix textarea, .form-container .input-group.prefix select {
  padding-left: 5px;
}
.form-container .input-group.prefix input:placeholder-shown, .form-container .input-group.prefix textarea:placeholder-shown, .form-container .input-group.prefix select:placeholder-shown {
  padding-left: 25px;
}
.form-container .input-group .help-block {
  margin-left: 20px;
}
.form-container .input-group.postfix .postfix {
  height: 38px;
  padding: 0px 10px 0px 5px;
}
.form-container .input-group.postfix .postfix > * {
  margin-left: 5px;
}
.form-container .input-group.postfix .postfix:first-child {
  margin-left: 0px;
}
.form-container .input-group.postfix .postfix select {
  background-color: #f4f4f4;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  min-width: 20px;
  border: 0;
  border: 1px solid #f4f4f4;
  line-height: inherit;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  padding-right: 25px;
  background-image: url("/img/icon-arrow-down-gray-128.png");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 10px center;
}
.form-container .input-group.postfix .postfix select:active, .form-container .input-group.postfix .postfix select:hover, .form-container .input-group.postfix .postfix select:focus, .form-container .input-group.postfix .postfix select:visited {
  outline: none;
  box-shadow: none;
}
.form-container .input-group.postfix .postfix select:active, .form-container .input-group.postfix .postfix select:hover, .form-container .input-group.postfix .postfix select:focus {
  border: 1px solid #dbdbdb;
}
.form-container .input-group.postfix .postfix select.force-white-bg {
  background-color: white;
}

.form-container.form-lg .form-control {
  box-sizing: border-box;
  display: block;
  border: 1px solid #C3C3C3;
  color: #636363;
  border-radius: 20px;
  font-size: 14px;
  background-color: #ffffff;
}
.form-container.form-lg .form-control.invalid {
  border-color: #b62116 !important;
}
.form-container.form-lg .form-control:focus, .form-container.form-lg .form-control:active, .form-container.form-lg .form-control:hover {
  border: 1px solid #C3C3C3;
}
.form-container.form-lg .form-control:focus ~ label, .form-container.form-lg .form-control:not(:placeholder-shown) ~ label {
  color: #1674b4;
}
.form-container.form-lg .form-control:disabled, .form-container.form-lg .form-control:read-only {
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.form-container.form-lg .form-control:disabled + label, .form-container.form-lg .form-control:read-only + label {
  color: #636363;
  border: 1px solid #ffffff;
}
.form-container.form-lg .form-control:disabled:placeholder-shown ~ label, .form-container.form-lg .form-control:read-only:placeholder-shown ~ label {
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.form-container.form-lg .title-block {
  display: block;
  font-size: 14px;
  width: 100%;
  position: absolute;
  top: 52px;
  left: 25px;
  padding: 10px 0px;
  color: #878787;
}
.form-container.form-lg .help-block {
  color: #878787;
}
.form-container.form-lg input, .form-container.form-lg textarea {
  padding: 25px 35px 25px 25px;
}
.form-container.form-lg input[type=file] {
  padding: 0px 35px 52px 25px;
}
.form-container.form-lg input[type=file]::file-selector-button {
  cursor: pointer;
  border: none;
  height: 52px;
  padding: 0px 30px;
  margin-left: -25px;
}
.form-container.form-lg > label, .form-container.form-lg > .input-group > label {
  color: #1674b4;
  position: absolute;
  left: 0px;
  top: 0px;
  white-space: nowrap;
  transform: translate(0, 0);
  transform-origin: 0 0;
  background: #ffffff;
  transition: transform 140ms ease-in;
  font-size: 13px;
  font-weight: normal;
  pointer-events: none;
  border: 1px solid #ffffff;
  border-radius: 20px;
  z-index: 3;
  overflow: hidden;
  padding: 0px 8px;
  margin: 17px 10px 0px 14px;
}
.form-container.form-lg .form-control {
  font-size: 13px;
}
.form-container.form-lg .form-control:focus ~ label, .form-container.form-lg .form-control:not(:placeholder-shown) ~ label {
  transform: translate(3px, -138%) scale(1);
}
.form-container.form-lg > .help-block {
  margin-left: 25px;
}
.form-container.form-lg .input-group.prefix, .form-container.form-lg .input-group.postfix {
  /*
  this base mixin is used if the input field has prefix or postfix
  - the reason why we have to reverse the order because the animation is depend on .label state
    but the prefix in the ui comes first, reverse order makes possible to put the prefix after the input filed..
    Because of this we have to put the postfix before the input.
  */
  border-radius: 20px;
}
.form-container.form-lg .input-group.prefix.disabled, .form-container.form-lg .input-group.postfix.disabled {
  background-color: #f4f4f4;
}
.form-container.form-lg .input-group.prefix.disabled .form-control:placeholder-shown ~ label, .form-container.form-lg .input-group.postfix.disabled .form-control:placeholder-shown ~ label {
  background-color: #f4f4f4;
  border-color: #f4f4f4;
}
.form-container.form-lg .input-group.prefix.prefix, .form-container.form-lg .input-group.prefix.postfix, .form-container.form-lg .input-group.postfix.prefix, .form-container.form-lg .input-group.postfix.postfix {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
}
.form-container.form-lg .input-group.prefix.prefix .form-control, .form-container.form-lg .input-group.prefix.postfix .form-control, .form-container.form-lg .input-group.postfix.prefix .form-control, .form-container.form-lg .input-group.postfix.postfix .form-control {
  flex: 1;
  border-radius: 20px;
}
.form-container.form-lg .input-group.prefix.prefix > .prefix, .form-container.form-lg .input-group.postfix.prefix > .prefix {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border: 1px solid #C3C3C3;
  border-right: 0px solid #ffffff;
  color: #125d8f;
  font-weight: bold;
  display: flex;
  align-items: center;
  height: unset;
  padding-left: 35px;
}
.form-container.form-lg .input-group.prefix.prefix > .prefix select.form-control, .form-container.form-lg .input-group.postfix.prefix > .prefix select.form-control {
  all: unset;
  background-color: #f4f4f4;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  min-width: 20px;
  border: 0;
  border: 1px solid #f4f4f4;
  line-height: inherit;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  padding-right: 25px;
  background-image: url("/img/icon-arrow-down-gray-128.png");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 10px center;
}
.form-container.form-lg .input-group.prefix.prefix > .prefix select.form-control:active, .form-container.form-lg .input-group.prefix.prefix > .prefix select.form-control:hover, .form-container.form-lg .input-group.prefix.prefix > .prefix select.form-control:focus, .form-container.form-lg .input-group.prefix.prefix > .prefix select.form-control:visited, .form-container.form-lg .input-group.postfix.prefix > .prefix select.form-control:active, .form-container.form-lg .input-group.postfix.prefix > .prefix select.form-control:hover, .form-container.form-lg .input-group.postfix.prefix > .prefix select.form-control:focus, .form-container.form-lg .input-group.postfix.prefix > .prefix select.form-control:visited {
  outline: none;
  box-shadow: none;
}
.form-container.form-lg .input-group.prefix.prefix > .prefix select.form-control:active, .form-container.form-lg .input-group.prefix.prefix > .prefix select.form-control:hover, .form-container.form-lg .input-group.prefix.prefix > .prefix select.form-control:focus, .form-container.form-lg .input-group.postfix.prefix > .prefix select.form-control:active, .form-container.form-lg .input-group.postfix.prefix > .prefix select.form-control:hover, .form-container.form-lg .input-group.postfix.prefix > .prefix select.form-control:focus {
  border: 1px solid #dbdbdb;
}
.form-container.form-lg .input-group.prefix.prefix > .prefix select.form-control.force-white-bg, .form-container.form-lg .input-group.postfix.prefix > .prefix select.form-control.force-white-bg {
  background-color: white;
}
.form-container.form-lg .input-group.prefix.prefix > .prefix .btn.dropdown-toggle, .form-container.form-lg .input-group.prefix.prefix > .prefix .btn.dropdown-toggle:hover, .form-container.form-lg .input-group.prefix.prefix > .prefix .btn.dropdown-toggle:focus, .form-container.form-lg .input-group.prefix.prefix > .prefix .btn.dropdown-toggle:active,
.form-container.form-lg .input-group.prefix.prefix > .prefix .btn.dropdown-toggle.open, .form-container.form-lg .input-group.postfix.prefix > .prefix .btn.dropdown-toggle, .form-container.form-lg .input-group.postfix.prefix > .prefix .btn.dropdown-toggle:hover, .form-container.form-lg .input-group.postfix.prefix > .prefix .btn.dropdown-toggle:focus, .form-container.form-lg .input-group.postfix.prefix > .prefix .btn.dropdown-toggle:active,
.form-container.form-lg .input-group.postfix.prefix > .prefix .btn.dropdown-toggle.open {
  border: none;
  background-color: transparent;
  color: #125d8f;
  padding: 0px;
  text-align: left;
  min-width: 20px;
}
.form-container.form-lg .input-group.prefix.prefix > .form-control, .form-container.form-lg .input-group.postfix.prefix > .form-control {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px solid #ffffff;
}
.form-container.form-lg .input-group.prefix.prefix > .form-control:placeholder-shown ~ span.prefix, .form-container.form-lg .input-group.postfix.prefix > .form-control:placeholder-shown ~ span.prefix {
  display: none;
}
.form-container.form-lg .input-group.prefix.prefix > .form-control:placeholder-shown, .form-container.form-lg .input-group.postfix.prefix > .form-control:placeholder-shown {
  border-left: 1px solid #C3C3C3;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.form-container.form-lg .input-group.prefix.prefix.disabled > .form-control:placeholder-shown, .form-container.form-lg .input-group.postfix.prefix.disabled > .form-control:placeholder-shown {
  border-left: 1px solid #f4f4f4;
}
.form-container.form-lg .input-group.prefix.prefix.disabled > .prefix, .form-container.form-lg .input-group.postfix.prefix.disabled > .prefix {
  border: 1px solid #f4f4f4;
}
.form-container.form-lg .input-group.prefix.postfix > .postfix, .form-container.form-lg .input-group.postfix.postfix > .postfix {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border: 1px solid #C3C3C3;
  border-left: 0px solid #ffffff;
  color: #636363;
  display: flex;
  align-items: center;
  height: unset;
}
.form-container.form-lg .input-group.prefix.postfix > .postfix select, .form-container.form-lg .input-group.postfix.postfix > .postfix select {
  all: unset;
  background-color: #f4f4f4;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  min-width: 20px;
  border: 0;
  border: 1px solid #f4f4f4;
  line-height: inherit;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  padding-right: 25px;
  background-image: url("/img/icon-arrow-down-gray-128.png");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 10px center;
}
.form-container.form-lg .input-group.prefix.postfix > .postfix select:active, .form-container.form-lg .input-group.prefix.postfix > .postfix select:hover, .form-container.form-lg .input-group.prefix.postfix > .postfix select:focus, .form-container.form-lg .input-group.prefix.postfix > .postfix select:visited, .form-container.form-lg .input-group.postfix.postfix > .postfix select:active, .form-container.form-lg .input-group.postfix.postfix > .postfix select:hover, .form-container.form-lg .input-group.postfix.postfix > .postfix select:focus, .form-container.form-lg .input-group.postfix.postfix > .postfix select:visited {
  outline: none;
  box-shadow: none;
}
.form-container.form-lg .input-group.prefix.postfix > .postfix select:active, .form-container.form-lg .input-group.prefix.postfix > .postfix select:hover, .form-container.form-lg .input-group.prefix.postfix > .postfix select:focus, .form-container.form-lg .input-group.postfix.postfix > .postfix select:active, .form-container.form-lg .input-group.postfix.postfix > .postfix select:hover, .form-container.form-lg .input-group.postfix.postfix > .postfix select:focus {
  border: 1px solid #dbdbdb;
}
.form-container.form-lg .input-group.prefix.postfix > .postfix select.force-white-bg, .form-container.form-lg .input-group.postfix.postfix > .postfix select.force-white-bg {
  background-color: white;
}
.form-container.form-lg .input-group.prefix.postfix > .form-control, .form-container.form-lg .input-group.postfix.postfix > .form-control {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right: 0px solid #ffffff;
}
.form-container.form-lg .input-group.prefix.postfix.disabled > .postfix, .form-container.form-lg .input-group.postfix.postfix.disabled > .postfix {
  border: 1px solid #f4f4f4;
}
.form-container.form-lg .input-group.prefix .prefix {
  height: 52px;
  min-width: 30px;
  padding: 0px 5px 0px 25px;
}
.form-container.form-lg .input-group.prefix .prefix select {
  background-color: #f4f4f4;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  min-width: 20px;
  border: 0;
  border: 1px solid #f4f4f4;
  line-height: inherit;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  padding-right: 25px;
  background-image: url("/img/icon-arrow-down-gray-128.png");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: right 10px center;
  height: 30px;
  padding: 5px;
  font-size: 12px;
}
.form-container.form-lg .input-group.prefix .prefix select:active, .form-container.form-lg .input-group.prefix .prefix select:hover, .form-container.form-lg .input-group.prefix .prefix select:focus, .form-container.form-lg .input-group.prefix .prefix select:visited {
  outline: none;
  box-shadow: none;
}
.form-container.form-lg .input-group.prefix .prefix select:active, .form-container.form-lg .input-group.prefix .prefix select:hover, .form-container.form-lg .input-group.prefix .prefix select:focus {
  border: 1px solid #dbdbdb;
}
.form-container.form-lg .input-group.prefix .prefix select.force-white-bg {
  background-color: white;
}
.form-container.form-lg .input-group.prefix input, .form-container.form-lg .input-group.prefix textarea, .form-container.form-lg .input-group.prefix select {
  padding-left: 5px;
}
.form-container.form-lg .input-group.prefix input:placeholder-shown, .form-container.form-lg .input-group.prefix textarea:placeholder-shown, .form-container.form-lg .input-group.prefix select:placeholder-shown {
  padding-left: 25px;
}
.form-container.form-lg .input-group.postfix .postfix {
  height: 52px;
  padding: 0px 25px 0px 5px;
}
.form-container.form-lg .input-group.postfix .postfix > * {
  margin-left: 10px;
}
.form-container.form-lg .input-group.postfix .postfix:first-child {
  margin-left: 0px;
}

.form-container .form-control {
  box-sizing: border-box;
  display: block;
  border: 1px solid #C3C3C3;
  color: #636363;
  border-radius: 20px;
  font-size: 14px;
  background-color: #ffffff;
}
.form-container .form-control.invalid {
  border-color: #b62116 !important;
}
.form-container .form-control:focus, .form-container .form-control:active, .form-container .form-control:hover {
  border: 1px solid #C3C3C3;
}
.form-container .form-control:focus ~ label, .form-container .form-control:not(:placeholder-shown) ~ label {
  color: #1674b4;
}
.form-container .form-control:disabled, .form-container .form-control:read-only {
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.form-container .form-control:disabled + label, .form-container .form-control:read-only + label {
  color: #636363;
  border: 1px solid #ffffff;
}
.form-container .form-control:disabled:placeholder-shown ~ label, .form-container .form-control:read-only:placeholder-shown ~ label {
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.form-container .title-block {
  display: block;
  font-size: 14px;
  width: 100%;
  position: absolute;
  top: 52px;
  left: 25px;
  padding: 10px 0px;
  color: #878787;
}
.form-container .help-block {
  color: #878787;
}
.form-container > label.label, .form-container > .input-group > label.label {
  color: #1674b4;
  position: absolute;
  left: 0px;
  top: 0px;
  white-space: nowrap;
  transform: translate(0, 0);
  transform-origin: 0 0;
  background: #ffffff;
  transition: transform 140ms ease-in;
  font-size: 13px;
  font-weight: normal;
  pointer-events: none;
  border: 1px solid #ffffff;
  border-radius: 20px;
  z-index: 3;
  overflow: hidden;
  padding: 0px 6px;
  margin: 10px 12px 0px 14px;
}
.form-container > select.form-control, .form-container > .input-group > select.form-control {
  padding: 0px 20px 0px 30px;
  height: 38px;
  vertical-align: middle;
  background: unset;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-position-x: calc(100% - 10px);
  background-position-y: 7px;
  appearance: none !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-right: 10px;
}
.form-container > select.form-control:not(:disabled), .form-container > .input-group > select.form-control:not(:disabled) {
  background-color: initial;
  border: 1px solid #C3C3C3;
}
.form-container > select.form-control:not(:disabled) ~ label, .form-container > .input-group > select.form-control:not(:disabled) ~ label {
  color: #1674b4;
  border: 1px solid #ffffff;
  background: #ffffff;
}
.form-container > select.form-control:disabled + label, .form-container > .input-group > select.form-control:disabled + label {
  color: #636363;
}
.form-container .help-block {
  margin-left: 20px;
}
.form-container select[multiple] {
  background: unset;
  padding-top: 10px;
}
.form-container select[multiple] option {
  margin-bottom: 2px;
  border-radius: 20px;
  padding: 2px 5px;
}
.form-container select[multiple]:focus option:checked, .form-container select[multiple] option:checked {
  background: #C3C3C3;
  color: #ffffff;
}

.form-container.form-lg .form-control {
  box-sizing: border-box;
  display: block;
  border: 1px solid #C3C3C3;
  color: #636363;
  border-radius: 20px;
  font-size: 14px;
  background-color: #ffffff;
}
.form-container.form-lg .form-control.invalid {
  border-color: #b62116 !important;
}
.form-container.form-lg .form-control:focus, .form-container.form-lg .form-control:active, .form-container.form-lg .form-control:hover {
  border: 1px solid #C3C3C3;
}
.form-container.form-lg .form-control:focus ~ label, .form-container.form-lg .form-control:not(:placeholder-shown) ~ label {
  color: #1674b4;
}
.form-container.form-lg .form-control:disabled, .form-container.form-lg .form-control:read-only {
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.form-container.form-lg .form-control:disabled + label, .form-container.form-lg .form-control:read-only + label {
  color: #636363;
  border: 1px solid #ffffff;
}
.form-container.form-lg .form-control:disabled:placeholder-shown ~ label, .form-container.form-lg .form-control:read-only:placeholder-shown ~ label {
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.form-container.form-lg .title-block {
  display: block;
  font-size: 14px;
  width: 100%;
  position: absolute;
  top: 52px;
  left: 25px;
  padding: 10px 0px;
  color: #878787;
}
.form-container.form-lg .help-block {
  color: #878787;
}
.form-container.form-lg > label, .form-container.form-lg .input-group > label {
  color: #1674b4;
  position: absolute;
  left: 0px;
  top: 0px;
  white-space: nowrap;
  transform: translate(0, 0);
  transform-origin: 0 0;
  background: #ffffff;
  transition: transform 140ms ease-in;
  font-size: 13px;
  font-weight: normal;
  pointer-events: none;
  border: 1px solid #ffffff;
  border-radius: 20px;
  z-index: 3;
  overflow: hidden;
  padding: 0px 8px;
  margin: 17px 10px 0px 14px;
}
.form-container.form-lg .help-block {
  margin-left: 25px;
}
.form-container.form-lg > select.form-control, .form-container.form-lg > .input-group > select.form-control {
  padding: 0px 20px;
  height: 52px;
  vertical-align: middle;
  background: unset;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-position-x: calc(100% - 10px);
  background-position-y: 15px;
  padding-right: 10px;
}
.form-container.form-lg > select.form-control:not(:disabled), .form-container.form-lg > .input-group > select.form-control:not(:disabled) {
  background-color: initial;
  border: 1px solid #C3C3C3;
}
.form-container.form-lg > select.form-control:not(:disabled) ~ label, .form-container.form-lg > .input-group > select.form-control:not(:disabled) ~ label {
  color: #1674b4;
  border: 1px solid #ffffff;
  background: #ffffff;
}
.form-container.form-lg:disabled + label {
  color: #636363;
}

.chk {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  /* Hide the browser's default checkbox */
  /* Create a custom radio button */
  /* On mouse-over, add a grey background color */
  /* Create the indicator (the dot/circle - hidden when not checked) */
  /* Show the checkmark when checked */
  padding-left: 25px;
  margin: 5px 0px;
  margin-right: 5px;
  /* When the checkbox is checked, add a blue background */
  /* When the checkbox is checked or unchecked and disabled */
  /* Style the checkmark/indicator */
}
.chk input[type=checkbox], .chk input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.chk.block {
  display: flex;
  margin-bottom: 15px;
}
.chk .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #C3C3C3;
  border-radius: 50%;
}
.chk:hover input ~ .checkmark {
  background-color: #ABABAB;
}
.chk .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.chk input:checked ~ .checkmark:after {
  display: block;
}
.chk .checkmark {
  height: 19px;
  width: 19px;
}
.chk input[type=checkbox]:checked ~ .checkmark {
  background-color: #16b68b;
}
.chk input[type=checkbox][disabled] ~ .checkmark, .chk input[type=checkbox].disabled ~ .checkmark {
  background-color: #C3C3C3;
  cursor: not-allowed;
  opacity: 0.6;
  border-color: #636363;
}
.chk input[type=checkbox][disabled]:checked ~ .checkmark:after {
  border-color: #636363;
}
.chk .checkmark {
  border-radius: 5px;
}
.chk .checkmark:after {
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.chk label.label {
  color: #1674b4;
  position: absolute;
  left: 0px;
  top: 0px;
  white-space: nowrap;
  transform: translate(0, 0);
  transform-origin: 0 0;
  background: #ffffff;
  transition: transform 140ms ease-in;
  font-size: 13px;
  font-weight: normal;
  pointer-events: none;
  border: 1px solid #ffffff;
  border-radius: 20px;
  z-index: 3;
  overflow: hidden;
  padding: 0px 8px;
}
.chk.input-lg {
  /* When the checkbox is checked, add a blue background */
  /* When the checkbox is checked or unchecked and disabled */
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  /* Hide the browser's default checkbox */
  /* Create a custom radio button */
  /* On mouse-over, add a grey background color */
  /* Create the indicator (the dot/circle - hidden when not checked) */
  /* Show the checkmark when checked */
  height: 25px;
  padding-left: 30px;
  margin: 15px 0px;
  margin-right: 5px;
  font-size: 13px;
  /* Style the checkmark/indicator */
}
.chk.input-lg input[type=checkbox]:checked ~ .checkmark {
  background-color: #16b68b;
}
.chk.input-lg input[type=checkbox][disabled] ~ .checkmark, .chk.input-lg input[type=checkbox].disabled ~ .checkmark {
  background-color: #C3C3C3;
  cursor: not-allowed;
  opacity: 0.6;
  border-color: #636363;
}
.chk.input-lg input[type=checkbox][disabled]:checked ~ .checkmark:after {
  border-color: #636363;
}
.chk.input-lg input[type=checkbox], .chk.input-lg input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.chk.input-lg.block {
  display: flex;
  margin-bottom: 15px;
}
.chk.input-lg .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #C3C3C3;
  border-radius: 50%;
}
.chk.input-lg:hover input ~ .checkmark {
  background-color: #ABABAB;
}
.chk.input-lg .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.chk.input-lg input:checked ~ .checkmark:after {
  display: block;
}
.chk.input-lg .checkmark {
  height: 25px;
  width: 25px;
}
.chk.input-lg .checkmark {
  border-radius: 5px;
}
.chk.input-lg .checkmark:after {
  left: 9px;
  top: 5px;
  width: 8px;
  height: 13px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.rad {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  /* Hide the browser's default checkbox */
  /* Create a custom radio button */
  /* On mouse-over, add a grey background color */
  /* Create the indicator (the dot/circle - hidden when not checked) */
  /* Show the checkmark when checked */
  padding-left: 25px;
  margin: 5px 0px;
  margin-right: 5px;
  /* When the checkbox is checked or unchecked and disabled */
  /* Style the indicator (dot/circle) */
}
.rad input[type=checkbox], .rad input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.rad.block {
  display: flex;
  margin-bottom: 15px;
}
.rad .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #C3C3C3;
  border-radius: 50%;
}
.rad:hover input ~ .checkmark {
  background-color: #ABABAB;
}
.rad .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.rad input:checked ~ .checkmark:after {
  display: block;
}
.rad .checkmark {
  height: 19px;
  width: 19px;
}
.rad input[type=radio][disabled] ~ .checkmark {
  background-color: #C3C3C3;
  cursor: not-allowed;
  opacity: 0.6;
  border-color: #636363;
}
.rad input[type=radio][disabled]:checked ~ .checkmark:after {
  background: #636363;
}
.rad .checkmark:after {
  top: 4px;
  left: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #1674b4;
}
.rad label.label {
  color: #1674b4;
  position: absolute;
  left: 0px;
  top: 0px;
  white-space: nowrap;
  transform: translate(0, 0);
  transform-origin: 0 0;
  background: #ffffff;
  transition: transform 140ms ease-in;
  font-size: 13px;
  font-weight: normal;
  pointer-events: none;
  border: 1px solid #ffffff;
  border-radius: 20px;
  z-index: 3;
  overflow: hidden;
  padding: 0px 8px;
}
.rad.input-lg {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  /* Hide the browser's default checkbox */
  /* Create a custom radio button */
  /* On mouse-over, add a grey background color */
  /* Create the indicator (the dot/circle - hidden when not checked) */
  /* Show the checkmark when checked */
  height: 25px;
  padding-left: 30px;
  margin: 15px 0px;
  margin-right: 5px;
  font-size: 13px;
  /* When the checkbox is checked or unchecked and disabled */
  /* Style the indicator (dot/circle) */
}
.rad.input-lg input[type=checkbox], .rad.input-lg input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.rad.input-lg.block {
  display: flex;
  margin-bottom: 15px;
}
.rad.input-lg .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #C3C3C3;
  border-radius: 50%;
}
.rad.input-lg:hover input ~ .checkmark {
  background-color: #ABABAB;
}
.rad.input-lg .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.rad.input-lg input:checked ~ .checkmark:after {
  display: block;
}
.rad.input-lg .checkmark {
  height: 25px;
  width: 25px;
}
.rad.input-lg input[type=radio][disabled] ~ .checkmark {
  background-color: #C3C3C3;
  cursor: not-allowed;
  opacity: 0.6;
  border-color: #636363;
}
.rad.input-lg input[type=radio][disabled]:checked ~ .checkmark:after {
  background: #636363;
}
.rad.input-lg .checkmark:after {
  top: 5px;
  left: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #1674b4;
}

.form-container .input-color-container {
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 38px;
  border: solid 1px #C3C3C3;
  border-radius: 38px;
}
.form-container .input-color-container > input[type=color] {
  all: unset;
  cursor: pointer;
  position: absolute;
  right: -8px;
  top: -8px;
  width: 56px;
  height: 56px;
  border: none;
}
.form-container .input-color-container.margin-right {
  margin-right: 10px;
}

.form-container .dropdown .form-control {
  box-sizing: border-box;
  display: block;
  border: 1px solid #C3C3C3;
  color: #636363;
  border-radius: 20px;
  font-size: 14px;
  background-color: #ffffff;
}
.form-container .dropdown .form-control.invalid {
  border-color: #b62116 !important;
}
.form-container .dropdown .form-control:focus, .form-container .dropdown .form-control:active, .form-container .dropdown .form-control:hover {
  border: 1px solid #C3C3C3;
}
.form-container .dropdown .form-control:focus ~ label, .form-container .dropdown .form-control:not(:placeholder-shown) ~ label {
  color: #1674b4;
}
.form-container .dropdown .form-control:disabled, .form-container .dropdown .form-control:read-only {
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.form-container .dropdown .form-control:disabled + label, .form-container .dropdown .form-control:read-only + label {
  color: #636363;
  border: 1px solid #ffffff;
}
.form-container .dropdown .form-control:disabled:placeholder-shown ~ label, .form-container .dropdown .form-control:read-only:placeholder-shown ~ label {
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.form-container .dropdown .title-block {
  display: block;
  font-size: 14px;
  width: 100%;
  position: absolute;
  top: 52px;
  left: 25px;
  padding: 10px 0px;
  color: #878787;
}
.form-container .dropdown .help-block {
  color: #878787;
}
.form-container .dropdown .form-control {
  padding: 0px 20px 0px 30px;
  height: 38px;
  vertical-align: middle;
  background: unset;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-position-x: calc(100% - 10px);
  background-position-y: 7px;
  appearance: none !important;
  padding-right: 10px;
}
.form-container .dropdown .form-control:not(:disabled) {
  background-color: initial;
  border: 1px solid #C3C3C3;
}
.form-container .dropdown .form-control:not(:disabled) ~ label {
  color: #1674b4;
  border: 1px solid #ffffff;
  background: #ffffff;
}
.form-container .dropdown .form-control:disabled + label {
  color: #636363;
}
.form-container .dropdown + label {
  color: #1674b4;
  position: absolute;
  left: 0px;
  top: 0px;
  white-space: nowrap;
  transform: translate(0, 0);
  transform-origin: 0 0;
  background: #ffffff;
  transition: transform 140ms ease-in;
  font-size: 13px;
  font-weight: normal;
  pointer-events: none;
  border: 1px solid #ffffff;
  border-radius: 20px;
  z-index: 3;
  overflow: hidden;
  padding: 0px 6px;
  margin: 10px 12px 0px 14px;
  top: -22px;
}
.form-container .dropdown .dropdown-menu {
  z-index: 5;
}

.form-container.mandatory .input-group > label:after,
.form-container.mandatory .group > label:after,
.form-container.mandatory input ~ label:after,
.form-container.mandatory textarea ~ label:after,
.form-container.mandatory select ~ label:after {
  content: "*";
  color: red;
  margin-top: -5px;
  margin-left: 5px;
}
.form-container.error .form-control {
  border: 1px solid #b62116;
}
.form-container.error .form-control:read-only {
  border: 1px solid #F2D7D5;
  background-color: #F2D7D5;
  color: #853029;
}
.form-container.margin-top {
  margin-top: 20px;
}
.form-container > .group {
  position: relative;
  border-radius: 20px;
  border: 1px solid #C3C3C3;
  padding: 0px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.form-container > .group .rad, .form-container > .group .chk {
  margin: 15px 0px;
}
.form-container > .group > label.label {
  margin: -8px 10px 0px 15px;
}
.form-container > .group > label.chk, .form-container > .group label.rad {
  margin-right: 20px;
}
.form-container > .group .title-text {
  width: 100%;
  margin: 15px 0px 0px 0px;
  color: #878787;
}
.form-container > .group .help-block {
  margin-left: 20px;
}
.form-container > .group > label.label {
  color: #1674b4;
  position: absolute;
  left: 0px;
  top: 0px;
  white-space: nowrap;
  transform: translate(0, 0);
  transform-origin: 0 0;
  background: #ffffff;
  transition: transform 140ms ease-in;
  font-size: 13px;
  font-weight: normal;
  pointer-events: none;
  border: 1px solid #ffffff;
  border-radius: 20px;
  z-index: 3;
  overflow: hidden;
  padding: 0px 8px;
}
.form-container > .group.stacked {
  display: block;
  padding-top: 15px;
}
.form-container > .group.stacked .chk, .form-container > .group.stacked .rad {
  display: flex;
}
.form-container > .group.stacked .content {
  display: block;
}
.form-container > .group.inline {
  border: none;
  padding: 0px;
}
.form-container > .group.inline label.label {
  display: inline-block;
  position: relative;
  margin: 0px;
  color: #636363;
  margin-right: 10px;
  background-color: transparent;
  border-color: transparent;
}
.form-container > .group.inline .chk, .form-container > .group.inline .rad {
  margin-top: 5px;
  margin-bottom: 5px;
}
.form-container > .group.postfix {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.form-container > .group.postfix .postfix {
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
}
.form-container > .group.postfix .postfix > * {
  margin-left: 10px;
}
.form-container > .group.postfix .postfix .context-help {
  color: #636363;
}
.form-container > .group > .content {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}
.form-container > .group > .content label {
  margin-right: 20px;
}
.form-container.no-margin {
  margin: 0px;
}
.form-container.pull-right {
  justify-content: flex-end;
}
.form-container.force-white-bg .form-control {
  border: 1px solid #C3C3C3;
  background-color: #ffffff;
}
.form-container.force-white-bg label, .form-container.force-white-bg .form-control:read-only:placeholder-shown ~ label {
  background-color: #ffffff;
  border-color: #ffffff;
}
.form-container.force-white-bg .input-group.disabled .prefix, .form-container.force-white-bg .input-group.disabled .postfix {
  border: 1px solid #C3C3C3;
  background-color: #ffffff;
}
.form-container.force-white-bg .input-group.disabled .form-control {
  border: 1px solid #C3C3C3;
  background-color: #ffffff;
}
.form-container.force-white-bg .input-group.disabled .form-control:read-only:placeholder-shown ~ label {
  background-color: #ffffff;
  border-color: #ffffff;
}
.form-container .clickable {
  cursor: pointer;
}

.form-container {
  position: relative;
  margin: 10px 0px 20px 0px;
  z-index: inherit;
}

.form-group-inline.mandatory > label:first-child:after {
  content: "*";
  color: red;
  margin-left: 4px;
}

.name-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 10px 0 20px;
}
.name-container .form-container {
  margin: 0;
  width: 50%;
}

/** this file contains all colours to be used accross the app in order to keep things consistent
    Hex codes for colours should not be used. instead - use the colours defined in this file.
**/
.text-grey {
  color: #636363;
}

.text-light-grey {
  color: #878787;
}

.text-blue {
  color: #125d8f;
}

.text-orange {
  color: #dca91b;
}

.text-red {
  color: #b62116;
}

.text-green {
  color: #16b68b;
}

.text-package-hr-success {
  color: #299AE5;
}

.text-package-hr-essentials {
  color: #299AE5;
}

.text-package-leave {
  color: #125d8f;
}

.text-package-time {
  color: #f3836b;
}

.push-button-selector {
  border: 1px solid #125d8f;
  border-radius: 10px;
  margin: 20px 0 0;
  padding: 20px 0;
}
.push-button-selector .wrapper {
  text-align: center;
  margin: auto;
  max-width: 700px;
}
.push-button-selector button {
  width: 100px;
  margin: 0 10px 10px 0;
  transition: none;
}
.push-button-selector button.btn-primary:hover {
  background-color: #125d8f;
  color: #fff;
}

/** this file contains all colours to be used accross the app in order to keep things consistent
    Hex codes for colours should not be used. instead - use the colours defined in this file.
**/
.text-grey {
  color: #636363;
}

.text-light-grey {
  color: #878787;
}

.text-blue {
  color: #125d8f;
}

.text-orange {
  color: #dca91b;
}

.text-red {
  color: #b62116;
}

.text-green {
  color: #16b68b;
}

.text-package-hr-success {
  color: #299AE5;
}

.text-package-hr-essentials {
  color: #299AE5;
}

.text-package-leave {
  color: #125d8f;
}

.text-package-time {
  color: #f3836b;
}

/*
  2 classes for showing/hiding html on mobile app:
    .visible-mobile-app (or .visible-ma)
    .hidden-mobile-app (or .hidden-ma)
 */
.visible-mobile-app {
  display: none;
}

.visible-ma, .visible-ma-inline {
  display: none;
}

.visible-ma-l {
  display: none;
}

.visible-ma-p {
  display: none;
}

.mobile-app .hidden-mobile-app {
  display: none;
}
.mobile-app .hidden-ma {
  display: none;
}
.mobile-app .visible-mobile-app {
  display: block;
}
.mobile-app .visible-ma {
  display: block;
}
.mobile-app .visible-ma-inline {
  display: inline-block;
}
@media (orientation: landscape) {
  .mobile-app .visible-ma-l {
    display: block;
  }
  .mobile-app .hidden-ma-l {
    display: none;
  }
}
@media (orientation: portrait) {
  .mobile-app .visible-ma-p {
    display: block;
  }
  .mobile-app .hidden-ma-p {
    display: none;
  }
}
.mobile-app .ma-h-note {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.mobile-app .ma-h-note .alert {
  border-radius: 0;
  margin: 0;
  padding: 10px;
  border-top: 1px solid #bce8f1;
}
.mobile-app .org-selector select {
  width: 100%;
}
.mobile-app .employee-selector-ma {
  min-width: 65px;
  text-align: right;
}
.mobile-app .employee-selector-ma .avatar {
  margin-right: 0;
}
.mobile-app .dlg-employee-selector .search-container .has-feedback, .mobile-app .dlg-employee-selector .search-container .txtSearch {
  width: 100%;
}
.mobile-app #employeeRibbonPopup {
  width: 80%;
  padding: 10px;
  left: 76px !important;
}
.mobile-app #ddlRequestAllowance {
  width: 100%;
}
.mobile-app .search-container .view_search input {
  width: 65%;
}

.profile-cards .profile-card {
  display: flex;
  gap: 10px;
  background-color: #f7f9fa;
  border-radius: 5px;
  padding: 15px;
  width: 100%;
  margin-bottom: 10px;
}
.profile-cards .profile-card .profile-picture {
  width: 35px;
}
.profile-cards .profile-card .profile-details {
  width: calc(100% - 35px);
}
.profile-cards .profile-card .profile-details > div {
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-cards .profile-card .profile-details .buttons {
  margin: 10px 0 0 0;
  text-align: left;
}

/*# sourceMappingURL=layout.css.map */