// variables
$color-visitor-screen-theme: #966432;
$color-visitor-screen-text: #c00000;
$color-btn-border-dotted: #aaa;

// inherited colors
$color-dark: $gray-800;
$color-border: $gray-300;
$color-blue-light: lighten($primary, 25%);

// font sizes
$body-main-font-size: 0.9rem;

// page styles
body {
  padding-bottom: 100px;

  &.loading {
    @extend .overflow-hidden;
    position: relative;

    &:after {
      content: url('/uind/img/loader.svg');
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      position: sticky;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 9999;
      background: rgba(255, 255, 255, 0.7);
    }
  }
}

.page-main {
  font-size: $body-main-font-size;
  flex-wrap: nowrap;
}

// fixed width column
.col {

  &.fw-50 {
    flex: 0 0 50px;
  }

  &.fw-75 {
    flex: 0 0 75px;
  }

  &.fw-100 {
    flex: 0 0 100px;
  }
}

// sidebar
.page-filters-sidebar {
  padding: 20px;
  background: $gray-100;
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.page-filter-sidebar-toggle {
  @extend .btn;
  @extend .btn-dark;
  @extend .btn-sm;
  position: absolute;
  left: 1px;
  top: 170px;
}

// no bullets in list
.list-no-bullets {
  list-style-type: none;
}

// select toggle
[data-hidden] {
  display: none;
}

.form-row[style="display: block;"] {
  display: flex !important;
}

// submenu
.dropdown-submenu-container {
  position: relative;

  & > a:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 12px;
    right: 8px;
    @include caret-right();
  }

  .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
  }

  &:hover > .dropdown-menu {
    display: block;
  }
}

// backgrounds
.bg-gray-100 {
  background: $gray-100;
}

.z-index-99 {
  z-index: 99 !important;
}

// multi step form navigation and toggle
.multistep-form-nav {
  display: flex;
  justify-content: space-between;
  width: 75%;
  margin: 0 auto;
  position: relative;
  border-bottom: 0;

  &:before,
  &:after {
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    top: 45px;
  }

  &:before {
    width: 100%;
    background: $color-border;
  }

  &:after {
    width: 0;
    background: $primary;
    transition: width 0.2s ease-in-out;
  }
}

.multistep-form-nav__item {
  color: inherit;
  font-size: 0.75em;
  text-transform: uppercase;
  display: flex;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid $color-border;
  justify-content: center;
  align-items: center;
  background: #fff;
  position: relative;
  cursor: pointer;
  z-index: 9;
  transition: border-color 0.1s ease-in-out;

  &.active {
    border-color: $primary;
  }

  &.prev {
    border-color: $primary;
  }

  &.error {
    border-color: $danger;
  }

  &:hover {
    text-decoration: none;
  }

  &:not(.active):hover,
  &:not(.prev):hover {
    border-color: $color-blue-light;
  }
}

.multistep-form-footer-nav {
  display: flex;
  justify-content: flex-end;

  a {
    margin-right: 5px;

    &:last-child {
      margin-right: 0;
    }
  }
}

// tabs
[data-tab] {
  display: none;

  &.active {
    display: block;
  }
}

.toggle-closed,
.toggle-opened {
  position: relative;

  &:before {
    display: inline-block;
    margin-right: 5px;
  }
}

.toggle-closed {
  &:before {
    content: '+';
  }
}

.toggle-opened {
  &:before {
    content: '-';
  }
}

.action-btn {
  margin-right: 5px;

  &:last-child {
    margin-right: 0;
  }
}

.table--white-space-no-wrap {

  th, td {
    white-space: nowrap;
  }
}

.page-header {
  margin-bottom: 30px;
}

.page-header__logo {
  display: inline-block;
  width: auto;
  height: 30px;
}

.page-header__user-menu {
  font-size: 0.85em;
  margin-left: auto;

  .dropdown-menu {
    left: auto;
    right: 0;
  }
}

