@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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
/* Rules for sizing the icon. */
.material-icons.md-16 {
  font-size: 16px;
}

.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);
}

.btn.material {
  display: flex;
  align-items: center;
}

html {
  height: 100%;
}

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

@media (min-width: 801px) {
  body {
    height: 100%;
  }
}
body {
  font-family: Open Sans, sans-serif;
  font-size: 14px;
  background-color: #f9fafb;
}

body.ahr {
  line-height: 1.42857143 !important;
}

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

/** 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
body.banner cintra-app-shell {
  height: calc(100vh - 54px);
}
body.banner cintra-app-shell app-sidebar .sidebar-controls {
  top: 114px;
}
body.banner .splash-msg {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: 54px;
  background: #45474d linear-gradient(#444, #555);
  color: #ffffff;
  font-weight: lighter;
  font-size: 1.2em;
  letter-spacing: 1px;
  text-align: center;
  padding: 10px 5px;
}
body.banner .splash-msg button.dismiss {
  color: #cdcdcd;
  position: absolute;
  top: 10px;
  right: 10px;
}
body.banner .splash-msg.trial {
  background: #444;
  padding-top: 14px;
}
@media (max-width: 1100px) {
  body.banner .splash-msg.trial {
    padding-left: 8px;
    text-align: left;
  }
}
body.banner .splash-msg.trial a.purchse {
  color: orange;
}
body.banner .splash-msg.trial a.purchse:hover {
  text-decoration: underline;
}
body.banner .splash-msg.trial .trial-buttons {
  position: absolute;
  top: 10px;
}
body.banner .splash-msg.trial .trial-buttons.left {
  left: 8px;
}
@media (max-width: 1100px) {
  body.banner .splash-msg.trial .trial-buttons.left {
    display: none;
  }
}
body.banner .splash-msg.trial .trial-buttons.right {
  right: 8px;
}
body.banner .splash-msg.trial .trial-buttons button, body.banner .splash-msg.trial .trial-buttons a {
  min-width: 160px;
  font-size: 12px;
  border-radius: 100px;
}
body.banner .splash-msg.trial .trial-buttons .btn-talent-hub {
  color: #fff;
  width: auto;
}
body.banner .splash-msg.sandbox .flex {
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}
body.banner .splash-msg.info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #F2F9FF;
  color: #242424;
  border-bottom: 1px solid #E3E3E8;
}
body.banner .splash-msg.info button.dismiss {
  color: inherit;
}
body.banner .splash-msg.partner {
  background: #D4E6F1;
  color: rgb(16.6150670795%, 37.9772961816%, 51.0319917441%);
}
body.banner .splash-msg.partner .flex {
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}
body.banner .splash-msg.sm {
  font-size: 1em;
}
body.banner .splash-msg.sm p {
  margin-bottom: 0;
}
body.banner .splash-msg.warning {
  background: #a94442;
}
body.banner .splash-msg.soft-warning {
  background: #fdeeea;
  color: #ED4B27;
  border: 1px solid #f48e77;
}
body.banner .splash-msg.preview {
  background: #f3836b;
}
body.banner .splash-msg.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
body.banner .flex-item-grow {
  flex-grow: 1;
}
body.banner .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);
}
body.banner .unsupported-browser-msg .text {
  padding-right: 5px;
  flex: 1px;
  text-align: center;
}
body.banner .unsupported-browser-msg .close {
  font-size: 18px;
  cursor: pointer;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
body {
  background-color: #f4f4f4;
  overscroll-behavior: none;
}

.page-app {
  display: none;
}

.header {
  border-bottom: 1px solid #C3C3C3;
  background-color: #fff;
  z-index: 9;
}
.header .material-icons {
  font-size: 25px;
}
.header .btn-mobile {
  background: transparent;
  border: 0;
  color: #9EAAB6;
  padding: 0;
  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.3s ease;
}
.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;
}
.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 a .menu-new {
  color: #f3836b;
  font-weight: bold;
}
.main-menu a .menu-padlock-icon {
  display: block;
  float: right;
  width: 20px;
  margin-top: 5px;
  margin-left: 15px;
}
.main-menu .sep {
  background-color: #125d8f;
  height: 1px;
  width: 85%;
  margin: 5px auto;
}
.main-menu {
  /*
  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 .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: 0;
  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.3s ease;
}
.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;
}
.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 a .menu-new {
  color: #f3836b;
  font-weight: bold;
}
.partners-menu a .menu-padlock-icon {
  display: block;
  float: right;
  width: 20px;
  margin-top: 5px;
  margin-left: 15px;
}
.partners-menu .sep {
  background-color: #e16e57;
  height: 1px;
  width: 85%;
  margin: 5px auto;
}
.partners-menu {
  /*
  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 .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: 0;
  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: 0;
  top: 56px;
  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 0;
  color: #757b83;
}

.page-static-header {
  position: sticky;
  background-color: #f9fafb;
  z-index: 8;
  margin-left: 0;
  transition: margin-left 0.3s ease;
}

.main-container {
  padding: 24px;
  overflow-y: auto;
  transition: margin-left 0.3s ease, width 0.3s ease;
}

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

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

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

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

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

.page-container.menu .main-container {
  width: calc(100% - 210px);
  margin-left: 210px;
}
.page-container.menu .employee-ribbon, .page-container.menu .static-header {
  border-bottom: 1px solid #f5f5f5;
}

.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: 0;
}
.page-container.collapsed .main-menu .menu-header {
  flex-wrap: wrap;
}
.page-container.collapsed .main-menu .menu-header .btn-create {
  margin: 0 18px;
}
.page-container.collapsed .main-menu .menu-scroll {
  top: 139px;
  width: 65px;
}
.page-container.collapsed .page-static-header {
  margin-left: 65px;
}
.page-container.collapsed .sub-menu {
  left: 65px;
}
.page-container.collapsed .main-container {
  width: calc(100% - 65px);
  margin-top: 56px;
  margin-right: 56px;
  margin-left: 65px;
}

@media (max-width: 800px) {
  .content-container .appogee-page-header2 header {
    flex-direction: column;
    gap: 5px;
  }
  .page-container.menu .main-container {
    width: 100%;
    margin-left: 0;
  }
  .page-container.menu .employee-ribbon, .page-container.menu .static-header {
    left: 0;
  }
  .page-container.menu .page-static-header {
    margin-left: 0;
  }
}
.content-container .appogee-page-header2 header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-container .appogee-page-header2 header .actions, .content-container .appogee-page-header2 header .actions > .load_hide {
  align-items: center;
  gap: 8px;
}
@media (max-width: 800px) {
  .content-container .appogee-page-header2 header .actions, .content-container .appogee-page-header2 header .actions > .load_hide {
    flex-direction: column;
  }
}
.content-container .appogee-page-header2 header .actions {
  display: flex;
}
.content-container .appogee-page-header2 header .actions > .load_hide[style*=display]:not([style*="display: none"]) {
  display: flex !important;
}
.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 {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: normal;
}
.content-container .appogee-page-header2 h2 {
  font-size: 14px;
  margin: 0 0 6px 0;
}
.content-container .appogee-page-content {
  background-color: #fff;
  border-radius: 24px;
  border: 1px solid #e3e3e8;
  padding: 24px;
  min-height: 300px;
  overflow: auto;
}

.page-app .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
}
.page-app .header > div {
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 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: 0;
  top: 55px;
  overflow-x: hidden;
  overflow-y: hidden;
}
.page-app .main-menu .menu-scroll {
  width: 210px;
  overflow-y: auto;
  padding-bottom: 50px;
  position: fixed;
  bottom: 0;
  top: 108px;
}

.page-app.banner .header {
  top: 54px;
}
.page-app.banner .page-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 .page-container {
  margin-top: 54px;
}

.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 {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e3e3e8;
  margin: 15px 24px 0 24px;
  z-index: 3;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.appogee-tabs.appogee-tabs-inner {
  box-shadow: none;
  border: 1px solid #e6e6e6;
  padding: 24px;
  border-radius: 24px;
}
.appogee-tabs .tab-header-container {
  display: flex;
  align-items: center;
}
.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;
  margin-bottom: 24px;
  border-radius: 5px;
}
.appogee-tabs .tab-header .dropdown {
  z-index: 8;
}
.appogee-tabs .tab-header a {
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
  white-space: nowrap;
}
.appogee-tabs .tab-header a:hover, .appogee-tabs .tab-header a:focus {
  background-color: #e8ebf7;
  color: #1f1b5b;
}
.appogee-tabs .tab-header a {
  margin-right: 2px;
  visibility: hidden;
  color: inherit;
}
.appogee-tabs .tab-header a:last-child {
  margin-right: 0;
}
.appogee-tabs .tab-header a:hover {
  background-color: #e8ebf7;
  color: #1f1b5b;
}
.appogee-tabs .tab-header a.selected {
  font-weight: bold;
  background-color: #e8ebf7;
}
.appogee-tabs .tab-header a.right {
  float: right;
  margin-left: 3px;
}
.appogee-tabs .tab-header a.hidden {
  display: none;
}
.appogee-tabs .tab-header .dropdown.selected {
  background-color: #e8ebf7;
}
.appogee-tabs .tab-header .dropdown {
  display: inline-block;
  border-radius: 8px;
}
.appogee-tabs .tab-header .dropdown > button {
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
  white-space: nowrap;
}
.appogee-tabs .tab-header .dropdown > button:hover, .appogee-tabs .tab-header .dropdown > button:focus {
  background-color: #e8ebf7;
  color: #1f1b5b;
}
.appogee-tabs .tab-header .dropdown > button {
  color: #1674b4;
  border-radius: 8px;
  background-color: inherit;
  min-width: unset;
  height: inherit;
  line-height: inherit;
  margin-left: 2px;
  border: none;
  box-shadow: none;
}
.appogee-tabs .tab-header .dropdown .dropdown-menu {
  padding: 5px;
  border-radius: 8px;
  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: #e8ebf7;
  color: #1f1b5b;
}
.appogee-tabs .tab-header .dropdown > a.selected {
  background-color: #e8ebf7;
}
.appogee-tabs .tab-panel {
  display: none;
  background: #fff;
  border-radius: 20px;
}
.appogee-tabs .tab-panel .subtab-header, .appogee-tabs .tab-panel .subtab-header-x {
  z-index: 3;
}
.appogee-tabs .tab-panel .subtab-header .with-btn .btn-group .btn, .appogee-tabs .tab-panel .subtab-header-x .with-btn .btn-group .btn {
  box-shadow: none;
  background: transparent;
  border: none;
  border-radius: 0;
}
.appogee-tabs .tab-panel .tab-panel {
  padding: 0;
}
.appogee-tabs .tab-panel.selected {
  display: block;
}
.appogee-tabs .subtab-header, .appogee-tabs .subtab-header-x {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: nowrap;
  z-index: 1;
  margin-bottom: 24px;
  border-radius: 5px;
}
.appogee-tabs .subtab-header a, .appogee-tabs .subtab-header-x a {
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
  white-space: nowrap;
}
.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: #e8ebf7;
  color: #1f1b5b;
}
.appogee-tabs .subtab-header a, .appogee-tabs .subtab-header-x a {
  margin-right: 2px;
  visibility: hidden;
  color: inherit;
}
.appogee-tabs .subtab-header a:last-child, .appogee-tabs .subtab-header-x a:last-child {
  margin-right: 0;
}
.appogee-tabs .subtab-header a:hover, .appogee-tabs .subtab-header-x a:hover {
  background-color: #e8ebf7;
  color: #1f1b5b;
}
.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: #e8ebf7;
}
.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: 8px;
}
.appogee-tabs .subtab-header .dropdown > button, .appogee-tabs .subtab-header-x .dropdown > button {
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
  white-space: nowrap;
}
.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: #e8ebf7;
  color: #1f1b5b;
}
.appogee-tabs .subtab-header .dropdown > button, .appogee-tabs .subtab-header-x .dropdown > button {
  color: #1674b4;
  border-radius: 8px;
  background-color: inherit;
  min-width: unset;
  height: inherit;
  line-height: inherit;
  margin-left: 2px;
  border: none;
  box-shadow: none;
}
.appogee-tabs .subtab-header .dropdown .dropdown-menu, .appogee-tabs .subtab-header-x .dropdown .dropdown-menu {
  padding: 5px;
  border-radius: 8px;
  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: #e8ebf7;
  color: #1f1b5b;
}
.appogee-tabs .subtab-header .dropdown.selected, .appogee-tabs .subtab-header-x .dropdown.selected {
  background-color: #e8ebf7;
}
.appogee-tabs .subtab-header .dropdown > a.selected, .appogee-tabs .subtab-header-x .dropdown > a.selected {
  background-color: #e8ebf7;
}
.appogee-tabs .subtab-header-x {
  display: block;
}
.appogee-tabs .subtab-header-x a {
  visibility: visible;
}

/** 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
.alerts-panel-container {
  border-left: 1px solid #C3C3C3;
  z-index: 10;
  background-color: #fff;
  width: 275px;
  position: fixed;
  bottom: 0;
  right: -275px;
  top: 56px;
  transition: right 0.3s ease;
}
.alerts-panel-container header, .alerts-panel-container footer {
  position: absolute;
  right: 0;
  background-color: #fff;
  width: 274px;
}
.alerts-panel-container header {
  height: 25px;
  text-align: right;
  border-bottom: 1px solid #c7d3e1 !important;
  padding: 3px 6px 0;
  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: 0px;
  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: 0px;
  bottom: 0;
}
.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;
}

body.banner .alerts-panel-container {
  top: 110px;
}

.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: 800px) {
  .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: 801px) and (max-width: 1024px) {
  .customer-logo {
    max-width: 235px;
  }
  .customer-logo img {
    max-width: 100%;
  }
}
/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.sub-menu-nil {
  height: 5px;
  background-color: #1674b4;
  z-index: 8;
}

.sub-menu-h {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 0;
  border: 0;
  height: auto;
  overflow-x: auto;
}
.sub-menu-h a {
  padding: 8px 16px;
  display: inline-flex;
  color: #333;
  border-radius: 8px;
  margin: 0;
  flex-shrink: 0;
  text-decoration: none;
}
.sub-menu-h a:hover {
  color: #1f1b5b;
}
.sub-menu-h a.selected {
  color: #1f1b5b;
  background-color: #e8ebf7;
  font-weight: bold;
}
.sub-menu-h .sep {
  border-left: 1px solid #ccc;
  align-self: stretch;
}
.sub-menu-h a.selected + .sep {
  margin-left: 24px;
}
.sub-menu-h .sep + a.selected {
  margin-left: 16px;
}
.sub-menu-h .chevron {
  display: inline-block;
  margin-right: 15px;
  color: #878787;
  align-self: center;
}
.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-menu-h:not(.sub-menu2-h) {
  padding: 20px;
  position: relative;
  border-bottom: 1px solid #e3e3e8;
  background-color: #f9fafb;
}

.sub-menu2-h {
  background: transparent;
  margin: 15px 24px 0 24px;
}
.sub-menu2-h a:hover {
  color: inherit;
}
.sub-menu2-h .form-inline {
  display: inline;
  margin-right: 15px;
}
.sub-menu2-h .form-inline .input-group-addon {
  padding: 0;
  border: 1px solid #f4f4f4;
}
.sub-menu2-h .form-inline .input-group-addon a {
  padding: 6px 8px;
  margin: 0;
  font-size: 12px;
  width: 100%;
}

.sub-menu2-h:not(:has(~ .employee-ribbon)) {
  border-bottom: 1px solid #e3e3e8;
  padding-bottom: 12px;
}

@media (max-width: 800px) {
  .sub-menu-h:not(.sub-menu2-h) {
    padding: 10px;
  }
  .sub-menu-h a {
    padding: 4px 8px;
  }
  .sub-menu2-h {
    margin: 10px;
  }
}
@media screen and (max-width: 0px) {
  .sub-menu-h {
    overflow-x: auto;
    white-space: nowrap;
  }
  .sub-menu-h a {
    display: inline-flex;
    margin-left: 7px;
    margin-right: 7px;
  }
  .sub-menu-h a:first-child {
    margin-left: 14px;
  }
  .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;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.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 {
  height: 130px;
  background-color: #fff;
  padding: 15px;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  transition: left 0.3s ease;
  border: 1px solid #e3e3e8;
  border-radius: 24px;
  margin: 15px 24px 0;
}
.employee-ribbon .employee-header {
  display: flex;
  gap: 15px;
}
.employee-ribbon .employee-header .profile-picture {
  min-width: 100px;
  min-height: 100px;
}
.employee-ribbon .employee-header .profile-picture img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  vertical-align: unset;
}
.employee-ribbon .employee-header .profile-picture .avatar {
  margin-right: 0;
}
.employee-ribbon .employee-header .profile-picture.with-status img {
  width: 80px;
  height: 80px;
}
.employee-ribbon .employee-header .profile-picture.with-status #profileImg {
  margin-left: 10px;
  margin-bottom: 3px;
  width: 80px;
  height: 80px;
}
.employee-ribbon .employee-header .profile-picture.with-status #headerStatusBadge {
  text-align: center;
}
.employee-ribbon .employee-header .employee-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.employee-ribbon .employee-header .info-group {
  display: flex;
  font-size: 14px;
}
.employee-ribbon .employee-header .info-group .info-group-label {
  min-width: 150px;
  color: #878787;
}
.employee-ribbon .employee-header .info-group .info-group-data {
  word-break: break-all;
}
.employee-ribbon .employee-header .employee-details-core {
  text-align: center;
  border-right: 1px solid #ddd;
  padding: 0 48px;
  margin-right: 48px;
  font-size: 14px;
}
.employee-ribbon .employee-header .employee-name {
  font-size: 18px;
  margin-bottom: 8px;
}
.employee-ribbon .employee-header .employee-role {
  color: #333;
}
.employee-ribbon .employee-header .employee-info {
  color: #777;
  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;
}

@media (max-width: 800px) {
  .employee-ribbon .employee-header .employee-details-core {
    margin-right: 0;
    padding: 0;
    border: none;
    max-height: 100px;
    overflow: hidden;
    max-width: 300px;
  }
}
@media (max-width: 1024px) {
  .employee-ribbon .employee-header .employee-details-core {
    max-width: 300px;
    border-right: 0;
  }
}
@media (max-width: 1599px) {
  .page-container.alerts .employee-ribbon .employee-header .employee-details-core {
    border-right: 0;
  }
  .page-container.alerts .employee-ribbon .employee-header .employee-details-secondary {
    display: none;
  }
}
.employee-selector {
  color: #757b83;
  width: 300px;
}
.employee-selector .search-container {
  display: flex;
  align-items: center;
}
.employee-selector select {
  background: transparent !important;
}
.employee-selector .form-control {
  background-color: #fff;
  padding: 13px;
  height: auto;
  font-size: 14px;
}
.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 .has-feedback {
  width: 100%;
}
.employee-selector .has-feedback .ph {
  top: 14px;
  font-size: 20px;
  right: 5px;
}
.employee-selector .has-feedback .glyphicon {
  top: 8px;
  right: 5px;
}
.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;
}
.employee-ribbon-popup .info-group .info-group-label {
  min-width: 150px;
  color: #878787;
}
.employee-ribbon-popup .info-group .info-group-data {
  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-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.dash-panel {
  background-color: #fff;
  border-radius: 24px;
  padding: 24px;
  overflow: auto;
  margin-bottom: 20px;
  border: 1px solid #E3E3E8;
  box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
}
.dash-panel header {
  margin-bottom: 24px;
}
.dash-panel header h4 {
  margin: 0;
  font-weight: bold;
}

.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-salmon {
  color: #f3836b;
}

.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;
  }
}
/** 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-salmon {
  color: #f3836b;
}

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

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

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

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

.account-popup {
  border: 1px solid #f1f1f1;
  border-radius: 3px;
  width: 280px;
  background-color: #fff;
}
.account-popup .content {
  display: flex;
  gap: 10px;
  word-break: break-all;
  border-bottom: 1px solid #f1f1f1;
  padding: 10px;
}
.account-popup .content .image {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
}
.account-popup .content .image img {
  width: auto;
  height: 100%;
}
.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 a {
  display: block;
  color: inherit;
  padding: 13px 20px;
  font-size: 14px;
}
.account-popup .popup-footer a:hover {
  background-color: #f4f4f4;
}

.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;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.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;
  }
}
.tab-panel.tab-dash {
  padding: 0;
}
.tab-panel.tab-dash > .dash-section {
  background: #f4f4f4;
  padding: 0;
}
.tab-panel.tab-dash > .dash-section > .dash-panel {
  border-radius: 20px;
}

.appogee-form {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
}
.appogee-form > div {
  flex: 1 1 500px;
}

.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;
*/
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;
}