.page-header__logout {
  padding: 0;
  margin: 0;

  [type="submit"] {
    @extend .dropdown-item;
  }
}

#welcome-msg {
  display: block;
  width: 75vw;
  margin: 10vh auto 0;
}

.visitor-visit-table {
  text-transform: uppercase;
  font-size: 0.9em;
}

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

.item-config-table {
  font-size: 0.9em;
}

/* visitor screen */
.visitor-screen {
  border: 2px solid $color-dark;

  .form-control {
    text-transform: uppercase;
    border-color: $color-dark;
    border-radius: 0;
  }

  label {
    font-size: 0.9em;
  }
}

.visitor-screen_top {
  font-size: 0.8em;
  text-transform: uppercase;
  font-style: italic;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  background: $color-visitor-screen-theme;

  p {
    line-height: 2em;
    margin-bottom: 0;
  }
}

.visitor-screen__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 20px;
  border-bottom: 2px solid $color-dark;
  margin-bottom: 20px;
}

.visitor-screen__header-logo {
  display: block;
  width: 150px;
  height: auto;
}

.visitor-screen__header-txt {
  text-align: right;
  text-transform: uppercase;
}

.visitor-screen__header-txt-head {
  font-size: 1.75em;
  font-weight: bold;
  margin-bottom: 0;
}

.visitor-screen__header-txt-subhead {
  color: $color-visitor-screen-text;
  font-size: 1.25em;
  font-weight: bold;
  font-style: italic;
  margin-bottom: 0;
}

.visitor-screen__middle {
  display: flex;
  justify-content: center;
  padding: 0 10px;
}

.visitor-screen__middle-fields {
  width: calc(100% - 200px - 20px);
  padding-right: 20px;
}

.visitor-screen__middle-right {
  width: 200px;
}

.visitor-screen__middle-photo {
  font-size: 0.75em;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 210px;
  max-width: 100%;
  padding: 5px;
  border: 1px dashed $gray-500;
  margin-bottom: 25px;
}

.visitor-screen__photo {
  display: block;
  width: 190px;
  max-width: 90%;
  height: auto;
  position: absolute;

  &[src=""] {
    display: none;
  }
}

.visitor-screen__action {
  width: 200px;
  border-radius: 0;

  i {
    font-size: 2em;
    display: block;
  }

  span {
    display: block;
  }
}

.visitor-screen__footer {
  font-size: 0.8em;
  text-transform: uppercase;
  font-style: italic;
  color: #fff;
  padding: 0 20px;
  background: $color-visitor-screen-theme;

  p {
    text-align: center;
    line-height: 2em;
    margin-bottom: 0;
  }
}

// photo modal
.visitor-photo__video {
  display: block;
  width: 300px;
  height: 225px;
  margin: 0 auto;
  border: 1px dashed $gray-500;
  margin-bottom: 30px;
}

.visitor-photo__temp-photo {
  display: block;
  width: 300px;
  height: 225px;
  margin: 0 auto;
  border: 1px dashed $gray-500;
}

.visitor-photo__canvas {
  display: none;
  width: 300px;
  height: 225px;
}

// single visitor screen
.visitor-single__info {
  margin-bottom: 50px;
}

// notice bar
.notice-bar {
  display: none;
  width: 100vw;
  height: 80px;
  position: absolute;
  left: 0;
  bottom: 0;

  &.active {
    display: block;
  }

  p {
    font-size: 1.25em;
    font-weight: bold;
    text-align: center;
    line-height: 80px;
    margin-bottom: 0;
  }
}

// employee grade
.employee-grade-form {

}


.form-item-remove {
  font-size: 0.6em;
  text-decoration: none;
  position: absolute;
  top: 5px;
  right: 0;

  &:hover {
    text-decoration: none;
  }
}

// data tables
.dataTable {
  font-size: $body-main-font-size;

  &.fixedHeader-floating {
    font-size: 0.8em;
  }

  // fixed column
  .dtfc-fixed-left {
    background: inherit;
    z-index: 99;
  }
}

div.dataTables_wrapper {

  div.dataTables_filter input,
  div.dataTables_filter select {
    margin-left: 0.5em;
    display: inline-block;
    width: 170px;
  }

}

// company form
.hrms-company-form {

  li {
    padding-top: 15px;
    position: relative;
  }

  .form-item-remove {
    top: -5px;
  }
}

// hierarchy list
.hierarchy-list {

  & ul li {
    position: relative;

    &:before {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid $color-border;
      position: absolute;
      top: 8px;
      left: -45px;

    }

    &:after {
      content: '';
      display: block;
      width: 25px;
      height: 1px;
      background: $color-border;
      position: absolute;
      top: 12px;
      left: -36px;
    }
  }
}

[data-form-item-container],
[data-educational-credential],
[data-past-employer],
[data-government-reference],
[data-professional-reference],
[data-next-of-kin],
[data-wrapper-item],
[data-sir-item],
[data-bill-item],
[data-po-item],
[data-pr-item],
[data-indent-item],
[data-entity-item],
[data-sc-item] {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid $color-border;

  &:last-of-type:not([data-sc-item]) {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
}

// employee photo
.employee__photo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 230px;
  height: 230px;
  max-width: 100%;
  border: 2px dashed $color-border;
  cursor: pointer;
  position: relative;
  margin-bottom: 0;

  &:before {
    content: 'Change Photo';
    display: block;
    width: 230px;
    height: 230px;
    max-width: 100%;
    line-height: 230px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.2em;
    font-weight: bold;
    opacity: 0.3;
    z-index: 9;
    transition: opacity 0.1s ease-in-out;
  }

  &:hover {
    &:before {
      opacity: 0.8;
      z-index: 10;
    }

    img {
      opacity: 0.3;
      z-index: 9;
    }
  }

  img {
    display: block;
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    position: relative;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.1s ease-in-out;

    &[src=""] {
      display: none;
    }
  }
}

// inventory location
.uic-inventory-locations {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.uic-inventory-location__unit {
  flex-basis: 19%;
  flex-grow: 0;
  flex-shrink: 0;
  margin-bottom: 50px;
}

// login page
.page-login {
  min-width: 100vw;
  min-height: 100vh;
  background: url('../img/login-bg.jpg') center center no-repeat;
  background-size: cover;
  position: relative;

  &:before {
    content: '';
    display: block;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.65);
  }
}

.login__form-container {
  margin-top: 100px;
}

.login__logo {

  img {
    display: block;
    width: 200px;
    height: auto;
    margin: 0 auto 30px;
  }
}

.login__form {
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
}

// status badges
.badge-FORWARDED,
.badge-WAIVED,
.badge-FORWARDEDTOMANAGEMENT,
.badge-FORWARDED_TO_MANAGEMENT,
.badge-FORWARDEDTOSUPPLIER,
.badge-FORWARDED_TO_SUPPLIER,
.badge-APPROVED,
.badge-BYPASSED_APPROVAL,
.badge-SIR_CREATED,
.badge-DELIVERED,
.badge-CONFIRMED,
.badge-AUTHORIZED,
.badge-FORWARDED_TO_GATE_KEEPER,
.badge-FORWARDED_TO_STORE_KEEPER,
.badge-FORWARDED_FOR_PR,
.badge-FORWARDED_TO_AUDIT,
.badge-PAYMENT_CREATED,
.badge-BYPASSED_AUDIT,
.badge-BY_PASSED_FOR_WO,
.badge-PAID,
.badge-WORKING,
.badge-COMPLETED,
.badge-READY,
.badge-READY_FOR_UPLOAD,
.badge-UPLOADED,
.badge-PUBLISHED,
.badge-LOW,
.badge-BILLED,
.badge-PAYMENT_READY,
.badge-active,
.badge-LEASED,
.badge-PICKED,
.badge-true,
.badge-ACCOUNTS_APPROVED,
.badge-VACANT,
.badge-PASSED,
.badge-POSTED,
.badge-RUNNING,
.badge-AVAILABLE,
.badge-RECEIVED,
.badge-ACTIVE,
.badge-TAGGED {
  @extend .badge-success;
}