td.no-results-img {
  text-align: center;
  font-style: italic;
  align-items: center;
  gap: 5px;
}
td.no-results-img img {
  padding: 15px 0;
  max-height: 180px;
}

.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:not(.no-results-img) {
  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:not(.context-help-left), table.table-round thead tr td .help-icon, table.table-round thead tr td i.context-help:not(.context-help-left) {
  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:not(.context-help-left), table.table-round thead tr td:last-child .help-icon, table.table-round thead tr td:last-child i.context-help:not(.context-help-left) {
  top: 8px;
  right: 8px;
}
table.table-round thead tr.total th, table.table-round thead tr.total td {
  background-color: #D4E6F1;
  color: rgb(16.6150670795%, 37.9772961816%, 51.0319917441%);
}
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: rgb(16.6150670795%, 37.9772961816%, 51.0319917441%);
}
table.table-round thead tr.alert-danger th, table.table-round thead tr.alert-danger td {
  background-color: #F2D7D5;
  color: rgb(52.256684492%, 18.6631016043%, 16.174688057%);
}
table.table-round thead tr.alert-warning th, table.table-round thead tr.alert-warning td {
  background-color: #FCF3CF;
  color: rgb(65.8823529412%, 53.5294117647%, 4.1176470588%);
}
table.table-round thead tr.alert-success th, table.table-round thead tr.alert-success td {
  background-color: #D1F2EB;
  color: rgb(14.7324692589%, 52.1302758391%, 44.1974077767%);
}
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.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: rgb(16.6150670795%, 37.9772961816%, 51.0319917441%);
}
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: rgb(16.6150670795%, 37.9772961816%, 51.0319917441%);
}
table.table-round tbody tr.alert-danger th, table.table-round tbody tr.alert-danger td {
  background-color: #F2D7D5;
  color: rgb(52.256684492%, 18.6631016043%, 16.174688057%);
}
table.table-round tbody tr.alert-warning th, table.table-round tbody tr.alert-warning td {
  background-color: #FCF3CF;
  color: rgb(65.8823529412%, 53.5294117647%, 4.1176470588%);
}
table.table-round tbody tr.alert-success th, table.table-round tbody tr.alert-success td {
  background-color: #D1F2EB;
  color: rgb(14.7324692589%, 52.1302758391%, 44.1974077767%);
}
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: rgb(16.6150670795%, 37.9772961816%, 51.0319917441%);
}
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: rgb(16.6150670795%, 37.9772961816%, 51.0319917441%);
}
table.table-round.table-footer tfoot tr.alert-danger th, table.table-round.table-footer tfoot tr.alert-danger td {
  background-color: #F2D7D5;
  color: rgb(52.256684492%, 18.6631016043%, 16.174688057%);
}
table.table-round.table-footer tfoot tr.alert-warning th, table.table-round.table-footer tfoot tr.alert-warning td {
  background-color: #FCF3CF;
  color: rgb(65.8823529412%, 53.5294117647%, 4.1176470588%);
}
table.table-round.table-footer tfoot tr.alert-success th, table.table-round.table-footer tfoot tr.alert-success td {
  background-color: #D1F2EB;
  color: rgb(14.7324692589%, 52.1302758391%, 44.1974077767%);
}
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.absence-img {
  padding-top: 0;
}
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;
}

table.table-round > tbody > tr > td.inner-table-td {
  padding: 0;
}
table.table-round > tbody > tr > td.inner-table-td.padding-left-40 {
  padding-left: 40px;
}
table.table-round > tbody > tr > td.inner-table-td table.table-round {
  margin-bottom: 0;
  border: 0;
}
table.table-round > tbody > tr > td.inner-table-td table.table-round > thead > tr > th {
  border-radius: 0;
}
table.table-round > tbody > tr > td.inner-table-td table.table-round > tbody > tr:last-child > td {
  border-radius: 0;
  border-bottom: 0;
}
table.table-round > tbody > tr > td.inner-table-td table.table-round > tbody > tr > td:last-child {
  border-right: 0;
}

.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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
/* 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;
}
.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-group .btn:not(.btn-icon), .btn-icon-stroked, .btn-icon-basic, .btn-icon-raised, .btn-icon, .btn-stroked, .btn-basic, .btn-raised, .btn {
  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-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: rgb(86.8287149571%, 88.1664235942%, 88.2693242586%);
  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;
}

/* plain button - no styles */
.btn-plain {
  border: hidden;
  background: none;
}

/* 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: rgb(86.8287149571%, 88.1664235942%, 88.2693242586%);
  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: rgb(81.479324403%, 91.1512327703%, 97.7363618715%);
  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: rgb(99.0441176471%, 90.1225490196%, 88.2107843137%);
  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: rgb(97.8431372549%, 83.2352941176%, 82.1568627451%);
  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: rgb(97.4708263872%, 92.693498452%, 79.3919187108%);
  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: rgb(82.1568627451%, 97.8431372549%, 93.6274509804%);
  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: rgb(86.8287149571%, 88.1664235942%, 88.2693242586%);
  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: rgb(81.479324403%, 91.1512327703%, 97.7363618715%);
  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: rgb(99.0441176471%, 90.1225490196%, 88.2107843137%);
  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: rgb(97.8431372549%, 83.2352941176%, 82.1568627451%);
  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: rgb(97.4708263872%, 92.693498452%, 79.3919187108%);
  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: rgb(82.1568627451%, 97.8431372549%, 93.6274509804%);
  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: rgb(88.8235294118%, 88.8235294118%, 88.8235294118%);
  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;
}
.btn-group .btn:not(.btn-icon).btn-warning {
  color: #dca91b;
  border: 1px solid #dca91b;
}
.btn-group .btn:not(.btn-icon).btn-warning.active, .btn-group .btn:not(.btn-icon).btn-warning:active {
  background-color: #dca91b;
  color: #ffffff;
}

/**
cintra people redesign redesigned all buttons.
rather than messing with the mixins, this file overrides the styles to match the cintra button style
*/
/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
}

.btn.btn-default.btn-selected {
  background-color: #e8ebf7;
}

.input-group .btn.btn-default.btn-icon, .input-group .btn.btn-primary.btn-icon {
  border: none;
  box-shadow: none;
}

.btn.btn-primary, .btn-raised.btn-primary {
  background-color: #1d1a5d;
  color: #fff;
}
.btn.btn-primary:hover, .btn-raised.btn-primary:hover {
  background-color: #333081;
  color: #fff;
}

.btn.btn-default, .btn-raised.btn-default, .btn.btn-warning, .btn-raised.btn-warning {
  border: 1px solid #006eb7;
  background-color: #fff;
  color: #006eb7;
}
.btn.btn-default:hover, .btn-raised.btn-default:hover, .btn.btn-warning:hover, .btn-raised.btn-warning:hover {
  background-color: #eee;
  color: #006eb7;
}

.btn.btn-lg {
  height: 42px;
  min-width: 150px;
  gap: 10px;
}
.btn.btn-lg i.ph {
  font-size: 16px;
}

th .btn.btn-default, th .btn-raised.btn-default, th .btn.btn-warning, th .btn-raised.btn-warning {
  background: transparent;
}

@media (min-width: 801px) {
  .appogee-page-header2 .actions .btn {
    height: 42px;
    min-width: 150px;
    gap: 10px;
  }
  .appogee-page-header2 .actions .btn i.ph {
    font-size: 16px;
  }
}
.btn-group .btn:not(.btn-icon).btn-primary {
  color: #fff;
  background-color: #1d1a5d;
}

.form-buttons {
  border: none;
  padding: 0;
}
.form-buttons .btn {
  min-width: 150px;
}