.badge-DRAFT,
.badge-UNPAID,
.badge-REVIEWING,
.badge-REQUESTED,
.badge-FORWARDED_FOR_APPROVAL,
.badge-FORWARDED_TO_ACCOUNTS,
.badge-FORWARDED_FOR_HR_APPROVAL,
.badge-TO_DO,
.badge-ARRANGING,
.badge-IN_ACTIVE {
  @extend .badge-secondary;
}

.badge-NEED_ACTION,
.badge-PARTIALLY_DELIVERED,
.badge-PENDING_HR_HOD,
.badge-ONHOLD,
.badge-PROCURED,
.badge-SPLIT,
.badge-MERGED,
.badge-AWAITING_INSPECTION,
.badge-IN_PROGRESS,
.badge-ON_HOLD,
.badge-MEDIUM,
.badge-PENDING,
.badge-PENDING_MANAGER,
.badge-PENDING_COMMERCIAL,
.badge-PENDING_DEPARTMENT_HEAD,
.badge-PENDING_DIVISION_HEAD,
.badge-PENDING_AUTHORITY,
.badge-PENDING_AUDIT,
.badge-AWAITING_CONFIRMATION,
.badge-PENDING_MANAGEMENT,
.badge-PARTIALLY_COMPLETED,
.badge-PENDING_TREASURY,
.badge-UNBILLED,
.badge-PARTIALLY_PAID,
.badge-EMPTY,
.badge-PENDING_HOD,
.badge-PENDING_HR,
.badge-PENDING_IE,
.badge-inactive,
.badge-UN_LEASED,
.badge-OCCUPIED,
.badge-FORWARDED_TO_DIVISION,
.badge-FORWARDEDTOINDENTDIVAPPROVAL,
.badge-ASSIGNED,
.badge-USER_APPROVED,
.badge-HOD_APPROVED,
.badge-DEPARTMENT_APPROVED,
.badge-AUDIT_APPROVED,
.badge-ASSIGNED,
.badge-QUEUED,
.badge-NOT_ASSIGNED,
.badge-NOT_RECEIVED_YET{
  @extend .badge-warning;
}

.badge-NOTAPPROVED,
.badge-NOT_APPROVED,
.badge-OVERDUE,
.badge-UN_TAGGED,
.badge-TERMINATED,
.badge-DECLINED,
.badge-Cancelled,
.badge-URGENT,
.badge-HIGH,
.badge-CANCELLED,
.badge-REJECTED,
.badge-OVER_OCCUPIED,
.badge-NO_VEHICLE_ASSIGNED,
.badge-FAILED {
  @extend .badge-danger;
}

.badge-FORWARDED_FOR_DEPARTMENT_APPROVAL,
.badge-FORWARDED_FOR_QA_APPROVAL,
.badge-FORWARDED_FOR_AUDIT_APPROVAL,
.badge-FORWARDED_FOR_MANAGEMENT_APPROVAL,
.badge-FORWARDED_FOR_ACCOUNTS_APPROVAL,
.badge-FORWARDED_FOR_ADMIN_APPROVAL,
.badge-VEHICLE_ASSIGNED,
.badge-FORWARDED_TO_DYEING,
.badge-FORWARDED_TO_STORE {
  @extend .badge-info;
}

.travel-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f1f1f1;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.route-line {
  flex: 1;
  border-top: 2px dashed #aaa;
  margin: 0 10px;
}

.plane-icon {
  font-size: 2em;
  color: #007bff;
  margin: 0 10px;
}

.location {
  text-align: center;
}

.date {
  font-size: 1.2em;
  font-weight: bold;
}

.place {
  color: #555;
}