.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: 800px) {
  .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;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
/* jquery ui */
.ui-dialog {
  z-index: 600;
  position: absolute;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  outline: none;
  background: #fff;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  margin: 20px 0;
}
.ui-dialog a, .ui-dialog button {
  outline: none;
}
.ui-dialog a, .ui-dialog button:focus {
  outline: none;
}

.ui-dialog .actions-container, cintra-modal-container .actions-container {
  text-align: right;
}
.ui-dialog .action-comments-container, cintra-modal-container .action-comments-container {
  display: none;
}
.ui-dialog .allowance-details-container section, cintra-modal-container .allowance-details-container section {
  margin: 10px 0;
}
.ui-dialog .allowance-details-container section header, cintra-modal-container .allowance-details-container section header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.ui-dialog .allowance-details-container section header h4, cintra-modal-container .allowance-details-container section header h4 {
  margin: 0;
  font-weight: bold;
}
.ui-dialog .request-override-container, cintra-modal-container .request-override-container {
  margin-top: 10px;
}
.ui-dialog .request-override-container .flex, cintra-modal-container .request-override-container .flex {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: start;
}
.ui-dialog .request-override-container .form-container, cintra-modal-container .request-override-container .form-container {
  margin-bottom: 0;
}
.ui-dialog .request-reason-container, cintra-modal-container .request-reason-container {
  padding-top: 8px;
}
.ui-dialog .recurring-container, cintra-modal-container .recurring-container {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
}
.ui-dialog .recurring-container > *, cintra-modal-container .recurring-container > * {
  margin-right: 10px;
  width: 50%;
}
.ui-dialog, cintra-modal-container {
  border-radius: 24px;
}
.ui-dialog .appogee-tabs .tab-header, cintra-modal-container .appogee-tabs .tab-header {
  background-color: #e3e3e8;
  border-radius: 16px;
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
}
.ui-dialog .appogee-tabs .tab-header a, .ui-dialog .appogee-tabs .tab-header button, cintra-modal-container .appogee-tabs .tab-header a, cintra-modal-container .appogee-tabs .tab-header button {
  border-radius: 16px;
  color: inherit;
}
.ui-dialog .appogee-tabs .tab-header a:hover, .ui-dialog .appogee-tabs .tab-header button:hover, cintra-modal-container .appogee-tabs .tab-header a:hover, cintra-modal-container .appogee-tabs .tab-header button:hover {
  text-decoration: underline;
  background-color: inherit;
}
.ui-dialog .appogee-tabs .tab-header a.selected, .ui-dialog .appogee-tabs .tab-header button.selected, .ui-dialog .appogee-tabs .tab-header .dropdown.selected, cintra-modal-container .appogee-tabs .tab-header a.selected, cintra-modal-container .appogee-tabs .tab-header button.selected, cintra-modal-container .appogee-tabs .tab-header .dropdown.selected {
  background-color: #1d1a5d;
  color: #fff;
}
.ui-dialog .appogee-tabs .tab-header a.selected:hover, .ui-dialog .appogee-tabs .tab-header button.selected:hover, .ui-dialog .appogee-tabs .tab-header .dropdown.selected:hover, cintra-modal-container .appogee-tabs .tab-header a.selected:hover, cintra-modal-container .appogee-tabs .tab-header button.selected:hover, cintra-modal-container .appogee-tabs .tab-header .dropdown.selected:hover {
  text-decoration: none;
}
.ui-dialog .appogee-tabs .tab-header .dropdown.open, cintra-modal-container .appogee-tabs .tab-header .dropdown.open {
  background-color: inherit;
}
.ui-dialog .appogee-tabs .tab-header .dropdown.open button:focus, cintra-modal-container .appogee-tabs .tab-header .dropdown.open button:focus {
  background-color: inherit;
}
.ui-dialog .appogee-tabs .tab-header .dropdown.selected button:hover, cintra-modal-container .appogee-tabs .tab-header .dropdown.selected button:hover {
  color: #fff;
}
.ui-dialog .appogee-tabs .tab-header .dropdown-menu a, cintra-modal-container .appogee-tabs .tab-header .dropdown-menu a {
  color: #333;
}
.ui-dialog .appogee-tabs .tab-header .dropdown-menu a.selected, cintra-modal-container .appogee-tabs .tab-header .dropdown-menu a.selected {
  color: #fff;
}
.ui-dialog .appogee-tabs .tab-panel, cintra-modal-container .appogee-tabs .tab-panel {
  padding: 20px 0;
}
.ui-dialog .appogee-tabs .tab-panel .tab-panel, cintra-modal-container .appogee-tabs .tab-panel .tab-panel {
  padding: 0 0 0 20px;
}

@media (min-width: 801px) {
  .ui-dialog {
    max-width: 95%;
  }
}
@media (max-width: 800px) {
  .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 {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 24px;
  cursor: move;
  text-align: center;
  border-bottom: 1px solid #e3e3e3;
  box-shadow: 0 0 15px 0 rgba(51, 51, 51, 0.1);
}

.ui-dialog-title {
  font-size: 18px;
  color: #231D45;
  font-weight: bold;
}

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

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

.ui-dialog-content {
  background-color: #ffffff;
  min-height: auto !important;
  overflow-y: auto;
  padding: 24px;
  margin-top: 15px;
  padding-top: 9px;
}
.ui-dialog-content .alert {
  box-shadow: none;
}

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

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

.ui-dialog-buttonpane {
  background: #ffffff;
  text-align: right;
  padding: 12px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  border-top: 1px solid #e3e3e3;
  box-shadow: 0 0 15px 0 rgba(51, 51, 51, 0.1);
}
.ui-dialog-buttonpane button.btn, .ui-dialog-buttonpane a.btn {
  margin-left: 5px;
  outline: none;
  min-width: 100px;
}

.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;
}

cintra-modal-container.dlg-size-md .ci-modal-container__panel--sm {
  max-width: min(672px, 80dvw);
}
cintra-modal-container.dlg-size-lg .ci-modal-container__panel--sm {
  max-width: min(960px, 80dvw);
}
cintra-modal-container.dlg-size-xl .ci-modal-container__panel--sm {
  max-width: min(1340px, 80dvw);
}

cintra-modal-container .dialog {
  padding: 0;
}

cintra-modal-container:not(.dlg-request) .dialog-buttons, cintra-modal-container:not(.dlg-request) .buttons {
  position: sticky;
  bottom: calc(-1 * var(--spacing-6xl));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--button-gap-md);
  margin: var(--spacing-3xl) calc(-1 * var(--spacing-6xl)) calc(-1 * var(--spacing-6xl));
  padding: var(--spacing-3xl) var(--spacing-6xl);
  border-top: 1px solid var(--colors-border-primary);
  background-color: var(--colors-background-bg-secondary);
  text-align: initial;
}
cintra-modal-container:not(.dlg-request) .dialog-buttons button.btn, cintra-modal-container:not(.dlg-request) .dialog-buttons a.btn, cintra-modal-container:not(.dlg-request) .buttons button.btn, cintra-modal-container:not(.dlg-request) .buttons a.btn {
  float: none;
  margin: 0;
}
cintra-modal-container:not(.dlg-request) .buttons > .btn:first-child {
  margin-right: auto;
}
cintra-modal-container:not(.dlg-request) .dialog-buttons-flex {
  justify-content: space-between;
}
cintra-modal-container:not(.dlg-request) .dialog-buttons.center, cintra-modal-container:not(.dlg-request) .buttons.center {
  justify-content: center;
}
cintra-modal-container:not(.dlg-request) .dialog-buttons.center > .btn:first-child, cintra-modal-container:not(.dlg-request) .buttons.center > .btn:first-child {
  margin-right: 0;
}

cintra-modal-container .ci-modal-template__footer-start .ci-button, cintra-modal-container .ci-modal-template__footer-end .ci-button {
  min-width: 100px;
}

.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 margins and paddings */
.dialog-alert {
  display: none;
  z-index: 10;
}
.dialog-alert .alert {
  box-shadow: none;
  padding: 0;
}

.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 .ui-dialog-title {
  color: #b62116;
}
.dlg-validation .ci-modal-template__header .ci-modal-template__title {
  color: #cf1337;
}
.dlg-validation .ui-dialog-content .alert p {
  font-size: inherit;
}
.dlg-validation > p {
  padding: 10px 0 0;
  margin: 0;
}
.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;
}

.error-msg {
  color: red;
  display: flex;
  justify-content: end;
  margin-top: 5px;
  margin-right: 5px;
  font-weight: bold;
}

@media screen and (max-width: 0px) {
  .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;
  padding-top: 10px;
}

.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;
}

.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;
}

.w10 {
  width: 10px;
}

.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;
}

.w160 {
  width: 160px;
}

.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-min-150 {
  min-width: 150px;
}

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

.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;
}

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

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

/* 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;
}
.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 rgb(85.6862745098%, 85.6862745098%, 85.6862745098%);
}
.ui-datepicker .ui-datepicker-title select.force-white-bg {
  background-color: white;
}
.ui-datepicker .ui-datepicker-title select {
  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-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;
  }
}
.filters .team-filter-group {
  vertical-align: top;
}

.team-filter-group .include-child-teams-filter {
  margin-top: 4px;
}
.team-filter-group .include-child-teams-filter .chk {
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 0;
}

.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;
}
.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 rgb(85.6862745098%, 85.6862745098%, 85.6862745098%);
}
.location-selector .dropdown .btn.force-white-bg {
  background-color: white;
}
.location-selector .dropdown .btn {
  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-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;
  font-size: 11px;
}

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

.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-40 {
  width: 40px;
  height: 40px;
  background-size: 40px !important;
  font-size: 13px;
  padding-top: 11px;
}

.avatar-40.initials {
  padding-top: 12px;
}

.avatar-50 {
  width: 50px;
  height: 50px;
  background-size: 50px !important;
  font-size: 16px;
  padding-top: 14px;
}

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

.avatar-65 {
  width: 65px;
  height: 65px;
  background-size: 65px !important;
  font-size: 20px;
  padding-top: 18px;
}

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

.avatar-90 {
  width: 90px;
  height: 90px;
  background-size: 90px !important;
  font-size: 26px;
  padding-top: 26px;
}

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

.avatar-100 {
  width: 100px;
  height: 100px;
  background-size: 100px !important;
  font-size: 32px;
  padding-top: 28px;
}

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

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

.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: #fff;
  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: #fff;
  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;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.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 5px 30px 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-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.alerts-view .assistant-card {
  border-radius: 6px;
  box-shadow: 0 0 15px 0 rgba(51, 51, 51, 0.1);
}
.alerts-view .assistant-card .card-header {
  text-align: center;
  font-weight: bold;
  padding: 12px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: #1f1b5b;
  background-color: #e8ebf7;
}
.alerts-view .assistant-card .card-header.inactive {
  color: #b62116;
  text-decoration: line-through;
}
.alerts-view .assistant-card .card-body {
  padding: 12px;
}
.alerts-view .assistant-card .card-body img {
  max-width: 100%;
}
.alerts-view .assistant-card .card-body ul {
  margin-bottom: 0;
}
.alerts-view .assistant-card .card-buttons {
  display: flex;
  justify-content: space-around;
  padding: 0 12px 12px 12px;
}
.alerts-view .assistant-card .card-buttons a, .alerts-view .assistant-card .card-buttons button {
  min-width: 100px;
}
.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;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.badge {
  background: none;
  border: solid 2px;
  min-width: 50px;
  font-size: 0.8em;
  font-weight: normal;
}
.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 {
  border-radius: 30px;
  font-size: 12px;
}
.badge.badge-blue {
  border-color: #b2ddff;
  color: #175cd3;
  background-color: #eff8ff;
}
.badge.badge-green {
  border-color: #a9efc5;
  color: #067647;
  background-color: #ecfdf3;
  font-size: 12px;
}
.badge.badge-red {
  border-color: #fecdca;
  color: #b42318;
  background-color: #fef3f2;
  font-size: 12px;
}
.badge.badge-orange {
  border-color: #fedf89;
  color: #b54707;
  background-color: #fffaeb;
  font-size: 12px;
}
.badge.badge-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.badge.badge-dot::before {
  content: " ";
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.badge.badge-dot.badge-blue::before {
  background-color: #175cd3;
}
.badge.badge-dot.badge-green::before {
  background-color: #067647;
}
.badge.badge-dot.badge-red::before {
  background-color: #b42318;
}
.badge.badge-dot.badge-orange::before {
  background-color: #b54707;
}
.badge.badge-label {
  padding: 2px 14px 2px 2px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.badge.badge-label > span {
  border: 2px solid;
  background-color: #fff;
  border-radius: 30px;
  display: inline-block;
  padding: 3px 6px;
}
.badge.badge-label > .ph {
  font-size: 16px;
  font-weight: bold;
}
.badge.badge-label.badge-blue > span {
  border-color: #b2ddff;
}
.badge.badge-label.badge-green > span {
  border-color: #a9efc5;
}
.badge.badge-label.badge-red > span {
  border-color: #fecdca;
}
.badge.badge-label.badge-orange > span {
  border-color: #fedf89;
}
.badge.badge-pulse {
  min-width: 30px;
  max-width: 30px;
  min-height: 30px;
  max-height: 30px;
}
.badge.badge-pulse.badge-dot::before {
  width: 12px;
  height: 12px;
}
.badge.badge-pulse.badge-blue {
  animation: pulse-info 2s infinite;
}
.badge.badge-pulse.badge-green {
  animation: pulse-success 2s infinite;
}
.badge.badge-pulse.badge-red {
  animation: pulse-danger 2s infinite;
}
.badge.badge-pulse.badge-orange {
  animation: pulse-warning 2s infinite;
}
@keyframes pulse-info {
  0% {
    background-color: #eff8ff;
  }
  50% {
    background-color: #b2ddff;
  }
}
@keyframes pulse-success {
  0% {
    background-color: #ecfdf3;
  }
  50% {
    background-color: #a9efc5;
  }
}
@keyframes pulse-danger {
  0% {
    background-color: #fef3f2;
  }
  50% {
    background-color: #fecdca;
  }
}
@keyframes pulse-warning {
  0% {
    background-color: #fffaeb;
  }
  50% {
    background-color: #fedf89;
  }
}
.badge {
  /*
  &.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-round {
  display: inline;
  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-light-grey:hover {
  background-color: #878787;
  color: #fff;
}

a.badge-light-grey:focus {
  border-color: #878787;
  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;
  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;
}

.badge-long {
  white-space: normal;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.dlg-sexy .ui-dialog-titlebar {
  display: none;
}
.dlg-sexy .dialog {
  padding: 0;
  margin-top: 0;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.dlg-sexy .ui-dialog-content .head {
  min-height: 155px;
  background-image: url("/img/core/dlg-sexy-bg.png");
  color: #ffffff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.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: 0px) {
  .dlg-sexy .ui-dialog-content .head {
    border-radius: 0;
  }
}
.notifier {
  display: none;
  position: absolute;
  text-align: center;
  padding: 3px 20px;
  background-color: #f4f4f4;
  color: rgb(16.6150670795%, 37.9772961816%, 51.0319917441%);
  border: 1px solid rgb(68.0495356037%, 81.4241486068%, 89.5975232198%);
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: 20px center;
  margin-top: -5px;
  z-index: 10;
  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: rgb(52.256684492%, 18.6631016043%, 16.174688057%);
  border-color: rgb(90.174688057%, 69.7682709447%, 68.256684492%);
}

.notifier.success {
  background-color: #D1F2EB;
  color: rgb(14.7324692589%, 52.1302758391%, 44.1974077767%);
  border-color: rgb(66.3675639747%, 90.4951811233%, 85.3772017281%);
}

.mobile-app .notifier {
  margin-top: -20px;
  max-width: 100%;
  background-color: #e8ebf7;
  color: #1f1b5b;
  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-equal {
  display: flex;
  gap: 10px;
}
.flex-equal > div {
  flex-grow: 1;
  flex-basis: 0;
}

.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;
}
@media (max-width: 550px) {
  .date-range-container {
    flex-direction: column;
    align-items: stretch;
  }
  .date-range-container input, .date-range-container select {
    width: 100%;
    margin: 5px 0;
  }
  .date-range-container > div {
    display: flex;
    flex-direction: row;
    margin-left: 0;
  }
}

.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: 0px) {
  .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-salmon {
  color: #f3836b;
}

.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:nth-child(2) h4, .contents-page > .tile > div:nth-child(2) h4 {
  margin-top: 2px;
}
.contents-page > a > div:nth-child(2) p, .contents-page > .tile > div:nth-child(2) 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 > a.disabled {
  opacity: 0.7;
}
.contents-page > a.disabled .package {
  color: #a94442;
}
.contents-page > a.disabled .upgrade {
  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 {
  html, body {
    height: auto !important;
    overflow: visible !important;
  }
  cintra-app-shell, .main-container, .layout-content {
    height: auto !important;
    overflow: visible !important;
  }
  cintra-app-shell app-sidebar {
    display: none !important;
  }
  .no-print, .no-print * {
    display: none !important;
  }
}
.btn i.ph {
  position: relative;
  top: 1px;
}

p i.ph {
  font-size: 18px;
  position: relative;
  top: 3px;
}

th i.ph {
  font-size: 18px;
  position: relative;
  top: 3px;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.layout-container:has(.sb-expanded) .main-container {
  width: calc(100vw - 220px);
}
.layout-container:has(.sb-expanded) .page-container.alerts .main-container {
  width: calc(100vw - 220px - 275px);
}

.layout-container:has(.sb-collapsed) .main-container {
  width: calc(100vw - 111px);
}
.layout-container:has(.sb-collapsed) .page-container.alerts .main-container {
  width: calc(100vw - 111px - 275px);
}

.page-app.layout-pending .main-container {
  transition: none;
}

.main-container {
  height: calc(100vh - 56px);
  width: 100vw;
}
@media (max-width: 800px) {
  .main-container {
    height: calc(100vh - 112px - 70px);
  }
}

.page-container.submenu-h .main-container {
  height: calc(100vh - 56px - 53px);
}
@media (max-width: 800px) {
  .page-container.submenu-h .main-container {
    height: calc(100vh - 112px - 70px - 53px);
  }
}

.page-container.submenu-h.submenu2-h .main-container {
  height: calc(100vh - 56px - 53px - 20px - 53px);
}
@media (max-width: 800px) {
  .page-container.submenu-h.submenu2-h .main-container {
    height: calc(100vh - 112px - 70px - 53px - 20px - 53px);
  }
}

.page-container.submenu-h.ribbon .main-container {
  height: calc(100vh - 56px - 53px - 20px - 130px - 5px);
}
@media (max-width: 800px) {
  .page-container.submenu-h.ribbon .main-container {
    height: calc(100vh - 112px - 70px - 53px - 20px - 130px - 5px);
  }
}

.page-container.submenu-h.ribbon-sm .main-container {
  height: calc(100vh - 56px - 53px - 20px - 65px - 5px);
}
@media (max-width: 800px) {
  .page-container.submenu-h.ribbon-sm .main-container {
    height: calc(100vh - 112px - 70px - 53px - 20px - 65px - 5px);
  }
}

.page-container.submenu-h.submenu2-h.ribbon .main-container {
  height: calc(100vh - 56px - 53px - 20px - 53px - 130px - 5px);
}
@media (max-width: 800px) {
  .page-container.submenu-h.submenu2-h.ribbon .main-container {
    height: calc(100vh - 112px - 70px - 53px - 20px - 53px - 130px - 5px);
  }
}

.page-container.submenu-h.submenu2-h.ribbon-sm .main-container {
  height: calc(100vh - 56px - 53px - 20px - 53px - 65px - 5px);
}
@media (max-width: 800px) {
  .page-container.submenu-h.submenu2-h.ribbon-sm .main-container {
    height: calc(100vh - 112px - 70px - 53px - 20px - 53px - 65px - 5px);
  }
}

body.banner .main-container {
  height: calc(100vh - 54px - 56px);
}
@media (max-width: 800px) {
  body.banner .main-container {
    height: calc(100vh - 54px - 112px - 70px);
  }
}
body.banner .page-container.submenu-h .main-container {
  height: calc(100vh - 54px - 56px - 53px);
}
@media (max-width: 800px) {
  body.banner .page-container.submenu-h .main-container {
    height: calc(100vh - 54px - 112px - 70px - 53px);
  }
}
body.banner .page-container.submenu-h.submenu2-h .main-container {
  height: calc(100vh - 54px - 56px - 53px - 20px - 53px);
}
@media (max-width: 800px) {
  body.banner .page-container.submenu-h.submenu2-h .main-container {
    height: calc(100vh - 54px - 112px - 70px - 53px - 20px - 53px);
  }
}
body.banner .page-container.submenu-h.ribbon .main-container {
  height: calc(100vh - 54px - 56px - 53px - 20px - 130px - 5px);
}
@media (max-width: 800px) {
  body.banner .page-container.submenu-h.ribbon .main-container {
    height: calc(100vh - 54px - 112px - 70px - 53px - 20px - 130px - 5px);
  }
}
body.banner .page-container.submenu-h.ribbon-sm .main-container {
  height: calc(100vh - 54px - 56px - 53px - 20px - 65px - 5px);
}
@media (max-width: 800px) {
  body.banner .page-container.submenu-h.ribbon-sm .main-container {
    height: calc(100vh - 54px - 112px - 70px - 53px - 20px - 65px - 5px);
  }
}
body.banner .page-container.submenu-h.submenu2-h.ribbon .main-container {
  height: calc(100vh - 54px - 56px - 53px - 20px - 53px - 130px - 5px);
}
@media (max-width: 800px) {
  body.banner .page-container.submenu-h.submenu2-h.ribbon .main-container {
    height: calc(100vh - 54px - 112px - 70px - 53px - 20px - 53px - 130px - 5px);
  }
}
body.banner .page-container.submenu-h.submenu2-h.ribbon-sm .main-container {
  height: calc(100vh - 54px - 56px - 53px - 20px - 53px - 65px - 5px);
}
@media (max-width: 800px) {
  body.banner .page-container.submenu-h.submenu2-h.ribbon-sm .main-container {
    height: calc(100vh - 54px - 112px - 70px - 53px - 20px - 53px - 65px - 5px);
  }
}

/** 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
.alert {
  padding: 16px;
  border: none;
  border-radius: 16px;
}
.alert > h3 {
  margin-top: 0;
}
.alert > section > h4 {
  margin-bottom: 3px;
}
.alert h4 {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert h4 .ph {
  font-size: 23px;
  color: #006EB7;
}
.alert p .ph {
  color: #006EB7;
}
.alert h4:has(.ph) ~ p, .alert h4:has(.ph) ~ div, .alert h4:has(.ph) ~ ul {
  margin-left: 32px;
}
.alert h4:has(.ph) ~ ul {
  margin-top: 6px;
  padding-left: 32px;
}
.alert p:has(.ph) ~ p {
  margin-left: 21px;
}
.alert a:not(.btn) {
  text-decoration: underline;
}

.alert-info {
  color: #242424;
  border: 1px solid #E3E3E8;
  background-color: #F2F9FF;
}

.alert-warning {
  color: #996E00;
  border: 1px solid #E3E3E8;
  background-color: #FFF7D1;
}
.alert-warning h4 .ph, .alert-warning p .ph {
  color: #996E00;
}

.alert-success {
  color: #242424;
  border: 1px solid #E3E3E8;
  background-color: #CFF6E5;
}

.alert-danger {
  color: #242424;
  border: 1px solid #E3E3E8;
  background-color: #FFEAEE;
}

.alerts-view .alert {
  padding: 10px 5px;
  border-radius: 0;
  box-shadow: none;
}

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

.alert-about {
  display: none;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.dropdown-backdrop {
  position: static;
}

.dropdown-menu, .dropdown-submenu {
  padding: 5px;
}

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

.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: #1d1a5d;
  background-image: none;
  color: #ffffff;
}

.dropdown-menu > li > label {
  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;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
label {
  font-weight: normal;
}

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

.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: 0;
  border: 0;
}

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

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.help-block {
  font-size: 12px;
}

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

.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;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.soft-hide, .soft-hidden {
  display: none;
}

.table-responsive {
  border: none !important;
}
@media screen and (max-width: 1024px) {
  .table-responsive {
    width: 100%;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.multi-selector .selected-items, .mulit-team-emp-selector .team-emp-container {
  display: flex;
  flex-wrap: wrap;
}
.multi-selector .selected-items .selected, .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;
}
.multi-selector .selected-items .selected .name, .mulit-team-emp-selector .team-emp-container .selected .name {
  flex: 1;
}
.multi-selector .selected-items .selected .remove, .mulit-team-emp-selector .team-emp-container .selected .remove {
  cursor: pointer;
  color: #636363;
  padding-left: 10px;
}
.multi-selector .selected-items .selected .remove:hover, .mulit-team-emp-selector .team-emp-container .selected .remove:hover {
  color: #b62116;
}

.mulit-team-emp-selector select {
  margin: 0px;
}

.multi-selector select {
  margin: 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;
}

/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.ahr .text-info {
  color: #31708f !important;
}
.ahr .text-warning {
  color: #8a6d3b !important;
}
.ahr .text-success {
  color: #3c763d !important;
}
.ahr .text-danger {
  color: #a94442 !important;
}

a {
  color: #006eb7;
}

a:hover {
  color: #006eb7;
}

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: 800px) {
  .desktop-only {
    display: none !important;
  }
}
@media (min-width: 801px) {
  .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-flex {
  display: flex;
  justify-content: space-between;
}

.filters {
  margin-bottom: 10px;
}

@media (max-width: 799px) {
  .filters-flex {
    flex-direction: column;
  }
  .filters .filter-group label {
    display: none;
  }
  .filters .filter-group .radio-inline label {
    display: initial;
  }
  .filters .filter-group label.chk {
    display: initial;
  }
  .filters .filter-group select, .filters .filter-group input[type=text] {
    width: 100%;
    margin-bottom: 10px;
  }
}
@media (min-width: 800px) {
  .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-0 {
  margin-top: 0;
}

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

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

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

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

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

.mb-0 {
  margin-bottom: 0;
}

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

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

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

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

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

.ml-0 {
  margin-left: 0;
}

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

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

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

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

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

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

.mr-0 {
  margin-right: 0;
}

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

.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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.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;
}
.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-icon, .btn-icon-raised, .btn-basic, .btn-icon-basic, .btn-stroked, .btn-icon-stroked, .btn-group .btn:not(.btn-icon) {
  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, .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: rgb(86.8287149571%, 88.1664235942%, 88.2693242586%);
  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;
}

/* plain button - no styles */
.btn-plain {
  border: hidden;
  background: none;
}

/* 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: rgb(86.8287149571%, 88.1664235942%, 88.2693242586%);
  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: rgb(81.479324403%, 91.1512327703%, 97.7363618715%);
  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: rgb(99.0441176471%, 90.1225490196%, 88.2107843137%);
  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: rgb(97.8431372549%, 83.2352941176%, 82.1568627451%);
  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: rgb(97.4708263872%, 92.693498452%, 79.3919187108%);
  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: rgb(82.1568627451%, 97.8431372549%, 93.6274509804%);
  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: rgb(86.8287149571%, 88.1664235942%, 88.2693242586%);
  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: rgb(81.479324403%, 91.1512327703%, 97.7363618715%);
  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: rgb(99.0441176471%, 90.1225490196%, 88.2107843137%);
  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: rgb(97.8431372549%, 83.2352941176%, 82.1568627451%);
  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: rgb(97.4708263872%, 92.693498452%, 79.3919187108%);
  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: rgb(82.1568627451%, 97.8431372549%, 93.6274509804%);
  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: rgb(88.8235294118%, 88.8235294118%, 88.8235294118%);
  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;
}
.btn-group .btn:not(.btn-icon).btn-warning {
  color: #dca91b;
  border: 1px solid #dca91b;
}
.btn-group .btn:not(.btn-icon).btn-warning.active, .btn-group .btn:not(.btn-icon).btn-warning:active {
  background-color: #dca91b;
  color: #ffffff;
}

/**
cintra people redesign redesigned all buttons.
rather than messing with the mixins, this file overrides the styles to match the cintra button style
*/
/** 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-salmon {
  color: #f3836b;
}

.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 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-salmon {
  color: #f3836b;
}

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

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

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

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

/* these colours look awful in alerts so commenting it out now
$cintra-alert-info-bg: $cintra-blue-100;
$cintra-alert-info-border: $cintra-blue-200;
$cintra-alert-info-color: $cintra-blue-400;
$cintra-alert-info-icon-color: $cintra-blue-400;

// alert success
$cintra-alert-success-bg: $cintra-green-100;
$cintra-alert-success-border: $cintra-green-200;
$cintra-alert-success-color: $cintra-green-400;
$cintra-alert-success-icon-color: $cintra-green-400;

// alert warning
$cintra-alert-warning-bg: $cintra-yellow-100;
$cintra-alert-warning-border: $cintra-yellow-200;
$cintra-alert-warning-color: $cintra-yellow-400;
$cintra-alert-warning-icon-color: $cintra-yellow-400;

// alert danger
$cintra-alert-danger-bg: $cintra-red-100;
$cintra-alert-danger-border: $cintra-red-200;
$cintra-alert-danger-color: $cintra-red-400;
$cintra-alert-danger-icon-color: $cintra-red-400;
*/
/**
new cintra breakpoints are:
 - mobile: 0px - 800px
 - tablet: 801px - 1024px
 - desktop: 1025px - 1599px

this does not fit into the previous model, where xs is now obsolete
therefore, we are setting xs-max to the same as sm-max
 */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
}

.btn.btn-default.btn-selected {
  background-color: #e8ebf7;
}

.input-group .btn.btn-default.btn-icon, .input-group .btn.btn-primary.btn-icon {
  border: none;
  box-shadow: none;
}

.btn.btn-primary, .btn-raised.btn-primary {
  background-color: #1d1a5d;
  color: #fff;
}
.btn.btn-primary:hover, .btn-raised.btn-primary:hover {
  background-color: #333081;
  color: #fff;
}

.btn.btn-default, .btn-raised.btn-default, .btn.btn-warning, .btn-raised.btn-warning {
  border: 1px solid #006eb7;
  background-color: #fff;
  color: #006eb7;
}
.btn.btn-default:hover, .btn-raised.btn-default:hover, .btn.btn-warning:hover, .btn-raised.btn-warning:hover {
  background-color: #eee;
  color: #006eb7;
}

.btn.btn-lg {
  height: 42px;
  min-width: 150px;
  gap: 10px;
}
.btn.btn-lg i.ph {
  font-size: 16px;
}

th .btn.btn-default, th .btn-raised.btn-default, th .btn.btn-warning, th .btn-raised.btn-warning {
  background: transparent;
}

@media (min-width: 801px) {
  .appogee-page-header2 .actions .btn {
    height: 42px;
    min-width: 150px;
    gap: 10px;
  }
  .appogee-page-header2 .actions .btn i.ph {
    font-size: 16px;
  }
}
.btn-group .btn:not(.btn-icon).btn-primary {
  color: #fff;
  background-color: #1d1a5d;
}

.form-buttons {
  border: none;
  padding: 0;
}
.form-buttons .btn {
  min-width: 150px;
}

.input-group .form-control:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.input-group .form-control:last-child {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.input-group .input-group-btn:first-child button:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 0px;
  border-bottom-right-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: 8px;
  border-bottom-right-radius: 8px;
}
.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: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.input-group .input-group-addon:last-child {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.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 rgb(85.6862745098%, 85.6862745098%, 85.6862745098%);
}
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;
}
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 rgb(85.6862745098%, 85.6862745098%, 85.6862745098%);
}
select.form-control.force-white-bg {
  background-color: white;
}
select.form-control {
  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[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;
}

/** 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-salmon {
  color: #f3836b;
}

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

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

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

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

.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: 8px;
  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: 8px;
  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;
  height: 38px;
  padding: 0px 20px;
  margin-left: -20px;
  border-radius: 8px;
  transition: 1s;
  font-size: 13px;
  border: 1px solid #006eb7;
  background-color: #fff;
  color: #006eb7;
}
.form-container input[type=file]::file-selector-button:hover {
  background-color: #eee;
  color: #006eb7;
}
.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: 8px;
}
.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: 8px;
}
.form-container .input-group.prefix.prefix > .prefix, .form-container .input-group.postfix.prefix > .prefix {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  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;
}
.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 rgb(85.6862745098%, 85.6862745098%, 85.6862745098%);
}
.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 select.form-control, .form-container .input-group.postfix.prefix > .prefix select.form-control {
  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 .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: 8px;
  border-bottom-left-radius: 8px;
}
.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: 8px;
  border-bottom-right-radius: 8px;
  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;
}
.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 rgb(85.6862745098%, 85.6862745098%, 85.6862745098%);
}
.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 > .postfix select, .form-container .input-group.postfix.postfix > .postfix select {
  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 > .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;
}
.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 rgb(85.6862745098%, 85.6862745098%, 85.6862745098%);
}
.form-container .input-group.prefix .prefix select.force-white-bg {
  background-color: white;
}
.form-container .input-group.prefix .prefix select {
  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 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;
}
.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 rgb(85.6862745098%, 85.6862745098%, 85.6862745098%);
}
.form-container .input-group.postfix .postfix select.force-white-bg {
  background-color: white;
}
.form-container .input-group.postfix .postfix select {
  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 .form-control {
  box-sizing: border-box;
  display: block;
  border: 1px solid #C3C3C3;
  color: #636363;
  border-radius: 8px;
  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: 8px;
  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: 8px;
}
.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: 8px;
}
.form-container.form-lg .input-group.prefix.prefix > .prefix, .form-container.form-lg .input-group.postfix.prefix > .prefix {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  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;
}
.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 rgb(85.6862745098%, 85.6862745098%, 85.6862745098%);
}
.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 select.form-control, .form-container.form-lg .input-group.postfix.prefix > .prefix select.form-control {
  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 .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: 8px;
  border-bottom-left-radius: 8px;
}
.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: 8px;
  border-bottom-right-radius: 8px;
  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;
}
.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 rgb(85.6862745098%, 85.6862745098%, 85.6862745098%);
}
.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 > .postfix select, .form-container.form-lg .input-group.postfix.postfix > .postfix select {
  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 > .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;
}
.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 rgb(85.6862745098%, 85.6862745098%, 85.6862745098%);
}
.form-container.form-lg .input-group.prefix .prefix select.force-white-bg {
  background-color: white;
}
.form-container.form-lg .input-group.prefix .prefix select {
  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 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: 8px;
  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: 8px;
  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: 8px;
  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: 8px;
  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: 8px;
  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 */
}
.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 {
  /* Create a custom radio button */
}
.chk .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #C3C3C3;
  border-radius: 50%;
}
.chk {
  /* On mouse-over, add a grey background color */
}
.chk:hover input ~ .checkmark {
  background-color: #ABABAB;
}
.chk {
  /* Create the indicator (the dot/circle - hidden when not checked) */
}
.chk .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.chk {
  /* Show the checkmark when checked */
}
.chk input:checked ~ .checkmark:after {
  display: block;
}
.chk {
  padding-left: 25px;
  margin: 5px 0px;
  margin-right: 5px;
}
.chk .checkmark {
  height: 19px;
  width: 19px;
}
.chk {
  /* When the checkbox is checked, add a blue background */
}
.chk input[type=checkbox]:checked ~ .checkmark {
  background-color: #16b68b;
}
.chk {
  /* When the checkbox is checked or unchecked and disabled */
}
.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 {
  /* Style the checkmark/indicator */
}
.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: 8px;
  z-index: 3;
  overflow: hidden;
  padding: 0px 8px;
}
.chk.input-lg {
  /* When the checkbox is checked, add a blue background */
}
.chk.input-lg input[type=checkbox]:checked ~ .checkmark {
  background-color: #16b68b;
}
.chk.input-lg {
  /* When the checkbox is checked or unchecked and disabled */
}
.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 {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  /* Hide the browser's default checkbox */
}
.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 {
  /* Create a custom radio button */
}
.chk.input-lg .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #C3C3C3;
  border-radius: 50%;
}
.chk.input-lg {
  /* On mouse-over, add a grey background color */
}
.chk.input-lg:hover input ~ .checkmark {
  background-color: #ABABAB;
}
.chk.input-lg {
  /* Create the indicator (the dot/circle - hidden when not checked) */
}
.chk.input-lg .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.chk.input-lg {
  /* Show the checkmark when checked */
}
.chk.input-lg input:checked ~ .checkmark:after {
  display: block;
}
.chk.input-lg {
  height: 25px;
  padding-left: 30px;
  margin: 15px 0px;
  margin-right: 5px;
  font-size: 13px;
}
.chk.input-lg .checkmark {
  height: 25px;
  width: 25px;
}
.chk.input-lg .checkmark {
  border-radius: 5px;
}
.chk.input-lg {
  /* Style the checkmark/indicator */
}
.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 */
}
.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 {
  /* Create a custom radio button */
}
.rad .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #C3C3C3;
  border-radius: 50%;
}
.rad {
  /* On mouse-over, add a grey background color */
}
.rad:hover input ~ .checkmark {
  background-color: #ABABAB;
}
.rad {
  /* Create the indicator (the dot/circle - hidden when not checked) */
}
.rad .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.rad {
  /* Show the checkmark when checked */
}
.rad input:checked ~ .checkmark:after {
  display: block;
}
.rad {
  padding-left: 25px;
  margin: 5px 0px;
  margin-right: 5px;
}
.rad .checkmark {
  height: 19px;
  width: 19px;
}
.rad {
  /* When the checkbox is checked or unchecked and disabled */
}
.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 {
  /* Style the indicator (dot/circle) */
}
.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: 8px;
  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 */
}
.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 {
  /* Create a custom radio button */
}
.rad.input-lg .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #C3C3C3;
  border-radius: 50%;
}
.rad.input-lg {
  /* On mouse-over, add a grey background color */
}
.rad.input-lg:hover input ~ .checkmark {
  background-color: #ABABAB;
}
.rad.input-lg {
  /* Create the indicator (the dot/circle - hidden when not checked) */
}
.rad.input-lg .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.rad.input-lg {
  /* Show the checkmark when checked */
}
.rad.input-lg input:checked ~ .checkmark:after {
  display: block;
}
.rad.input-lg {
  height: 25px;
  padding-left: 30px;
  margin: 15px 0px;
  margin-right: 5px;
  font-size: 13px;
}
.rad.input-lg .checkmark {
  height: 25px;
  width: 25px;
}
.rad.input-lg {
  /* When the checkbox is checked or unchecked and disabled */
}
.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 {
  /* Style the indicator (dot/circle) */
}
.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: 8px;
  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: 8px;
  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: rgb(52.256684492%, 18.6631016043%, 16.174688057%);
}
.form-container.margin-top {
  margin-top: 20px;
}
.form-container > .group {
  position: relative;
  border-radius: 8px;
  border: 1px solid #C3C3C3;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 800px) {
  .form-container > .group {
    column-gap: 20px;
    row-gap: 12px;
    flex-direction: column;
    align-items: start;
    padding: 15px;
  }
  .form-container > .group .rad, .form-container > .group .chk {
    margin: 0;
  }
  .form-container > .group > label.chk, .form-container > .group label.rad {
    margin: 0;
  }
}
.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: 8px;
  z-index: 3;
  overflow: hidden;
  padding: 0 8px 1px;
}
.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;
  justify-content: flex-start;
  padding-right: 10px;
}
.form-container > .group.postfix .postfix {
  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;
}