// item photo
.item__image {
  display: inline-block;
  position: relative;
  margin-right: 10px;

  &:last-child {
    margin-right: 0;
  }

  img {
    display: block;
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
  }

  .item__image-remove {
    font-size: 0.8em;
    position: absolute;
    top: 5px;
    right: 5px;
  }
}

// password strength meter
[data-password-strength-meter] {
  display: block;
  width: 100%;
  height: 5px;
  margin-bottom: 10px;
  background: #ccc;
  position: relative;

  &:after {
    content: "";
    display: block;
    width: 0;
    height: 5px;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    transition: background-color 0.1s ease-in-out,
    width 0.2s ease-in-out;
  }

  &[data-password-strength-meter="0"] {
    &:after {
      width: 20%;
      background-color: #d80000;
    }
  }

  &[data-password-strength-meter="1"] {
    &:after {
      width: 40%;
      background-color: #d88400;
    }
  }

  &[data-password-strength-meter="2"] {
    &:after {
      width: 60%;
      background-color: #c1d800;
    }
  }

  &[data-password-strength-meter="3"] {
    &:after {
      width: 80%;
      background-color: #7ad800;
    }
  }

  &[data-password-strength-meter="4"] {
    &:after {
      width: 100%;
      background-color: #23b531;
    }
  }
}

[data-password-strength-message] {
  font-size: 0.85em;
  font-weight: bold;
}

.td--align-number {
  padding-right: 7em !important;
  text-align: right !important;
}

.item-checkbox-container {
  position: absolute;
  left: 0;
  top: 35px;
}

.fc-license-message {
  display: none !important;
}

.loading-container {
  padding: 20px 0;
  text-align: center;
}

.font-sm {
  font-size: 0.9em;
}

.font-x-sm {
  font-size: 0.75em;
}

.font-lg {
  font-size: 1.1em;
}

.notification-new {
  position: relative;

  &:after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: $red;
    position: absolute;
    top: 8px;
    right: 0;
    animation: anim-glow 2s ease infinite;
  }

  @keyframes anim-glow {
    0% {
      box-shadow: 0 0 rgba($red, 1);
    }
    100% {
      box-shadow: 0 0 10px 8px transparent;
      border-width: 2px;
    }
  }
}

.uind-autocomplete-container {
  position: relative;

  .uind-autocomplete-list {
    @extend .list-group;
    @extend .shadow;
    background: #fff;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    overflow-y: auto;
    max-height: 500px;
  }

  a, li {
    @extend .list-group-item;
    @extend .list-group-item-action;
    @extend .font-sm;
    padding: 0.65rem 0.75rem;
  }

  a {
    @extend .list-group-item-action;
  }
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  background: rgba(0, 0, 0, 0.7);
}

.bill-total-container {
  @extend .shadow;
  position: fixed;
  top: 100px;
  right: -300px;
  width: 350px;
  padding: 25px;
  background: #fff;
  cursor: pointer;
  opacity: 0.5;
  z-index: 99;
  transition: right 0.25s ease-in-out,
  opacity 0.25s ease-in-out;

  &:hover {
    right: 0;
    opacity: 1;
  }
}

.slash-separator {
  position: relative;

  &:after {
    content: " /";
  }

  &:last-child {
    &:after {
      content: none;
    }
  }
}