.rad-form-container {
  display: flex;
  gap: 16px;
}
.rad-form-container > .group {
  border: 1px solid #bdbdbd;
  padding: 12px;
  min-width: 150px;
  border-radius: 8px;
  flex-grow: 1;
  flex-basis: 0;
  cursor: pointer;
}
.rad-form-container > .group .rad {
  margin: 0;
}
.rad-form-container > .group > .form-container {
  margin-left: 24px;
}
.rad-form-container > .group > .form-container .help-block {
  margin-left: 0;
}
.rad-form-container > .group:has(input[type=radio]:checked) {
  background-color: #F2F9FF;
}

@media (min-width: 801px) {
  .group.block:has(label.rad), .group.block:has(label.chk) {
    border: none;
    padding: 0;
    gap: 16px;
  }
  .group.block:has(label.rad).single-line, .group.block:has(label.chk).single-line {
    flex-wrap: nowrap;
  }
  .group.block:has(label.rad).single-line label.rad, .group.block:has(label.rad).single-line label.chk, .group.block:has(label.chk).single-line label.rad, .group.block:has(label.chk).single-line label.chk {
    min-width: unset;
  }
  .group.block:has(label.rad) label.label, .group.block:has(label.chk) label.label {
    padding-left: 0;
    margin-left: 0;
  }
  .group.block:has(label.rad) label.rad, .group.block:has(label.rad) label.chk, .group.block:has(label.chk) label.rad, .group.block:has(label.chk) label.chk {
    border: 1px solid #bdbdbd;
    padding: 12px;
    min-width: 150px;
    border-radius: 8px;
    flex-flow: row-reverse nowrap;
    flex: 1;
    justify-content: flex-end;
    gap: 12px;
    align-items: flex-start;
    margin-right: 0;
  }
}
@media (min-width: 801px) and (max-width: 800px) {
  .group.block:has(label.rad) label.rad, .group.block:has(label.rad) label.chk, .group.block:has(label.chk) label.rad, .group.block:has(label.chk) label.chk {
    width: 100%;
  }
}
@media (min-width: 801px) {
  .group.block:has(label.rad) label.rad .checkmark, .group.block:has(label.rad) label.chk .checkmark, .group.block:has(label.chk) label.rad .checkmark, .group.block:has(label.chk) label.chk .checkmark {
    position: static;
    margin-top: 2px;
  }
  .group.block:has(label.rad) label.rad .checkmark:after, .group.block:has(label.rad) label.chk .checkmark:after, .group.block:has(label.chk) label.rad .checkmark:after, .group.block:has(label.chk) label.chk .checkmark:after {
    position: relative;
  }
  .group.block:has(label.rad) label.rad .help-block, .group.block:has(label.rad) label.chk .help-block, .group.block:has(label.chk) label.rad .help-block, .group.block:has(label.chk) label.chk .help-block {
    font-weight: normal;
    margin-left: 0;
    font-style: italic;
  }
  .group.block:has(label.rad) label.rad .help-block-inline, .group.block:has(label.rad) label.chk .help-block-inline, .group.block:has(label.chk) label.rad .help-block-inline, .group.block:has(label.chk) label.chk .help-block-inline {
    margin-left: 10px;
  }
  .group.block:has(label.rad) label.rad:has(input:checked), .group.block:has(label.rad) label.chk:has(input:checked), .group.block:has(label.chk) label.rad:has(input:checked), .group.block:has(label.chk) label.chk:has(input:checked) {
    border-color: #006eb7;
    font-weight: bold;
    background: #F2F9FF;
  }
}
.form-container {
  position: relative;
  margin: 10px 0px 20px 0px;
  z-index: inherit;
}

input[type=password]::-ms-reveal {
  display: none;
}

.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-salmon {
  color: #f3836b;
}

.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-salmon {
  color: #f3836b;
}

.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 .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;
}

/* The stylesheet half of /js/ccl_ext.js, split the same way: comps/ for what CCL has no equivalent
   of, shims/ for what it does ship but our jQuery cannot drive. Nothing here belongs to a page.

   body.ccl-ui means "this page has been rebranded" - a _ccl template's handler sets ccl_page, which
   is what base_core writes it from. It is NOT the feature flag: the flag is site-wide, so gating on
   it put the new shell on every leave page including the legacy ones. Scoping most of this by the
   class is also what keeps those rules ahead of the .ci-* utilities in ccl.css. Imported into
   pages/layout.scss rather than served on its own, so nothing under partials/ is exposed. */
/* Shell treatments the rebrand reuses, so moving a module over is a few includes in _layout.scss.
   Emits nothing on its own - the flag is site-wide, and an unconverted area keeps its own chrome. */
/* the app's 24px all round doubles up against cards that carry their own vertical margins */
/* ci-horizontal-tabs' underline variant, for a strip of anchors that cannot be the component -
   navigation, where the anchors need real hrefs and TabConfig has none. Tokens are ci-tab-button's.

   Include on the strip; $item selects the items. $compact is the library's md step, for a strip
   inside a card. Vertical padding is symmetric, not the component's 0/12px, which would leave a
   submenu strip ~33px against the 53px $submenu-h-height. */
/* ci-input's look, for a .form-control a jQuery view owns. The font is declared because a form
   control inherits none - which is what italicises the placeholder. */
/* ci-form-dropdown's trigger, for a real <select>. 40px to match a size-sm ci-button beside it. The
   resets are the app's .btn, which draws any select carrying the class as a blue pill. */
/* ci-selector-base's look on the app's label.chk / label.rad, per atoms/selector - one base with the
   token family and the mark per type, as the library has. The .checkmark is absolutely positioned at
   left 0, so the label's padding is what makes the library's gap. Include ccl-checkbox or ccl-radio
   on a container of the labels, not on one label: the base is 19px, radius 5px and green when
   checked, so all of this is an override. */
/* The strip a rebranded page opens with - the trail on the left, whatever the page puts on the
   right. Full width and against the submenu rather than inset like a card. $ccl-breadcrumb-height
   below is what this comes to; keep the two in step. */
/* the height ccl-submenu-tabs draws - keep it in step with that mixin's padding */
/* .ccl-breadcrumb-bar, which only the employee-ribbon shells draw. Rounded up: too tall a
   .main-container puts its own bottom past the viewport and the last rows cannot be reached. */
/* _main-container-height.scss subtracts a fixed $submenu-h-height for every shell a page can have,
   so a shorter strip leaves the page scrolling short. Restated at the module's scope, because that
   partial has to keep emitting the heights the rest of the app was built with.

   .ribbon-breadcrumb is a ribbon shell whose static header is the breadcrumb bar alone - the page
   draws its employee card inside .main-container (people/person.html), so it is not taken here. */
/* The page submenu as an underline tab strip. The app's 20px all round stacks on the tabs' own
   vertical padding, so only the horizontal half survives. */
/* Gated by their own class, not by the flag, so they sit outside the wrapper: the markup only
   carries these when the flag is on, and asking for the class IS the opt-in. Keeping them out also
   keeps their specificity honest - inside the wrapper every rule silently gained a class, which is
   a class the legacy markup then has to be out-specified by. */
/* None of this exists on ci-table - it styles the table and nothing inside it - so a footer, the row
   links, the selection checkbox and the row action buttons are ours.

   Gated by the attribute and the classes rather than by body.ccl-ui: only rebranded markup carries
   them, and the legacy .table* chrome comes off with the flag, so nothing here out-specifies it. */