.google-map-label {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  background: #9d0208;
  position: relative;

  &:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #9d0208;
    position: absolute;
    bottom: -6px;
    left: 5px;
  }

  &.google-map-label--370617 {
    background: #370617;

    &:after {
      border-top: 10px solid #370617;
    }
  }

  &.google-map-label--6a040f {
    background: #6a040f;

    &:after {
      border-top: 10px solid #6a040f;
    }
  }

  &.google-map-label--9d0208 {
    background: #9d0208;

    &:after {
      border-top: 10px solid #9d0208;
    }
  }

  &.google-map-label--d00000 {
    background: #d00000;

    &:after {
      border-top: 10px solid #d00000;
    }
  }

  &.google-map-label--dc2f02 {
    background: #dc2f02;

    &:after {
      border-top: 10px solid #dc2f02;
    }
  }

  &.google-map-label--e85d04 {
    background: #e85d04;

    &:after {
      border-top: 10px solid #e85d04;
    }
  }

  &.google-map-label--f48c06 {
    background: #f48c06;

    &:after {
      border-top: 10px solid #f48c06;
    }
  }

  &.google-map-label--faa307 {
    background: #faa307;

    &:after {
      border-top: 10px solid #faa307;
    }
  }

  &.google-map-label--ffba08 {
    background: #ffba08;

    &:after {
      border-top: 10px solid #ffba08;
    }
  }
}

.employee-photo-thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;

  &.employee-photo-thumb--sm {
    width: 42px;
    height: 42px;
  }

  &.employee-photo-thumb--xsm {
    width: 32px;
    height: 32px;
  }
}