table[ci-table] {
  /* named into ci-table's own set, so they drop out if the library ever ships a footer */
  --ci-table-footer-bg: var(--colors-background-bg-secondary);
  --ci-table-footer-fg: var(--ci-table-heading-fg);
  /* ci-table is width: max-content; min-width: 100%, sized for a .ci-table-scroll wrapper that scrolls
     it horizontally. No page here has one, so on a narrow screen it runs off the page - the app's
     .table, which the rebranded markup drops, was width: 100%. The component injects its styles at
     runtime, after every stylesheet, so an equal-specificity rule would lose the tie. */
}
body.ccl-ui table[ci-table] {
  width: 100%;
}
table[ci-table] {
  /* ci-table paints the heading on the row. A sticky header moves the cells and leaves the row's paint
     behind, so the cells carry it too - the same token, so nothing changes when they are not stuck. */
}
table[ci-table] > thead > tr > th {
  background-color: var(--ci-table-heading-bg);
}
table[ci-table] {
  /* a heading that sticks to whatever box scrolls the table - on a base_config page that is
     .ccl-config-page, not the window the stickyHeader plugin listens on */
}
table[ci-table].ccl-table-sticky > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 1;
}
table[ci-table] {
  /* A summary strip is the heading treatment reused. tfoot, plus the tbody tr.total the allowance
     tables put mid table. */
}
table[ci-table] > tfoot > tr {
  background-color: var(--ci-table-footer-bg);
}
table[ci-table] > tfoot > tr > td,
table[ci-table] > tfoot > tr > th {
  height: var(--ci-table-heading-height);
  padding: var(--ci-table-heading-padding-block) var(--ci-table-heading-padding-inline);
  border: none;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ci-table-footer-fg);
  vertical-align: middle;
  background-color: inherit;
}
table[ci-table] > tfoot > tr strong {
  font-weight: inherit;
}
table[ci-table] {
  /* mixin-tr-highlight paints .total and .bold and out-specifies the rule above */
}
table[ci-table] > tfoot > tr.total,
table[ci-table] > tfoot > tr.bold,
table[ci-table] > tbody > tr.total {
  background-color: var(--ci-table-footer-bg);
}
table[ci-table] > tfoot > tr.total > td,
table[ci-table] > tfoot > tr.total > th,
table[ci-table] > tfoot > tr.bold > td,
table[ci-table] > tfoot > tr.bold > th,
table[ci-table] > tbody > tr.total > td,
table[ci-table] > tbody > tr.total > th {
  height: var(--ci-table-heading-height);
  padding: var(--ci-table-heading-padding-block) var(--ci-table-heading-padding-inline);
  border: none;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ci-table-footer-fg);
  vertical-align: middle;
  background-color: inherit;
}
table[ci-table] > tfoot > tr.total strong,
table[ci-table] > tfoot > tr.bold strong,
table[ci-table] > tbody > tr.total strong {
  font-weight: inherit;
}
table[ci-table] {
  /* the avatar-and-name cell: a <cintra-avatar> beside a .ci-table__cell-text of the name and a sub-line */
}
table[ci-table] .ccl-table-employee {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}
table[ci-table] {
  /* Semibold and underline-on-hover as the design draws it, but on the neutral ramp rather than its
     brand-secondary, which reads violet. types.js renders the sub-line inside the anchor, so
     .text-grey has to be put back rather than inherit this. */
}
table[ci-table] > tbody > tr > td a:not(.ccl-table-btn) {
  font-weight: var(--font-weight-semibold);
  color: var(--ci-table-cell-fg-secondary);
  text-decoration: none;
}
table[ci-table] > tbody > tr > td a:not(.ccl-table-btn):hover, table[ci-table] > tbody > tr > td a:not(.ccl-table-btn):focus-visible {
  color: var(--colors-text-secondary_hover);
  text-decoration: underline;
}
table[ci-table] > tbody > tr > td .text-grey {
  font-weight: var(--font-weight-regular);
  color: var(--ci-table-cell-fg-secondary);
}
table[ci-table] {
  /* the request-type tables' tick columns. pages/config.scss centres .tick-cell for the legacy table, but
     ci-table's own cell rules out-specify a lone class. */
}
table[ci-table] > thead > tr > th.tick-cell,
table[ci-table] > tbody > tr > td.tick-cell {
  text-align: center;
}
table[ci-table] > thead > tr > th.tick-cell .ph-check-circle,
table[ci-table] > tbody > tr > td.tick-cell .ph-check-circle {
  font-size: 1.5em;
}
table[ci-table] {
  /* a checked row. View.js puts .selected on the <label>, not the row, so the row is read off the
     input - and it has to come after :hover to survive one. */
}
table[ci-table] > tbody > tr:has(input.selectone:checked) > td {
  background-color: var(--ci-table-cell-bg-selected);
}
table[ci-table] > thead > tr > th.col_check,
table[ci-table] > tbody > tr > td:has(> label.chk),
table[ci-table] > tbody > tr > td:has(> label.rad) {
  width: 56px;
  padding-inline: var(--spacing-xl);
  text-align: center;
}
table[ci-table] {
  /* ci-checkbox is shadow DOM and View.js drives these with .prop('checked'), so until there is a
     <ccl-checkbox> shim the app-wide .chk / .rad are restyled in place */
}
table[ci-table] label.chk {
  margin: 0;
  padding-left: calc(var(--spacing-20) + var(--spacing-xl));
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--colors-text-secondary);
}
table[ci-table] label.chk .checkmark {
  top: 50%;
  width: var(--spacing-20);
  height: var(--spacing-20);
  margin-top: calc(var(--spacing-20) / -2);
  box-sizing: border-box;
  border: 1px solid var(--checkbox-border-default-default);
  border-radius: var(--checkbox-radius-sm);
  background: var(--checkbox-bg-default-default);
  transition: background 150ms ease, border-color 150ms ease;
}
table[ci-table] label.chk:hover input:not([disabled]) ~ .checkmark {
  border-color: var(--checkbox-border-default-hover);
  background: var(--checkbox-bg-default-hover);
}
table[ci-table] input[type=checkbox]:checked ~ .checkmark {
  border-color: transparent;
  background: var(--checkbox-bg-selected-default);
}
table[ci-table] label.chk:hover input[type=checkbox]:checked:not([disabled]) ~ .checkmark {
  background: var(--checkbox-bg-selected-hover);
}
table[ci-table] {
  /* the base fades the whole control to $disable-opacity. A disabled checkbox is often disabled
     because it is fixed on, and a faded tick reads as "unavailable" rather than "not yours to
     change" - so the disabled state is a colour here, not a transparency. */
}
table[ci-table] input[type=checkbox][disabled] ~ .checkmark {
  opacity: 1;
  border-color: var(--checkbox-border-default-disabled);
  background: var(--checkbox-bg-default-disabled);
}
table[ci-table] input[type=checkbox][disabled]:checked ~ .checkmark {
  border-color: transparent;
  background: var(--checkbox-bg-selected-disabled);
}
table[ci-table] label.chk:has(input[disabled]) {
  cursor: not-allowed;
}
table[ci-table] label.chk input:focus-visible ~ .checkmark {
  border-color: var(--colors-border-brand);
  outline: 1px solid var(--colors-border-brand);
  outline-offset: 2px;
}
table[ci-table] {
  /* the legacy rotated-L tick, re-cut for the box */
}
table[ci-table] label.chk .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid var(--checkbox-fg-selected-default);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
table[ci-table] input[type=checkbox][disabled]:checked ~ .checkmark:after {
  border-color: var(--checkbox-fg-selected-disabled);
}
table[ci-table] label.rad {
  margin: 0;
  padding-left: calc(var(--spacing-20) + var(--spacing-xl));
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--colors-text-secondary);
}
table[ci-table] label.rad .checkmark {
  top: 50%;
  width: var(--spacing-20);
  height: var(--spacing-20);
  margin-top: calc(var(--spacing-20) / -2);
  box-sizing: border-box;
  border: 1px solid var(--radio-border-default-default);
  border-radius: var(--radio-radius-full);
  background: var(--radio-bg-default-default);
  transition: background 150ms ease, border-color 150ms ease;
}
table[ci-table] label.rad:hover input:not([disabled]) ~ .checkmark {
  border-color: var(--radio-border-default-hover);
  background: var(--radio-bg-default-hover);
}
table[ci-table] input[type=radio]:checked ~ .checkmark {
  border-color: transparent;
  background: var(--radio-bg-selected-default);
}
table[ci-table] label.rad:hover input[type=radio]:checked:not([disabled]) ~ .checkmark {
  background: var(--radio-bg-selected-hover);
}
table[ci-table] {
  /* the base fades the whole control to $disable-opacity. A disabled checkbox is often disabled
     because it is fixed on, and a faded tick reads as "unavailable" rather than "not yours to
     change" - so the disabled state is a colour here, not a transparency. */
}
table[ci-table] input[type=radio][disabled] ~ .checkmark {
  opacity: 1;
  border-color: var(--radio-border-default-disabled);
  background: var(--radio-bg-default-disabled);
}
table[ci-table] input[type=radio][disabled]:checked ~ .checkmark {
  border-color: transparent;
  background: var(--radio-bg-selected-disabled);
}
table[ci-table] label.rad:has(input[disabled]) {
  cursor: not-allowed;
}
table[ci-table] label.rad input:focus-visible ~ .checkmark {
  border-color: var(--colors-border-brand);
  outline: 1px solid var(--colors-border-brand);
  outline-offset: 2px;
}
table[ci-table] label.rad .checkmark:after {
  top: 50%;
  left: 50%;
  width: var(--spacing-8);
  height: var(--spacing-8);
  transform: translate(-50%, -50%);
  border-radius: var(--radius-full);
  background: var(--radio-fg-selected-default);
}
table[ci-table] {
  /* a cell's control has no text, so no gap after it either */
}
table[ci-table] > tbody > tr > td > label.chk,
table[ci-table] > tbody > tr > td > label.rad {
  padding-left: var(--spacing-20);
}
table[ci-table] {
  /* ci-utility-button size-sm bordered, per atoms/utility-button/utility-button.component.scss */
}
table[ci-table] .ccl-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: var(--spacing-sm);
  margin: 0;
  border: none;
  border-radius: var(--radius-sm);
  /* the glyph, not the button - 32px box, and no token lands on 11 */
  font-family: var(--font-family-body);
  font-size: 11px;
  line-height: 1;
  background-color: var(--button-bg-subtle-default);
  box-shadow: inset 0 0 0 1px var(--button-border-subtle-default);
  color: var(--button-fg-linkcolor-default);
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
table[ci-table] .ccl-table-btn:hover:not([disabled]):not(.disabled) {
  background-color: var(--colors-background-bg-primary_hover);
  color: var(--button-fg-linkcolor-hover);
}
table[ci-table] .ccl-table-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--button-border-subtle-default), 0 0 0 2px var(--colors-background-bg-primary), 0 0 0 4px var(--colors-effects-focus_rings-primary);
}
table[ci-table] .ccl-table-btn[disabled], table[ci-table] .ccl-table-btn.disabled {
  color: var(--button-fg-linkcolor-disabled);
  cursor: not-allowed;
  /* these are anchors, so only this actually stops the click - see shims/_button.scss */
  pointer-events: none;
}
table[ci-table] {
  /* the pair's affirmative half: ci-button's primary fill on the utility button's 32px box */
}
table[ci-table] .ccl-table-btn-primary {
  box-shadow: none;
  background: var(--button-bg-primary-default);
  color: var(--button-fg-primary-default);
}
table[ci-table] .ccl-table-btn-primary:hover:not([disabled]):not(.disabled), table[ci-table] .ccl-table-btn-primary:focus-visible {
  background: var(--button-bg-primary-hover);
  color: var(--button-fg-primary-default);
}
table[ci-table] {
  /* the library's default utility button, which is the bordered one without its border */
}
table[ci-table] .ccl-table-btn-plain {
  box-shadow: none;
  background-color: transparent;
}
table[ci-table] .ccl-table-btn-plain:focus-visible {
  background-color: var(--button-bg-subtle-default);
  box-shadow: 0 0 0 2px var(--colors-background-bg-primary), 0 0 0 4px var(--colors-effects-focus_rings-primary);
}
table[ci-table] {
  /* The cell a pair of them sits in. .w100 leaves about 52px once ci-table's cell padding is off it,
     less than two 32px buttons and the gap, so without nowrap they wrap onto two lines - and in an
     auto-layout table nowrap is also what lets the column claim the width it needs. Only needed where
     there is more than one button - a lone one cannot wrap against anything.

     No alignment: the markup's own text-center / text-right is left to say where they sit, so the
     header cell and the body cells agree without both carrying this. Not flex either - a display: flex
     td loses the vertical-align the rest of the row is aligned on. */
}
table[ci-table] .ccl-table-actions {
  white-space: nowrap;
}
table[ci-table] .ccl-table-actions .ccl-table-btn + .ccl-table-btn {
  margin-left: var(--spacing-xs);
}