.item-image {
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.function-icon {
  display: inline-block;
  width: 20px;
  height: auto;
  margin-right: 10px;

  &.dark,
  .active & {
    filter: brightness(0);
  }
}

.employee-function-icon,
.employee-grade-icon {
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  text-align: center;
  line-height: 23px;
  position: absolute;
  bottom: 0;
}

.employee-function-icon {
  right: 0;

  img {
    display: inline-block;
    width: 15px;
    height: auto;
  }
}

.employee-grade-icon {
  color: #fff;
  left: 0;

  &.M {
    background: #10B981;
  }

  &.W {
    background: #3B82F6;
  }

  &.null {
    background: #EF4444;
  }
}

.inactive-employee {
  @extend .text-muted;
  text-decoration: line-through;
}

[data-table] {
  display: none;

  thead th {
    position: relative;
  }
}

.multi-select-container {
  position: relative;

  &:hover {
    .multi-select-options {
      display: block;
    }
  }

  .multi-select-label {
    @extend .form-control;
    cursor: pointer;
  }

  .multi-select-options {
    @extend .list-group;
    @extend .shadow;
    background: #fff;
    width: 100%;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 99;
    max-height: 400px;
    overflow-y: auto;
    display: none;
  }

  li {
    @extend .list-group-item;
    @extend .list-group-item-action;
    @extend .font-sm;
    padding: 0.65rem 0.75rem;
  }
}

.radio-button {
  cursor: pointer;
  margin-bottom: 0;

  [type="radio"] {
    display: none;

    &:checked + span {
      color: #fff;
      border: 1px solid $primary;
      background: $primary;
    }
  }

  span {
    color: inherit;
    display: block;
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    border: 1px solid $color-dark;
    background: transparent;
    transition: border 0.1s ease-in-out,
    background 0.1s ease-in-out,
    color 0.1s ease-in-out;

    &:hover {
      border: 1px solid $color-blue-light;
    }
  }
}

.employee-probation-review-photo {
  width: 100%;
  min-height: 200px;
  background: url('/uind/img/man.png') center center no-repeat;
}

.trashIcon {
  color: white;
}

.crossicon {
  color: white;
}

.modal-header-hubstaff {
  background-color: #26A7DE;
  color: white;
}

.divider {
  border-top: 1px solid #D1D5DB;
}

.hubstaffactivity {
  color: #06B6D4;
}

.hubstafftrack {
  color: #1ca44e;
}

.hubstaff__logo {
  display: inline-block;
  width: auto;
  height: 20px;
}

.stock-link {
  text-decoration: revert;
}

// loading skeleton
.skeleton-box {
  height: 2em;
  position: relative;
  overflow: hidden;
  background-color: #DDDBDD;
  border-radius: 0.25em;
  margin-bottom: 1.5em;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
                    90deg,
                    rgba(#fff, 0) 0,
                    rgba(#fff, 0.2) 20%,
                    rgba(#fff, 0.5) 60%,
                    rgba(#fff, 0)
    );
    animation: shimmer 2s infinite;
    content: '';
  }

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
}

// custom table (based on div)
.custom-table {
  border-top: 1px solid $color-border;
}

.table-head {
  border-bottom: 2px solid $color-border;
}

.table-body {
}

.table-rows-wrapper {

  .custom-table-striped &:nth-child( 2n ) {
    background-color: rgba(0, 0, 0, .05);
  }

  .custom-table-hover &:hover {
    background-color: rgba(0, 0, 0, .075);
  }
}

.table-row {
  display: flex;
  flex-grow: 1;
  border-bottom: 1px solid $color-border;

  .table-cell {
    padding: 1rem 0.75rem;
  }
}

.payment-progress-tooltip {
  .tooltip-inner {
    font-size: 0.95em;
    max-width: 550px;
    text-align: left;
  }
}

.resource-plan-date {
  transition: background-color 0.1s ease-in-out;

  &:hover {
    background-color: #eff6ff;
  }
}

.resource-plan-task {
  display: block;
  color: #fff !important;
  font-size: 0.9em;
  text-align: center;
  background-color: #334155;
  padding: 3px 5px;
  margin-bottom: 5px;
  transition: background-color 0.1s ease-in-out;

  &:hover {
    text-decoration: none;
    background-color: #0369a1;
  }

  &.resource-plan-task--TO_DO {
    background: #ea580c;
  }

  &.resource-plan-task--WORKING {
    background: #0284c7;
  }

  &.resource-plan-task--ON_HOLD {
    background: #475569;
  }

  &.resource-plan-task--COMPLETED {
    background: #059669;
  }

  &.resource-plan-task--OVERDUE {
    background: #be123c;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.modal-overlay-custom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
}

.tox-notifications-container {
  display: none !important;
}

.vertical-separator-narrow {
  padding-bottom: 3px;
  margin-bottom: 3px;
  border-bottom: 1px solid $color-border;

  &:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
}

.project-card {
  height: 230px;
  padding: 1em 1.5em;
  margin-bottom: 2em;
}

.photo-capture-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 210px;
  border: 1px dashed $gray-500;
  cursor: pointer;
  transition: border-color 0.1s ease-in-out;

  &:hover {
    border-color: $gray-800;
  }

  .photo-capture-img {
    max-width: 100%;
    height: auto;
  }
}

.photo-capture-video {
  width: 100%;
  height: auto;
}

.photo-capture-temp-photo {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.progress-container {
  width: 0;
  height: 35px;
  border-radius: 0.4rem;
  background-color: dodgerblue;
}

.w-90 {
  width: 90%;
}


.ticker-container {
  overflow: hidden;
  white-space: nowrap;
  background: #FFFFFF !important;
}

.ticker-text {
  display: inline-block;
  animation: tickerAnimation 25s linear infinite;
}

@keyframes tickerAnimation {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

.has-details {
  position: relative;
}

.details {
  position: absolute;
  top: 0;
  transform: translateY(0%) scale(0);
  transition: transform 0.1s ease-in-out;
  transform-origin: left;
  display: inline;
  background: white;
  z-index: 20;
  min-width: 50%;
  padding: 1rem;
  box-shadow: 4px 4px 8px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.has-details:hover .divider-container {
  transform: translateX(-100%) scale(1.05);
  background: rgba(255, 255, 255, 0.99);
}

.badge-pending {
  color: #fff;
  background-color: blueviolet
}

.badge-hod-pending {
  color: #fff;
  background-color: orange
}

.badge-hr-pending {
  color: #fff;
  background-color: gold
}

.badge-management-pending {
  color: #fff;
  background-color: yellowgreen
}

.badge-approved {
  color: #fff;
  background-color: green
}

.badge-decline {
  color: #fff;
  background-color: red
}

.badge-declined {
  color: #fff;
  background-color: red
}

.ms-graph-group-employee-tooltip {
  width: 450px;
  text-align: left;
}