body.ccl-ui .ccl-rule {
  margin: 0;
  border: none;
  border-top: 1px solid var(--colors-border-tertiary);
}
body.ccl-ui .ccl-breadcrumb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-5xl);
  padding: var(--spacing-lg) var(--spacing-6xl);
  background: var(--colors-background-bg-primary);
  border-bottom: 1px solid var(--colors-border-secondary);
  margin: calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-6xl)) var(--spacing-xl);
}
body.ccl-ui .ccl-section {
  display: flex;
  flex-direction: column;
}
body.ccl-ui .ccl-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  flex: 1 1 auto;
  min-height: 0;
}
body.ccl-ui .ccl-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-5xl);
}
body.ccl-ui .ccl-section-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  min-width: 0;
  max-width: 760px;
}
body.ccl-ui .ccl-section-title,
body.ccl-ui .ccl-section-desc {
  margin: 0;
}
body.ccl-ui .ccl-group > * + * {
  margin-top: var(--spacing-lg);
}
body.ccl-ui .ccl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-lg);
}
body.ccl-ui .ccl-row-title + .ccl-row-hint {
  margin-top: var(--spacing-xxs);
}
body.ccl-ui .ccl-settings > * {
  padding: var(--spacing-2xl) 0;
}
body.ccl-ui .ccl-settings > *:first-child {
  padding-top: 0;
}
body.ccl-ui .ccl-settings > *:last-child {
  padding-bottom: 0;
}
body.ccl-ui .ccl-settings > * + * {
  border-top: 1px solid var(--colors-border-tertiary);
}
body.ccl-ui .ccl-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  margin: 0;
}
body.ccl-ui .ccl-row input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
body.ccl-ui .ccl-row input[disabled] ~ .ccl-row-text {
  cursor: not-allowed;
}
body.ccl-ui .ccl-row input[disabled] ~ .ccl-row-text .ccl-row-title,
body.ccl-ui .ccl-row input[disabled] ~ .ccl-row-text .ccl-row-hint {
  color: var(--colors-text-disabled);
}
body.ccl-ui .ccl-row-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  flex: 1 1 auto;
  min-width: 0;
}
body.ccl-ui .ccl-row-hint {
  margin: 0;
}
body.ccl-ui .ccl-reveal[hidden] {
  display: none;
}
body.ccl-ui .ccl-reveal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  background: var(--colors-gray-light_mode-50);
}
body.ccl-ui .ccl-field > label,
body.ccl-ui .ccl-reveal > label {
  margin: 0;
}
body.ccl-ui .ccl-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
body.ccl-ui .ccl-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3xl);
}
body.ccl-ui .ccl-fields > .ccl-field {
  flex: 1 1 0;
  min-width: 220px;
}
body.ccl-ui .ccl-field-narrow {
  flex: 0 0 160px;
}
body.ccl-ui .ccl-field-wide {
  flex: 1 1 320px;
}
body.ccl-ui .ccl-reveal .ccl-field .ccl-input {
  width: 100%;
}
body.ccl-ui .ccl-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-style: normal;
  border: 1px solid var(--colors-border-primary);
  border-radius: var(--radius-md);
  /* background-color, so a background-image the page sets - UserPicker's lookup spinner - survives */
  background-color: var(--colors-background-bg-primary);
  box-shadow: 0 1px 2px 0 var(--colors-effects-shadows-xs);
}
body.ccl-ui .ccl-input::placeholder {
  font-style: normal;
  color: var(--colors-text-placeholder);
}
body.ccl-ui .ccl-input:focus {
  border-color: var(--colors-brand-950);
  outline: none;
  box-shadow: 0 0 0 2px var(--colors-background-bg-primary), 0 0 0 4px var(--colors-effects-focus_rings-primary);
}
body.ccl-ui .ccl-input[disabled], body.ccl-ui .ccl-input[readonly] {
  background-color: var(--colors-background-bg-secondary);
  cursor: not-allowed;
}
body.ccl-ui textarea.ccl-input {
  resize: vertical;
}
body.ccl-ui .ccl-input-num {
  width: 64px;
  text-align: center;
}
body.ccl-ui .ccl-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-bottom: -20px;
}
body.ccl-ui .ccl-reveal .ccl-input {
  width: auto;
}
body.ccl-ui .ccl-badge-dot .ci-badge .ci-badge__icon.ci-badge__icon--leading {
  width: 6px;
  height: 6px;
  margin-right: var(--spacing-xs);
  border-radius: 50%;
  background-color: currentColor;
}
body.ccl-ui.mobile-app .hidden-ma {
  display: none;
}
body.ccl-ui .main-container {
  padding: var(--spacing-xl) var(--spacing-6xl);
}
body.ccl-ui .page-container.submenu-h .main-container {
  height: calc(100vh - 105px);
}
@media (max-width: 800px) {
  body.ccl-ui .page-container.submenu-h .main-container {
    height: calc(100vh - 231px);
  }
}
body.ccl-ui.banner .page-container.submenu-h .main-container {
  height: calc(100vh - 159px);
}
@media (max-width: 800px) {
  body.ccl-ui.banner .page-container.submenu-h .main-container {
    height: calc(100vh - 285px);
  }
}
body.ccl-ui .page-container.submenu-h.submenu2-h .main-container {
  height: calc(100vh - 178px);
}
@media (max-width: 800px) {
  body.ccl-ui .page-container.submenu-h.submenu2-h .main-container {
    height: calc(100vh - 304px);
  }
}
body.ccl-ui.banner .page-container.submenu-h.submenu2-h .main-container {
  height: calc(100vh - 232px);
}
@media (max-width: 800px) {
  body.ccl-ui.banner .page-container.submenu-h.submenu2-h .main-container {
    height: calc(100vh - 358px);
  }
}
body.ccl-ui .page-container.submenu-h.ribbon .main-container {
  height: calc(100vh - 321px);
}
@media (max-width: 800px) {
  body.ccl-ui .page-container.submenu-h.ribbon .main-container {
    height: calc(100vh - 447px);
  }
}
body.ccl-ui.banner .page-container.submenu-h.ribbon .main-container {
  height: calc(100vh - 375px);
}
@media (max-width: 800px) {
  body.ccl-ui.banner .page-container.submenu-h.ribbon .main-container {
    height: calc(100vh - 501px);
  }
}
body.ccl-ui .page-container.submenu-h.ribbon-sm .main-container {
  height: calc(100vh - 195px);
}
@media (max-width: 800px) {
  body.ccl-ui .page-container.submenu-h.ribbon-sm .main-container {
    height: calc(100vh - 321px);
  }
}
body.ccl-ui.banner .page-container.submenu-h.ribbon-sm .main-container {
  height: calc(100vh - 249px);
}
@media (max-width: 800px) {
  body.ccl-ui.banner .page-container.submenu-h.ribbon-sm .main-container {
    height: calc(100vh - 375px);
  }
}
body.ccl-ui .page-container.submenu-h.submenu2-h.ribbon .main-container {
  height: calc(100vh - 374px);
}
@media (max-width: 800px) {
  body.ccl-ui .page-container.submenu-h.submenu2-h.ribbon .main-container {
    height: calc(100vh - 500px);
  }
}
body.ccl-ui.banner .page-container.submenu-h.submenu2-h.ribbon .main-container {
  height: calc(100vh - 428px);
}
@media (max-width: 800px) {
  body.ccl-ui.banner .page-container.submenu-h.submenu2-h.ribbon .main-container {
    height: calc(100vh - 554px);
  }
}
body.ccl-ui .page-container.submenu-h.submenu2-h.ribbon-sm .main-container {
  height: calc(100vh - 248px);
}
@media (max-width: 800px) {
  body.ccl-ui .page-container.submenu-h.submenu2-h.ribbon-sm .main-container {
    height: calc(100vh - 374px);
  }
}
body.ccl-ui.banner .page-container.submenu-h.submenu2-h.ribbon-sm .main-container {
  height: calc(100vh - 302px);
}
@media (max-width: 800px) {
  body.ccl-ui.banner .page-container.submenu-h.submenu2-h.ribbon-sm .main-container {
    height: calc(100vh - 428px);
  }
}
body.ccl-ui .page-container.submenu-h.ribbon.ribbon-breadcrumb .main-container {
  height: calc(100vh - 166px);
}
@media (max-width: 800px) {
  body.ccl-ui .page-container.submenu-h.ribbon.ribbon-breadcrumb .main-container {
    height: calc(100vh - 292px);
  }
}
body.ccl-ui.banner .page-container.submenu-h.ribbon.ribbon-breadcrumb .main-container {
  height: calc(100vh - 220px);
}
@media (max-width: 800px) {
  body.ccl-ui.banner .page-container.submenu-h.ribbon.ribbon-breadcrumb .main-container {
    height: calc(100vh - 346px);
  }
}
body.ccl-ui .page-container.submenu-h.submenu2-h.ribbon.ribbon-breadcrumb .main-container {
  height: calc(100vh - 239px);
}
@media (max-width: 800px) {
  body.ccl-ui .page-container.submenu-h.submenu2-h.ribbon.ribbon-breadcrumb .main-container {
    height: calc(100vh - 365px);
  }
}
body.ccl-ui.banner .page-container.submenu-h.submenu2-h.ribbon.ribbon-breadcrumb .main-container {
  height: calc(100vh - 293px);
}
@media (max-width: 800px) {
  body.ccl-ui.banner .page-container.submenu-h.submenu2-h.ribbon.ribbon-breadcrumb .main-container {
    height: calc(100vh - 419px);
  }
}
body.ccl-ui .sub-menu-h {
  gap: var(--tab-gap-xl);
  border-bottom: 1px solid var(--tab-border-default-secondary);
}
body.ccl-ui .sub-menu-h a {
  align-items: center;
  padding: var(--tab-padding-block-xl) var(--tab-padding-inline-xs);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--tab-fg-default-default);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-semibold);
  transition: border-color 150ms ease, color 150ms ease;
}
body.ccl-ui .sub-menu-h a:hover {
  background: none;
  border-bottom-color: var(--tab-border-default-hover);
  color: var(--tab-fg-default-default);
}
body.ccl-ui .sub-menu-h a {
  /* the same weight current or not - the library's is-current only moves the border and the
     colour. Restated because it has to beat rules that embolden the current item, .sub-menu-h
     a.selected { font-weight: bold } among them. */
}
body.ccl-ui .sub-menu-h a.selected {
  background: none;
  border-bottom-color: var(--tab-border-selected-selected);
  color: var(--tab-fg-selected-default);
  font-weight: var(--font-weight-semibold);
}
body.ccl-ui .sub-menu-h {
  padding: var(--spacing-xxs) var(--spacing-5xl) 0;
  background-color: var(--colors-background-bg-primary);
  /* stretched, it would run through the rule the strip now draws */
}
body.ccl-ui .sub-menu-h .sep {
  align-self: center;
  height: var(--spacing-2xl);
}
body.ccl-ui .sub-menu-h a.selected + .sep,
body.ccl-ui .sub-menu-h .sep + a.selected {
  margin-left: 0;
}
body.ccl-ui .page-app {
  animation: ccl-page-in 400ms;
}
@keyframes ccl-page-in {
  from {
    opacity: 0;
  }
}
body.ccl-ui .ccl-employee-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  margin: var(--spacing-6xl) var(--spacing-6xl) 0;
  padding: var(--spacing-3xl) var(--spacing-4xl) 0;
  background: var(--colors-background-bg-primary);
  border: 1px solid var(--colors-border-secondary);
  border-radius: var(--radius-2xl);
  box-sizing: border-box;
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__top {
  display: flex;
  flex-direction: row;
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__spacer {
  flex: 1;
}
body.ccl-ui .ccl-employee-header {
  /* the positioning context for the hover card, and what the hover is read from - the card is inside
     it, so moving the pointer onto the card keeps the wrapper hovered */
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__identity {
  position: relative;
  /* the ribbon has no affordance of its own - the pointer is what says hovering will do something.
     Kept off the wrapper so the card's own text does not inherit it. */
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__identity > cintra-employee-ribbon {
  cursor: pointer;
}
body.ccl-ui .ccl-employee-header {
  /* the delay is the hover intent - unhovering before it elapses cancels the transition outright, so
     a pointer crossing the identity on its way to the menu never opens the card */
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__identity:hover .ccl-employee-card,
body.ccl-ui .ccl-employee-header .ccl-employee-header__identity:focus-within .ccl-employee-card {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 400ms;
}
body.ccl-ui .ccl-employee-header {
  /* tabbing to the identity is already deliberate */
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__identity:focus-within .ccl-employee-card {
  transition-delay: 0s;
}
body.ccl-ui .ccl-employee-header {
  /* the tab strip and whatever sits at the end of its row. The strip takes the slack rather than
     hugging its tabs, so the rule it draws still runs the width of the card. */
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__tabs {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-5xl);
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__tabs ccl-horizontal-tabs {
  flex: 1 1 auto;
  min-width: 0;
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__tabs .ccl-btn {
  flex: none;
  margin-bottom: var(--spacing-md);
}
body.ccl-ui .ccl-employee-header {
  /* a bootstrap select in the actions - the allowance picker on Leave Overview. Same ci-input look as
     the switcher's dropdowns; .btn.btn-default in its class list is what it beats, and .w200 is what
     ccl-field's own width: 100% would otherwise undo. */
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__actions select.form-control {
  height: var(--spacing-8xl);
  min-width: 0;
  padding: 0 var(--spacing-8xl) 0 var(--form-padding-inline-xl);
  border: 1px solid var(--form-border-default);
  border-radius: var(--form-radius-md);
  box-shadow: 0 1px 2px 0 var(--colors-effects-shadows-xs);
  box-sizing: border-box;
  /* appearance: none !important on select.form-control leaves no native arrow, and the chevron the
     app draws in its place is a background-image - so background-color, never the shorthand, or the
     caret goes with it. The stroke is --colors-foreground-fg-quaternary written out: a data URI
     cannot reference a custom property. */
  background-color: var(--form-bg-default);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23a4a7ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.5 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--form-padding-inline-xl) center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  color: var(--form-fg-filled);
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__actions select.form-control:focus {
  border-color: var(--form-border-focused);
  outline: none;
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__actions select.form-control[disabled] {
  border-color: var(--form-border-disabled);
  background: var(--form-bg-disabled);
  color: var(--form-fg-disabled);
  cursor: not-allowed;
}
body.ccl-ui .ccl-employee-header .ccl-employee-header__actions select.form-control {
  width: 200px;
}
body.ccl-ui .ccl-breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-5xl);
  padding: var(--spacing-lg) var(--spacing-6xl);
  background: var(--colors-background-bg-primary);
  border-bottom: 1px solid var(--colors-border-secondary);
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: auto;
  color: inherit;
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector .adu-team-container,
body.ccl-ui .ccl-breadcrumb-bar .employee-selector .search-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  max-width: none;
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector {
  /* the class is on each of the two dropdowns when there is an ADU to pick, and on the lone Team
     dropdown when there is not */
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector .team-container {
  flex: 0 1 160px;
  min-width: 0;
  margin: 0;
  font-size: inherit;
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector .search-container > .has-feedback {
  flex: 0 1 240px;
  min-width: 0;
  width: auto;
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector {
  /* leftmost, before the dropdowns, and the icon sits on the text baseline */
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector .ccl-back-to-me {
  flex: none;
  gap: var(--spacing-xs);
  white-space: nowrap;
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector select.form-control {
  height: var(--spacing-8xl);
  min-width: 0;
  padding: 0 var(--spacing-8xl) 0 var(--form-padding-inline-xl);
  border: 1px solid var(--form-border-default);
  border-radius: var(--form-radius-md);
  box-shadow: 0 1px 2px 0 var(--colors-effects-shadows-xs);
  box-sizing: border-box;
  /* appearance: none !important on select.form-control leaves no native arrow, and the chevron the
     app draws in its place is a background-image - so background-color, never the shorthand, or the
     caret goes with it. The stroke is --colors-foreground-fg-quaternary written out: a data URI
     cannot reference a custom property. */
  background-color: var(--form-bg-default);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23a4a7ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.5 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--form-padding-inline-xl) center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  color: var(--form-fg-filled);
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector select.form-control:focus {
  border-color: var(--form-border-focused);
  outline: none;
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector select.form-control[disabled] {
  border-color: var(--form-border-disabled);
  background: var(--form-bg-disabled);
  color: var(--form-fg-disabled);
  cursor: not-allowed;
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector input.form-control {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-style: normal;
  border: 1px solid var(--colors-border-primary);
  border-radius: var(--radius-md);
  /* background-color, so a background-image the page sets - UserPicker's lookup spinner - survives */
  background-color: var(--colors-background-bg-primary);
  box-shadow: 0 1px 2px 0 var(--colors-effects-shadows-xs);
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector input.form-control::placeholder {
  font-style: normal;
  color: var(--colors-text-placeholder);
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector input.form-control:focus {
  border-color: var(--colors-brand-950);
  outline: none;
  box-shadow: 0 0 0 2px var(--colors-background-bg-primary), 0 0 0 4px var(--colors-effects-focus_rings-primary);
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector input.form-control[disabled], body.ccl-ui .ccl-breadcrumb-bar .employee-selector input.form-control[readonly] {
  background-color: var(--colors-background-bg-secondary);
  cursor: not-allowed;
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector input.form-control {
  height: var(--spacing-8xl);
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector {
  /* the base positions these against a 13px-padded control */
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector .has-feedback .form-control-feedback {
  top: 50%;
  right: var(--spacing-md);
  margin-top: -8px;
  height: auto;
  line-height: 1;
  font-size: var(--font-size-text-md);
  color: var(--colors-foreground-fg-quaternary);
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector {
  /* room for the icon the chevron and the magnifier sit in */
}
body.ccl-ui .ccl-breadcrumb-bar .employee-selector .has-feedback .form-control {
  padding-right: var(--spacing-7xl);
}
body.ccl-ui .ccl-employee-card {
  /* hidden with visibility rather than display, so there is something to fade. visibility gets the
     full duration as its delay, which holds the card in place long enough to fade out - the hover
     rule above sets its own delay on the way in. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 45;
  width: 322px;
  background: var(--colors-background-bg-primary);
  border: 1px solid var(--colors-border-secondary);
  border-radius: var(--radius-2xl);
}
body.ccl-ui .ccl-employee-card .ccl-employee-card__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-3xl) var(--spacing-4xl) var(--spacing-2xl);
}
body.ccl-ui .ccl-employee-card {
  /* .avatar carries a right margin for the inline runs it was written for */
}
body.ccl-ui .ccl-employee-card .ccl-employee-card__avatar {
  flex: none;
  margin: 0;
}
body.ccl-ui .ccl-employee-card {
  /* a two-column grid, so the values line up whatever the labels are */
}
body.ccl-ui .ccl-employee-card .ccl-employee-card__rows {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: baseline;
  gap: var(--spacing-lg) var(--spacing-xl);
  margin: 0;
  padding: var(--spacing-2xl) var(--spacing-4xl);
  border-top: 1px solid var(--colors-border-tertiary);
}
body.ccl-ui .ccl-employee-card .ccl-employee-card__rows dt {
  font-size: var(--font-size-text-xs);
  line-height: var(--line-height-text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colors-text-quaternary);
}
body.ccl-ui .ccl-employee-card .ccl-employee-card__rows dd {
  margin: 0;
  min-width: 0;
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  color: var(--colors-text-secondary);
}
body.ccl-ui .ccl-employee-card {
  /* a page that fills no ribbon_profile_actions leaves whitespace, which :empty would still match */
}
body.ccl-ui .ccl-employee-card .ccl-employee-card__foot {
  padding: var(--spacing-xl) var(--spacing-4xl) var(--spacing-3xl);
  border-top: 1px solid var(--colors-border-tertiary);
}
body.ccl-ui .ccl-employee-card .ccl-employee-card__foot:not(:has(*)) {
  display: none;
}
body.ccl-ui .ccl-employee-card .ccl-employee-card__foot .ccl-btn {
  width: 100%;
}
body.ccl-ui ccl-vertical-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5xl);
  /* shrinks rather than stacking: these settings are not a mobile job, so the column stays a
     column at every width and squashes to 266 instead. */
  flex: 0 1 300px;
  min-width: 266px;
  padding: var(--spacing-lg);
  border: 1px solid var(--colors-border-secondary);
  border-radius: var(--radius-xl);
  background: var(--colors-background-bg-primary);
  /* the cards scroll, not the page, so no sticky is needed. It stops
     short of the bottom of the layout, where .ccl-nav-list starts scrolling. */
  height: calc(100% - var(--spacing-3xl));
}
body.ccl-ui ccl-vertical-nav .ccl-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  /* min-height is what lets a flex child shrink below its content and scroll */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
body.ccl-ui ccl-vertical-nav .ccl-nav-label {
  padding: 0 var(--spacing-md) var(--spacing-sm);
  font-size: var(--font-size-text-xs);
  line-height: var(--line-height-text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colors-text-quaternary);
}
body.ccl-ui ccl-vertical-nav .ccl-nav-item {
  display: block;
  padding: var(--spacing-lg) var(--spacing-md);
  /* the rail runs down every item; selecting one only paints its 2px in. Reserving the width on
     all of them is also what stops the text shifting as the selection moves. */
  border-left: 2px solid var(--colors-brand-100);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--colors-text-secondary);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}
body.ccl-ui ccl-vertical-nav .ccl-nav-item:hover, body.ccl-ui ccl-vertical-nav .ccl-nav-item:focus {
  background: var(--colors-background-bg-primary_hover);
  color: var(--colors-text-primary);
  text-decoration: none;
}
body.ccl-ui ccl-vertical-nav .ccl-nav-item.selected {
  border-left-color: var(--colors-brand-950);
  font-weight: var(--font-weight-semibold);
  color: var(--colors-brand-950);
}
body.ccl-ui ccl-vertical-nav .ccl-nav-subs {
  display: flex;
  flex-direction: column;
}
body.ccl-ui ccl-vertical-nav .ccl-nav-sub {
  /* tighter than the pages above them - a section is a smaller thing, and the run of them should
     read as one block under its page rather than as more items of the same weight */
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-4xl);
  /* a step down from the item above rather than a fixed px, so it keeps tracking the token if the
     scale changes */
  font-size: calc(var(--font-size-text-sm) * 0.95);
  font-weight: var(--font-weight-regular);
  color: var(--colors-text-tertiary);
  /* a lighter purple than the page's own 950, so the selected section reads as subordinate to it */
}
body.ccl-ui ccl-vertical-nav .ccl-nav-sub.selected {
  border-left-color: var(--colors-brand-500);
  color: var(--colors-brand-950);
}
body.ccl-ui ccl-vertical-nav {
  /* the icon sits over the input rather than beside it, so the field is still full width */
}
body.ccl-ui ccl-vertical-nav .ccl-nav-search {
  position: relative;
}
body.ccl-ui ccl-vertical-nav .ccl-nav-search i {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--colors-text-placeholder);
  pointer-events: none;
}
body.ccl-ui ccl-vertical-nav .ccl-nav-search .ccl-input {
  padding-left: calc(var(--spacing-md) * 2 + 16px);
}
body.ccl-ui ccl-vertical-nav .ccl-nav-empty {
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
}
body.ccl-ui ccl-vertical-nav {
  /* beats .ccl-nav-item's display:block when the search hides an item or an emptied group */
}
body.ccl-ui ccl-vertical-nav [hidden] {
  display: none;
}
body.ccl-ui ccl-vertical-nav {
  /* 800px is $screen-sm-max. Hard-coded because reaching it means importing master-styles, which
     emits the .text-* utilities with it - 2.4kb of rules layout.css already has. A 266px column
     beside the cards leaves nothing usable this narrow, so the nav stacks above them - capped, or
     twenty links become a wall the settings sit under. */
}
@media (max-width: 800px) {
  body.ccl-ui ccl-vertical-nav {
    flex: 0 0 auto;
    min-width: 0;
    height: auto;
    margin-bottom: var(--spacing-3xl);
  }
  body.ccl-ui ccl-vertical-nav .ccl-nav-list {
    max-height: 25vh;
  }
}
body.ccl-ui {
  /* The day cell the rebranded leave grids share - Year at a Glance on the overview, the list view on
     the team calendar. Both grids are drawn client-side from compiled handlebars with markup of their
     own, so this is the treatment and the fills, and each sheet maps them onto its own classes. */
  /* fills, by what the cell means. The light_mode scale steps straight from #f5f5f5 to #e9eaeb, too
     faint then too heavy against the #fafafa a bookable day is drawn with - gray-cool-100 is the step
     between them. */
  /* the tint behind each fill, for a pill drawn in the fill's outline */
  /* and a step up for the hovered pill */
  /* a bookable day: the rounded square with a faint ring, so it reads on the white card */
  /* a half day is two cells for one date, so only the outer corners round */
  /* a public holiday is a fill and a dot. box-shadow: none rather than the ring, the fill is enough. */
  /* the day numbers across the top of the grid */
  /* the axis labels - month names down the side of Year at a Glance, weekday letters across the top of
     the team calendar */
  /* the key under a grid. Include on the table.yaag-legend both grids render - leave.css, on every
     page, gives it the legacy pills, and this is what turns them into the cells above. */
  /* the swatches a key is made of - a cell in miniature */
}
body.ccl-ui .allowance-bar,
body.ccl-ui .allowance-bar.sm,
body.ccl-ui .allowance-bar.xs {
  display: flex;
  gap: 2px;
  height: 8px;
  border: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--colors-gray-light_mode-100);
  transition: height 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
body.ccl-ui .allowance-bar div,
body.ccl-ui .allowance-bar.sm div,
body.ccl-ui .allowance-bar.xs div {
  height: 100%;
  border-right: none;
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.22s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
body.ccl-ui .allowance-bar .approved,
body.ccl-ui .allowance-bar.sm .approved,
body.ccl-ui .allowance-bar.xs .approved {
  background-color: var(--colors-brand-950);
}
body.ccl-ui .allowance-bar .pending,
body.ccl-ui .allowance-bar.sm .pending,
body.ccl-ui .allowance-bar.xs .pending {
  background-color: var(--colors-warning-400);
}
body.ccl-ui .allowance-bar.exceeded .pending,
body.ccl-ui .allowance-bar.sm.exceeded .pending,
body.ccl-ui .allowance-bar.xs.exceeded .pending {
  background-color: var(--colors-error-400);
}
body.ccl-ui .allowance-bar:has(div:hover),
body.ccl-ui .allowance-bar.sm:has(div:hover),
body.ccl-ui .allowance-bar.xs:has(div:hover) {
  height: 12px;
}
body.ccl-ui .allowance-bar:has(div:hover) div:not(:hover),
body.ccl-ui .allowance-bar.sm:has(div:hover) div:not(:hover),
body.ccl-ui .allowance-bar.xs:has(div:hover) div:not(:hover) {
  transform: scaleY(0.72);
  opacity: 0.45;
}
body.ccl-ui .allowance-bar div:hover,
body.ccl-ui .allowance-bar.sm div:hover,
body.ccl-ui .allowance-bar.xs div:hover {
  filter: brightness(1.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
body.ccl-ui:has(.allowance-bar div:hover) .appogee-tooltip-container.success,
body.ccl-ui:has(.allowance-bar div:hover) .appogee-tooltip-container.warning,
body.ccl-ui:has(.allowance-bar div:hover) .appogee-tooltip-container.danger {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-xs);
  line-height: var(--line-height-text-xs);
  /* semibold, not medium: base_core loads Open Sans at 400/600/700, so 500 falls back to 400 */
  font-weight: var(--font-weight-semibold);
  color: var(--colors-text-secondary);
}
body.ccl-ui:has(.allowance-bar div:hover) .appogee-tooltip-container.success {
  border: 1px solid var(--colors-brand-950);
  background-color: var(--colors-brand-100);
}
body.ccl-ui:has(.allowance-bar div:hover) .appogee-tooltip-container.warning {
  border: 1px solid var(--colors-warning-400);
  background-color: var(--colors-warning-50);
}
body.ccl-ui:has(.allowance-bar div:hover) .appogee-tooltip-container.danger {
  border: 1px solid var(--colors-error-400);
  background-color: var(--colors-error-50);
}
body.ccl-ui ccl-button {
  display: contents;
}
body.ccl-ui .ccl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap-md);
  height: 44px;
  padding: 0 var(--button-padding-inline-3xl);
  border: 1px solid transparent;
  border-radius: var(--button-radius-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  font-weight: var(--font-weight-semibold);
  background: var(--button-bg-primary-default);
  color: var(--button-fg-primary-default);
  /* variant-primary's shadow.shadow-xs - without it the button reads flat next to a real one */
  box-shadow: 0 1px 2px 0 var(--colors-effects-shadows-xs);
  white-space: nowrap;
  text-decoration: none;
  appearance: none;
  margin: 0;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
body.ccl-ui .ccl-btn:hover:not([disabled]) {
  background: var(--button-bg-primary-hover);
  color: var(--button-fg-primary-default);
}
body.ccl-ui .ccl-btn {
  /* bootstrap nudges every glyphicon down a pixel, which the flex row has already centred */
}
body.ccl-ui .ccl-btn .glyphicon {
  top: 0;
}
body.ccl-ui .ccl-btn {
  /* The library rings on :focus-visible and never repaints on a plain :focus - pairing the two
     is what left a tertiary button filled after a click. Shadow order is the library's. */
}
body.ccl-ui .ccl-btn:focus-visible {
  outline: none;
  background: var(--button-bg-primary-focused);
  box-shadow: 0 0 0 4px var(--colors-effects-focus_rings-primary), 0 0 0 2px var(--colors-background-bg-primary);
}
body.ccl-ui .ccl-btn {
  /* page code marks an in-flight button with the class, and an anchor ignores [disabled] - this is
     all bootstrap's a.btn.disabled was doing for the legacy buttons */
}
body.ccl-ui .ccl-btn.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
body.ccl-ui .ccl-btn-icon-only {
  width: 44px;
  padding-inline: 0;
}
body.ccl-ui .ccl-btn-sm.ccl-btn-icon-only {
  width: 40px;
}
body.ccl-ui .ccl-btn.soft-hide,
body.ccl-ui .ccl-btn.soft-hidden {
  display: none;
}
body.ccl-ui .ccl-btn-sm {
  gap: var(--button-gap-sm);
  height: 40px;
  padding: 0 var(--button-padding-inline-2xl);
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
}
body.ccl-ui .ccl-btn-secondary {
  border-color: var(--button-border-secondary-default);
  background-color: var(--button-bg-secondary-default);
  color: var(--button-fg-secondary-default);
}
body.ccl-ui .ccl-btn-secondary:hover:not([disabled]) {
  border-color: var(--button-border-secondary-hover);
  background-color: var(--button-bg-secondary-hover);
  color: var(--button-fg-secondary-hover);
}
body.ccl-ui .ccl-btn-secondary:active:not([disabled]) {
  background-color: var(--button-bg-secondary-pressed);
}
body.ccl-ui .ccl-btn-secondary:focus-visible {
  background-color: var(--button-bg-secondary-default);
}
body.ccl-ui .ccl-btn-secondary[disabled] {
  color: var(--button-fg-secondary-disabled);
}
body.ccl-ui .ccl-btn-tertiary {
  border: none;
  box-shadow: none;
  background-color: transparent;
  color: var(--button-fg-secondary-default);
  /* the background too, not just the colour - .ccl-btn's own hover is variant-primary's solid
     brand, and it ties on specificity, so leaving it out let that through */
}
body.ccl-ui .ccl-btn-tertiary:hover:not([disabled]) {
  background-color: var(--button-bg-secondary-hover);
  color: var(--button-fg-secondary-hover);
}
body.ccl-ui .ccl-btn-tertiary:active:not([disabled]) {
  background-color: var(--button-bg-secondary-pressed);
}
body.ccl-ui .ccl-btn-tertiary:focus-visible {
  background-color: transparent;
}
body.ccl-ui .ccl-btn-tertiary[disabled] {
  color: var(--button-fg-secondary-disabled);
}
body.ccl-ui .ccl-btn-link-color {
  height: auto;
  padding: 0;
  gap: var(--spacing-xs);
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--button-fg-secondary-default);
}
body.ccl-ui .ccl-btn-link-color:hover:not([disabled]) {
  background: transparent;
  color: var(--button-fg-secondary-hover);
  text-decoration: underline;
}
body.ccl-ui .ccl-btn-link-color:focus-visible {
  background: transparent;
}
body.ccl-ui .ccl-btn-link-color[disabled] {
  color: var(--button-fg-secondary-disabled);
}
body.ccl-ui .ccl-btn-destructive {
  border-color: transparent;
  background: var(--button-bg-destructive-default);
  color: var(--button-fg-destructive-default_onbg);
}
body.ccl-ui .ccl-btn-destructive:hover:not([disabled]) {
  background: var(--button-bg-destructive-hover);
  color: var(--button-fg-destructive-default_onbg);
}
body.ccl-ui .ccl-btn-destructive:focus-visible {
  background: var(--button-bg-destructive-focused);
  box-shadow: 0 0 0 4px var(--colors-effects-focus_rings-error), 0 0 0 2px var(--colors-background-bg-primary);
}
body.ccl-ui .ccl-btn-destructive[disabled] {
  background: var(--button-bg-destructive-disabled);
  color: var(--button-fg-destructive-disabled);
}
body.ccl-ui .ccl-btn-secondary.ccl-btn-destructive {
  border-color: var(--button-border-destructive-default);
  background: var(--button-bg-destructive-subtle-default);
  color: var(--button-fg-destructive-default_nobg);
}
body.ccl-ui .ccl-btn-secondary.ccl-btn-destructive:hover:not([disabled]) {
  border-color: var(--button-border-destructive-hover);
  background: var(--button-bg-destructive-subtle-hover);
  color: var(--button-fg-destructive-hover);
}
body.ccl-ui .ccl-btn-secondary.ccl-btn-destructive:focus-visible {
  background: var(--button-bg-destructive-subtle-default);
}
body.ccl-ui .ccl-btn-secondary.ccl-btn-destructive[disabled] {
  border-color: var(--button-border-destructive-disabled);
  background: var(--button-bg-destructive-subtle-disabled);
  color: var(--button-fg-destructive-disabled);
}
body.ccl-ui .ccl-btn-tertiary.ccl-btn-destructive {
  border-color: transparent;
  background: transparent;
  color: var(--button-fg-destructive-default_nobg);
}
body.ccl-ui .ccl-btn-tertiary.ccl-btn-destructive:hover:not([disabled]) {
  color: var(--button-fg-destructive-hover);
}
body.ccl-ui .ccl-btn-tertiary.ccl-btn-destructive:focus-visible {
  background: transparent;
}
body.ccl-ui .ccl-btn-tertiary.ccl-btn-destructive[disabled] {
  background: transparent;
  color: var(--button-fg-destructive-disabled);
}
body.ccl-ui ccl-horizontal-tabs {
  display: block;
}
body.ccl-ui ccl-horizontal-tabs .ccl-tab-anchor {
  display: none;
}
body.ccl-ui ccl-radio-group {
  display: block;
  /* config the group reads and removes, but its <span hint> children are text until then */
}
body.ccl-ui ccl-radio-group ccl-radio {
  display: none;
}
body.ccl-ui ccl-radio-group .ccl-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}
body.ccl-ui ccl-radio-group .ccl-option {
  align-items: flex-start;
  gap: var(--spacing-md);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}
body.ccl-ui ccl-radio-group .ccl-radio {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--colors-border-primary);
  border-radius: 50%;
  background: var(--colors-background-bg-primary);
  transition: background 150ms ease, border-color 150ms ease;
}
body.ccl-ui ccl-radio-group .ccl-radio:after {
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--colors-text-white);
  transform: translate(-50%, -50%) scale(0);
}
body.ccl-ui ccl-radio-group .ccl-option:hover input:not([disabled]) ~ .ccl-radio {
  border-color: var(--colors-brand-950);
}
body.ccl-ui ccl-radio-group .ccl-option input:checked ~ .ccl-radio {
  border-color: var(--colors-brand-950);
  background: var(--colors-brand-950);
}
body.ccl-ui ccl-radio-group .ccl-option input:checked ~ .ccl-radio:after {
  transform: translate(-50%, -50%) scale(1);
}
body.ccl-ui ccl-radio-group .ccl-option input[disabled] ~ .ccl-radio {
  background: var(--colors-background-bg-secondary);
  border-color: var(--colors-border-secondary);
  cursor: not-allowed;
}
body.ccl-ui ccl-radio-group .ccl-radio:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  transition: transform 150ms ease;
}
body.ccl-ui ccl-radio-group .ccl-row input:focus-visible ~ .ccl-radio {
  outline: none;
  box-shadow: 0 0 0 2px var(--colors-background-bg-primary), 0 0 0 4px var(--colors-effects-focus_rings-primary);
}
body.ccl-ui ccl-radio-group {
  /* the step to a reveal belongs to the pair, not to whichever instance someone noticed */
}
body.ccl-ui ccl-radio-group .ccl-option + .ccl-reveal {
  margin-top: var(--spacing-3xl);
}
body.ccl-ui ccl-toggle-row {
  display: block;
}
body.ccl-ui ccl-toggle-row .ccl-setting {
  padding: 0;
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}
body.ccl-ui ccl-toggle-row .ccl-switch {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--toggle-bg-default-default);
  transition: background 150ms ease;
}
body.ccl-ui ccl-toggle-row .ccl-switch:after {
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--toggle-fg-default-default);
}
body.ccl-ui ccl-toggle-row .ccl-setting:hover input:not([disabled]) ~ .ccl-switch {
  background: var(--toggle-bg-default-hover);
}
body.ccl-ui ccl-toggle-row .ccl-setting input:checked ~ .ccl-switch {
  background: var(--toggle-bg-selected-default);
}
body.ccl-ui ccl-toggle-row .ccl-setting input:checked ~ .ccl-switch:after {
  transform: translateX(16px);
}
body.ccl-ui ccl-toggle-row .ccl-setting:hover input:checked:not([disabled]) ~ .ccl-switch {
  background: var(--toggle-bg-selected-hover);
}
body.ccl-ui ccl-toggle-row .ccl-setting input[disabled] ~ .ccl-switch {
  background: var(--toggle-bg-default-disabled);
  cursor: not-allowed;
}
body.ccl-ui ccl-toggle-row .ccl-setting input:checked[disabled] ~ .ccl-switch {
  background: var(--toggle-bg-selected-disabled);
}
body.ccl-ui ccl-toggle-row .ccl-switch:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  transition: transform 150ms ease;
}
body.ccl-ui ccl-toggle-row .ccl-row input:focus-visible ~ .ccl-switch {
  outline: none;
  box-shadow: 0 0 0 2px var(--colors-background-bg-primary), 0 0 0 4px var(--colors-effects-focus_rings-primary);
}
body.ccl-ui ccl-toggle-row {
  /* the step to a reveal belongs to the pair, not to whichever instance someone noticed */
}
body.ccl-ui ccl-toggle-row .ccl-setting + .ccl-reveal {
  margin-top: var(--spacing-3xl);
}
@media (max-width: 800px) {
  body.ccl-ui ccl-toggle-row .ccl-setting {
    align-items: flex-start;
  }
}

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