@charset "UTF-8";
/*!
 * Kaaspro HRMS - Custom UI Styles
 * Version: 2.0.0-alpha (Phase 1 - Centralization)
 * Description: Centralized CSS for Kaaspro HRMS
 * Date: October 19, 2025
 */
/*!
 * Bootstrap v5.0.2 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); }

*,
*::before,
*::after {
  box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25; }

hr:not([size]) {
  height: 1px; }

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2; }

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw); }
  @media (min-width: 1200px) {
    h1, .h1 {
      font-size: 2.5rem; } }
h2, .h2 {
  font-size: calc(1.325rem + 0.9vw); }
  @media (min-width: 1200px) {
    h2, .h2 {
      font-size: 2rem; } }
h3, .h3 {
  font-size: calc(1.3rem + 0.6vw); }
  @media (min-width: 1200px) {
    h3, .h3 {
      font-size: 1.75rem; } }
h4, .h4 {
  font-size: calc(1.275rem + 0.3vw); }
  @media (min-width: 1200px) {
    h4, .h4 {
      font-size: 1.5rem; } }
h5, .h5 {
  font-size: 1.25rem; }

h6, .h6 {
  font-size: 1rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem; }

abbr[title],
abbr[data-bs-original-title] {
  text-decoration: underline dotted;
  cursor: help;
  text-decoration-skip-ink: none; }

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit; }

ol,
ul {
  padding-left: 2rem; }

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem; }

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0; }

dt {
  font-weight: 700; }

dd {
  margin-bottom: 0.5rem;
  margin-left: 0; }

blockquote {
  margin: 0 0 1rem; }

b,
strong {
  font-weight: bolder; }

small, .small {
  font-size: 0.875em; }

mark, .mark {
  padding: 0.2em;
  background-color: #fcf8e3; }

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

a {
  color: #0d6efd;
  text-decoration: underline; }
  a:hover {
    color: #0a58ca; }

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none; }

pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
  direction: ltr /* rtl:ignore */;
  unicode-bidi: bidi-override; }

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em; }
  pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal; }

code {
  font-size: 0.875em;
  color: #d63384;
  word-wrap: break-word; }
  a > code {
    color: inherit; }

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 0.875em;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem; }
  kbd kbd {
    padding: 0;
    font-size: 1em;
    font-weight: 700; }

figure {
  margin: 0 0 1rem; }

img,
svg {
  vertical-align: middle; }

table {
  caption-side: bottom;
  border-collapse: collapse; }

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #6c757d;
  text-align: left; }

th {
  text-align: inherit;
  text-align: -webkit-match-parent; }

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0; }

label {
  display: inline-block; }

button {
  border-radius: 0; }

button:focus:not(:focus-visible) {
  outline: 0; }

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

button,
select {
  text-transform: none; }

[role="button"] {
  cursor: pointer; }

select {
  word-wrap: normal; }
  select:disabled {
    opacity: 1; }

[list]::-webkit-calendar-picker-indicator {
  display: none; }

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }
  button:not(:disabled),
  [type="button"]:not(:disabled),
  [type="reset"]:not(:disabled),
  [type="submit"]:not(:disabled) {
    cursor: pointer; }

::-moz-focus-inner {
  padding: 0;
  border-style: none; }

textarea {
  resize: vertical; }

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0; }

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit; }
  @media (min-width: 1200px) {
    legend {
      font-size: 1.5rem; } }
  legend + * {
    clear: left; }

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0; }

::-webkit-inner-spin-button {
  height: auto; }

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: textfield; }

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-color-swatch-wrapper {
  padding: 0; }

::file-selector-button {
  font: inherit; }

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button; }

output {
  display: inline-block; }

iframe {
  border: 0; }

summary {
  display: list-item;
  cursor: pointer; }

progress {
  vertical-align: baseline; }

[hidden] {
  display: none !important; }

.lead {
  font-size: 1.25rem;
  font-weight: 300; }

.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2; }
  @media (min-width: 1200px) {
    .display-1 {
      font-size: 5rem; } }
.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 300;
  line-height: 1.2; }
  @media (min-width: 1200px) {
    .display-2 {
      font-size: 4.5rem; } }
.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2; }
  @media (min-width: 1200px) {
    .display-3 {
      font-size: 4rem; } }
.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2; }
  @media (min-width: 1200px) {
    .display-4 {
      font-size: 3.5rem; } }
.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2; }
  @media (min-width: 1200px) {
    .display-5 {
      font-size: 3rem; } }
.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2; }
  @media (min-width: 1200px) {
    .display-6 {
      font-size: 2.5rem; } }
.list-unstyled {
  padding-left: 0;
  list-style: none; }

.list-inline {
  padding-left: 0;
  list-style: none; }

.list-inline-item {
  display: inline-block; }
  .list-inline-item:not(:last-child) {
    margin-right: 0.5rem; }

.initialism {
  font-size: 0.875em;
  text-transform: uppercase; }

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem; }
  .blockquote > :last-child {
    margin-bottom: 0; }

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d; }
  .blockquote-footer::before {
    content: "\2014\00A0"; }

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto; }

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px; } }

@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px; } }

@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px; } }

@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px; } }

@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px; } }

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5); }
  .row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y); }

.col {
  flex: 1 0 0%; }

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto; }

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%; }

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%; }

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.33333%; }

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%; }

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%; }

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.66667%; }

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%; }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto; }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%; }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%; }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.33333%; }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%; }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%; }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.66667%; } }

@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%; }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto; }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%; }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%; }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.33333%; }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%; }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%; }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.66667%; } }

@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%; }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto; }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%; }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%; }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.33333%; }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%; }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%; }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.66667%; } }

@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%; }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto; }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%; }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%; }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.33333%; }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%; }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%; }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.66667%; } }

@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%; }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto; }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%; }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%; }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.33333%; }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%; }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%; }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.66667%; } }

.col-auto {
  flex: 0 0 auto;
  width: auto; }

.col-1 {
  flex: 0 0 auto;
  width: 8.33333%; }

.col-2 {
  flex: 0 0 auto;
  width: 16.66667%; }

.col-3 {
  flex: 0 0 auto;
  width: 25%; }

.col-4 {
  flex: 0 0 auto;
  width: 33.33333%; }

.col-5 {
  flex: 0 0 auto;
  width: 41.66667%; }

.col-6 {
  flex: 0 0 auto;
  width: 50%; }

.col-7 {
  flex: 0 0 auto;
  width: 58.33333%; }

.col-8 {
  flex: 0 0 auto;
  width: 66.66667%; }

.col-9 {
  flex: 0 0 auto;
  width: 75%; }

.col-10 {
  flex: 0 0 auto;
  width: 83.33333%; }

.col-11 {
  flex: 0 0 auto;
  width: 91.66667%; }

.col-12 {
  flex: 0 0 auto;
  width: 100%; }

.offset-1 {
  margin-left: 8.33333%; }

.offset-2 {
  margin-left: 16.66667%; }

.offset-3 {
  margin-left: 25%; }

.offset-4 {
  margin-left: 33.33333%; }

.offset-5 {
  margin-left: 41.66667%; }

.offset-6 {
  margin-left: 50%; }

.offset-7 {
  margin-left: 58.33333%; }

.offset-8 {
  margin-left: 66.66667%; }

.offset-9 {
  margin-left: 75%; }

.offset-10 {
  margin-left: 83.33333%; }

.offset-11 {
  margin-left: 91.66667%; }

.g-0,
.gx-0 {
  --bs-gutter-x: 0; }

.g-0,
.gy-0 {
  --bs-gutter-y: 0; }

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem; }

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem; }

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem; }

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem; }

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem; }

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem; }

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem; }

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem; }

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem; }

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem; }

@media (min-width: 576px) {
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto; }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333%; }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66667%; }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%; }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333%; }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66667%; }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%; }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333%; }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66667%; }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%; }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333%; }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66667%; }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%; }
  .offset-sm-0 {
    margin-left: 0; }
  .offset-sm-1 {
    margin-left: 8.33333%; }
  .offset-sm-2 {
    margin-left: 16.66667%; }
  .offset-sm-3 {
    margin-left: 25%; }
  .offset-sm-4 {
    margin-left: 33.33333%; }
  .offset-sm-5 {
    margin-left: 41.66667%; }
  .offset-sm-6 {
    margin-left: 50%; }
  .offset-sm-7 {
    margin-left: 58.33333%; }
  .offset-sm-8 {
    margin-left: 66.66667%; }
  .offset-sm-9 {
    margin-left: 75%; }
  .offset-sm-10 {
    margin-left: 83.33333%; }
  .offset-sm-11 {
    margin-left: 91.66667%; }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0; }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0; }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem; }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem; }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem; }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem; }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem; }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem; }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem; }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem; }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem; }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem; } }

@media (min-width: 768px) {
  .col-md-auto {
    flex: 0 0 auto;
    width: auto; }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333%; }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66667%; }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%; }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333%; }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66667%; }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%; }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333%; }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66667%; }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%; }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333%; }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66667%; }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%; }
  .offset-md-0 {
    margin-left: 0; }
  .offset-md-1 {
    margin-left: 8.33333%; }
  .offset-md-2 {
    margin-left: 16.66667%; }
  .offset-md-3 {
    margin-left: 25%; }
  .offset-md-4 {
    margin-left: 33.33333%; }
  .offset-md-5 {
    margin-left: 41.66667%; }
  .offset-md-6 {
    margin-left: 50%; }
  .offset-md-7 {
    margin-left: 58.33333%; }
  .offset-md-8 {
    margin-left: 66.66667%; }
  .offset-md-9 {
    margin-left: 75%; }
  .offset-md-10 {
    margin-left: 83.33333%; }
  .offset-md-11 {
    margin-left: 91.66667%; }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0; }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0; }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem; }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem; }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem; }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem; }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem; }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem; }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem; }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem; }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem; }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem; } }

@media (min-width: 992px) {
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto; }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333%; }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66667%; }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%; }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333%; }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66667%; }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%; }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333%; }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66667%; }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%; }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333%; }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66667%; }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%; }
  .offset-lg-0 {
    margin-left: 0; }
  .offset-lg-1 {
    margin-left: 8.33333%; }
  .offset-lg-2 {
    margin-left: 16.66667%; }
  .offset-lg-3 {
    margin-left: 25%; }
  .offset-lg-4 {
    margin-left: 33.33333%; }
  .offset-lg-5 {
    margin-left: 41.66667%; }
  .offset-lg-6 {
    margin-left: 50%; }
  .offset-lg-7 {
    margin-left: 58.33333%; }
  .offset-lg-8 {
    margin-left: 66.66667%; }
  .offset-lg-9 {
    margin-left: 75%; }
  .offset-lg-10 {
    margin-left: 83.33333%; }
  .offset-lg-11 {
    margin-left: 91.66667%; }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0; }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0; }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem; }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem; }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem; }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem; }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem; }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem; }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem; }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem; }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem; }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem; } }

@media (min-width: 1200px) {
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto; }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333%; }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66667%; }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%; }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333%; }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66667%; }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%; }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333%; }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66667%; }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%; }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333%; }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66667%; }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%; }
  .offset-xl-0 {
    margin-left: 0; }
  .offset-xl-1 {
    margin-left: 8.33333%; }
  .offset-xl-2 {
    margin-left: 16.66667%; }
  .offset-xl-3 {
    margin-left: 25%; }
  .offset-xl-4 {
    margin-left: 33.33333%; }
  .offset-xl-5 {
    margin-left: 41.66667%; }
  .offset-xl-6 {
    margin-left: 50%; }
  .offset-xl-7 {
    margin-left: 58.33333%; }
  .offset-xl-8 {
    margin-left: 66.66667%; }
  .offset-xl-9 {
    margin-left: 75%; }
  .offset-xl-10 {
    margin-left: 83.33333%; }
  .offset-xl-11 {
    margin-left: 91.66667%; }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0; }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0; }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem; }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem; }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem; }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem; }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem; }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem; }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem; }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem; }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem; }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem; } }

@media (min-width: 1400px) {
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto; }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333%; }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66667%; }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%; }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333%; }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66667%; }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%; }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333%; }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66667%; }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%; }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333%; }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66667%; }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%; }
  .offset-xxl-0 {
    margin-left: 0; }
  .offset-xxl-1 {
    margin-left: 8.33333%; }
  .offset-xxl-2 {
    margin-left: 16.66667%; }
  .offset-xxl-3 {
    margin-left: 25%; }
  .offset-xxl-4 {
    margin-left: 33.33333%; }
  .offset-xxl-5 {
    margin-left: 41.66667%; }
  .offset-xxl-6 {
    margin-left: 50%; }
  .offset-xxl-7 {
    margin-left: 58.33333%; }
  .offset-xxl-8 {
    margin-left: 66.66667%; }
  .offset-xxl-9 {
    margin-left: 75%; }
  .offset-xxl-10 {
    margin-left: 83.33333%; }
  .offset-xxl-11 {
    margin-left: 91.66667%; }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0; }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0; }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem; }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem; }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem; }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem; }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem; }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem; }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem; }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem; }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem; }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem; } }

.clearfix::after {
  display: block;
  clear: both;
  content: ""; }

.link-primary {
  color: #0d6efd; }
  .link-primary:hover, .link-primary:focus {
    color: #0a58ca; }

.link-secondary {
  color: #6c757d; }
  .link-secondary:hover, .link-secondary:focus {
    color: #565e64; }

.link-success {
  color: #198754; }
  .link-success:hover, .link-success:focus {
    color: #146c43; }

.link-info {
  color: #0dcaf0; }
  .link-info:hover, .link-info:focus {
    color: #3dd5f3; }

.link-warning {
  color: #ffc107; }
  .link-warning:hover, .link-warning:focus {
    color: #ffcd39; }

.link-danger {
  color: #dc3545; }
  .link-danger:hover, .link-danger:focus {
    color: #b02a37; }

.link-light {
  color: #f8f9fa; }
  .link-light:hover, .link-light:focus {
    color: #f9fafb; }

.link-dark {
  color: #212529; }
  .link-dark:hover, .link-dark:focus {
    color: #1a1e21; }

.ratio {
  position: relative;
  width: 100%; }
  .ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: ""; }
  .ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.ratio-1x1 {
  --bs-aspect-ratio: 100%; }

.ratio-4x3 {
  --bs-aspect-ratio: calc(3 / 4 * 100%); }

.ratio-16x9 {
  --bs-aspect-ratio: calc(9 / 16 * 100%); }

.ratio-21x9 {
  --bs-aspect-ratio: calc(9 / 21 * 100%); }

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030; }

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030; }

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020; }

@media (min-width: 576px) {
  .sticky-sm-top {
    position: sticky;
    top: 0;
    z-index: 1020; } }

@media (min-width: 768px) {
  .sticky-md-top {
    position: sticky;
    top: 0;
    z-index: 1020; } }

@media (min-width: 992px) {
  .sticky-lg-top {
    position: sticky;
    top: 0;
    z-index: 1020; } }

@media (min-width: 1200px) {
  .sticky-xl-top {
    position: sticky;
    top: 0;
    z-index: 1020; } }

@media (min-width: 1400px) {
  .sticky-xxl-top {
    position: sticky;
    top: 0;
    z-index: 1020; } }

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important; }

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: ""; }

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

.align-baseline {
  vertical-align: baseline !important; }

.align-top {
  vertical-align: top !important; }

.align-middle {
  vertical-align: middle !important; }

.align-bottom {
  vertical-align: bottom !important; }

.align-text-bottom {
  vertical-align: text-bottom !important; }

.align-text-top {
  vertical-align: text-top !important; }

.float-start {
  float: left !important; }

.float-end {
  float: right !important; }

.float-none {
  float: none !important; }

.overflow-auto {
  overflow: auto !important; }

.overflow-hidden {
  overflow: hidden !important; }

.overflow-visible {
  overflow: visible !important; }

.overflow-scroll {
  overflow: scroll !important; }

.d-inline {
  display: inline !important; }

.d-inline-block {
  display: inline-block !important; }

.d-block {
  display: block !important; }

.d-grid {
  display: grid !important; }

.d-table {
  display: table !important; }

.d-table-row {
  display: table-row !important; }

.d-table-cell {
  display: table-cell !important; }

.d-flex {
  display: flex !important; }

.d-inline-flex {
  display: inline-flex !important; }

.d-none {
  display: none !important; }

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }

.shadow-none {
  box-shadow: none !important; }

.position-static {
  position: static !important; }

.position-relative {
  position: relative !important; }

.position-absolute {
  position: absolute !important; }

.position-fixed {
  position: fixed !important; }

.position-sticky {
  position: sticky !important; }

.top-0 {
  top: 0 !important; }

.top-50 {
  top: 50% !important; }

.top-100 {
  top: 100% !important; }

.bottom-0 {
  bottom: 0 !important; }

.bottom-50 {
  bottom: 50% !important; }

.bottom-100 {
  bottom: 100% !important; }

.start-0 {
  left: 0 !important; }

.start-50 {
  left: 50% !important; }

.start-100 {
  left: 100% !important; }

.end-0 {
  right: 0 !important; }

.end-50 {
  right: 50% !important; }

.end-100 {
  right: 100% !important; }

.translate-middle {
  transform: translate(-50%, -50%) !important; }

.translate-middle-x {
  transform: translateX(-50%) !important; }

.translate-middle-y {
  transform: translateY(-50%) !important; }

.border {
  border: 1px solid #dee2e6 !important; }

.border-0 {
  border: 0 !important; }

.border-top {
  border-top: 1px solid #dee2e6 !important; }

.border-top-0 {
  border-top: 0 !important; }

.border-end {
  border-right: 1px solid #dee2e6 !important; }

.border-end-0 {
  border-right: 0 !important; }

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important; }

.border-bottom-0 {
  border-bottom: 0 !important; }

.border-start {
  border-left: 1px solid #dee2e6 !important; }

.border-start-0 {
  border-left: 0 !important; }

.border-primary {
  border-color: #0d6efd !important; }

.border-secondary {
  border-color: #6c757d !important; }

.border-success {
  border-color: #198754 !important; }

.border-info {
  border-color: #0dcaf0 !important; }

.border-warning {
  border-color: #ffc107 !important; }

.border-danger {
  border-color: #dc3545 !important; }

.border-light {
  border-color: #f8f9fa !important; }

.border-dark {
  border-color: #212529 !important; }

.border-white {
  border-color: #fff !important; }

.border-1 {
  border-width: 1px !important; }

.border-2 {
  border-width: 2px !important; }

.border-3 {
  border-width: 3px !important; }

.border-4 {
  border-width: 4px !important; }

.border-5 {
  border-width: 5px !important; }

.w-25 {
  width: 25% !important; }

.w-50 {
  width: 50% !important; }

.w-75 {
  width: 75% !important; }

.w-100 {
  width: 100% !important; }

.w-auto {
  width: auto !important; }

.mw-100 {
  max-width: 100% !important; }

.vw-100 {
  width: 100vw !important; }

.min-vw-100 {
  min-width: 100vw !important; }

.h-25 {
  height: 25% !important; }

.h-50 {
  height: 50% !important; }

.h-75 {
  height: 75% !important; }

.h-100 {
  height: 100% !important; }

.h-auto {
  height: auto !important; }

.mh-100 {
  max-height: 100% !important; }

.vh-100 {
  height: 100vh !important; }

.min-vh-100 {
  min-height: 100vh !important; }

.flex-fill {
  flex: 1 1 auto !important; }

.flex-row {
  flex-direction: row !important; }

.flex-column {
  flex-direction: column !important; }

.flex-row-reverse {
  flex-direction: row-reverse !important; }

.flex-column-reverse {
  flex-direction: column-reverse !important; }

.flex-grow-0 {
  flex-grow: 0 !important; }

.flex-grow-1 {
  flex-grow: 1 !important; }

.flex-shrink-0 {
  flex-shrink: 0 !important; }

.flex-shrink-1 {
  flex-shrink: 1 !important; }

.flex-wrap {
  flex-wrap: wrap !important; }

.flex-nowrap {
  flex-wrap: nowrap !important; }

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important; }

.gap-0 {
  gap: 0 !important; }

.gap-1 {
  gap: 0.25rem !important; }

.gap-2 {
  gap: 0.5rem !important; }

.gap-3 {
  gap: 1rem !important; }

.gap-4 {
  gap: 1.5rem !important; }

.gap-5 {
  gap: 3rem !important; }

.justify-content-start {
  justify-content: flex-start !important; }

.justify-content-end {
  justify-content: flex-end !important; }

.justify-content-center {
  justify-content: center !important; }

.justify-content-between {
  justify-content: space-between !important; }

.justify-content-around {
  justify-content: space-around !important; }

.justify-content-evenly {
  justify-content: space-evenly !important; }

.align-items-start {
  align-items: flex-start !important; }

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

.align-items-center {
  align-items: center !important; }

.align-items-baseline {
  align-items: baseline !important; }

.align-items-stretch {
  align-items: stretch !important; }

.align-content-start {
  align-content: flex-start !important; }

.align-content-end {
  align-content: flex-end !important; }

.align-content-center {
  align-content: center !important; }

.align-content-between {
  align-content: space-between !important; }

.align-content-around {
  align-content: space-around !important; }

.align-content-stretch {
  align-content: stretch !important; }

.align-self-auto {
  align-self: auto !important; }

.align-self-start {
  align-self: flex-start !important; }

.align-self-end {
  align-self: flex-end !important; }

.align-self-center {
  align-self: center !important; }

.align-self-baseline {
  align-self: baseline !important; }

.align-self-stretch {
  align-self: stretch !important; }

.order-first {
  order: -1 !important; }

.order-0 {
  order: 0 !important; }

.order-1 {
  order: 1 !important; }

.order-2 {
  order: 2 !important; }

.order-3 {
  order: 3 !important; }

.order-4 {
  order: 4 !important; }

.order-5 {
  order: 5 !important; }

.order-last {
  order: 6 !important; }

.m-0 {
  margin: 0 !important; }

.m-1 {
  margin: 0.25rem !important; }

.m-2 {
  margin: 0.5rem !important; }

.m-3 {
  margin: 1rem !important; }

.m-4 {
  margin: 1.5rem !important; }

.m-5 {
  margin: 3rem !important; }

.m-auto {
  margin: auto !important; }

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important; }

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important; }

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important; }

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important; }

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important; }

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important; }

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important; }

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important; }

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important; }

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important; }

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important; }

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important; }

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important; }

.mt-0 {
  margin-top: 0 !important; }

.mt-1 {
  margin-top: 0.25rem !important; }

.mt-2 {
  margin-top: 0.5rem !important; }

.mt-3 {
  margin-top: 1rem !important; }

.mt-4 {
  margin-top: 1.5rem !important; }

.mt-5 {
  margin-top: 3rem !important; }

.mt-auto {
  margin-top: auto !important; }

.me-0 {
  margin-right: 0 !important; }

.me-1 {
  margin-right: 0.25rem !important; }

.me-2 {
  margin-right: 0.5rem !important; }

.me-3 {
  margin-right: 1rem !important; }

.me-4 {
  margin-right: 1.5rem !important; }

.me-5 {
  margin-right: 3rem !important; }

.me-auto {
  margin-right: auto !important; }

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

.mb-1 {
  margin-bottom: 0.25rem !important; }

.mb-2 {
  margin-bottom: 0.5rem !important; }

.mb-3 {
  margin-bottom: 1rem !important; }

.mb-4 {
  margin-bottom: 1.5rem !important; }

.mb-5 {
  margin-bottom: 3rem !important; }

.mb-auto {
  margin-bottom: auto !important; }

.ms-0 {
  margin-left: 0 !important; }

.ms-1 {
  margin-left: 0.25rem !important; }

.ms-2 {
  margin-left: 0.5rem !important; }

.ms-3 {
  margin-left: 1rem !important; }

.ms-4 {
  margin-left: 1.5rem !important; }

.ms-5 {
  margin-left: 3rem !important; }

.ms-auto {
  margin-left: auto !important; }

.p-0 {
  padding: 0 !important; }

.p-1 {
  padding: 0.25rem !important; }

.p-2 {
  padding: 0.5rem !important; }

.p-3 {
  padding: 1rem !important; }

.p-4 {
  padding: 1.5rem !important; }

.p-5 {
  padding: 3rem !important; }

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important; }

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important; }

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important; }

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important; }

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important; }

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important; }

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important; }

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important; }

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important; }

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important; }

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important; }

.pt-0 {
  padding-top: 0 !important; }

.pt-1 {
  padding-top: 0.25rem !important; }

.pt-2 {
  padding-top: 0.5rem !important; }

.pt-3 {
  padding-top: 1rem !important; }

.pt-4 {
  padding-top: 1.5rem !important; }

.pt-5 {
  padding-top: 3rem !important; }

.pe-0 {
  padding-right: 0 !important; }

.pe-1 {
  padding-right: 0.25rem !important; }

.pe-2 {
  padding-right: 0.5rem !important; }

.pe-3 {
  padding-right: 1rem !important; }

.pe-4 {
  padding-right: 1.5rem !important; }

.pe-5 {
  padding-right: 3rem !important; }

.pb-0 {
  padding-bottom: 0 !important; }

.pb-1 {
  padding-bottom: 0.25rem !important; }

.pb-2 {
  padding-bottom: 0.5rem !important; }

.pb-3 {
  padding-bottom: 1rem !important; }

.pb-4 {
  padding-bottom: 1.5rem !important; }

.pb-5 {
  padding-bottom: 3rem !important; }

.ps-0 {
  padding-left: 0 !important; }

.ps-1 {
  padding-left: 0.25rem !important; }

.ps-2 {
  padding-left: 0.5rem !important; }

.ps-3 {
  padding-left: 1rem !important; }

.ps-4 {
  padding-left: 1.5rem !important; }

.ps-5 {
  padding-left: 3rem !important; }

.font-monospace {
  font-family: var(--bs-font-monospace) !important; }

.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important; }

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important; }

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important; }

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important; }

.fs-5 {
  font-size: 1.25rem !important; }

.fs-6 {
  font-size: 1rem !important; }

.fst-italic {
  font-style: italic !important; }

.fst-normal {
  font-style: normal !important; }

.fw-light {
  font-weight: 300 !important; }

.fw-lighter {
  font-weight: lighter !important; }

.fw-normal {
  font-weight: 400 !important; }

.fw-bold {
  font-weight: 700 !important; }

.fw-bolder {
  font-weight: bolder !important; }

.lh-1 {
  line-height: 1 !important; }

.lh-sm {
  line-height: 1.25 !important; }

.lh-base {
  line-height: 1.5 !important; }

.lh-lg {
  line-height: 2 !important; }

.text-start {
  text-align: left !important; }

.text-end {
  text-align: right !important; }

.text-center {
  text-align: center !important; }

.text-decoration-none {
  text-decoration: none !important; }

.text-decoration-underline {
  text-decoration: underline !important; }

.text-decoration-line-through {
  text-decoration: line-through !important; }

.text-lowercase {
  text-transform: lowercase !important; }

.text-uppercase {
  text-transform: uppercase !important; }

.text-capitalize {
  text-transform: capitalize !important; }

.text-wrap {
  white-space: normal !important; }

.text-nowrap {
  white-space: nowrap !important; }

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important; }

/* rtl:end:remove */
.text-primary {
  color: #0d6efd !important; }

.text-secondary {
  color: #6c757d !important; }

.text-success {
  color: #198754 !important; }

.text-info {
  color: #0dcaf0 !important; }

.text-warning {
  color: #ffc107 !important; }

.text-danger {
  color: #dc3545 !important; }

.text-light {
  color: #f8f9fa !important; }

.text-dark {
  color: #212529 !important; }

.text-white {
  color: #fff !important; }

.text-body {
  color: #212529 !important; }

.text-muted {
  color: #6c757d !important; }

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important; }

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important; }

.text-reset {
  color: inherit !important; }

.bg-primary {
  background-color: #0d6efd !important; }

.bg-secondary {
  background-color: #6c757d !important; }

.bg-success {
  background-color: #198754 !important; }

.bg-info {
  background-color: #0dcaf0 !important; }

.bg-warning {
  background-color: #ffc107 !important; }

.bg-danger {
  background-color: #dc3545 !important; }

.bg-light {
  background-color: #f8f9fa !important; }

.bg-dark {
  background-color: #212529 !important; }

.bg-body {
  background-color: #fff !important; }

.bg-white {
  background-color: #fff !important; }

.bg-transparent {
  background-color: transparent !important; }

.bg-gradient {
  background-image: var(--bs-gradient) !important; }

.user-select-all {
  user-select: all !important; }

.user-select-auto {
  user-select: auto !important; }

.user-select-none {
  user-select: none !important; }

.pe-none {
  pointer-events: none !important; }

.pe-auto {
  pointer-events: auto !important; }

.rounded {
  border-radius: 0.25rem !important; }

.rounded-0 {
  border-radius: 0 !important; }

.rounded-1 {
  border-radius: 0.2rem !important; }

.rounded-2 {
  border-radius: 0.25rem !important; }

.rounded-3 {
  border-radius: 0.3rem !important; }

.rounded-circle {
  border-radius: 50% !important; }

.rounded-pill {
  border-radius: 50rem !important; }

.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important; }

.rounded-end {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important; }

.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important; }

.rounded-start {
  border-bottom-left-radius: 0.25rem !important;
  border-top-left-radius: 0.25rem !important; }

.visible {
  visibility: visible !important; }

.invisible {
  visibility: hidden !important; }

@media (min-width: 576px) {
  .float-sm-start {
    float: left !important; }
  .float-sm-end {
    float: right !important; }
  .float-sm-none {
    float: none !important; }
  .d-sm-inline {
    display: inline !important; }
  .d-sm-inline-block {
    display: inline-block !important; }
  .d-sm-block {
    display: block !important; }
  .d-sm-grid {
    display: grid !important; }
  .d-sm-table {
    display: table !important; }
  .d-sm-table-row {
    display: table-row !important; }
  .d-sm-table-cell {
    display: table-cell !important; }
  .d-sm-flex {
    display: flex !important; }
  .d-sm-inline-flex {
    display: inline-flex !important; }
  .d-sm-none {
    display: none !important; }
  .flex-sm-fill {
    flex: 1 1 auto !important; }
  .flex-sm-row {
    flex-direction: row !important; }
  .flex-sm-column {
    flex-direction: column !important; }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-sm-grow-0 {
    flex-grow: 0 !important; }
  .flex-sm-grow-1 {
    flex-grow: 1 !important; }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important; }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important; }
  .flex-sm-wrap {
    flex-wrap: wrap !important; }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important; }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .gap-sm-0 {
    gap: 0 !important; }
  .gap-sm-1 {
    gap: 0.25rem !important; }
  .gap-sm-2 {
    gap: 0.5rem !important; }
  .gap-sm-3 {
    gap: 1rem !important; }
  .gap-sm-4 {
    gap: 1.5rem !important; }
  .gap-sm-5 {
    gap: 3rem !important; }
  .justify-content-sm-start {
    justify-content: flex-start !important; }
  .justify-content-sm-end {
    justify-content: flex-end !important; }
  .justify-content-sm-center {
    justify-content: center !important; }
  .justify-content-sm-between {
    justify-content: space-between !important; }
  .justify-content-sm-around {
    justify-content: space-around !important; }
  .justify-content-sm-evenly {
    justify-content: space-evenly !important; }
  .align-items-sm-start {
    align-items: flex-start !important; }
  .align-items-sm-end {
    align-items: flex-end !important; }
  .align-items-sm-center {
    align-items: center !important; }
  .align-items-sm-baseline {
    align-items: baseline !important; }
  .align-items-sm-stretch {
    align-items: stretch !important; }
  .align-content-sm-start {
    align-content: flex-start !important; }
  .align-content-sm-end {
    align-content: flex-end !important; }
  .align-content-sm-center {
    align-content: center !important; }
  .align-content-sm-between {
    align-content: space-between !important; }
  .align-content-sm-around {
    align-content: space-around !important; }
  .align-content-sm-stretch {
    align-content: stretch !important; }
  .align-self-sm-auto {
    align-self: auto !important; }
  .align-self-sm-start {
    align-self: flex-start !important; }
  .align-self-sm-end {
    align-self: flex-end !important; }
  .align-self-sm-center {
    align-self: center !important; }
  .align-self-sm-baseline {
    align-self: baseline !important; }
  .align-self-sm-stretch {
    align-self: stretch !important; }
  .order-sm-first {
    order: -1 !important; }
  .order-sm-0 {
    order: 0 !important; }
  .order-sm-1 {
    order: 1 !important; }
  .order-sm-2 {
    order: 2 !important; }
  .order-sm-3 {
    order: 3 !important; }
  .order-sm-4 {
    order: 4 !important; }
  .order-sm-5 {
    order: 5 !important; }
  .order-sm-last {
    order: 6 !important; }
  .m-sm-0 {
    margin: 0 !important; }
  .m-sm-1 {
    margin: 0.25rem !important; }
  .m-sm-2 {
    margin: 0.5rem !important; }
  .m-sm-3 {
    margin: 1rem !important; }
  .m-sm-4 {
    margin: 1.5rem !important; }
  .m-sm-5 {
    margin: 3rem !important; }
  .m-sm-auto {
    margin: auto !important; }
  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important; }
  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important; }
  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important; }
  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important; }
  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important; }
  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important; }
  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important; }
  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important; }
  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important; }
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important; }
  .mt-sm-0 {
    margin-top: 0 !important; }
  .mt-sm-1 {
    margin-top: 0.25rem !important; }
  .mt-sm-2 {
    margin-top: 0.5rem !important; }
  .mt-sm-3 {
    margin-top: 1rem !important; }
  .mt-sm-4 {
    margin-top: 1.5rem !important; }
  .mt-sm-5 {
    margin-top: 3rem !important; }
  .mt-sm-auto {
    margin-top: auto !important; }
  .me-sm-0 {
    margin-right: 0 !important; }
  .me-sm-1 {
    margin-right: 0.25rem !important; }
  .me-sm-2 {
    margin-right: 0.5rem !important; }
  .me-sm-3 {
    margin-right: 1rem !important; }
  .me-sm-4 {
    margin-right: 1.5rem !important; }
  .me-sm-5 {
    margin-right: 3rem !important; }
  .me-sm-auto {
    margin-right: auto !important; }
  .mb-sm-0 {
    margin-bottom: 0 !important; }
  .mb-sm-1 {
    margin-bottom: 0.25rem !important; }
  .mb-sm-2 {
    margin-bottom: 0.5rem !important; }
  .mb-sm-3 {
    margin-bottom: 1rem !important; }
  .mb-sm-4 {
    margin-bottom: 1.5rem !important; }
  .mb-sm-5 {
    margin-bottom: 3rem !important; }
  .mb-sm-auto {
    margin-bottom: auto !important; }
  .ms-sm-0 {
    margin-left: 0 !important; }
  .ms-sm-1 {
    margin-left: 0.25rem !important; }
  .ms-sm-2 {
    margin-left: 0.5rem !important; }
  .ms-sm-3 {
    margin-left: 1rem !important; }
  .ms-sm-4 {
    margin-left: 1.5rem !important; }
  .ms-sm-5 {
    margin-left: 3rem !important; }
  .ms-sm-auto {
    margin-left: auto !important; }
  .p-sm-0 {
    padding: 0 !important; }
  .p-sm-1 {
    padding: 0.25rem !important; }
  .p-sm-2 {
    padding: 0.5rem !important; }
  .p-sm-3 {
    padding: 1rem !important; }
  .p-sm-4 {
    padding: 1.5rem !important; }
  .p-sm-5 {
    padding: 3rem !important; }
  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important; }
  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important; }
  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important; }
  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important; }
  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important; }
  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important; }
  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important; }
  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; }
  .pt-sm-0 {
    padding-top: 0 !important; }
  .pt-sm-1 {
    padding-top: 0.25rem !important; }
  .pt-sm-2 {
    padding-top: 0.5rem !important; }
  .pt-sm-3 {
    padding-top: 1rem !important; }
  .pt-sm-4 {
    padding-top: 1.5rem !important; }
  .pt-sm-5 {
    padding-top: 3rem !important; }
  .pe-sm-0 {
    padding-right: 0 !important; }
  .pe-sm-1 {
    padding-right: 0.25rem !important; }
  .pe-sm-2 {
    padding-right: 0.5rem !important; }
  .pe-sm-3 {
    padding-right: 1rem !important; }
  .pe-sm-4 {
    padding-right: 1.5rem !important; }
  .pe-sm-5 {
    padding-right: 3rem !important; }
  .pb-sm-0 {
    padding-bottom: 0 !important; }
  .pb-sm-1 {
    padding-bottom: 0.25rem !important; }
  .pb-sm-2 {
    padding-bottom: 0.5rem !important; }
  .pb-sm-3 {
    padding-bottom: 1rem !important; }
  .pb-sm-4 {
    padding-bottom: 1.5rem !important; }
  .pb-sm-5 {
    padding-bottom: 3rem !important; }
  .ps-sm-0 {
    padding-left: 0 !important; }
  .ps-sm-1 {
    padding-left: 0.25rem !important; }
  .ps-sm-2 {
    padding-left: 0.5rem !important; }
  .ps-sm-3 {
    padding-left: 1rem !important; }
  .ps-sm-4 {
    padding-left: 1.5rem !important; }
  .ps-sm-5 {
    padding-left: 3rem !important; }
  .text-sm-start {
    text-align: left !important; }
  .text-sm-end {
    text-align: right !important; }
  .text-sm-center {
    text-align: center !important; } }

@media (min-width: 768px) {
  .float-md-start {
    float: left !important; }
  .float-md-end {
    float: right !important; }
  .float-md-none {
    float: none !important; }
  .d-md-inline {
    display: inline !important; }
  .d-md-inline-block {
    display: inline-block !important; }
  .d-md-block {
    display: block !important; }
  .d-md-grid {
    display: grid !important; }
  .d-md-table {
    display: table !important; }
  .d-md-table-row {
    display: table-row !important; }
  .d-md-table-cell {
    display: table-cell !important; }
  .d-md-flex {
    display: flex !important; }
  .d-md-inline-flex {
    display: inline-flex !important; }
  .d-md-none {
    display: none !important; }
  .flex-md-fill {
    flex: 1 1 auto !important; }
  .flex-md-row {
    flex-direction: row !important; }
  .flex-md-column {
    flex-direction: column !important; }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-md-grow-0 {
    flex-grow: 0 !important; }
  .flex-md-grow-1 {
    flex-grow: 1 !important; }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important; }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important; }
  .flex-md-wrap {
    flex-wrap: wrap !important; }
  .flex-md-nowrap {
    flex-wrap: nowrap !important; }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .gap-md-0 {
    gap: 0 !important; }
  .gap-md-1 {
    gap: 0.25rem !important; }
  .gap-md-2 {
    gap: 0.5rem !important; }
  .gap-md-3 {
    gap: 1rem !important; }
  .gap-md-4 {
    gap: 1.5rem !important; }
  .gap-md-5 {
    gap: 3rem !important; }
  .justify-content-md-start {
    justify-content: flex-start !important; }
  .justify-content-md-end {
    justify-content: flex-end !important; }
  .justify-content-md-center {
    justify-content: center !important; }
  .justify-content-md-between {
    justify-content: space-between !important; }
  .justify-content-md-around {
    justify-content: space-around !important; }
  .justify-content-md-evenly {
    justify-content: space-evenly !important; }
  .align-items-md-start {
    align-items: flex-start !important; }
  .align-items-md-end {
    align-items: flex-end !important; }
  .align-items-md-center {
    align-items: center !important; }
  .align-items-md-baseline {
    align-items: baseline !important; }
  .align-items-md-stretch {
    align-items: stretch !important; }
  .align-content-md-start {
    align-content: flex-start !important; }
  .align-content-md-end {
    align-content: flex-end !important; }
  .align-content-md-center {
    align-content: center !important; }
  .align-content-md-between {
    align-content: space-between !important; }
  .align-content-md-around {
    align-content: space-around !important; }
  .align-content-md-stretch {
    align-content: stretch !important; }
  .align-self-md-auto {
    align-self: auto !important; }
  .align-self-md-start {
    align-self: flex-start !important; }
  .align-self-md-end {
    align-self: flex-end !important; }
  .align-self-md-center {
    align-self: center !important; }
  .align-self-md-baseline {
    align-self: baseline !important; }
  .align-self-md-stretch {
    align-self: stretch !important; }
  .order-md-first {
    order: -1 !important; }
  .order-md-0 {
    order: 0 !important; }
  .order-md-1 {
    order: 1 !important; }
  .order-md-2 {
    order: 2 !important; }
  .order-md-3 {
    order: 3 !important; }
  .order-md-4 {
    order: 4 !important; }
  .order-md-5 {
    order: 5 !important; }
  .order-md-last {
    order: 6 !important; }
  .m-md-0 {
    margin: 0 !important; }
  .m-md-1 {
    margin: 0.25rem !important; }
  .m-md-2 {
    margin: 0.5rem !important; }
  .m-md-3 {
    margin: 1rem !important; }
  .m-md-4 {
    margin: 1.5rem !important; }
  .m-md-5 {
    margin: 3rem !important; }
  .m-md-auto {
    margin: auto !important; }
  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important; }
  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important; }
  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important; }
  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important; }
  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important; }
  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important; }
  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important; }
  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important; }
  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important; }
  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important; }
  .mt-md-0 {
    margin-top: 0 !important; }
  .mt-md-1 {
    margin-top: 0.25rem !important; }
  .mt-md-2 {
    margin-top: 0.5rem !important; }
  .mt-md-3 {
    margin-top: 1rem !important; }
  .mt-md-4 {
    margin-top: 1.5rem !important; }
  .mt-md-5 {
    margin-top: 3rem !important; }
  .mt-md-auto {
    margin-top: auto !important; }
  .me-md-0 {
    margin-right: 0 !important; }
  .me-md-1 {
    margin-right: 0.25rem !important; }
  .me-md-2 {
    margin-right: 0.5rem !important; }
  .me-md-3 {
    margin-right: 1rem !important; }
  .me-md-4 {
    margin-right: 1.5rem !important; }
  .me-md-5 {
    margin-right: 3rem !important; }
  .me-md-auto {
    margin-right: auto !important; }
  .mb-md-0 {
    margin-bottom: 0 !important; }
  .mb-md-1 {
    margin-bottom: 0.25rem !important; }
  .mb-md-2 {
    margin-bottom: 0.5rem !important; }
  .mb-md-3 {
    margin-bottom: 1rem !important; }
  .mb-md-4 {
    margin-bottom: 1.5rem !important; }
  .mb-md-5 {
    margin-bottom: 3rem !important; }
  .mb-md-auto {
    margin-bottom: auto !important; }
  .ms-md-0 {
    margin-left: 0 !important; }
  .ms-md-1 {
    margin-left: 0.25rem !important; }
  .ms-md-2 {
    margin-left: 0.5rem !important; }
  .ms-md-3 {
    margin-left: 1rem !important; }
  .ms-md-4 {
    margin-left: 1.5rem !important; }
  .ms-md-5 {
    margin-left: 3rem !important; }
  .ms-md-auto {
    margin-left: auto !important; }
  .p-md-0 {
    padding: 0 !important; }
  .p-md-1 {
    padding: 0.25rem !important; }
  .p-md-2 {
    padding: 0.5rem !important; }
  .p-md-3 {
    padding: 1rem !important; }
  .p-md-4 {
    padding: 1.5rem !important; }
  .p-md-5 {
    padding: 3rem !important; }
  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important; }
  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important; }
  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important; }
  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important; }
  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important; }
  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important; }
  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important; }
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; }
  .pt-md-0 {
    padding-top: 0 !important; }
  .pt-md-1 {
    padding-top: 0.25rem !important; }
  .pt-md-2 {
    padding-top: 0.5rem !important; }
  .pt-md-3 {
    padding-top: 1rem !important; }
  .pt-md-4 {
    padding-top: 1.5rem !important; }
  .pt-md-5 {
    padding-top: 3rem !important; }
  .pe-md-0 {
    padding-right: 0 !important; }
  .pe-md-1 {
    padding-right: 0.25rem !important; }
  .pe-md-2 {
    padding-right: 0.5rem !important; }
  .pe-md-3 {
    padding-right: 1rem !important; }
  .pe-md-4 {
    padding-right: 1.5rem !important; }
  .pe-md-5 {
    padding-right: 3rem !important; }
  .pb-md-0 {
    padding-bottom: 0 !important; }
  .pb-md-1 {
    padding-bottom: 0.25rem !important; }
  .pb-md-2 {
    padding-bottom: 0.5rem !important; }
  .pb-md-3 {
    padding-bottom: 1rem !important; }
  .pb-md-4 {
    padding-bottom: 1.5rem !important; }
  .pb-md-5 {
    padding-bottom: 3rem !important; }
  .ps-md-0 {
    padding-left: 0 !important; }
  .ps-md-1 {
    padding-left: 0.25rem !important; }
  .ps-md-2 {
    padding-left: 0.5rem !important; }
  .ps-md-3 {
    padding-left: 1rem !important; }
  .ps-md-4 {
    padding-left: 1.5rem !important; }
  .ps-md-5 {
    padding-left: 3rem !important; }
  .text-md-start {
    text-align: left !important; }
  .text-md-end {
    text-align: right !important; }
  .text-md-center {
    text-align: center !important; } }

@media (min-width: 992px) {
  .float-lg-start {
    float: left !important; }
  .float-lg-end {
    float: right !important; }
  .float-lg-none {
    float: none !important; }
  .d-lg-inline {
    display: inline !important; }
  .d-lg-inline-block {
    display: inline-block !important; }
  .d-lg-block {
    display: block !important; }
  .d-lg-grid {
    display: grid !important; }
  .d-lg-table {
    display: table !important; }
  .d-lg-table-row {
    display: table-row !important; }
  .d-lg-table-cell {
    display: table-cell !important; }
  .d-lg-flex {
    display: flex !important; }
  .d-lg-inline-flex {
    display: inline-flex !important; }
  .d-lg-none {
    display: none !important; }
  .flex-lg-fill {
    flex: 1 1 auto !important; }
  .flex-lg-row {
    flex-direction: row !important; }
  .flex-lg-column {
    flex-direction: column !important; }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-lg-grow-0 {
    flex-grow: 0 !important; }
  .flex-lg-grow-1 {
    flex-grow: 1 !important; }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important; }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important; }
  .flex-lg-wrap {
    flex-wrap: wrap !important; }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important; }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .gap-lg-0 {
    gap: 0 !important; }
  .gap-lg-1 {
    gap: 0.25rem !important; }
  .gap-lg-2 {
    gap: 0.5rem !important; }
  .gap-lg-3 {
    gap: 1rem !important; }
  .gap-lg-4 {
    gap: 1.5rem !important; }
  .gap-lg-5 {
    gap: 3rem !important; }
  .justify-content-lg-start {
    justify-content: flex-start !important; }
  .justify-content-lg-end {
    justify-content: flex-end !important; }
  .justify-content-lg-center {
    justify-content: center !important; }
  .justify-content-lg-between {
    justify-content: space-between !important; }
  .justify-content-lg-around {
    justify-content: space-around !important; }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important; }
  .align-items-lg-start {
    align-items: flex-start !important; }
  .align-items-lg-end {
    align-items: flex-end !important; }
  .align-items-lg-center {
    align-items: center !important; }
  .align-items-lg-baseline {
    align-items: baseline !important; }
  .align-items-lg-stretch {
    align-items: stretch !important; }
  .align-content-lg-start {
    align-content: flex-start !important; }
  .align-content-lg-end {
    align-content: flex-end !important; }
  .align-content-lg-center {
    align-content: center !important; }
  .align-content-lg-between {
    align-content: space-between !important; }
  .align-content-lg-around {
    align-content: space-around !important; }
  .align-content-lg-stretch {
    align-content: stretch !important; }
  .align-self-lg-auto {
    align-self: auto !important; }
  .align-self-lg-start {
    align-self: flex-start !important; }
  .align-self-lg-end {
    align-self: flex-end !important; }
  .align-self-lg-center {
    align-self: center !important; }
  .align-self-lg-baseline {
    align-self: baseline !important; }
  .align-self-lg-stretch {
    align-self: stretch !important; }
  .order-lg-first {
    order: -1 !important; }
  .order-lg-0 {
    order: 0 !important; }
  .order-lg-1 {
    order: 1 !important; }
  .order-lg-2 {
    order: 2 !important; }
  .order-lg-3 {
    order: 3 !important; }
  .order-lg-4 {
    order: 4 !important; }
  .order-lg-5 {
    order: 5 !important; }
  .order-lg-last {
    order: 6 !important; }
  .m-lg-0 {
    margin: 0 !important; }
  .m-lg-1 {
    margin: 0.25rem !important; }
  .m-lg-2 {
    margin: 0.5rem !important; }
  .m-lg-3 {
    margin: 1rem !important; }
  .m-lg-4 {
    margin: 1.5rem !important; }
  .m-lg-5 {
    margin: 3rem !important; }
  .m-lg-auto {
    margin: auto !important; }
  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important; }
  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important; }
  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important; }
  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important; }
  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important; }
  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important; }
  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important; }
  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important; }
  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important; }
  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important; }
  .mt-lg-0 {
    margin-top: 0 !important; }
  .mt-lg-1 {
    margin-top: 0.25rem !important; }
  .mt-lg-2 {
    margin-top: 0.5rem !important; }
  .mt-lg-3 {
    margin-top: 1rem !important; }
  .mt-lg-4 {
    margin-top: 1.5rem !important; }
  .mt-lg-5 {
    margin-top: 3rem !important; }
  .mt-lg-auto {
    margin-top: auto !important; }
  .me-lg-0 {
    margin-right: 0 !important; }
  .me-lg-1 {
    margin-right: 0.25rem !important; }
  .me-lg-2 {
    margin-right: 0.5rem !important; }
  .me-lg-3 {
    margin-right: 1rem !important; }
  .me-lg-4 {
    margin-right: 1.5rem !important; }
  .me-lg-5 {
    margin-right: 3rem !important; }
  .me-lg-auto {
    margin-right: auto !important; }
  .mb-lg-0 {
    margin-bottom: 0 !important; }
  .mb-lg-1 {
    margin-bottom: 0.25rem !important; }
  .mb-lg-2 {
    margin-bottom: 0.5rem !important; }
  .mb-lg-3 {
    margin-bottom: 1rem !important; }
  .mb-lg-4 {
    margin-bottom: 1.5rem !important; }
  .mb-lg-5 {
    margin-bottom: 3rem !important; }
  .mb-lg-auto {
    margin-bottom: auto !important; }
  .ms-lg-0 {
    margin-left: 0 !important; }
  .ms-lg-1 {
    margin-left: 0.25rem !important; }
  .ms-lg-2 {
    margin-left: 0.5rem !important; }
  .ms-lg-3 {
    margin-left: 1rem !important; }
  .ms-lg-4 {
    margin-left: 1.5rem !important; }
  .ms-lg-5 {
    margin-left: 3rem !important; }
  .ms-lg-auto {
    margin-left: auto !important; }
  .p-lg-0 {
    padding: 0 !important; }
  .p-lg-1 {
    padding: 0.25rem !important; }
  .p-lg-2 {
    padding: 0.5rem !important; }
  .p-lg-3 {
    padding: 1rem !important; }
  .p-lg-4 {
    padding: 1.5rem !important; }
  .p-lg-5 {
    padding: 3rem !important; }
  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important; }
  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important; }
  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important; }
  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important; }
  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important; }
  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important; }
  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important; }
  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; }
  .pt-lg-0 {
    padding-top: 0 !important; }
  .pt-lg-1 {
    padding-top: 0.25rem !important; }
  .pt-lg-2 {
    padding-top: 0.5rem !important; }
  .pt-lg-3 {
    padding-top: 1rem !important; }
  .pt-lg-4 {
    padding-top: 1.5rem !important; }
  .pt-lg-5 {
    padding-top: 3rem !important; }
  .pe-lg-0 {
    padding-right: 0 !important; }
  .pe-lg-1 {
    padding-right: 0.25rem !important; }
  .pe-lg-2 {
    padding-right: 0.5rem !important; }
  .pe-lg-3 {
    padding-right: 1rem !important; }
  .pe-lg-4 {
    padding-right: 1.5rem !important; }
  .pe-lg-5 {
    padding-right: 3rem !important; }
  .pb-lg-0 {
    padding-bottom: 0 !important; }
  .pb-lg-1 {
    padding-bottom: 0.25rem !important; }
  .pb-lg-2 {
    padding-bottom: 0.5rem !important; }
  .pb-lg-3 {
    padding-bottom: 1rem !important; }
  .pb-lg-4 {
    padding-bottom: 1.5rem !important; }
  .pb-lg-5 {
    padding-bottom: 3rem !important; }
  .ps-lg-0 {
    padding-left: 0 !important; }
  .ps-lg-1 {
    padding-left: 0.25rem !important; }
  .ps-lg-2 {
    padding-left: 0.5rem !important; }
  .ps-lg-3 {
    padding-left: 1rem !important; }
  .ps-lg-4 {
    padding-left: 1.5rem !important; }
  .ps-lg-5 {
    padding-left: 3rem !important; }
  .text-lg-start {
    text-align: left !important; }
  .text-lg-end {
    text-align: right !important; }
  .text-lg-center {
    text-align: center !important; } }

@media (min-width: 1200px) {
  .float-xl-start {
    float: left !important; }
  .float-xl-end {
    float: right !important; }
  .float-xl-none {
    float: none !important; }
  .d-xl-inline {
    display: inline !important; }
  .d-xl-inline-block {
    display: inline-block !important; }
  .d-xl-block {
    display: block !important; }
  .d-xl-grid {
    display: grid !important; }
  .d-xl-table {
    display: table !important; }
  .d-xl-table-row {
    display: table-row !important; }
  .d-xl-table-cell {
    display: table-cell !important; }
  .d-xl-flex {
    display: flex !important; }
  .d-xl-inline-flex {
    display: inline-flex !important; }
  .d-xl-none {
    display: none !important; }
  .flex-xl-fill {
    flex: 1 1 auto !important; }
  .flex-xl-row {
    flex-direction: row !important; }
  .flex-xl-column {
    flex-direction: column !important; }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-xl-grow-0 {
    flex-grow: 0 !important; }
  .flex-xl-grow-1 {
    flex-grow: 1 !important; }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important; }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important; }
  .flex-xl-wrap {
    flex-wrap: wrap !important; }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important; }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .gap-xl-0 {
    gap: 0 !important; }
  .gap-xl-1 {
    gap: 0.25rem !important; }
  .gap-xl-2 {
    gap: 0.5rem !important; }
  .gap-xl-3 {
    gap: 1rem !important; }
  .gap-xl-4 {
    gap: 1.5rem !important; }
  .gap-xl-5 {
    gap: 3rem !important; }
  .justify-content-xl-start {
    justify-content: flex-start !important; }
  .justify-content-xl-end {
    justify-content: flex-end !important; }
  .justify-content-xl-center {
    justify-content: center !important; }
  .justify-content-xl-between {
    justify-content: space-between !important; }
  .justify-content-xl-around {
    justify-content: space-around !important; }
  .justify-content-xl-evenly {
    justify-content: space-evenly !important; }
  .align-items-xl-start {
    align-items: flex-start !important; }
  .align-items-xl-end {
    align-items: flex-end !important; }
  .align-items-xl-center {
    align-items: center !important; }
  .align-items-xl-baseline {
    align-items: baseline !important; }
  .align-items-xl-stretch {
    align-items: stretch !important; }
  .align-content-xl-start {
    align-content: flex-start !important; }
  .align-content-xl-end {
    align-content: flex-end !important; }
  .align-content-xl-center {
    align-content: center !important; }
  .align-content-xl-between {
    align-content: space-between !important; }
  .align-content-xl-around {
    align-content: space-around !important; }
  .align-content-xl-stretch {
    align-content: stretch !important; }
  .align-self-xl-auto {
    align-self: auto !important; }
  .align-self-xl-start {
    align-self: flex-start !important; }
  .align-self-xl-end {
    align-self: flex-end !important; }
  .align-self-xl-center {
    align-self: center !important; }
  .align-self-xl-baseline {
    align-self: baseline !important; }
  .align-self-xl-stretch {
    align-self: stretch !important; }
  .order-xl-first {
    order: -1 !important; }
  .order-xl-0 {
    order: 0 !important; }
  .order-xl-1 {
    order: 1 !important; }
  .order-xl-2 {
    order: 2 !important; }
  .order-xl-3 {
    order: 3 !important; }
  .order-xl-4 {
    order: 4 !important; }
  .order-xl-5 {
    order: 5 !important; }
  .order-xl-last {
    order: 6 !important; }
  .m-xl-0 {
    margin: 0 !important; }
  .m-xl-1 {
    margin: 0.25rem !important; }
  .m-xl-2 {
    margin: 0.5rem !important; }
  .m-xl-3 {
    margin: 1rem !important; }
  .m-xl-4 {
    margin: 1.5rem !important; }
  .m-xl-5 {
    margin: 3rem !important; }
  .m-xl-auto {
    margin: auto !important; }
  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important; }
  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important; }
  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important; }
  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important; }
  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important; }
  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important; }
  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important; }
  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important; }
  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important; }
  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important; }
  .mt-xl-0 {
    margin-top: 0 !important; }
  .mt-xl-1 {
    margin-top: 0.25rem !important; }
  .mt-xl-2 {
    margin-top: 0.5rem !important; }
  .mt-xl-3 {
    margin-top: 1rem !important; }
  .mt-xl-4 {
    margin-top: 1.5rem !important; }
  .mt-xl-5 {
    margin-top: 3rem !important; }
  .mt-xl-auto {
    margin-top: auto !important; }
  .me-xl-0 {
    margin-right: 0 !important; }
  .me-xl-1 {
    margin-right: 0.25rem !important; }
  .me-xl-2 {
    margin-right: 0.5rem !important; }
  .me-xl-3 {
    margin-right: 1rem !important; }
  .me-xl-4 {
    margin-right: 1.5rem !important; }
  .me-xl-5 {
    margin-right: 3rem !important; }
  .me-xl-auto {
    margin-right: auto !important; }
  .mb-xl-0 {
    margin-bottom: 0 !important; }
  .mb-xl-1 {
    margin-bottom: 0.25rem !important; }
  .mb-xl-2 {
    margin-bottom: 0.5rem !important; }
  .mb-xl-3 {
    margin-bottom: 1rem !important; }
  .mb-xl-4 {
    margin-bottom: 1.5rem !important; }
  .mb-xl-5 {
    margin-bottom: 3rem !important; }
  .mb-xl-auto {
    margin-bottom: auto !important; }
  .ms-xl-0 {
    margin-left: 0 !important; }
  .ms-xl-1 {
    margin-left: 0.25rem !important; }
  .ms-xl-2 {
    margin-left: 0.5rem !important; }
  .ms-xl-3 {
    margin-left: 1rem !important; }
  .ms-xl-4 {
    margin-left: 1.5rem !important; }
  .ms-xl-5 {
    margin-left: 3rem !important; }
  .ms-xl-auto {
    margin-left: auto !important; }
  .p-xl-0 {
    padding: 0 !important; }
  .p-xl-1 {
    padding: 0.25rem !important; }
  .p-xl-2 {
    padding: 0.5rem !important; }
  .p-xl-3 {
    padding: 1rem !important; }
  .p-xl-4 {
    padding: 1.5rem !important; }
  .p-xl-5 {
    padding: 3rem !important; }
  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important; }
  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important; }
  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important; }
  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important; }
  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important; }
  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important; }
  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important; }
  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; }
  .pt-xl-0 {
    padding-top: 0 !important; }
  .pt-xl-1 {
    padding-top: 0.25rem !important; }
  .pt-xl-2 {
    padding-top: 0.5rem !important; }
  .pt-xl-3 {
    padding-top: 1rem !important; }
  .pt-xl-4 {
    padding-top: 1.5rem !important; }
  .pt-xl-5 {
    padding-top: 3rem !important; }
  .pe-xl-0 {
    padding-right: 0 !important; }
  .pe-xl-1 {
    padding-right: 0.25rem !important; }
  .pe-xl-2 {
    padding-right: 0.5rem !important; }
  .pe-xl-3 {
    padding-right: 1rem !important; }
  .pe-xl-4 {
    padding-right: 1.5rem !important; }
  .pe-xl-5 {
    padding-right: 3rem !important; }
  .pb-xl-0 {
    padding-bottom: 0 !important; }
  .pb-xl-1 {
    padding-bottom: 0.25rem !important; }
  .pb-xl-2 {
    padding-bottom: 0.5rem !important; }
  .pb-xl-3 {
    padding-bottom: 1rem !important; }
  .pb-xl-4 {
    padding-bottom: 1.5rem !important; }
  .pb-xl-5 {
    padding-bottom: 3rem !important; }
  .ps-xl-0 {
    padding-left: 0 !important; }
  .ps-xl-1 {
    padding-left: 0.25rem !important; }
  .ps-xl-2 {
    padding-left: 0.5rem !important; }
  .ps-xl-3 {
    padding-left: 1rem !important; }
  .ps-xl-4 {
    padding-left: 1.5rem !important; }
  .ps-xl-5 {
    padding-left: 3rem !important; }
  .text-xl-start {
    text-align: left !important; }
  .text-xl-end {
    text-align: right !important; }
  .text-xl-center {
    text-align: center !important; } }

@media (min-width: 1400px) {
  .float-xxl-start {
    float: left !important; }
  .float-xxl-end {
    float: right !important; }
  .float-xxl-none {
    float: none !important; }
  .d-xxl-inline {
    display: inline !important; }
  .d-xxl-inline-block {
    display: inline-block !important; }
  .d-xxl-block {
    display: block !important; }
  .d-xxl-grid {
    display: grid !important; }
  .d-xxl-table {
    display: table !important; }
  .d-xxl-table-row {
    display: table-row !important; }
  .d-xxl-table-cell {
    display: table-cell !important; }
  .d-xxl-flex {
    display: flex !important; }
  .d-xxl-inline-flex {
    display: inline-flex !important; }
  .d-xxl-none {
    display: none !important; }
  .flex-xxl-fill {
    flex: 1 1 auto !important; }
  .flex-xxl-row {
    flex-direction: row !important; }
  .flex-xxl-column {
    flex-direction: column !important; }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important; }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important; }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important; }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important; }
  .flex-xxl-wrap {
    flex-wrap: wrap !important; }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important; }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .gap-xxl-0 {
    gap: 0 !important; }
  .gap-xxl-1 {
    gap: 0.25rem !important; }
  .gap-xxl-2 {
    gap: 0.5rem !important; }
  .gap-xxl-3 {
    gap: 1rem !important; }
  .gap-xxl-4 {
    gap: 1.5rem !important; }
  .gap-xxl-5 {
    gap: 3rem !important; }
  .justify-content-xxl-start {
    justify-content: flex-start !important; }
  .justify-content-xxl-end {
    justify-content: flex-end !important; }
  .justify-content-xxl-center {
    justify-content: center !important; }
  .justify-content-xxl-between {
    justify-content: space-between !important; }
  .justify-content-xxl-around {
    justify-content: space-around !important; }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important; }
  .align-items-xxl-start {
    align-items: flex-start !important; }
  .align-items-xxl-end {
    align-items: flex-end !important; }
  .align-items-xxl-center {
    align-items: center !important; }
  .align-items-xxl-baseline {
    align-items: baseline !important; }
  .align-items-xxl-stretch {
    align-items: stretch !important; }
  .align-content-xxl-start {
    align-content: flex-start !important; }
  .align-content-xxl-end {
    align-content: flex-end !important; }
  .align-content-xxl-center {
    align-content: center !important; }
  .align-content-xxl-between {
    align-content: space-between !important; }
  .align-content-xxl-around {
    align-content: space-around !important; }
  .align-content-xxl-stretch {
    align-content: stretch !important; }
  .align-self-xxl-auto {
    align-self: auto !important; }
  .align-self-xxl-start {
    align-self: flex-start !important; }
  .align-self-xxl-end {
    align-self: flex-end !important; }
  .align-self-xxl-center {
    align-self: center !important; }
  .align-self-xxl-baseline {
    align-self: baseline !important; }
  .align-self-xxl-stretch {
    align-self: stretch !important; }
  .order-xxl-first {
    order: -1 !important; }
  .order-xxl-0 {
    order: 0 !important; }
  .order-xxl-1 {
    order: 1 !important; }
  .order-xxl-2 {
    order: 2 !important; }
  .order-xxl-3 {
    order: 3 !important; }
  .order-xxl-4 {
    order: 4 !important; }
  .order-xxl-5 {
    order: 5 !important; }
  .order-xxl-last {
    order: 6 !important; }
  .m-xxl-0 {
    margin: 0 !important; }
  .m-xxl-1 {
    margin: 0.25rem !important; }
  .m-xxl-2 {
    margin: 0.5rem !important; }
  .m-xxl-3 {
    margin: 1rem !important; }
  .m-xxl-4 {
    margin: 1.5rem !important; }
  .m-xxl-5 {
    margin: 3rem !important; }
  .m-xxl-auto {
    margin: auto !important; }
  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important; }
  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important; }
  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important; }
  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important; }
  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important; }
  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important; }
  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important; }
  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important; }
  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important; }
  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important; }
  .mt-xxl-0 {
    margin-top: 0 !important; }
  .mt-xxl-1 {
    margin-top: 0.25rem !important; }
  .mt-xxl-2 {
    margin-top: 0.5rem !important; }
  .mt-xxl-3 {
    margin-top: 1rem !important; }
  .mt-xxl-4 {
    margin-top: 1.5rem !important; }
  .mt-xxl-5 {
    margin-top: 3rem !important; }
  .mt-xxl-auto {
    margin-top: auto !important; }
  .me-xxl-0 {
    margin-right: 0 !important; }
  .me-xxl-1 {
    margin-right: 0.25rem !important; }
  .me-xxl-2 {
    margin-right: 0.5rem !important; }
  .me-xxl-3 {
    margin-right: 1rem !important; }
  .me-xxl-4 {
    margin-right: 1.5rem !important; }
  .me-xxl-5 {
    margin-right: 3rem !important; }
  .me-xxl-auto {
    margin-right: auto !important; }
  .mb-xxl-0 {
    margin-bottom: 0 !important; }
  .mb-xxl-1 {
    margin-bottom: 0.25rem !important; }
  .mb-xxl-2 {
    margin-bottom: 0.5rem !important; }
  .mb-xxl-3 {
    margin-bottom: 1rem !important; }
  .mb-xxl-4 {
    margin-bottom: 1.5rem !important; }
  .mb-xxl-5 {
    margin-bottom: 3rem !important; }
  .mb-xxl-auto {
    margin-bottom: auto !important; }
  .ms-xxl-0 {
    margin-left: 0 !important; }
  .ms-xxl-1 {
    margin-left: 0.25rem !important; }
  .ms-xxl-2 {
    margin-left: 0.5rem !important; }
  .ms-xxl-3 {
    margin-left: 1rem !important; }
  .ms-xxl-4 {
    margin-left: 1.5rem !important; }
  .ms-xxl-5 {
    margin-left: 3rem !important; }
  .ms-xxl-auto {
    margin-left: auto !important; }
  .p-xxl-0 {
    padding: 0 !important; }
  .p-xxl-1 {
    padding: 0.25rem !important; }
  .p-xxl-2 {
    padding: 0.5rem !important; }
  .p-xxl-3 {
    padding: 1rem !important; }
  .p-xxl-4 {
    padding: 1.5rem !important; }
  .p-xxl-5 {
    padding: 3rem !important; }
  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important; }
  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important; }
  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important; }
  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important; }
  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important; }
  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important; }
  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important; }
  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; }
  .pt-xxl-0 {
    padding-top: 0 !important; }
  .pt-xxl-1 {
    padding-top: 0.25rem !important; }
  .pt-xxl-2 {
    padding-top: 0.5rem !important; }
  .pt-xxl-3 {
    padding-top: 1rem !important; }
  .pt-xxl-4 {
    padding-top: 1.5rem !important; }
  .pt-xxl-5 {
    padding-top: 3rem !important; }
  .pe-xxl-0 {
    padding-right: 0 !important; }
  .pe-xxl-1 {
    padding-right: 0.25rem !important; }
  .pe-xxl-2 {
    padding-right: 0.5rem !important; }
  .pe-xxl-3 {
    padding-right: 1rem !important; }
  .pe-xxl-4 {
    padding-right: 1.5rem !important; }
  .pe-xxl-5 {
    padding-right: 3rem !important; }
  .pb-xxl-0 {
    padding-bottom: 0 !important; }
  .pb-xxl-1 {
    padding-bottom: 0.25rem !important; }
  .pb-xxl-2 {
    padding-bottom: 0.5rem !important; }
  .pb-xxl-3 {
    padding-bottom: 1rem !important; }
  .pb-xxl-4 {
    padding-bottom: 1.5rem !important; }
  .pb-xxl-5 {
    padding-bottom: 3rem !important; }
  .ps-xxl-0 {
    padding-left: 0 !important; }
  .ps-xxl-1 {
    padding-left: 0.25rem !important; }
  .ps-xxl-2 {
    padding-left: 0.5rem !important; }
  .ps-xxl-3 {
    padding-left: 1rem !important; }
  .ps-xxl-4 {
    padding-left: 1.5rem !important; }
  .ps-xxl-5 {
    padding-left: 3rem !important; }
  .text-xxl-start {
    text-align: left !important; }
  .text-xxl-end {
    text-align: right !important; }
  .text-xxl-center {
    text-align: center !important; } }

@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem !important; }
  .fs-2 {
    font-size: 2rem !important; }
  .fs-3 {
    font-size: 1.75rem !important; }
  .fs-4 {
    font-size: 1.5rem !important; } }

@media print {
  .d-print-inline {
    display: inline !important; }
  .d-print-inline-block {
    display: inline-block !important; }
  .d-print-block {
    display: block !important; }
  .d-print-grid {
    display: grid !important; }
  .d-print-table {
    display: table !important; }
  .d-print-table-row {
    display: table-row !important; }
  .d-print-table-cell {
    display: table-cell !important; }
  .d-print-flex {
    display: flex !important; }
  .d-print-inline-flex {
    display: inline-flex !important; }
  .d-print-none {
    display: none !important; } }

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f2937;
  background-color: #ffffff; }

h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
p,
blockquote,
pre,
ul,
ol,
dl,
figure,
hr {
  margin: 0;
  padding: 0; }

ul,
ol {
  list-style: none; }

a {
  color: inherit;
  text-decoration: none; }

img {
  max-width: 100%;
  height: auto;
  display: block; }

button {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer; }

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit; }

h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 700;
  line-height: 1.25;
  color: #1f2937; }

h1, .h1 {
  font-size: 2.5rem; }

h2, .h2 {
  font-size: 2rem; }

h3, .h3 {
  font-size: 1.75rem; }

h4, .h4 {
  font-size: 1.5rem; }

h5, .h5 {
  font-size: 1.25rem; }

h6, .h6 {
  font-size: 1rem; }

p {
  margin-bottom: 1rem;
  line-height: 1.5; }

small, .small {
  font-size: 0.875rem; }

strong,
b {
  font-weight: 700; }

em,
i {
  font-style: italic; }

code {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875em;
  color: #dc3545;
  background-color: #f8f9fa;
  padding: 0.125rem 0.25rem;
  border-radius: 6px; }

pre {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto; }
  pre code {
    background-color: transparent;
    padding: 0;
    color: inherit; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

.fade-in {
  animation: fadeIn 0.3s ease-in-out; }

.fade-in-up {
  animation: fadeInUp 0.3s ease-in-out; }

.spin {
  animation: spin 1s linear infinite; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes scaleInBounce {
  0% {
    opacity: 0;
    transform: scale(0.3); }
  50% {
    transform: scale(1.05); }
  70% {
    transform: scale(0.97); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0; }
  to {
    transform: translateY(0);
    opacity: 1; } }

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0; }
  to {
    transform: translateY(0);
    opacity: 1; } }

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0); }
  40% {
    transform: translateY(-20px); }
  60% {
    transform: translateY(-10px); } }

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1); }
  50% {
    opacity: 0.8;
    transform: scale(1.05); } }

@keyframes shake {
  0%,
  100% {
    transform: translateX(0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px); }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px); } }

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0); }
  15% {
    transform: translateX(-15px) rotate(-5deg); }
  30% {
    transform: translateX(10px) rotate(3deg); }
  45% {
    transform: translateX(-10px) rotate(-3deg); }
  60% {
    transform: translateX(5px) rotate(2deg); }
  75% {
    transform: translateX(-5px) rotate(-1deg); } }

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

@keyframes shimmer {
  0% {
    background-position: -1000px 0; }
  100% {
    background-position: 1000px 0; } }

.shimmer {
  background: linear-gradient(90deg, #f7fafc 0%, #edf2f7 20%, rgba(245, 158, 11, 0.1) 40%, #edf2f7 60%, #f7fafc 100%) !important;
  background-size: 1000px 100% !important;
  animation: shimmer 2s infinite !important; }

@keyframes gradientRotate {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

@keyframes dotsPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8); }
  50% {
    opacity: 1;
    transform: scale(1.2); } }

@keyframes glowPulsePurple {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
  50% {
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.8), 0 0 50px rgba(45, 55, 72, 0.4); } }

@keyframes glowRainbow {
  0% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6); }
  33% {
    box-shadow: 0 0 20px rgba(240, 147, 251, 0.6); }
  66% {
    box-shadow: 0 0 20px rgba(250, 112, 154, 0.6); }
  100% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6); } }

@keyframes gradientShift {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

.fade-in {
  animation: fadeIn 0.3s ease-out; }

.fade-in-up {
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

.fade-in-down {
  animation: fadeInDown 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

.fade-in-left {
  animation: fadeInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

.fade-in-right {
  animation: fadeInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

.scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.scale-in-bounce {
  animation: scaleInBounce 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

.slide-in-up {
  animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

.slide-in-down {
  animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

.bounce {
  animation: bounce 1s ease-in-out; }

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

.shake {
  animation: shake 0.5s ease-in-out; }

.wobble {
  animation: wobble 1s ease-in-out; }

.spin {
  animation: spin 1s linear infinite; }

.glow-pulse-purple {
  animation: glowPulsePurple 2s ease-in-out infinite; }

.glow-rainbow {
  animation: glowRainbow 3s ease-in-out infinite; }

.gradient-shift {
  background-size: 200% 200% !important;
  animation: gradientShift 3s ease infinite !important; }

.stagger-item {
  opacity: 0;
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  .stagger-item:nth-child(1) {
    animation-delay: 0.05s; }
  .stagger-item:nth-child(2) {
    animation-delay: 0.1s; }
  .stagger-item:nth-child(3) {
    animation-delay: 0.15s; }
  .stagger-item:nth-child(4) {
    animation-delay: 0.2s; }
  .stagger-item:nth-child(5) {
    animation-delay: 0.25s; }
  .stagger-item:nth-child(6) {
    animation-delay: 0.3s; }
  .stagger-item:nth-child(7) {
    animation-delay: 0.35s; }
  .stagger-item:nth-child(8) {
    animation-delay: 0.4s; }
  .stagger-item:nth-child(9) {
    animation-delay: 0.45s; }
  .stagger-item:nth-child(10) {
    animation-delay: 0.5s; }
  .stagger-item:nth-child(11) {
    animation-delay: 0.55s; }
  .stagger-item:nth-child(12) {
    animation-delay: 0.6s; }
  .stagger-item:nth-child(13) {
    animation-delay: 0.65s; }
  .stagger-item:nth-child(14) {
    animation-delay: 0.7s; }
  .stagger-item:nth-child(15) {
    animation-delay: 0.75s; }
  .stagger-item:nth-child(16) {
    animation-delay: 0.8s; }
  .stagger-item:nth-child(17) {
    animation-delay: 0.85s; }
  .stagger-item:nth-child(18) {
    animation-delay: 0.9s; }
  .stagger-item:nth-child(19) {
    animation-delay: 0.95s; }
  .stagger-item:nth-child(20) {
    animation-delay: 1s; }
  .stagger-item:nth-child(21) {
    animation-delay: 1.05s; }
  .stagger-item:nth-child(22) {
    animation-delay: 1.1s; }
  .stagger-item:nth-child(23) {
    animation-delay: 1.15s; }
  .stagger-item:nth-child(24) {
    animation-delay: 1.2s; }
  .stagger-item:nth-child(25) {
    animation-delay: 1.25s; }
  .stagger-item:nth-child(26) {
    animation-delay: 1.3s; }
  .stagger-item:nth-child(27) {
    animation-delay: 1.35s; }
  .stagger-item:nth-child(28) {
    animation-delay: 1.4s; }
  .stagger-item:nth-child(29) {
    animation-delay: 1.45s; }
  .stagger-item:nth-child(30) {
    animation-delay: 1.5s; }

.stagger-item-fast {
  opacity: 0;
  animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  .stagger-item-fast:nth-child(1) {
    animation-delay: 0.03s; }
  .stagger-item-fast:nth-child(2) {
    animation-delay: 0.06s; }
  .stagger-item-fast:nth-child(3) {
    animation-delay: 0.09s; }
  .stagger-item-fast:nth-child(4) {
    animation-delay: 0.12s; }
  .stagger-item-fast:nth-child(5) {
    animation-delay: 0.15s; }
  .stagger-item-fast:nth-child(6) {
    animation-delay: 0.18s; }
  .stagger-item-fast:nth-child(7) {
    animation-delay: 0.21s; }
  .stagger-item-fast:nth-child(8) {
    animation-delay: 0.24s; }
  .stagger-item-fast:nth-child(9) {
    animation-delay: 0.27s; }
  .stagger-item-fast:nth-child(10) {
    animation-delay: 0.3s; }
  .stagger-item-fast:nth-child(11) {
    animation-delay: 0.33s; }
  .stagger-item-fast:nth-child(12) {
    animation-delay: 0.36s; }
  .stagger-item-fast:nth-child(13) {
    animation-delay: 0.39s; }
  .stagger-item-fast:nth-child(14) {
    animation-delay: 0.42s; }
  .stagger-item-fast:nth-child(15) {
    animation-delay: 0.45s; }
  .stagger-item-fast:nth-child(16) {
    animation-delay: 0.48s; }
  .stagger-item-fast:nth-child(17) {
    animation-delay: 0.51s; }
  .stagger-item-fast:nth-child(18) {
    animation-delay: 0.54s; }
  .stagger-item-fast:nth-child(19) {
    animation-delay: 0.57s; }
  .stagger-item-fast:nth-child(20) {
    animation-delay: 0.6s; }
  .stagger-item-fast:nth-child(21) {
    animation-delay: 0.63s; }
  .stagger-item-fast:nth-child(22) {
    animation-delay: 0.66s; }
  .stagger-item-fast:nth-child(23) {
    animation-delay: 0.69s; }
  .stagger-item-fast:nth-child(24) {
    animation-delay: 0.72s; }
  .stagger-item-fast:nth-child(25) {
    animation-delay: 0.75s; }
  .stagger-item-fast:nth-child(26) {
    animation-delay: 0.78s; }
  .stagger-item-fast:nth-child(27) {
    animation-delay: 0.81s; }
  .stagger-item-fast:nth-child(28) {
    animation-delay: 0.84s; }
  .stagger-item-fast:nth-child(29) {
    animation-delay: 0.87s; }
  .stagger-item-fast:nth-child(30) {
    animation-delay: 0.9s; }

.page-fade-in {
  animation: fadeIn 0.4s ease-out; }

.page-slide-in {
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

.page-scale-in {
  animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1; }
  100% {
    transform: scale(4);
    opacity: 0; } }

.ripple-effect {
  position: relative;
  overflow: hidden; }
  .ripple-effect::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none; }
  .ripple-effect:active::after {
    animation: ripple 0.6s ease-out; }

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; }
  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(245, 158, 11, 0.2) !important; }

.hover-grow {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .hover-grow:hover {
    transform: scale(1.05); }

.hover-glow {
  transition: box-shadow 0.3s ease; }
  .hover-glow:hover {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6) !important; }

.d-none {
  display: none !important; }

.d-block {
  display: block !important; }

.d-inline {
  display: inline !important; }

.d-inline-block {
  display: inline-block !important; }

.d-flex {
  display: flex !important; }

.flex-row {
  flex-direction: row !important; }

.flex-column {
  flex-direction: column !important; }

.flex-wrap {
  flex-wrap: wrap !important; }

.justify-content-start {
  justify-content: flex-start !important; }

.justify-content-center {
  justify-content: center !important; }

.justify-content-end {
  justify-content: flex-end !important; }

.justify-content-between {
  justify-content: space-between !important; }

.align-items-start {
  align-items: flex-start !important; }

.align-items-center {
  align-items: center !important; }

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

.m-0 {
  margin: 0 !important; }

.mt-1 {
  margin-top: 0.25rem !important; }

.mt-2 {
  margin-top: 0.5rem !important; }

.mt-3 {
  margin-top: 1rem !important; }

.mt-4 {
  margin-top: 1.5rem !important; }

.mb-1 {
  margin-bottom: 0.25rem !important; }

.mb-2 {
  margin-bottom: 0.5rem !important; }

.mb-3 {
  margin-bottom: 1rem !important; }

.mb-4 {
  margin-bottom: 1.5rem !important; }

.p-0 {
  padding: 0 !important; }

.p-1 {
  padding: 0.25rem !important; }

.p-2 {
  padding: 0.5rem !important; }

.p-3 {
  padding: 1rem !important; }

.p-4 {
  padding: 1.5rem !important; }

.text-left {
  text-align: left !important; }

.text-center {
  text-align: center !important; }

.text-right {
  text-align: right !important; }

.text-primary {
  color: #007bff !important; }

.text-secondary {
  color: #6b7280 !important; }

.text-success {
  color: #28a745 !important; }

.text-danger {
  color: #dc3545 !important; }

.text-warning {
  color: #ffc107 !important; }

.text-muted {
  color: #9ca3af !important; }

.font-weight-light {
  font-weight: 300 !important; }

.font-weight-normal {
  font-weight: 400 !important; }

.font-weight-bold {
  font-weight: 700 !important; }

.bg-primary {
  background-color: #007bff !important; }

.bg-secondary {
  background-color: #f8f9fa !important; }

.bg-success {
  background-color: #28a745 !important; }

.bg-danger {
  background-color: #dc3545 !important; }

.bg-warning {
  background-color: #ffc107 !important; }

.w-100 {
  width: 100% !important; }

.w-auto {
  width: auto !important; }

.h-100 {
  height: 100% !important; }

.h-auto {
  height: auto !important; }

.border {
  border: 1px solid #e5e7eb !important; }

.border-0 {
  border: 0 !important; }

.rounded {
  border-radius: 8px !important; }

.rounded-lg {
  border-radius: 12px !important; }

.rounded-pill {
  border-radius: 50rem !important; }

.shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; }

.shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; }

.shadow-lg {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; }

.overflow-hidden {
  overflow: hidden !important; }

.overflow-auto {
  overflow: auto !important; }

.glass {
  background: white;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

.glass--light {
  background: rgba(255, 255, 255, 0.05); }

.glass--dark {
  background: rgba(0, 0, 0, 0.5); }

.gradient-primary {
  background: linear-gradient(135deg, #6c3baa 0%, #c8b1e4 100%); }

.gradient-dark {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); }

.gradient-glow {
  position: relative; }
  .gradient-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #6c3baa 0%, #c8b1e4 100%);
    opacity: 0.1;
    z-index: -1; }

.glow {
  box-shadow: 0 4px 16px rgba(108, 59, 170, 0.25); }

.glow-hover {
  transition: box-shadow 0.3s ease; }
  .glow-hover:hover {
    box-shadow: 0 4px 16px rgba(108, 59, 170, 0.25); }

.elevated {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px; }

.elevated--lg {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

.border-gradient {
  position: relative;
  background: #f8f9fa;
  border-radius: 8px; }
  .border-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #6c3baa, #c8b1e4);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; }

.smooth-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.smooth-transition-fast {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

.hover-glow {
  transition: box-shadow 0.3s ease; }
  .hover-glow:hover {
    box-shadow: 0 4px 16px rgba(108, 59, 170, 0.25); }

.backdrop-blur {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); }

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); }

.backdrop-blur-lg {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); }

:root {
  --theme-primary: #6c3baa;
  --theme-accent: #c8b1e4;
  --theme-primary-light: rgba(108, 59, 170, 0.1);
  --theme-primary-hover: rgba(108, 59, 170, 0.15);
  --theme-primary-border: rgba(108, 59, 170, 0.2);
  --theme-hover-bg: rgba(200, 177, 228, 0.25);
  --theme-accent-hover: #b89ed4;
  --theme-accent-light: #f0ebf7;
  --theme-primary-faint: rgba(108, 59, 170, 0.03);
  --theme-primary-subtle: rgba(108, 59, 170, 0.05);
  --theme-primary-muted: rgba(108, 59, 170, 0.08);
  --theme-primary-soft: rgba(108, 59, 170, 0.12);
  --theme-primary-medium: rgba(108, 59, 170, 0.25);
  --theme-primary-strong: rgba(108, 59, 170, 0.3);
  --theme-primary-bold: rgba(108, 59, 170, 0.4);
  --theme-primary-half: rgba(108, 59, 170, 0.5);
  --theme-primary-solid: rgba(108, 59, 170, 0.9);
  --theme-accent-border: rgba(200, 177, 228, 0.2);
  --theme-accent-medium: rgba(200, 177, 228, 0.3);
  --theme-accent-half: rgba(200, 177, 228, 0.5); }

#main {
  overflow-x: hidden; }

.h-screen {
  height: 100vh; }

.overflow-y-auto {
  overflow-y: auto; }

.overflow-x-hidden {
  overflow-x: hidden; }

.overflow-hidden {
  overflow: hidden; }

.p-6 {
  padding: 1.5rem; }

.pt-24 {
  padding-top: 6rem !important; }

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

.oh-wrapper-main {
  display: grid;
  grid-template-columns: 1fr;
  transition: all 0.4s ease-in-out; }

.oh-wrapper-main--no-grid {
  display: unset; }

.oh-wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto; }

.oh-layout--grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1%;
  row-gap: 1rem;
  justify-content: space-between; }

/* Text */
.oh-text--sm {
  font-size: 0.9rem !important; }

.oh-text--xs {
  font-size: 0.75rem !important; }

/* Text Colors*/
.oh-text--dark {
  color: #1f2937; }

.oh-text--light {
  color: #737373; }

.oh-text--secondary {
  color: #6c3baa; }

.oh-text--primary {
  color: #6c3baa; }

.oh-text--success {
  color: #22c55e !important; }

/* Links */
.oh-link {
  display: flex;
  align-items: center; }
  .oh-link:hover, .oh-link:focus, .oh-link:focus-visible {
    text-decoration: none; }

.oh-link--secondary {
  color: #6c3baa; }
  .oh-link--secondary:hover, .oh-link--secondary:focus, .oh-link--secondary:focus-visible {
    color: #5a2e96; }

@media (max-width: 991.98px) {
  .oh-resp-hidden--lg {
    display: none; } }

.oh-viewer {
  width: 80%;
  height: 900px;
  left: 50%;
  transform: translateX(-50%);
  position: relative; }

.oh-viewer--image {
  width: 80%;
  height: auto;
  margin: 0 auto;
  border: 1px solid #f3f4f6; }

.centered-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; }

.oh-empty {
  font-family: "DM Sans", sans-serif !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center; }
  .oh-empty p,
  .oh-empty span,
  .oh-empty h1,
  .oh-empty .h1,
  .oh-empty h2,
  .oh-empty .h2,
  .oh-empty h3,
  .oh-empty .h3,
  .oh-empty h4,
  .oh-empty .h4,
  .oh-empty h5,
  .oh-empty .h5,
  .oh-empty h6,
  .oh-empty .h6 {
    font-family: "DM Sans", sans-serif !important; }

.oh-empty__title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 1rem;
  font-family: "DM Sans", sans-serif !important; }

.oh-empty__subtitle {
  color: #737373;
  font-family: "DM Sans", sans-serif !important; }

.main-content {
  background: #f8f9fa;
  color: #1f2937;
  min-height: 100vh; }

.container {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

body {
  background: #f3f4f1;
  min-height: 100vh; }

.page-wrapper {
  background: #f3f4f1;
  min-height: 100vh; }

.oh-wrapper-main {
  background: #f3f4f1; }

::-webkit-scrollbar {
  width: 10px;
  height: 10px; }

::-webkit-scrollbar-track {
  background: #f3f4f6; }

::-webkit-scrollbar-thumb {
  background: rgba(117, 117, 117, 0.3) !important;
  border-radius: 9999px; }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(117, 117, 117, 0.5) !important; }

.oh-navbar__toggle-link {
  display: flex;
  align-items: center; }

.oh-navbar__toggle-menu {
  margin-right: 0.35rem; }

.oh-navbar__page-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
  letter-spacing: -0.01em; }
  @media (max-width: 1199.98px) {
    .oh-navbar__page-title {
      display: none; } }
  @media (max-width: 767.98px) {
    .oh-navbar__page-title {
      font-size: 1rem !important; } }
.oh-navbar__toggle-link:hover {
  opacity: 0.8; }

.oh-navbar {
  z-index: 99999;
  height: 65px;
  width: -webkit-fill-available;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border-bottom: 3px solid #ededed; }

.oh-navbar__systray {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
  overflow: visible !important; }

.oh-navbar__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  overflow: visible !important; }

.oh-navbar__user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 0.75rem !important;
  border-radius: 8px !important;
  height: 40px !important;
  margin: 0 0.25rem 0 0.25rem !important;
  cursor: pointer;
  background: transparent !important;
  color: #111827 !important;
  border: 1px solid transparent !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
  @media (max-width: 575.98px) {
    .oh-navbar__user-info {
      padding: 0 0.5rem !important;
      margin: 0 0.125rem !important;
      height: 36px !important; } }
  .oh-navbar__user-info div:first-child {
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    position: relative;
    top: 9px; }
  .oh-navbar__user-info::after {
    content: "";
    position: relative;
    width: 12px;
    height: 12px;
    top: 9px;
    right: -3px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' fill='%236B7280' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 6.75 9 10.5 9-10.5H3Z'%3E%3C/path%3E%3C/svg%3E"); }
  .oh-navbar__user-info:hover {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important; }

.oh-navbar__systray .oh-dropdown {
  height: 100%; }

.oh-navbar__user-photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #e5e7eb !important; }
  @media (max-width: 575.98px) {
    .oh-navbar__user-photo {
      width: 28px;
      height: 28px; } }
.oh-navbar__user-image {
  width: 100%;
  height: 100%;
  object-fit: cover; }

@media screen and (max-width: 1055.99px) {
  .oh-navbar__time {
    display: none !important; } }

.oh-navbar__notification-link,
.oh-navbar__action-icons-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
  position: relative !important; }

.oh-navbar__notification-beacon {
  position: absolute !important;
  top: 9px !important;
  right: 12px !important;
  height: 13px !important;
  width: 13px !important;
  border-radius: 0 !important;
  background: red !important;
  color: transparent !important;
  font-size: 0px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: none !important;
  z-index: 10 !important; }

.oh-navbar__notification-beacon:has(.oh-notification-badge--hidden) {
  display: none !important; }

@keyframes pulse {
  0%,
  100% {
    opacity: 1; }
  50% {
    opacity: 0.85; } }

.oh-navbar__icon {
  width: 24px !important;
  height: 24px !important;
  color: #ffffff !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
  @media (max-width: 575.98px) {
    .oh-navbar__icon {
      width: 20px;
      height: 20px; } }
  .oh-navbar__notifications:hover .oh-navbar__icon, .oh-navbar__action-icons:hover .oh-navbar__icon {
    color: #c8b1e4 !important; }

.oh-navbar__user-name {
  color: #111827 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
  position: relative;
  top: 9px;
  margin: 0 !important;
  padding: 0 !important; }
  @media (max-width: 991.98px) {
    .oh-navbar__user-name {
      display: none !important; } }
/**
* Notifications & Icons - Clean & Minimal
*/
.oh-navbar__notifications,
.oh-navbar__action-icons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 0.5rem 0 0.25rem !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
  .oh-navbar__notifications:hover,
  .oh-navbar__action-icons:hover {
    background: #f3f4f6 !important; }
  @media (max-width: 575.98px) {
    .oh-navbar__notifications,
    .oh-navbar__action-icons {
      width: 36px !important;
      height: 36px !important;
      margin: 0 0.35rem 0 0.125rem !important; } }
.oh-navbar__notification-tray {
  position: absolute;
  width: 380px;
  padding-right: 15px;
  min-height: 250px;
  background-color: #ffffff;
  z-index: 10000;
  top: 100%;
  right: 0px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
  border-radius: 12px; }
  @media (max-width: 575.98px) {
    .oh-navbar__notification-tray {
      position: fixed;
      left: 5px;
      width: 98%;
      top: 70px; } }
.oh-navbar__notification-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 250px;
  padding: 35px; }

.oh-navbar__notification-empty-title {
  display: block;
  font-weight: bold;
  color: #93a0b4;
  margin-top: 0.75rem;
  margin-bottom: 0.3rem; }

.oh-navbar__notification-empty-desc {
  color: #93a0b4;
  font-size: 0.9rem; }

.oh-navbar__notification-empty-title,
.oh-navbar__notification-empty-desc {
  text-align: center; }

.oh-navbar__notification-head {
  width: 100%;
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1f2937;
  border-bottom: 1px solid #e5e7eb; }

.oh-navbar__notification-body {
  width: 100%;
  padding: 0 1.15rem;
  max-height: 400px;
  overflow: auto;
  display: block; }

.oh-navbar__notification-footer {
  padding: 1.15rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center; }

.oh-navbar__notification-head-title {
  font-weight: bold;
  font-size: 0.9rem; }

.oh-navbar__notification-links {
  display: flex;
  align-items: center; }

.oh-navbar__notification-tray-link {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  color: #6c3baa;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
  .oh-navbar__notification-tray-link:hover, .oh-navbar__notification-tray-link:focus, .oh-navbar__notification-tray-link:focus-visible, .oh-navbar__notification-tray-link:active {
    color: #5a2e96;
    text-decoration: none; }

.oh-navbar__notification-tray-link--danger {
  color: #ef4444; }
  .oh-navbar__notification-tray-link--danger:hover, .oh-navbar__notification-tray-link--danger:focus, .oh-navbar__notification-tray-link--danger:focus-visible, .oh-navbar__notification-tray-link--danger:active {
    color: #dc2626;
    text-decoration: none; }

.oh-navbar__nofication-list {
  list-style: none;
  padding-left: 0; }

.oh-navbar__notification-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  top: 5px;
  opacity: 0; }

.oh-navbar__notification-dot--green {
  background-color: #6c3baa; }

.oh-navbar__notification-item {
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid #f3f4f6; }
  .oh-navbar__notification-item:last-child {
    padding-bottom: 0px;
    border-bottom: none; }

.oh-navbar__notification-item div:first-child {
  align-self: flex-start; }

.oh-navbar__notification-item div:last-child {
  align-self: flex-start; }

.oh-navbar__notification-image {
  background-color: #6c3baa;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.15rem;
  box-shadow: 0 2px 8px rgba(108, 59, 170, 0.15); }

.oh-navbar__notification-text {
  margin-top: 0;
  margin-bottom: 0;
  color: #1f2937;
  font-size: 0.85rem; }

.oh-navbar__notification-dot--unread {
  opacity: 1; }

.oh-navbar__notification-text--unread {
  font-weight: bold; }

.oh-navbar__notification-date {
  color: rgba(31, 41, 55, 0.6);
  font-size: 0.75rem; }

.oh-navbar__clock {
  display: flex;
  align-items: center;
  padding: 0 0.875rem !important;
  margin: 0 0.25rem !important;
  height: 40px !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  background: transparent !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  color: #111827 !important; }
  .oh-navbar__clock:hover, .oh-navbar__clock:focus, .oh-navbar__clock:focus-visible {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    text-decoration: none; }
  @media (max-width: 575.98px) {
    .oh-navbar__clock {
      padding: 0 0.5rem !important;
      width: auto;
      height: 36px !important;
      margin: 0 0.125rem !important;
      justify-content: center; }
      .oh-navbar__clock:hover, .oh-navbar__clock:focus, .oh-navbar__clock:focus-visible {
        background: #f3f4f6 !important; } }
.oh-navbar__clock-icon {
  color: #6b7280 !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
  .oh-navbar__clock:hover .oh-navbar__clock-icon {
    color: #6c3baa !important; }
  @media (max-width: 767.98px) {
    .oh-navbar__clock-icon {
      margin-right: 0rem !important; } }
.oh-navbar__clock-text {
  color: #111827 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important; }

@media (max-width: 767.98px) {
  .oh-navbar__clock-text {
    display: none; }
  .oh-navbar__clock-icon {
    font-size: 1.5rem; } }

@media (max-width: 575.98px) {
  .oh-navbar__clock-icon {
    font-size: 1.2rem; } }

.oh-navbar__toggle-container {
  display: flex;
  align-items: center;
  gap: 1rem; }

.oh-navbar__company-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  position: relative; }
  @media (max-width: 575.98px) {
    .oh-navbar__company-logo {
      margin-left: 0.25rem; } }
.oh-navbar__logo-img {
  max-height: 40px;
  max-width: 120px;
  height: auto;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 2px solid rgba(245, 158, 11, 0.2);
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .oh-navbar__logo-img:hover {
    transform: scale(1.05);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.6); }
  @media (max-width: 575.98px) {
    .oh-navbar__logo-img {
      max-height: 32px;
      max-width: 80px;
      padding: 3px; } }
/**
* Breadcrumb
*/
.oh-navbar__breadcrumb {
  display: none !important;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin-bottom: 0;
  padding-left: 10px; }
  @media screen and (max-width: 991.98px) {
    .oh-navbar__breadcrumb {
      display: none; } }
.oh-navbar__breadcrumb-item {
  margin-right: 25px;
  position: relative; }
  .oh-navbar__breadcrumb-item::after {
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzczNzM3MyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Im04LjYyNSA1LjI1IDYuNzUgNi43NS02Ljc1IDYuNzUiPjwvcGF0aD4KPC9zdmc+");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 3px;
    right: -20px; }
  .oh-navbar__breadcrumb-item:last-child {
    margin-right: 0; }
    .oh-navbar__breadcrumb-item:last-child::after {
      content: unset; }

.oh-navbar__breadcrumb-link {
  color: #737373; }
  .oh-navbar__breadcrumb-link:hover {
    text-decoration: none; }

.oh-navbar__breadcrumb-link.active {
  color: #1f2937; }

#languageDropdown,
[id*="language"],
.oh-navbar__systray > .oh-dropdown:has([id*="language"]) {
  display: none !important; }

#multCompany,
#companyDropdown,
[id*="company"]:not(.oh-navbar__user-info):not([class*="text"]):not(.select2-container):not(.select2-dropdown):not(
[class*="select2"]
):not([id*="_parent_div"]):not([id*="dynamic_field"]):not(select):not(input):not(form):not(
.settings-new-design__submenu-item
):not(#company-cont):not(.company-grid-wrapper):not(#companyModal):not(#companyModalBody):not(
#companyLeaveModalBody
):not(.oh-modal):not(.oh-modal__dialog):not(#company-leave-cont):not(.company-leave-grid-wrapper):not(
[id*="employee"]
):not(.employee-form):not([name*="employee"]) {
  display: none !important; }

select[id*="company"],
input[id*="company"] {
  display: block !important; }

.oh-navbar {
  background: #7b68ee !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  height: 65px !important;
  position: relative !important;
  z-index: 99999 !important;
  overflow: visible !important; }

.oh-navbar .oh-navbar__page-title {
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important; }

.oh-navbar .oh-navbar__user-info:not(.navbar-new-design__profile-wrapper *) {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  height: 48px !important;
  padding: 0 1.25rem !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.75rem !important;
  line-height: 1 !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  align-self: center !important;
  font-weight: 600 !important; }
  .oh-navbar .oh-navbar__user-info:not(.navbar-new-design__profile-wrapper *):hover {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-1px); }
  .oh-navbar .oh-navbar__user-info:not(.navbar-new-design__profile-wrapper *)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' fill='%23FFFFFF' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 6.75 9 10.5 9-10.5H3Z'%3E%3C/path%3E%3C/svg%3E") !important;
    position: relative !important;
    top: 0 !important; }

.oh-navbar .oh-navbar__user-name {
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  margin: 0 !important;
  line-height: 1 !important;
  position: relative !important;
  top: 0 !important;
  font-weight: 700 !important; }

.oh-navbar .oh-navbar__user-photo {
  border-color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  top: 0 !important; }

.oh-navbar .oh-navbar__icon {
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  filter: drop-shadow(0 0 1px currentColor) !important; }

.oh-navbar .oh-navbar__notifications .oh-navbar__icon {
  color: #ffffff !important; }

.oh-navbar .oh-navbar__action-icons .oh-navbar__icon {
  color: #ffffff !important; }

.oh-navbar .oh-navbar__clock-icon {
  color: #32cd32 !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  filter: drop-shadow(0 0 1px currentColor) !important; }

.oh-navbar .oh-navbar__notifications,
.oh-navbar .oh-navbar__action-icons {
  background: transparent !important;
  border: none !important; }

.oh-navbar .oh-navbar__clock {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.3) !important; }
  .oh-navbar .oh-navbar__clock:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.5) !important; }

.oh-navbar .oh-navbar__clock-text {
  color: #ffffff !important; }

.oh-navbar .oh-navbar__clock:hover .oh-navbar__clock-text {
  color: rgba(255, 255, 255, 0.8) !important; }

.oh-navbar .oh-navbar__quick-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
  .oh-navbar .oh-navbar__quick-action ion-icon {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto !important; }
  .oh-navbar .oh-navbar__quick-action.oh-navbar__quick-action--success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; }
    .oh-navbar .oh-navbar__quick-action.oh-navbar__quick-action--success ion-icon {
      color: #ffffff !important; }
    .oh-navbar .oh-navbar__quick-action.oh-navbar__quick-action--success:hover {
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
      transform: translateY(-2px) !important; }
  .oh-navbar .oh-navbar__quick-action.oh-navbar__quick-action--info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important; }
    .oh-navbar .oh-navbar__quick-action.oh-navbar__quick-action--info ion-icon {
      color: #ffffff !important; }
    .oh-navbar .oh-navbar__quick-action.oh-navbar__quick-action--info:hover {
      box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4) !important;
      transform: translateY(-2px) !important; }
  .oh-navbar .oh-navbar__quick-action.oh-navbar__quick-action--warning {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important; }
    .oh-navbar .oh-navbar__quick-action.oh-navbar__quick-action--warning ion-icon {
      color: #ffffff !important; }
    .oh-navbar .oh-navbar__quick-action.oh-navbar__quick-action--warning:hover {
      box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4) !important;
      transform: translateY(-2px) !important; }

.oh-navbar .oh-dropdown:has(.oh-navbar__user-info) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  overflow: visible !important;
  position: relative !important; }
  .oh-navbar .oh-dropdown:has(.oh-navbar__user-info) .oh-dropdown__menu {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 0 !important; }

.oh-navbar .oh-dropdown.mainNavProfile {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  color: #ffffff !important;
  border-radius: 8px !important; }
  .oh-navbar .oh-dropdown.mainNavProfile:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; }

.oh-navbar__search {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50px !important;
  padding: 0.5rem 1rem !important;
  margin: 0.75rem 1rem !important;
  min-width: 250px;
  max-width: 350px;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .oh-navbar__search:focus-within {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: #c8b1e4 !important;
    box-shadow: 0 0 0 3px rgba(200, 177, 228, 0.3) !important; }
  .oh-navbar__search ion-icon {
    color: #ffffff;
    font-size: 1.2rem;
    margin-right: 0.5rem; }
  .oh-navbar__search input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    color: #ffffff !important;
    font-size: 0.9rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
    .oh-navbar__search input::placeholder {
      color: rgba(255, 255, 255, 0.7) !important; }
  @media (max-width: 991.98px) {
    .oh-navbar__search {
      display: none; } }
.header-nav-item {
  color: #6b7280;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .header-nav-item:hover {
    color: #6c3baa; }
  .header-nav-item--active {
    color: #6c3baa;
    position: relative; }
    .header-nav-item--active::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 2px;
      background: #6c3baa; }

.user-profile-dropdown {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

.oh-navbar__greeting {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  margin: 0 0.5rem;
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  animation: fadeInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
  @media (max-width: 991.98px) {
    .oh-navbar__greeting {
      display: none; } }
  .oh-navbar__greeting .greeting-icon {
    font-size: 1.5rem;
    margin-right: 0.5rem; }
  .oh-navbar__greeting .greeting-text {
    color: #ffffff !important;
    font-weight: 700 !important; }
    .oh-navbar__greeting .greeting-text span {
      color: #ffffff !important;
      font-weight: 700 !important; }

.oh-navbar__quick-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.5rem; }
  @media (max-width: 767.98px) {
    .oh-navbar__quick-actions {
      display: none; } }
.oh-navbar__quick-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none; }
  .oh-navbar__quick-action::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s; }
  .oh-navbar__quick-action:hover::before {
    opacity: 1; }
  .oh-navbar__quick-action:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(250, 112, 154, 0.4); }
  .oh-navbar__quick-action ion-icon {
    font-size: 1.3rem;
    color: #ffffff;
    position: relative;
    z-index: 1; }
  .oh-navbar__quick-action--primary {
    background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%); }
  .oh-navbar__quick-action--success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); }
  .oh-navbar__quick-action--warning {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); }
  .oh-navbar__quick-action--info {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); }
  .oh-navbar__quick-action--danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

.oh-navbar__status {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25); }
  @media (max-width: 767.98px) {
    .oh-navbar__status {
      display: none; } }
  .oh-navbar__status .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    margin-right: 0.5rem;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    box-shadow: 0 0 10px rgba(72, 187, 120, 0.6); }
  .oh-navbar__status .status-text {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.oh-navbar__notifications::after,
.oh-navbar__action-icons::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: -1; }

.oh-navbar__notifications:active::after,
.oh-navbar__action-icons:active::after {
  animation: ripple 0.6s ease-out; }

@keyframes ripple {
  to {
    transform: scale(1.5);
    opacity: 0; } }

.oh-navbar__notification-beacon {
  animation: glowPulse 2s ease-in-out infinite; }

@keyframes glowPulse {
  0%,
  100% {
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5), 0 0 15px rgba(239, 68, 68, 0.3); }
  50% {
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.7), 0 0 25px rgba(239, 68, 68, 0.5); } }

.oh-navbar__search:focus-within {
  animation: searchGlow 0.3s ease-out; }

@keyframes searchGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(85, 202, 197, 0.7); }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 6px rgba(85, 202, 197, 0.3); }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(85, 202, 197, 0.3); } }

.oh-navbar__breadcrumb-item {
  animation: fadeInLeft 0.4s ease-out backwards; }
  .oh-navbar__breadcrumb-item:nth-child(1) {
    animation-delay: 0.1s; }
  .oh-navbar__breadcrumb-item:nth-child(2) {
    animation-delay: 0.2s; }
  .oh-navbar__breadcrumb-item:nth-child(3) {
    animation-delay: 0.3s; }
  .oh-navbar__breadcrumb-item:nth-child(4) {
    animation-delay: 0.4s; }
  .oh-navbar__breadcrumb-item:nth-child(5) {
    animation-delay: 0.5s; }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

.oh-navbar__page-title {
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; }
  .oh-navbar__page-title::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
  .oh-navbar__page-title:hover::after {
    width: 100%; }

.oh-navbar__shine-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0; }
  .oh-navbar__shine-layer::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(45deg);
    animation: headerShine 10s linear infinite;
    pointer-events: none; }

@keyframes headerShine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg); } }

.oh-navbar__live-clock {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
  @media (max-width: 991.98px) {
    .oh-navbar__live-clock {
      display: none; } }
  .oh-navbar__live-clock .clock-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    color: #ffffff;
    animation: clockTick 2s ease-in-out infinite; }
  .oh-navbar__live-clock .clock-time {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    min-width: 70px;
    text-align: center; }
  .oh-navbar__live-clock .clock-period {
    font-size: 0.75rem;
    margin-left: 0.25rem;
    opacity: 0.9; }

@keyframes clockTick {
  0%,
  100% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(12deg); } }

.time-runner,
.at-work-seconds {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  background: #2d3748 !important;
  background-image: none !important;
  border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  min-width: 75px;
  text-align: center;
  justify-content: center; }

.time-runner {
  background: #2d3748 !important;
  background-image: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }

@keyframes timerShine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg); } }

@keyframes timerPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1); }
  50% {
    opacity: 0.7;
    transform: scale(1.05); } }

.oh-btn--success-outline,
.oh-btn--warning-outline {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-width: 2px;
  font-weight: 600; }
  .oh-btn--success-outline:hover,
  .oh-btn--warning-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
  .oh-btn--success-outline::before,
  .oh-btn--warning-outline::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s; }
  .oh-btn--success-outline:active::before,
  .oh-btn--warning-outline:active::before {
    width: 300px;
    height: 300px; }

.oh-btn--success-outline {
  border-color: #48bb78;
  color: #48bb78;
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.05) 0%, rgba(56, 161, 105, 0.05) 100%); }
  .oh-btn--success-outline:hover {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    border-color: #38a169; }
    .oh-btn--success-outline:hover .oh-navbar__clock-icon {
      color: white !important; }

.oh-btn--warning-outline {
  border-color: #ed8936;
  color: #ed8936;
  background: linear-gradient(135deg, rgba(237, 137, 54, 0.05) 0%, rgba(221, 107, 32, 0.05) 100%); }
  .oh-btn--warning-outline:hover {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
    color: white;
    border-color: #dd6b20; }
    .oh-btn--warning-outline:hover .oh-navbar__clock-icon {
      color: white !important; }

.oh-navbar__clock-icon {
  transition: all 0.3s ease; }
  .oh-navbar__clock-icon.text-success {
    animation: checkInPulse 2s ease-in-out infinite; }
  .oh-navbar__clock-icon.text-warning {
    animation: checkOutPulse 2s ease-in-out infinite; }

@keyframes checkInPulse {
  0%,
  100% {
    transform: scale(1); }
  50% {
    transform: scale(1.1); } }

@keyframes checkOutPulse {
  0%,
  100% {
    transform: scale(1) rotate(0deg); }
  50% {
    transform: scale(1.1) rotate(5deg); } }

.digital-time {
  font-family: "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }

.oh-btn {
  display: block;
  border: none;
  border-radius: 0rem;
  padding: 0.8rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: #434851; }
  @media (max-width: 575.98px) {
    .oh-btn {
      font-size: 0.8rem !important; } }
  .oh-btn:hover {
    background-color: #e6e6e6; }
  .oh-btn:focus, .oh-btn:focus-visible {
    outline: #5a67d8 solid 2px;
    border-radius: 0;
    border: none; }
  .oh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

.oh-btn--shadow {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1)); }

.oh-btn--sq-sm {
  width: 28px;
  height: 28px; }

.oh-btn--sq {
  width: 32px;
  height: 32px;
  padding: 0; }

.oh-btn--inline {
  display: inline-block; }

.oh-btn--primary {
  background-color: #5a67d8;
  color: #ffffff; }
  .oh-btn--primary:hover, .oh-btn--primary:focus, .oh-btn--primary:focus-visible {
    background-color: #232b38;
    color: #ffffff;
    text-decoration: none; }

.oh-btn--secondary {
  background: linear-gradient(135deg, #2d3748 0%, #f59e0b 100%);
  color: #ffffff;
  text-decoration: none; }
  .oh-btn--secondary:hover, .oh-btn--secondary:focus, .oh-btn--secondary:focus-visible {
    background: linear-gradient(135deg, #1a202c 0%, #d97706 100%);
    color: white;
    text-decoration: none; }
  .oh-btn--secondary:disabled {
    background: linear-gradient(135deg, #2d3748 0%, #f59e0b 100%);
    opacity: 0.6; }

.oh-btn--success {
  background-color: #10b981;
  color: #ffffff; }
  .oh-btn--success:hover, .oh-btn--success:focus, .oh-btn--success:focus-visible {
    background-color: #059669;
    text-decoration: none; }

.oh-btn--danger {
  background-color: #ef4444;
  color: #ffffff; }
  .oh-btn--danger:hover, .oh-btn--danger:focus, .oh-btn--danger:focus-visible {
    background-color: #dc2626;
    text-decoration: none; }

.oh-btn--warning {
  background-color: #ffc107;
  color: #1f2937; }
  .oh-btn--warning:hover, .oh-btn--warning:focus, .oh-btn--warning:focus-visible {
    background-color: #dda735;
    color: #1f2937;
    text-decoration: none; }

.oh-btn--info {
  background-color: #3b82f6;
  color: #ffffff; }
  .oh-btn--info:hover, .oh-btn--info:focus, .oh-btn--info:focus-visible {
    background-color: #2563eb;
    color: #ffffff;
    text-decoration: none; }

.oh-btn--primary-outline {
  background-color: transparent;
  border: 1px solid #5a67d8;
  color: #5a67d8; }
  .oh-btn--primary-outline:hover, .oh-btn--primary-outline:focus, .oh-btn--primary-outline:focus-visible {
    background-color: #5a67d8;
    color: #ffffff; }

.oh-btn--secondary-outline {
  background-color: transparent;
  border: 1px solid #6c3baa;
  color: #6c3baa; }
  .oh-btn--secondary-outline:hover, .oh-btn--secondary-outline:focus, .oh-btn--secondary-outline:focus-visible {
    background-color: #6c3baa;
    color: #ffffff; }

.oh-btn--secondary-ouline {
  border: 1px solid #6c3baa;
  color: #6c3baa;
  background-color: transparent; }
  .oh-btn--secondary-ouline:hover {
    background-color: #6c3baa;
    color: #ffffff; }
  .oh-btn--secondary-ouline:focus, .oh-btn--secondary-ouline:focus-visible {
    color: #5a2e96;
    background-color: transparent;
    border: 1px solid #5a2e96; }

.oh-btn--success-outline {
  background-color: transparent;
  border: 1px solid #10b981;
  color: #10b981; }
  .oh-btn--success-outline:hover, .oh-btn--success-outline:focus, .oh-btn--success-outline:focus-visible {
    background-color: #10b981;
    color: #ffffff; }

.oh-btn--danger-outline {
  color: #ef4444; }
  .oh-btn--danger-outline:hover, .oh-btn--danger-outline:focus, .oh-btn--danger-outline:focus-visible {
    color: #dc2626;
    text-decoration: none; }

.oh-btn--warning-outline {
  background-color: transparent;
  border: 1px solid #ffc107;
  color: #ffc107; }
  .oh-btn--warning-outline:hover, .oh-btn--warning-outline:focus, .oh-btn--warning-outline:focus-visible {
    background-color: #ffc107;
    color: #1f2937; }

.oh-btn--info-outline {
  background-color: transparent;
  border: 1px solid #3b82f6;
  color: #3b82f6; }
  .oh-btn--info-outline:hover, .oh-btn--info-outline:focus, .oh-btn--info-outline:focus-visible {
    background-color: #3b82f6;
    color: #ffffff; }

.oh-btn--white-outline {
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff; }
  .oh-btn--white-outline:hover, .oh-btn--white-outline:focus, .oh-btn--white-outline:focus-visible {
    background-color: #ffffff;
    color: #e54f38; }

.oh-btn--transparent {
  background-color: transparent;
  color: rgba(31, 41, 55, 0.8); }
  .oh-btn--transparent:hover, .oh-btn--transparent:focus, .oh-btn--transparent:focus-visible {
    background-color: transparent;
    border: none;
    color: #1f2937; }

.oh-btn--light {
  background-color: #f8f9fa;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #6c3baa; }
  .oh-btn--light:hover, .oh-btn--light:focus, .oh-btn--light:focus-visible {
    text-decoration: none;
    color: #5a2e96;
    background-color: #f3f4f6; }

.oh-btn--light-dark-text {
  background-color: #f8f9fa;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #1f2937; }
  .oh-btn--light-dark-text:hover, .oh-btn--light-dark-text:focus, .oh-btn--light-dark-text:focus-visible {
    text-decoration: none;
    color: #1f2937;
    background-color: #f3f4f6; }

.oh-btn--light-danger {
  color: #ef4444;
  background-color: transparent; }
  .oh-btn--light-danger:hover, .oh-btn--light-danger:focus, .oh-btn--light-danger:focus-visible {
    text-decoration: none;
    color: #dc2626; }

.oh-btn--light-bkg {
  background-color: #f8f9fa !important; }
  .oh-btn--light-bkg:hover {
    background-color: whitesmoke !important; }

.oh-btn--secondary-link {
  color: #6c3baa; }
  .oh-btn--secondary-link:hover, .oh-btn--secondary-link:focus, .oh-btn--secondary-link:focus-visible {
    color: #5a2e96;
    text-decoration: none !important; }

.oh-btn--danger-link {
  color: #ef4444; }
  .oh-btn--danger-link:hover, .oh-btn--danger-link:focus, .oh-btn--danger-link:focus-visible {
    color: #dc2626;
    text-decoration: none !important; }

.oh-btn--danger-text {
  color: #ef4444; }
  .oh-btn--danger-text:hover {
    color: #dc2626; }

.oh-input--medium {
  font-size: 0.9rem;
  padding: 0.65rem 1rem;
  height: 40.94px; }

.oh-btn--small {
  font-size: 0.9rem;
  padding: 0.65rem 1rem; }

.oh-btn--x-small {
  font-size: 0.8rem;
  padding: 0.5rem 0.8rem; }

.oh-btn--f-md {
  font-size: 1.15rem; }

@media (max-width: 767.98px) {
  .oh-btn--w-100-resp {
    width: 100%; } }

.oh-btn--dropdown {
  position: relative; }
  .oh-btn--dropdown::after {
    content: url("data:image/svg+xml,%3Csvg width='12' height='12' fill='%23ffffff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4.594 8.912 6.553 7.646a1.126 1.126 0 0 0 1.708 0l6.552-7.646c.625-.73.107-1.857-.854-1.857H5.447c-.961 0-1.48 1.127-.853 1.857Z'%3E%3C/path%3E%3C/svg%3E");
    position: relative;
    width: 20px;
    left: 5px; }

.oh-btn--view {
  background-color: #ffffff;
  border: none;
  color: #4a5568 !important; }
  .oh-btn--view ion-icon {
    color: #4a5568 !important; }
  .oh-btn--view:hover, .oh-btn--view:focus, .oh-btn--view:focus-visible {
    background-color: #f7fafc;
    outline: none; }

.oh-btn--view-active {
  background-color: #2d3748 !important;
  color: #ffffff !important; }
  .oh-btn--view-active ion-icon {
    color: #ffffff !important; }

.oh-btn--disabled {
  opacity: 0.6;
  cursor: not-allowed !important; }
  .oh-btn--disabled:focus, .oh-btn--disabled:focus-visible {
    outline: none; }

.oh-btn-group {
  display: flex;
  align-items: center;
  border: 1px solid #f3f4f6; }

.oh-btn-group > * {
  border-right: 1px solid #f3f4f6; }
  .oh-btn-group > *:last-child {
    border-right: none; }

.oh-floatin-btn {
  position: fixed;
  right: 1.5rem;
  bottom: 2.5rem;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 25px;
  padding: 1rem 1.5rem;
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px;
  transition: all 0.3s ease-in-out; }
  .oh-floatin-btn:hover {
    transition: all 0.3s ease-in-out; }

.oh-floatin-btn--success:hover {
  color: #10b981;
  transition: all 0.3s ease-in-out; }

.oh-floatin-btn--danger:hover {
  color: #ef4444;
  transition: all 0.3s ease-in-out; }

.oh-btn--chat {
  display: inline-flex;
  background-color: transparent; }
  .oh-btn--chat::after {
    width: 20px;
    height: 20px;
    position: absolute;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.4s ease-in-out; }
  .oh-btn--chat:hover {
    background-color: transparent; }
    .oh-btn--chat:hover::after {
      transition: all 0.4s ease-in-out; }

.oh-btn--chat-send::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon s-ion-icon' fill='darkgrey' viewBox='0 0 512 512'%3E%3Cpath d='M16 464l480-208L16 48v160l320 48-320 48z'%3E%3C/path%3E%3C/svg%3E"); }

.oh-btn--chat-send:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon s-ion-icon' fill='grey' viewBox='0 0 512 512'%3E%3Cpath d='M16 464l480-208L16 48v160l320 48-320 48z'%3E%3C/path%3E%3C/svg%3E"); }

.oh-btn--chat-attachments {
  position: absolute; }
  .oh-btn--chat-attachments::after {
    content: "";
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M14.8287 7.75737L9.1718 13.4142C8.78127 13.8047 8.78127 14.4379 9.1718 14.8284C9.56232 15.219 10.1955 15.219 10.586 14.8284L16.2429 9.17158C17.4144 8.00001 17.4144 6.10052 16.2429 4.92894C15.0713 3.75737 13.1718 3.75737 12.0002 4.92894L6.34337 10.5858C4.39075 12.5384 4.39075 15.7042 6.34337 17.6569C8.29599 19.6095 11.4618 19.6095 13.4144 17.6569L19.0713 12L20.4855 13.4142L14.8287 19.0711C12.095 21.8047 7.66283 21.8047 4.92916 19.0711C2.19549 16.3374 2.19549 11.9053 4.92916 9.17158L10.586 3.51473C12.5386 1.56211 15.7045 1.56211 17.6571 3.51473C19.6097 5.46735 19.6097 8.63317 17.6571 10.5858L12.0002 16.2427C10.8287 17.4142 8.92916 17.4142 7.75759 16.2427C6.58601 15.0711 6.58601 13.1716 7.75759 12L13.4144 6.34316L14.8287 7.75737Z' fill='rgba(169,169,169,1)'%3E%3C/path%3E%3C/svg%3E"); }
  .oh-btn--chat-attachments:hover::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M14.8287 7.75737L9.1718 13.4142C8.78127 13.8047 8.78127 14.4379 9.1718 14.8284C9.56232 15.219 10.1955 15.219 10.586 14.8284L16.2429 9.17158C17.4144 8.00001 17.4144 6.10052 16.2429 4.92894C15.0713 3.75737 13.1718 3.75737 12.0002 4.92894L6.34337 10.5858C4.39075 12.5384 4.39075 15.7042 6.34337 17.6569C8.29599 19.6095 11.4618 19.6095 13.4144 17.6569L19.0713 12L20.4855 13.4142L14.8287 19.0711C12.095 21.8047 7.66283 21.8047 4.92916 19.0711C2.19549 16.3374 2.19549 11.9053 4.92916 9.17158L10.586 3.51473C12.5386 1.56211 15.7045 1.56211 17.6571 3.51473C19.6097 5.46735 19.6097 8.63317 17.6571 10.5858L12.0002 16.2427C10.8287 17.4142 8.92916 17.4142 7.75759 16.2427C6.58601 15.0711 6.58601 13.1716 7.75759 12L13.4144 6.34316L14.8287 7.75737Z' fill='rgba(91,91,91,1)'%3E%3C/path%3E%3C/svg%3E"); }

.oh-hover-btn {
  border: 2px solid #1f2937;
  background-color: transparent;
  border-radius: 3px;
  padding: 0.15rem 0.4rem; }
  .oh-hover-btn:hover {
    background-color: #f3f4f6; }

.oh-hover-btn-container {
  position: relative;
  display: inline-block; }
  .oh-hover-btn-container::before {
    content: "";
    display: block;
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: 100%; }

.oh-hover-btn__small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s linear; }
  .oh-hover-btn__small:hover {
    background-color: #6c3baa;
    border: 1px solid #5a2e96;
    color: #ffffff;
    transition: all 0.2s linear;
    transform: scale(105%); }

.oh-hover-btn-drawer {
  align-items: center;
  position: absolute;
  display: flex;
  gap: 5px;
  z-index: 99;
  right: -20px;
  bottom: 130%;
  visibility: hidden;
  pointer-events: none;
  opacity: 0; }

.oh-hover-btn-container:hover .oh-hover-btn-drawer {
  display: flex;
  visibility: visible;
  pointer-events: all;
  opacity: 1; }

.oh-btn {
  border-radius: 12px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .oh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

.oh-btn--primary {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); }
  .oh-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6); }

.oh-btn--success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4); }
  .oh-btn--success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(72, 187, 120, 0.5); }

.oh-btn--danger:not(.oh-modal__dialog--new-design .oh-btn--danger) {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); }
  .oh-btn--danger:not(.oh-modal__dialog--new-design .oh-btn--danger):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5); }

.oh-btn--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(237, 137, 54, 0.4); }
  .oh-btn--warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(237, 137, 54, 0.5); }

.oh-btn--info:not(.oh-modal__dialog--new-design .oh-btn--info) {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4); }
  .oh-btn--info:not(.oh-modal__dialog--new-design .oh-btn--info):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(66, 153, 225, 0.5); }

.oh-btn--secondary {
  background: linear-gradient(135deg, #2d3748 0%, #f59e0b 100%) !important;
  color: white !important;
  border: 1px solid #2d3748 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  font-size: 13px !important; }
  .oh-btn--secondary:hover {
    background: linear-gradient(135deg, #1a202c 0%, #d97706 100%) !important;
    border-color: #1a202c !important;
    color: white !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12) !important; }
  .oh-btn--secondary:disabled, .oh-btn--secondary.oh-btn--disabled-state {
    color: #979bf0 !important;
    font-size: 13px !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    background: linear-gradient(135deg, #2d3748 0%, #f59e0b 100%) !important; }
  .oh-btn--secondary.oh-btn--has-changes {
    color: white !important;
    font-size: 13px !important;
    cursor: pointer !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, #2d3748 0%, #f59e0b 100%) !important; }

.oh-btn--primary-outline {
  background: transparent;
  color: #f59e0b;
  border: 2px solid #f59e0b;
  box-shadow: none; }
  .oh-btn--primary-outline:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6); }

.btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
  .btn:hover {
    transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important; }
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: linear-gradient(135deg, #7688ed 0%, #8557ad 100%) !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6) !important;
    color: white !important; }

.btn-secondary {
  background: white !important;
  color: #f59e0b !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important; }
  .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background: #f5f5f5 !important;
    border-color: #2d3748 !important;
    color: #2d3748 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; }

.btn-success {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4) !important; }
  .btn-success:hover, .btn-success:focus, .btn-success:active {
    background: linear-gradient(135deg, #48bb78 0%, #2f855a 100%) !important;
    box-shadow: 0 6px 16px rgba(72, 187, 120, 0.5) !important;
    color: white !important; }

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important; }
  .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5) !important;
    color: white !important; }

.btn-warning {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(237, 137, 54, 0.4) !important; }
  .btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background: linear-gradient(135deg, #ed8936 0%, #c05621 100%) !important;
    box-shadow: 0 6px 16px rgba(237, 137, 54, 0.5) !important;
    color: white !important; }

.btn-info {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4) !important; }
  .btn-info:hover, .btn-info:focus, .btn-info:active {
    background: linear-gradient(135deg, #4299e1 0%, #2c5282 100%) !important;
    box-shadow: 0 6px 16px rgba(66, 153, 225, 0.5) !important;
    color: white !important; }

.btn-outline-primary {
  background: transparent !important;
  color: #f59e0b !important;
  border: 2px solid #f59e0b !important; }
  .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6) !important; }

.oh-btn--new-blue {
  background-color: #6c3baa !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease; }
  .oh-btn--new-blue:hover, .oh-btn--new-blue:focus, .oh-btn--new-blue:focus-visible {
    background-color: #012d6b !important;
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-1px); }

.oh-btn--new-green {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  border: 1px solid #16a34a !important;
  border-radius: 8px !important;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center; }
  .oh-btn--new-green:hover, .oh-btn--new-green:focus, .oh-btn--new-green:focus-visible {
    background: #dcfce7 !important;
    color: #16a34a !important;
    text-decoration: none; }

.oh-btn--new-red {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #dc2626 !important;
  border-radius: 8px !important;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center; }
  .oh-btn--new-red:hover, .oh-btn--new-red:focus, .oh-btn--new-red:focus-visible {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    text-decoration: none; }

.oh-btn--new-ash {
  background-color: #ededed !important;
  color: #434851 !important;
  border-radius: 8px !important;
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.2s ease; }
  .oh-btn--new-ash:hover, .oh-btn--new-ash:focus, .oh-btn--new-ash:focus-visible {
    background-color: #e6e6e6 !important;
    color: #434851 !important;
    text-decoration: none;
    transform: translateY(-1px); }

.oh-card {
  padding: 1.15rem;
  border-radius: 0rem;
  border: 1px solid #e5e7eb;
  background-color: #ffffff; }

.oh-card--margin {
  margin-top: 2rem; }

@media (max-width: 767.98px) {
  .oh-card.p-4 {
    padding: 0 !important; } }

.oh-card--no-shadow {
  box-shadow: none !important;
  border: 1px solid #f3f4f6 !important; }

.oh-card--border {
  border: 1px solid #f3f4f6; }

.oh-card--w-resp-75 {
  width: 75%; }
  @media (max-width: 991.98px) {
    .oh-card--w-resp-75 {
      width: 100%; } }
.oh-card__header {
  margin-bottom: 0.85rem; }

.oh-card__title--lg {
  font-size: 1.25rem; }

.oh-card__title--sm {
  font-size: 0.9rem; }

.oh-card__footer--border-top {
  border-top: 1px solid #f3f4f6; }

.oh-list-cards {
  list-style-type: none;
  padding-left: 0px;
  margin-bottom: 0px; }

.oh-list-cards__item {
  padding: 1.25rem;
  border: 1px solid #f3f4f6;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 0rem; }
  .oh-list-cards__item:last-child {
    margin-bottom: 0; }

.oh-list-card__title {
  font-weight: bold; }

.oh-list-card__description {
  color: #737373; }

.oh-list-card__footer {
  border-top: 1px solid #f3f4f6;
  padding-top: 0.8rem; }

.oh-list__actions {
  padding-top: 1rem;
  float: right; }
  .oh-list__actions a:first-child {
    margin-right: 0.5rem; }

.oh-activity-list {
  list-style-type: none;
  padding-left: 0; }

.oh-activity-list__item {
  display: flex;
  align-items: center;
  margin-top: 1.15rem;
  margin-bottom: 1.15rem; }
  .oh-activity-list__item:first-child {
    margin-top: 0; }
  .oh-activity-list__item:last-child {
    margin-bottom: 0; }
  .oh-activity-list__item * {
    flex-shrink: 0; }

.oh-activity-list__photo {
  border-radius: 50%;
  overflow: hidden; }

.oh-activity-list__photo--small {
  width: 30px;
  height: 30px; }

.oh-activity-list__image {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.oh-activity-list__description {
  color: #737373;
  max-width: calc(100% - 32px); }

.oh-activity-list__description strong {
  color: #454545; }

.oh-activity-list__comment-title {
  display: flex;
  align-items: flex-start; }

.oh-activity-list__comment-timestamp {
  font-size: 0.75rem;
  display: block; }

.oh-activity-list__comment {
  display: block; }

.oh-activity-list__comment-container {
  padding-left: 2.3rem;
  margin-top: 0.45rem;
  margin-bottom: 1.35rem; }

.oh-item {
  display: block; }

.oh-item--border-bottom {
  padding: 1.25rem;
  border-bottom: 1px solid #f3f4f6; }
  .oh-item--border-bottom:last-child {
    border-bottom: none; }

.oh-container {
  width: 100%;
  padding: 0.75rem; }

.oh-container--outline {
  border: 1px solid #f3f4f6; }

.oh-kanban-card {
  position: relative;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 1rem;
  width: 100%;
  cursor: pointer; }
  .oh-kanban-card:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 1px 2px 0px; }
  .oh-kanban-card--red {
    border-left: 5px solid #dc2626; }
  .oh-kanban-card--blue {
    border-left: 5px solid #3b82f6; }
  .oh-kanban-card--yellow {
    border-left: 5px solid #dda735; }
  .oh-kanban-card--green {
    border-left: 5px solid #059669; }
  .oh-kanban-card--orange {
    border-left: 5px solid #fd7e14; }

.oh-kanban-card--biometric {
  padding-left: 1.5rem;
  flex-direction: column;
  align-items: flex-start; }

.oh-kanban-card__biometric-actions {
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  display: block;
  width: 100%;
  border-top: 1px solid #f3f4f6; }

.oh-kanban-card__profile-container {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden; }

.oh-kanban-card__profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.oh-kanban-card__title {
  display: block;
  font-weight: bold; }
  @media (max-width: 575.98px) {
    .oh-kanban-card__title {
      font-size: 0.8rem; } }
.oh-kanban-card__subtitle {
  font-size: 0.85rem;
  color: #737373; }
  @media (max-width: 575.98px) {
    .oh-kanban-card__subtitle {
      font-size: 0.7rem; } }
.oh-kanban-card__avatar {
  margin-right: 1rem; }

.oh-kanban-card__actions {
  display: flex;
  align-items: center; }

.oh-kanban-card__actions > * {
  margin-right: 0.5rem;
  flex-shrink: 0; }
  .oh-kanban-card__actions > *:last-child {
    margin-right: 0; }

.oh-kanban-card__dots {
  position: absolute;
  right: 0px;
  top: 0px; }

.oh-metric-card {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  transition: all 0.2s ease; }
  .oh-metric-card:hover {
    background-color: #f1f3f5; }

.oh-metric-card__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.25rem; }

.oh-metric-card__label {
  font-size: 0.8rem;
  color: #737373;
  text-transform: uppercase;
  letter-spacing: 0.5px; }

.oh-card {
  border-radius: 12px;
  background: white;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .oh-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

.oh-card--purple {
  position: relative;
  overflow: hidden; }
  .oh-card--purple::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: none; }

.oh-card--pink {
  position: relative;
  overflow: hidden; }
  .oh-card--pink::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: none; }

.oh-card--orange {
  position: relative;
  overflow: hidden; }
  .oh-card--orange::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: none; }

.oh-card--blue {
  position: relative;
  overflow: hidden; }
  .oh-card--blue::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6c3baa 0.42%, #c8b1e4 111.32%); }

.oh-kanban-card {
  border-radius: 8px;
  background: white;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .oh-kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
  .oh-kanban-card--red {
    border-left: 3px solid #ef4444; }
  .oh-kanban-card--blue {
    border-left: 3px solid #3b82f6; }
  .oh-kanban-card--yellow {
    border-left: 3px solid #f59e0b; }
  .oh-kanban-card--green {
    border-left: 3px solid #10b981; }
  .oh-kanban-card--orange {
    border-left: 3px solid #6c3baa; }

/* OLD-ALERT-V1 (commented 2026-04-16) — superseded by "NEW TOAST DESIGN" at bottom of file.
   If the new design is approved, delete this commented block.
   If not, remove the new-design block and uncomment this.
.oh-alert-container {
  top: 90px;
  left: 220px;
  position: fixed;
  z-index: 999999;
  max-width: 500px;
  width: auto;
  pointer-events: none;
  @media (max-width: 575.98px) {
    left: 1rem;
    top: 75px;
    width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
  }
}
*/
/* OLD-ALERT-V1 (commented 2026-04-16) — base .oh-alert; superseded by new design at bottom.
.oh-alert {
  opacity: 0;
  width: 100%;
  padding: 1rem;
  background-color: $white;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  &:last-child {
    margin-bottom: 0;
  }
  &::before {
    content: "";
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.75rem;
  }
}
*/
.oh-alert--animated {
  animation: slide-right-in-pop-animation 2s 0s ease-in-out forwards;
  animation-fill-mode: forwards !important; }

@keyframes slide-right-in-pop-animation {
  0% {
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    opacity: 0; }
  30% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1; }
  80% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1; }
  100% {
    transform: translate3d(-10%, 0, 0);
    visibility: hidden;
    opacity: 0; } }

/* OLD-ALERT-V2 (commented 2026-04-16) — Phase 2 solid-pill design; superseded by new design at bottom.
// Modern alert container
.oh-alert-container {
  position: fixed !important;
  top: 80px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 999999 !important;
  max-width: 420px !important;
  width: auto !important;
  pointer-events: none !important;

  @media (max-width: 575.98px) {
    left: 1rem !important;
    right: 1rem !important;
    top: 75px !important;
    max-width: calc(100% - 2rem) !important;
  }
}

// Modern alert base with solid background - Figma Design
.oh-alert {
  opacity: 1 !important;
  padding: 16px 24px !important;
  border-radius: 15px !important;
  margin-bottom: 12px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: "Inter", "DM Sans", sans-serif !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  pointer-events: all !important;
  border: none !important;
}
*/
/* OLD-ALERT-V2 (commented 2026-04-16) — solid-pill variants; superseded by new design at bottom.
// Alert variants - Figma Design (solid colors with dark text)

// Success: Green background #00bb77, dark green text #007e50, check icon
.oh-alert--success {
  background: #00bb77 !important;
  color: #007e50 !important;
  border: none !important;

  &::before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23007E50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
  }
}

// Error/Danger: Red background #da2c43, dark red text #6d000e, alert-octagon icon
.oh-alert--danger,
.oh-alert--error {
  background: #da2c43 !important;
  color: #6d000e !important;
  border: none !important;

  &::before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.86 2H16.14L22 7.86V16.14L16.14 22H7.86L2 16.14V7.86L7.86 2Z' stroke='%236D000E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8V12' stroke='%236D000E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16H12.01' stroke='%236D000E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
  }
}

// Warning: Yellow background #cab204, dark yellow text #6a5d00, clock icon
.oh-alert--warning {
  background: #cab204 !important;
  color: #6a5d00 !important;
  border: none !important;

  &::before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%236A5D00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 6V12L16 14' stroke='%236A5D00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
  }
}

// Info: Blue (keeping gradient as no Figma design provided)
.oh-alert--info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: none !important;

  &::before {
    content: "i" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    text-align: center !important;
    line-height: 24px !important;
    font-weight: bold !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    color: #ffffff !important;
  }
}
*/
.alert:not(.oh-alert) {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  color: #2d3748 !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 1rem !important; }

.alert-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.08) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-left: 5px solid #ef4444 !important;
  color: #991b1b !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important; }

.alert-warning {
  background: linear-gradient(135deg, rgba(237, 137, 54, 0.08) 0%, rgba(221, 107, 32, 0.08) 100%) !important;
  border: 1px solid rgba(237, 137, 54, 0.3) !important;
  border-left: 5px solid #ed8936 !important;
  color: #92400e !important;
  box-shadow: 0 4px 12px rgba(237, 137, 54, 0.15) !important; }

.alert-info {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(45, 55, 72, 0.08) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-left: 5px solid #f59e0b !important;
  color: #3730a3 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15) !important; }

.alert-success {
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.08) 0%, rgba(56, 161, 105, 0.08) 100%) !important;
  border: 1px solid rgba(72, 187, 120, 0.3) !important;
  border-left: 5px solid #48bb78 !important;
  color: #065f46 !important;
  box-shadow: 0 4px 12px rgba(72, 187, 120, 0.15) !important; }

.alert-primary {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(45, 55, 72, 0.08) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-left: 5px solid #f59e0b !important;
  color: #3730a3 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15) !important; }

.oh-wrapper-main {
  position: relative;
  z-index: 1;
  isolation: isolate; }

/* OLD-ALERT-V3 (commented 2026-04-16) — Phase 3 max-specificity overrides; superseded.
.oh-alert.oh-alert--success {
  background: #00bb77 !important;
  color: #007e50 !important;
  border: none !important;
}

.oh-alert.oh-alert--error,
.oh-alert.oh-alert--danger {
  background: #da2c43 !important;
  color: #6d000e !important;
  border: none !important;
}

.oh-alert.oh-alert--warning {
  background: #cab204 !important;
  color: #6a5d00 !important;
  border: none !important;
}

.oh-alert.oh-alert--info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

// Override icon styles with maximum specificity - Figma Design SVG Icons
.oh-alert.oh-alert--success::before {
  content: "" !important;
  background: transparent !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23007E50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0 !important;
}

.oh-alert.oh-alert--error::before,
.oh-alert.oh-alert--danger::before {
  content: "" !important;
  background: transparent !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.86 2H16.14L22 7.86V16.14L16.14 22H7.86L2 16.14V7.86L7.86 2Z' stroke='%236D000E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8V12' stroke='%236D000E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16H12.01' stroke='%236D000E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0 !important;
}

.oh-alert.oh-alert--warning::before {
  content: "" !important;
  background: transparent !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%236A5D00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 6V12L16 14' stroke='%236A5D00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0 !important;
}

.oh-alert.oh-alert--info::before {
  content: "i" !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  text-align: center !important;
  line-height: 24px !important;
  font-weight: bold !important;
  font-size: 16px !important;
}
*/
.oh-alert-container {
  position: fixed;
  top: 80px;
  right: 20px;
  left: auto;
  z-index: 999999;
  max-width: 720px;
  width: auto;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px; }
  @media (max-width: 575.98px) {
    .oh-alert-container {
      left: 1rem;
      right: 1rem;
      top: 75px;
      max-width: calc(100% - 2rem); } }
.oh-alert {
  position: relative;
  width: max-content;
  max-width: 100%;
  min-width: 280px;
  padding: 14px 52px 14px 80px;
  border-radius: 12px;
  overflow: hidden;
  font-family: "DM Sans", "Inter", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  min-height: 56px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  pointer-events: all;
  opacity: 1;
  color: #1f2937;
  background: #dcfce7;
  border: none;
  margin: 0;
  word-break: break-word;
  white-space: normal; }
  .oh-alert::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background-color: #16a34a;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px; }
  .oh-alert::after {
    content: "\00d7";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #16a34a;
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
    font-family: "DM Sans", "Inter", sans-serif;
    pointer-events: none; }

.oh-alert--success {
  background: #dcfce7; }
  .oh-alert--success::before {
    background-color: #16a34a;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23ffffff' stroke-width='2'/%3E%3Cpolyline points='9 12 11 14 15 10' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
  .oh-alert--success::after {
    color: #16a34a; }

.oh-alert--danger,
.oh-alert--error {
  background: #fee2e2; }
  .oh-alert--danger::before,
  .oh-alert--error::before {
    background-color: #dc2626;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23ffffff' stroke-width='2'/%3E%3Cline x1='9' y1='9' x2='15' y2='15' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='15' y1='9' x2='9' y2='15' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .oh-alert--danger::after,
  .oh-alert--error::after {
    color: #dc2626; }

.oh-alert--warning {
  background: #ffedd5; }
  .oh-alert--warning::before {
    background-color: #ea580c;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cline x1='12' y1='9' x2='12' y2='13' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1' fill='%23ffffff'/%3E%3C/svg%3E"); }
  .oh-alert--warning::after {
    color: #ea580c; }

.oh-alert--info {
  background: #dbeafe; }
  .oh-alert--info::before {
    background-color: #2563eb;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='12' cy='8' r='1' fill='%23ffffff'/%3E%3Cline x1='12' y1='11' x2='12' y2='16' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .oh-alert--info::after {
    color: #2563eb; }

.oh-badge {
  display: inline-block;
  padding: 0.25rem;
  text-align: center; }

.oh-badge--small {
  width: 22px;
  height: 22px;
  font-size: 0.75rem; }

.oh-badge--round {
  display: flex;
  justify-content: center;
  border-radius: 50%; }

.oh-tabs__input-badge-container {
  display: flex;
  align-items: center; }

.oh-badge--danger {
  background-color: #ef4444;
  color: #ffffff; }

.oh-badge--secondary {
  background-color: #6c3baa;
  color: #ffffff; }

.oh-badge--info {
  background-color: #454545;
  color: #ffffff; }

.oh-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%; }

.oh-dot--small {
  width: 8px;
  height: 8px;
  border-radius: 50%; }

.oh-dot--danger {
  background-color: #ef4444; }

.oh-dot--success {
  background-color: #10b981; }

.oh-dot--info {
  background-color: #3b82f6; }

.oh-dot--warning {
  background-color: #ffc107; }

.oh-checkpoint-badge {
  border: 2px solid;
  display: inline-block;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.8rem; }

.oh-checkpoint-badge--secondary {
  color: #6c3baa;
  border-color: #6c3baa; }

.oh-file-icon--html {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9IiNlNTRmMzkiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxwYXRoIGQ9Im0xMiAxOC4xNzggNC42Mi0xLjI1Ni42MjMtNi43NzhIOS4wMjZMOC44MjIgNy44OWg4LjYyNmwuMjI3LTIuMjExSDYuMzI1bC42MzYgNi42NzhoNy44MmwtLjI2MSAyLjg2Ni0yLjUyLjY2Ny0yLjUyLS42NjctLjE1OC0xLjg0NGgtMi4yN2wuMzI5IDMuNTQ0TDEyIDE4LjE3OFpNMyAyaDE4bC0xLjYyMyAxOEwxMiAyMmwtNy4zNzctMkwzIDJaIj48L3BhdGg+Cjwvc3ZnPg=="); }

.oh-file-icon--excel {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9IiNlNTRmMzkiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxwYXRoIGQ9Im0yLjg1OSAyLjg3OCAxMi41Ny0xLjc5NWEuNS41IDAgMCAxIC41NzEuNDk1djIwLjg0NmEuNS41IDAgMCAxLS41Ny40OTVMMi44NTggMjEuMTI0YTEgMSAwIDAgMS0uODU5LS45OVYzLjg2OGExIDEgMCAwIDEgLjg1OS0uOTloLjAwMVpNMTcgMy4wMDFoNGExIDEgMCAwIDEgMSAxdjE2YTEgMSAwIDAgMS0xIDFoLTR2LTE4Wm0tNi44IDkgMi44LTRoLTIuNEw5IDEwLjI4NyA3LjQgOC4wMDFINWwyLjggNC0yLjggNGgyLjRMOSAxMy43MTVsMS42IDIuMjg2SDEzbC0yLjgtNFoiPjwvcGF0aD4KPC9zdmc+"); }

.oh-file-icon--word {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9IiNlNTRmMzkiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxwYXRoIGQ9Ik0xMi4xODYgMTQuNTU1Yy0uNjE3IDAtLjk3Ny41ODctLjk3NyAxLjM3MyAwIC43OS4zNzEgMS4zNS45ODMgMS4zNS42MTcgMCAuOTcxLS41ODguOTcxLTEuMzc0IDAtLjcyNi0uMzQ4LTEuMzUtLjk3Ny0xLjM1WiI+PC9wYXRoPgogPHBhdGggZD0iTTE0IDJINmEyIDIgMCAwIDAtMiAydjE2YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY4bC02LTZaTTkuMTU1IDE3LjQ1NGMtLjQyNi4zNTQtMS4wNzMuNTIxLTEuODY0LjUyMS0uNDc1IDAtLjgxLS4wMy0xLjAzOC0uMDZ2LTMuOTcxYTguMTY1IDguMTY1IDAgMCAxIDEuMjM1LS4wODNjLjc2OCAwIDEuMjY2LjEzOCAxLjY1NS40MzIuNDIuMzEyLjY4NC44MS42ODQgMS41MjIgMCAuNzc1LS4yODIgMS4zMDktLjY3MiAxLjYzOVptMi45OS41NDZjLTEuMiAwLTEuOTAxLS45MDYtMS45MDEtMi4wNTggMC0xLjIxMS43NzMtMi4xMTYgMS45NjctMi4xMTYgMS4yNDEgMCAxLjkxOS45MjkgMS45MTkgMi4wNDUtLjAwMSAxLjMyNS0uODA1IDIuMTI5LTEuOTg1IDIuMTI5Wm00LjY1NS0uNzYyYy4yNzUgMCAuNTgxLS4wNjEuNzYyLS4xMzJsLjEzOC43MTNjLS4xNjguMDg0LS41NDYuMTc0LTEuMDM3LjE3NC0xLjM5NyAwLTIuMTE3LS44NjktMi4xMTctMi4wMjEgMC0xLjM3OS45ODMtMi4xNDYgMi4yMDctMi4xNDYuNDc0IDAgLjgzMy4wOTYuOTk1LjE4bC0uMTg2LjcyNmExLjk4IDEuOTggMCAwIDAtLjc2OC0uMTVjLS43MjYgMC0xLjI5LjQzOC0xLjI5IDEuMzM4IDAgLjgwOS40OCAxLjMxOCAxLjI5NiAxLjMxOFpNMTQgOWgtMVY0bDUgNWgtNFoiPjwvcGF0aD4KIDxwYXRoIGQ9Ik03LjU4NCAxNC41NjNjLS4yMDMgMC0uMzM1LjAxOC0uNDEzLjAzNXYyLjY0NmMuMDc4LjAxOC4yMDQuMDE4LjMxNy4wMTguODI4LjAwNSAxLjM2Ny0uNDUgMS4zNjctMS40MTUuMDA2LS44NC0uNDg1LTEuMjg0LTEuMjcxLTEuMjg0WiI+PC9wYXRoPgo8L3N2Zz4="); }

.oh-file-icon--default {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9IiNlNTRmMzkiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxwYXRoIGQ9Ik0xOCAyMmEyIDIgMCAwIDAgMi0yVjhsLTYtNkg2YTIgMiAwIDAgMC0yIDJ2MTZhMiAyIDAgMCAwIDIgMmgxMlpNMTMgNGw1IDVoLTVWNFpNNyA4aDN2Mkg3VjhabTAgNGgxMHYySDd2LTJabTAgNGgxMHYySDd2LTJaIj48L3BhdGg+Cjwvc3ZnPg=="); }

.oh-file-icon--powerpoint {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9IiNlNTRmMzgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtMTYgMiA1IDV2MTQuMDA4YS45OTMuOTkzIDAgMCAxLS45OTMuOTkySDMuOTkzQTEgMSAwIDAgMSAzIDIxLjAwOFYyLjk5MkMzIDIuNDQ0IDMuNDQ1IDIgMy45OTMgMkgxNlpNOCA4djhoMnYtMmg2VjhIOFptMiAyaDR2MmgtNHYtMloiPjwvcGF0aD4KPC9zdmc+"); }

.oh-badge {
  display: inline-block !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important; }

.oh-badge--primary {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3) !important; }
  .oh-badge--primary:hover {
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4) !important;
    transform: translateY(-1px) !important; }

.oh-badge--success {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(72, 187, 120, 0.3) !important; }
  .oh-badge--success:hover {
    box-shadow: 0 4px 8px rgba(72, 187, 120, 0.4) !important;
    transform: translateY(-1px) !important; }

.oh-badge--danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important; }
  .oh-badge--danger:hover {
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4) !important;
    transform: translateY(-1px) !important; }

.oh-badge--warning {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(237, 137, 54, 0.3) !important; }
  .oh-badge--warning:hover {
    box-shadow: 0 4px 8px rgba(237, 137, 54, 0.4) !important;
    transform: translateY(-1px) !important; }

.oh-badge--info {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(66, 153, 225, 0.3) !important; }
  .oh-badge--info:hover {
    box-shadow: 0 4px 8px rgba(66, 153, 225, 0.4) !important;
    transform: translateY(-1px) !important; }

.oh-badge--secondary {
  background: white !important;
  color: #f59e0b !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15) !important; }
  .oh-badge--secondary:hover {
    background: rgba(245, 158, 11, 0.05) !important;
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.2) !important;
    transform: translateY(-1px) !important; }

.oh-dot--primary {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important; }

.oh-dot--success {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  box-shadow: 0 2px 4px rgba(72, 187, 120, 0.3) !important; }

.oh-dot--danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important; }

.oh-dot--warning {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
  box-shadow: 0 2px 4px rgba(237, 137, 54, 0.3) !important; }

.oh-dot--info {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
  box-shadow: 0 2px 4px rgba(66, 153, 225, 0.3) !important; }

.badge {
  padding: 0.35rem 0.75rem !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important; }

.badge-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  color: white !important;
  border: none !important; }

.badge-success {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  color: white !important;
  border: none !important; }

.badge-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: white !important;
  border: none !important; }

.badge-warning {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
  color: white !important;
  border: none !important; }

.badge-info {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
  color: white !important;
  border: none !important; }

.badge-secondary {
  background: white !important;
  color: #f59e0b !important;
  border: 2px solid #f59e0b !important; }

.badge-light {
  background: #f7fafc !important;
  color: #2d3748 !important;
  border: 1px solid #e2e8f0 !important; }

.badge-dark {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
  color: white !important;
  border: none !important; }

input[type="checkbox"] {
  accent-color: #6c3baa; }

.oh-input {
  border: 1px solid #e5e7eb;
  border-radius: 0rem;
  padding: 0.8rem 1.25rem;
  color: #1f2937; }
  .oh-input:read-only {
    border: none; }
    .oh-input:read-only:focus, .oh-input:read-only:focus-visible {
      outline: none;
      border: none !important; }

.oh-input::placeholder,
select::placeholder {
  color: #93a0b4; }
  @media (max-width: 575.98px) {
    .oh-input::placeholder,
    select::placeholder {
      font-size: 0.8rem; } }
.oh-input:focus, .oh-input:focus-visible,
select:focus,
select:focus-visible {
  outline: #5a67d8 solid 1px;
  border: 1px solid #5a67d8 !important; }

.oh-input--textarea {
  width: 100%;
  padding: 0.8rem 1.25rem !important; }

.oh-input:disabled {
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px; }

.oh-input--small {
  padding: 0.25rem 0.8rem;
  font-size: 0.85rem; }

.oh-input--filter,
.oh-dropdown__filter-body .oh-select--sm + .select2-container .select2-selection--single {
  font-size: 0.85rem !important;
  height: 28px !important; }

.oh-dropdown__filter-body .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search--inline:first-child:last-child .select2-search__field {
  width: 100% !important; }

.oh-input--res-height {
  height: 38px; }

.oh-input--block {
  width: 100%; }

.oh-input__icon {
  padding-left: 45px !important; }

.oh-input-group {
  position: relative; }

.oh-input-group__icon {
  position: relative;
  color: #606366; }

.oh-input-group__icon--left {
  top: 3px;
  left: 30px; }

@media (max-width: 1000px) {
  .oh-input__search-group {
    display: none;
    position: absolute;
    padding: 15px;
    background: white;
    z-index: 99;
    right: 0;
    top: 150px;
    border-radius: 0rem; } }

@media (max-width: 1000px) {
  .oh-input__search-group--show {
    display: block !important; } }

.oh-select {
  border: 1px solid #e5e7eb;
  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
  border-radius: 0rem;
  background-color: #fff; }

.oh-select--sm,
.oh-select--xs-forced {
  font-size: 0.8rem;
  padding-top: 0.25rem; }

.oh-select--xs-forced + .select2-container .select2-selection.select2-selection--single {
  height: 29.03px !important;
  font-size: 0.8rem !important; }

.oh-select--xs + .select2-container .select2-selection--single {
  height: 29.03px !important;
  font-size: 0.8rem !important; }

.oh-select--xs + .select2.select2-container .select2-selection__choice {
  font-size: 0.8rem !important; }

.oh-select--dropdown {
  width: 100%;
  padding: 0.35rem 0.25rem;
  margin-top: 0.5rem;
  margin-bottom: 0.15rem;
  font-size: 0.9rem;
  border-radius: 0rem;
  height: 32px; }
  .oh-select--dropdown:first-child {
    margin-top: 0; }
  .oh-select--dropdown:last-child {
    margin-bottom: 0; }

.oh-input--dropdown {
  width: 100%;
  font-size: 0.9rem;
  padding: 0.35rem 0.25rem;
  border-radius: 0rem;
  margin-top: 0.6rem;
  height: 32px; }

select.oh-select--lg {
  padding: 0.8rem 1.25rem 0.8rem 0.25rem; }

.oh-input__label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  margin-top: 1rem; }

.oh-label {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  margin-top: 1rem; }

.oh-info {
  display: flex;
  align-items: center;
  position: relative;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiM5YzljOWMiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDNi40ODYgMiAyIDYuNDg2IDIgMTJzNC40ODYgMTAgMTAgMTAgMTAtNC40ODYgMTAtMTBTMTcuNTE0IDIgMTIgMlptMSAxNWgtMnYtNmgydjZabTAtOGgtMlY3aDJ2MloiPjwvcGF0aD4KPC9zdmc+");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer; }
  .oh-info::before {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #2d3748;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    font-family: "DM Sans", sans-serif;
    white-space: nowrap;
    min-width: max-content;
    max-width: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 999999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
  .oh-info::after {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2d3748;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 999999;
    pointer-events: none; }
  .oh-info:hover::before, .oh-info:hover::after {
    opacity: 1;
    visibility: visible; }

.oh-label__info {
  display: flex;
  align-items: center; }

.oh-label--question {
  display: block;
  font-weight: bold; }

.oh-editable-input {
  width: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: transparent; }

.oh-input-picker-group {
  display: flex;
  align-items: center; }

@media (max-width: 767.98px) {
  .oh-input-picker-group--resp {
    flex-direction: column; } }

.oh-input-picker {
  display: inline-block;
  padding: 10px;
  border: 1px solid #f3f4f6;
  cursor: pointer; }
  .oh-input-picker input {
    display: none; }
  .oh-input-picker:first-child {
    border-radius: 0rem 0rem 0rem 0rem;
    border-right: none; }
  .oh-input-picker:last-child {
    border-radius: 0rem 0rem 0rem 0;
    border-left: none; }

.oh-input-picker--sm {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center; }

.oh-input-picker--likert {
  font-size: 0.85rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem; }
  @media (max-width: 767.98px) {
    .oh-input-picker--likert {
      width: 100%;
      text-align: center; } }
.oh-input-picker--1.oh-input-picker--selected {
  background-color: #ef4444; }

.oh-input-picker--2.oh-input-picker--selected {
  background-color: #fd7e14; }

.oh-input-picker--3.oh-input-picker--selected {
  background-color: #ffc107; }

.oh-input-picker--4.oh-input-picker--selected {
  background-color: #198754; }

.oh-input-picker--5.oh-input-picker--selected {
  background-color: #059669; }

.oh-input-picker--selected {
  background-color: #6c3baa;
  color: #ffffff; }

.oh-input-picker-selected {
  border: 1px solid #f3f4f6; }

.oh-input--file {
  padding: 1rem; }

.oh-input--file-sm {
  max-width: 250px; }

.oh-select-image ~ .select2-container .select2-container--default,
.oh-select-image ~ .select2-container .select2-selection--single {
  border: none; }

.oh-select-image__img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%; }

.select2-dropdown {
  border-radius: 0rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; }

.select2-container--open .select2-dropdown--above {
  top: -10px; }

.select2-container--open .select2-dropdown--below {
  top: 10px; }

.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
  border: 1px solid #f3f4f6;
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important; }

.select2-results__option--selected {
  background-color: #f3f4f6 !important; }

.select2-results__option--highlighted {
  background-color: rgba(243, 244, 246, 0.5) !important;
  color: #1f2937 !important; }

.oh-select-no-search + .select2-container,
.oh-select-2 + .select2-container {
  width: 100% !important; }

.oh-select-no-search + .select2-container .select2-selection--single,
.oh-select-2 + .select2-container .select2-selection.select2-selection--single {
  border: 1px solid #f3f4f6;
  height: 48.54px !important;
  display: flex;
  align-items: center; }
  .oh-select-no-search + .select2-container .select2-selection--single:focus, .oh-select-no-search + .select2-container .select2-selection--single:focus-visible, .oh-select-no-search + .select2-container .select2-selection--single:active,
  .oh-select-2 + .select2-container .select2-selection.select2-selection--single:focus,
  .oh-select-2 + .select2-container .select2-selection.select2-selection--single:focus-visible,
  .oh-select-2 + .select2-container .select2-selection.select2-selection--single:active {
    border: 2px solid #5a67d8 !important; }

.select2-search__field {
  border-radius: 0px !important; }

.select2-container--open .select2-selection {
  border-radius: 0rem !important; }

.oh-select-no-search + .select2-container .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
  display: block;
  height: 100% !important; }

.oh-select-no-search + .select2-container .select2-selection__rendered {
  height: 100%;
  display: flex !important;
  align-items: center !important; }

.oh-select-image + .select2-container .select2-selection__rendered {
  height: unset !important; }

.select2-results__option {
  padding: 0.4rem; }

.select2-selection__arrow {
  height: 100%; }

.select2-container--default .select2-selection--single .select2-selection__arrow {
  display: flex;
  height: 100% !important;
  justify-content: flex-start;
  align-items: center;
  top: -2px;
  right: -1px; }

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none !important;
  border-color: transparent !important;
  margin: 0 !important;
  position: relative;
  top: 0 !important;
  left: 0 !important; }

.select2-container--default .select2-selection--single .select2-selection__arrow b::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1px solid #757575;
  border-bottom: 1px solid #757575;
  transform: rotate(45deg);
  margin-top: -3px; }

.oh-select:disabled + .select2-container,
.oh-select:disabled + .select2-container .select2-selection__rendered {
  padding-left: 0px !important;
  padding-right: 0px !important; }

.oh-select:disabled + .select2-container .select2-selection {
  background-color: transparent !important;
  border: none !important; }

.oh-select:disabled + .select2-container .select2-selection .select2-selection__arrow {
  display: none !important; }

.oh-select-no-search + .select2-container .select2-selection--single {
  height: unset;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important; }

.select2-container--default .select2-selection--single {
  border-radius: 0px !important;
  border-color: #e5e7eb !important; }

.oh-select-no-search + .select2-container .select2-selection--single {
  height: 48.84px; }

.oh-select--sm + .select2-container .select2-selection--single {
  height: 38px !important; }

.oh-select-no-search + .select2-container,
.select2-container--default .select2-selection--multiple {
  border-color: #e5e7eb !important; }

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  border-radius: 0px !important;
  display: flex;
  align-items: center;
  flex-direction: row-reverse; }

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 4px;
  margin-right: 0; }

.oh-select-2--large + .select2-container .select2-selection--multiple {
  height: 48.84px; }

.oh-switch {
  display: flex;
  align-items: center; }

.oh-switch .oh-switch__checkbox {
  appearance: none;
  background-color: #dfe1e4;
  border-radius: 72px;
  border-style: none;
  flex-shrink: 0;
  height: 20px;
  margin: 0;
  position: relative;
  width: 30px;
  display: inline-block;
  cursor: pointer; }

.oh-switch .oh-switch__checkbox::before {
  bottom: -6px;
  content: "";
  left: -6px;
  position: absolute;
  right: -6px;
  top: -6px; }

.oh-switch .oh-switch__checkbox,
.oh-switch .oh-switch__checkbox::after {
  transition: all 100ms ease-out; }

.oh-switch .oh-switch__checkbox::after {
  background-color: #fff;
  border-radius: 50%;
  content: "";
  height: 14px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 14px; }

.oh-switch input[type="checkbox"] {
  cursor: default; }

.oh-switch .oh-switch__checkbox:hover {
  background-color: #c9cbcd;
  transition-duration: 0s; }

.oh-switch .oh-switch__checkbox:checked {
  background-color: #6c3baa; }

.oh-switch .oh-switch__checkbox:checked::after {
  background-color: #fff;
  left: 13px; }

.oh-switch :focus:not(.focus-visible) {
  outline: 0; }

.oh-switch .oh-switch__checkbox:checked:hover {
  background-color: #6c3baa; }

.oh-password-input-container {
  position: relative; }

.oh-password-input--toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  height: 100%;
  font-size: 1.25rem; }

.oh-questions {
  padding-left: 0;
  list-style-type: none; }

.oh-radio {
  display: block;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.oh-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  left: 0;
  top: 9px;
  z-index: 5; }

.oh-radio__checkmark {
  position: absolute;
  top: 9px;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #eee;
  border-radius: 50%;
  z-index: initial; }

.oh-radio:hover input ~ .oh-radio__checkmark {
  background-color: #f3f4f6; }

.oh-radio input:checked ~ .oh-radio__checkmark {
  background-color: #6c3baa; }

.oh-radio__checkmark:after {
  content: "";
  position: absolute;
  display: none; }

.oh-radio input:checked ~ .oh-radio__checkmark:after {
  display: block; }

.oh-radio .oh-radio__checkmark:after {
  top: 4.5px;
  left: 4.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white; }

.oh-radio .oh-label {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  cursor: pointer; }

.oh-rate {
  display: inline-block;
  height: 36px;
  padding: 0; }

.oh-rate:not(:checked) > input {
  position: absolute;
  top: -9999px; }

.oh-rate:not(:checked) > label {
  float: right;
  width: 1.15em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 1.25rem;
  color: #ccc; }

.oh-rate:not(:checked) > label:before {
  content: "★ "; }

.oh-rate > input:checked ~ label {
  color: #ffc700; }

.oh-rate:not(:checked) > label:hover,
.oh-rate:not(:checked) > label:hover ~ label {
  color: #deb217; }

.oh-rate > input:checked + label:hover,
.oh-rate > input:checked + label:hover ~ label,
.oh-rate > input:checked ~ label:hover,
.oh-rate > input:checked ~ label:hover ~ label,
.oh-rate > label:hover ~ input:checked ~ label {
  color: #c59b08; }

.oh-profile-photo {
  font-size: 2rem;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 1px dashed #1f2937;
  border-radius: 50%;
  margin-bottom: 0.75rem;
  background: rgba(243, 244, 246, 0.2);
  cursor: pointer; }
  .oh-profile-photo:hover {
    background: rgba(243, 244, 246, 0.4); }

.oh-profile-photo__input {
  display: none; }

.oh-input {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #2d3748 !important;
  transition: all 0.3s ease !important; }
  .oh-input::placeholder {
    color: #a0aec0 !important; }
  .oh-input:focus, .oh-input:focus-visible {
    outline: none !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
    background: white !important; }

.oh-input--gradient-border {
  position: relative;
  background: #f8f9fa;
  border: none;
  padding: 0.8rem 1.25rem; }
  .oh-input--gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #6c3baa, #c8b1e4);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; }
  .oh-input--gradient-border:focus::before {
    padding: 2px; }

.oh-select {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #2d3748 !important; }

.select2-container--default {
  font-family: "DM Sans", sans-serif !important; }
  .select2-container--default .select2-selection--single {
    background: white !important;
    border-color: #e2e8f0 !important;
    color: #2d3748 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    font-family: "DM Sans", sans-serif !important; }
    .select2-container--default .select2-selection--single:focus {
      border-color: #f59e0b !important;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important; }

.select2-dropdown {
  font-family: "DM Sans", sans-serif !important;
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; }

.select2-results__options {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important; }

.select2-results__option {
  font-family: "DM Sans", sans-serif !important;
  color: #2d3748 !important;
  transition: all 0.2s ease !important; }
  .select2-results__option--highlighted {
    background: transparent !important;
    color: #6c3baa !important; }
  .select2-results__option--selected {
    background: transparent !important;
    color: #6c3baa !important; }

.select2-selection__rendered {
  font-family: "DM Sans", sans-serif !important; }

.select2-search__field {
  font-family: "DM Sans", sans-serif !important; }

.oh-switch .oh-switch__checkbox:checked {
  background-color: #6c3baa !important; }
  .oh-switch .oh-switch__checkbox:checked:hover {
    background-color: #6c3baa !important; }

.oh-radio input:checked ~ .oh-radio__checkmark {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important; }

.oh-input--file {
  background: white !important;
  border: 2px dashed #e2e8f0 !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important; }
  .oh-input--file:hover {
    border-color: #f59e0b !important;
    background: rgba(102, 126, 234, 0.05) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1) !important; }

input[type="file"].form-control,
input[type="file"].oh-input {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  cursor: pointer !important; }

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  cursor: pointer !important;
  background-color: #f7f7f5 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  margin-right: 12px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important; }
  input[type="file"]::file-selector-button:hover,
  input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #e2e8f0 !important; }

.oh-label {
  color: #4a5568 !important;
  font-weight: 600 !important; }

.bulkStageChange {
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  max-width: 200px !important; }
  .bulkStageChange option {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important; }

.oh-input-group .oh-input-group__icon {
  color: #718096 !important; }

.form-control {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #2d3748 !important;
  transition: all 0.3s ease !important; }
  .form-control::placeholder {
    color: #a0aec0 !important; }
  .form-control:focus {
    outline: none !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
    background: white !important; }

.form-control textarea,
textarea.form-control {
  min-height: 100px !important; }

.form-select {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #2d3748 !important;
  transition: all 0.3s ease !important; }
  .form-select:focus {
    outline: none !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important; }

.form-check-input {
  border-color: #e2e8f0 !important; }
  .form-check-input:checked {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important; }
  .form-check-input:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important; }

input[type="time"] {
  cursor: pointer !important;
  position: relative !important; }
  input[type="time"]::after {
    content: "" !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
    z-index: 2 !important; }

input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer !important;
  opacity: 0 !important;
  z-index: 1 !important; }

input[type="time"]::-moz-calendar-picker-indicator {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer !important;
  opacity: 0 !important;
  z-index: 1 !important; }

.doc-request-employee-select + .select2-container .select2-selection--multiple {
  min-height: 45px !important;
  border-radius: 8px !important;
  padding: 0 15px !important;
  display: flex !important;
  align-items: center !important; }

.doc-request-employee-select + .select2-container .select2-selection--multiple .select2-selection__rendered {
  padding: 0 !important; }

.doc-request-employee-select + .select2-container .select2-search--inline .select2-search__field {
  margin-top: 0 !important; }

.doc-request-employee-select + .select2-container .select2-selection--multiple .select2-selection__choice {
  margin-top: 0 !important; }

.custom-scroll {
  overflow-x: scroll; }

.custom-scroll::-webkit-scrollbar {
  background-color: #cacaca;
  height: 4px;
  border-radius: 6px; }

.custom-scroll::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px; }

.select2-container--default .select2-selection--single .select2-selection__rendered {
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  gap: 5px !important; }

.select2-container--default .select2-selection--single .select2-selection__clear {
  float: none !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  top: auto !important;
  order: unset !important;
  margin-left: 4px !important;
  margin-top: 2px !important; }

.oh-table {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  border-collapse: collapse;
  border: 1px solid #f2f2f2;
  background-color: #ffffff; }
  @media (max-width: 991.98px) {
    .oh-table {
      display: block;
      max-width: 100vw;
      overflow-x: auto; } }
.oh-table thead tr th {
  padding: 1.25rem 0.65rem;
  text-align: left;
  border-bottom: 3px solid #f2f2f2;
  color: #5e5e5e;
  font-size: 16px;
  font-weight: 800; }

.oh-table tbody tr td {
  padding: 1.25rem 0.65rem;
  border-bottom: 1px solid #f2f2f2; }

.oh-table tbody tr:hover {
  background-color: whitesmoke;
  cursor: pointer; }

.oh-table tbody {
  max-height: 400px;
  overflow-y: auto; }

/* ====================================
*        Sticky Table
* ================================== */
.oh-sticky-table {
  max-height: 75vh;
  overflow: auto;
  margin: auto;
  max-width: 100%;
  border: 1px solid #f3f4f6;
  position: relative; }

.oh-sticky-table--no-highlight .oh-sticky-table__tr:hover {
  background-color: transparent; }

.oh-sticky-table--no-overflow {
  overflow-x: auto;
  overflow-y: visible; }

.oh-sticky-table__table {
  display: table;
  position: relative;
  width: 100%;
  table-layout: fixed; }

.oh-sticky-table__tr {
  display: table-row; }
  .oh-sticky-table__tr.grid {
    display: grid; }
  .oh-sticky-table__tr:hover {
    background-color: whitesmoke;
    cursor: pointer; }

.oh-sticky-table__sd {
  background-color: #ffffff;
  z-index: 10 !important;
  width: 240px; }

.oh-sticky-table__th:first-child {
  z-index: 11 !important; }

.oh-sticky-table__th {
  z-index: 10;
  background-color: #ffffff;
  padding: 0.5rem 1rem !important; }

.oh-sticky-table__thead {
  display: table-header-group;
  font-weight: bold;
  z-index: 1; }

.oh-sticky-table__tbody {
  display: table-row-group;
  height: 60px; }

.oh-sticky-table__tbody--highlight {
  height: 60px;
  width: 100vw;
  background-color: #f6fdfd;
  border: 1px dashed #22a8b4;
  border-left: none;
  border-right: 0; }

.oh-sticky-table__th,
.oh-sticky-table__sd {
  position: sticky;
  background: #ffffff;
  color: #1f2937; }

.oh-sticky-table__th {
  top: 0;
  border-bottom: 2px solid #f3f4f6; }

.oh-sticky-table__sd {
  left: 0;
  border-right: 1px solid #f3f4f6; }
  @media (max-width: 575.98px) {
    .oh-sticky-table__sd {
      position: relative; } }
.oh-sticky-table__sd,
.oh-sticky-table__td,
.oh-sticky-table__th {
  padding: 0.6rem; }

.oh-sticky-table--fit .oh-sticky-table__sd,
.oh-sticky-table--fit .oh-sticky-table__td,
.oh-sticky-table--fit .oh-sticky-table__th {
  padding: 0.6rem;
  width: fit-content; }

.oh-sticky-table__thead div.oh-sticky-table__th:first-child,
.oh-sticky-table__tfoot div.oh-sticky-table__th:first-child {
  left: 0;
  z-index: 1;
  border-right: 1px solid #f3f4f6; }
  @media (max-width: 575.98px) {
    .oh-sticky-table__thead div.oh-sticky-table__th:first-child,
    .oh-sticky-table__tfoot div.oh-sticky-table__th:first-child {
      position: relative; } }
.oh-sticky-table__sr {
  position: sticky;
  right: 0;
  background-color: #ffffff;
  z-index: 9 !important;
  padding: 1rem;
  border-bottom: 1px solid #f3f4f6;
  border-left: 1px solid #f3f4f6;
  display: table-cell; }

.oh-sticky-table__th--sticky {
  right: 0;
  position: sticky;
  border-left: 1px solid #f3f4f6; }

.oh-sticky-table__th--right {
  right: 0;
  border-left: 1px solid #f3f4f6; }

.oh-sticky-table__button-container {
  display: flex;
  align-items: center; }

.oh-sticky-table__button-container > * {
  flex-shrink: 0; }

/* ========================================
*            EDITABLE INPUT
* ====================================== */
.oh-table__editable-input:read-only {
  color: #1f2937;
  background-color: transparent;
  border: none;
  height: 100%;
  border: 1px solid transparent; }
  .oh-table__editable-input:read-only:hover {
    border: 1px solid #e5e7eb; }
  .oh-table__editable-input:read-only:focus, .oh-table__editable-input:read-only:focus-visible {
    outline: none;
    border: none; }

.oh-table__editable-input {
  border-radius: 0px;
  border: 1px solid #5a67d8; }
  .oh-table__editable-input:focus, .oh-table__editable-input:focus-visible {
    outline: #5a67d8 solid 2px;
    border-radius: 0px;
    border: none; }

.oh-table__add-column {
  min-height: 55px; }

.oh-table__add-row {
  position: sticky;
  left: 0; }

.oh-table__add-row-dropdown {
  bottom: 0;
  transform: translateX(50%); }
  @media (max-width: 575.98px) {
    .oh-table__add-row-dropdown {
      transform: translateX(0); } }
.oh-table-config__close-tr,
.oh-table-config__close-th {
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  position: absolute;
  right: 3px;
  top: 3px;
  display: none; }

.oh-table-config__tr:not(:only-child):hover .oh-table-config__close-tr {
  display: flex; }

.oh-table-config__th:not(:only-child):hover .oh-table-config__close-th {
  display: flex; }

:is(.oh-table-config__th:nth-last-child(2)):is(.oh-table-config__th:nth-child(2)) .oh-table-config__close-th {
  display: none !important; }

/* ========================================
*          COLLAPSABLE TABLE
* ====================================== */
.oh-table__toggle-button {
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center; }
  .oh-table__toggle-button:after {
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMxZjFmMWYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTkgMTNoLTZ2NmgtMnYtNkg1di0yaDZWNWgydjZoNnYyWiI+PC9wYXRoPgo8L3N2Zz4=");
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: contain; }

.oh-table__toggle-button.oh-table__toggle-button--show:after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMxZjFmMWYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNiAxMWgxMnYySDZ2LTJaIj48L3BhdGg+Cjwvc3ZnPg==");
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: contain; }

.oh-table__toggle-child {
  display: none; }

.oh-table__toggle-child.oh-table__toggle-child--show {
  display: table-row; }

/* ========================================
*          TABLE CONTROLS
* ====================================== */
.oh-table-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem; }

/*..............Table sticky dropdown...................*/
.oh-sticky-dropdown_btn {
  font-weight: bold;
  background: #ffffff;
  color: #1f2937;
  border: transparent;
  width: 100%;
  padding: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center; }

.oh-sticky-table_dropdown {
  right: 0;
  width: max-content; }

.oh-sticy-dropdown-item {
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem; }

.oh-table__checkbox {
  display: flex;
  align-items: baseline;
  justify-content: center; }

.oh-dropdown_btn-header {
  display: flex;
  align-items: center;
  margin: 0.8rem 0;
  gap: 0.4rem; }

.oh-sticky-dropdown--header {
  position: absolute;
  z-index: 11;
  right: 0px;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0px;
  border-top: 1px solid #f3f4f6; }

.oh-table_sticky--wrapper {
  position: relative; }

.oh-main__more-option-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.3rem;
  border: 1px solid #e5e7eb; }
  @media (max-width: 1000px) {
    .oh-main__more-option-toggle {
      display: flex; } }
.oh-main_mob-toggler {
  display: flex;
  align-items: center;
  gap: 0.4rem; }

.oh-titebar-button_mob--container {
  position: relative; }
  @media (max-width: 1000px) {
    .oh-titebar-button_mob--container {
      position: absolute;
      min-width: 300px;
      right: 10px;
      padding: 15px;
      background: white;
      z-index: 99;
      right: 16px;
      top: 160px;
      border-radius: 0rem;
      flex-direction: column; }
      .oh-titebar-button_mob--container button {
        width: 100%; }
      .oh-titebar-button_mob--container .oh-btn-group {
        width: 100%; }
      .oh-titebar-button_mob--container .oh-dropdown {
        width: 100%; } }
@media (max-width: 1000px) {
  .oh-main__titlebar .oh-main__titlebar-button-container {
    display: none; } }

.oh-main__titlebar .show {
  display: flex; }

@media (max-width: 1000px) {
  .oh-main__titlebar-button-container > :first-child {
    margin-left: 0px; } }

.oh-sticky-table__td,
.oh-sticky-table__th,
.oh-sticky-table__sd {
  display: table-cell;
  padding: 8px 10px;
  border-bottom: 0.2px solid #f3f4f6;
  border-right: 0.2px solid #fff;
  vertical-align: middle;
  width: 160px;
  word-break: break-word;
  font-size: 16px;
  font-weight: 400; }

.oh-hover-btn {
  border: 2px solid #1c1c1c;
  background-color: transparent;
  border-radius: 3px;
  padding: 0.15rem 0.4rem; }

.oh-hover-btn:hover {
  background-color: #e9edf1; }

.oh-hover-btn-container {
  position: relative;
  display: inline-block; }

.oh-hover-btn-container:before {
  content: "";
  display: block;
  background-color: transparent;
  position: absolute;
  width: 100%;
  height: 20px;
  bottom: 100%; }

.oh-hover-btn__small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #e9edf1;
  -webkit-box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear; }

.oh-hover-btn__small:hover {
  background-color: #e54f38;
  border: 1px solid #cd4632;
  color: white;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transform: scale(105%);
  transform: scale(105%); }

.oh-hover-btn-drawer {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
  z-index: 99;
  right: -20px;
  bottom: 130%;
  visibility: hidden;
  pointer-events: none;
  opacity: 0; }

.oh-hover-btn-container:hover .oh-hover-btn-drawer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  visibility: visible;
  pointer-events: all;
  opacity: 1; }

.table-wrapper {
  position: relative;
  overflow: scroll;
  max-height: 250px;
  border: 1px solid #e9edf1; }

.fixed-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; }

.fixed-table th,
.fixed-table td {
  padding: 8px 10px;
  display: table-cell;
  height: 10px;
  line-height: 10px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 0.2px solid #e9edf1;
  border-right: 0.2px solid #fff;
  vertical-align: middle;
  width: 160px;
  /* word-break: break-word; */ }

.fixed-table td {
  font-size: 16px;
  font-weight: 400;
  height: 45px;
  color: #1c1c1c;
  display: table-cell;
  /* padding: 8px 10px; */
  border-bottom: 0.2px solid #e9edf1;
  border-right: 0.2px solid #fff;
  vertical-align: middle;
  width: 160px;
  /* word-break: break-word; */ }

.lastTd {
  background-color: white !important; }

.fixed-table th:nth-child(2),
.fixed-table td:nth-child(2) {
  position: sticky;
  left: 30px;
  background-color: #f1f1f1;
  z-index: 2;
  width: 100px !important;
  background-color: #ffffff !important;
  border-right: 1px solid #e9edf1 !important; }

.fixed-table th:first-child,
.fixed-table td:first-child {
  position: sticky;
  left: 0;
  background-color: #f1f1f1;
  z-index: 2;
  width: 30px !important;
  background-color: #ffffff !important;
  border-right: 1px solid #e9edf1 !important;
  /* To be on top of scrollable area */ }

.fixed-table tbody tr:hover td:first-child,
.fixed-table tbody tr:hover td:nth-child(2),
.fixed-table tbody tr:hover td:nth-child(3),
.fixed-table tbody tr:hover .stickyleft,
.fixed-table tbody tr:hover .stickyleft-second {
  background-color: #f0ebf7 !important; }

.fixed-table thead tr {
  position: sticky;
  top: 0;
  z-index: 3;
  overflow: scroll; }

.fixed-table thead th {
  border: transparent !important;
  border-bottom: 2px solid #e9edf1 !important;
  background-color: #fff;
  height: 30px !important;
  font-size: 12px;
  color: #1c1c1c; }

.table-wrapper {
  position: relative;
  overflow: scroll;
  max-height: 500px;
  border: 1px solid #e9edf1; }

.fixed-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; }

.fixed-table th,
.fixed-table td {
  padding: 8px 10px;
  display: table-cell;
  height: 10px;
  line-height: 10px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 0.2px solid #e9edf1;
  border-right: 0.2px solid #fff;
  vertical-align: middle;
  width: 160px;
  word-break: break-word; }

.fixed-table td {
  font-size: 16px;
  font-weight: 400;
  height: 45px;
  color: #1c1c1c;
  display: table-cell;
  /* padding: 8px 10px; */
  border-bottom: 0.2px solid #e9edf1;
  border-right: 0.2px solid #fff;
  vertical-align: middle;
  width: 160px;
  /* word-break: break-word; */ }

.lastTd {
  background-color: white !important; }

.fixed-table th:nth-child(2),
.fixed-table td:nth-child(2) {
  position: sticky;
  left: 30px;
  background-color: #f1f1f1;
  z-index: 2;
  width: 100px !important;
  background-color: #ffffff !important;
  border-right: 1px solid #e9edf1 !important; }
  @media (max-width: 768px) {
    .fixed-table th:nth-child(2),
    .fixed-table td:nth-child(2) {
      position: unset; } }
.fixed-table th:first-child,
.fixed-table td:first-child {
  position: sticky;
  left: 0;
  background-color: #f1f1f1;
  z-index: 2;
  width: 30px !important;
  background-color: #ffffff !important;
  border-right: 1px solid #e9edf1 !important;
  /* To be on top of scrollable area */ }

.fixed-table thead tr {
  position: sticky;
  top: 0;
  z-index: 3;
  overflow: scroll; }

.fixed-table thead th {
  /* border-bottom: 2px solid hsl(213, 22%, 93%) !important; */
  background-color: #fff;
  height: 30px !important;
  font-size: 12px;
  color: #1c1c1c; }

.add_c ul {
  display: flex;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0px;
  justify-content: space-between; }
  .add_c ul li {
    padding: 5px 5px;
    flex-grow: 1; }
    .add_c ul li a {
      border: 1px solid #e9edf1;
      padding: 3px 3px;
      display: block;
      word-break: auto-phrase; }

.table-wrapper {
  scrollbar-width: thin;
  scrollbar-color: lightgrey #f1f1f1; }

.table-wrapper::-webkit-scrollbar {
  width: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  scrollbar-width: thin;
  display: none !important; }

.table-wrapper:hover {
  scrollbar-color: lightgrey;
  transition: opacity 0.3s ease; }

@keyframes shimmer {
  0% {
    background-position: -100% 0; }
  100% {
    background-position: 100% 0; } }

.oh-table.is-loading tbody tr td,
.oh-table.is-loading thead tr th {
  position: relative; }
  .oh-table.is-loading tbody tr td::before,
  .oh-table.is-loading thead tr th::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 36%;
    border-radius: 6px;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999;
    margin-left: 5px;
    margin-right: 5px; }

.fixed-table.is-loading tbody tr td,
.fixed-table.is-loading thead tr th {
  position: relative; }
  .fixed-table.is-loading tbody tr td::before,
  .fixed-table.is-loading thead tr th::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 36%;
    border-radius: 6px;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999;
    margin-left: 5px;
    margin-right: 5px; }

.oh-kanban-card.is-loading .oh-kanban-card__profile-container {
  position: relative; }
  .oh-kanban-card.is-loading .oh-kanban-card__profile-container::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 36%;
    z-index: 10;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-kanban-card.is-loading .oh-kanban-card__title,
.oh-kanban-card.is-loading .oh-kanban-card__subtitle {
  position: relative; }
  .oh-kanban-card.is-loading .oh-kanban-card__title::before,
  .oh-kanban-card.is-loading .oh-kanban-card__subtitle::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 90%;
    z-index: 10;
    border-radius: 4px;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-modal.is-loading .oh-profile__avatar {
  position: relative; }
  .oh-modal.is-loading .oh-profile__avatar::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 64px;
    z-index: 10;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-modal.is-loading .oh-timeoff-modal__user {
  position: relative; }
  .oh-modal.is-loading .oh-timeoff-modal__user::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 90%;
    z-index: 10;
    border-radius: 4px;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-modal.is-loading .oh-timeoff-modal__stat-title {
  position: relative; }
  .oh-modal.is-loading .oh-timeoff-modal__stat-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 90%;
    z-index: 10;
    border-radius: 4px;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-modal.is-loading .oh-timeoff-modal__stat-count {
  position: relative; }
  .oh-modal.is-loading .oh-timeoff-modal__stat-count::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 90%;
    z-index: 10;
    border-radius: 4px;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-modal.is-loading .oh-modal__dialog-footer .oh-btn {
  position: relative; }
  .oh-modal.is-loading .oh-modal__dialog-footer .oh-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 100%;
    z-index: 10;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-card.is-loading .oh-profile__avatar {
  position: relative; }
  .oh-card.is-loading .oh-profile__avatar::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 64px;
    z-index: 10;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-card.is-loading .oh-timeoff-modal__user {
  position: relative; }
  .oh-card.is-loading .oh-timeoff-modal__user::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 90%;
    z-index: 10;
    border-radius: 4px;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-card.is-loading .oh-timeoff-modal__stat-title {
  position: relative; }
  .oh-card.is-loading .oh-timeoff-modal__stat-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 90%;
    z-index: 10;
    border-radius: 4px;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-card.is-loading .oh-timeoff-modal__stat-count {
  position: relative; }
  .oh-card.is-loading .oh-timeoff-modal__stat-count::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 90%;
    z-index: 10;
    border-radius: 4px;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-card.is-loading .oh-modal__dialog-footer .oh-btn {
  position: relative; }
  .oh-card.is-loading .oh-modal__dialog-footer .oh-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 100%;
    z-index: 10;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-modal__dialog-footer .is-loading .oh-btn {
  position: relative; }
  .oh-modal__dialog-footer .is-loading .oh-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: -webkit-fill-available;
    height: 100%;
    z-index: 10;
    background: linear-gradient(110deg, #e0e0e0 8%, #f0f0f0 18%, #e0e0e0 33%);
    background-size: 200%;
    animation: shimmer 1.2s infinite;
    z-index: 999; }

.oh-timesheet-table {
  border: 1px solid #e9edf1; }
  .oh-timesheet-table thead tr th {
    font-weight: bold; }
  .oh-timesheet-table th,
  .oh-timesheet-table td {
    padding: 10px;
    text-align: left; }
  .oh-timesheet-table tr:hover {
    cursor: pointer; }
  .oh-timesheet-table .hidden-row {
    display: none; }
  .oh-timesheet-table .caret {
    transition: transform 0.3s ease;
    cursor: pointer; }
  .oh-timesheet-table .rotate {
    transform: rotate(90deg); }
  .oh-timesheet-table .caret {
    transition: transform 0.3s ease; }

.oh-timesheet .oh-table tr th,
.oh-timesheet .oh-table tr td {
  padding: 0.6rem; }

.oh-timesheet .oh-table tr th {
  color: #1c1c1c; }

.oh-timesheet .accordion-header {
  position: relative;
  align-items: center;
  display: flex;
  justify-content: space-between;
  border: 1px solid #e9edf1;
  background-color: white;
  padding: 0.5rem 0.5rem 0.5rem 2.5rem;
  cursor: pointer; }
  .oh-timesheet .accordion-header span {
    padding: 0.4rem 0;
    font-weight: bold; }

.oh-timesheet .accordion .accordion-body {
  padding-left: 1.5rem; }

.oh-timesheet .accordion .accordion-header::before {
  content: "\25B6";
  background-position: center;
  background-repeat: no-repeat;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cd4632;
  object-fit: contain;
  position: absolute;
  left: 8px; }

.oh-timesheet .accordion .accordion-header.active::before {
  content: "\25BC"; }

.oh-timesheet .table {
  width: 100%;
  border-collapse: collapse; }

.oh-timesheet .table th,
.oh-timesheet .table td {
  border: 1px solid #ddd;
  padding: 0.6rem;
  text-align: left; }

.oh-timesheet .accordion-header:hover {
  background-color: rgba(233, 237, 241, 0.4); }

.oh-timesheet .accordion-body {
  display: none; }

.oh-timesheet .accordion-body {
  border: 1px solid #e9edf1;
  border-top: none;
  padding: 0.5rem;
  background-color: white; }

.oh-hover-btn-table-drawer {
  position: absolute;
  top: 30px !important; }

#pivot-container {
  border: 1px solid #ddd; }
  #pivot-container .pvtUiCell {
    background-color: #fff; }
    #pivot-container .pvtUiCell .pvtRenderer,
    #pivot-container .pvtUiCell .pvtAggregator {
      border: transparent; }

.pvtRenderer {
  background-color: transparent !important; }
  .pvtRenderer :focus {
    border: none !important;
    outline: none !important; }
  .pvtRenderer :focus {
    border: none !important;
    outline: none !important; }

#pivot-container .pvtColLabel,
#pivot-container .pvtRowLabel {
  font-weight: 500 !important; }

#pivot-container .pvtTable tbody tr th,
#pivot-container .pvtTable thead tr th {
  background-color: #fff !important;
  border: 1px solid #e9edf1 !important; }

.pvtAxisContainer li {
  display: flex; }

.pvtAxisContainer li span.pvtAttr {
  border-radius: 0 !important;
  flex: 1 1 auto;
  background-color: #f9f9f9 !important;
  position: relative; }
  .pvtAxisContainer li span.pvtAttr .pvtTriangle {
    position: absolute;
    right: 8px; }

.pvtHorizList .ui-sortable-handle .pvtAttr {
  padding: 2px 26px 2px 8px !important; }

.pvtAxisContainer,
.pvtVals {
  border: 1px solid #e9edf1 !important; }

.pvtRendererArea {
  padding: 0 !important; }

#pivot-container {
  width: 100%;
  overflow-x: auto; }
  #pivot-container .pvtTable {
    min-width: 1200px;
    width: 100%;
    min-width: unset;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    background-color: #ffffff;
    table-layout: auto; }

.pvtUi {
  width: 100% !important; }

#pivot-container .pvtUiCell .pvtAggregator,
#pivot-container .pvtUiCell .pvtRenderer {
  background-color: transparent !important; }

.pvtAttrDropdown {
  border: 1px solid #eaeaea !important; }

.pvtSearch {
  border: 1px solid #cdd5df !important;
  border-radius: 0rem !important;
  padding: 0.8rem 1.25rem !important;
  color: #1c1c1c !important;
  margin-bottom: 4px !important; }

.pvtFilterBox {
  padding: 16px;
  width: auto !important;
  border: 1px solid #e9edf1 !important; }
  .pvtFilterBox h4, .pvtFilterBox .h4 {
    font-weight: bold;
    font-size: 0.9rem;
    text-align: left;
    margin-left: 0 !important;
    margin-top: 0 !important; }
  .pvtFilterBox p {
    margin-bottom: 0 !important;
    display: flex;
    gap: 8px; }
    .pvtFilterBox p :nth-child(1) {
      width: 100%;
      border-radius: 0 !important;
      background-color: #e54f38;
      color: white;
      text-decoration: none;
      font-size: 0.9rem;
      padding: 0.65rem 1rem;
      border: none; }
    .pvtFilterBox p :nth-child(2) {
      width: 100%;
      border-radius: 0 !important;
      background-color: #f0f0f0;
      color: #292929;
      text-decoration: none;
      font-size: 0.9rem;
      padding: 0.65rem 1rem;
      border: none; }
    .pvtFilterBox p input {
      background-color: transparent !important; }
    .pvtFilterBox p button {
      border: none !important;
      margin-bottom: 4px; }
  .pvtFilterBox .pvtCheckContainer p :nth-child(1) {
    background-color: unset !important;
    width: auto;
    padding: 0.5rem 0 !important; }
  .pvtFilterBox .pvtCheckContainer p :nth-child(2) {
    background-color: transparent !important;
    width: auto; }

#pivot-container .pvtTable td {
  border: 1px solid #e9edf1 !important; }

#pivot-container .pvtTable tr:nth-child(2n) td {
  background-color: #fff !important;
  border: 1px solid #e9edf1 !important; }

#pivot-container .pvtTable th {
  background-color: #007bff;
  padding: 12px;
  border: 1px solid #ccc;
  font-size: 18px; }

#pivot-container .pvtTable td {
  padding: 12px;
  border: 1px solid #ccc;
  font-size: 16px;
  background-color: #fdfdfd;
  color: #333; }

#pivot-container .pvtTable tr:nth-child(even) td {
  background-color: #f2f2f2; }

#pivot-container .pvtRowLabel,
#pivot-container .pvtColLabel {
  background-color: #e9ecef;
  font-weight: bold;
  font-size: 16px; }

#pivot-container .pvtTotalLabel {
  background-color: #6c757d;
  font-weight: bold;
  font-size: 16px; }

#pivot-container .pvtGrandTotal {
  background-color: #343a40;
  font-weight: bold;
  font-size: 16px;
  color: #fff; }

#pivot-container .pvtTable tbody tr th,
#pivot-container .pvtTable thead tr th {
  background-color: #e6eeee;
  border: 2px solid #cdcdcd;
  font-size: 10pt;
  padding: 8px; }

.js-plotly-plot .plotlyjsicon {
  display: none !important; }

.oh-table {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; }
  .oh-table thead tr th {
    background: #2d3748 !important;
    color: white !important;
    border-bottom: none !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 1rem 1.5rem !important; }
  .oh-table tbody tr {
    border-bottom: 1px solid #e2e8f0 !important;
    transition: all 0.2s ease !important; }
    .oh-table tbody tr:hover {
      background: rgba(245, 158, 11, 0.05) !important;
      transform: translateX(2px) !important; }
    .oh-table tbody tr:last-child {
      border-bottom: none !important; }
    .oh-table tbody tr td {
      color: #2d3748 !important;
      padding: 1rem 1.5rem !important;
      font-size: 0.875rem !important; }

.oh-sticky-table {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; }
  .oh-sticky-table__th {
    background: #2d3748 !important;
    color: white !important;
    border-bottom: none !important;
    font-weight: 800 !important;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px; }
  .oh-sticky-table__sd {
    background: #ffffff;
    border-right: 1px solid #e5e7eb; }
  .oh-sticky-table__tr:hover {
    background: #f9fafb; }

.fixed-table th {
  background: linear-gradient(180deg, rgba(108, 59, 170, 0.05) 0%, transparent 100%);
  color: #1f2937;
  border-bottom: 2px solid #e5e7eb; }

.fixed-table td {
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb; }

.table-wrapper {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }

.oh-hover-btn__small {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
  .oh-hover-btn__small:hover {
    background: linear-gradient(135deg, #6c3baa 0%, #c8b1e4 100%);
    border-color: #6c3baa;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(108, 59, 170, 0.25); }

.oh-hover-btn-drawer {
  background: white;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

.oh-sticky-table .oh-sticky-table__th,
.oh-sticky-table__th {
  background: #2d3748 !important;
  color: white !important; }

.oh-table thead tr th,
thead tr th {
  background: #2d3748 !important;
  color: white !important; }

.oh-tabs__tab.oh-tabs__tab--active,
.oh-tabs__tab--active {
  color: #f59e0b !important;
  border-bottom-color: #f59e0b !important; }

.oh-table-config__tr--head .oh-sticky-table__th,
.oh-table-config__tr--head .oh-table-config__th,
.oh-sticky-table__tr--head .oh-sticky-table__th,
.oh-sticky-table__tr--head .oh-table-config__th {
  background: #2d3748 !important;
  color: white !important; }

.arrow-up::before {
  content: "\21D1";
  font-size: 15px;
  display: inline-block;
  margin-right: 6px;
  color: #6c3baa; }

.arrow-down::before {
  content: "\21D3";
  font-size: 15px;
  display: inline-block;
  margin-right: 6px;
  color: #6c3baa; }

.arrow-up-down::before {
  content: "\2191\2193";
  font-size: 15px;
  display: inline-block;
  margin-right: 6px;
  letter-spacing: 1px;
  color: #6c3baa; }

.border-r {
  border-right-style: solid !important;
  border-right-width: 2px !important; }

.border-slate-200 {
  border-right-color: #cbd5e1 !important; }

.oh-table .border-r.border-slate-200,
.oh-sticky-table .border-r.border-slate-200 {
  border-right: 2px solid #cbd5e1 !important; }

.highlight-selected {
  background-color: rgba(200, 177, 228, 0.25) !important;
  transition: background-color 0.2s ease; }

.highlight-selected:hover {
  background-color: rgba(200, 177, 228, 0.25) !important; }

.oh-modal {
  position: fixed;
  background-color: rgba(31, 41, 55, 0.2);
  z-index: 100000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: none;
  transition: all 0.4 ease-in-out;
  animation: fade-in-animation 0.2s 0s ease-in-out forwards; }

@keyframes fade-in-animation {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
  @media (max-width: 575.98px) {
    .oh-modal {
      padding-left: 0.7rem;
      padding-right: 0.7rem; } }
.oh-modal--show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.4 ease-in-out;
  background-color: rgba(45, 55, 72, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important; }

.oh-modal .navbar-new-design,
.oh-modal .oh-navbar,
.oh-modal nav {
  display: none !important; }

.oh-modal .time-runner,
.oh-modal .stop-runner,
.oh-modal .at-work-seconds,
.oh-modal .dashboard-time-runner,
.oh-modal .navbar-timer-display,
.oh-modal [class*="timer"],
.oh-modal [class*="clock"] {
  display: none !important; }

.oh-modal__dialog {
  background-color: #ffffff;
  max-width: 650px;
  border-radius: 0rem;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  margin: 1.75rem auto; }

.oh-modal__dialog-header {
  position: relative;
  padding: 1.75rem 1.75rem 0.5rem;
  width: 100%; }

.oh-modal__dialog-body {
  padding: 0 1.75rem 1.75rem 1.75rem; }

.oh-modal__dialog-title {
  font-size: 1.05rem; }

.oh-modal__close {
  border: none;
  background: none;
  font-size: 1.5rem;
  opacity: 0.7;
  position: absolute;
  top: 25px;
  right: 15px;
  cursor: pointer;
  transition: all 0.3s ease-in-out; }
  .oh-modal__close:hover {
    opacity: 1;
    transition: all 0.3s ease-in-out; }

.oh-modal__section-head {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 0.75rem;
  color: #5e5e5e;
  margin-bottom: 0.75rem; }

.oh-modal__dialog-footer {
  padding: 0.25rem 1.75rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px; }

.oh-modal__dialog--timeoff {
  max-width: 350px; }

.oh-modal__label {
  display: block;
  font-size: 0.8rem;
  color: #737373;
  margin-bottom: 0.25rem; }

.oh-modal__value {
  font-size: 1.05rem;
  font-weight: bold; }

.oh-modal__description {
  max-height: 150px;
  overflow-y: auto; }

.oh-modal__dialog--confirm {
  max-width: 350px; }

.oh-modal__dialog--confirm .oh-modal__dialog-title {
  font-weight: bold; }

.oh-modal__dialog--confirm .oh-modal__dialog-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem; }

.oh-modal__dialog--custom {
  max-width: 800px; }
  .oh-modal__dialog--custom .oh-modal__dialog-header {
    display: flex;
    justify-content: space-between; }
  .oh-modal__dialog--custom .oh-modal__close--custom {
    background-color: transparent;
    border: none; }
  .oh-modal__dialog--custom .oh-general__tab .oh-general__tab-link {
    padding: 0;
    transition: 0s; }
  .oh-modal__dialog--custom .oh-general__tab .oh-general__tab-link--active {
    background-color: #e54f38;
    border: 1px solid #e54f38;
    color: #fff;
    padding: 5px 12px;
    border-radius: 23px;
    transition: none; }
  .oh-modal__dialog--custom .oh-inner-sidebar {
    height: 100%; }

.oh-modal__dialog-process {
  max-width: 900px; }
  .oh-modal__dialog-process .oh-modal__dialog-body-process .oh-inner-sidebar {
    padding: 0px 14px 14px 0; }
    .oh-modal__dialog-process .oh-modal__dialog-body-process .oh-inner-sidebar .oh-profile {
      align-items: start; }
    .oh-modal__dialog-process .oh-modal__dialog-body-process .oh-inner-sidebar .oh-card--no-shadow {
      border: 1px solid transparent !important;
      border-bottom: 1px solid #e9edf1 !important;
      margin-bottom: 10px; }
    .oh-modal__dialog-process .oh-modal__dialog-body-process .oh-inner-sidebar .oh-timeoff-modal__profile-info {
      align-items: start; }
      .oh-modal__dialog-process .oh-modal__dialog-body-process .oh-inner-sidebar .oh-timeoff-modal__profile-info .oh-timeoff-modal__user {
        font-size: 16px;
        margin-top: 0; }
  .oh-modal__dialog-process .oh-modal__dialog-body-process .oh-inner-sidebar-content .oh-profile__avatar img {
    width: 90px;
    height: 90px; }
  .oh-modal__dialog-process .oh-modal__dialog-body-process .oh-inner-sidebar-content .oh-profile_info-card {
    border-bottom: 1px solid #e9edf1;
    padding-bottom: 16px; }
    .oh-modal__dialog-process .oh-modal__dialog-body-process .oh-inner-sidebar-content .oh-profile_info-card .oh-profile__info-designation {
      text-align: center; }
  .oh-modal__dialog-process .oh-modal__dialog-body-process .oh-layout--grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)) !important;
    gap: 1%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .oh-modal__dialog-process .oh-modal__dialog-body-process .oh-profile__image {
    width: 36px;
    height: 36px; }
  .oh-modal__dialog-process .oh-modal__dialog-body-process .oh-general__custom-tabs {
    border-bottom: none; }

.oh-kanban-card-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  transition: border-color 0.2s ease-in-out;
  cursor: pointer;
  position: relative; }
  .oh-kanban-card-action__checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none; }
  .oh-kanban-card-action__checkbox-label {
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: all 0.2s ease-in-out; }
    .oh-kanban-card-action__checkbox-label::before {
      content: "";
      width: 10px;
      height: 10px;
      background: transparent;
      border-radius: 12px;
      transition: background 0.2s ease-in-out; }
  .oh-kanban-card-action:has(.oh-kanban-card-action__checkbox:checked) {
    border-color: #ffa89b;
    background: #fff2f0; }
  .oh-kanban-card-action .oh-kanban-card-action__checkbox:checked + .oh-kanban-card-action__checkbox-label::before {
    background: #e54f38;
    border-radius: 12px; }

.oh-layout_horizontal {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 12px;
  margin: 16px 0;
  padding-bottom: 8px; }
  .oh-layout_horizontal .oh-kanban-card {
    background-color: #fff;
    border: 1px solid #cdd5df;
    border-radius: 16px;
    min-width: 200px;
    padding: 0.7rem;
    align-items: start; }
  .oh-layout_horizontal .oh-kanban-card__profile-container {
    width: 42px;
    height: 42px; }

.oh-modal__dialog-process .oh-modal__dialog-body-process .oh-inner-sidebar-content .oh-profile__avatar .oh-table-img {
  width: 30px !important;
  height: 30px !important; }

.oh-modal__dialog {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(245, 158, 11, 0.1) !important;
  position: relative; }
  .oh-modal__dialog::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 1 !important; }

.oh-modal__dialog-header {
  border-bottom: none !important; }

.oh-modal__dialog-title {
  color: #2d3748 !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important; }

.oh-modal__close {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #000000 !important;
  transition: all 0.3s ease !important; }
  .oh-modal__close:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #000000 !important;
    transform: rotate(90deg) !important; }

.oh-modal__dialog-footer {
  border-top: none !important;
  padding-top: 1rem !important;
  margin-top: 1rem !important; }

.oh-modal__dialog--custom {
  background: white !important;
  max-width: 900px !important; }

.oh-modal__dialog-process {
  background: white !important;
  border: 1px solid #e2e8f0 !important; }

.modal-content {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(245, 158, 11, 0.1) !important;
  position: relative !important; }
  .modal-content::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 1 !important; }

.modal-header {
  border-bottom: none !important;
  padding: 1.5rem !important; }
  .modal-header .modal-title {
    color: #2d3748 !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important; }
  .modal-header .btn-close {
    background: rgba(245, 158, 11, 0.1) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    opacity: 1 !important; }
    .modal-header .btn-close:hover {
      background: rgba(245, 158, 11, 0.2) !important;
      transform: rotate(90deg) !important; }

.modal-body {
  padding: 1.5rem !important;
  color: #2d3748 !important; }

.modal-footer {
  border-top: none !important;
  padding: 1.5rem !important; }

.modal-backdrop {
  background-color: rgba(45, 55, 72, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important; }

.oh-modal__dialog--new-design {
  background: #f7f7f5 !important;
  background-color: #f7f7f5 !important;
  border-radius: 30px !important;
  min-width: 800px !important;
  max-width: 900px !important;
  font-family: "DM Sans", sans-serif !important;
  border: none !important;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 20px 50px 0px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; }
  .oh-modal__dialog--new-design::before {
    display: none !important; }
  .oh-modal__dialog--new-design::after {
    display: none !important; }
  .oh-modal__dialog--new-design .oh-modal__dialog-header {
    flex-shrink: 0 !important;
    background-color: #f7f7f5 !important;
    border-bottom: none !important;
    padding: 30px 30px !important;
    border-radius: 30px 30px 0 0 !important; }
    .oh-modal__dialog--new-design .oh-modal__dialog-header .oh-modal__dialog-title {
      font-family: "DM Sans", sans-serif !important;
      font-weight: 700 !important;
      font-size: 20px !important;
      color: #000000 !important;
      margin: 0 !important; }
  .oh-modal__dialog--new-design .oh-modal__dialog-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: #f7f7f5 !important;
    padding: 0px 30px !important;
    font-family: "DM Sans", sans-serif !important;
    font-variation-settings: "opsz" 14 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #000000 !important; }
  .oh-modal__dialog--new-design .oh-modal__dialog-body select.select2-hidden-accessible {
    width: 1px !important;
    max-width: 1px !important; }
  .oh-modal__dialog--new-design .oh-modal__dialog-footer {
    flex-shrink: 0 !important;
    background-color: #f7f7f5 !important;
    border-top: none !important;
    padding: 30px 30px !important;
    border-radius: 0 0 30px 30px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 0px !important; }
  .oh-modal__dialog--new-design .oh-modal__header {
    flex-shrink: 0 !important;
    background-color: #f7f7f5 !important;
    border-bottom: none !important;
    padding: 30px 30px !important;
    border-radius: 30px 30px 0 0 !important; }
    .oh-modal__dialog--new-design .oh-modal__header .oh-modal__title {
      font-family: "DM Sans", sans-serif !important;
      font-weight: 700 !important;
      font-size: 20px !important;
      color: #000000 !important;
      margin: 0 !important; }
  .oh-modal__dialog--new-design .oh-modal__body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    background-color: #f7f7f5 !important;
    padding: 0px 30px !important;
    font-family: "DM Sans", sans-serif !important;
    font-variation-settings: "opsz" 14 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #000000 !important; }
  .oh-modal__dialog--new-design .oh-modal__footer {
    flex-shrink: 0 !important;
    background-color: #f7f7f5 !important;
    border-top: none !important;
    padding: 30px 30px !important;
    border-radius: 0 0 30px 30px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important; }
  .oh-modal__dialog--new-design > [id$="ModalBody"],
  .oh-modal__dialog--new-design > [id$="modalBody"],
  .oh-modal__dialog--new-design > #companyLeaveModalBody,
  .oh-modal__dialog--new-design > #genericModalBody {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: visible !important; }

#genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog {
  background: #f7f7f5 !important;
  background-color: #f7f7f5 !important;
  border-radius: 30px !important;
  max-width: 800px !important;
  font-family: "DM Sans", sans-serif !important; }
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog::before, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog::before, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog::before {
    display: none !important; }
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .oh-modal__dialog-header, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .oh-modal__dialog-header, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .oh-modal__dialog-header {
    background-color: #f7f7f5 !important;
    padding: 30px 30px 20px 30px !important;
    border-radius: 30px 30px 0 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important; }
    #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .oh-modal__dialog-header .oh-modal__dialog-title, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .oh-modal__dialog-header .oh-modal__dialog-title, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .oh-modal__dialog-header .oh-modal__dialog-title {
      font-family: "DM Sans", sans-serif !important;
      font-weight: 700 !important;
      font-size: 20px !important;
      color: #000000 !important; }
    #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .oh-modal__dialog-header .oh-modal__close, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .oh-modal__dialog-header .oh-modal__close, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .oh-modal__dialog-header .oh-modal__close {
      background: transparent !important;
      border: none !important;
      cursor: pointer !important;
      font-size: 24px !important;
      color: #000000 !important;
      opacity: 1 !important;
      position: relative !important;
      top: auto !important;
      right: auto !important;
      width: auto !important;
      height: auto !important; }
      #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .oh-modal__dialog-header .oh-modal__close ion-icon, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .oh-modal__dialog-header .oh-modal__close ion-icon, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .oh-modal__dialog-header .oh-modal__close ion-icon {
        font-size: 24px !important;
        color: #000000 !important; }
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .oh-modal__dialog-body, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .oh-modal__dialog-body, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .oh-modal__dialog-body {
    background-color: #f7f7f5 !important;
    padding: 0px 30px !important;
    font-family: "DM Sans", sans-serif !important;
    border-radius: 25px !important; }
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .oh-modal__dialog-footer, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .oh-modal__dialog-footer, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .oh-modal__dialog-footer {
    background-color: #f7f7f5 !important;
    padding: 20px 30px 30px 30px !important;
    border-radius: 0 0 30px 30px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important; }
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .d-flex.justify-content-end.gap-2.mt-4,
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .d-flex.justify-content-end.gap-2,
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .d-flex.justify-content-end, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .d-flex.justify-content-end.gap-2.mt-4,
  #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .d-flex.justify-content-end.gap-2,
  #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .d-flex.justify-content-end, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .d-flex.justify-content-end.gap-2.mt-4,
  #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .d-flex.justify-content-end.gap-2,
  #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .d-flex.justify-content-end {
    padding-left: 30px !important;
    padding-right: 30px !important;
    padding-bottom: 30px !important;
    padding-top: 0px !important;
    margin-top: 16px !important;
    gap: 12px !important; }
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog button[type="submit"],
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .oh-btn--new-blue, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog button[type="submit"],
  #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .oh-btn--new-blue, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog button[type="submit"],
  #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .oh-btn--new-blue {
    border-radius: 12px !important;
    padding: 12px 24px !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important; }
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .oh-btn--new-ash,
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog button[type="button"], #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .oh-btn--new-ash,
  #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog button[type="button"], #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .oh-btn--new-ash,
  #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog button[type="button"] {
    border-radius: 12px !important;
    padding: 12px 24px !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important; }
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .oh-switch input[type="checkbox"],
  #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog input[type="checkbox"][id*="depreciation"], #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .oh-switch input[type="checkbox"],
  #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog input[type="checkbox"][id*="depreciation"], #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .oh-switch input[type="checkbox"],
  #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog input[type="checkbox"][id*="depreciation"] {
    width: 30px !important;
    height: 20px !important;
    border-radius: 72px !important;
    background-color: #dfe1e4 !important;
    background-image: none !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important; }
    #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .oh-switch input[type="checkbox"]:checked,
    #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog input[type="checkbox"][id*="depreciation"]:checked, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .oh-switch input[type="checkbox"]:checked,
    #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog input[type="checkbox"][id*="depreciation"]:checked, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .oh-switch input[type="checkbox"]:checked,
    #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog input[type="checkbox"][id*="depreciation"]:checked {
      background-color: transparent !important;
      background-image: linear-gradient(135deg, #6c3baa 0%, #8b5cf6 100%) !important;
      border: none !important; }
    #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog .oh-switch input[type="checkbox"]:focus,
    #genericModal:has(#genericModalBody form[action*="asset"]) .oh-modal__dialog input[type="checkbox"][id*="depreciation"]:focus, #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog .oh-switch input[type="checkbox"]:focus,
    #genericModal:has(#genericModalBody form[id*="asset"]) .oh-modal__dialog input[type="checkbox"][id*="depreciation"]:focus, #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog .oh-switch input[type="checkbox"]:focus,
    #genericModal:has(#genericModalBody form[hx-post*="asset"]) .oh-modal__dialog input[type="checkbox"][id*="depreciation"]:focus {
      border: none !important;
      outline: none !important;
      box-shadow: none !important; }

#genericModal [id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer .oh-btn.oh-btn--new-ash,
#genericModal [id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer button.oh-btn--new-ash,
#genericModal [id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer button[type="button"].oh-btn--new-ash,
#genericModal [id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer .oh-btn.oh-btn--new-ash,
#genericModal [id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer button.oh-btn--new-ash,
#genericModal [id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer button[type="button"].oh-btn--new-ash,
[id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer .oh-btn.oh-btn--new-ash,
[id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer button.oh-btn--new-ash,
[id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer button[type="button"].oh-btn--new-ash,
[id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer .oh-btn.oh-btn--new-ash,
[id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer button.oh-btn--new-ash,
[id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer button[type="button"].oh-btn--new-ash {
  background-color: #ededed !important;
  color: #434851 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  border: none !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important; }

#genericModal [id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer .oh-btn.oh-btn--new-blue,
#genericModal [id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer button.oh-btn--new-blue,
#genericModal [id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer button[type="submit"].oh-btn--new-blue,
#genericModal [id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer .oh-btn.oh-btn--new-blue,
#genericModal [id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer button.oh-btn--new-blue,
#genericModal [id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer button[type="submit"].oh-btn--new-blue,
[id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer .oh-btn.oh-btn--new-blue,
[id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer button.oh-btn--new-blue,
[id^="dynamicModal"] .oh-modal__dialog .oh-modal__dialog-footer button[type="submit"].oh-btn--new-blue,
[id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer .oh-btn.oh-btn--new-blue,
[id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer button.oh-btn--new-blue,
[id^="dynamicModal"] [id$="Body"] .oh-modal__dialog-footer button[type="submit"].oh-btn--new-blue {
  background-color: var(--theme-primary, #6c3baa) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  border: none !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important; }

.oh-dropdown {
  position: relative; }

.oh-dropdown__menu,
.oh-dropdown__import {
  position: absolute !important;
  min-width: 220px;
  z-index: 99999 !important;
  margin-top: 0.5rem !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  background: #f7f7f5 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 0px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(245, 158, 11, 0.1) !important;
  color: #1f2937; }
  .oh-dropdown__menu::before,
  .oh-dropdown__import::before {
    display: none; }
  .oh-dropdown__menu[style*="display: none"],
  .oh-dropdown__import[style*="display: none"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; }

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

.oh-dropdown__menu--hidden {
  display: none; }

.oh-dropdown__menu--right,
.oh-dropdown__import--right {
  right: 0;
  left: auto !important; }

.oh-dropdown__import {
  width: 350px;
  padding-top: 1rem;
  padding-bottom: 1rem; }
  @media (max-width: 575.98px) {
    .oh-dropdown__import {
      width: 95%;
      position: fixed;
      left: 10px;
      right: unset; } }
.oh-dropdown__import-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  border: 1px dashed #e5e7eb;
  padding: 1rem;
  background: rgba(243, 244, 246, 0.2);
  cursor: pointer; }
  .oh-dropdown__import-label:hover {
    background: rgba(243, 244, 246, 0.4); }

.oh-dropdown__import-form-icon {
  font-size: 4rem;
  color: rgba(31, 41, 55, 0.85); }

.oh-dropdown__import-form-title {
  font-size: 1rem;
  font-weight: bold;
  color: rgba(31, 41, 55, 0.85); }

.oh-dropdown__import-form-text {
  font-size: 0.85rem;
  color: #737373; }

.oh-dropdown__menu--top-100 {
  top: 100%; }

.oh-dropdown__menu hr {
  border: none;
  border-top: 1px solid #f3f4f6 !important;
  margin: 0.35rem 0 !important;
  opacity: 0.6; }

.oh-dropdown__items {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important; }

.oh-dropdown__item {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important; }
  .oh-dropdown__item:hover {
    background: rgba(108, 59, 170, 0.06) !important;
    transform: translateX(4px); }

.oh-dropdown__link {
  color: #1f2937 !important;
  display: flex !important;
  align-items: center !important;
  width: 100%;
  height: 100%;
  padding: 0.65rem 0.75rem !important;
  border-radius: 8px !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
  .oh-dropdown__link ion-icon {
    margin-right: 0.75rem;
    font-size: 1.2rem;
    color: #6c3baa; }
  .oh-dropdown__link:hover {
    color: #6c3baa !important;
    text-decoration: none !important;
    background: rgba(108, 59, 170, 0.08) !important; }
  @media (max-width: 575.98px) {
    .oh-dropdown__link {
      font-size: 0.85rem; } }
.oh-dropdown__link--danger {
  color: #ef4444 !important;
  border: none;
  background-color: transparent;
  padding: 0;
  width: unset;
  text-align: left; }
  .oh-dropdown__link--danger:hover {
    color: rgba(239, 68, 68, 0.9) !important; }

.oh-dropdown__footer {
  display: flex;
  align-items: center; }
  .oh-dropdown__footer * {
    flex-shrink: 0; }

.oh-dropdown__menu--dark-border {
  border: 1px solid #e5e7eb; }

.oh-dropdown__menu--highlight {
  border-color: #e5e7eb;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px; }

.oh-tabs__action-dropdown {
  min-width: 300px;
  max-width: 400px;
  padding: 0.25rem; }

.oh-dropdown__header {
  font-weight: bold;
  display: block;
  width: 100%;
  border-bottom: 1px solid rgba(243, 244, 246, 0.4);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem; }

.oh-dropdown__filter {
  min-width: 500px; }
  @media (max-width: 767.98px) {
    .oh-dropdown__filter {
      min-width: 250px;
      left: 0;
      right: unset; } }
@media (min-width: 1200px) {
  .oh-dropdown__menu--top-align {
    bottom: 0;
    right: 130px;
    transform: translateY(20%); } }

.oh-dropdown__lang-icon {
  width: 22px;
  height: 22px;
  margin-right: 10px; }

.oh-dropdown__submenu {
  position: relative;
  list-style: none;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem; }
  .oh-dropdown__submenu > .oh-dropdown__link--has-submenu {
    display: flex !important;
    align-items: center !important;
    cursor: pointer;
    padding: 0.65rem 0.75rem !important;
    border-radius: 8px !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #1f2937 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    .oh-dropdown__submenu > .oh-dropdown__link--has-submenu:hover {
      background: rgba(108, 59, 170, 0.08) !important;
      color: #6c3baa !important;
      transform: translateX(4px); }

.oh-dropdown__submenu-content {
  position: absolute;
  left: 100%;
  top: 0;
  background: #f7f7f5 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(245, 158, 11, 0.1) !important;
  min-width: 200px;
  padding: 0.5rem 0 !important;
  z-index: 100000;
  margin-left: 4px; }
  .oh-dropdown__submenu-content::before {
    display: none; }
  .oh-dropdown__submenu-content[style*="display: none"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; }
  .oh-dropdown__submenu-content > .oh-dropdown__link {
    display: block !important;
    padding: 0.55rem 1rem !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    color: #1f2937 !important; }
    .oh-dropdown__submenu-content > .oh-dropdown__link:hover {
      background: rgba(108, 59, 170, 0.08) !important;
      color: #6c3baa !important; }
    .oh-dropdown__submenu-content > .oh-dropdown__link:first-child {
      border-radius: 20px 20px 0 0 !important; }
    .oh-dropdown__submenu-content > .oh-dropdown__link:last-child {
      border-radius: 0 0 20px 20px !important; }

.oh-dropdown__item {
  color: #2d3748 !important;
  transition: all 0.2s ease !important; }
  .oh-dropdown__item:hover {
    background: rgba(2, 62, 138, 0.08) !important;
    transform: translateX(4px) !important; }

.oh-dropdown__link {
  color: #2d3748 !important; }
  .oh-dropdown__link:hover {
    color: #6c3baa !important;
    background: rgba(2, 62, 138, 0.08) !important; }
  .oh-dropdown__link ion-icon {
    color: #6c3baa !important; }

.oh-dropdown__divider {
  border-color: #e2e8f0 !important; }

.oh-dropdown__header {
  color: #2d3748 !important;
  border-bottom-color: #e2e8f0 !important;
  font-weight: 700 !important; }

.dropdown-menu {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(245, 158, 11, 0.1) !important;
  padding: 0.75rem !important;
  position: relative; }
  .dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b 0%, #2d3748 50%, #f093fb 100%);
    border-radius: 12px 12px 0 0;
    z-index: 1; }

.dropdown-item {
  color: #2d3748 !important;
  border-radius: 8px !important;
  padding: 0.65rem 0.75rem !important;
  margin: 0.25rem 0 !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important; }
  .dropdown-item:hover, .dropdown-item:focus {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(45, 55, 72, 0.1) 100%) !important;
    color: #f59e0b !important;
    transform: translateX(4px) !important; }
  .dropdown-item.active, .dropdown-item:active {
    background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
    color: white !important; }

.dropdown-divider {
  border-color: #e2e8f0 !important;
  margin: 0.5rem 0 !important; }

.dropdown-header {
  color: #4a5568 !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 0.5rem 0.75rem !important; }

.oh-tabs__tablist {
  list-style-type: none;
  padding-left: 0px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 0px; }

.oh-tabs__tab,
.oh-tabs__new-tab-config {
  padding: 1rem 1.25rem;
  height: 50px;
  max-height: 50px;
  border-bottom: 1px solid #e5e7eb;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer; }
  .oh-tabs__tab:hover,
  .oh-tabs__new-tab-config:hover {
    background-color: #f3f4f6;
    border-bottom: 1px solid #e5e7eb; }

.oh-tabs__tab--active {
  background-color: #ffffff;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #ffffff; }
  .oh-tabs__tab--active:hover {
    color: rgba(31, 41, 55, 0.7);
    background-color: #ffffff;
    border-bottom: 1px solid #ffffff; }

.oh-tabs__tab.oh-tabs__new-tab,
.oh-tabs__new-tab-config {
  max-width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #e5e7eb; }

.oh-tabs__tab--active {
  background-color: #ffffff;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #ffffff; }
  .oh-tabs__tab--active:hover {
    color: rgba(31, 41, 55, 0.7);
    background-color: #ffffff;
    border-bottom: 1px solid #ffffff; }

.oh-tabs__tab--active .oh-tabs__close-btn {
  display: flex;
  align-items: center;
  justify-content: center; }

.oh-tabs__tablist .oh-tabs__tab--active:first-child {
  border-left: none; }

.oh-tabs__tablist .oh-tabs__tab--active:nth-last-child(2) {
  border-right: none; }

.oh-tabs__content {
  width: 100%;
  background-color: white;
  padding: 1.25rem;
  border-radius: 10px; }
  .oh-tabs__content .flex.justify-between.items-center.mb-4 {
    padding: 0px 7px; }

.oh-tabs__content {
  display: none; }

.oh-tabs__content--active {
  display: block; }

.oh-tabs__tab.oh-tabs__new-tab {
  max-width: 60px;
  display: flex;
  justify-content: center;
  align-items: center; }

.oh-tabs__close-btn {
  padding: 0 !important;
  display: none; }

/* ==================================
*          GENERAL TABS
* ================================= */
.oh-general__tabs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  align-content: center; }

.oh-general__tab {
  margin-right: 1rem;
  flex-grow: 1; }
  .oh-general__tab:last-child {
    margin-right: 0; }
  @media (max-width: 575.98px) {
    .oh-general__tab {
      margin-bottom: 1rem; } }
.oh-general__tab-link {
  color: #1f2937;
  border-bottom: 3px solid transparent;
  padding-bottom: 0.75rem; }
  .oh-general__tab-link:hover {
    opacity: 0.7; }
  .oh-general__tab-link:hover, .oh-general__tab-link:focus, .oh-general__tab-link:focus-visible {
    text-decoration: none; }
  @media (max-width: 575.98px) {
    .oh-general__tab-link {
      padding: 0.5rem 0.75rem;
      border-bottom: none; } }
.oh-general__tab-link--active {
  border-bottom: 3px solid #6c3baa; }
  @media (max-width: 575.98px) {
    .oh-general__tab-link--active {
      border-bottom: none;
      background-color: rgba(108, 59, 170, 0.1);
      color: #6c3baa;
      border-radius: 0.25rem; }
      .oh-general__tab-link--active:focus, .oh-general__tab-link--active:focus-visible {
        color: #6c3baa; } }
.oh-profile-section__tab {
  width: 100%;
  justify-content: space-between; }

.oh-general__tabs--no-grow {
  justify-content: flex-start; }

.oh-general__tabs--no-grow > * {
  flex-grow: 0; }

.oh-general__tabs--profile li {
  margin-right: 2rem; }
  .oh-general__tabs--profile li:last-child {
    margin-right: 0; }

@media (max-width: 575.98px) {
  .oh-general__tabs--profile li {
    margin-right: 0.5rem; }
    .oh-general__tabs--profile li:last-child {
      margin-right: 0; } }

/* =====================================
*         Tabs Mobable
* =================================== */
.oh-tabs__movable {
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px; }
  .oh-tabs__movable:first-child {
    margin-top: 0; }
  .oh-tabs__movable:last-child {
    margin-bottom: 0; }
  .oh-tabs__movable:hover .oh-tabs__movable-header {
    background-color: #f8f9fa; }

.oh-tabs__movable-header {
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move; }

.oh-tabs__movable-header--w-80 {
  width: 80%;
  position: relative; }
  .oh-tabs__movable-header--w-80:after {
    content: "";
    bottom: -1px;
    position: absolute;
    border-bottom: 1px solid #e5e7eb;
    left: 100%;
    width: 25%; }

.oh-tabs__movable-title {
  font-weight: bold;
  font-size: 20px; }
  @media (max-width: 575.98px) {
    .oh-tabs__movable-title {
      font-size: 1rem;
      max-width: 200px; } }
.oh-tabs__movable-body {
  padding: 1.25rem 1.6rem 1.75rem 1.6rem; }

.oh-tabs__action-bar {
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 0.8rem;
  margin-bottom: 1.25rem; }

.oh-tabs__movable-close {
  background-color: transparent; }

.oh-tabs__movable:only-child .oh-tabs__movable-close {
  display: none; }

.oh-tabs__movable:nth-child(1):nth-last-child(2) .oh-tabs__movable-close {
  display: none; }

.oh-tabs__table-group-header {
  margin-bottom: 1rem; }

.oh-tabs__table-group {
  margin-top: 1.5rem; }
  .oh-tabs__table-group:first-child {
    margin-top: 0; }

.oh-tabs__table-group-title {
  font-size: 1.25rem;
  font-weight: bold; }

.oh-sticky-table--no-overflow {
  overflow-x: auto;
  overflow-y: unset !important; }

.oh-sticky-table__dropdown {
  z-index: 9; }

/* =====================================
*         Tabs view / preview
* =================================== */
.oh-tabs__view-buttons {
  display: flex;
  width: 150px; }
  .oh-tabs__view-buttons .tab-btn {
    flex: 1;
    padding: 8px;
    background-color: transparent;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
    outline: none;
    text-align: center; }
    .oh-tabs__view-buttons .tab-btn:first-child {
      border-right: none !important; }
    .oh-tabs__view-buttons .tab-btn span {
      opacity: 0.5; }
  .oh-tabs__view-buttons .tab-btn.active {
    background: rgba(108, 59, 170, 0.05);
    border: 1px solid #ccc;
    border-bottom: none;
    opacity: 1; }
    .oh-tabs__view-buttons .tab-btn.active span {
      opacity: 1; }

.oh-tabs__view {
  display: none; }
  .oh-tabs__view.active {
    display: block; }

.oh-tab-link {
  color: #6b7280;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease; }
  .oh-tab-link:hover {
    color: #6c3baa;
    border-bottom-color: rgba(108, 59, 170, 0.3); }
  .oh-tab-link--active {
    color: #6c3baa;
    border-bottom-color: #6c3baa;
    font-weight: 600; }

.oh-tab-content {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0 0 8px 8px;
  padding: 1.5rem; }

.oh-pagination {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  @media (max-width: 575.98px) {
    .oh-pagination {
      flex-direction: column;
      align-items: flex-start; } }
.oh-pagination__page {
  color: #1f2937;
  font-size: 0.9rem; }

.oh-pagination__items {
  display: flex;
  align-items: center;
  list-style-type: none;
  padding-left: 0; }

.oh-pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-right: 0px;
  font-size: 0.9rem;
  cursor: pointer; }
  .oh-pagination__item:first-child {
    border-radius: 0; }
  .oh-pagination__item:last-child {
    border-right: 1px solid #e5e7eb;
    border-radius: 0; }
  .oh-pagination__item:hover {
    background-color: #f2f2f2; }

.oh-pagination__item--wide {
  width: fit-content; }

.oh-pagination__link:hover {
  text-decoration: none; }

.oh-pagination__link--active {
  color: #6c3baa; }

.oh-pagination__nav {
  display: flex; }

.oh-pagination__input-container {
  margin-right: 1rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem; }
  @media (max-width: 575.98px) {
    .oh-pagination__input-container {
      margin-left: 0; } }
@media (max-width: 575.98px) {
  .oh-pagination__input-container .oh-pagination__label:first-child {
    display: none; } }

.oh-pagination__input {
  width: 40px;
  height: 40px;
  border: 1px solid #e5e7eb;
  text-align: center;
  border-radius: 0px; }
  .oh-pagination__input:hover, .oh-pagination__input:focus, .oh-pagination__input:focus-visible {
    border: 2px solid #5a67d8;
    border-radius: 0; }

.oh-pagination__label {
  color: #1f2937;
  font-size: 0.85rem; }

.oh-pagination__page {
  margin-bottom: 0.75rem; }

div.ui-tooltip {
  background-color: #1c1c1d;
  color: #ffffff;
  box-shadow: none;
  border: none;
  font-family: "DM Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  border: none !important;
  width: fit-content !important;
  max-width: 300px !important;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  z-index: 99999 !important; }

.oh-accordion-header {
  position: relative;
  padding: 0.75rem 1rem !important;
  font-weight: 700 !important;
  color: #2d3748 !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  margin-bottom: 0.5rem !important;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center; }
  .oh-accordion-header:hover {
    opacity: 0.8; }
  .oh-accordion-header::after {
    content: "";
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMxZjFmMWYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtNyAxMCA1IDUgNS01SDdaIj48L3BhdGg+Cjwvc3ZnPg==");
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%); }

.oh-accordion--show .oh-accordion-header::after {
  content: "";
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMxZjFmMWYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtNyAxNC41IDUtNSA1IDVIN1oiPjwvcGF0aD4KPC9zdmc+");
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%); }

.oh-accordion-body {
  display: none; }

.oh-accordion--show .oh-accordion-body {
  display: block; }

.oh-dropdown__filter-footer {
  border-top: 1px solid #f3f4f6;
  padding-top: 1rem; }

/* ====================================
*          ACCORDION - META
* ================================== */
.oh-accordion-meta {
  width: 100%; }

.oh-accordion-meta__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #f3f4f6;
  background-color: #ffffff;
  padding: 0.5rem 0.5rem 0.5rem 2.5rem;
  cursor: pointer; }
  .oh-accordion-meta__header:hover {
    background-color: rgba(243, 244, 246, 0.4); }
  .oh-accordion-meta__header::before {
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFjMWMxYyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0xMiA1LjI1djEzLjUiPjwvcGF0aD4KICA8cGF0aCBkPSJNMTguNzUgMTJINS4yNSI+PC9wYXRoPgo8L3N2Zz4=");
    background-position: center;
    background-repeat: no-repeat;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    position: absolute;
    left: 8px; }

.oh-accordion-meta__header.oh-accordion-meta__header--show::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFjMWMxYyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0xOC43NSAxMkg1LjI1Ij48L3BhdGg+Cjwvc3ZnPg=="); }

.oh-accordion-meta__body {
  border: 1px solid #f3f4f6;
  border-top: none;
  padding: 0.5rem;
  background-color: #ffffff; }

.oh-accordion-meta__item {
  margin-bottom: 0.5rem; }
  .oh-accordion-meta__item:last-child {
    margin-bottom: 0; }

.oh-accordion-meta__btn,
.oh-accordion-meta__btn-icon {
  color: #1f2937; }

.centered-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; }

.oh-user_permission-list_item {
  position: relative;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #f3f4f6;
  background-color: #ffffff;
  padding: 0.5rem;
  margin-bottom: 0.5rem; }
  .oh-user_permission-list_item:hover {
    background-color: rgba(243, 244, 246, 0.4); }

.oh-user_permission-list_profile {
  display: flex;
  align-items: center;
  gap: 0.2rem; }

.oh-user_permission_list-text {
  font-size: 0.75rem; }

.oh-user_permission--profile {
  width: 46px;
  height: 46px; }

.oh-user_permssion-dropdownbtn {
  color: #1f2937;
  background-color: transparent;
  padding: 0px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.25rem; }

.oh-progress {
  background-color: whitesmoke;
  border-radius: 25px;
  width: 100%;
  height: 8px;
  display: block; }

.oh-progress__bar {
  display: block;
  height: 100%;
  border-radius: 25px; }

.oh-progress__bar--secondary,
.oh-progress__bar--table-secondary {
  background-color: #6c3baa; }

.oh-progress--table-secondary {
  border: 1px solid #6c3baa; }

.oh-progress__bar--table {
  border-radius: 2px;
  max-width: 80%; }

.oh-progress--table {
  height: 25px;
  border-radius: 5px;
  background-color: transparent;
  width: 75%; }

.oh-progress-container {
  display: flex;
  align-items: center; }

.oh-progress-container__percentage {
  font-size: 0.8rem;
  font-weight: bold;
  margin-left: 0.7rem;
  color: #737373; }

.oh-progress {
  background-color: #e2e8f0 !important;
  border-radius: 25px !important;
  height: 10px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  position: relative !important; }

.oh-progress__bar {
  border-radius: 25px !important;
  transition: width 0.6s ease !important;
  position: relative !important;
  overflow: hidden !important; }
  .oh-progress__bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite; }

@keyframes shimmer {
  0% {
    left: -100%; }
  100% {
    left: 100%; } }

.oh-progress__bar--primary {
  background: linear-gradient(90deg, #f59e0b 0%, #2d3748 100%) !important;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important; }

.oh-progress__bar--success {
  background: linear-gradient(90deg, #48bb78 0%, #38a169 100%) !important;
  box-shadow: 0 2px 4px rgba(72, 187, 120, 0.3) !important; }

.oh-progress__bar--danger {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important; }

.oh-progress__bar--warning {
  background: linear-gradient(90deg, #ed8936 0%, #dd6b20 100%) !important;
  box-shadow: 0 2px 4px rgba(237, 137, 54, 0.3) !important; }

.oh-progress__bar--info {
  background: linear-gradient(90deg, #4299e1 0%, #3182ce 100%) !important;
  box-shadow: 0 2px 4px rgba(66, 153, 225, 0.3) !important; }

.oh-progress__bar--secondary,
.oh-progress__bar--table-secondary {
  background: linear-gradient(90deg, #f59e0b 0%, #2d3748 100%) !important;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important; }

.oh-progress--table {
  background-color: rgba(226, 232, 240, 0.5) !important;
  border-radius: 8px !important;
  height: 28px !important; }

.oh-progress--table-secondary {
  border: 1px solid rgba(245, 158, 11, 0.3) !important; }

.oh-progress-container__percentage {
  color: #4a5568 !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important; }

.progress {
  background-color: #e2e8f0 !important;
  border-radius: 25px !important;
  height: 12px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  overflow: visible !important; }

.progress-bar {
  border-radius: 25px !important;
  transition: width 0.6s ease !important;
  position: relative !important;
  overflow: hidden !important; }
  .progress-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite; }

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 1rem 1rem !important; }

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite !important; }

.bg-primary.progress-bar {
  background: linear-gradient(90deg, #f59e0b 0%, #2d3748 100%) !important; }

.bg-success.progress-bar {
  background: linear-gradient(90deg, #48bb78 0%, #38a169 100%) !important; }

.bg-danger.progress-bar {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%) !important; }

.bg-warning.progress-bar {
  background: linear-gradient(90deg, #ed8936 0%, #dd6b20 100%) !important; }

.bg-info.progress-bar {
  background: linear-gradient(90deg, #4299e1 0%, #3182ce 100%) !important; }

.oh-profile {
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  line-height: normal; }

.oh-profile__avatar {
  border-radius: 50%;
  flex-shrink: 0; }

.oh-profile__avatar.mr-2 {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  box-shadow: none !important; }
  .oh-profile__avatar.mr-2:hover {
    box-shadow: none !important; }

.oh-profile__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%; }

.oh-profile__active-badge {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  right: 5px;
  bottom: 5px;
  cursor: pointer; }

.oh-profile__active-badge--secondary {
  background-color: #6c3baa;
  border: 2px solid #ffffff; }

.oh-profile--md .oh-profile__avatar {
  width: 30px;
  height: 30px; }

.oh-profile--md .oh-profile__name {
  font-size: 0.8rem; }

.oh-profile--base .oh-profile__avatar {
  width: 42px;
  height: 42px; }

.oh-profile--base .oh-profile__name {
  font-size: 0.95rem; }

.oh-profile--lg .oh-profile__avatar {
  width: 90px;
  height: 90px; }

.oh-profile--lg .oh-profile__name {
  font-size: 0.95rem; }

.oh-profile-list {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0; }

.oh-profile-list__item {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; }
  .oh-profile-list__item:last-child {
    padding-bottom: 0; }

.oh-profile-list__link:hover {
  text-decoration: none;
  opacity: 0.9; }

.oh-profile__info-name {
  font-size: 1.4rem; }
  @media (max-width: 575.98px) {
    .oh-profile__info-name {
      font-weight: bold;
      font-size: 1.2rem; } }
.oh-profile__info-designation {
  margin-bottom: 0;
  color: #737373; }

.oh-profile__info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center; }

.oh-profile__info-list {
  margin-bottom: 0;
  padding-left: 0; }
  @media (max-width: 767.98px) {
    .oh-profile__info-list {
      margin-top: 2rem; } }
.oh-profile__info-list-item {
  display: flex;
  align-items: center; }

.oh-profile__info-label,
.oh-profile__info-icon {
  color: #606366;
  font-size: 0.85rem; }

.oh-profile__info-label {
  display: flex;
  align-items: center;
  margin-right: 0.75rem; }

.oh-profile__info-label > *:first-child {
  margin-right: 0.35rem; }

.oh-profile__info-value {
  font-size: 0.9rem; }

.oh-profile__info-list-item {
  margin-bottom: 0.75rem; }
  .oh-profile__info-list-item:last-child {
    margin-bottom: 0; }

.oh-general__tabs--border {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #f3f4f6; }

.oh-profile__card-info-list {
  padding-left: 0;
  list-style-type: none; }

.oh-profile__card-info-item {
  display: flex;
  flex-direction: column; }

.oh-profile__card-info-item {
  margin-bottom: 1.5rem; }
  .oh-profile__card-info-item:last-child {
    margin-bottom: 0; }

.oh-profile__subtext {
  font-size: 0.8rem;
  color: #737373;
  margin-bottom: 0; }

.oh-profile__meta {
  margin-left: 0.3rem; }

.oh-sidebar {
  background-color: #5a67d8;
  color: #ffffff;
  max-width: 230px;
  min-height: 100vh;
  height: 100%;
  overflow-y: auto;
  left: 0;
  z-index: 10000; }

.oh-sidebar__company {
  display: grid;
  grid-template-columns: 1fr 4fr auto;
  align-items: center;
  padding: 25px 20px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  width: 230px; }
  .oh-sidebar__company div:first-child {
    margin-right: 10px; }

.oh-sidebar__company-profile {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #6c3baa;
  font-size: 1.25rem;
  border-radius: 0.15rem; }

.oh-sidebar__company-details {
  display: flex;
  flex-direction: column; }

.oh-sidebar__company-title {
  color: #ffffff;
  font-size: 0.95rem; }

.oh-sidebar__company-link {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7); }
  .oh-sidebar__company-link:hover {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none; }
  .oh-sidebar__company-link:active, .oh-sidebar__company-link:focus, .oh-sidebar__company-link:focus-visible {
    color: #ffffff;
    text-decoration: none; }

.oh-sidebar__menu-items {
  padding-left: 0px;
  margin-top: 85px;
  list-style: none; }

.oh-sidebar__menu-item {
  font-size: 0.875rem; }

.oh-sidebar__menu-link {
  /* BETA VERSION STYLES - Circular buttons */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 5px !important;
  margin: 0.65rem auto !important;
  /* Increased spacing between icons */
  border-radius: 50% !important;
  /* Perfect circle - FORCE IT! */
  width: 45px !important;
  height: 45px !important;
  cursor: pointer !important;
  transition: 0.3s !important;
  position: relative !important;
  background: rgba(0, 0, 0, 0.055) !important;
  /* Light gray circle */
  box-shadow: none !important;
  color: #ffffff;
  opacity: 1;
  /* Hide text labels - only show icons (but not tooltips!) */
  /* Tooltips are now shown on hover via inline styles in sidebar.html */ }
  .oh-sidebar__menu-link:hover {
    background: #2d3748 !important;
    /* Dark gray hover color */
    border-radius: 50% !important;
    color: #ffffff;
    text-decoration: none;
    opacity: 1 !important;
    box-shadow: none !important; }
    .oh-sidebar__menu-link:hover img {
      filter: brightness(0) invert(1) !important;
      /* White icons on hover */ }
  .oh-sidebar__menu-link:active, .oh-sidebar__menu-link:focus, .oh-sidebar__menu-link:focus-visible {
    background: #e34e38 !important;
    border-radius: 50% !important;
    color: #ffffff;
    text-decoration: none; }

.oh-sidebar__menu-link--active {
  background: #2d3748 !important;
  /* Dark gray active color */
  border-radius: 50% !important;
  color: #ffffff;
  width: 45px;
  height: 45px; }
  .oh-sidebar__menu-link--active img {
    filter: brightness(0) invert(1) !important;
    /* White icon */ }

.oh-sidebar__menu-icon {
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px; }
  .oh-sidebar__menu-icon img {
    width: 20px;
    height: 20px;
    transition: 0.3s;
    filter: brightness(0.3) !important;
    /* Dark gray icons by default - visible against white */ }

.oh-sidebar__submenu {
  padding: 12px 25px;
  background-color: #5a67d8;
  width: 230px;
  z-index: 1000;
  position: relative; }

.oh-sidebar__submenu-items {
  padding-left: 0;
  list-style-type: none; }

.oh-sidebar__submenu-item {
  font-size: 0.85rem;
  padding-left: 15px;
  margin-top: 4px;
  margin-bottom: 4px; }
  .oh-sidebar__submenu-item:first-child {
    margin-top: 0; }
  .oh-sidebar__submenu-item:last-child {
    margin-bottom: 0; }

.oh-sidebar__submenu-link {
  color: rgba(255, 255, 255, 0.95); }
  .oh-sidebar__submenu-link:hover, .oh-sidebar__submenu-link:focus, .oh-sidebar__submenu-link:focus-visible, .oh-sidebar__submenu-link:visited {
    color: white;
    text-decoration: none; }

.oh-sidebar__transition {
  transition: all 0.3s ease-in-out; }

.oh-sidebar__animation--enter-start {
  transform: translateX(-100%); }

.oh-sidebar__animation--enter-end {
  transform: translateX(0%); }

.oh-sidebar__animation--leave-start {
  transform: translateX(0%); }

.oh-sidebar__animation--leave-end {
  transform: translateX(-100%); }

/* ===================================
*         Activity Sidebar
* ================================== */
.oh-activity-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #f7f7f5;
  height: 100%;
  min-height: 100vh;
  width: 50%;
  max-width: 1000px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03) !important;
  border-radius: 30px 0 0 30px;
  padding: 2rem;
  z-index: 15;
  font-family: "DM Sans", sans-serif;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out; }
  @media (max-width: 767.98px) {
    .oh-activity-sidebar {
      width: 95%; } }
  .oh-activity-sidebar .oh-btn,
  .oh-activity-sidebar .oh-btn--secondary,
  .oh-activity-sidebar .oh-btn--primary {
    background: #6c3baa !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    font-family: "DM Sans", sans-serif !important;
    box-shadow: none !important; }
    .oh-activity-sidebar .oh-btn:hover,
    .oh-activity-sidebar .oh-btn--secondary:hover,
    .oh-activity-sidebar .oh-btn--primary:hover {
      background: #012f6b !important;
      color: #ffffff !important;
      box-shadow: none !important; }
    .oh-activity-sidebar .oh-btn:focus, .oh-activity-sidebar .oh-btn:active,
    .oh-activity-sidebar .oh-btn--secondary:focus,
    .oh-activity-sidebar .oh-btn--secondary:active,
    .oh-activity-sidebar .oh-btn--primary:focus,
    .oh-activity-sidebar .oh-btn--primary:active {
      background: #012f6b !important;
      box-shadow: none !important;
      outline: none !important; }
  .oh-activity-sidebar button[title="Delete"],
  .oh-activity-sidebar form[hx-swap="delete"] button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important; }
    .oh-activity-sidebar button[title="Delete"]:hover,
    .oh-activity-sidebar form[hx-swap="delete"] button:hover {
      background: transparent !important;
      box-shadow: none !important; }
  .oh-activity-sidebar ion-icon[name="add-outline"] {
    color: #6c3baa !important; }
    .oh-activity-sidebar ion-icon[name="add-outline"]:hover {
      color: #012f6b !important; }
  .oh-activity-sidebar ion-icon[name="close-outline"],
  .oh-activity-sidebar ion-icon[name="trash-outline"] {
    color: #e54f38 !important; }
  .oh-activity-sidebar label[for^="addFile_"] {
    font-family: "DM Sans", sans-serif !important;
    box-shadow: none !important; }
    .oh-activity-sidebar label[for^="addFile_"]:hover {
      box-shadow: none !important; }
    .oh-activity-sidebar label[for^="addFile_"] ion-icon {
      color: #818791 !important;
      border-color: #818791 !important;
      box-shadow: none !important; }
      .oh-activity-sidebar label[for^="addFile_"] ion-icon:hover {
        color: #6c3baa !important;
        border-color: #6c3baa !important;
        box-shadow: none !important; }
  .oh-activity-sidebar .oh-input:focus, .oh-activity-sidebar .oh-input:active, .oh-activity-sidebar .oh-input:focus-visible,
  .oh-activity-sidebar input[type="text"]:focus,
  .oh-activity-sidebar input[type="text"]:active,
  .oh-activity-sidebar input[type="text"]:focus-visible {
    border-color: #6c3baa !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(2, 62, 138, 0.2) !important; }

.oh-activity-sidebar--show {
  transform: translateX(0);
  visibility: visible; }

.oh-activity-sidebar__title,
.oh-activity-sidebar__header-icon {
  font-size: 1.25rem; }

.oh-activity-sidebar__header {
  display: flex;
  align-items: center;
  margin-bottom: 1.05rem; }

.oh-activity-sidebar__body {
  overflow-y: auto;
  min-height: calc(100% - 90px);
  max-height: calc(100% - 90px); }

.oh-activity-sidebar__qa-list {
  padding-left: 0;
  list-style: none; }

.oh-activity-sidebar__qa-item {
  background-color: #ffffff;
  padding: 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid #f3f4f6;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  transition: background-color 0.4s ease-in-out;
  margin: 1rem auto; }
  .oh-activity-sidebar__qa-item:last-child {
    margin-bottom: 0rem; }
  .oh-activity-sidebar__qa-item:hover {
    background-color: rgba(243, 244, 246, 0.4);
    transition: background-color 0.4s ease-in-out;
    cursor: pointer; }

.oh-activity-sidebar__q {
  display: block;
  font-weight: bold; }

.oh-activity-sidebar__a {
  display: block;
  color: #737373;
  margin-top: 0.35rem; }

span.oh-activity-sidebar__a img {
  height: unset !important; }

.oh-activity-sidebar__close:hover {
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.4s ease-in-out; }

/* ===================================
*         Inner Sidebar
* ================================== */
.oh-inner-sidebar {
  width: 100%;
  border-right: 1px solid #f3f4f6;
  padding: 1.5rem 1rem; }
  @media (max-width: 991.98px) {
    .oh-inner-sidebar {
      border: none; } }
.oh-inner-sidebar-toggle {
  display: none;
  background-color: transparent;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 1.5rem;
  padding-top: 0; }
  .oh-inner-sidebar-toggle:hover, .oh-inner-sidebar-toggle:focus, .oh-inner-sidebar-toggle:focus-visible {
    background-color: transparent;
    color: #5a2e96;
    border-bottom: 1px solid #f3f4f6; }
  @media (max-width: 991.98px) {
    .oh-inner-sidebar-toggle {
      display: flex; } }
.oh-inner-sidebar__items {
  list-style-type: none;
  padding-left: 0;
  max-height: 100%;
  overflow-y: auto; }

.oh-inner-sidebar__item {
  margin-bottom: 0.05rem; }
  .oh-inner-sidebar__item:last-child {
    margin-bottom: 0; }

.oh-inner-sidebar__link {
  font-size: 0.88rem;
  display: block;
  padding: 0.7rem;
  width: 100%; }
  .oh-inner-sidebar__link:hover, .oh-inner-sidebar__link:focus, .oh-inner-sidebar__link:focus-visible {
    color: #6c3baa;
    text-decoration: none; }

.oh-inner-sidebar__link--active {
  background-color: #fff6f4;
  color: #6c3baa;
  border: solid 1px;
  border-radius: 5px; }

.oh-inner-sidebar-content {
  width: 100%; }

.oh-inner-sidebar-content__header {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 1rem; }

.oh-inner-sidebar-content__title {
  font-size: 1.25rem;
  font-weight: bold; }

.oh-inner-sidebar-content__footer {
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end; }

/* =================================
*        COLLAPSED SIDEBAR
* ================================ */
@media (max-width: 767.98px) {
  .oh-wrapper-main--closed #sidebar {
    display: none; } }

.oh-wrapper-main--closed {
  /* Tooltips (.oh-sidebar__menu-link span) are now visible and controlled by inline styles in sidebar.html */ }
  .oh-wrapper-main--closed .oh-sidebar__company-details {
    display: none; }
  .oh-wrapper-main--closed .oh-sidebar__company {
    display: flex;
    align-items: center;
    justify-content: center;
    width: unset; }
    .oh-wrapper-main--closed .oh-sidebar__company .oh-dropdown {
      display: none; }
    .oh-wrapper-main--closed .oh-sidebar__company .oh-sidebar__company-profile {
      margin-right: 0; }
  .oh-wrapper-main--closed .oh-sidebar__submenu-items {
    display: none; }
  .oh-wrapper-main--closed .oh-sidebar__menu-item {
    margin-bottom: 1rem; }
    .oh-wrapper-main--closed .oh-sidebar__menu-item:last-child {
      margin-bottom: 0; }
  .oh-wrapper-main--closed .oh-sidebar__submenu {
    position: fixed;
    z-index: -1;
    pointer-events: none; }
  .oh-wrapper-main--closed .oh-sidebar__menu-link {
    display: flex;
    justify-content: center;
    align-items: center; }
  .oh-wrapper-main--closed .oh-sidebar__menu-icon {
    margin-right: 0; }
  .oh-wrapper-main--closed .oh-sidebar__menu-icon img {
    height: 30px !important;
    width: 30px !important;
    object-fit: contain !important;
    min-width: 30px !important; }
  .oh-wrapper-main--closed .oh-sidebar__menu-link,
  .oh-wrapper-main--closed .oh-sidebar__submenu {
    width: unset; }

.oh-sidebar {
  background: #2d3748 !important;
  box-shadow: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  border-right: 1px solid #e5e7eb !important; }
  .oh-sidebar .oh-sidebar__company {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
  .oh-sidebar .oh-sidebar__company-profile {
    background: #f59e0b !important;
    box-shadow: none !important; }
  .oh-sidebar .oh-sidebar__company-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 600 !important; }
  .oh-sidebar .oh-sidebar__menu-link {
    transition: all 0.15s ease;
    border-radius: 50% !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 500 !important; }
    .oh-sidebar .oh-sidebar__menu-link:hover {
      background: #2d3748 !important;
      color: #ffffff !important;
      opacity: 1 !important; }
  .oh-sidebar .oh-sidebar__menu-link--active {
    background: #2d3748 !important;
    border-left: none !important;
    box-shadow: none !important;
    color: #ffffff !important; }
  .oh-sidebar .oh-sidebar__submenu {
    background: #2d3748 !important;
    z-index: 9999 !important;
    position: fixed !important; }
  .oh-sidebar .oh-sidebar__submenu-link {
    transition: all 0.15s ease;
    padding: 0.4rem 1rem !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    position: relative;
    color: rgba(255, 255, 255, 0.9) !important; }
    .oh-sidebar .oh-sidebar__submenu-link:hover {
      background: rgba(108, 59, 170, 0.15) !important;
      color: #6c3baa !important;
      box-shadow: none !important; }
  .oh-sidebar .oh-sidebar__submenu-item--active .oh-sidebar__submenu-link,
  .oh-sidebar .oh-sidebar__submenu-link.active,
  .oh-sidebar .oh-sidebar__submenu-link[aria-current="page"],
  .oh-sidebar li.active .oh-sidebar__submenu-link,
  .oh-sidebar .oh-sidebar__submenu-items li.active a {
    background: #f59e0b !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 0.4rem 1rem !important;
    box-shadow: none !important;
    font-weight: 600 !important; }

.oh-kanban {
  width: 100%;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 180px);
  height: calc(100vh - 245px);
  padding-top: 0;
  overflow: auto; }

.oh-kanban__section {
  width: 250px;
  margin-right: 1.5rem;
  flex-shrink: 0; }
  .oh-kanban__section:last-child {
    margin-right: 0; }

.oh-kanban .ui-sortable-placeholder {
  min-height: calc(100vh - 245px); }

.oh-kanban__add-container {
  padding-top: 0.5rem;
  top: 0;
  position: sticky; }

.oh-kanban__section-title {
  font-size: 1rem;
  font-weight: bold; }

.oh-kanban__section-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  background-color: #f8f9fa;
  position: sticky;
  min-height: 50px;
  top: 0;
  z-index: 3; }

.oh-kanban__section-head--white {
  background-color: #ffffff !important; }

.oh-kanban__head-actions {
  display: flex;
  align-items: center; }

.oh-kanban__btn {
  padding: 0;
  font-size: 1rem;
  margin-right: 0.5rem; }
  .oh-kanban__btn:last-child {
    margin-right: 0; }

.oh-kanban__card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-bottom: none;
  width: 100%;
  flex-shrink: 0; }
  .oh-kanban__card:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 1px 2px 0px; }
  .oh-kanban__card:last-child {
    border-bottom: 1px solid #e5e7eb; }

.oh-kanban__card-head,
.oh-kanban__card-footer {
  padding: 0.75rem; }

.oh-kanban__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.oh-kanban__card-body {
  position: relative;
  padding: 0 0.75rem; }

.oh-kanban__card-footer-text {
  font-size: 0.8rem; }

.oh-kanban__section-body {
  width: 100%;
  min-height: calc(100vh - 245px); }

.oh-kanban__add-section {
  min-width: 225px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f3f4f6; }
  .oh-kanban__add-section:hover {
    border: 1px solid #e5e7eb; }

.oh-kanban__add-dialog,
.oh-kanban__add-card-container {
  padding: 0.75rem; }

.oh-kanban__section--highlight {
  background-color: #f6fdfd;
  border: 1px dashed #22a8b4;
  width: calc(250px + 1rem);
  height: calc(100vh - 180px); }

.oh-kanban__card--highlight {
  background-color: #f6fdfd;
  border: 1px dashed #22a8b4;
  width: 250px;
  height: 100px; }

.oh-kanban-group-container {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  height: calc(100vh - 180px);
  overflow-x: auto; }

.oh-kanban-group {
  min-width: 300px;
  max-width: calc(33.33% - 0.5rem);
  margin-right: 1rem;
  flex-shrink: 0; }

.oh-kanban-group .oh-kanban-card {
  margin-bottom: 1rem; }
  .oh-kanban-group .oh-kanban-card:last-child {
    margin-bottom: 0; }

.oh-kanban-group__head {
  position: relative;
  margin-bottom: 1.25rem;
  width: 100%;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .oh-kanban-group__head:hover {
    background-color: #f3f4f6; }

.oh-kanban-group__add-card {
  font-size: 1.25rem;
  padding: 0; }

.oh-kanban-card--collapsed .oh-kanban-group__add-card {
  display: none; }

.oh-kanban-gorup__title {
  font-weight: bold; }

.oh-kanban-card--collapsed.oh-kanban-group {
  min-width: 30px; }

.oh-kanban-card--collapsed .oh-kanban-group__head {
  background-color: #f3f4f6;
  position: relative;
  height: calc(100vh - 200px);
  width: 35px; }
  .oh-kanban-card--collapsed .oh-kanban-group__head::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    position: absolute;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzdkN2Q3ZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik01Ljk5NCAxNiAyIDEyLjAwMyA2IDgiPjwvcGF0aD4KICA8cGF0aCBkPSJNMTguMDA2IDggMjIgMTEuOTk3IDE4IDE2Ij48L3BhdGg+CiAgPHBhdGggZD0iTTIgMTJoMjAiPjwvcGF0aD4KPC9zdmc+");
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 10px; }
  .oh-kanban-card--collapsed .oh-kanban-group__head:hover {
    background-color: #e5e7eb; }

.oh-kanban-card--collapsed .oh-kanban-gorup__title {
  transform-origin: 0 0;
  transform: rotate(-90deg);
  position: absolute;
  width: calc(100vh - 260px);
  left: 0;
  bottom: 0px;
  left: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-end; }

.oh-kanban-card--collapsed .oh-kanban-group__body {
  display: none; }

.oh-kanban__card--status {
  position: relative;
  margin-top: 1rem; }
  .oh-kanban__card--status::before {
    content: "";
    width: 100%;
    height: 4px;
    position: absolute;
    left: 0px;
    bottom: 0px; }
  .oh-kanban__card--status:first-child {
    margin-top: 0; }

.oh-kanban__card--blue::before {
  content: "";
  background-color: #224ed3; }

.oh-kanban__card--red::before {
  content: "";
  background-color: #dd3636; }

.oh-kanban__card--amber::before {
  content: "";
  background-color: #f4c648; }

.oh-kanban__card--green::before {
  content: "";
  background-color: #059669; }

.oh-kanban__card-body-collapse {
  width: 24px;
  height: 24px;
  display: inline-block;
  border: none;
  background-color: #f8f9fa;
  border-radius: 5px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIGZpbGw9IiM2OTY5NjkiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtNyAxNC41IDUtNSA1IDVIN1oiPjwvcGF0aD4KPC9zdmc+");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 10px; }
  .oh-kanban__card-body-collapse:hover {
    background-color: whitesmoke; }

.oh-kanban__card-collapse--down {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIGZpbGw9IiM2OTY5NjkiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtNyA5LjUgNSA1IDUtNUg3WiI+PC9wYXRoPgo8L3N2Zz4=") !important; }

.oh-kanban__card-content--hide {
  display: none; }

.oh-filter-tag-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem; }

.oh-filter-tag {
  position: relative;
  background-color: #ffffff;
  color: #1f2937;
  border-radius: 25px;
  border: 1px solid #f3f4f6;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  font-weight: bold;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.4s ease-in-out; }
  .oh-filter-tag:hover {
    border-color: #e5e7eb;
    transition: all 0.4s ease-in-out; }
    .oh-filter-tag:hover .oh-filter-tag__close {
      color: #6c3baa; }
      .oh-filter-tag:hover .oh-filter-tag__close::before {
        background-color: #e5e7eb;
        transition: all 0.4s ease-in-out; }

.oh-filter-tag__close {
  background-color: transparent;
  color: #5e5e5e;
  padding: 0;
  margin-left: 0.75rem;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease-in-out; }
  .oh-filter-tag__close::before {
    content: "";
    width: 0.5px;
    position: relative;
    left: -3px;
    height: 27px;
    background-color: #f3f4f6;
    transition: all 0.4s ease-in-out; }
  .oh-filter-tag__close:hover {
    color: #5a2e96;
    transition: all 0.4s ease-in-out; }

.oh-titlebar-container__filters {
  margin-top: 1.5rem;
  gap: 0.75rem; }

.oh-titlebar__tag {
  display: inline-block;
  background-color: #ffffff;
  color: #1f2937;
  border-radius: 25px;
  font-size: 0.85rem;
  padding: 0.25rem 0.75rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(108, 59, 170, 0.15);
  transition: background-color 0.3s ease-in-out; }
  .oh-titlebar__tag:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transition: background-color 0.3s ease-in-out; }

.oh-titlebar__tag-close {
  background-color: #6c3baa;
  color: #ffffff;
  width: 16px;
  height: 16px;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  font-weight: bold;
  align-items: center;
  border: none;
  border-radius: 50%;
  margin-left: 0.75rem; }
  .oh-titlebar__tag-close:hover {
    background-color: #5a2e96; }

.oh-titlebar__save {
  background-color: #10b981;
  border: 1px solid #059669;
  border-radius: 25px;
  font-size: 0.85rem;
  padding: 0.25rem 0.75rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 2px; }
  .oh-titlebar__save:hover {
    background-color: #059669; }

.oh-hands svg {
  width: 36px;
  height: auto; }

.oh-timeoff-card {
  display: flex;
  align-items: center; }
  @media (max-width: 991.98px) {
    .oh-timeoff-card {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem; } }
.oh-timeoff-card__icon-container {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #6c3baa;
  margin-right: 1.5rem; }

.oh-timeoff-card__icon {
  color: #ffffff;
  font-size: 2rem; }

.oh-timeoff-card__title {
  display: block;
  font-weight: bold;
  font-size: 1.15rem;
  width: 100%; }

.oh-timeoff-card__stat-container,
.oh-timeoff-modal__stats-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.35rem; }

.oh-timeoff-card__stat,
.oh-timeoff-modal__stat {
  margin-right: 1.75rem; }
  .oh-timeoff-card__stat:last-child,
  .oh-timeoff-modal__stat:last-child {
    margin-right: 0; }

.oh-timeoff-card__stat-title,
.oh-timeoff-modal__stat-title {
  display: block;
  font-size: 0.8rem;
  color: #737373;
  margin-bottom: 0.25rem; }

.oh-timeoff-card__stat-count {
  font-size: 1.05rem;
  font-weight: bold; }

.oh-timeoff-modal__download-link {
  width: 100%;
  background: #f3f4f6;
  padding: 1rem;
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  color: #454545; }
  .oh-timeoff-modal__download-link:hover, .oh-timeoff-modal__download-link:focus, .oh-timeoff-modal__download-link:focus-visible {
    text-decoration: none;
    background-color: #e5e7eb; }

.oh-timeoff-modal__profile-content .oh-profile__image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: center; }

.oh-timeoff__date-container {
  display: flex;
  align-items: center; }
  .oh-timeoff__date-container input:first-child {
    border-right: 0; }

.oh-timeoff-modal__stats-container {
  width: 100%; }

.oh-timeoff-modal__profile-content {
  margin-bottom: 1rem;
  width: 100%; }

.oh-timeoff-modal__profile-info {
  display: flex;
  flex-direction: column; }

.oh-timeoff-modal__stat-count {
  font-size: 0.9rem; }

.oh-timeoff-modal__stat-description {
  overflow-y: auto;
  max-height: 100px; }

.oh-timeoff-modal__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 1rem;
  padding-bottom: 1.25rem; }

.oh-timeoff-modal__footer > * {
  margin-right: 5px; }
  .oh-timeoff-modal__footer > *:last-child {
    margin-right: 0; }

.oh-timeoff-modal__user {
  font-size: 1.2rem;
  margin-top: 0.75rem; }

.oh-timeoff-modal__body {
  display: flex;
  flex-direction: column;
  align-items: center; }

.oh-timeoff-modal__position {
  color: rgba(115, 115, 115, 0.8); }

.oh-modal__dialog-relative {
  position: relative; }

.oh-modal__diaglog-nav {
  width: 2rem;
  height: 2rem;
  background: #ffffff;
  border-radius: 50px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center; }

.oh-modal__nav-prev {
  position: absolute;
  left: -55px;
  top: 50%;
  transform: translate(50%, -50%); }

.oh-modal__nav-next {
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translate(50%, -50%); }

/* ================================
   RECRUITMENT PIPELINE STYLES
   Vibrant & Colorful Theme

   Also applies to:
   - Employee kanban cards
   - Onboarding kanban boards
   - Onboarding tables
   ================================ */
/* ===========================
   UNIVERSAL MANAGER STYLING
   =========================== */
.manager-highlight {
  background: #ffffff !important;
  border-left: 4px solid #ed8936 !important;
  position: relative;
  color: #2d3748 !important; }
  .manager-highlight::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: #ed8936; }

/* ===========================
   RECRUITMENT TAB HEADERS
   =========================== */
.oh-tabs__tab {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .oh-tabs__tab.pipeline-recruitment-tab, .oh-tabs__tab[data-target^="#tab_rec_"] {
    background: #ffffff !important;
    color: #2d3748 !important;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0; }
    .oh-tabs__tab.pipeline-recruitment-tab .oh-btn,
    .oh-tabs__tab.pipeline-recruitment-tab button,
    .oh-tabs__tab.pipeline-recruitment-tab a,
    .oh-tabs__tab.pipeline-recruitment-tab .oh-btn--transparent,
    .oh-tabs__tab.pipeline-recruitment-tab .oh-btn--icon,
    .oh-tabs__tab.pipeline-recruitment-tab .oh-accordion-meta__btn, .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn,
    .oh-tabs__tab[data-target^="#tab_rec_"] button,
    .oh-tabs__tab[data-target^="#tab_rec_"] a,
    .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn--transparent,
    .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn--icon,
    .oh-tabs__tab[data-target^="#tab_rec_"] .oh-accordion-meta__btn {
      color: #000000 !important;
      background: rgba(0, 0, 0, 0.1) !important;
      border: 1px solid rgba(0, 0, 0, 0.15) !important;
      padding: 8px !important;
      border-radius: 6px !important;
      transition: all 0.2s ease !important;
      min-width: 32px !important;
      min-height: 32px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important; }
      .oh-tabs__tab.pipeline-recruitment-tab .oh-btn ion-icon,
      .oh-tabs__tab.pipeline-recruitment-tab button ion-icon,
      .oh-tabs__tab.pipeline-recruitment-tab a ion-icon,
      .oh-tabs__tab.pipeline-recruitment-tab .oh-btn--transparent ion-icon,
      .oh-tabs__tab.pipeline-recruitment-tab .oh-btn--icon ion-icon,
      .oh-tabs__tab.pipeline-recruitment-tab .oh-accordion-meta__btn ion-icon, .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn ion-icon,
      .oh-tabs__tab[data-target^="#tab_rec_"] button ion-icon,
      .oh-tabs__tab[data-target^="#tab_rec_"] a ion-icon,
      .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn--transparent ion-icon,
      .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn--icon ion-icon,
      .oh-tabs__tab[data-target^="#tab_rec_"] .oh-accordion-meta__btn ion-icon {
        font-size: 20px !important;
        color: #000000 !important; }
      .oh-tabs__tab.pipeline-recruitment-tab .oh-btn:hover,
      .oh-tabs__tab.pipeline-recruitment-tab button:hover,
      .oh-tabs__tab.pipeline-recruitment-tab a:hover,
      .oh-tabs__tab.pipeline-recruitment-tab .oh-btn--transparent:hover,
      .oh-tabs__tab.pipeline-recruitment-tab .oh-btn--icon:hover,
      .oh-tabs__tab.pipeline-recruitment-tab .oh-accordion-meta__btn:hover, .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn:hover,
      .oh-tabs__tab[data-target^="#tab_rec_"] button:hover,
      .oh-tabs__tab[data-target^="#tab_rec_"] a:hover,
      .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn--transparent:hover,
      .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn--icon:hover,
      .oh-tabs__tab[data-target^="#tab_rec_"] .oh-accordion-meta__btn:hover {
        background: rgba(0, 0, 0, 0.2) !important;
        color: #000000 !important;
        transform: translateY(-1px);
        border-color: rgba(0, 0, 0, 0.3) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }
        .oh-tabs__tab.pipeline-recruitment-tab .oh-btn:hover ion-icon,
        .oh-tabs__tab.pipeline-recruitment-tab button:hover ion-icon,
        .oh-tabs__tab.pipeline-recruitment-tab a:hover ion-icon,
        .oh-tabs__tab.pipeline-recruitment-tab .oh-btn--transparent:hover ion-icon,
        .oh-tabs__tab.pipeline-recruitment-tab .oh-btn--icon:hover ion-icon,
        .oh-tabs__tab.pipeline-recruitment-tab .oh-accordion-meta__btn:hover ion-icon, .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn:hover ion-icon,
        .oh-tabs__tab[data-target^="#tab_rec_"] button:hover ion-icon,
        .oh-tabs__tab[data-target^="#tab_rec_"] a:hover ion-icon,
        .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn--transparent:hover ion-icon,
        .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn--icon:hover ion-icon,
        .oh-tabs__tab[data-target^="#tab_rec_"] .oh-accordion-meta__btn:hover ion-icon {
          color: #000000 !important; }
      .oh-tabs__tab.pipeline-recruitment-tab .oh-btn:active,
      .oh-tabs__tab.pipeline-recruitment-tab button:active,
      .oh-tabs__tab.pipeline-recruitment-tab a:active,
      .oh-tabs__tab.pipeline-recruitment-tab .oh-btn--transparent:active,
      .oh-tabs__tab.pipeline-recruitment-tab .oh-btn--icon:active,
      .oh-tabs__tab.pipeline-recruitment-tab .oh-accordion-meta__btn:active, .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn:active,
      .oh-tabs__tab[data-target^="#tab_rec_"] button:active,
      .oh-tabs__tab[data-target^="#tab_rec_"] a:active,
      .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn--transparent:active,
      .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn--icon:active,
      .oh-tabs__tab[data-target^="#tab_rec_"] .oh-accordion-meta__btn:active {
        transform: translateY(0);
        background: rgba(0, 0, 0, 0.25) !important; }
    .oh-tabs__tab.pipeline-recruitment-tab ion-icon, .oh-tabs__tab[data-target^="#tab_rec_"] ion-icon {
      color: #000000 !important;
      font-size: 22px !important; }
    .oh-tabs__tab.pipeline-recruitment-tab .oh-btn--transparent:hover, .oh-tabs__tab[data-target^="#tab_rec_"] .oh-btn--transparent:hover {
      color: #000000 !important;
      background: rgba(0, 0, 0, 0.08) !important; }
    .oh-tabs__tab.pipeline-recruitment-tab:hover, .oh-tabs__tab[data-target^="#tab_rec_"]:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      background: #f7fafc !important; }
    .oh-tabs__tab.pipeline-recruitment-tab.oh-tabs__tab--active, .oh-tabs__tab[data-target^="#tab_rec_"].oh-tabs__tab--active {
      background: #ffffff !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      transform: translateY(-3px);
      border-bottom: 3px solid #f59e0b; }
      .oh-tabs__tab.pipeline-recruitment-tab.oh-tabs__tab--active::after, .oh-tabs__tab[data-target^="#tab_rec_"].oh-tabs__tab--active::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #f59e0b 0%, #2d3748 100%); }
  .oh-tabs__tab[data-manager="true"]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #f6ad55 0%, #ed8936 100%); }

/* ===========================
   PIPELINE STAGE HEADERS
   =========================== */
.pipeline-header {
  background: #ffffff !important;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: 1px solid #e2e8f0; }
  .pipeline-header:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px); }
  .pipeline-header[data-is-manager="true"] {
    background: #ffffff !important;
    border-left: 4px solid #ed8936; }
  .pipeline-header .oh-tabs__movable-title {
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    color: #2d3748 !important;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
    transition: all 0.3s ease; }
    .pipeline-header .oh-tabs__movable-title:focus {
      background: #ffffff !important;
      border-color: #f59e0b !important;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); }
    .pipeline-header .oh-tabs__movable-title::placeholder {
      color: #a0aec0; }

/* ===========================
   PIPELINE TOGGLE
   =========================== */
.pipeline-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease; }
  .pipeline-toggle:hover .oh-tabs__movable-title {
    background: #ffffff !important;
    transform: translateX(5px); }

/* ===========================
   STAGE BADGES
   =========================== */
.oh-tabs__input-badge-container {
  display: flex;
  align-items: center;
  gap: 0.5rem; }
  .oh-tabs__input-badge-container .oh-badge.stage_count, .oh-tabs__input-badge-container .oh-badge[id^="stageCount"], .oh-tabs__input-badge-container .oh-badge[id^="recruitmentCandidateCount"] {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(72, 187, 120, 0.3);
    transition: all 0.3s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1; }
    .oh-tabs__input-badge-container .oh-badge.stage_count:hover, .oh-tabs__input-badge-container .oh-badge[id^="stageCount"]:hover, .oh-tabs__input-badge-container .oh-badge[id^="recruitmentCandidateCount"]:hover {
      transform: scale(1.1);
      box-shadow: 0 5px 15px rgba(72, 187, 120, 0.5); }

/* ===========================
   AVATARS CONTAINER
   =========================== */
.avatars {
  display: flex;
  padding: 8px 10px; }
  .avatars .avatars__item {
    background-color: #596376;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 100%;
    color: #ffffff;
    display: block;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 700;
    height: 32px;
    width: 32px;
    line-height: 20px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    margin-left: -10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
    .avatars .avatars__item:first-child {
      z-index: 5;
      margin-left: 0; }
    .avatars .avatars__item:nth-child(2) {
      z-index: 4; }
    .avatars .avatars__item:nth-child(3) {
      z-index: 3; }
    .avatars .avatars__item:nth-child(4) {
      z-index: 2; }
    .avatars .avatars__item:nth-child(5) {
      z-index: 1; }
    .avatars .avatars__item img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .avatars .avatars__item:hover {
      transform: translateY(-3px) scale(1.15);
      z-index: 10 !important;
      border-color: #f59e0b !important;
      box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4); }
  .avatars:hover .avatars__item {
    margin-right: 10px; }

/* ===========================
   PIPELINE ACTION BUTTONS
   =========================== */
.pipeline-header .oh-btn--secondary-outline {
  background: #f7fafc !important;
  border: 2px solid #e2e8f0 !important;
  color: #2d3748 !important;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .pipeline-header .oh-btn--secondary-outline:hover {
    background: #edf2f7 !important;
    border-color: #cbd5e0 !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
  .pipeline-header .oh-btn--secondary-outline:active {
    transform: translateY(0); }

.pipeline-header .oh-btn--transparent {
  background: transparent !important;
  color: #2d3748 !important; }
  .pipeline-header .oh-btn--transparent:hover {
    background: #f7fafc !important; }

/* ===========================
   ANIMATIONS
   =========================== */
@keyframes tabShimmer {
  0%,
  100% {
    left: -100%; }
  50% {
    left: 100%; } }

@keyframes headerShimmer {
  0%,
  100% {
    left: -100%; }
  50% {
    left: 100%; } }

@keyframes headerGlow {
  0%,
  100% {
    opacity: 0.5; }
  50% {
    opacity: 1; } }

@keyframes activeTabGlow {
  0%,
  100% {
    opacity: 0.7;
    box-shadow: 0 0 10px rgba(72, 187, 120, 0.5); }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(72, 187, 120, 0.8); } }

@keyframes managerPulse {
  0%,
  100% {
    opacity: 0.6; }
  50% {
    opacity: 1; } }

@keyframes badgePulse {
  0%,
  100% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); } }

/* ===========================
   PIPELINE ITEMS (Stages)
   =========================== */
.oh-kanban__section.pipeline_item {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease; }
  .oh-kanban__section.pipeline_item:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12); }

.oh-kanban__section-head.stage {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important;
  border-bottom: 2px solid #e2e8f0;
  padding: 1rem;
  border-radius: 12px 12px 0 0; }
  .oh-kanban__section-head.stage[data-is-manager="true"] {
    background: linear-gradient(135deg, #fff5ec 0%, #ffe5d3 100%) !important;
    border-bottom-color: #f6ad55; }
  .oh-kanban__section-head.stage .oh-kanban__section-title {
    font-weight: 600;
    color: #2d3748; }

/* ===========================
   STAGE HEADER BUTTONS
   =========================== */
.pipeline-header button.oh-btn.oh-stop-prop,
.pipeline-header button[title*="Edit"].oh-btn,
.pipeline-header button.oh-btn--transparent,
.pipeline-header button.oh-accordion-meta__btn,
.pipeline-header .oh-btn,
.pipeline-header button,
.pipeline-header a,
.pipeline-header form button,
.pipeline-header .oh-btn--transparent,
.pipeline-header .oh-btn--icon,
.pipeline-header .oh-accordion-meta__btn {
  color: #000000 !important;
  background: rgba(0, 0, 0, 0.1) !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-width: 1px !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  padding: 8px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important; }
  .pipeline-header button.oh-btn.oh-stop-prop ion-icon,
  .pipeline-header button[title*="Edit"].oh-btn ion-icon,
  .pipeline-header button.oh-btn--transparent ion-icon,
  .pipeline-header button.oh-accordion-meta__btn ion-icon,
  .pipeline-header .oh-btn ion-icon,
  .pipeline-header button ion-icon,
  .pipeline-header a ion-icon,
  .pipeline-header form button ion-icon,
  .pipeline-header .oh-btn--transparent ion-icon,
  .pipeline-header .oh-btn--icon ion-icon,
  .pipeline-header .oh-accordion-meta__btn ion-icon {
    font-size: 20px !important;
    color: #000000 !important; }
  .pipeline-header button.oh-btn.oh-stop-prop:hover,
  .pipeline-header button[title*="Edit"].oh-btn:hover,
  .pipeline-header button.oh-btn--transparent:hover,
  .pipeline-header button.oh-accordion-meta__btn:hover,
  .pipeline-header .oh-btn:hover,
  .pipeline-header button:hover,
  .pipeline-header a:hover,
  .pipeline-header form button:hover,
  .pipeline-header .oh-btn--transparent:hover,
  .pipeline-header .oh-btn--icon:hover,
  .pipeline-header .oh-accordion-meta__btn:hover {
    background: rgba(0, 0, 0, 0.2) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }
    .pipeline-header button.oh-btn.oh-stop-prop:hover ion-icon,
    .pipeline-header button[title*="Edit"].oh-btn:hover ion-icon,
    .pipeline-header button.oh-btn--transparent:hover ion-icon,
    .pipeline-header button.oh-accordion-meta__btn:hover ion-icon,
    .pipeline-header .oh-btn:hover ion-icon,
    .pipeline-header button:hover ion-icon,
    .pipeline-header a:hover ion-icon,
    .pipeline-header form button:hover ion-icon,
    .pipeline-header .oh-btn--transparent:hover ion-icon,
    .pipeline-header .oh-btn--icon:hover ion-icon,
    .pipeline-header .oh-accordion-meta__btn:hover ion-icon {
      color: #000000 !important; }
  .pipeline-header button.oh-btn.oh-stop-prop:active,
  .pipeline-header button[title*="Edit"].oh-btn:active,
  .pipeline-header button.oh-btn--transparent:active,
  .pipeline-header button.oh-accordion-meta__btn:active,
  .pipeline-header .oh-btn:active,
  .pipeline-header button:active,
  .pipeline-header a:active,
  .pipeline-header form button:active,
  .pipeline-header .oh-btn--transparent:active,
  .pipeline-header .oh-btn--icon:active,
  .pipeline-header .oh-accordion-meta__btn:active {
    transform: translateY(0) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    background-color: rgba(0, 0, 0, 0.25) !important; }

.pipeline-header form {
  display: inline-block !important;
  margin: 0 !important; }

.pipeline-header ion-icon {
  color: #000000 !important;
  font-size: 20px !important; }

/* ===========================
   CANDIDATE ROW ACTION BUTTONS
   =========================== */
.oh-btn.candidate-action-btn,
button.candidate-action-btn,
a.candidate-action-btn,
.oh-btn--light.candidate-action-btn {
  color: #000000 !important;
  background: rgba(0, 0, 0, 0.1) !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 6px !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important; }
  .oh-btn.candidate-action-btn ion-icon,
  button.candidate-action-btn ion-icon,
  a.candidate-action-btn ion-icon,
  .oh-btn--light.candidate-action-btn ion-icon {
    font-size: 16px !important;
    color: #000000 !important; }
  .oh-btn.candidate-action-btn:hover,
  button.candidate-action-btn:hover,
  a.candidate-action-btn:hover,
  .oh-btn--light.candidate-action-btn:hover {
    background: rgba(0, 0, 0, 0.2) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }
    .oh-btn.candidate-action-btn:hover ion-icon,
    button.candidate-action-btn:hover ion-icon,
    a.candidate-action-btn:hover ion-icon,
    .oh-btn--light.candidate-action-btn:hover ion-icon {
      color: #000000 !important; }
  .oh-btn.candidate-action-btn:active,
  button.candidate-action-btn:active,
  a.candidate-action-btn:active,
  .oh-btn--light.candidate-action-btn:active {
    transform: translateY(0) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    background-color: rgba(0, 0, 0, 0.25) !important; }

/* ===========================
   DROPDOWNS IN PIPELINE
   =========================== */
.pipeline-header .oh-dropdown__menu,
.oh-tabs__tab .oh-dropdown__menu {
  background: #f7f7f5;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.1); }

.pipeline-header .oh-dropdown__link,
.oh-tabs__tab .oh-dropdown__link {
  color: #2d3748;
  transition: all 0.2s ease; }
  .pipeline-header .oh-dropdown__link:hover,
  .oh-tabs__tab .oh-dropdown__link:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%);
    color: #ffffff !important; }
  .pipeline-header .oh-dropdown__link--danger:hover,
  .oh-tabs__tab .oh-dropdown__link--danger:hover {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: #ffffff !important; }

/* ===========================
   EMPLOYEE MODULE CARDS
   =========================== */
.oh-kanban-card.manager-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(45, 55, 72, 0.08) 100%) !important;
  border-left: 3px solid #f59e0b !important;
  transition: all 0.3s ease; }
  .oh-kanban-card.manager-card:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(45, 55, 72, 0.12) 100%) !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
    transform: translateY(-2px); }

/* ===========================
   ONBOARDING MODULE
   =========================== */
.oh-table tr.manager-row,
.oh-sticky-table tr.manager-row {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(45, 55, 72, 0.08) 100%) !important;
  border-left: 3px solid #f59e0b !important; }
  .oh-table tr.manager-row:hover,
  .oh-sticky-table tr.manager-row:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(45, 55, 72, 0.12) 100%) !important; }
  .oh-table tr.manager-row td,
  .oh-sticky-table tr.manager-row td {
    background: transparent !important; }

.oh-kanban__section-head.manager-section {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  color: #ffffff !important;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25);
  padding: 1rem;
  position: relative; }
  .oh-kanban__section-head.manager-section .oh-kanban__section-title {
    color: #ffffff !important;
    font-weight: 600; }
  .oh-kanban__section-head.manager-section .oh-btn,
  .oh-kanban__section-head.manager-section ion-icon {
    color: #ffffff !important; }

.oh-tabs__tab.onboarding-tab-manager {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  color: #ffffff !important;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }
  .oh-tabs__tab.onboarding-tab-manager:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4); }

/* ===========================
   TABLE HEADERS - WHITE BACKGROUND
   =========================== */
.oh-table-config__tr--head,
.oh-sticky-table__tr--head {
  background: #ffffff !important; }
  .oh-table-config__tr--head .oh-sticky-table__th,
  .oh-table-config__tr--head .oh-table-config__th,
  .oh-sticky-table__tr--head .oh-sticky-table__th,
  .oh-sticky-table__tr--head .oh-table-config__th {
    background: #ffffff !important;
    color: #2d3748 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #e2e8f0 !important; }

/* ===========================
   RESPONSIVE ADJUSTMENTS
   =========================== */
@media (max-width: 768px) {
  .pipeline-header {
    padding: 0.75rem 1rem;
    border-radius: 8px; }
    .pipeline-header .oh-tabs__movable-title {
      min-width: 250px !important;
      max-width: 100% !important; }
  .avatars .avatars__item {
    height: 28px;
    width: 28px;
    font-size: 11px; }
  .oh-tabs__tab.pipeline-recruitment-tab {
    border-radius: 8px 8px 0 0; } }

/* ================================
   EMPLOYEE MODULE STYLES
   Modern & Vibrant Theme
   ================================ */
/* ===========================
   EMPLOYEE CARDS
   =========================== */
.oh-kanban-card {
  background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(245, 158, 11, 0.1) !important;
  overflow: hidden;
  position: relative; }
  .oh-kanban-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b 0%, #2d3748 50%, #f59e0b 100%);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s ease; }
  .oh-kanban-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(245, 158, 11, 0.2) !important;
    border-color: rgba(245, 158, 11, 0.3) !important; }
    .oh-kanban-card:hover::before {
      opacity: 1; }
  .oh-kanban-card.manager-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(45, 55, 72, 0.05) 100%) !important;
    border-left: 4px solid #f59e0b !important; }
    .oh-kanban-card.manager-card::before {
      opacity: 1;
      height: 4px; }
    .oh-kanban-card.manager-card:hover {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(45, 55, 72, 0.12) 100%) !important;
      box-shadow: 0 12px 40px rgba(245, 158, 11, 0.25) !important; }

.oh-kanban-card__avatar {
  margin-bottom: 1rem; }
  .oh-kanban-card__avatar .oh-kanban-card__profile-container {
    position: relative; }
    .oh-kanban-card__avatar .oh-kanban-card__profile-container::after {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%);
      opacity: 0;
      z-index: -1;
      transition: opacity 0.3s ease; }
  .oh-kanban-card__avatar .oh-kanban-card__profile-image {
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; }

.oh-kanban-card:hover .oh-kanban-card__profile-container::after {
  opacity: 0.6; }

.oh-kanban-card:hover .oh-kanban-card__profile-image {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3); }

.oh-kanban-card__details .oh-kanban-card__title {
  font-weight: 700;
  color: #2d3748;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
  transition: color 0.3s ease; }

.oh-kanban-card__details .oh-kanban-card__subtitle {
  color: #718096;
  font-size: 0.875rem;
  transition: color 0.3s ease; }

.oh-kanban-card:hover .oh-kanban-card__title {
  color: #f59e0b; }

.oh-kanban-card.manager-card .oh-kanban-card__title {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; }

.oh-dot {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease; }
  .oh-dot[style*="yellowgreen"] {
    background-color: #48bb78 !important;
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.2), 0 0 8px rgba(72, 187, 120, 0.4); }

.oh-kanban-card__dots {
  opacity: 0;
  transition: opacity 0.3s ease; }
  .oh-kanban-card__dots .oh-btn {
    color: #718096;
    transition: all 0.3s ease; }
    .oh-kanban-card__dots .oh-btn:hover {
      color: #f59e0b;
      background: rgba(245, 158, 11, 0.1); }

.oh-kanban-card:hover .oh-kanban-card__dots {
  opacity: 1; }

/* ===========================
   EMPLOYEE VIEW LAYOUT
   =========================== */
.oh-layout--grid-3 {
  display: grid;
  gap: 1.5rem; }
  @media (min-width: 768px) {
    .oh-layout--grid-3 {
      grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) {
    .oh-layout--grid-3 {
      grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1440px) {
    .oh-layout--grid-3 {
      grid-template-columns: repeat(4, 1fr); } }
/* ===========================
   EMPLOYEE HEADER/TITLE BAR
   =========================== */
.oh-main__titlebar-title {
  font-weight: 700;
  color: #2d3748 !important; }

/* ===========================
   FILTER AND ACTION BUTTONS
   =========================== */
.oh-btn.oh-btn--primary {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  transition: all 0.3s ease; }
  .oh-btn.oh-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); }

/* ===========================
   SEARCH AND FILTER SECTION
   =========================== */
.oh-filter-tag-container .oh-filter-tag {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(45, 55, 72, 0.1) 100%);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border-radius: 20px;
  padding: 6px 16px;
  transition: all 0.3s ease; }
  .oh-filter-tag-container .oh-filter-tag:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(45, 55, 72, 0.15) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2); }

/* ===========================
   PAGINATION
   =========================== */
.oh-pagination .oh-pagination__link {
  color: #f59e0b;
  transition: all 0.3s ease;
  border-radius: 8px; }
  .oh-pagination .oh-pagination__link:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(45, 55, 72, 0.1) 100%);
    transform: translateY(-2px); }

.oh-pagination .oh-pagination__input {
  border: 2px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease; }
  .oh-pagination .oh-pagination__input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); }

/* ===========================
   SEARCH BAR
   =========================== */
.oh-input__search-group {
  position: relative;
  transition: all 0.3s ease; }
  .oh-input__search-group .oh-input {
    border: 2px solid rgba(245, 158, 11, 0.2) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease;
    padding-left: 45px !important; }
    .oh-input__search-group .oh-input:focus {
      border-color: #f59e0b !important;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1) !important;
      background: #ffffff; }
    .oh-input__search-group .oh-input::placeholder {
      color: #a0aec0; }
  .oh-input__search-group .oh-input-group__icon {
    color: #f59e0b;
    font-size: 1.2rem; }

#dropdown,
.custom-dropdown {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important; }
  #dropdown[style*="display: block"], #dropdown[style*="display:block"],
  .custom-dropdown[style*="display: block"],
  .custom-dropdown[style*="display:block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important; }

/* ===========================
   VIEW TOGGLE BUTTONS
   =========================== */
.oh-view-types {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0 !important;
  list-style: none; }
  .oh-view-types .oh-view-type {
    position: relative; }
    .oh-view-types .oh-view-type::before, .oh-view-types .oh-view-type::after {
      display: none !important;
      content: none !important; }
    .oh-view-types .oh-view-type .oh-btn--view {
      background: #ffffff !important;
      border: 2px solid rgba(226, 232, 240, 0.5) !important;
      border-radius: 10px !important;
      padding: 8px 12px !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      color: #4a5568 !important;
      position: relative;
      overflow: hidden !important; }
      .oh-view-types .oh-view-type .oh-btn--view::before, .oh-view-types .oh-view-type .oh-btn--view::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important; }
      .oh-view-types .oh-view-type .oh-btn--view *::before, .oh-view-types .oh-view-type .oh-btn--view *::after {
        display: none !important;
        content: none !important; }
      .oh-view-types .oh-view-type .oh-btn--view ion-icon {
        font-size: 1.2rem;
        color: #4a5568 !important; }
        .oh-view-types .oh-view-type .oh-btn--view ion-icon::before, .oh-view-types .oh-view-type .oh-btn--view ion-icon::after {
          display: none !important;
          content: none !important; }
      .oh-view-types .oh-view-type .oh-btn--view:hover {
        border-color: #cbd5e0 !important;
        background: #f7fafc !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(45, 55, 72, 0.15); }
      .oh-view-types .oh-view-type .oh-btn--view.oh-btn--view-active {
        background: #2d3748 !important;
        border-color: #2d3748 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(45, 55, 72, 0.3); }
        .oh-view-types .oh-view-type .oh-btn--view.oh-btn--view-active ion-icon {
          color: #ffffff !important; }
        .oh-view-types .oh-view-type .oh-btn--view.oh-btn--view-active:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(45, 55, 72, 0.4);
          background: #1a202c !important; }
  .oh-view-types li.oh-view-type::before, .oh-view-types li.oh-view-type::after {
    display: none !important;
    content: none !important; }

/* ===========================
   ACTION BUTTONS (Filter, Group By, Actions)
   =========================== */
.oh-main__titlebar-button-container {
  display: flex;
  align-items: center;
  gap: 0.5rem; }
  .oh-main__titlebar-button-container .oh-btn {
    background: #ffffff !important;
    border: 2px solid rgba(245, 158, 11, 0.2) !important;
    border-radius: 10px !important;
    color: #f59e0b !important;
    font-weight: 600;
    padding: 8px 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; }
    .oh-main__titlebar-button-container .oh-btn ion-icon {
      font-size: 1.1rem; }
    .oh-main__titlebar-button-container .oh-btn:hover {
      border-color: #f59e0b !important;
      background: rgba(245, 158, 11, 0.05) !important;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15); }
    .oh-main__titlebar-button-container .oh-btn.oh-btn--secondary {
      background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
      border: none !important;
      color: #ffffff !important;
      box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }
      .oh-main__titlebar-button-container .oh-btn.oh-btn--secondary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); }

/* ===========================
   TITLE BAR
   =========================== */
.oh-main__titlebar .oh-main__titlebar-title {
  font-weight: 700 !important;
  color: #2d3748 !important;
  font-size: 1.5rem; }

.oh-main__titlebar .oh-main__titlebar-search-toggle {
  color: #f59e0b;
  transition: all 0.3s ease; }
  .oh-main__titlebar .oh-main__titlebar-search-toggle:hover {
    color: #2d3748;
    transform: scale(1.1); }

/* ===========================
   ONLINE/OFFLINE INDICATORS
   =========================== */
.oh-kanban-card .oh-dot[style*="background-color: yellowgreen"], .oh-kanban-card .oh-dot[style*="background: yellowgreen"] {
  background-color: #48bb78 !important;
  background: #48bb78 !important;
  box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.2), 0 0 10px rgba(72, 187, 120, 0.4) !important; }

/* ===========================
   EMPLOYEE PROFILE PAGE
   =========================== */
.oh-profile-header,
.employee-profile-header {
  background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden; }
  .oh-profile-header::before,
  .employee-profile-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b 0%, #2d3748 50%, #f59e0b 100%);
    background-size: 200% 100%; }

.oh-profile__avatar,
.employee-avatar {
  position: relative;
  display: inline-block; }
  .oh-profile__avatar img,
  .employee-avatar img {
    border: 0px;
    box-shadow: none;
    border-radius: 50%; }
  .oh-profile__avatar .online-status,
  .employee-avatar .online-status {
    background-color: #48bb78;
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.2), 0 0 10px rgba(72, 187, 120, 0.4); }

.oh-tabs .oh-tabs__tablist,
.profile-tabs .oh-tabs__tablist {
  border-bottom: 2px solid rgba(245, 158, 11, 0.1);
  margin-bottom: 2rem; }

.oh-tabs .oh-tabs__tab,
.profile-tabs .oh-tabs__tab {
  padding: 0.75rem 1.5rem;
  margin-right: 0.5rem;
  border: none;
  background: transparent;
  color: #718096;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer; }
  .oh-tabs .oh-tabs__tab:hover,
  .profile-tabs .oh-tabs__tab:hover {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
    border-bottom-color: rgba(245, 158, 11, 0.3); }
  .oh-tabs .oh-tabs__tab.oh-tabs__tab--active, .oh-tabs .oh-tabs__tab.active,
  .profile-tabs .oh-tabs__tab.oh-tabs__tab--active,
  .profile-tabs .oh-tabs__tab.active {
    color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(45, 55, 72, 0.1) 100%);
    border-bottom-color: #f59e0b;
    border-bottom-width: 3px; }

.oh-card,
.info-card,
.oh-profile-section {
  background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(245, 158, 11, 0.1);
  transition: all 0.3s ease; }
  .oh-card:hover,
  .info-card:hover,
  .oh-profile-section:hover {
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.2); }
  .oh-card h3, .oh-card .h3,
  .oh-card h4,
  .oh-card .h4,
  .oh-card .card-title,
  .info-card h3,
  .info-card .h3,
  .info-card h4,
  .info-card .h4,
  .info-card .card-title,
  .oh-profile-section h3,
  .oh-profile-section .h3,
  .oh-profile-section h4,
  .oh-profile-section .h4,
  .oh-profile-section .card-title {
    color: #000000;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem; }
  .oh-card dt,
  .oh-card .label,
  .info-card dt,
  .info-card .label,
  .oh-profile-section dt,
  .oh-profile-section .label {
    color: #718096;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem; }
  .oh-card dd,
  .oh-card .value,
  .info-card dd,
  .info-card .value,
  .oh-profile-section dd,
  .oh-profile-section .value {
    color: #2d3748;
    font-weight: 500;
    margin-bottom: 1rem; }

.oh-btn--icon.oh-btn,
button[title*="Edit"].oh-btn,
a[href*="update"].oh-btn {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 2px solid rgba(245, 158, 11, 0.2) !important;
  color: #f59e0b !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  transition: all 0.3s ease; }
  .oh-btn--icon.oh-btn:hover,
  button[title*="Edit"].oh-btn:hover,
  a[href*="update"].oh-btn:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }

/* ===========================
   DOCUMENT REQUEST STYLES
   =========================== */
.oh-accordion-meta {
  position: relative; }
  .oh-accordion-meta .oh-accordion-meta__item {
    position: relative; }
  .oh-accordion-meta .oh-accordion-meta__body {
    position: relative;
    z-index: 1; }

.oh-accordion-meta__header {
  background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%) !important;
  border-radius: 12px !important;
  padding: 1rem 1.5rem !important;
  margin-bottom: 1rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(245, 158, 11, 0.1) !important;
  position: relative; }
  .oh-accordion-meta__header:hover {
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15) !important;
    transform: translateY(-2px);
    border-color: rgba(245, 158, 11, 0.2) !important; }
  .oh-accordion-meta__header.oh-accordion-meta__header--show {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(45, 55, 72, 0.05) 100%) !important;
    border-left: 4px solid #f59e0b !important;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15) !important; }
  .oh-accordion-meta__header .oh-accordion-meta__title {
    color: #2d3748;
    font-weight: 600; }
  .oh-accordion-meta__header .oh-checkpoint-badge {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(72, 187, 120, 0.3);
    transition: all 0.3s ease; }
    .oh-accordion-meta__header .oh-checkpoint-badge:hover {
      transform: scale(1.05);
      box-shadow: 0 5px 15px rgba(72, 187, 120, 0.5); }
  .oh-accordion-meta__header .oh-accordion-meta__actions {
    position: relative !important;
    z-index: 10; }
    .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown {
      position: relative !important; }
      .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown button {
        pointer-events: auto !important; }
      .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown .oh-dropdown__menu,
      .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown .oh-dropdown__menu--right {
        position: absolute !important;
        top: calc(100% + 0.25rem) !important;
        right: 0 !important;
        left: auto !important;
        z-index: 1001 !important;
        margin-top: 0 !important;
        transform: none !important;
        pointer-events: auto !important; }
        .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown .oh-dropdown__menu ul,
        .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown .oh-dropdown__menu li,
        .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown .oh-dropdown__menu a,
        .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown .oh-dropdown__menu button,
        .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown .oh-dropdown__menu--right ul,
        .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown .oh-dropdown__menu--right li,
        .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown .oh-dropdown__menu--right a,
        .oh-accordion-meta__header .oh-accordion-meta__actions .oh-dropdown .oh-dropdown__menu--right button {
          pointer-events: auto !important; }

.file-upload {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
  position: relative;
  overflow: hidden; }
  .file-upload ion-icon {
    font-size: 1.5rem !important;
    color: #ffffff !important;
    margin: 0 !important;
    transition: transform 0.3s ease; }
  .file-upload::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease; }
  .file-upload:hover {
    transform: translateY(-3px) scale(1.1) !important;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3) !important;
    background: #2d3748 !important; }
    .file-upload:hover::before {
      opacity: 1; }
    .file-upload:hover ion-icon {
      transform: rotate(90deg) scale(1.2); }
  .file-upload:active {
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important; }

.oh-badge.file-upload[title*="Approved"] {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  color: #ffffff !important; }
  .oh-badge.file-upload[title*="Approved"] ion-icon[name="checkmark"] {
    color: #ffffff !important; }
  .oh-badge.file-upload[title*="Approved"]:hover {
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%) !important; }

.oh-badge.file-upload[title*="Rejected"] {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;
  color: #ffffff !important; }
  .oh-badge.file-upload[title*="Rejected"] ion-icon[name="alert"] {
    color: #ffffff !important; }
  .oh-badge.file-upload[title*="Rejected"]:hover {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important; }

.oh-badge.file-upload[title*="File Uploaded"] {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
  color: #ffffff !important; }
  .oh-badge.file-upload[title*="File Uploaded"] ion-icon[name="image-outline"] {
    color: #ffffff !important; }
  .oh-badge.file-upload[title*="File Uploaded"]:hover {
    background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%) !important; }

.oh-user_permission-list_item {
  background: #ffffff !important;
  border-radius: 12px !important;
  margin-bottom: 0.75rem !important;
  padding: 1rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease;
  border: 1px solid rgba(245, 158, 11, 0.1) !important; }
  .oh-user_permission-list_item:hover {
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15) !important;
    transform: translateY(-2px);
    border-color: rgba(245, 158, 11, 0.2) !important; }
  .oh-user_permission-list_item.row-status--yellow,
  .oh-user_permission-list_item .row-status--yellow {
    border-left: 4px solid #48bb78 !important;
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.03) 0%, rgba(56, 161, 105, 0.03) 100%) !important; }
  .oh-user_permission-list_item.row-status--red,
  .oh-user_permission-list_item .row-status--red {
    border-left: 4px solid #f56565 !important;
    background: linear-gradient(135deg, rgba(245, 101, 101, 0.03) 0%, rgba(229, 62, 62, 0.03) 100%) !important; }
  .oh-user_permission-list_item.row-status--blue,
  .oh-user_permission-list_item .row-status--blue {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.03) 0%, rgba(45, 55, 72, 0.03) 100%) !important; }

.oh-user_permission-list_item .oh-btn-group {
  display: flex;
  gap: 0.5rem; }
  .oh-user_permission-list_item .oh-btn-group .oh-btn {
    border-radius: 10px !important;
    transition: all 0.3s ease; }
    .oh-user_permission-list_item .oh-btn-group .oh-btn--success {
      background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
      border: none !important;
      color: #ffffff !important; }
      .oh-user_permission-list_item .oh-btn-group .oh-btn--success:hover {
        background: linear-gradient(135deg, #38a169 0%, #2f855a 100%) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3); }
      .oh-user_permission-list_item .oh-btn-group .oh-btn--success.oh-btn--disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important; }
    .oh-user_permission-list_item .oh-btn-group .oh-btn--danger {
      background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;
      border: none !important;
      color: #ffffff !important; }
      .oh-user_permission-list_item .oh-btn-group .oh-btn--danger:hover {
        background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(245, 101, 101, 0.3); }
      .oh-user_permission-list_item .oh-btn-group .oh-btn--danger.oh-btn--disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important; }
    .oh-user_permission-list_item .oh-btn-group .oh-btn--secondary {
      background: rgba(245, 158, 11, 0.1) !important;
      border: 2px solid rgba(245, 158, 11, 0.2) !important;
      color: #f59e0b !important; }
      .oh-user_permission-list_item .oh-btn-group .oh-btn--secondary:hover {
        background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
        border-color: #f59e0b !important;
        color: #ffffff !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }

/* ===========================
   RESPONSIVE ADJUSTMENTS
   =========================== */
@media (max-width: 768px) {
  .oh-kanban-card {
    border-radius: 12px !important; }
    .oh-kanban-card:hover {
      transform: translateY(-4px) !important; }
  .oh-layout--grid-3 {
    gap: 1rem; }
  .oh-main__titlebar-button-container {
    flex-wrap: wrap;
    gap: 0.5rem; }
    .oh-main__titlebar-button-container .oh-btn {
      font-size: 0.875rem;
      padding: 6px 12px !important; }
  .oh-view-types {
    gap: 0.25rem; } }

.oh-main__titlebar-title {
  color: #2d3748 !important;
  font-weight: 700 !important;
  font-size: 2rem !important; }

.oh-inner-sidebar {
  background: #f8f9ff !important;
  border-radius: 16px !important;
  padding: 1.5rem 1rem !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08) !important; }

.oh-inner-sidebar__link {
  padding: 0.75rem 1rem !important;
  border-radius: 10px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 500 !important;
  color: #4a5568 !important;
  display: flex !important;
  align-items: center !important; }
  .oh-inner-sidebar__link:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(45, 55, 72, 0.1) 100%) !important;
    transform: translateX(5px) !important;
    color: #f59e0b !important;
    text-decoration: none !important; }

.oh-inner-sidebar__link--active {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25) !important; }
  .oh-inner-sidebar__link--active:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
    color: #ffffff !important;
    transform: translateX(5px) !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35) !important; }

.oh-accordion-header {
  font-weight: 700 !important;
  color: #2d3748 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  margin-bottom: 0.5rem !important; }
  .oh-accordion-header ion-icon {
    color: #f59e0b !important; }

.oh-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.1) !important;
  padding: 2rem !important;
  transition: all 0.3s ease !important; }
  .oh-card:hover {
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.12) !important; }

.oh-wrapper .oh-main__topbar {
  margin-bottom: 2rem !important; }

h3, .h3,
h4,
.h4,
h5,
.h5 {
  color: #2d3748 !important;
  font-weight: 700 !important; }

.oh-btn {
  border-radius: 12px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important; }

.oh-btn--light,
.oh-btn-secondary {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(45, 55, 72, 0.05) 100%) !important;
  color: #f59e0b !important;
  border: 2px solid rgba(245, 158, 11, 0.2) !important; }
  .oh-btn--light:hover,
  .oh-btn-secondary:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(45, 55, 72, 0.1) 100%) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important; }

.oh-input,
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  padding: 0.75rem 1rem !important;
  transition: all 0.3s ease !important;
  background: #ffffff !important; }
  .oh-input:focus,
  .form-control:focus,
  input[type="text"]:focus,
  input[type="number"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  select:focus,
  textarea:focus {
    outline: none !important; }

.form-check-input[type="checkbox"] {
  width: 3rem !important;
  height: 1.5rem !important;
  border-radius: 2rem !important;
  background-color: #e2e8f0 !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.3s ease !important; }
  .form-check-input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important; }
  .form-check-input[type="checkbox"]:focus {
    border: none !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15) !important; }

.form-label,
.oh-label,
label {
  font-weight: 600 !important;
  color: #2d3748 !important;
  margin-bottom: 0.5rem !important; }

.form-text,
.help-text,
small,
.small {
  color: #718096 !important;
  font-size: 0.875rem !important; }

hr {
  border-color: rgba(245, 158, 11, 0.1) !important;
  margin: 2rem 0 !important; }

ion-icon {
  transition: color 0.3s ease !important; }

.oh-inner-sidebar-toggle {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  color: #ffffff !important;
  border: none !important;
  margin-bottom: 1rem !important; }
  .oh-inner-sidebar-toggle:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3) !important;
    color: #ffffff !important; }

@media (max-width: 991.98px) {
  .oh-inner-sidebar {
    margin-bottom: 1.5rem !important; } }

.alert {
  border-radius: 12px !important;
  border-left-width: 4px !important;
  padding: 1rem 1.25rem !important; }

.alert-info {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(45, 55, 72, 0.05) 100%) !important;
  border-left-color: #f59e0b !important;
  color: #3730a3 !important; }

.oh-input-group {
  margin-bottom: 0.5rem !important; }

.settings-label {
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #2d3748 !important;
  margin-bottom: 1rem !important; }

.perm-count {
  color: #718096 !important;
  font-style: italic !important;
  font-size: 0.875rem !important; }

.module-card {
  background: white !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.08) !important;
  border: 2px solid rgba(245, 158, 11, 0.1) !important;
  padding: 1.5rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  height: 100% !important; }
  .module-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important; }

.oh-card__header {
  margin-bottom: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 2px solid rgba(245, 158, 11, 0.1) !important; }

.module-card .oh-card__title {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  margin-bottom: 0 !important; }

.oh-card__body {
  padding: 0 !important; }

.oh-badge {
  padding: 0.375rem 0.75rem !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important; }

.oh-badge--success {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3) !important; }

.oh-badge--danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important; }

.module-info {
  padding: 0.75rem 1rem !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(45, 55, 72, 0.05) 100%) !important;
  border-radius: 8px !important;
  border-left: 3px solid #f59e0b !important; }

.oh-btn--danger,
.module-toggle-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 100% !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important; }
  .oh-btn--danger:hover,
  .module-toggle-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4) !important;
    color: white !important; }
  .oh-btn--danger:active,
  .module-toggle-btn:active {
    transform: translateY(0) !important; }

.oh-btn--success {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 100% !important;
  box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3) !important; }
  .oh-btn--success:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(72, 187, 120, 0.4) !important;
    color: white !important; }
  .oh-btn--success:active {
    transform: translateY(0) !important; }

.module-disabled {
  opacity: 0.6 !important;
  background: linear-gradient(135deg, rgba(108, 117, 125, 0.05) 0%, rgba(108, 117, 125, 0.05) 100%) !important; }
  .module-disabled .oh-card__title {
    color: #6c757d !important;
    background: none !important;
    -webkit-text-fill-color: #6c757d !important; }

.oh-titlebar__title {
  background: linear-gradient(135deg, #f59e0b 0%, #2d3748 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  font-size: 2rem !important; }

.oh-titlebar__description {
  color: #718096 !important;
  font-size: 1rem !important;
  margin-top: 0.5rem !important; }

.g-3 {
  --bs-gutter-x: 1.5rem !important;
  --bs-gutter-y: 1.5rem !important; }

@media (max-width: 991.98px) {
  .module-card {
    margin-bottom: 1.5rem !important; } }

.navbar-new-design {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #f3f4f1 !important;
  height: 90px; }
  .navbar-new-design::before {
    display: none !important; }
  .navbar-new-design__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    height: 100%;
    padding: 0 20px 0 33px; }
  .navbar-new-design__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0; }
  .navbar-new-design__logo-pill {
    background: #ffffff !important;
    border-radius: 100px !important;
    padding: 8px 24px !important;
    min-height: 55px;
    display: flex;
    align-items: center;
    gap: 2px; }
  .navbar-new-design__logo-hr {
    font-family: "Inter", sans-serif;
    font-size: 37px;
    font-weight: 900;
    font-style: italic;
    color: #000 !important;
    line-height: 1;
    letter-spacing: -1px; }
  .navbar-new-design__logo-number {
    font-family: "Inter", sans-serif;
    font-size: 37px;
    font-weight: 100;
    font-style: italic;
    color: #000 !important;
    line-height: 1;
    letter-spacing: 0; }
  .navbar-new-design__logo-subtitle {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1; }
  .navbar-new-design__logo-subtitle-line1, .navbar-new-design__logo-subtitle-line2 {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 200;
    font-style: normal;
    color: #000 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.1; }
  .navbar-new-design__home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    background: #ffffff;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0; }
    .navbar-new-design__home-btn:hover {
      background: #ffffff; }
    .navbar-new-design__home-btn.active {
      background: #ffffff; }
  .navbar-new-design__home-icon {
    width: 24px;
    height: 24px;
    transition: filter 0.2s ease; }
  .navbar-new-design__center {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 70px; }
  .navbar-new-design__menu {
    display: flex;
    list-style: none;
    gap: 4px;
    margin: 0;
    padding: 6px;
    min-height: 55px;
    flex-grow: 0;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border: none;
    border-radius: 100px; }
  .navbar-new-design__menu-item {
    margin: 0;
    padding: 0; }
  .navbar-new-design__menu-link {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    color: #757575 !important;
    text-decoration: none;
    font-size: 18px;
    font-weight: 300;
    font-variation-settings: "opsz" 14;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    padding: 8px 24px;
    border-radius: 100px;
    position: relative;
    white-space: nowrap; }
    .navbar-new-design__menu-link:hover {
      background: #ffffff !important;
      color: #000 !important;
      font-weight: 300;
      box-shadow: none; }
    .navbar-new-design__menu-link.active {
      background: #ffffff !important;
      color: #000 !important;
      font-weight: 500;
      box-shadow: none; }
  .navbar-new-design__apps-icon {
    position: relative;
    width: 55px;
    height: 55px;
    border-radius: 100px !important;
    background: #ffffff !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease; }
    .navbar-new-design__apps-icon:hover {
      background: #eeeee8 !important; }
    .navbar-new-design__apps-icon ion-icon {
      font-size: 24px;
      color: #757575 !important; }
    .navbar-new-design__apps-icon .apps-grid-icon #apps-square-1 {
      animation: fillGreen 1.5s ease-in-out 2; }
    .navbar-new-design__apps-icon .apps-grid-icon #apps-square-2 {
      animation: fillPurple 1.5s ease-in-out 2; }
    .navbar-new-design__apps-icon .apps-grid-icon #apps-square-3 {
      animation: fillRed 1.5s ease-in-out 2; }
    .navbar-new-design__apps-icon .apps-grid-icon #apps-square-4 {
      animation: fillYellow 1.5s ease-in-out 2; }
  .navbar-new-design__apps-dropdown {
    position: fixed;
    top: 88px;
    left: 47.7%;
    transform: translateX(-50%);
    background: #ffffff !important;
    border-radius: 20px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    padding: 32px;
    z-index: 9999999 !important;
    width: 641px;
    height: auto;
    display: none; }
  .navbar-new-design__apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 175px);
    grid-template-rows: repeat(5, auto);
    gap: 26px;
    justify-content: center; }
  .navbar-new-design__apps-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 16px;
    border-radius: 15px;
    background: #f3f4f1;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    height: 65px;
    width: 175px;
    gap: 12px; }
    .navbar-new-design__apps-item:hover {
      background: #e8e9e5 !important;
      transform: translateY(-1px);
      box-shadow: none; }
    .navbar-new-design__apps-item--active {
      border: 1px solid #6c3baa !important; }
      .navbar-new-design__apps-item--active .navbar-new-design__apps-item-label {
        color: #6c3baa !important; }
      .navbar-new-design__apps-item--active .navbar-new-design__apps-item-icon ion-icon {
        color: #6c3baa !important; }
      .navbar-new-design__apps-item--active .navbar-new-design__apps-item-icon svg path,
      .navbar-new-design__apps-item--active .navbar-new-design__apps-item-icon svg circle,
      .navbar-new-design__apps-item--active .navbar-new-design__apps-item-icon svg line,
      .navbar-new-design__apps-item--active .navbar-new-design__apps-item-icon svg rect,
      .navbar-new-design__apps-item--active .navbar-new-design__apps-item-icon svg polygon,
      .navbar-new-design__apps-item--active .navbar-new-design__apps-item-icon svg polyline,
      .navbar-new-design__apps-item--active .navbar-new-design__apps-item-icon svg ellipse {
        stroke: #6c3baa !important; }
  .navbar-new-design__apps-item-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0; }
    .navbar-new-design__apps-item-icon ion-icon {
      font-size: 24px;
      color: #757575; }
  .navbar-new-design__apps-item-label {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-size: 18px;
    font-weight: 300;
    font-variation-settings: "opsz" 14;
    color: #000000;
    text-align: left;
    line-height: 1.2;
    white-space: nowrap; }
  .navbar-new-design__apps-item--help-desk {
    display: flex;
    align-items: center;
    gap: 25px;
    background: transparent !important;
    border: none !important;
    padding: 0;
    width: auto;
    height: auto; }
    .navbar-new-design__apps-item--help-desk:hover {
      background: transparent !important;
      box-shadow: none !important;
      transform: none;
      border: none !important; }
    .navbar-new-design__apps-item--help-desk .navbar-new-design__apps-item-icon {
      width: 65px;
      height: 65px;
      background: #f3f4f1 !important;
      border-radius: 50%;
      transition: all 0.2s ease; }
      .navbar-new-design__apps-item--help-desk .navbar-new-design__apps-item-icon:hover {
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px); }
      .navbar-new-design__apps-item--help-desk .navbar-new-design__apps-item-icon ion-icon {
        font-size: 24px;
        color: #757575; }
    .navbar-new-design__apps-item--help-desk .navbar-new-design__apps-item-label {
      font-family: "DM Sans", sans-serif;
      font-variation-settings: "opsz" 14;
      font-size: 18px;
      font-weight: 300;
      color: #757575; }
  .navbar-new-design__apps-item--icon-only {
    width: 65px !important;
    height: 65px !important;
    background: #f3f4f1 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important; }
    .navbar-new-design__apps-item--icon-only:hover {
      background: #e8e9e5 !important;
      box-shadow: none;
      transform: translateY(-1px);
      border: none !important; }
    .navbar-new-design__apps-item--icon-only ion-icon {
      font-size: 24px !important;
      color: #757575 !important; }
      .navbar-new-design__apps-item--icon-only ion-icon:hover {
        color: #757575 !important; }
  .navbar-new-design__actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    margin-left: 10px; }
  .navbar-new-design__icon-btn {
    width: 55px;
    height: 55px;
    border-radius: 100px !important;
    background: #ffffff !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative; }
    .navbar-new-design__icon-btn:hover {
      background: #eeeee8 !important; }
  .navbar-new-design__icon-link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #757575 !important;
    text-decoration: none; }
    .navbar-new-design__icon-link ion-icon {
      font-size: 24px;
      color: #757575 !important; }
  .navbar-new-design__notification-wrapper {
    position: relative; }
    .navbar-new-design__notification-wrapper .oh-navbar__notifications {
      position: static !important;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 55px !important;
      height: 55px !important;
      border-radius: 100px !important;
      background: #ffffff !important;
      border: none !important;
      margin: 0px !important; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%; }
      .navbar-new-design__notification-wrapper .oh-navbar__notification-link ion-icon {
        font-size: 24px;
        color: #757575 !important; }
    .navbar-new-design__notification-wrapper .oh-navbar__notifications .oh-navbar__icon,
    .navbar-new-design__notification-wrapper .oh-navbar__notifications ion-icon,
    .navbar-new-design__notification-wrapper .oh-navbar__notification-link .oh-navbar__icon,
    .navbar-new-design__notification-wrapper .oh-navbar__notification-link ion-icon {
      color: #757575 !important;
      font-size: 24px !important; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-beacon {
      position: absolute;
      top: 9px;
      right: 12px;
      height: 13px !important;
      width: 13px !important;
      border-radius: 0 !important;
      background: red !important;
      color: transparent !important;
      font-size: 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-tray {
      position: fixed;
      top: 100px;
      right: 20px;
      z-index: 10002;
      background: #ffffff;
      border-radius: 10px;
      width: 396px;
      max-height: 70vh;
      box-shadow: 0px 0px 20px 8px rgba(0, 0, 0, 0.08);
      overflow: visible; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-head {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      border-bottom: 1px solid #e2e8f0;
      background: #ffffff; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-head-title {
      font-family: "DM Sans", sans-serif;
      font-weight: 900;
      font-size: 16px;
      color: #000000;
      text-transform: capitalize; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-links {
      display: none; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-body {
      max-height: 500px;
      overflow-y: auto;
      padding: 10px 0;
      background: #ffffff; }
    .navbar-new-design__notification-wrapper .oh-navbar__nofication-list {
      list-style: none;
      padding: 0;
      margin: 0; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-item {
      display: flex !important;
      align-items: center !important;
      padding: 10px 20px !important;
      height: 100px !important;
      border-radius: 10000px !important;
      margin: 10px 16px !important;
      background: #f3f4f1 !important;
      text-decoration: none !important;
      border: none !important;
      cursor: pointer;
      transition: all 0.2s ease; }
      .navbar-new-design__notification-wrapper .oh-navbar__notification-item:nth-child(even) {
        background: #e8e9e6 !important; }
      .navbar-new-design__notification-wrapper .oh-navbar__notification-item:hover {
        background: #e2e3e0 !important;
        transform: translateX(4px); }
      .navbar-new-design__notification-wrapper .oh-navbar__notification-item > div:first-child {
        width: 70px;
        height: 70px;
        min-width: 70px;
        border-radius: 50%;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px; }
      .navbar-new-design__notification-wrapper .oh-navbar__notification-item > div:nth-child(2) {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center; }
      .navbar-new-design__notification-wrapper .oh-navbar__notification-item > div:nth-child(3) {
        display: none !important; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-dot {
      display: none !important; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-dot--unread {
      display: none !important; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-text {
      color: #000000 !important;
      font-family: "DM Sans", sans-serif !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      margin: 0 0 4px 0 !important;
      line-height: 1.4 !important; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-text--unread {
      font-weight: 600 !important; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-date {
      color: #757575 !important;
      font-family: "DM Sans", sans-serif !important;
      font-size: 12px !important;
      font-weight: 300 !important; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center; }
      .navbar-new-design__notification-wrapper .oh-navbar__notification-empty img {
        width: 80px;
        height: 80px;
        margin-bottom: 16px;
        opacity: 0.6; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-empty-title {
      font-family: "DM Sans", sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: #000000;
      margin-bottom: 8px; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-empty-desc {
      font-family: "DM Sans", sans-serif;
      font-weight: 400;
      font-size: 14px;
      color: #757575; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 20px;
      border-top: 1px solid #e2e8f0;
      background: #ffffff; }
    .navbar-new-design__notification-wrapper .oh-navbar__notification-tray-link {
      font-family: "DM Sans", sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: #6c3baa;
      text-decoration: none; }
      .navbar-new-design__notification-wrapper .oh-navbar__notification-tray-link:hover {
        text-decoration: underline; }
    .navbar-new-design__notification-wrapper .oh-navbar__volume-icon {
      position: absolute !important;
      right: 16px !important; }
      .navbar-new-design__notification-wrapper .oh-navbar__volume-icon .material-symbols-outlined {
        font-size: 20px;
        color: #757575;
        cursor: pointer; }
        .navbar-new-design__notification-wrapper .oh-navbar__volume-icon .material-symbols-outlined:hover {
          color: #000000; }
  .navbar-new-design__profile-wrapper .oh-dropdown {
    position: relative !important; }

.sidebarModal {
  width: 400px !important;
  max-width: calc(100% - 2rem) !important;
  height: calc(100vh - 2rem) !important;
  position: fixed !important;
  z-index: 10003 !important;
  border-radius: 16px !important;
  top: 1rem !important;
  right: 1rem !important;
  background: #ffffff !important;
  backdrop-filter: blur(2px);
  padding: 20px !important;
  transform: translateX(calc(100% + 2rem)) !important;
  transition: transform 0.3s ease-in-out !important;
  box-shadow: none;
  overflow-y: auto !important;
  font-family: "DM Sans", sans-serif !important; }
  .sidebarModal.active {
    transform: translateX(0) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15) !important; }
  .sidebarModal h3, .sidebarModal .h3 {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 12px; }
  .sidebarModal .closeSidemenu {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease; }
    .sidebarModal .closeSidemenu:hover {
      background: #e2e3e0; }
  .sidebarModal .border {
    border-radius: 12px !important;
    background: #f3f4f1 !important;
    border: none !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease;
    font-family: "DM Sans", sans-serif !important; }
    .sidebarModal .border:hover {
      background: #eaebe8 !important; }

.navbar-new-design .navbar-new-design__profile-wrapper .oh-navbar__user-info {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: 8px !important;
  cursor: pointer !important;
  background: #ffffff !important;
  width: 115px !important;
  height: 55px !important;
  padding: 4px !important;
  border-radius: 100px !important;
  transition: all 0.2s ease !important;
  overflow: visible !important;
  border: none !important;
  border-color: transparent !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  color: #000 !important; }
  .navbar-new-design .navbar-new-design__profile-wrapper .oh-navbar__user-info:hover {
    background: #eeeee8 !important;
    border: none !important;
    border-color: transparent !important;
    transform: none !important; }

.navbar-new-design .navbar-new-design__profile-wrapper .oh-navbar__user-info::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important; }

body .navbar-new-design .navbar-new-design__profile-wrapper .oh-navbar__user-info {
  border-radius: 100px !important;
  -webkit-border-radius: 100px !important;
  -moz-border-radius: 100px !important; }

.navbar-new-design__profile-wrapper .oh-navbar__user-chevron {
  position: absolute;
  left: 12px;
  top: 2px !important;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none; }
  .navbar-new-design__profile-wrapper .oh-navbar__user-chevron ion-icon {
    font-size: 22px;
    color: #000 !important;
    font-weight: 700;
    opacity: 0.9;
    transition: opacity 0.2s ease; }

.navbar-new-design__profile-wrapper .oh-navbar__user-info:hover .oh-navbar__user-chevron ion-icon {
  opacity: 1; }

.navbar-new-design__profile-wrapper .oh-navbar__user-photo {
  width: 50px !important;
  height: 40px !important;
  border-radius: 100px !important;
  overflow: hidden;
  border: 2px solid #000 !important;
  box-shadow: none !important;
  flex-shrink: 0;
  position: relative; }

.navbar-new-design__profile-wrapper .oh-navbar__user-image {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.navbar-new-design__profile-wrapper .oh-navbar__user-name {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  display: none; }

.navbar-new-design__profile-wrapper .oh-dropdown__menu {
  position: absolute;
  top: 68px;
  right: 0;
  z-index: 10002;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0;
  min-width: 320px;
  width: auto;
  height: auto; }
  .navbar-new-design__profile-wrapper .oh-dropdown__menu::before {
    display: none !important; }

.navbar-new-design__profile-wrapper .profile-card-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }

.navbar-new-design__profile-wrapper .profile-card-header {
  display: flex;
  align-items: center;
  gap: 12px; }

.navbar-new-design__profile-wrapper .profile-card-badge {
  width: 40px;
  height: 55px;
  overflow: hidden;
  flex-shrink: 0; }

.navbar-new-design__profile-wrapper .profile-card-badge-img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.navbar-new-design__profile-wrapper .profile-card-name {
  flex: 1;
  font-family: "DM Mono", monospace;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  line-height: 1.2; }
  .navbar-new-design__profile-wrapper .profile-card-name p {
    margin: 0;
    padding: 0; }

.navbar-new-design__profile-wrapper .profile-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #ffffff;
  border-radius: 10px;
  padding: 6px 8px;
  height: 52px;
  margin-top: 10px; }

.navbar-new-design__profile-wrapper .profile-card-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.2s ease;
  cursor: pointer; }
  .navbar-new-design__profile-wrapper .profile-card-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); }

.navbar-new-design__profile-wrapper .profile-card-action-btn--checkin {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  padding: 0 !important;
  height: 36px;
  flex-shrink: 0;
  border-radius: 100px !important;
  overflow: visible;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 95px;
  border: none !important;
  box-shadow: none !important; }
  .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-button-content {
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8px 0 4px !important;
    gap: 6px !important;
    cursor: pointer;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border-radius: 100px !important;
    transition: background 0.2s ease;
    border: none !important;
    box-shadow: none !important; }
    .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-button-content:hover {
      background: #ebebeb !important;
      background-color: #ebebeb !important;
      background-image: none !important; }
    .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-button-content:active, .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-button-content:focus {
      background: #ebebeb !important;
      background-color: #ebebeb !important;
      background-image: none !important; }
    .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-button-content.checkin-button-content--disabled {
      cursor: not-allowed !important;
      opacity: 0.6 !important; }
  .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-icon-container {
    width: 29px !important;
    height: 29px !important;
    border-radius: 50% !important;
    background: white !important;
    background-color: white !important;
    background-image: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08) !important;
    border: none !important; }
    .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-icon-container ion-icon {
      font-size: 20px !important;
      color: #757575 !important; }
  .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-text-label {
    font-family: "DM Sans", sans-serif !important;
    font-variation-settings: "opsz" 14;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #757575 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    background: none !important;
    background-image: none !important; }
  .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .navbar-timer-display {
    font-family: "DM Mono", monospace !important;
    font-size: 0.625rem !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    margin-left: auto !important;
    background: none !important;
    background-image: none !important; }

.navbar-new-design__profile-wrapper body .navbar-new-design .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important; }
  .navbar-new-design__profile-wrapper body .navbar-new-design .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-button-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important; }
    .navbar-new-design__profile-wrapper body .navbar-new-design .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-button-content:hover {
      background: #ebebeb !important;
      background-color: #ebebeb !important;
      background-image: none !important; }
  .navbar-new-design__profile-wrapper body .navbar-new-design .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-icon-container {
    background: white !important;
    background-color: white !important;
    background-image: none !important; }
    .navbar-new-design__profile-wrapper body .navbar-new-design .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-icon-container ion-icon {
      color: #757575 !important; }
  .navbar-new-design__profile-wrapper body .navbar-new-design .navbar-new-design__profile-wrapper .profile-card-action-btn--checkin .checkin-text-label {
    color: #757575 !important;
    background: none !important;
    background-image: none !important; }

.navbar-new-design__profile-wrapper .profile-card-action-btn--profile {
  background: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  flex-shrink: 0; }
  .navbar-new-design__profile-wrapper .profile-card-action-btn--profile .profile-card-action-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center; }
    .navbar-new-design__profile-wrapper .profile-card-action-btn--profile .profile-card-action-icon ion-icon {
      font-size: 20px;
      color: #757575; }

.navbar-new-design__profile-wrapper .profile-card-action-btn--logout {
  background: rgba(255, 0, 0, 0.5);
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  flex-shrink: 0; }
  .navbar-new-design__profile-wrapper .profile-card-action-btn--logout .profile-card-action-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center; }
    .navbar-new-design__profile-wrapper .profile-card-action-btn--logout .profile-card-action-icon ion-icon {
      font-size: 20px;
      color: #ffffff; }

.navbar-new-design__profile-wrapper hr {
  border-color: #e2e8f0 !important;
  opacity: 0.5;
  margin: 0.5rem 0; }

.navbar-new-design .profile-card-badge {
  position: relative; }
  .navbar-new-design .profile-card-badge .profile-card-badge-img {
    display: none; }
  .navbar-new-design .profile-card-badge .profile-card-badge-role {
    position: absolute;
    bottom: -4px;
    z-index: 10; }
    .navbar-new-design .profile-card-badge .profile-card-badge-role .profile-card-badge-role-img {
      width: 37px;
      height: 55px;
      border-radius: 3px;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); }
    .navbar-new-design .profile-card-badge .profile-card-badge-role .profile-card-badge-role-content {
      width: 37px;
      height: 55px;
      border-radius: 3px;
      border: 2px solid;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 4px 2px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
    .navbar-new-design .profile-card-badge .profile-card-badge-role .profile-card-badge-role-prefix {
      font-family: "Sora", sans-serif !important;
      font-weight: 600;
      font-size: 4px;
      line-height: 1;
      text-align: center;
      color: currentColor;
      text-shadow: 0px 0px 0px rgba(89, 87, 87, 0.25);
      margin-bottom: 1px; }
    .navbar-new-design .profile-card-badge .profile-card-badge-role .profile-card-badge-role-text {
      font-family: "Sora", sans-serif !important;
      font-weight: 600;
      font-size: 10px;
      line-height: 1;
      text-align: center;
      color: currentColor;
      text-shadow: 0px 0px 0px rgba(89, 87, 87, 0.25);
      margin-bottom: 2px; }
    .navbar-new-design .profile-card-badge .profile-card-badge-role .profile-card-badge-role-subtitle {
      font-family: "Sora", sans-serif !important;
      font-weight: 600;
      font-size: 4px;
      line-height: 1;
      text-align: center;
      color: currentColor;
      text-shadow: 0px 0px 0px rgba(89, 87, 87, 0.25); }
    .navbar-new-design .profile-card-badge .profile-card-badge-role--superuser .profile-card-badge-role-content {
      color: #ff8a8a; }
    .navbar-new-design .profile-card-badge .profile-card-badge-role--level3 .profile-card-badge-role-content {
      color: #dab4db; }
    .navbar-new-design .profile-card-badge .profile-card-badge-role--level2 .profile-card-badge-role-content {
      background: linear-gradient(to left, #c29033, #5c4418) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important; }
    .navbar-new-design .profile-card-badge .profile-card-badge-role--level1 .profile-card-badge-role-content {
      color: #757575; }
    .navbar-new-design .profile-card-badge .profile-card-badge-role--limited .profile-card-badge-role-content {
      color: #3a7d00; }

.navbar-new-design__spacer {
  width: 100%; }

@media (max-width: 991.98px) {
  .navbar-new-design__container {
    padding: 0 20px 0 33px !important; }
  .navbar-new-design__menu {
    gap: 24px; }
  .navbar-new-design__logo-subtitle {
    font-size: 7px; }
  .navbar-new-design__actions {
    gap: 8px; }
  .navbar-new-design__icon-btn {
    width: 36px;
    height: 36px; }
    .navbar-new-design__icon-btn ion-icon {
      font-size: 18px; } }

@media (max-width: 767.98px) {
  .navbar-new-design__container {
    padding: 0 20px 0 33px !important; }
  .navbar-new-design__logo-subtitle {
    display: none; }
  .navbar-new-design__menu {
    display: none; }
  .navbar-new-design__actions {
    gap: 6px; }
  .navbar-new-design__icon-btn {
    width: 32px;
    height: 32px; }
    .navbar-new-design__icon-btn ion-icon {
      font-size: 16px; }
  .navbar-new-design__notification-wrapper .oh-navbar__notification-beacon {
    min-width: 16px;
    height: 16px;
    font-size: 9px; }
  .navbar-new-design__profile-wrapper .oh-navbar__user-photo {
    width: 32px;
    height: 32px; } }

@media (max-width: 575.98px) {
  .navbar-new-design {
    height: 55px; }
    .navbar-new-design__logo-pill {
      padding: 4px 14px; }
    .navbar-new-design__logo-hr {
      font-size: 18px; }
    .navbar-new-design__logo-number {
      font-size: 15px; } }

.oh-modal,
.modal {
  z-index: 200000 !important; }

.oh-modal__backdrop,
.modal-backdrop {
  z-index: 199999 !important; }

.swal2-container {
  z-index: 300000 !important; }

.select2-container--open .select2-dropdown,
.select2-dropdown {
  z-index: 200001 !important; }

.select2-results {
  z-index: 200001 !important; }

@keyframes fillGreen {
  0%,
  25% {
    fill: #22c55e; }
  26%,
  100% {
    fill: transparent; } }

@keyframes fillPurple {
  0%,
  24% {
    fill: transparent; }
  25%,
  50% {
    fill: #a855f7; }
  51%,
  100% {
    fill: transparent; } }

@keyframes fillRed {
  0%,
  49% {
    fill: transparent; }
  50%,
  75% {
    fill: #ef4444; }
  76%,
  100% {
    fill: transparent; } }

@keyframes fillYellow {
  0%,
  74% {
    fill: transparent; }
  75%,
  99% {
    fill: #eab308; }
  100% {
    fill: transparent; } }

.calendar-modal {
  position: absolute;
  z-index: 999998;
  display: none; }
  .calendar-modal--open {
    display: block; }
  .calendar-modal__container {
    position: absolute;
    width: 400px;
    top: 10px;
    right: -163px;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
    z-index: 999999; }
    @media (max-width: 1400px) {
      .calendar-modal__container {
        right: 250px; } }
    @media (max-width: 1200px) {
      .calendar-modal__container {
        right: 150px; } }
    @media (max-width: 992px) {
      .calendar-modal__container {
        right: 50px; } }
    @media (max-width: 768px) {
      .calendar-modal__container {
        right: 20px;
        left: 20px;
        width: auto; } }
    @media (max-width: 480px) {
      .calendar-modal__container {
        top: 80px;
        right: 10px;
        left: 10px;
        padding: 20px;
        width: auto; } }
  .calendar-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px; }
  .calendar-modal__title {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #757575;
    margin: 0; }
  .calendar-modal__nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #757575;
    font-size: 20px;
    padding: 5px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center; }
    .calendar-modal__nav-btn:hover {
      color: #6c3baa; }
    .calendar-modal__nav-btn ion-icon {
      font-size: 24px; }
  .calendar-modal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px; }
  .calendar-modal__day-label {
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #757575;
    text-align: center;
    padding: 8px 0;
    margin-left: -6px; }
  .calendar-modal__date-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    height: 36px; }
    .calendar-modal__date-cell--empty {
      visibility: hidden; }
    .calendar-modal__date-cell--working-day {
      background: #6c3baa;
      color: #ffffff; }
      .calendar-modal__date-cell--working-day:hover {
        background: #8b5ac9;
        transform: scale(1.05); }
    .calendar-modal__date-cell--non-working {
      background: #c8b1e4;
      color: #ffffff; }
      .calendar-modal__date-cell--non-working:hover {
        background: #d4c3e8;
        transform: scale(1.05); }
    .calendar-modal__date-cell--today {
      border: 2px solid #6c3baa;
      font-weight: 700;
      box-shadow: 0 0 8px rgba(108, 59, 170, 0.3); }
  .calendar-modal__legend {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    flex-wrap: wrap; }
    @media (max-width: 480px) {
      .calendar-modal__legend {
        gap: 15px; } }
  .calendar-modal__legend-item {
    display: flex;
    align-items: center;
    gap: 8px; }
  .calendar-modal__legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0; }
    .calendar-modal__legend-dot--working {
      background: #6c3baa; }
    .calendar-modal__legend-dot--non-working {
      background: #c8b1e4; }
  .calendar-modal__legend-text {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    color: #757575;
    white-space: nowrap; }

.settings-new-design {
  background: #f3f4f1;
  padding: 0 !important;
  margin: 0;
  position: relative;
  overflow: hidden; }

.settings-new-design__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0px;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0; }

.settings-new-design__toolbar-back {
  background: #f7f7f5;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #000000; }
  .settings-new-design__toolbar-back ion-icon {
    font-size: 24px;
    color: #000000; }
  .settings-new-design__toolbar-back:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.settings-new-design__toolbar-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 37px;
  color: #000000;
  margin: 0;
  margin-left: 18px; }

.settings-new-design__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto; }

.settings-new-design__search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative; }

.settings-new-design__toolbar-search {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03); }
  .settings-new-design__toolbar-search ion-icon {
    font-size: 19px;
    color: #757575; }
  .settings-new-design__toolbar-search:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.settings-new-design__search-input {
  display: none;
  background: white;
  border: none !important;
  border-radius: 100px !important;
  height: 55px !important;
  padding: 0 24px !important;
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 14px;
  color: #757575;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease; }
  .settings-new-design__search-input:focus {
    outline: 2px solid #0022ff;
    outline-offset: 0; }
  .settings-new-design__search-input--expanded {
    display: block;
    width: 295px;
    opacity: 1; }

.settings-new-design__toolbar-icon-btn {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .settings-new-design__toolbar-icon-btn ion-icon {
    font-size: 19px;
    color: #757575; }
  .settings-new-design__toolbar-icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.settings-new-design__toolbar-add {
  background: #c8b1e4;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .settings-new-design__toolbar-add ion-icon {
    font-size: 24px;
    color: #6c3baa; }
  .settings-new-design__toolbar-add:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06);
    background: #b89ed4; }

.settings-new-design__toolbar-btn {
  background: #f7f7f5;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .settings-new-design__toolbar-btn ion-icon {
    font-size: 20px;
    color: #000000; }
  .settings-new-design__toolbar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.settings-new-design__toolbar-tab {
  background: #f7f7f5;
  height: 55px;
  padding: 0 24px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease; }
  .settings-new-design__toolbar-tab span {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 200;
    font-size: 18px;
    color: #757575; }
  .settings-new-design__toolbar-tab ion-icon {
    font-size: 18px;
    color: #757575; }
  .settings-new-design__toolbar-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.settings-new-design__container {
  display: flex;
  gap: 14px;
  margin: 0 auto;
  position: relative;
  max-width: 100%; }

.settings-new-design__sidebar {
  width: 399px;
  flex-shrink: 0; }

.settings-new-design__sidebar-inner {
  background: #ffffff;
  border-radius: 28px;
  padding: 20px 5px 20px 17px;
  height: calc(100vh - 141px);
  max-height: calc(100vh - 221px);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  scrollbar-width: none;
  -ms-overflow-style: none; }
  .settings-new-design__sidebar-inner::-webkit-scrollbar {
    display: none; }

.settings-new-design__category {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative; }

.settings-new-design__category-icon {
  width: 55px;
  height: 55px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease; }
  .settings-new-design__category-icon ion-icon {
    font-size: 24px;
    color: #000000;
    transition: all 0.3s ease; }

.settings-new-design__category-label {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 450;
  font-size: 19px;
  color: #000000;
  flex: 1;
  transition: all 0.3s ease; }

.settings-new-design__category-chevron {
  width: 39px;
  height: 39px;
  border-radius: 10px;
  background: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: auto; }
  .settings-new-design__category-chevron ion-icon {
    font-size: 24px;
    color: #757575;
    opacity: 0.5;
    transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease; }
  .settings-new-design__category-chevron--open ion-icon {
    transform: rotate(180deg);
    color: #757575;
    opacity: 1; }

.settings-new-design__category--active .settings-new-design__category-icon {
  background: #6c3baa; }
  .settings-new-design__category--active .settings-new-design__category-icon ion-icon {
    color: white; }

.settings-new-design__category--disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none; }

.settings-new-design__submenu {
  position: relative;
  background: #ffffff;
  top: -8px !important;
  left: 55px !important;
  border-radius: 10px;
  width: 304px;
  margin: 0;
  padding: 0;
  z-index: 100;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden; }

.settings-new-design__submenu-item {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 12px 15px;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 300;
  font-size: 17px;
  color: #000000;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  background: transparent;
  border: none; }
  .settings-new-design__submenu-item:hover {
    background: rgba(108, 59, 170, 0.1);
    color: #6c3baa; }
  .settings-new-design__submenu-item--active {
    color: #6c3baa;
    font-weight: 600;
    font-size: 18px; }
  .settings-new-design__submenu-item--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none; }

.settings-new-design__content {
  flex: 1;
  min-width: 0; }

.general-settings-new-design__card {
  background: #ffffff;
  border-radius: 50px;
  padding: 38px 40px 38px 40px;
  height: calc(100vh - 141px);
  max-height: calc(100vh - 221px);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  scrollbar-width: none;
  -ms-overflow-style: none; }
  .general-settings-new-design__card::-webkit-scrollbar {
    display: none; }

.general-settings-new-design__section {
  margin-bottom: 25px; }
  .general-settings-new-design__section:last-child {
    margin-bottom: 0; }

.general-settings-new-design .oh-inner-sidebar-content__title,
.general-settings-new-design h3,
.general-settings-new-design .h3,
.general-settings-new-design h4,
.general-settings-new-design .h4,
.general-settings-new-design .settings-section-title {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 700;
  font-size: 20px;
  color: #000000;
  margin-bottom: 10px;
  margin-top: 0; }

.general-settings-new-design label,
.general-settings-new-design .oh-input-label {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 700 !important;
  font-size: 14px;
  color: #6c3baa !important;
  margin-bottom: 8px;
  display: inline-block; }
  .general-settings-new-design label ion-icon,
  .general-settings-new-design .oh-input-label ion-icon {
    font-size: 12px;
    color: #6c3baa;
    margin-left: 4px;
    vertical-align: middle; }

.general-settings-new-design .oh-info {
  position: relative;
  top: 2px !important;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiM2QzNCQUEiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDNi40ODYgMiAyIDYuNDg2IDIgMTJzNC40ODYgMTAgMTAgMTAgMTAtNC40ODYgMTAtMTBTMTcuNTE0IDIgMTIgMlptMSAxNWgtMnYtNmgydjZabTAtOGgtMlY3aDJ2MloiPjwvcGF0aD4KPC9zdmc+");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; }

.general-settings-new-design input[type="text"],
.general-settings-new-design input[type="number"],
.general-settings-new-design input[type="email"],
.general-settings-new-design select,
.general-settings-new-design .oh-input,
.general-settings-new-design .oh-select {
  background: white !important;
  border: 1px solid rgba(117, 117, 117, 0.3) !important;
  border-radius: 5px !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-family: "DM Sans", sans-serif !important;
  font-variation-settings: "opsz" 14;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: #757575 !important;
  width: 260px !important;
  max-width: 100%;
  box-shadow: none !important; }
  .general-settings-new-design input[type="text"]:focus,
  .general-settings-new-design input[type="number"]:focus,
  .general-settings-new-design input[type="email"]:focus,
  .general-settings-new-design select:focus,
  .general-settings-new-design .oh-input:focus,
  .general-settings-new-design .oh-select:focus {
    outline: 1px solid #6c3baa !important;
    outline-offset: 0 !important;
    border: none !important; }

.general-settings-new-design select.pill-dropdown,
.general-settings-new-design .oh-select.pill-dropdown {
  border-radius: 100px !important;
  width: 164px !important;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  appearance: none !important; }

.general-settings-new-design #dateFormat,
.general-settings-new-design #timeFormat {
  width: 464px !important; }

.general-settings-new-design button[type="submit"],
.general-settings-new-design .oh-btn--secondary,
.general-settings-new-design .save-button {
  background: rgba(108, 59, 170, 0.1) !important;
  border: 1px solid #6c3baa !important;
  border-radius: 5px !important;
  width: 125px !important;
  height: 40px !important;
  font-family: "DM Sans", sans-serif !important;
  font-variation-settings: "opsz" 14;
  font-weight: 900 !important;
  font-size: 13px !important;
  color: #6c3baa !important;
  text-transform: none !important;
  cursor: not-allowed !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important; }
  .general-settings-new-design button[type="submit"] ion-icon,
  .general-settings-new-design .oh-btn--secondary ion-icon,
  .general-settings-new-design .save-button ion-icon {
    color: #6c3baa !important; }
  .general-settings-new-design button[type="submit"]:disabled, .general-settings-new-design button[type="submit"].oh-btn--disabled-state,
  .general-settings-new-design .oh-btn--secondary:disabled,
  .general-settings-new-design .oh-btn--secondary.oh-btn--disabled-state,
  .general-settings-new-design .save-button:disabled,
  .general-settings-new-design .save-button.oh-btn--disabled-state {
    background: rgba(108, 59, 170, 0.1) !important;
    color: #6c3baa !important;
    border: 1px solid #6c3baa !important;
    font-size: 13px !important;
    cursor: not-allowed !important;
    opacity: 1 !important; }
    .general-settings-new-design button[type="submit"]:disabled ion-icon, .general-settings-new-design button[type="submit"].oh-btn--disabled-state ion-icon,
    .general-settings-new-design .oh-btn--secondary:disabled ion-icon,
    .general-settings-new-design .oh-btn--secondary.oh-btn--disabled-state ion-icon,
    .general-settings-new-design .save-button:disabled ion-icon,
    .general-settings-new-design .save-button.oh-btn--disabled-state ion-icon {
      color: #6c3baa !important; }
    .general-settings-new-design button[type="submit"]:disabled:hover, .general-settings-new-design button[type="submit"].oh-btn--disabled-state:hover,
    .general-settings-new-design .oh-btn--secondary:disabled:hover,
    .general-settings-new-design .oh-btn--secondary.oh-btn--disabled-state:hover,
    .general-settings-new-design .save-button:disabled:hover,
    .general-settings-new-design .save-button.oh-btn--disabled-state:hover {
      background: rgba(108, 59, 170, 0.1) !important;
      transform: none !important;
      box-shadow: none !important; }
  .general-settings-new-design button[type="submit"].oh-btn--has-changes,
  .general-settings-new-design .oh-btn--secondary.oh-btn--has-changes,
  .general-settings-new-design .save-button.oh-btn--has-changes {
    background: #6c3baa !important;
    color: white !important;
    font-size: 13px !important;
    cursor: pointer !important;
    opacity: 1 !important; }
    .general-settings-new-design button[type="submit"].oh-btn--has-changes ion-icon,
    .general-settings-new-design .oh-btn--secondary.oh-btn--has-changes ion-icon,
    .general-settings-new-design .save-button.oh-btn--has-changes ion-icon {
      color: white !important; }
    .general-settings-new-design button[type="submit"].oh-btn--has-changes:hover,
    .general-settings-new-design .oh-btn--secondary.oh-btn--has-changes:hover,
    .general-settings-new-design .save-button.oh-btn--has-changes:hover {
      background: #6c3baa !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 12px rgba(108, 59, 170, 0.3) !important;
      opacity: 0.9 !important; }
  .general-settings-new-design button[type="submit"]:hover:disabled, .general-settings-new-design button[type="submit"].oh-btn--disabled-state:hover,
  .general-settings-new-design .oh-btn--secondary:hover:disabled,
  .general-settings-new-design .oh-btn--secondary.oh-btn--disabled-state:hover,
  .general-settings-new-design .save-button:hover:disabled,
  .general-settings-new-design .save-button.oh-btn--disabled-state:hover {
    background: rgba(108, 59, 170, 0.1) !important;
    transform: none !important;
    box-shadow: none !important; }
  .general-settings-new-design button[type="submit"]:active,
  .general-settings-new-design .oh-btn--secondary:active,
  .general-settings-new-design .save-button:active {
    transform: translateY(0) !important; }

.general-settings-new-design .toggle-input {
  display: none; }

.general-settings-new-design .toggle-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer; }

.general-settings-new-design .toggle-switch {
  position: relative;
  width: 69px;
  height: 32px;
  background-color: white;
  border-radius: 9999px;
  transition: background-color 0.3s; }
  .general-settings-new-design .toggle-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    background-color: #dfdfdf;
    border-radius: 50%;
    transition: all 0.3s ease; }

.general-settings-new-design .toggle-input:checked + .toggle-switch {
  background-color: #6c3baa; }
  .general-settings-new-design .toggle-input:checked + .toggle-switch::after {
    background-color: white;
    transform: translateX(37px); }

.general-settings-new-design .oh-input-group,
.general-settings-new-design .form-group {
  margin-bottom: 24px; }
  .general-settings-new-design .oh-input-group:last-child,
  .general-settings-new-design .form-group:last-child {
    margin-bottom: 0; }

.general-settings-new-design .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
  align-items: center; }

.general-settings-new-design .col {
  flex: 1;
  min-width: 260px; }

.general-settings-new-design .help-text,
.general-settings-new-design .oh-input-help,
.general-settings-new-design small,
.general-settings-new-design .small {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 300;
  font-size: 11px;
  color: #757575;
  display: block;
  margin-top: 4px; }

.general-settings-new-design .info-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6c3baa;
  color: white;
  font-size: 8px;
  text-align: center;
  line-height: 12px;
  cursor: help;
  margin-left: 4px; }

@media (max-width: 1400px) {
  .settings-new-design__container {
    flex-direction: column; }
  .settings-new-design__sidebar {
    width: 100%; }
  .settings-new-design__submenu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin-top: 0 !important; }
  .general-settings-new-design__card {
    border-radius: 28px; } }

@media (max-width: 768px) {
  .settings-new-design__toolbar {
    flex-wrap: wrap;
    gap: 12px; }
  .settings-new-design__toolbar-title {
    position: relative;
    left: 0;
    top: 0;
    font-size: 28px;
    width: 100%;
    text-align: center;
    margin: 12px 0; }
  .settings-new-design__toolbar-actions {
    width: 100%;
    justify-content: center; }
  .general-settings-new-design__card {
    padding: 30px 20px; }
  .general-settings-new-design input[type="text"],
  .general-settings-new-design input[type="number"],
  .general-settings-new-design input[type="email"],
  .general-settings-new-design select,
  .general-settings-new-design .oh-input,
  .general-settings-new-design .oh-select {
    width: 100% !important; }
  .general-settings-new-design button[type="submit"],
  .general-settings-new-design .oh-btn--secondary,
  .general-settings-new-design .save-button {
    width: 100% !important; } }

.employee-new-design {
  background: #f3f4f1;
  margin: 0;
  position: relative; }
  .employee-new-design section.oh-wrapper[style*="margin-top: -10px"] {
    display: none !important; }
  .employee-new-design section.oh-wrapper.oh-main__topbar {
    display: none !important; }
  .employee-new-design .oh-main__titlebar--right {
    display: none !important; }
  .employee-new-design .filterButton,
  .employee-new-design #applyFilter,
  .employee-new-design button.bg-primary-600.filterButton {
    display: none !important; }
  .employee-new-design button.border-primary-500 {
    display: none !important; }
  .employee-new-design .oh-dropdown > .oh-btn:not(.oh-stop-prop):not(.oh-accordion-meta__btn),
  .employee-new-design .oh-btn-group .oh-btn--dropdown {
    display: none !important; }
  .employee-new-design .oh-tabs__movable-header .oh-btn-group ion-icon,
  .employee-new-design .oh-tabs__movable-header .oh-btn-group .oh-dropdown__link ion-icon {
    color: #000000 !important; }
  .employee-new-design h3.text-lg.font-semibold, .employee-new-design .text-lg.font-semibold.h3 {
    display: none !important; }
  .employee-new-design .oh-main__titlebar-title {
    display: none !important; }
  .employee-new-design .oh-main__titlebar {
    display: none !important; }
  .employee-new-design .flex.flex-wrap.justify-between.items-center.mb-3 {
    display: none !important; }
  .employee-new-design .relative:has(input[placeholder="Search"]) {
    display: none !important; }
  .employee-new-design .oh-input__search-group {
    display: none !important; }
  .employee-new-design a.px-4.py-2.bg-primary-600:has(img[alt="Create"]) {
    display: none !important; }
  .employee-new-design .oh-main__titlebar-button-container {
    display: none !important; }
  .employee-new-design .oh-accordion-meta__header,
  .employee-new-design .oh-accordion-meta__header.oh-accordion-meta__header--show,
  .employee-new-design .hour-account-header,
  .employee-new-design .hour-account-header.oh-accordion-meta__header--show {
    border-left: none !important;
    border-left-width: 0 !important;
    border-left-color: transparent !important;
    background: #f7f7f5 !important;
    box-shadow: none !important; }
  .employee-new-design > .oh-card,
  .employee-new-design .oh-wrapper > .oh-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    background: #ffffff !important; }

.employee-new-design__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0px;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0; }

.employee-new-design__toolbar-back {
  background: #f7f7f5;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #000000; }
  .employee-new-design__toolbar-back ion-icon {
    font-size: 24px;
    color: #000000; }
  .employee-new-design__toolbar-back:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.employee-new-design__toolbar-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 37px;
  color: #000000;
  margin: 0;
  margin-left: 18px; }

.employee-new-design__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto; }

.employee-new-design__search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative; }

.employee-new-design__toolbar-search {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03); }
  .employee-new-design__toolbar-search ion-icon {
    font-size: 19px;
    color: #757575; }
  .employee-new-design__toolbar-search:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.employee-new-design__search-input {
  display: none;
  background: white;
  border: none !important;
  border-radius: 100px !important;
  height: 55px !important;
  padding: 0 24px !important;
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 14px;
  color: #757575;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease; }
  .employee-new-design__search-input:focus {
    outline: 2px solid #0022ff;
    outline-offset: 0; }
  .employee-new-design__search-input--expanded {
    display: block;
    width: 295px;
    opacity: 1; }

.employee-new-design__toolbar-tab {
  background: white;
  height: 55px;
  padding: 0 24px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease; }
  .employee-new-design__toolbar-tab span {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 200;
    font-size: 18px;
    color: #757575; }
  .employee-new-design__toolbar-tab ion-icon {
    font-size: 18px;
    color: #757575; }
  .employee-new-design__toolbar-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.employee-new-design__toolbar-add {
  background: #c8b1e4;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .employee-new-design__toolbar-add ion-icon {
    font-size: 24px;
    color: #6c3baa; }
  .employee-new-design__toolbar-add:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06);
    background: #b89ed4; }

.employee-new-design__toolbar-icon-btn {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .employee-new-design__toolbar-icon-btn ion-icon {
    font-size: 19px;
    color: #757575; }
  .employee-new-design__toolbar-icon-btn .toolbar-icon {
    width: 19px;
    height: 19px;
    color: #757575; }
  .employee-new-design__toolbar-icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }
    .employee-new-design__toolbar-icon-btn:hover ion-icon {
      color: var(--theme-primary); }

.toolbar-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  color: inherit; }
  .toolbar-icon--sm {
    width: 16px;
    height: 16px; }
  .toolbar-icon--lg {
    width: 24px;
    height: 24px; }

.contact-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  color: #757575; }

.employee-new-design__toolbar-dropdown {
  position: relative;
  margin-right: auto;
  margin-left: 16px; }

.employee-new-design__dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  padding: 0;
  z-index: 1000; }
  .employee-new-design__dropdown-menu > .employee-new-design__dropdown-item:first-child,
  .employee-new-design__dropdown-menu > .employee-new-design__dropdown-submenu:first-child .employee-new-design__dropdown-item--has-submenu {
    border-radius: 12px 12px 0 0; }
  .employee-new-design__dropdown-menu > .employee-new-design__dropdown-item:last-child,
  .employee-new-design__dropdown-menu > .employee-new-design__dropdown-submenu:last-child .employee-new-design__dropdown-item--has-submenu {
    border-radius: 0 0 12px 12px; }

.employee-new-design__dropdown-item {
  display: block;
  padding: 12px 20px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px !important;
  color: #000000;
  text-decoration: none;
  transition: background 0.2s ease; }
  .employee-new-design__dropdown-item:hover {
    background: rgba(108, 59, 170, 0.15) !important;
    color: #6c3baa !important; }
  .employee-new-design__dropdown-item--active {
    color: #6c3baa !important;
    font-weight: 600;
    background: rgba(108, 59, 170, 0.15);
    position: relative; }
    .employee-new-design__dropdown-item--active::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 60%;
      background: #6c3baa;
      border-radius: 0 2px 2px 0; }
  .employee-new-design__dropdown-item--has-submenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer; }
    .employee-new-design__dropdown-item--has-submenu ion-icon {
      font-size: 14px;
      color: #757575;
      transition: color 0.2s ease; }
    .employee-new-design__dropdown-item--has-submenu:hover ion-icon {
      color: #6c3baa; }

.employee-new-design__dropdown-submenu {
  position: relative; }

.employee-new-design__dropdown-submenu-content {
  position: absolute;
  left: 100%;
  top: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  padding: 0;
  z-index: 1001;
  margin-left: 8px; }
  .employee-new-design__dropdown-submenu-content > .employee-new-design__dropdown-item:first-child {
    border-radius: 12px 12px 0 0; }
  .employee-new-design__dropdown-submenu-content > .employee-new-design__dropdown-item:last-child {
    border-radius: 0 0 12px 12px; }

.employee-new-design__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 46px;
  margin-top: 14px; }

.employee-new-design__card {
  background: #f7f7f5;
  border-radius: 69px;
  box-shadow: 0px 0px 32px 8px rgba(0, 0, 0, 0.03);
  padding: 22px 25px 0 25px;
  height: 275px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit; }
  .employee-new-design__card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 4px 36px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none; }
  .employee-new-design__card:visited {
    color: inherit; }
  .employee-new-design__card:focus-within {
    z-index: 10; }

.employee-new-design__card-photo {
  width: 155px;
  height: 155px;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  margin: 0 auto; }
  .employee-new-design__card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.employee-new-design__card-menu {
  position: absolute;
  bottom: 90px;
  right: 15px;
  z-index: 2; }

.employee-new-design__card-menu-btn {
  background: white;
  border: none;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); }
  .employee-new-design__card-menu-btn ion-icon {
    font-size: 18px;
    color: #757575; }
  .employee-new-design__card-menu-btn:hover {
    background: #f0f0f0;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15); }
    .employee-new-design__card-menu-btn:hover ion-icon {
      color: #000; }

.employee-new-design__card-menu {
  z-index: 5; }
  .employee-new-design__card-menu .oh-dropdown__menu {
    z-index: 100 !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    min-width: 160px; }
  .employee-new-design__card-menu .oh-dropdown__link {
    font-family: "DM Sans", sans-serif !important;
    font-weight: 600 !important; }
    .employee-new-design__card-menu .oh-dropdown__link ion-icon {
      color: #757575 !important; }
    .employee-new-design__card-menu .oh-dropdown__link:hover {
      background: #f0ebf7 !important;
      color: #6c3baa !important;
      border-radius: 8px; }
      .employee-new-design__card-menu .oh-dropdown__link:hover ion-icon {
        color: #6c3baa !important; }
  .employee-new-design__card-menu .oh-dropdown__link--danger {
    font-family: "DM Sans", sans-serif !important;
    font-weight: 600 !important;
    background: transparent !important;
    color: #ef4444 !important;
    padding: 0.65rem 0.75rem !important;
    width: 100%;
    display: flex !important;
    align-items: center !important; }
    .employee-new-design__card-menu .oh-dropdown__link--danger ion-icon {
      color: #ef4444 !important;
      margin-right: 0.75rem; }
    .employee-new-design__card-menu .oh-dropdown__link--danger:hover {
      background: transparent !important;
      color: #f87171 !important; }
      .employee-new-design__card-menu .oh-dropdown__link--danger:hover ion-icon {
        color: #f87171 !important; }

.employee-new-design__card-footer {
  background: white;
  width: calc(100% + 50px);
  height: 81px;
  border-radius: 22px 22px 127px 127px;
  margin-top: auto;
  margin-left: -25px;
  margin-right: -25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative; }

.employee-new-design__card-name {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 900;
  font-size: 14px;
  color: #000000;
  margin: -20px 0 0 0;
  text-align: center; }

.employee-new-design__card-position {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 200;
  font-size: 13px;
  color: #757575;
  margin: 0;
  text-align: center; }

.employee-new-design__card-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  border-radius: 100px; }
  .employee-new-design__card-badge--active {
    background: rgba(141, 139, 139, 0.3); }
  .employee-new-design__card-badge--red {
    background: rgba(200, 138, 138, 0.3); }
  .employee-new-design__card-badge--blue {
    background: rgba(22, 32, 100, 0.3); }
  .employee-new-design__card-badge--green {
    background: rgba(58, 125, 0, 0.3); }
  .employee-new-design__card-badge--purple {
    background: rgba(93, 0, 126, 0.3); }
  .employee-new-design__card-badge--gold {
    background: rgba(187, 136, 46, 0.3); }

.employee-new-design__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center; }
  .employee-new-design__empty ion-icon {
    font-size: 80px;
    color: #757575;
    margin-bottom: 20px; }
  .employee-new-design__empty h3, .employee-new-design__empty .h3 {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #000000;
    margin-bottom: 12px; }
  .employee-new-design__empty p {
    font-family: "DM Sans", sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #757575; }

.employee-new-design__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
  padding: 20px 0; }
  .employee-new-design__pagination .pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0; }
    .employee-new-design__pagination .pagination li a,
    .employee-new-design__pagination .pagination li span {
      background: #f7f7f5;
      min-width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "DM Sans", sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #000000;
      text-decoration: none;
      transition: all 0.2s ease;
      padding: 0 12px; }
      .employee-new-design__pagination .pagination li a:hover,
      .employee-new-design__pagination .pagination li span:hover {
        background: #0022ff;
        color: white; }
    .employee-new-design__pagination .pagination li.active span {
      background: #0022ff;
      color: white; }
    .employee-new-design__pagination .pagination li.disabled span {
      opacity: 0.3;
      cursor: not-allowed; }

@media (max-width: 1800px) {
  .employee-new-design__grid {
    grid-template-columns: repeat(5, 1fr); } }

@media (max-width: 1600px) {
  .employee-new-design__grid {
    grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 1200px) {
  .employee-new-design__grid {
    grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 900px) {
  .employee-new-design__toolbar {
    flex-wrap: wrap;
    gap: 12px; }
  .employee-new-design__toolbar-title {
    font-size: 28px;
    width: 100%;
    text-align: center;
    margin: 12px 0; }
  .employee-new-design__toolbar-actions {
    width: 100%;
    justify-content: center; }
  .employee-new-design__grid {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) {
  .employee-new-design {
    padding: 0 12px 30px 12px; }
  .employee-new-design__grid {
    grid-template-columns: 1fr; } }

.employee-status-legend {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  margin-top: 30px;
  font-family: "DM Sans", sans-serif; }
  .employee-status-legend__title {
    font-weight: 600;
    font-size: 14px;
    color: #374151; }
  .employee-status-legend__items {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap; }
  .employee-status-legend__item {
    display: flex;
    align-items: center;
    gap: 8px; }
  .employee-status-legend__badge {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0; }
  .employee-status-legend__label {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap; }

@media (max-width: 768px) {
  .employee-status-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px; }
    .employee-status-legend__items {
      gap: 12px; } }

.employee-profile-new-design {
  background: #f3f4f1;
  margin: 0;
  position: relative; }
  .employee-profile-new-design:not(.employee-profile-new-design--create) {
    min-height: 100vh;
    padding: 0 18px 40px 18px;
    padding-top: 97px; }

.employee-profile-new-design__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0px;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0; }

.employee-profile-new-design__toolbar-back {
  background: #ffffff;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #000000; }
  .employee-profile-new-design__toolbar-back ion-icon {
    font-size: 24px;
    color: #000000; }
  .employee-profile-new-design__toolbar-back:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.employee-profile-new-design__toolbar-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 37px;
  color: #000000;
  margin: 0;
  margin-left: 18px; }

.employee-profile-new-design__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto; }

.employee-profile-new-design__toolbar-dropdown {
  background: #ffffff;
  height: 55px;
  padding: 0 24px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none; }
  .employee-profile-new-design__toolbar-dropdown span {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 200;
    font-size: 18px;
    color: #757575; }
  .employee-profile-new-design__toolbar-dropdown ion-icon {
    font-size: 12px;
    color: #757575; }
  .employee-profile-new-design__toolbar-dropdown:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.employee-profile-new-design__toolbar-edit {
  background: #c8b1e4;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #6c3baa; }
  .employee-profile-new-design__toolbar-edit ion-icon {
    font-size: 24px;
    color: #6c3baa; }
  .employee-profile-new-design__toolbar-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06);
    background: #b89ed4; }

.employee-profile-new-design__toolbar-add {
  background: #c8b1e4;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .employee-profile-new-design__toolbar-add .toolbar-icon {
    filter: brightness(0) invert(1); }
  .employee-profile-new-design__toolbar-add:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(108, 59, 170, 0.3);
    background: #8b5dc9; }

.employee-profile-new-design__content {
  display: grid;
  grid-template-columns: 399px 1fr 364px;
  gap: 14px;
  margin-top: 14px; }

.employee-profile-new-design__left {
  display: flex;
  flex-direction: column;
  gap: 14px; }

.employee-profile-new-design__photo {
  background: #ffffff;
  width: 100%;
  height: 323px;
  border-radius: 231px;
  overflow: visible;
  position: relative; }
  .employee-profile-new-design__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 231px; }
  .employee-profile-new-design__photo .photo-fab {
    position: absolute;
    bottom: 12px;
    right: 28px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: flex-end; }
    .employee-profile-new-design__photo .photo-fab__actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      opacity: 0;
      transform: translateY(10px) scale(0.9);
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease; }
      .employee-profile-new-design__photo .photo-fab__actions--open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto; }
    .employee-profile-new-design__photo .photo-fab__btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
      padding: 0; }
      .employee-profile-new-design__photo .photo-fab__btn:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
      .employee-profile-new-design__photo .photo-fab__btn--delete:hover {
        background: #fef2f2; }
      .employee-profile-new-design__photo .photo-fab__btn--edit:hover {
        background: #f5f0ff; }
    .employee-profile-new-design__photo .photo-fab__toggle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: none;
      background: #6c3baa;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
      transition: transform 0.2s ease, background 0.2s ease;
      padding: 0; }
      .employee-profile-new-design__photo .photo-fab__toggle svg circle {
        fill: #ffffff; }
      .employee-profile-new-design__photo .photo-fab__toggle:hover {
        background: #5a2e94;
        transform: scale(1.05); }
      .employee-profile-new-design__photo .photo-fab__toggle--active:hover {
        background: #e8e9e5; }

.employee-profile-new-design__contact {
  background: #ffffff;
  border-radius: 28px;
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 393px; }

.employee-profile-new-design__badge {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 700;
  font-size: 20px;
  color: #000000;
  text-align: center;
  margin: 0;
  /* margin-top: 8px; */
  margin-bottom: 12px; }

.employee-profile-new-design__contact-info {
  background: rgba(243, 244, 241, 0.5);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 318px;
  height: 318px;
  justify-content: space-evenly; }
  .employee-profile-new-design__contact-info::-webkit-scrollbar {
    width: 4px; }
  .employee-profile-new-design__contact-info::-webkit-scrollbar-track {
    background: transparent; }
  .employee-profile-new-design__contact-info::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px; }
  .employee-profile-new-design__contact-info::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25); }

.profile-editing .employee-profile-new-design__contact-info {
  max-height: 345px;
  height: 350px;
  overflow-y: scroll;
  justify-content: flex-start; }

.employee-profile-new-design__contact-item {
  display: flex;
  gap: 20px; }

.employee-profile-new-design__contact-icon {
  background: rgba(243, 244, 241, 0.5);
  width: 30px;
  height: 30px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px; }
  .employee-profile-new-design__contact-icon ion-icon {
    font-size: 19px;
    color: #757575; }
  .employee-profile-new-design__contact-icon .contact-icon {
    width: 19px;
    height: 19px;
    color: #757575;
    margin-bottom: 7px; }

.employee-profile-new-design__contact-text {
  display: flex;
  flex-direction: column;
  gap: 2px; }
  .employee-profile-new-design__contact-text .label {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 300;
    font-size: 16px;
    color: #757575;
    margin: 0; }
  .employee-profile-new-design__contact-text .value {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    margin: 0; }

.employee-profile-new-design__work {
  background: #ffffff;
  border-radius: 69px;
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 730px;
  max-height: 730px;
  overflow: hidden; }

.employee-profile-new-design__tabs {
  background: #f3f4f1;
  color: #000000;
  height: 52px;
  border-radius: 100px;
  padding: 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  width: fit-content; }

.employee-profile-new-design__tab {
  min-width: 150px;
  height: 38px;
  border-radius: 100px;
  border: none;
  background: transparent;
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 200;
  font-size: 17px;
  color: #757575;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 12px; }
  .employee-profile-new-design__tab--active {
    background: #c8b1e4;
    color: #6c3baa;
    font-weight: 500; }
  .employee-profile-new-design__tab:hover:not(.employee-profile-new-design__tab--active) {
    background: rgba(255, 255, 255, 0.5); }

.employee-profile-new-design__tab-content {
  display: none; }
  .employee-profile-new-design__tab-content--active {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    padding-right: 8px; }
    .employee-profile-new-design__tab-content--active::-webkit-scrollbar {
      width: 4px; }
    .employee-profile-new-design__tab-content--active::-webkit-scrollbar-track {
      background: transparent; }
    .employee-profile-new-design__tab-content--active::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.15);
      border-radius: 4px; }
    .employee-profile-new-design__tab-content--active::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25); }

.employee-profile-new-design__section {
  margin-bottom: 32px; }
  .employee-profile-new-design__section:last-child {
    margin-bottom: 0; }

.employee-profile-new-design__section-title {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 20px;
  color: #757575 !important;
  margin: 0 0 24px 0; }

.employee-profile-new-design__info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 36px; }

.employee-profile-new-design__info-item {
  display: flex;
  align-items: flex-start;
  gap: 20px; }

.employee-profile-new-design__info-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0; }
  .employee-profile-new-design__info-icon ion-icon {
    font-size: 19px;
    color: #757575; }
    .employee-profile-new-design__info-icon ion-icon[name="person-circle-outline"] {
      font-size: 22px; }
  .employee-profile-new-design__info-icon img,
  .employee-profile-new-design__info-icon .contact-icon {
    width: 19px;
    height: 19px;
    color: #757575; }

.employee-profile-new-design__info-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0; }
  .employee-profile-new-design__info-text .label {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 300;
    font-size: 18px;
    color: #757575;
    margin: 0; }
  .employee-profile-new-design__info-text .value {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    margin: 0; }

.employee-profile-new-design__personal {
  background: #ffffff;
  border-radius: 69px;
  padding: 52px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 730px;
  max-height: 730px;
  overflow: hidden; }

.employee-profile-new-design__personal-title {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  margin: 0 0 24px 0;
  text-align: center; }

.employee-profile-new-design__personal-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding-right: 8px; }
  .employee-profile-new-design__personal-grid::-webkit-scrollbar {
    width: 4px; }
  .employee-profile-new-design__personal-grid::-webkit-scrollbar-track {
    background: transparent; }
  .employee-profile-new-design__personal-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px; }
  .employee-profile-new-design__personal-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25); }

.employee-profile-new-design__personal-item {
  display: flex;
  align-items: flex-start;
  gap: 20px; }

.employee-profile-new-design__personal-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0; }
  .employee-profile-new-design__personal-icon ion-icon {
    font-size: 19px;
    color: #757575; }
  .employee-profile-new-design__personal-icon img,
  .employee-profile-new-design__personal-icon .contact-icon {
    width: 19px;
    height: 19px;
    color: #757575; }

.employee-profile-new-design__personal-text {
  display: flex;
  flex-direction: column;
  gap: 4px; }
  .employee-profile-new-design__personal-text .label {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 300;
    font-size: 18px;
    color: #757575;
    margin: 0; }
  .employee-profile-new-design__personal-text .value {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    margin: 0; }

@media (max-width: 1800px) {
  .employee-profile-new-design__info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 1600px) {
  .employee-profile-new-design__content {
    grid-template-columns: 350px 1fr 337px;
    gap: 12px; }
  .employee-profile-new-design__photo {
    height: 300px; }
  .employee-profile-new-design__contact-info .edit-mode,
  .employee-profile-new-design__personal .edit-mode {
    width: 215px !important; }
    .employee-profile-new-design__contact-info .edit-mode input,
    .employee-profile-new-design__contact-info .edit-mode select,
    .employee-profile-new-design__contact-info .edit-mode textarea,
    .employee-profile-new-design__personal .edit-mode input,
    .employee-profile-new-design__personal .edit-mode select,
    .employee-profile-new-design__personal .edit-mode textarea {
      width: 215px !important;
      max-width: 256px !important; } }

@media (max-width: 1400px) {
  .employee-profile-new-design__content {
    grid-template-columns: 1fr;
    gap: 24px; }
  .employee-profile-new-design__left {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 24px; }
  .employee-profile-new-design__photo {
    height: 100%;
    min-height: 300px; }
  .employee-profile-new-design__personal {
    grid-column: 1 / -1; }
  .employee-profile-new-design__info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 900px) {
  .employee-profile-new-design__toolbar {
    flex-wrap: wrap;
    gap: 12px; }
  .employee-profile-new-design__toolbar-title {
    font-size: 28px;
    width: 100%;
    text-align: center;
    margin: 12px 0; }
  .employee-profile-new-design__toolbar-actions {
    width: 100%;
    justify-content: center; }
  .employee-profile-new-design__left {
    grid-template-columns: 1fr; }
  .employee-profile-new-design__info-grid {
    grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  .employee-profile-new-design {
    padding: 80px 12px 30px 12px; }
  .employee-profile-new-design__work,
  .employee-profile-new-design__personal {
    padding: 30px 20px;
    border-radius: 28px; }
  .employee-profile-new-design__contact {
    padding: 30px 20px;
    border-radius: 28px; } }

.employee-profile-new-design__content--documents {
  grid-template-columns: 399px 1fr !important; }

.employee-profile-new-design__documents {
  background: #ffffff;
  border-radius: 69px;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px; }

.employee-profile-new-design__documents-header {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.employee-profile-new-design__documents-title {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  margin: 0; }

.employee-profile-new-design__documents-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px; }
  .employee-profile-new-design__documents-content::-webkit-scrollbar {
    width: 4px; }
  .employee-profile-new-design__documents-content::-webkit-scrollbar-track {
    background: transparent; }
  .employee-profile-new-design__documents-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px; }
  .employee-profile-new-design__documents-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25); }

.employee-profile-new-design__documents .oh-accordion-meta {
  margin-bottom: 12px; }

.employee-profile-new-design__documents .oh-accordion-meta__header {
  background: white !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  cursor: pointer;
  transition: all 0.2s ease; }
  .employee-profile-new-design__documents .oh-accordion-meta__header:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }

.employee-profile-new-design__documents .oh-accordion-meta__title {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000000; }

.employee-profile-new-design__documents .oh-accordion-meta__body {
  padding: 16px 0; }

.employee-profile-new-design__documents .oh-user_permission-list_item {
  background: white;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease; }
  .employee-profile-new-design__documents .oh-user_permission-list_item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }

.employee-profile-new-design__documents .oh-user_permission-list_profile {
  display: flex;
  align-items: center;
  gap: 12px; }

.employee-profile-new-design__documents .row-status--yellow {
  border-left: 3px solid #fbbf24; }

.employee-profile-new-design__documents .row-status--red {
  border-left: 3px solid #ef4444; }

.employee-profile-new-design__documents .row-status--blue {
  border-left: 3px solid #3b82f6; }

.employee-profile-new-design__documents-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  flex: 1; }
  .employee-profile-new-design__documents-empty ion-icon {
    font-size: 64px;
    color: #d0d0d0;
    margin-bottom: 16px; }
  .employee-profile-new-design__documents-empty img {
    margin-bottom: 16px;
    opacity: 0.6; }
  .employee-profile-new-design__documents-empty h5, .employee-profile-new-design__documents-empty .h5 {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #757575;
    margin: 0; }

.employee-profile-new-design__documents-grid {
  overflow: hidden;
  background: #f3f4f1;
  display: flex;
  flex-direction: column;
  border-radius: 40px; }
  .employee-profile-new-design__documents-grid.documents-grid--empty {
    flex: 1; }

.documents-grid-header {
  display: grid;
  grid-template-columns: 1fr 150px 150px;
  background: transparent;
  border-radius: 40px 40px 0 0;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #e2e8f0; }
  .documents-grid-header .documents-grid-cell {
    padding: 20px 24px; }
  .documents-grid-header--has-scroll {
    padding-right: 6px;
    margin-right: 4px; }

.documents-grid-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 0 0 40px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
  .documents-grid-body::-webkit-scrollbar {
    width: 6px; }
  .documents-grid-body::-webkit-scrollbar-track {
    background: transparent; }
  .documents-grid-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px; }
    .documents-grid-body::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25); }

.documents-grid-row {
  display: grid;
  grid-template-columns: 1fr 150px 150px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 7px 7px 0 7px !important; }
  .documents-grid-row:last-child {
    padding: 7px !important; }
  .documents-grid-row:hover {
    background: rgba(200, 177, 228, 0.25); }

.documents-grid-cell {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  border-right: 1px solid #e2e8f0;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  color: #333; }
  .documents-grid-cell:last-child {
    border-right: none; }
  .documents-grid-cell--center {
    justify-content: center; }
  .documents-grid-cell--employee {
    gap: 12px; }

.documents-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0; }
  .documents-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #333; }

.documents-employee-info {
  display: flex;
  flex-direction: column; }

.documents-employee-name {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #333; }

.documents-employee-title {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  color: #757575; }

.documents-status-badge {
  padding: 6px 16px;
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500; }
  .documents-status-badge--approved {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e; }
  .documents-status-badge--rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444; }
  .documents-status-badge--pending {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b; }

.employee-profile-new-design__notes {
  display: flex;
  flex-direction: column;
  grid-column: 2 / 4;
  background: #ffffff;
  border-radius: 69px;
  padding: 40px;
  min-height: 600px;
  overflow-y: auto; }

.notes-grid {
  position: relative; }
  @media (max-width: 768px) {
    .notes-grid {
      display: flex;
      flex-direction: column;
      gap: 40px; } }
.note-card {
  background: #f3f4f1;
  padding: 24px;
  border-radius: 30px;
  position: absolute;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease, left 0.3s ease, top 0.3s ease; }
  @media (max-width: 768px) {
    .note-card {
      position: relative;
      width: 100% !important;
      left: auto !important;
      top: auto !important; } }
  .note-card:hover {
    transform: translateY(-2px); }
    .note-card:hover .note-card__delete {
      opacity: 1; }
  .note-card__title {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #333;
    margin: 0 0 12px 0;
    line-height: 1.3; }
  .note-card__description {
    font-family: "DM Sans", sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: #000;
    line-height: 1.6;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .note-card__files {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap; }
  .note-card__file {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    color: #3b82f6;
    transition: background 0.2s ease; }
    .note-card__file:hover {
      background: rgba(59, 130, 246, 0.2); }
  .note-card__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto; }
  .note-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #000; }
  .note-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px; }
  .note-card__author {
    font-family: "DM Sans", sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: #000; }
  .note-card__date {
    font-family: "DM Sans", sans-serif;
    font-weight: 300;
    font-size: 11px;
    color: #757575; }
  .note-card__delete {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
    color: #9ca3af;
    padding: 4px; }
    .note-card__delete:hover {
      color: #ef4444; }

.employee-profile-new-design__notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  flex: 1;
  padding: 60px 20px; }
  .employee-profile-new-design__notes-empty img {
    margin-bottom: 16px;
    opacity: 0.6; }
  .employee-profile-new-design__notes-empty h5, .employee-profile-new-design__notes-empty .h5 {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #757575;
    margin: 0; }

.employee-profile-new-design__maillog {
  background: #ffffff;
  border-radius: 69px;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  grid-column: 2 / 4; }

.employee-profile-new-design__maillog-header {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.employee-profile-new-design__maillog-title {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  margin: 0; }

.employee-profile-new-design__maillog-grid {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  background: #f3f4f1; }
  .employee-profile-new-design__maillog-grid.maillog-grid--empty {
    flex: 1; }

.maillog-grid-header {
  display: grid;
  grid-template-columns: 1fr 150px 150px;
  background: transparent;
  border-radius: 40px 40px 0 0;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #e2e8f0; }
  .maillog-grid-header .maillog-grid-cell {
    padding: 20px 24px; }
  .maillog-grid-header--has-scroll {
    padding-right: 6px;
    margin-right: 4px; }

.maillog-grid-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 0 0 40px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
  .maillog-grid-body::-webkit-scrollbar {
    width: 6px; }
  .maillog-grid-body::-webkit-scrollbar-track {
    background: transparent; }
  .maillog-grid-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px; }
    .maillog-grid-body::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25); }

.maillog-grid-row {
  display: grid;
  grid-template-columns: 1fr 150px 150px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 7px 7px 0 7px !important; }
  .maillog-grid-row:last-child {
    padding: 7px !important; }
  .maillog-grid-row:hover {
    background: rgba(200, 177, 228, 0.25); }

.maillog-grid-cell {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  border-right: 1px solid #e2e8f0;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  color: #333; }
  .maillog-grid-cell:last-child {
    border-right: none; }
  .maillog-grid-cell--center {
    justify-content: center; }

.maillog-status-badge {
  padding: 6px 16px;
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500; }
  .maillog-status-badge--sent {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e; }
  .maillog-status-badge--failed {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444; }

.employee-profile-new-design__maillog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  flex: 1;
  padding: 60px 20px; }
  .employee-profile-new-design__maillog-empty img {
    opacity: 0.6;
    margin-bottom: 16px; }
  .employee-profile-new-design__maillog-empty h5, .employee-profile-new-design__maillog-empty .h5 {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #757575;
    margin: 0; }

.employee-profile-new-design__penalty {
  background: #ffffff;
  border-radius: 69px;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  grid-column: 2 / 4; }

.employee-profile-new-design__penalty-header {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.employee-profile-new-design__penalty-title {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  margin: 0; }

.employee-profile-new-design__penalty-grid {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  background: #f3f4f1; }
  .employee-profile-new-design__penalty-grid.penalty-grid--empty {
    flex: 1; }

.penalty-grid-header {
  display: grid;
  grid-template-columns: 1fr 180px 180px 180px 180px 180px;
  background: transparent;
  border-radius: 40px 40px 0 0;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #e2e8f0; }
  .penalty-grid-header .penalty-grid-cell {
    padding: 20px 24px; }
  .penalty-grid-header .penalty-grid-cell--center {
    text-align: center; }
  .penalty-grid-header--has-scroll {
    padding-right: 6px;
    margin-right: 4px; }

.penalty-grid-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 0 0 40px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
  .penalty-grid-body::-webkit-scrollbar {
    width: 6px; }
  .penalty-grid-body::-webkit-scrollbar-track {
    background: transparent; }
  .penalty-grid-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px; }
    .penalty-grid-body::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25); }

.penalty-grid-row {
  display: grid;
  grid-template-columns: 1fr 180px 180px 180px 180px 180px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 7px 7px 0 7px !important; }
  .penalty-grid-row:last-child {
    padding: 7px !important; }
  .penalty-grid-row:hover {
    background: rgba(200, 177, 228, 0.25); }

.penalty-grid-cell {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  border-right: 1px solid #e2e8f0;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  color: #333; }
  .penalty-grid-cell:last-child {
    border-right: none; }
  .penalty-grid-cell--center {
    justify-content: center; }

.employee-profile-new-design__penalty-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  flex: 1;
  padding: 60px 20px; }
  .employee-profile-new-design__penalty-empty img {
    opacity: 0.6;
    margin-bottom: 16px; }
  .employee-profile-new-design__penalty-empty h5, .employee-profile-new-design__penalty-empty .h5 {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #757575;
    margin: 0; }

.employee-profile-new-design__leave {
  background: #ffffff;
  border-radius: 69px;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  grid-column: 2 / 4; }

.employee-profile-new-design__leave-header {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.employee-profile-new-design__leave-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  margin: 0; }

.employee-profile-new-design__leave-cards {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  padding-right: 16px;
  flex-shrink: 0;
  margin-top: 11px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
  .employee-profile-new-design__leave-cards::-webkit-scrollbar {
    height: 6px; }
  .employee-profile-new-design__leave-cards::-webkit-scrollbar-track {
    background: transparent; }
  .employee-profile-new-design__leave-cards::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px; }
    .employee-profile-new-design__leave-cards::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25); }

.leave-type-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f3f4f1;
  border-radius: 20px;
  padding: 20px 24px;
  min-width: 280px;
  flex-shrink: 0; }
  .leave-type-card__icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; }
    .leave-type-card__icon img {
      width: 28px;
      height: 28px;
      object-fit: contain; }
    .leave-type-card__icon span {
      color: white;
      font-family: "DM Sans", sans-serif;
      font-weight: 700;
      font-size: 16px; }
  .leave-type-card__content {
    flex: 1;
    min-width: 0; }
  .leave-type-card__title {
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .leave-type-card__stats {
    display: flex;
    gap: 16px; }
  .leave-type-card__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px; }
  .leave-type-card__stat-value {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #333; }
  .leave-type-card__stat-label {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 12.5px;
    color: #757575; }

.employee-profile-new-design__leave-grid {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  background: #f3f4f1; }
  .employee-profile-new-design__leave-grid.leave-grid--empty {
    flex: 1; }

.leave-grid-header {
  display: grid;
  grid-template-columns: 1fr 180px 180px 180px 180px 180px;
  background: transparent;
  border-radius: 40px 40px 0 0;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #e2e8f0; }
  .leave-grid-header .leave-grid-cell {
    padding: 20px 24px; }
  .leave-grid-header .leave-grid-cell--center {
    text-align: center; }
  .leave-grid-header--has-scroll {
    padding-right: 6px;
    margin-right: 4px; }

.leave-grid-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 0 0 40px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
  .leave-grid-body::-webkit-scrollbar {
    width: 6px; }
  .leave-grid-body::-webkit-scrollbar-track {
    background: transparent; }
  .leave-grid-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px; }
    .leave-grid-body::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25); }

.leave-grid-row {
  display: grid;
  grid-template-columns: 1fr 180px 180px 180px 180px 180px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 7px 7px 0 7px !important; }
  .leave-grid-row:last-child {
    padding: 7px !important; }
  .leave-grid-row:hover {
    background: rgba(200, 177, 228, 0.25); }

.leave-grid-cell {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  border-right: 1px solid #e2e8f0;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  color: #333; }
  .leave-grid-cell:last-child {
    border-right: none; }
  .leave-grid-cell--center {
    justify-content: center; }

.leave-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: "DM Sans", sans-serif; }
  .leave-status--requested {
    background: #fff3e0;
    color: #f57c00; }
  .leave-status--approved {
    background: #e8f5e9;
    color: #43a047; }
  .leave-status--rejected {
    background: #ffebee;
    color: #e53935; }
  .leave-status--cancelled {
    background: #f5f5f5;
    color: #757575; }

.employee-profile-new-design__leave-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  flex: 1;
  padding: 60px 20px; }
  .employee-profile-new-design__leave-empty img {
    opacity: 0.6;
    margin-bottom: 16px; }
  .employee-profile-new-design__leave-empty h5, .employee-profile-new-design__leave-empty .h5 {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #757575;
    margin: 0; }

.employee-profile-new-design__interviews {
  background: #ffffff;
  border-radius: 69px;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 696px;
  grid-column: 2 / 4; }

.employee-profile-new-design__interviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.employee-profile-new-design__interviews-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  margin: 0; }

.employee-profile-new-design__interviews-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
  .employee-profile-new-design__interviews-cards::-webkit-scrollbar {
    width: 6px; }
  .employee-profile-new-design__interviews-cards::-webkit-scrollbar-track {
    background: transparent; }
  .employee-profile-new-design__interviews-cards::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px; }
    .employee-profile-new-design__interviews-cards::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25); }
  .employee-profile-new-design__interviews-cards.interviews-cards--empty {
    flex: 1;
    justify-content: center;
    align-items: center; }

.interview-card {
  background: #f3f4f1;
  border-radius: 24px;
  padding: 24px; }
  .interview-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px; }
  .interview-card__candidate {
    display: flex;
    align-items: center;
    gap: 12px; }
  .interview-card__candidate-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0; }
    .interview-card__candidate-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .interview-card__candidate-avatar span {
      color: white;
      font-family: "DM Sans", sans-serif;
      font-weight: 700;
      font-size: 14px; }
  .interview-card__candidate-info {
    display: flex;
    flex-direction: column;
    gap: 2px; }
  .interview-card__candidate-name {
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #1a1a1a;
    margin: 0; }
  .interview-card__candidate-job {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #757575; }
  .interview-card__status {
    flex-shrink: 0; }
  .interview-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px; }
  .interview-card__datetime {
    display: flex;
    gap: 24px; }
  .interview-card__date, .interview-card__time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: #555; }
    .interview-card__date ion-icon, .interview-card__time ion-icon {
      font-size: 18px;
      color: #6c5ce7; }
  .interview-card__description {
    padding: 12px 16px;
    background: white;
    border-left: 3px solid #6c5ce7; }
    .interview-card__description p {
      font-family: "DM Sans", sans-serif;
      font-size: 13px;
      color: #666;
      margin: 0;
      line-height: 1.5; }
  .interview-card__interviewers {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .interview-card__interviewers-label {
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #757575; }
  .interview-card__interviewers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; }
  .interview-card__interviewer-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #e9ecef;
    border-radius: 20px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    color: #495057; }

.interview-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500; }
  .interview-status--completed {
    background: #e8f5e9;
    color: #43a047; }
  .interview-status--today {
    background: #e3f2fd;
    color: #6c3baa; }
  .interview-status--upcoming {
    background: #fff8e1;
    color: #f9a825; }
  .interview-status--expired {
    background: #ffebee;
    color: #e53935; }

.employee-profile-new-design__interviews-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px; }
  .employee-profile-new-design__interviews-empty img {
    opacity: 0.6;
    margin-bottom: 16px; }
  .employee-profile-new-design__interviews-empty h5, .employee-profile-new-design__interviews-empty .h5 {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #757575;
    margin: 0; }

.employee-profile-new-design__history {
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  padding: 30px 40px;
  flex: 1;
  overflow: hidden;
  height: 730px;
  background: #ffffff; }

.employee-profile-new-design__history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; }

.employee-profile-new-design__history-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #333;
  margin: 0; }

.employee-profile-new-design__history-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
  .employee-profile-new-design__history-content::-webkit-scrollbar {
    width: 6px; }
  .employee-profile-new-design__history-content::-webkit-scrollbar-track {
    background: transparent; }
  .employee-profile-new-design__history-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px; }
    .employee-profile-new-design__history-content::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25); }

.history-timeline {
  position: relative;
  padding-left: 33px; }
  .history-timeline::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0; }

.history-card {
  background: #f3f4f1;
  border-radius: 20px;
  padding: 20px 24px;
  margin-bottom: 16px;
  position: relative; }
  .history-card::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 24px;
    width: 12px;
    height: 12px;
    background: #6c5ce7;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #6c5ce7; }

.history-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px; }

.history-card__user {
  display: flex;
  align-items: center;
  gap: 12px; }

.history-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f0f0f0; }
  .history-card__avatar--system {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000; }

.history-card__username {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #333; }

.history-card__date {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f0efff;
  color: #6c5ce7;
  padding: 6px 12px;
  border-radius: 20px;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500; }
  .history-card__date ion-icon {
    font-size: 14px; }

.history-card__time {
  color: #8b84d7;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid #c9c4f0; }

.history-card__title {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px; }

.history-card__description {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  color: #666;
  margin-bottom: 12px; }

.history-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px; }

.history-card__tag {
  background: #f8f9fa;
  color: #6c5ce7;
  padding: 4px 10px;
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #e8e8ff; }

.history-card__changes {
  background: white;
  padding: 14px 16px;
  border-left: 3px solid #6c5ce7; }

.history-card__changes-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #6c5ce7;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px; }
  .history-card__changes-header ion-icon {
    font-size: 16px; }

.history-card__changes-list {
  list-style: none;
  margin: 0;
  padding: 0; }

.history-change-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  color: #555;
  padding: 6px 0;
  border-bottom: 1px solid #eee; }
  .history-change-item:last-child {
    border-bottom: none;
    padding-bottom: 0; }
  .history-change-item:first-child {
    padding-top: 0; }

.history-change-item__field {
  font-weight: 500;
  color: #757575;
  font-style: italic;
  min-width: 100px; }

.history-change-item__old {
  color: #e53935;
  text-decoration: line-through;
  background: #ffebee;
  padding: 2px 8px;
  border-radius: 4px; }

.history-change-item__arrow {
  color: #999;
  font-size: 12px;
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle; }

.history-change-item__new {
  color: #43a047;
  background: #e8f5e9;
  padding: 2px 8px;
  border-radius: 4px; }

.employee-profile-new-design__history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  height: 100%; }
  .employee-profile-new-design__history-empty img {
    opacity: 0.6;
    margin-bottom: 16px; }
  .employee-profile-new-design__history-empty h5, .employee-profile-new-design__history-empty .h5 {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #757575;
    margin: 0; }

.employee-profile-new-design__attendance {
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  padding: 30px 40px;
  flex: 1;
  overflow: hidden;
  background: #ffffff; }

.employee-profile-new-design__attendance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; }

.employee-profile-new-design__attendance-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #333;
  margin: 0; }

.attendance-inner-tabs {
  background: #eeeeee;
  height: 44px;
  border-radius: 100px;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 4px; }

.attendance-inner-tab {
  height: 34px;
  border-radius: 100px;
  border: none;
  background: transparent;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #757575;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 14px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px; }
  .attendance-inner-tab:hover:not(.attendance-inner-tab--active) {
    background: rgba(255, 255, 255, 0.5); }
  .attendance-inner-tab--active {
    background: white;
    color: #6c3baa;
    font-weight: 500; }
    .attendance-inner-tab--active .attendance-tab-badge {
      background: #6c3baa;
      color: white; }

.attendance-tab-badge {
  background: #757575;
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  text-align: center; }

.attendance-tab-content {
  display: flex;
  flex-direction: column;
  overflow: hidden; }
  .attendance-tab-content:has(.attendance-grid--empty) {
    flex: 1; }
  .attendance-tab-content--active {
    display: flex; }

.employee-profile-new-design__hour-account-header {
  margin-bottom: 16px; }

.employee-profile-new-design__hour-account-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #333;
  margin: 0; }

.employee-profile-new-design__attendance-grid {
  display: block;
  width: 100%;
  border-radius: 40px; }
  .employee-profile-new-design__attendance-grid.attendance-grid--empty {
    display: flex;
    flex-direction: column; }

.attendance-grid-header {
  display: table;
  width: 100%;
  table-layout: fixed;
  background: #f3f4f1;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px; }
  .attendance-grid-header--has-scroll {
    padding-right: 6px; }

.attendance-grid-body {
  display: block;
  background: transparent;
  max-height: 468px;
  overflow-y: auto; }
  .attendance-grid-body::-webkit-scrollbar {
    width: 6px; }
  .attendance-grid-body::-webkit-scrollbar-track {
    background: transparent; }
  .attendance-grid-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px; }

.attendance-grid-row {
  display: table;
  width: 100%;
  table-layout: fixed;
  transition: background 0.2s ease; }
  .attendance-grid-row:hover {
    background: rgba(200, 177, 228, 0.25); }

.attendance-grid-cell {
  display: table-cell;
  padding: 20px 24px;
  vertical-align: middle;
  text-align: center;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  color: #333; }
  .attendance-grid-cell:last-child {
    border-right: none; }

.attendance-status-badge {
  padding: 6px 14px;
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap; }
  .attendance-status-badge--validated {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e; }
  .attendance-status-badge--pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b; }
  .attendance-status-badge--rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444; }

.attendance-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center; }

.attendance-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease; }
  .attendance-action-btn ion-icon {
    font-size: 16px; }
  .attendance-action-btn--view {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6; }
    .attendance-action-btn--view:hover {
      background: #3b82f6;
      color: white; }
  .attendance-action-btn--approve {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e; }
    .attendance-action-btn--approve:hover {
      background: #22c55e;
      color: white; }
  .attendance-action-btn--reject {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444; }
    .attendance-action-btn--reject:hover {
      background: #ef4444;
      color: white; }

.employee-profile-new-design__attendance-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  flex: 1;
  padding: 60px 20px; }
  .employee-profile-new-design__attendance-empty img {
    opacity: 0.6;
    margin-bottom: 16px; }
  .employee-profile-new-design__attendance-empty h5, .employee-profile-new-design__attendance-empty .h5 {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #757575;
    margin: 0; }

.employee-profile-new-design__asset {
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  padding: 30px 40px;
  flex: 1;
  overflow: hidden;
  background: #ffffff; }

.employee-profile-new-design__asset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; }

.employee-profile-new-design__asset-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #000;
  margin: 0; }

.asset-inner-tabs {
  background: #eeeeee;
  height: 44px;
  border-radius: 100px;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 4px; }

.asset-inner-tab {
  height: 34px;
  border-radius: 100px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #757575;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease; }
  .asset-inner-tab:hover {
    color: #333; }
  .asset-inner-tab--active {
    background: white;
    color: #6c3baa;
    font-weight: 500;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); }
    .asset-inner-tab--active .asset-tab-badge {
      background: #6c3baa; }

.asset-tab-badge {
  background: #757575;
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  min-width: 18px;
  text-align: center; }

.asset-tab-content {
  display: flex;
  flex-direction: column;
  overflow: hidden; }
  .asset-tab-content:has(.asset-grid--empty) {
    flex: 1; }
  .asset-tab-content--active {
    display: flex; }

.employee-profile-new-design__asset-grid {
  display: flex;
  flex-direction: column;
  overflow: hidden; }

.asset-grid-header {
  display: table;
  width: 100%;
  table-layout: fixed;
  background: #f3f4f1;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px; }
  .asset-grid-header--has-scroll {
    padding-right: 6px; }
  .asset-grid-header--request .asset-grid-cell:last-child {
    width: 40%; }

.asset-grid-body {
  display: block;
  background: transparent;
  max-height: 468px;
  overflow-y: auto; }
  .asset-grid-body::-webkit-scrollbar {
    width: 6px; }
  .asset-grid-body::-webkit-scrollbar-track {
    background: transparent; }
  .asset-grid-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px; }
  .asset-grid-body::-webkit-scrollbar-thumb:hover {
    background: #aaa; }

.asset-grid-row {
  display: table;
  width: 100%;
  table-layout: fixed;
  transition: background 0.2s ease;
  padding: 7px 7px 0 7px !important; }
  .asset-grid-row:last-child {
    padding: 7px !important; }
  .asset-grid-row:hover {
    background: rgba(200, 177, 228, 0.25); }
  .asset-grid-row--request .asset-grid-cell:last-child {
    width: 40%; }

.asset-grid-cell {
  display: table-cell;
  padding: 20px 24px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  color: #333;
  vertical-align: middle;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  text-align: center; }
  .asset-grid-cell:first-child {
    text-align: left; }
  .asset-grid-cell:last-child {
    border-right: none; }
  .asset-grid-cell--center {
    text-align: center; }

.asset-status-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap; }
  .asset-status-badge--in-use {
    background: rgba(2, 62, 138, 0.1);
    color: #6c3baa; }
  .asset-status-badge--approved {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e; }
  .asset-status-badge--pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b; }
  .asset-status-badge--rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444; }
  .asset-status-badge--returned {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280; }

.employee-profile-new-design__asset-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  flex: 1;
  padding: 60px 20px; }
  .employee-profile-new-design__asset-empty img {
    opacity: 0.6;
    margin-bottom: 16px; }
  .employee-profile-new-design__asset-empty h5, .employee-profile-new-design__asset-empty .h5 {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #757575;
    margin: 0; }

.employee-profile-new-design__resignation {
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  padding: 30px 40px;
  flex: 1;
  overflow: hidden;
  height: 696px;
  background: #ffffff; }

.employee-profile-new-design__resignation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px; }

.employee-profile-new-design__resignation-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #000;
  margin: 0; }

.employee-profile-new-design__resignation-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #6c3baa;
  color: #fff;
  border-radius: 10px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s; }
  .employee-profile-new-design__resignation-add:hover {
    background: #012d66;
    color: #fff; }
  .employee-profile-new-design__resignation-add ion-icon {
    font-size: 18px; }

.employee-profile-new-design__resignation-actions {
  display: flex;
  gap: 12px; }

.employee-profile-new-design__resignation-edit,
.employee-profile-new-design__resignation-delete {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s; }
  .employee-profile-new-design__resignation-edit ion-icon,
  .employee-profile-new-design__resignation-delete ion-icon {
    font-size: 18px; }

.employee-profile-new-design__resignation-edit {
  background: #6c3baa;
  color: #fff; }
  .employee-profile-new-design__resignation-edit:hover {
    background: #012d66;
    color: #fff; }

.employee-profile-new-design__resignation-delete {
  background: #fee2e2;
  color: #dc2626; }
  .employee-profile-new-design__resignation-delete:hover {
    background: #fecaca;
    color: #dc2626; }

.employee-profile-new-design__resignation-content {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
  .employee-profile-new-design__resignation-content::-webkit-scrollbar {
    width: 6px; }
  .employee-profile-new-design__resignation-content::-webkit-scrollbar-track {
    background: transparent; }
  .employee-profile-new-design__resignation-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px; }
    .employee-profile-new-design__resignation-content::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25); }

.resignation-grid {
  width: 100%; }

.resignation-grid-header {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 2fr;
  gap: 16px;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 8px; }

.resignation-grid-cell {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #7a7a7a; }
  .resignation-grid-cell--center {
    text-align: center; }

.resignation-grid-body {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.resignation-grid-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 2fr;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 10px;
  border-left: 4px solid transparent;
  transition: box-shadow 0.2s; }
  .resignation-grid-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
  .resignation-grid-row--requested {
    border-left-color: #f59e0b; }
  .resignation-grid-row--approved {
    border-left-color: #10b981; }
  .resignation-grid-row--rejected {
    border-left-color: #ef4444; }
  .resignation-grid-row .resignation-grid-cell {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center; }

.resignation-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600; }
  .resignation-status-badge--requested {
    background: #fef3c7;
    color: #d97706; }
  .resignation-status-badge--approved {
    background: #d1fae5;
    color: #059669; }
  .resignation-status-badge--rejected {
    background: #fee2e2;
    color: #dc2626; }

.employee-profile-new-design__resignation-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px; }
  .employee-profile-new-design__resignation-empty img {
    margin-bottom: 16px;
    opacity: 0.7; }
  .employee-profile-new-design__resignation-empty h5, .employee-profile-new-design__resignation-empty .h5 {
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #7a7a7a;
    margin: 0; }

.edit-mode-buttons {
  display: flex;
  align-items: center;
  gap: 12px; }

button.employee-profile-new-design__toolbar-save,
button.employee-profile-new-design__toolbar-save[type="submit"],
button.employee-profile-new-design__toolbar-save[type="button"] {
  background: #6c3baa !important;
  color: #ffffff !important;
  height: 45px;
  padding: 0 20px;
  border-radius: 100px;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  box-shadow: none !important; }
  button.employee-profile-new-design__toolbar-save .toolbar-icon,
  button.employee-profile-new-design__toolbar-save[type="submit"] .toolbar-icon,
  button.employee-profile-new-design__toolbar-save[type="button"] .toolbar-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1); }
  button.employee-profile-new-design__toolbar-save:hover:not(:disabled),
  button.employee-profile-new-design__toolbar-save[type="submit"]:hover:not(:disabled),
  button.employee-profile-new-design__toolbar-save[type="button"]:hover:not(:disabled) {
    background: #6c3baa !important;
    transform: translateY(-2px);
    box-shadow: none !important; }
  button.employee-profile-new-design__toolbar-save:disabled,
  button.employee-profile-new-design__toolbar-save[type="submit"]:disabled,
  button.employee-profile-new-design__toolbar-save[type="button"]:disabled {
    background: #c8b1e4 !important;
    color: #6c3baa !important;
    cursor: not-allowed;
    opacity: 1;
    transform: none !important; }
    button.employee-profile-new-design__toolbar-save:disabled .toolbar-icon,
    button.employee-profile-new-design__toolbar-save[type="submit"]:disabled .toolbar-icon,
    button.employee-profile-new-design__toolbar-save[type="button"]:disabled .toolbar-icon {
      filter: brightness(0) saturate(100%) invert(26%) sepia(47%) saturate(1468%) hue-rotate(248deg) brightness(91%) contrast(93%); }

.employee-profile-new-design__toolbar-cancel {
  background: #f3f4f1;
  color: #757575;
  height: 45px;
  padding: 0 20px;
  border-radius: 100px;
  border: 1px solid #cdd5df;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500; }
  .employee-profile-new-design__toolbar-cancel .toolbar-icon {
    width: 20px;
    height: 20px; }
  .employee-profile-new-design__toolbar-cancel:hover {
    background: #e8e9e6;
    transform: translateY(-2px); }

.edit-mode {
  width: 239px !important; }
  .edit-mode input,
  .edit-mode select,
  .edit-mode textarea {
    width: 239px !important;
    max-width: 256px !important;
    padding: 8px 12px;
    border: 1px solid #cdd5df;
    border-radius: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: #000000;
    background: #ffffff;
    transition: border-color 0.2s ease;
    box-sizing: border-box; }
    .edit-mode input:focus,
    .edit-mode select:focus,
    .edit-mode textarea:focus {
      outline: none;
      border-color: #6c3baa;
      box-shadow: 0 0 0 3px rgba(2, 62, 138, 0.1); }
  .edit-mode select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23757575' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: #ffffff;
    padding-right: 32px;
    cursor: pointer; }
  .edit-mode textarea {
    min-height: 80px;
    resize: vertical; }

.employee-profile-new-design--create .edit-mode textarea#id_address {
  width: 500px !important;
  max-width: 500px !important; }

.profile-editing .employee-profile-new-design__info-text .edit-mode,
.profile-editing .employee-profile-new-design__contact-text .edit-mode,
.profile-editing .employee-profile-new-design__personal-text .edit-mode {
  margin-top: 4px; }

.profile-editing .edit-only-field {
  display: flex !important; }

.employee-profile-new-design__contact .edit-mode input,
.employee-profile-new-design__contact .edit-mode select,
.employee-profile-new-design__contact .edit-mode textarea {
  min-width: 0;
  width: 100%; }

.employee-profile-new-design__work .edit-mode input,
.employee-profile-new-design__work .edit-mode select,
.employee-profile-new-design__work .edit-mode textarea {
  min-width: 0;
  width: 100%; }

.employee-profile-new-design__personal .edit-mode input,
.employee-profile-new-design__personal .edit-mode select,
.employee-profile-new-design__personal .edit-mode textarea {
  min-width: 0;
  width: 100%; }

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite; }

@keyframes spin {
  to {
    transform: rotate(360deg); } }

.readonly-input {
  background-color: #f5f5f5 !important;
  cursor: not-allowed !important;
  color: #666 !important; }

.edit-mode select,
.employee-profile-new-design select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23757575' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-color: #ffffff !important;
  padding-right: 32px !important;
  cursor: pointer; }

.view-note-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; }
  .view-note-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); }
  .view-note-modal__content {
    position: relative;
    background: #f3f4f1;
    border-radius: 30px;
    width: 443px;
    max-width: 90%;
    padding: 30px;
    max-height: 90vh;
    overflow-y: auto; }
  .view-note-modal__title {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000;
    margin: 0 0 16px 0; }
  .view-note-modal__description {
    font-family: "DM Sans", sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #000;
    line-height: 1.6;
    margin: 0 0 24px 0; }
  .view-note-modal__profile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px; }
  .view-note-modal__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #000;
    object-fit: cover; }
  .view-note-modal__info {
    display: flex;
    flex-direction: column;
    gap: 2px; }
  .view-note-modal__author {
    font-family: "DM Sans", sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: #000; }
  .view-note-modal__date {
    font-family: "DM Sans", sans-serif;
    font-weight: 300;
    font-size: 10px;
    color: #757575; }
  .view-note-modal__actions {
    display: flex;
    gap: 16px; }
  .view-note-modal__btn {
    flex: 1;
    height: 75px;
    border-radius: 30px;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s ease; }
    .view-note-modal__btn:hover {
      opacity: 0.9; }
    .view-note-modal__btn--close {
      background: #fff;
      color: #000;
      font-weight: 300; }
    .view-note-modal__btn--edit {
      background: #000;
      color: #fff;
      font-weight: 900; }

.employee-profile-new-design--create .employee-profile-new-design__content--create {
  grid-template-columns: 399px 1fr !important; }

.employee-profile-new-design--create .employee-profile-new-design__contact {
  height: 347px; }

.employee-profile-new-design--create .employee-profile-new-design__contact-info {
  height: 330px;
  justify-content: space-between; }

.employee-profile-new-design--create .employee-profile-new-design__work--create {
  height: 685px;
  max-height: 685px;
  overflow: hidden;
  display: flex;
  flex-direction: column; }

.employee-profile-new-design--create .employee-profile-new-design__form-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  margin-right: -8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
  .employee-profile-new-design--create .employee-profile-new-design__form-scroll::-webkit-scrollbar {
    width: 4px; }
  .employee-profile-new-design--create .employee-profile-new-design__form-scroll::-webkit-scrollbar-track {
    background: transparent; }
  .employee-profile-new-design--create .employee-profile-new-design__form-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px; }
  .employee-profile-new-design--create .employee-profile-new-design__form-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25); }

.employee-profile-new-design--create .edit-mode {
  display: block !important; }

.employee-profile-new-design--create .view-mode {
  display: none !important; }

.employee-profile-new-design--create .employee-profile-new-design__photo {
  cursor: pointer; }

.employee-profile-new-design--create .employee-profile-new-design__info-item--full {
  grid-column: span 2; }

.employee-profile-new-design--create .employee-profile-new-design__info-item--empty {
  visibility: hidden; }

.employee-profile-new-design--create .edit-mode {
  width: 100% !important; }
  .employee-profile-new-design--create .edit-mode input,
  .employee-profile-new-design--create .edit-mode select,
  .employee-profile-new-design--create .edit-mode textarea,
  .employee-profile-new-design--create .edit-mode .select2-container {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important; }

.employee-profile-new-design--create .employee-profile-new-design__work .edit-mode select[name="gender"],
.employee-profile-new-design--create .employee-profile-new-design__work .edit-mode select[name="marital_status"] {
  height: 48.73px !important; }

body.profile-editing .employee-profile-new-design__work .edit-mode .select2-selection.select2-selection--single,
body.profile-editing .employee-profile-new-design__personal .edit-mode .select2-selection.select2-selection--single,
body.profile-editing .employee-profile-new-design__contact .edit-mode .select2-selection.select2-selection--single,
.employee-profile-new-design--create .employee-profile-new-design__work .edit-mode .select2-selection.select2-selection--single,
.employee-profile-new-design--create .employee-profile-new-design__personal .edit-mode .select2-selection.select2-selection--single,
.employee-profile-new-design--create .employee-profile-new-design__contact .edit-mode .select2-selection.select2-selection--single {
  height: 47px;
  display: flex; }

body.profile-editing .employee-profile-new-design__work .edit-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
body.profile-editing .employee-profile-new-design__personal .edit-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
body.profile-editing .employee-profile-new-design__contact .edit-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
.employee-profile-new-design--create .employee-profile-new-design__work .edit-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
.employee-profile-new-design--create .employee-profile-new-design__personal .edit-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
.employee-profile-new-design--create .employee-profile-new-design__contact .edit-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 47px; }

body.profile-editing .employee-profile-new-design__work .edit-mode .select2-container--default .select2-selection--single .select2-selection__arrow,
body.profile-editing .employee-profile-new-design__personal .edit-mode .select2-container--default .select2-selection--single .select2-selection__arrow,
body.profile-editing .employee-profile-new-design__contact .edit-mode .select2-container--default .select2-selection--single .select2-selection__arrow,
.employee-profile-new-design--create .employee-profile-new-design__work .edit-mode .select2-container--default .select2-selection--single .select2-selection__arrow,
.employee-profile-new-design--create .employee-profile-new-design__personal .edit-mode .select2-container--default .select2-selection--single .select2-selection__arrow,
.employee-profile-new-design--create .employee-profile-new-design__contact .edit-mode .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 26px !important;
  position: absolute !important;
  top: 20px !important;
  right: 1px !important;
  width: 20px !important; }

.employee-profile-new-design:not(.employee-profile-new-design--create) .label.required-star::after,
.employee-profile-new-design:not(.employee-profile-new-design--create) p.label.required-star::after {
  display: none; }

.employee-profile-new-design--create .label.required-star::after,
.employee-profile-new-design--create p.label.required-star::after {
  content: " *";
  color: #ff0000;
  display: inline; }

body.profile-editing .label.required-star::after,
body.profile-editing p.label.required-star::after {
  content: " *";
  color: #ff0000;
  display: inline; }

.employee-form-new-design {
  background: #f7f7f5;
  border-radius: 28px;
  box-shadow: 0px 0px 32px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  max-height: 800px;
  height: 800px;
  width: 800px;
  max-width: 800px;
  scrollbar-width: thin;
  scrollbar-color: rgba(81, 86, 242, 0.2) transparent; }
  .employee-form-new-design::-webkit-scrollbar {
    width: 12px; }
  .employee-form-new-design::-webkit-scrollbar-track {
    margin: 28px 0;
    background: transparent; }
  .employee-form-new-design::-webkit-scrollbar-thumb {
    background: rgba(81, 86, 242, 0.2);
    border-radius: 12px;
    border: 2px solid transparent;
    background-clip: padding-box; }
    .employee-form-new-design::-webkit-scrollbar-thumb:hover {
      background: rgba(81, 86, 242, 0.4);
      background-clip: padding-box; }

.employee-form-new-design__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 46px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0; }

.employee-form-new-design__title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #000000;
  margin: 0; }

.employee-form-new-design__close {
  background: transparent !important;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease; }
  .employee-form-new-design__close ion-icon {
    font-size: 24px;
    color: #000000; }
  .employee-form-new-design__close:hover {
    background: transparent !important;
    transform: scale(1.1); }
    .employee-form-new-design__close:hover ion-icon {
      color: #000000; }

.employee-form-new-design__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px 46px 0 46px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(81, 86, 242, 0.2) transparent; }
  .employee-form-new-design__body::-webkit-scrollbar {
    width: 12px; }
  .employee-form-new-design__body::-webkit-scrollbar-track {
    margin: 0;
    background: transparent; }
  .employee-form-new-design__body::-webkit-scrollbar-thumb {
    background: rgba(81, 86, 242, 0.2);
    border-radius: 12px;
    border: 2px solid transparent;
    background-clip: padding-box; }
    .employee-form-new-design__body::-webkit-scrollbar-thumb:hover {
      background: rgba(81, 86, 242, 0.4);
      background-clip: padding-box; }

.employee-form-new-design__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 20px 46px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0; }

.employee-form-new-design__cancel-btn {
  background: transparent;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  width: 125px;
  height: 40px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #757575;
  cursor: pointer;
  transition: all 0.3s ease; }
  .employee-form-new-design__cancel-btn:hover {
    background: #f5f5f5;
    border-color: #b0b0b0; }

button[type="submit"].employee-form-new-design__save-btn {
  background: #0022ff !important;
  background-image: none !important;
  border: none;
  border-radius: 5px;
  width: 125px;
  height: 40px;
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: #979bf0;
  cursor: not-allowed;
  transition: all 0.3s ease; }
  button[type="submit"].employee-form-new-design__save-btn.oh-btn--has-changes {
    color: white !important;
    cursor: pointer; }
    button[type="submit"].employee-form-new-design__save-btn.oh-btn--has-changes:hover {
      background: #0019cc !important;
      background-image: none !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 34, 255, 0.3) !important; }
    button[type="submit"].employee-form-new-design__save-btn.oh-btn--has-changes:active {
      transform: translateY(0); }

.employee-form-new-design__photo-section {
  display: flex;
  justify-content: center;
  margin-bottom: 32px; }

.employee-form-new-design__photo-wrapper {
  position: relative; }

.employee-form-new-design__photo-container {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease; }
  .employee-form-new-design__photo-container:hover {
    transform: scale(1.05);
    box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.15); }
    .employee-form-new-design__photo-container:hover .employee-form-new-design__photo-overlay {
      opacity: 1; }

.employee-form-new-design__photo {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.employee-form-new-design__photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 34, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600; }
  .employee-form-new-design__photo-overlay ion-icon {
    font-size: 32px;
    margin-bottom: 4px; }

.employee-form-new-design__section {
  margin-bottom: 40px; }
  .employee-form-new-design__section:last-of-type {
    margin-bottom: 24px; }

.employee-form-new-design__section-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #000000;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 34, 255, 0.1); }

.employee-form-new-design .row.mb-3 {
  margin-bottom: 0.75rem !important; }

.employee-form-new-design .oh-label {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #0022ff !important;
  margin-bottom: 8px !important;
  display: inline-block !important; }
  .employee-form-new-design .oh-label.required-star::after {
    content: " *";
    color: #ff0000; }

.employee-form-new-design .oh-input,
.employee-form-new-design input[type="text"],
.employee-form-new-design input[type="email"],
.employee-form-new-design input[type="number"],
.employee-form-new-design input[type="date"],
.employee-form-new-design select,
.employee-form-new-design textarea {
  background: white !important;
  border: none !important;
  border-radius: 5px !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #757575 !important;
  width: 100% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important; }
  .employee-form-new-design .oh-input:focus,
  .employee-form-new-design input[type="text"]:focus,
  .employee-form-new-design input[type="email"]:focus,
  .employee-form-new-design input[type="number"]:focus,
  .employee-form-new-design input[type="date"]:focus,
  .employee-form-new-design select:focus,
  .employee-form-new-design textarea:focus {
    outline: 2px solid #0022ff !important;
    outline-offset: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 34, 255, 0.1) !important; }
  .employee-form-new-design .oh-input::placeholder,
  .employee-form-new-design input[type="text"]::placeholder,
  .employee-form-new-design input[type="email"]::placeholder,
  .employee-form-new-design input[type="number"]::placeholder,
  .employee-form-new-design input[type="date"]::placeholder,
  .employee-form-new-design select::placeholder,
  .employee-form-new-design textarea::placeholder {
    color: #b0b0b0 !important;
    font-size: 14px !important; }

.employee-form-new-design textarea.oh-input {
  height: 80px !important;
  padding: 12px 16px !important;
  resize: vertical !important; }

.employee-form-new-design .oh-select-2 {
  height: 40px !important; }

.employee-form-new-design .oh-input-group {
  margin-bottom: 0; }

.employee-form-new-design .errorlist {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #ff0000;
  font-family: "DM Sans", sans-serif; }

.employee-form-new-design__badge-show {
  margin-left: 12px;
  color: #0022ff !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s ease; }
  .employee-form-new-design__badge-show:hover {
    color: #0019cc !important; }

@media (max-width: 768px) {
  .employee-form-new-design {
    padding: 30px 20px;
    border-radius: 20px;
    max-height: none; }
  .employee-form-new-design__section-title {
    font-size: 16px; }
  .employee-form-new-design__actions {
    justify-content: center; }
    .employee-form-new-design__actions .settings-save-btn {
      width: 100% !important;
      max-width: 200px; } }

@media (max-width: 576px) {
  .employee-form-new-design {
    padding: 20px 16px; }
  .employee-form-new-design__photo-container {
    width: 100px;
    height: 100px; } }

#objectCreateModal.oh-modal--show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

#objectCreateModal .oh-modal__dialog {
  max-width: 800px !important;
  margin: 0 !important; }

.employee-create-new-design {
  background: #f3f4f1;
  min-height: 100vh;
  padding: 97px 18px 40px 18px;
  font-family: "DM Sans", sans-serif; }

.employee-create-new-design__toolbar {
  display: flex;
  align-items: center;
  padding: 12px 0;
  margin-bottom: 20px; }

.employee-create-new-design__toolbar-back {
  background: #ffffff;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .employee-create-new-design__toolbar-back ion-icon {
    font-size: 24px;
    color: #000000; }
  .employee-create-new-design__toolbar-back:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.employee-create-new-design__toolbar-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 37px;
  color: #000000;
  margin: 0;
  margin-left: 18px; }

.employee-create-new-design__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto; }

.employee-create-new-design__toolbar-save {
  background: #c8b1e4;
  height: 55px;
  padding: 0 32px;
  border-radius: 100px;
  border: none;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #6c3baa;
  cursor: not-allowed;
  transition: all 0.2s ease; }
  .employee-create-new-design__toolbar-save:not(:disabled) {
    background: #6c3baa;
    color: #ffffff;
    cursor: pointer; }
    .employee-create-new-design__toolbar-save:not(:disabled):hover {
      transform: translateY(-2px);
      box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.1); }

.employee-create-new-design__content {
  display: grid;
  grid-template-columns: 399px 1fr;
  gap: 14px; }

.employee-create-new-design__left {
  display: flex;
  flex-direction: column;
  gap: 14px; }

.employee-create-new-design__photo {
  background: #ffffff;
  width: 100%;
  height: 323px;
  border-radius: 231px;
  overflow: visible;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease; }
  .employee-create-new-design__photo:hover .employee-create-new-design__photo-overlay {
    opacity: 1; }

.employee-create-new-design__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 231px; }

.employee-create-new-design__photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 34, 255, 0.7);
  border-radius: 231px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease; }
  .employee-create-new-design__photo-overlay ion-icon {
    font-size: 48px;
    color: #ffffff; }

.employee-create-new-design__photo-edit {
  position: absolute;
  bottom: 20px;
  right: 38px;
  width: 40px;
  height: 40px;
  background: #6c3baa;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 10; }
  .employee-create-new-design__photo-edit:hover {
    background: #012d66;
    transform: scale(1.1); }
  .employee-create-new-design__photo-edit .photo-edit-icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1); }

.employee-create-new-design__contact {
  background: #ffffff;
  border-radius: 28px;
  padding: 21px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px; }

.employee-create-new-design__contact-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #000000;
  text-align: center;
  margin: 0 0 8px 0; }

.employee-create-new-design__contact-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto; }
  .employee-create-new-design__contact-fields::-webkit-scrollbar {
    width: 4px; }
  .employee-create-new-design__contact-fields::-webkit-scrollbar-track {
    background: transparent; }
  .employee-create-new-design__contact-fields::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px; }

.employee-create-new-design__field {
  display: flex;
  gap: 12px;
  align-items: flex-start; }

.employee-create-new-design__field-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: rgba(243, 244, 241, 0.5);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px; }
  .employee-create-new-design__field-icon img {
    width: 16px;
    height: 16px;
    opacity: 0.6; }

.employee-create-new-design__field-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px; }

.employee-create-new-design__field-label {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #757575; }
  .employee-create-new-design__field-label.required-star::after {
    content: " *";
    color: #ff0000; }

.employee-create-new-design__field-input {
  background: #f3f4f1 !important;
  border: none !important;
  border-radius: 8px !important;
  height: 40px !important;
  padding: 0 12px !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: #000000 !important;
  width: 100% !important;
  transition: all 0.2s ease !important; }
  .employee-create-new-design__field-input:focus {
    outline: 2px solid #6c3baa !important;
    background: #ffffff !important; }
  .employee-create-new-design__field-input::placeholder {
    color: #b0b0b0 !important; }

.employee-create-new-design__form {
  background: #ffffff;
  border-radius: 69px;
  padding: 52px 48px;
  height: calc(100vh - 180px);
  min-height: 600px;
  overflow-y: auto; }
  .employee-create-new-design__form::-webkit-scrollbar {
    width: 6px; }
  .employee-create-new-design__form::-webkit-scrollbar-track {
    background: transparent; }
  .employee-create-new-design__form::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px; }

.employee-create-new-design__form-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #000000;
  text-align: center;
  margin: 0 0 32px 0; }

.employee-create-new-design__section-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #000000;
  margin: 32px 0 24px 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08); }

.employee-create-new-design__form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 32px; }

.employee-create-new-design__form-field {
  display: flex;
  flex-direction: column;
  gap: 8px; }
  .employee-create-new-design__form-field--full {
    grid-column: span 2; }

.employee-create-new-design__form-label {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #757575; }
  .employee-create-new-design__form-label.required-star::after {
    content: " *";
    color: #ff0000; }

.employee-create-new-design__form-input {
  background: #f3f4f1 !important;
  border: none !important;
  border-radius: 8px !important;
  height: 48px !important;
  padding: 0 16px !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #000000 !important;
  width: 100% !important;
  transition: all 0.2s ease !important; }
  .employee-create-new-design__form-input:focus {
    outline: 2px solid #6c3baa !important;
    background: #ffffff !important; }
  .employee-create-new-design__form-input::placeholder {
    color: #b0b0b0 !important; }

.employee-create-new-design__form-field .select2-container {
  width: 100% !important; }

.employee-create-new-design__form-field .select2-container--default .select2-selection--single {
  background: #f3f4f1 !important;
  border: none !important;
  border-radius: 8px !important;
  height: 48px !important; }
  .employee-create-new-design__form-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 48px !important;
    padding-left: 16px !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 16px !important;
    color: #000000 !important; }
  .employee-create-new-design__form-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 12px !important; }

.employee-create-new-design .errorlist {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #ff0000;
  font-family: "DM Sans", sans-serif; }

@media (max-width: 1200px) {
  .employee-create-new-design__content {
    grid-template-columns: 350px 1fr;
    gap: 12px; }
  .employee-create-new-design__photo {
    height: 280px; } }

@media (max-width: 992px) {
  .employee-create-new-design__content {
    grid-template-columns: 1fr; }
  .employee-create-new-design__left {
    flex-direction: row;
    gap: 14px; }
  .employee-create-new-design__photo {
    width: 200px;
    min-width: 200px;
    height: 200px;
    border-radius: 100px; }
  .employee-create-new-design__photo-img {
    border-radius: 100px; }
  .employee-create-new-design__photo-overlay {
    border-radius: 100px; }
  .employee-create-new-design__contact {
    flex: 1; }
  .employee-create-new-design__form {
    height: auto;
    min-height: auto;
    border-radius: 28px; } }

@media (max-width: 768px) {
  .employee-create-new-design {
    padding: 80px 12px 24px 12px; }
  .employee-create-new-design__toolbar-title {
    font-size: 24px; }
  .employee-create-new-design__left {
    flex-direction: column;
    align-items: center; }
  .employee-create-new-design__photo {
    width: 150px;
    height: 150px; }
  .employee-create-new-design__contact {
    width: 100%; }
  .employee-create-new-design__form-grid {
    grid-template-columns: 1fr; }
  .employee-create-new-design__form-field--full {
    grid-column: span 1; }
  .employee-create-new-design__form {
    padding: 32px 24px;
    border-radius: 20px; } }

.employee-edit-new-design {
  background: #f3f4f1;
  margin: 0;
  position: relative; }
  .employee-edit-new-design .oh-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important; }
  .employee-edit-new-design .oh-profile-section {
    background: #f3f4f1 !important;
    background-color: #f3f4f1 !important; }

.employee-edit-new-design__toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0px;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0; }

.employee-edit-new-design__toolbar-back {
  background: #f7f7f5;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #000000;
  border: none; }
  .employee-edit-new-design__toolbar-back ion-icon {
    font-size: 24px;
    color: #000000; }
  .employee-edit-new-design__toolbar-back:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.employee-edit-new-design__toolbar-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 37px;
  color: #000000;
  margin: 0; }

.employee-edit-new-design__toolbar-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  background: #eeeeee;
  height: 52px;
  border-radius: 100px;
  padding: 7px; }

.employee-edit-new-design__tab {
  background: transparent;
  height: 38px;
  padding: 0 20px;
  border-radius: 100px;
  box-shadow: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 200;
  font-size: 17px;
  color: #757575; }
  .employee-edit-new-design__tab:hover:not(.employee-edit-new-design__tab--active) {
    background: rgba(255, 255, 255, 0.5); }
  .employee-edit-new-design__tab--active {
    background: white !important;
    color: #6c3baa !important;
    font-weight: 500 !important; }

button.employee-edit-new-design__toolbar-save {
  background: #f7f7f5 !important;
  height: 55px !important;
  padding: 0 34px !important;
  border-radius: 100px !important;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: not-allowed !important;
  transition: none !important;
  font-family: "DM Sans", sans-serif !important;
  font-variation-settings: "opsz" 14 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #000000 !important;
  opacity: 1 !important; }
  button.employee-edit-new-design__toolbar-save:hover {
    background: #f7f7f5 !important;
    color: #000000 !important;
    transform: none !important;
    box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03) !important; }
  button.employee-edit-new-design__toolbar-save:disabled, button.employee-edit-new-design__toolbar-save.oh-btn--disabled-state {
    background: #f7f7f5 !important;
    color: #000000 !important;
    cursor: not-allowed !important;
    opacity: 1 !important; }
    button.employee-edit-new-design__toolbar-save:disabled:hover, button.employee-edit-new-design__toolbar-save.oh-btn--disabled-state:hover {
      background: #f7f7f5 !important;
      color: #000000 !important;
      transform: none !important;
      box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03) !important; }
  button.employee-edit-new-design__toolbar-save.oh-btn--has-changes {
    background: #6c3baa !important;
    color: white !important;
    cursor: pointer !important;
    opacity: 1 !important; }
    button.employee-edit-new-design__toolbar-save.oh-btn--has-changes:hover {
      background: #6c3baa !important;
      color: white !important;
      transform: none !important;
      box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03) !important; }
    button.employee-edit-new-design__toolbar-save.oh-btn--has-changes:active {
      background: #6c3baa !important;
      color: white !important;
      transform: none !important; }

.employee-edit-new-design__card {
  background: #f7f7f5;
  border-radius: 69px;
  box-shadow: 0px 0px 32px 8px rgba(0, 0, 0, 0.03);
  height: 685px;
  max-height: 685px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  padding: 50px 0; }

.employee-edit-new-design__card-content {
  padding: 2px 46px 2px 58px;
  padding-right: 38px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
  .employee-edit-new-design__card-content::-webkit-scrollbar {
    width: 8px; }
  .employee-edit-new-design__card-content::-webkit-scrollbar-track {
    background: transparent; }
  .employee-edit-new-design__card-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px; }
    .employee-edit-new-design__card-content::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25); }

.employee-edit-new-design__tab-content {
  display: none; }
  .employee-edit-new-design__tab-content--active {
    display: block; }

.employee-edit-new-design__section {
  margin-bottom: 46px; }
  .employee-edit-new-design__section:last-child {
    margin-bottom: 0; }

.employee-edit-new-design__section-title {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 700;
  font-size: 20px;
  color: #000000;
  margin-bottom: 20px;
  margin-top: 0; }

.employee-edit-new-design label,
.employee-edit-new-design .oh-label,
.employee-edit-new-design .oh-input-label {
  font-family: "DM Sans", sans-serif !important;
  font-variation-settings: "opsz" 14;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #6c3baa !important;
  margin-bottom: 8px !important;
  display: inline-block !important; }
  .employee-edit-new-design label.required-star::after,
  .employee-edit-new-design .oh-label.required-star::after,
  .employee-edit-new-design .oh-input-label.required-star::after {
    content: " *";
    color: #ff0000; }

.employee-edit-new-design input[type="text"],
.employee-edit-new-design input[type="email"],
.employee-edit-new-design input[type="number"],
.employee-edit-new-design input[type="date"],
.employee-edit-new-design input[type="tel"],
.employee-edit-new-design select,
.employee-edit-new-design textarea,
.employee-edit-new-design .oh-input,
.employee-edit-new-design .oh-select {
  background: white !important;
  border: none !important;
  border-radius: 5px !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-family: "DM Sans", sans-serif !important;
  font-variation-settings: "opsz" 14;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #757575 !important;
  width: 100% !important;
  max-width: 100%;
  box-shadow: none !important;
  transition: all 0.2s ease !important; }
  .employee-edit-new-design input[type="text"]:focus,
  .employee-edit-new-design input[type="email"]:focus,
  .employee-edit-new-design input[type="number"]:focus,
  .employee-edit-new-design input[type="date"]:focus,
  .employee-edit-new-design input[type="tel"]:focus,
  .employee-edit-new-design select:focus,
  .employee-edit-new-design textarea:focus,
  .employee-edit-new-design .oh-input:focus,
  .employee-edit-new-design .oh-select:focus {
    outline: 2px solid #6c3baa !important;
    outline-offset: 0 !important; }
  .employee-edit-new-design input[type="text"]::placeholder,
  .employee-edit-new-design input[type="email"]::placeholder,
  .employee-edit-new-design input[type="number"]::placeholder,
  .employee-edit-new-design input[type="date"]::placeholder,
  .employee-edit-new-design input[type="tel"]::placeholder,
  .employee-edit-new-design select::placeholder,
  .employee-edit-new-design textarea::placeholder,
  .employee-edit-new-design .oh-input::placeholder,
  .employee-edit-new-design .oh-select::placeholder {
    color: #b0b0b0 !important;
    font-size: 14px !important; }

.employee-edit-new-design textarea.oh-input {
  height: 80px !important;
  padding: 12px 16px !important;
  resize: vertical !important; }

.employee-edit-new-design .oh-select-2,
.employee-edit-new-design .select2-container--default .select2-selection--single {
  height: 40px !important;
  border: none !important;
  border-radius: 5px !important; }

.employee-edit-new-design .oh-input-group {
  margin-bottom: 1rem; }

.employee-edit-new-design .row.mb-3 {
  margin-bottom: 1rem !important; }

.employee-edit-new-design .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: transparent !important;
  color: #6c3baa !important; }

.employee-edit-new-design .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
  background-color: transparent !important;
  color: #6c3baa !important; }

.employee-edit-new-design .select2-results__option:hover {
  background-color: transparent !important;
  color: #6c3baa !important; }

.employee-edit-new-design .errorlist {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #ff0000;
  font-family: "DM Sans", sans-serif; }

.employee-edit-new-design button[type="submit"]:not(.employee-edit-new-design__toolbar-save),
.employee-edit-new-design .oh-btn--secondary:not(.employee-edit-new-design__toolbar-save),
.employee-edit-new-design .save-button:not(.employee-edit-new-design__toolbar-save) {
  background: #6c3baa !important;
  border: none !important;
  border-radius: 5px !important;
  width: 125px !important;
  height: 40px !important;
  font-family: "DM Sans", sans-serif !important;
  font-variation-settings: "opsz" 14;
  font-weight: 900 !important;
  font-size: 13px !important;
  color: #979bf0 !important;
  text-transform: none !important;
  cursor: not-allowed !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important; }
  .employee-edit-new-design button[type="submit"]:not(.employee-edit-new-design__toolbar-save).oh-btn--has-changes,
  .employee-edit-new-design .oh-btn--secondary:not(.employee-edit-new-design__toolbar-save).oh-btn--has-changes,
  .employee-edit-new-design .save-button:not(.employee-edit-new-design__toolbar-save).oh-btn--has-changes {
    background: #6c3baa !important;
    color: white !important;
    cursor: pointer !important; }
    .employee-edit-new-design button[type="submit"]:not(.employee-edit-new-design__toolbar-save).oh-btn--has-changes:hover,
    .employee-edit-new-design .oh-btn--secondary:not(.employee-edit-new-design__toolbar-save).oh-btn--has-changes:hover,
    .employee-edit-new-design .save-button:not(.employee-edit-new-design__toolbar-save).oh-btn--has-changes:hover {
      background: #0019cc !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 12px rgba(0, 34, 255, 0.3) !important; }
    .employee-edit-new-design button[type="submit"]:not(.employee-edit-new-design__toolbar-save).oh-btn--has-changes:active,
    .employee-edit-new-design .oh-btn--secondary:not(.employee-edit-new-design__toolbar-save).oh-btn--has-changes:active,
    .employee-edit-new-design .save-button:not(.employee-edit-new-design__toolbar-save).oh-btn--has-changes:active {
      transform: translateY(0) !important; }
  .employee-edit-new-design button[type="submit"]:not(.employee-edit-new-design__toolbar-save):disabled, .employee-edit-new-design button[type="submit"]:not(.employee-edit-new-design__toolbar-save):hover:disabled,
  .employee-edit-new-design .oh-btn--secondary:not(.employee-edit-new-design__toolbar-save):disabled,
  .employee-edit-new-design .oh-btn--secondary:not(.employee-edit-new-design__toolbar-save):hover:disabled,
  .employee-edit-new-design .save-button:not(.employee-edit-new-design__toolbar-save):disabled,
  .employee-edit-new-design .save-button:not(.employee-edit-new-design__toolbar-save):hover:disabled {
    background: #6c3baa !important;
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important; }

.employee-edit-new-design__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1); }

@media (max-width: 1200px) {
  .employee-edit-new-design__toolbar {
    flex-wrap: wrap; }
  .employee-edit-new-design__toolbar-tabs {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
    justify-content: flex-start; } }

@media (max-width: 768px) {
  .employee-edit-new-design {
    padding: 16px !important; }
  .employee-edit-new-design__toolbar-title {
    font-size: 28px; }
  .employee-edit-new-design__tab {
    font-size: 16px;
    padding: 0 16px;
    height: 45px; }
  .employee-edit-new-design__card {
    border-radius: 40px;
    padding: 32px 24px;
    max-height: none; } }

@media (max-width: 576px) {
  .employee-edit-new-design__toolbar {
    gap: 12px; }
  .employee-edit-new-design__toolbar-back {
    width: 45px;
    height: 45px; }
    .employee-edit-new-design__toolbar-back ion-icon {
      font-size: 20px; }
  .employee-edit-new-design__toolbar-title {
    font-size: 24px; }
  .employee-edit-new-design__toolbar-tabs {
    flex-direction: column;
    gap: 8px; }
  .employee-edit-new-design__tab {
    width: 100%;
    justify-content: center; } }

.employee-edit-new-design .oh-profile-section {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: 0 !important; }
  .employee-edit-new-design .oh-profile-section:hover {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important; }

.employee-edit-new-design .oh-card:hover,
.employee-edit-new-design .info-card:hover {
  border-color: transparent !important;
  box-shadow: none !important; }

.employee-edit-new-design .oh-general__tab-target {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important; }
  .employee-edit-new-design .oh-general__tab-target:hover {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important; }

.employee-edit-new-design .oh-profile-section__card {
  border: 1px solid #cdd5df !important;
  border-radius: 10px !important; }

.employee-edit-new-design .oh-profile-section__avatar {
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  object-fit: cover !important; }

.employee-edit-new-design .oh-profile-section__edit-photo {
  width: 150px !important;
  height: 150px !important;
  margin-left: 35px !important; }

.onboarding-new-design {
  background: #f3f4f1;
  margin: 0;
  position: relative;
  min-height: 100vh; }
  .onboarding-new-design .oh-main__topbar {
    display: none !important; }
  .onboarding-new-design .oh-main__titlebar {
    display: none !important; }
  .onboarding-new-design .oh-main__titlebar-title {
    display: none !important; }
  .onboarding-new-design .oh-input__search-group {
    display: none !important; }
  .onboarding-new-design .oh-view-types {
    display: none !important; }
  .onboarding-new-design .oh-main__titlebar-button-container {
    display: none !important; }
  .onboarding-new-design + .oh-filter-tag-container {
    display: none !important; }
  .onboarding-new-design .d-flex.flex-row-reverse.oh-wrapper {
    display: none !important; }
  .onboarding-new-design .oh-titlebar,
  .onboarding-new-design .horilla-nav-bar,
  .onboarding-new-design .oh-nav,
  .onboarding-new-design .oh-main__navbar,
  .onboarding-new-design h3.oh-titlebar__title,
  .onboarding-new-design .oh-titlebar__title.h3,
  .onboarding-new-design .oh-input__search-group-input,
  .onboarding-new-design .oh-dropdown__filter,
  .onboarding-new-design .oh-card--no-shadow,
  .onboarding-new-design > .oh-wrapper > div[hx-get*="onboarding-candidates-nav"] > * {
    display: none !important; }

.onboarding-new-design__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0px;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0; }

.onboarding-new-design__toolbar-back {
  background: #f7f7f5;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #000000; }
  .onboarding-new-design__toolbar-back ion-icon {
    font-size: 24px;
    color: #000000; }
  .onboarding-new-design__toolbar-back:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.onboarding-new-design__toolbar-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 37px;
  color: #000000;
  margin: 0;
  margin-left: 18px; }

.onboarding-new-design__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto; }

.onboarding-new-design__search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative; }

.onboarding-new-design__toolbar-search {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03); }
  .onboarding-new-design__toolbar-search ion-icon {
    font-size: 19px;
    color: #757575; }
  .onboarding-new-design__toolbar-search:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.onboarding-new-design__search-input {
  display: none;
  background: white;
  border: none !important;
  border-radius: 100px !important;
  height: 55px !important;
  padding: 0 24px !important;
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 14px;
  color: #757575;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease; }
  .onboarding-new-design__search-input:focus {
    outline: 2px solid #0022ff;
    outline-offset: 0; }
  .onboarding-new-design__search-input--expanded {
    display: block;
    width: 295px;
    opacity: 1; }

.onboarding-new-design__toolbar-tab {
  background: white;
  height: 55px;
  padding: 0 24px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease; }
  .onboarding-new-design__toolbar-tab span {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 200;
    font-size: 18px;
    color: #757575; }
  .onboarding-new-design__toolbar-tab ion-icon {
    font-size: 18px;
    color: #757575; }
  .onboarding-new-design__toolbar-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.onboarding-new-design__toolbar-tab-static {
  background: white;
  height: 55px;
  padding: 0 24px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  margin-right: auto;
  margin-left: 16px; }
  .onboarding-new-design__toolbar-tab-static span {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 200;
    font-size: 18px;
    color: #757575; }

.onboarding-new-design__toolbar-icon-btn {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .onboarding-new-design__toolbar-icon-btn ion-icon {
    font-size: 19px;
    color: #757575; }
  .onboarding-new-design__toolbar-icon-btn .toolbar-icon {
    width: 19px;
    height: 19px;
    color: #757575; }
  .onboarding-new-design__toolbar-icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }
    .onboarding-new-design__toolbar-icon-btn:hover ion-icon {
      color: var(--theme-primary); }

.onboarding-new-design__toolbar-add {
  background: var(--theme-accent);
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none; }
  .onboarding-new-design__toolbar-add .toolbar-icon {
    width: 24px;
    height: 24px; }
  .onboarding-new-design__toolbar-add:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06);
    background: var(--theme-accent); }

.status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block; }
  .status-dot--open {
    background-color: yellowgreen; }
  .status-dot--closed {
    background-color: orangered; }

.onboarding-new-design__toolbar-dropdown {
  position: relative;
  margin-right: auto;
  margin-left: 16px; }

.onboarding-new-design__dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  padding: 0;
  z-index: 1000; }
  .onboarding-new-design__dropdown-menu > .onboarding-new-design__dropdown-item:first-child {
    border-radius: 12px 12px 0 0; }
  .onboarding-new-design__dropdown-menu > .onboarding-new-design__dropdown-item:last-child {
    border-radius: 0 0 12px 12px; }

.onboarding-new-design__dropdown-item {
  display: block;
  padding: 12px 20px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px !important;
  color: #000000;
  text-decoration: none;
  transition: background 0.2s ease; }
  .onboarding-new-design__dropdown-item:hover {
    background: rgba(108, 59, 170, 0.15) !important;
    color: #6c3baa !important; }
  .onboarding-new-design__dropdown-item--active {
    color: #6c3baa !important;
    font-weight: 600;
    background: rgba(108, 59, 170, 0.15);
    position: relative; }
    .onboarding-new-design__dropdown-item--active::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 60%;
      background: #6c3baa;
      border-radius: 0 2px 2px 0; }

.onboarding-new-design .oh-card {
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  padding: 20px;
  margin-bottom: 0;
  border: none; }

.onboarding-new-design .oh-accordion-meta {
  margin-bottom: 10px;
  width: 100%; }
  .onboarding-new-design .oh-accordion-meta:last-child {
    margin-bottom: 0; }

.onboarding-new-design .oh-accordion-meta__item {
  margin-bottom: 0; }

.onboarding-new-design .oh-accordion-meta__header {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid rgba(117, 117, 117, 0.3) !important;
  border-radius: 16px !important;
  padding: 20px 25px !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.2s ease;
  position: relative; }
  .onboarding-new-design .oh-accordion-meta__header::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    visibility: hidden !important; }
  .onboarding-new-design .oh-accordion-meta__header:hover {
    background-color: #fafafa !important; }
  .onboarding-new-design .oh-accordion-meta__header.oh-accordion-meta__header--show {
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important; }

.onboarding-new-design .onboarding-accordion__header-left {
  display: flex;
  align-items: center;
  gap: 12px; }

.onboarding-new-design .onboarding-accordion__count {
  background: #f3f4f1;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #333; }

.onboarding-new-design .onboarding-accordion__title {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #000000;
  margin: 0; }

.onboarding-new-design .onboarding-accordion__header-right {
  display: flex;
  align-items: center;
  gap: 12px; }

.onboarding-new-design .onboarding-accordion__bulk-select {
  background: #ffffff;
  border: 1px solid rgba(117, 117, 117, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  min-width: 150px; }
  .onboarding-new-design .onboarding-accordion__bulk-select:focus {
    outline: none;
    border-color: var(--theme-primary); }

.onboarding-new-design .onboarding-accordion__actions-btn {
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #757575;
  display: flex;
  align-items: center;
  justify-content: center; }
  .onboarding-new-design .onboarding-accordion__actions-btn ion-icon {
    font-size: 20px; }
  .onboarding-new-design .onboarding-accordion__actions-btn:hover {
    color: #333; }

.onboarding-new-design .onboarding-accordion__task-btn {
  background: var(--theme-accent, #90e0ef);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--theme-primary, #023e8a);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease; }
  .onboarding-new-design .onboarding-accordion__task-btn ion-icon {
    font-size: 18px; }
  .onboarding-new-design .onboarding-accordion__task-btn:hover {
    background: var(--theme-primary, #023e8a);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }

.onboarding-new-design .onboarding-accordion__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease; }
  .onboarding-new-design .onboarding-accordion__chevron ion-icon {
    font-size: 20px;
    color: #666; }

.onboarding-new-design .oh-accordion-meta__header--show .onboarding-accordion__chevron {
  transform: rotate(180deg); }

.onboarding-new-design .oh-accordion-meta__body {
  border: 1px solid rgba(117, 117, 117, 0.3) !important;
  border-top: none !important;
  border-radius: 0 0 16px 16px !important;
  padding: 15px !important;
  background: #f3f4f1 !important;
  overflow: hidden;
  overflow-x: auto;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease; }
  .onboarding-new-design .oh-accordion-meta__body.d-none {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 15px !important;
    display: block !important;
    visibility: hidden; }
  .onboarding-new-design .oh-accordion-meta__body:not(.d-none) {
    max-height: 5000px;
    opacity: 1;
    visibility: visible; }

.onboarding-new-design .oh-sticky-table {
  width: 100%;
  box-shadow: none !important;
  border: none !important;
  background: white !important;
  border: 0.5px solid rgba(117, 117, 117, 0.5) !important;
  border-radius: 10px !important;
  padding: 7px !important;
  overflow-x: auto !important;
  overflow-y: visible !important; }

.onboarding-new-design .oh-sticky-table__table {
  width: max-content;
  min-width: 100%; }

.onboarding-new-design .oh-sticky-table__thead .oh-sticky-table__tr {
  display: flex;
  gap: 7px;
  margin-bottom: 7px; }

.onboarding-new-design .oh-sticky-table__th {
  background: rgba(217, 217, 217, 0.5) !important;
  border: 0.25px solid rgba(117, 117, 117, 0.5) !important;
  border-radius: 5px !important;
  height: 55px !important;
  padding: 6px 10px !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: black !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
  flex: 0 0 130px;
  width: 130px;
  min-width: 130px;
  max-width: 130px;
  text-align: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
  .onboarding-new-design .oh-sticky-table__th .d-flex {
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 4px; }
    .onboarding-new-design .oh-sticky-table__th .d-flex span {
      text-overflow: ellipsis;
      overflow: hidden; }

.onboarding-new-design .oh-sticky-table__thead .oh-sticky-table__tr .oh-sticky-table__th:first-child {
  flex: 0 0 50px !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  position: sticky !important;
  left: 0 !important;
  z-index: 12 !important;
  background: rgba(217, 217, 217, 0.8) !important; }

.onboarding-new-design .oh-sticky-table__thead .oh-sticky-table__tr .oh-sticky-table__th:nth-child(2) {
  flex: 0 0 200px !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  position: sticky !important;
  left: 57px !important;
  z-index: 12 !important;
  background: rgba(217, 217, 217, 0.8) !important;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  justify-content: flex-start !important;
  padding-left: 15px !important; }

.onboarding-new-design .oh-sticky-table__tbody .oh-sticky-table__tr {
  display: flex;
  gap: 7px;
  margin-bottom: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  border-radius: 5px; }
  .onboarding-new-design .oh-sticky-table__tbody .oh-sticky-table__tr:last-child {
    margin-bottom: 0; }

.onboarding-new-design .oh-accordion-meta__body .oh-sticky-table .oh-sticky-table__tbody .oh-sticky-table__tr:hover,
.onboarding-new-design .oh-sticky-table__tbody .oh-sticky-table__tr:hover {
  background: #f0ebf7 !important;
  border: 0.75px solid var(--theme-primary, #023e8a) !important;
  border-radius: 5px !important; }

.onboarding-new-design .oh-accordion-meta__body .oh-sticky-table .oh-sticky-table__tbody .oh-sticky-table__tr:hover .oh-sticky-table__td,
.onboarding-new-design .oh-accordion-meta__body .oh-sticky-table .oh-sticky-table__tbody .oh-sticky-table__tr:hover .oh-sticky-table__sd,
.onboarding-new-design .oh-sticky-table__tbody .oh-sticky-table__tr:hover .oh-sticky-table__td,
.onboarding-new-design .oh-sticky-table__tbody .oh-sticky-table__tr:hover .oh-sticky-table__sd {
  background: transparent !important;
  border-color: transparent !important; }

.onboarding-new-design .oh-sticky-table__td,
.onboarding-new-design .oh-sticky-table__sd {
  background: #ffffff !important;
  border: 0.25px solid rgba(117, 117, 117, 0.5) !important;
  border-radius: 5px !important;
  height: 55px !important;
  padding: 6px 10px !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: black !important;
  flex: 0 0 130px;
  width: 130px;
  min-width: 130px;
  max-width: 130px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease; }

.onboarding-new-design .oh-sticky-table__sd {
  flex: 0 0 50px !important;
  width: 50px !important;
  max-width: 50px !important;
  min-width: 50px !important;
  background: #f5f5f5 !important;
  position: sticky !important;
  left: 0 !important;
  z-index: 11 !important; }

.onboarding-new-design .oh-sticky-table__tbody .oh-sticky-table__tr .oh-sticky-table__td:first-child {
  flex: 0 0 200px !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  background: rgba(217, 217, 217, 0.5) !important;
  justify-content: flex-start !important;
  padding-left: 10px !important;
  position: sticky !important;
  left: 57px !important;
  z-index: 11 !important;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05); }

.onboarding-new-design .oh-sticky-table__tbody .oh-sticky-table__tr:hover .oh-sticky-table__sd {
  background: #f0ebf7 !important; }

.onboarding-new-design .oh-sticky-table__tbody .oh-sticky-table__tr:hover .oh-sticky-table__td:first-child {
  background: #f0ebf7 !important; }

.onboarding-new-design .oh-sticky-table__tbody .oh-sticky-table__tr .oh-sticky-table__td:nth-child(2) {
  flex: 0 0 160px !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  font-size: 12px !important; }

.onboarding-new-design .oh-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: auto !important;
  width: 100%; }
  .onboarding-new-design .oh-profile__avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 1px solid black;
    border-radius: 100px;
    overflow: hidden;
    flex-shrink: 0; }
    .onboarding-new-design .oh-profile__avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 100px; }
  .onboarding-new-design .oh-profile__name {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: black;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: left; }

.onboarding-new-design .oh-btn-group {
  display: flex;
  gap: 8px;
  justify-content: center; }
  .onboarding-new-design .oh-btn-group .oh-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(117, 117, 117, 0.3);
    background: #ffffff;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease; }
    .onboarding-new-design .oh-btn-group .oh-btn ion-icon {
      font-size: 18px; }
    .onboarding-new-design .oh-btn-group .oh-btn:hover {
      background: #f7f7f5;
      border-color: var(--theme-primary);
      color: var(--theme-primary); }
    .onboarding-new-design .oh-btn-group .oh-btn.oh-btn--danger-outline:hover {
      border-color: #ef4444;
      color: #ef4444;
      background: rgba(239, 68, 68, 0.1); }

.onboarding-new-design .oh-sticky-table__td select {
  width: 100%;
  border: 1px solid rgba(117, 117, 117, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  color: #333;
  background: #ffffff;
  cursor: pointer; }
  .onboarding-new-design .oh-sticky-table__td select:focus {
    outline: none;
    border-color: var(--theme-primary); }

.onboarding-new-design .oh-checkpoint-badge {
  padding: 6px 12px;
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500; }
  .onboarding-new-design .oh-checkpoint-badge--secondary {
    background: #f3f4f1;
    color: #333; }
  .onboarding-new-design .oh-checkpoint-badge--primary {
    background: rgba(2, 62, 138, 0.1);
    color: var(--theme-primary); }

.onboarding-new-design .oh-pagination {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(117, 117, 117, 0.2); }

.onboarding-new-design .highlight-selected .oh-sticky-table__td,
.onboarding-new-design .highlight-selected .oh-sticky-table__sd {
  background: rgba(2, 62, 138, 0.05) !important;
  border-color: var(--theme-primary) !important; }

.onboarding-new-design .oh-sticky-table__right {
  position: sticky !important;
  right: 0 !important;
  background-color: #fff !important;
  z-index: 10;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.08);
  flex-shrink: 0 !important;
  min-width: 100px !important; }
  .onboarding-new-design .oh-sticky-table__right.oh-sticky-table__th {
    background: rgba(217, 217, 217, 0.5) !important; }
  .onboarding-new-design .oh-sticky-table__right.oh-sticky-table__td {
    background: #ffffff !important; }

.onboarding-new-design .oh-sticky-table__tbody .oh-sticky-table__tr:hover .oh-sticky-table__right {
  background: #f0ebf7 !important; }

.onboarding-new-design .oh-sticky-table {
  overflow-x: auto !important;
  overflow-y: visible !important; }

.onboarding-new-design .oh-sticky-table__thead .oh-sticky-table__tr,
.onboarding-new-design .oh-sticky-table__tbody .oh-sticky-table__tr {
  flex-wrap: nowrap !important; }

.onboarding-new-design__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 46px;
  margin-top: 14px; }

.onboarding-new-design__card {
  background: #f7f7f5;
  border-radius: 69px;
  box-shadow: 0px 0px 32px 8px rgba(0, 0, 0, 0.03);
  padding: 22px 25px 0 25px;
  height: 275px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.3s ease;
  cursor: pointer; }
  .onboarding-new-design__card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 8px 40px 12px rgba(0, 0, 0, 0.08); }

.onboarding-new-design__card-photo {
  width: 155px;
  height: 155px;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  margin: 0 auto; }
  .onboarding-new-design__card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.onboarding-new-design__card-menu {
  position: absolute;
  bottom: 90px;
  right: 15px;
  z-index: 100; }
  .onboarding-new-design__card-menu .oh-dropdown__menu {
    z-index: 999 !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    min-width: 160px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 8px 0; }
  .onboarding-new-design__card-menu .oh-dropdown__item {
    padding: 0;
    margin: 0; }
  .onboarding-new-design__card-menu .oh-dropdown__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: background 0.2s ease; }
    .onboarding-new-design__card-menu .oh-dropdown__link ion-icon {
      font-size: 18px;
      color: #666; }
    .onboarding-new-design__card-menu .oh-dropdown__link:hover {
      background: #f3f4f1; }
    .onboarding-new-design__card-menu .oh-dropdown__link--danger {
      color: #ef4444; }
      .onboarding-new-design__card-menu .oh-dropdown__link--danger ion-icon {
        color: #ef4444; }

.onboarding-new-design__card-menu-btn {
  background: white;
  border: none;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease; }
  .onboarding-new-design__card-menu-btn ion-icon {
    font-size: 18px;
    color: #666; }
  .onboarding-new-design__card-menu-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); }
    .onboarding-new-design__card-menu-btn:hover ion-icon {
      color: var(--theme-primary); }

.onboarding-new-design__card-footer {
  background: white;
  width: calc(100% + 50px);
  height: 81px;
  border-radius: 22px 22px 127px 127px;
  margin-top: auto;
  margin-left: -25px;
  margin-right: -25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  position: relative; }

.onboarding-new-design__card-name {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 900;
  font-size: 14px;
  color: #000000;
  margin: -20px 0 0 0;
  text-align: center; }

.onboarding-new-design__card-position {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 200;
  font-size: 13px;
  color: #757575;
  margin: 0;
  text-align: center; }

.onboarding-new-design__card-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  border-radius: 100px;
  border: 0.1px solid; }
  .onboarding-new-design__card-badge--joining-set {
    background: yellowgreen;
    border-color: #6b8e23; }
  .onboarding-new-design__card-badge--joining-not-set {
    background: burlywood;
    border-color: #a67c52; }
  .onboarding-new-design__card-badge--portal-sent {
    background: yellowgreen;
    border-color: #6b8e23; }
  .onboarding-new-design__card-badge--portal-not-sent {
    background: rgba(128, 128, 128, 0.5);
    border-color: #808080; }
  .onboarding-new-design__card-badge--hired {
    background: #4caf50;
    border-color: #388e3c; }

.onboarding-new-design__empty {
  text-align: center;
  padding: 60px 20px;
  color: #666; }
  .onboarding-new-design__empty ion-icon {
    font-size: 64px;
    color: #ccc;
    margin-bottom: 20px; }
  .onboarding-new-design__empty h3, .onboarding-new-design__empty .h3 {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #333;
    margin: 0 0 8px 0; }
  .onboarding-new-design__empty p {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: #666;
    margin: 0; }

.onboarding-new-design__pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px; }
  .onboarding-new-design__pagination .pagination {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0; }
    .onboarding-new-design__pagination .pagination li a,
    .onboarding-new-design__pagination .pagination li span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      color: #333;
      text-decoration: none;
      font-family: "DM Sans", sans-serif;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.2s ease; }
      .onboarding-new-design__pagination .pagination li a ion-icon,
      .onboarding-new-design__pagination .pagination li span ion-icon {
        font-size: 18px; }
    .onboarding-new-design__pagination .pagination li a:hover {
      background: var(--theme-primary);
      color: #fff; }
    .onboarding-new-design__pagination .pagination li.active span {
      background: var(--theme-primary);
      color: #fff; }
    .onboarding-new-design__pagination .pagination li.disabled span {
      color: #ccc;
      cursor: not-allowed; }

@media (max-width: 1800px) {
  .onboarding-new-design__grid {
    grid-template-columns: repeat(5, 1fr); } }

@media (max-width: 1600px) {
  .onboarding-new-design__grid {
    grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 1200px) {
  .onboarding-new-design__grid {
    grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 900px) {
  .onboarding-new-design__grid {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) {
  .onboarding-new-design__grid {
    grid-template-columns: 1fr; } }

.candidate-profile-new-design {
  background: #f3f4f1;
  margin: 0;
  position: relative;
  min-height: 100vh;
  padding: 97px 30px 40px 18px !important; }

.candidate-profile-new-design__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0px;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0; }

.candidate-profile-new-design__toolbar-back {
  background: #ffffff;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #000000; }
  .candidate-profile-new-design__toolbar-back ion-icon {
    font-size: 24px;
    color: #000000; }
  .candidate-profile-new-design__toolbar-back:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.candidate-profile-new-design__toolbar-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 37px;
  color: #000000;
  margin: 0;
  margin-left: 18px; }

.candidate-profile-new-design__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto; }

.candidate-profile-new-design__toolbar-dropdown {
  position: relative;
  margin-right: auto;
  margin-left: 16px; }

.candidate-profile-new-design__toolbar-tab {
  background: white;
  height: 55px;
  padding: 0 24px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease; }
  .candidate-profile-new-design__toolbar-tab span {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 200;
    font-size: 18px;
    color: #757575; }
  .candidate-profile-new-design__toolbar-tab ion-icon {
    font-size: 18px;
    color: #757575; }
  .candidate-profile-new-design__toolbar-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.candidate-profile-new-design__dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  padding: 0;
  z-index: 1000; }
  .candidate-profile-new-design__dropdown-menu > .candidate-profile-new-design__dropdown-item:first-child {
    border-radius: 12px 12px 0 0; }
  .candidate-profile-new-design__dropdown-menu > .candidate-profile-new-design__dropdown-item:last-child {
    border-radius: 0 0 12px 12px; }

.candidate-profile-new-design__dropdown-item {
  display: block;
  padding: 12px 20px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px !important;
  color: #000000;
  text-decoration: none;
  transition: background 0.2s ease; }
  .candidate-profile-new-design__dropdown-item:hover {
    background: rgba(108, 59, 170, 0.15) !important;
    color: #6c3baa !important; }
  .candidate-profile-new-design__dropdown-item--active {
    color: #6c3baa !important;
    font-weight: 600;
    background: rgba(108, 59, 170, 0.15);
    position: relative; }
    .candidate-profile-new-design__dropdown-item--active::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 60%;
      background: #6c3baa;
      border-radius: 0 2px 2px 0; }

.candidate-profile-new-design__toolbar-edit {
  background: #c8b1e4;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #6c3baa; }
  .candidate-profile-new-design__toolbar-edit ion-icon {
    font-size: 24px;
    color: #6c3baa; }
  .candidate-profile-new-design__toolbar-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06);
    background: #b89ed4; }

.candidate-profile-new-design__toolbar-convert {
  background: #ffffff !important;
  height: 45px;
  padding: 0 20px;
  border-radius: 10px;
  border: 0.25px solid rgba(117, 117, 117, 0.5) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #757575;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap; }
  .candidate-profile-new-design__toolbar-convert .toolbar-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(45%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); }
  .candidate-profile-new-design__toolbar-convert:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06);
    background: #f5f5f5 !important; }

.candidate-profile-new-design__content {
  display: grid;
  grid-template-columns: 399px 1fr 364px;
  gap: 14px;
  margin-top: 14px; }

.candidate-profile-new-design__left {
  display: flex;
  flex-direction: column;
  gap: 14px; }

.candidate-profile-new-design__photo {
  background: #ffffff;
  width: 100%;
  height: 323px;
  border-radius: 231px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }
  .candidate-profile-new-design__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.candidate-profile-new-design__contact {
  background: #ffffff;
  border-radius: 69px;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px; }

.candidate-profile-new-design__badge {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #000000;
  text-align: center;
  margin: 0 0 8px 0; }

.candidate-profile-new-design__contact-info {
  display: flex;
  flex-direction: column;
  gap: 16px; }

.candidate-profile-new-design__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px; }

.candidate-profile-new-design__contact-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
  .candidate-profile-new-design__contact-icon img {
    width: 20px;
    height: 20px; }

.candidate-profile-new-design__contact-text {
  display: flex;
  flex-direction: column;
  gap: 2px; }
  .candidate-profile-new-design__contact-text .label {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #757575;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px; }
  .candidate-profile-new-design__contact-text .value {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #000000;
    margin: 0; }

.candidate-profile-new-design__work {
  background: #ffffff;
  border-radius: 69px;
  padding: 30px 32px; }

.candidate-profile-new-design__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px; }

.candidate-profile-new-design__tab {
  background: transparent;
  border: 1.5px solid #e0e0e0;
  border-radius: 100px;
  padding: 10px 20px;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #757575;
  cursor: pointer;
  transition: all 0.2s ease; }
  .candidate-profile-new-design__tab:hover {
    border-color: #6c3baa;
    color: #6c3baa; }
  .candidate-profile-new-design__tab--active {
    background: #6c3baa;
    border-color: #6c3baa;
    color: #ffffff; }
    .candidate-profile-new-design__tab--active:hover {
      background: #6c3baa;
      color: #ffffff; }

.candidate-profile-new-design__tab-content {
  display: none; }
  .candidate-profile-new-design__tab-content--active {
    display: block; }

.candidate-profile-new-design__section {
  margin-bottom: 24px; }
  .candidate-profile-new-design__section:last-child {
    margin-bottom: 0; }

.candidate-profile-new-design__section-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #000000;
  margin: 0 0 20px 0; }

.candidate-profile-new-design__info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; }

.candidate-profile-new-design__info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px; }

.candidate-profile-new-design__info-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
  .candidate-profile-new-design__info-icon img {
    width: 20px;
    height: 20px; }

.candidate-profile-new-design__info-text {
  display: flex;
  flex-direction: column;
  gap: 2px; }
  .candidate-profile-new-design__info-text .label {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #757575;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px; }
  .candidate-profile-new-design__info-text .value {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #000000;
    margin: 0; }
  .candidate-profile-new-design__info-text .profile-link {
    color: #6c3baa;
    text-decoration: none; }
    .candidate-profile-new-design__info-text .profile-link:hover {
      text-decoration: underline; }

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600; }
  .status-badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e; }
  .status-badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b; }
  .status-badge--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444; }

.candidate-profile-new-design__tasks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px; }

.candidate-profile-new-design__task-item {
  background: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px; }

.candidate-profile-new-design__task-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px; }

.candidate-profile-new-design__task-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0; }
  .candidate-profile-new-design__task-dot--pending {
    background-color: #f59e0b; }
  .candidate-profile-new-design__task-dot--completed {
    background-color: #22c55e; }
  .candidate-profile-new-design__task-dot--cancelled {
    background-color: #ef4444; }

.candidate-profile-new-design__task-name {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b; }

.candidate-profile-new-design__task-stage {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px; }

.candidate-profile-new-design__task-status {
  display: flex;
  align-items: center; }

.candidate-profile-new-design__task-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500; }
  .candidate-profile-new-design__task-badge--pending {
    background-color: rgba(245, 158, 11, 0.15);
    color: #f59e0b; }
  .candidate-profile-new-design__task-badge--completed {
    background-color: rgba(34, 197, 94, 0.15);
    color: #22c55e; }
  .candidate-profile-new-design__task-badge--cancelled {
    background-color: rgba(239, 68, 68, 0.15);
    color: #ef4444; }

.candidate-profile-new-design__task-empty {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: #64748b;
  gap: 8px; }
  .candidate-profile-new-design__task-empty ion-icon {
    font-size: 40px;
    opacity: 0.5; }
  .candidate-profile-new-design__task-empty span {
    font-family: "DM Sans", sans-serif;
    font-size: 14px; }

.candidate-profile-new-design__personal {
  background: #ffffff;
  border-radius: 69px;
  padding: 30px 32px; }

.candidate-profile-new-design__personal-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #000000;
  margin: 0 0 24px 0; }

.candidate-profile-new-design__personal-info {
  display: flex;
  flex-direction: column;
  gap: 20px; }

.candidate-profile-new-design__personal-item {
  display: flex;
  align-items: flex-start;
  gap: 12px; }

.candidate-profile-new-design__personal-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
  .candidate-profile-new-design__personal-icon img {
    width: 20px;
    height: 20px; }

.candidate-profile-new-design__personal-text {
  display: flex;
  flex-direction: column;
  gap: 2px; }
  .candidate-profile-new-design__personal-text .label {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #757575;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px; }
  .candidate-profile-new-design__personal-text .value {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #000000;
    margin: 0; }

@media (max-width: 1400px) {
  .candidate-profile-new-design__content {
    grid-template-columns: 320px 1fr 300px; }
  .candidate-profile-new-design__info-grid {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 1200px) {
  .candidate-profile-new-design__content {
    grid-template-columns: 1fr 1fr; }
  .candidate-profile-new-design__left {
    grid-column: span 2;
    flex-direction: row;
    gap: 14px; }
  .candidate-profile-new-design__photo {
    width: 300px;
    height: 300px;
    flex-shrink: 0; }
  .candidate-profile-new-design__contact {
    flex: 1; }
  .candidate-profile-new-design__personal {
    grid-column: span 2; } }

@media (max-width: 900px) {
  .candidate-profile-new-design__content {
    grid-template-columns: 1fr; }
  .candidate-profile-new-design__left {
    grid-column: span 1;
    flex-direction: column; }
  .candidate-profile-new-design__photo {
    width: 100%;
    height: 300px; }
  .candidate-profile-new-design__personal {
    grid-column: span 1; }
  .candidate-profile-new-design__info-grid {
    grid-template-columns: 1fr; }
  .candidate-profile-new-design__tasks-grid {
    grid-template-columns: 1fr; }
  .candidate-profile-new-design__task-empty {
    grid-column: span 1; } }

@media (max-width: 768px) {
  .candidate-profile-new-design__toolbar-title {
    font-size: 24px; }
  .candidate-profile-new-design__content {
    gap: 10px; } }

.recruitment-new-design__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0px;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0; }

.recruitment-new-design__toolbar-back {
  background: #f7f7f5;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #000000; }
  .recruitment-new-design__toolbar-back ion-icon {
    font-size: 24px;
    color: #000000; }
  .recruitment-new-design__toolbar-back .toolbar-icon {
    width: 24px;
    height: 24px; }
  .recruitment-new-design__toolbar-back:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.recruitment-new-design__toolbar-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 37px;
  color: #000000;
  margin: 0;
  margin-left: 18px; }

.recruitment-new-design__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto; }

.recruitment-new-design__search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative; }

.recruitment-new-design__toolbar-search {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03); }
  .recruitment-new-design__toolbar-search ion-icon {
    font-size: 19px;
    color: #757575; }
  .recruitment-new-design__toolbar-search .toolbar-icon {
    width: 19px;
    height: 19px; }
  .recruitment-new-design__toolbar-search:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.recruitment-new-design__search-input {
  display: none;
  background: white;
  border: none !important;
  border-radius: 100px !important;
  height: 55px !important;
  padding: 0 24px !important;
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 14px;
  color: #757575;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease; }
  .recruitment-new-design__search-input:focus {
    outline: 2px solid #0022ff;
    outline-offset: 0; }
  .recruitment-new-design__search-input--expanded {
    display: block;
    width: 295px;
    opacity: 1; }

.recruitment-new-design__toolbar-tab {
  background: white;
  height: 55px;
  padding: 0 24px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03); }
  .recruitment-new-design__toolbar-tab span {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 200;
    font-size: 18px;
    color: #757575; }
  .recruitment-new-design__toolbar-tab ion-icon {
    font-size: 18px;
    color: #757575; }
  .recruitment-new-design__toolbar-tab .toolbar-icon {
    width: 18px;
    height: 18px; }
  .recruitment-new-design__toolbar-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.recruitment-new-design__toolbar-icon-btn {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .recruitment-new-design__toolbar-icon-btn ion-icon {
    font-size: 19px;
    color: #757575; }
  .recruitment-new-design__toolbar-icon-btn .toolbar-icon {
    width: 19px;
    height: 19px;
    color: #757575; }
  .recruitment-new-design__toolbar-icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }
    .recruitment-new-design__toolbar-icon-btn:hover ion-icon {
      color: var(--theme-primary); }

.recruitment-new-design__toolbar-add {
  background: var(--theme-accent, #90e0ef);
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none; }
  .recruitment-new-design__toolbar-add .toolbar-icon {
    width: 24px;
    height: 24px; }
  .recruitment-new-design__toolbar-add:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06);
    background: var(--theme-accent, #90e0ef); }

.recruitment-new-design__toolbar-dropdown {
  position: relative;
  margin-right: auto;
  margin-left: 16px; }

.recruitment-new-design__dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  padding: 0;
  z-index: 1000; }
  .recruitment-new-design__dropdown-menu > .recruitment-new-design__dropdown-item:first-child {
    border-radius: 12px 12px 0 0; }
  .recruitment-new-design__dropdown-menu > .recruitment-new-design__dropdown-item:last-child {
    border-radius: 0 0 12px 12px; }

.recruitment-new-design__dropdown-item {
  display: block;
  padding: 12px 20px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px !important;
  color: #000000;
  text-decoration: none;
  transition: background 0.2s ease; }
  .recruitment-new-design__dropdown-item:hover {
    background: rgba(108, 59, 170, 0.15) !important;
    color: #6c3baa !important; }
  .recruitment-new-design__dropdown-item--active {
    color: #6c3baa !important;
    font-weight: 600;
    background: rgba(108, 59, 170, 0.15);
    position: relative; }
    .recruitment-new-design__dropdown-item--active::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 60%;
      background: #6c3baa;
      border-radius: 0 2px 2px 0; }

.recruitment-status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block; }
  .recruitment-status-dot--open {
    background-color: yellowgreen; }
  .recruitment-status-dot--closed {
    background-color: orangered; }

.employee-profile-new-design__info-item input[type="file"],
input[name="resume"] {
  padding: 5px !important; }

.offboarding-new-design__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0px;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0; }

.offboarding-new-design__toolbar-back {
  background: #f7f7f5;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #000000; }
  .offboarding-new-design__toolbar-back ion-icon {
    font-size: 24px;
    color: #000000; }
  .offboarding-new-design__toolbar-back .toolbar-icon {
    width: 24px;
    height: 24px; }
  .offboarding-new-design__toolbar-back:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.offboarding-new-design__toolbar-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 37px;
  color: #000000;
  margin: 0;
  margin-left: 18px; }

.offboarding-new-design__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto; }

.offboarding-new-design__search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative; }

.offboarding-new-design__toolbar-search {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03); }
  .offboarding-new-design__toolbar-search ion-icon {
    font-size: 19px;
    color: #757575; }
  .offboarding-new-design__toolbar-search .toolbar-icon {
    width: 19px;
    height: 19px; }
  .offboarding-new-design__toolbar-search:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.offboarding-new-design__search-input {
  display: none;
  background: white;
  border: none !important;
  border-radius: 100px !important;
  height: 55px !important;
  padding: 0 24px !important;
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 14px;
  color: #757575;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease; }
  .offboarding-new-design__search-input:focus {
    outline: 2px solid #0022ff;
    outline-offset: 0; }
  .offboarding-new-design__search-input--expanded {
    display: block;
    width: 295px;
    opacity: 1; }

.offboarding-new-design__toolbar-tab {
  background: white;
  height: 55px;
  padding: 0 24px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03); }
  .offboarding-new-design__toolbar-tab span {
    font-family: "DM Sans", sans-serif;
    font-variation-settings: "opsz" 14;
    font-weight: 200;
    font-size: 18px;
    color: #757575; }
  .offboarding-new-design__toolbar-tab ion-icon {
    font-size: 18px;
    color: #757575; }
  .offboarding-new-design__toolbar-tab .toolbar-icon {
    width: 18px;
    height: 18px; }
  .offboarding-new-design__toolbar-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.offboarding-new-design__toolbar-icon-btn {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .offboarding-new-design__toolbar-icon-btn ion-icon {
    font-size: 19px;
    color: #757575; }
  .offboarding-new-design__toolbar-icon-btn .toolbar-icon {
    width: 19px;
    height: 19px;
    color: #757575; }
  .offboarding-new-design__toolbar-icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }
    .offboarding-new-design__toolbar-icon-btn:hover ion-icon {
      color: var(--theme-primary); }

.offboarding-new-design__toolbar-add {
  background: var(--theme-accent, #90e0ef);
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none; }
  .offboarding-new-design__toolbar-add .toolbar-icon {
    width: 24px;
    height: 24px; }
  .offboarding-new-design__toolbar-add:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06);
    background: var(--theme-accent, #90e0ef); }

.offboarding-new-design__toolbar-dropdown {
  position: relative;
  margin-right: auto;
  margin-left: 16px; }

.offboarding-new-design__dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  padding: 0;
  z-index: 1000; }
  .offboarding-new-design__dropdown-menu > .offboarding-new-design__dropdown-item:first-child {
    border-radius: 12px 12px 0 0; }
  .offboarding-new-design__dropdown-menu > .offboarding-new-design__dropdown-item:last-child {
    border-radius: 0 0 12px 12px; }

.offboarding-new-design__dropdown-item {
  display: block;
  padding: 12px 20px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px !important;
  color: #000000;
  text-decoration: none;
  transition: background 0.2s ease; }
  .offboarding-new-design__dropdown-item:hover {
    background: rgba(108, 59, 170, 0.15) !important;
    color: #6c3baa !important; }
  .offboarding-new-design__dropdown-item--active {
    color: #6c3baa !important;
    font-weight: 600;
    background: rgba(108, 59, 170, 0.15);
    position: relative; }
    .offboarding-new-design__dropdown-item--active::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 60%;
      background: #6c3baa;
      border-radius: 0 2px 2px 0; }

.offboarding-new-design__toolbar ~ .oh-wrapper .oh-main__topbar,
.offboarding-new-design__toolbar ~ .oh-main__topbar,
.offboarding-new-design__toolbar + .oh-wrapper + .oh-wrapper .oh-main__topbar {
  display: none !important; }

body:has(.offboarding-new-design__toolbar) .oh-main__topbar {
  display: none !important; }

body:has(.offboarding-new-design__toolbar) .oh-main__titlebar {
  display: none !important; }

body:has(.offboarding-new-design__toolbar) .oh-main__titlebar-title {
  display: none !important; }

.offboarding-pipeline-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0 0 24px 0;
  list-style: none;
  flex-wrap: wrap; }

.offboarding-pipeline-tabs__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 200;
  color: #757575;
  background: transparent;
  border: none;
  white-space: nowrap; }
  .offboarding-pipeline-tabs__tab:hover {
    color: #333; }
  .offboarding-pipeline-tabs__tab--active {
    background: #c8b1e4;
    color: #6c3baa;
    font-weight: 500; }

.offboarding-pipeline-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 100px;
  background: rgba(200, 177, 228, 0.5);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #6c3baa; }

.offboarding-pipeline-tabs__tab--active .offboarding-pipeline-tabs__badge {
  background: rgba(255, 255, 255, 0.6); }

.offboarding-pipeline-tabs__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px; }

.offboarding-pipeline-accordion {
  margin-bottom: 10px; }

.offboarding-pipeline-accordion__header {
  background-color: white !important;
  color: black !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  padding: 17px 25px !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-shadow: none !important;
  border: 0.5px solid rgba(117, 117, 117, 0.5) !important;
  border-left: 0.5px solid rgba(117, 117, 117, 0.5) !important;
  transition: border-radius 0.3s ease; }
  .offboarding-pipeline-accordion__header.oh-accordion-meta__header, .offboarding-pipeline-accordion__header.oh-accordion-meta__header--show {
    border-left: 0.5px solid rgba(117, 117, 117, 0.5) !important;
    border-left-width: 0.5px !important; }
  .offboarding-pipeline-accordion__header--expanded {
    border-radius: 10px 10px 0 0 !important; }

.offboarding-pipeline-accordion__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  color: #000; }

.offboarding-pipeline-accordion__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 100px;
  background: rgba(200, 177, 228, 0.5);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #6c3baa; }

.offboarding-pipeline-accordion__chevron {
  font-size: 18px;
  color: #666;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center; }

.offboarding-pipeline-accordion__header--expanded .offboarding-pipeline-accordion__chevron {
  transform: rotate(180deg); }

.offboarding-pipeline-accordion__actions {
  display: flex;
  align-items: center;
  gap: 8px; }

.offboarding-pipeline-accordion__body {
  border: 0.5px solid rgba(117, 117, 117, 0.5) !important;
  border-top: none !important;
  padding: 10px 15px 15px 15px !important;
  border-radius: 0 0 10px 10px !important;
  background: white;
  overflow: visible; }

.offboarding-pipeline-accordion__body--hidden {
  display: none; }

.offboarding-pipeline-table {
  width: 100%;
  overflow-x: auto;
  border: 0.5px solid rgba(117, 117, 117, 0.5);
  border-radius: 12px;
  background: white;
  box-shadow: none; }
  .offboarding-pipeline-table .oh-sticky-table__table {
    border: none !important;
    min-width: 100%;
    width: max-content; }
  .offboarding-pipeline-table .oh-sticky-table__thead {
    background: transparent !important; }
  .offboarding-pipeline-table .oh-sticky-table__thead .oh-sticky-table__tr {
    background: transparent !important; }
  .offboarding-pipeline-table .oh-sticky-table__thead .oh-sticky-table__th {
    background: rgba(217, 217, 217, 0.3) !important;
    border: 0.25px solid rgba(117, 117, 117, 0.5) !important;
    border-radius: 5px !important;
    font-family: "DM Sans", sans-serif !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    color: #333 !important;
    text-align: center !important;
    padding: 14px 10px !important;
    height: auto !important;
    min-height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; }
  .offboarding-pipeline-table .oh-sticky-table__thead .oh-sticky-table__tr {
    display: flex !important;
    gap: 7px !important;
    padding: 7px 7px 0 7px !important; }
  .offboarding-pipeline-table .oh-sticky-table__thead .oh-sticky-table__th {
    flex: 1;
    min-width: 120px; }
  .offboarding-pipeline-table .oh-sticky-table__thead .oh-sticky-table__th:first-child {
    flex: 2;
    justify-content: flex-start !important;
    padding-left: 16px !important; }
  .offboarding-pipeline-table .oh-sticky-table__tbody {
    background: transparent !important; }
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__tr {
    display: flex !important;
    gap: 7px !important;
    padding: 7px 7px 0 7px !important;
    cursor: pointer;
    position: relative;
    background: transparent !important;
    border: none !important; }
    .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__tr:last-child {
      padding-bottom: 7px !important; }
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__tr:hover::before {
    content: "" !important;
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    right: 7px !important;
    bottom: 0 !important;
    background-color: rgba(108, 59, 170, 0.1) !important;
    border: 0.75px solid #6c3baa !important;
    border-radius: 5px !important;
    pointer-events: none !important;
    z-index: 0 !important; }
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__tr:last-child:hover::before {
    bottom: 7px !important; }
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__tr:hover .oh-sticky-table__td,
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__tr:hover .oh-sticky-table__sd {
    border-color: transparent !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important; }
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__td,
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__sd {
    flex: 1;
    min-width: 120px;
    background: white !important;
    border: 0.25px solid rgba(117, 117, 117, 0.5) !important;
    border-radius: 5px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 14px !important;
    color: #333 !important;
    padding: 8px 12px !important; }
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__sd,
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__td:first-child {
    flex: 2;
    justify-content: flex-start !important;
    padding-left: 16px !important;
    background: rgba(217, 217, 217, 0.3) !important;
    gap: 12px; }
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__sd .oh-profile__image,
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__sd img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important; }
  .offboarding-pipeline-table .oh-sticky-table__tbody .oh-sticky-table__sd .oh-profile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important; }

.offboarding-pipeline-table .oh-sticky-table__tbody .oh-select-custom {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  background: white; }

.offboarding-pipeline__add-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(108, 59, 170, 0.1);
  color: #6c3baa;
  border: 1px solid rgba(108, 59, 170, 0.3);
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-bottom: 16px;
  float: right; }
  .offboarding-pipeline__add-stage:hover {
    background: rgba(108, 59, 170, 0.2); }
  .offboarding-pipeline__add-stage ion-icon {
    font-size: 18px; }

body:has(.offboarding-new-design__toolbar) .oh-main__topbar {
  display: none !important; }

body:has(.offboarding-new-design__toolbar) .oh-main__titlebar {
  display: none !important; }

#pipelineContainer .oh-tabs__tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 17px !important;
  font-weight: 200 !important;
  color: #757575 !important;
  background: transparent !important;
  border: none !important;
  white-space: nowrap !important;
  box-shadow: none !important; }

#pipelineContainer .oh-tabs__tab:hover {
  color: #333 !important; }

#pipelineContainer .oh-tabs__tab--active {
  background: #c8b1e4 !important;
  color: #6c3baa !important;
  font-weight: 500 !important;
  border: none !important; }

#pipelineContainer .oh-tabs__tab span[id^="badge-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 6px !important;
  border-radius: 100px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background-color: #6b7280 !important;
  color: white !important; }

#pipelineContainer .oh-tabs__tab--active span[id^="badge-"] {
  background-color: #6c3baa !important;
  color: #c8b1e4 !important; }

#pipelineContainer .oh-tabs__tab .ps-3 {
  margin-left: 4px !important; }

#pipelineContainer .oh-tabs__tab .fa-ellipsis-vertical {
  color: #757575 !important;
  font-size: 14px !important; }

#pipelineContainer .oh-tabs__tab--active .fa-ellipsis-vertical {
  color: #6c3baa !important; }

#pipelineContainer .dropdown-wrapper-tab .dropdown-menu {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  padding: 8px !important;
  min-width: 180px !important; }
  #pipelineContainer .dropdown-wrapper-tab .dropdown-menu::before {
    display: none !important;
    content: none !important; }

#pipelineContainer .dropdown-wrapper-tab .dropdown-menu li a {
  padding: 10px 16px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  color: #333 !important; }

#pipelineContainer .dropdown-wrapper-tab .dropdown-menu li a:hover {
  background: rgba(200, 177, 228, 0.2) !important;
  color: #6c3baa !important; }

#pipelineContainer .oh-tabs__movable-area {
  margin-bottom: 10px !important; }

#pipelineContainer .oh-tabs__movable {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important; }

#pipelineContainer .oh-tabs__movable-header {
  background-color: white !important;
  color: black !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  padding: 17px 25px !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-shadow: none !important;
  border: 0.5px solid rgba(117, 117, 117, 0.5) !important;
  transition: border-radius 0.3s ease; }

#pipelineContainer .oh-tabs__movable-header:has(+ .oh-tabs__movable-body:not(.d-none)) {
  border-radius: 10px 10px 0 0 !important; }

#pipelineContainer .oh-tabs__movable-title {
  font-family: "DM Sans", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #000 !important;
  background: transparent !important;
  border: none !important; }

#pipelineContainer .oh-tabs__movable-body {
  border: none !important;
  border-top: none !important;
  padding: 0 !important;
  border-radius: 0 0 10px 10px !important;
  background: transparent !important;
  overflow: visible !important; }

#pipelineContainer .oh-tabs__movable-body .hlv-container {
  border: 0.5px solid rgba(117, 117, 117, 0.5) !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
  background: white !important;
  padding: 5px 10px 10px 10px !important;
  overflow: hidden !important; }

#pipelineContainer .heightContainer {
  overflow-x: auto !important;
  overflow-y: auto !important;
  scroll-behavior: smooth; }
  #pipelineContainer .heightContainer::-webkit-scrollbar {
    height: 8px; }
  #pipelineContainer .heightContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px; }
  #pipelineContainer .heightContainer::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 10px; }
    #pipelineContainer .heightContainer::-webkit-scrollbar-thumb:hover {
      background: #999; }

#pipelineContainer .fixed-table .stickyleft,
#pipelineContainer .fixed-table .stickyleft-second {
  position: static !important;
  left: auto !important;
  z-index: auto !important; }

#pipelineContainer .fixed-table tbody tr:hover td {
  background-color: #f0ebf7 !important; }

#pipelineContainer .quick-bulk-action {
  display: none !important; }

#pipelineContainer .oh-tabs__movable-header .oh-accordion-meta__btn {
  background: transparent !important;
  border: none !important;
  padding: 4px !important; }

#pipelineContainer .oh-tabs__movable-header .oh-accordion-meta__btn ion-icon {
  font-size: 18px;
  color: #666; }

#pipelineContainer .oh-tabs__movable-header .oh-dropdown__menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  padding: 8px 0 !important;
  min-width: 160px !important;
  z-index: 100 !important; }

#pipelineContainer .oh-tabs__movable-header .oh-dropdown__items {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important; }

#pipelineContainer .oh-tabs__movable-header .oh-dropdown__item {
  padding: 0 !important;
  margin: 0 !important; }

#pipelineContainer .oh-tabs__movable-header .oh-dropdown__item a {
  display: block !important;
  padding: 10px 20px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333333 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important; }

#pipelineContainer .oh-tabs__movable-header .oh-dropdown__item a:hover {
  background: rgba(108, 59, 170, 0.08) !important;
  color: var(--theme-primary, #6c3baa) !important; }

#pipelineContainer .oh-table_sticky--wrapper {
  border: none !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  scroll-behavior: smooth; }
  #pipelineContainer .oh-table_sticky--wrapper::-webkit-scrollbar {
    height: 8px; }
  #pipelineContainer .oh-table_sticky--wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px; }
  #pipelineContainer .oh-table_sticky--wrapper::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 10px; }
    #pipelineContainer .oh-table_sticky--wrapper::-webkit-scrollbar-thumb:hover {
      background: #999; }

#pipelineContainer .table-wrapper {
  overflow-x: auto !important;
  scroll-behavior: smooth; }
  #pipelineContainer .table-wrapper::-webkit-scrollbar {
    height: 8px; }
  #pipelineContainer .table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px; }
  #pipelineContainer .table-wrapper::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 10px; }
    #pipelineContainer .table-wrapper::-webkit-scrollbar-thumb:hover {
      background: #999; }

#pipelineContainer .fixed-table {
  width: 100%;
  min-width: max-content !important;
  border-collapse: separate !important;
  border-spacing: 7px !important;
  border: none !important; }

#pipelineContainer .fixed-table thead tr {
  background: transparent !important; }

#pipelineContainer .fixed-table thead th {
  background: rgba(217, 217, 217, 0.3) !important;
  border: 0.25px solid rgba(117, 117, 117, 0.5) !important;
  border-radius: 5px !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  color: #333 !important;
  text-align: center !important;
  padding: 14px 10px !important;
  height: 55px !important;
  vertical-align: middle !important;
  white-space: nowrap; }

#pipelineContainer .fixed-table thead th:first-child {
  text-align: left !important;
  padding-left: 16px !important; }

#pipelineContainer .fixed-table tbody tr {
  background: transparent !important;
  position: relative;
  cursor: pointer; }

#pipelineContainer .fixed-table tbody tr:hover {
  background: rgba(200, 177, 228, 0.25) !important;
  box-shadow: inset 0 0 0 0.75px #6c3baa !important;
  border-radius: 5px !important; }

#pipelineContainer .fixed-table tbody tr:hover td {
  background: transparent !important;
  border-color: transparent !important; }

#pipelineContainer .oh-sticky-dropdown_btn {
  display: none !important; }

#pipelineContainer .fixed-table tbody td {
  background: white !important;
  border: 0.25px solid rgba(117, 117, 117, 0.5) !important;
  border-radius: 5px !important;
  height: 60px !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  color: #333 !important;
  padding: 8px 12px !important; }

#pipelineContainer .fixed-table tbody td:first-child {
  background: rgba(217, 217, 217, 0.3) !important;
  text-align: left !important;
  padding-left: 16px !important; }

#pipelineContainer .fixed-table tbody td.p-0 {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  background: transparent !important;
  border: none !important; }

#pipelineContainer .fixed-table thead th:first-child:has(.bulk-list-table-row) {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  background: transparent !important; }

#pipelineContainer .fixed-table tbody td.p-0 + td {
  background: rgba(217, 217, 217, 0.3) !important;
  text-align: left !important;
  padding-left: 16px !important; }

#pipelineContainer .fixed-table .oh-profile__image,
#pipelineContainer .fixed-table .oh-table-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important; }

#pipelineContainer .fixed-table .oh-profile {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important; }

#pipelineContainer .fixed-table select.oh-custom-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: rgba(217, 217, 217, 0.3) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 100px !important;
  padding: 8px 32px 8px 16px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #757575 !important;
  cursor: pointer !important;
  outline: none !important;
  min-width: 140px !important;
  text-align: center !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease !important; }

#pipelineContainer .fixed-table select.oh-custom-select option {
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #757575 !important;
  background: #ffffff !important;
  padding: 10px 16px !important; }

#pipelineContainer .fixed-table select.oh-custom-select option:checked {
  background: rgba(108, 59, 170, 0.1) !important;
  color: var(--theme-primary, #6c3baa) !important; }

#pipelineContainer .fixed-table select.oh-custom-select:hover {
  border-color: #757575 !important; }

#pipelineContainer .fixed-table select.oh-custom-select:focus {
  border-color: var(--theme-primary, #6c3baa) !important;
  box-shadow: 0 0 0 3px rgba(108, 59, 170, 0.15) !important; }

#pipelineContainer .fixed-table .oh-btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap; }

#pipelineContainer .fixed-table .oh-btn-group .oh-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: none !important;
  background: var(--theme-primary, #6c3baa) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 16px !important;
  transition: all 0.2s ease !important; }

#pipelineContainer .fixed-table .oh-btn-group .oh-btn:hover {
  opacity: 0.85 !important;
  box-shadow: 0 2px 8px rgba(108, 59, 170, 0.3) !important; }

#pipelineContainer .fixed-table .oh-btn-group .oh-btn:last-child {
  background: #ffffff !important;
  color: #dc2626 !important;
  border: 1px solid #fee2e2 !important; }

#pipelineContainer .fixed-table .oh-btn-group .oh-btn:last-child:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important; }

#pipelineContainer .fixed-table td.stickyright,
#pipelineContainer .fixed-table th.stickyright {
  position: relative !important;
  right: auto !important;
  background: white !important;
  min-width: 200px !important;
  width: 200px !important; }

#pipelineContainer .fixed-table .oh-btn-group {
  min-width: 180px !important;
  justify-content: center; }

#pipelineContainer .oh-pagination {
  padding: 12px 15px; }

#pipelineContainer .quick-bulk-action {
  margin: 0 7px 7px 7px; }

#pipelineContainer .heightContainer {
  overflow-x: auto !important; }
  #pipelineContainer .heightContainer::-webkit-scrollbar {
    height: 8px; }
  #pipelineContainer .heightContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px; }
  #pipelineContainer .heightContainer::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 10px; }
    #pipelineContainer .heightContainer::-webkit-scrollbar-thumb:hover {
      background: #999; }

#pipelineContainer .fixed-table .oh-checkpoint-badge {
  border: none !important;
  box-shadow: none !important; }

#pipelineContainer .fixed-table select[name="task_status"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: rgba(217, 217, 217, 0.3) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 100px !important;
  padding: 8px 32px 8px 16px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #757575 !important;
  cursor: pointer !important;
  outline: none !important;
  min-width: 130px !important;
  width: auto !important;
  text-align: center !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease !important; }

#pipelineContainer .fixed-table select[name="task_status"] option {
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #757575 !important;
  background: #ffffff !important;
  padding: 10px 16px !important; }

#pipelineContainer .fixed-table select[name="task_status"] option:checked {
  background: rgba(108, 59, 170, 0.1) !important;
  color: var(--theme-primary, #6c3baa) !important; }

#pipelineContainer .fixed-table select[name="task_status"]:hover {
  border-color: #757575 !important; }

#pipelineContainer .fixed-table select[name="task_status"]:focus {
  border-color: var(--theme-primary, #6c3baa) !important;
  box-shadow: 0 0 0 3px rgba(108, 59, 170, 0.15) !important; }

.oh-dropdown__filter-body .oh-accordion-body select.oh-select-2 {
  width: 100% !important;
  padding: 8px 24px 8px 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  background-position: right 6px center !important;
  background-size: 12px !important; }

#pipelineContainer .groupContainer {
  gap: 16px !important;
  padding: 4px 8px 20px 8px !important; }
  #pipelineContainer .groupContainer::-webkit-scrollbar {
    height: 6px; }
  #pipelineContainer .groupContainer::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px; }
  #pipelineContainer .groupContainer::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 10px; }
    #pipelineContainer .groupContainer::-webkit-scrollbar-thumb:hover {
      background: #999; }

#pipelineContainer .kanban-block {
  background: #f7f8f6 !important;
  border-radius: 18px !important;
  min-width: 200px !important;
  width: calc((100% - 64px) / 5) !important;
  flex: 0 0 calc((100% - 64px) / 5) !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
  margin-right: 0;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; }
  #pipelineContainer .kanban-block::-webkit-scrollbar {
    width: 4px; }
  #pipelineContainer .kanban-block::-webkit-scrollbar-track {
    background: transparent; }
  #pipelineContainer .kanban-block::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 10px; }

#pipelineContainer .groupContainer {
  border: none !important;
  outline: none !important; }

#pipelineContainer .hlv-container {
  border: none !important;
  outline: none !important; }

#pipelineContainer .kanban-block .oh-kanban__section-head {
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border: none !important;
  outline: none !important;
  min-height: auto !important;
  margin-bottom: 0 !important; }

#pipelineContainer .kanban-block .kanban-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #f7f8f6 !important;
  padding: 8px 12px !important;
  margin: 10px 10px 8px 10px !important;
  width: calc(100% - 20px) !important;
  border: 1.5px solid #1e293b !important;
  border-radius: 12px !important;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  gap: 8px !important;
  min-height: 46px !important;
  backdrop-filter: none !important;
  position: relative !important; }

#pipelineContainer .kanban-block .kanban-head > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important; }

#pipelineContainer .kanban-block .kanban-title {
  width: auto !important;
  max-width: none !important;
  height: 39px !important;
  display: flex !important;
  align-items: center !important; }

#pipelineContainer .kanban-block .oh-kanban__button-contaner {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important; }

#pipelineContainer .kanban-block .oh-kanban__button-contaner .dropdown-wrapper {
  margin-left: 0 !important; }

#pipelineContainer .kanban-block .oh-kanban__button-contaner .fa-ellipsis-vertical {
  color: #475569 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 5px 7px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important; }

#pipelineContainer .kanban-block .oh-kanban__button-contaner .fa-ellipsis-vertical:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important; }

#pipelineContainer .kanban-block .kanban-title h5, #pipelineContainer .kanban-block .kanban-title .h5 {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  padding: 5px 14px 5px 5px !important;
  border-radius: 100px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  height: 28px !important;
  min-height: 28px !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; }

#pipelineContainer .kanban-block .kanban-title h5 span, #pipelineContainer .kanban-block .kanban-title .h5 span {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important; }

#pipelineContainer .kanban-block .oh-kanban__section-body {
  padding: 4px 12px 12px 12px !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important; }

#pipelineContainer .task-card > div {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #eaecee !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  padding: 18px !important;
  margin-bottom: 10px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important; }

#pipelineContainer .task-card > div:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important; }

#pipelineContainer .task-card img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #e5e7eb !important;
  flex-shrink: 0 !important; }

#pipelineContainer .task-card h5, #pipelineContainer .task-card .h5 {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.3 !important;
  margin: 0 !important; }

#pipelineContainer .task-card .border-b {
  border-color: #f1f3f5 !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important; }

#pipelineContainer .task-card .flex.gap-2.items-center.relative.mb-2 {
  margin-bottom: 8px !important;
  padding: 6px 10px !important;
  background: #f9fafb !important;
  border-radius: 8px !important; }

#pipelineContainer .task-card .text-\[\#565E6C\] {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important; }

#pipelineContainer .task-card .font-semibold span {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important; }

#pipelineContainer .task-card .dropdown-wrapper {
  opacity: 0;
  transition: opacity 0.15s ease !important; }

#pipelineContainer .task-card > div:hover .dropdown-wrapper {
  opacity: 1; }

#pipelineContainer .task-card .dropdown-wrapper .fa-ellipsis-vertical {
  color: #94a3b8 !important;
  font-size: 14px !important; }

#pipelineContainer .task-card .dropdown-wrapper .fa-ellipsis-vertical:hover {
  color: #475569 !important; }

#pipelineContainer .task-card .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  padding: 6px !important;
  min-width: 180px !important; }

#pipelineContainer .task-card .dropdown-menu ul li p {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  margin: 0 !important; }

#pipelineContainer .task-card .dropdown-menu ul li p a {
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-decoration: none !important; }

#pipelineContainer .task-card .dropdown-menu ul li p:hover {
  background: #f0ebf7 !important; }

#pipelineContainer .task-card .dropdown-menu ul li p:hover a {
  color: var(--theme-primary, #6c3baa) !important; }

#pipelineContainer .task-card .dropdown-menu ul li:first-child p a {
  color: #16a34a !important;
  font-weight: 600 !important; }

#pipelineContainer .task-card .dropdown-menu ul li:first-child p:hover {
  background: rgba(22, 163, 74, 0.06) !important; }

#pipelineContainer .kanban-block .fold-icon-animation {
  display: none !important; }

#pipelineContainer .kanban-block .oh-kanban__button-contaner .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  padding: 6px !important; }

#pipelineContainer .kanban-block .oh-kanban__button-contaner .dropdown-menu ul li p a {
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-decoration: none !important; }

#pipelineContainer .kanban-block .oh-kanban__button-contaner .dropdown-menu ul li p:hover {
  background: #f0ebf7 !important;
  border-radius: 8px !important; }

#pipelineContainer .kanban-block .oh-kanban__button-contaner .dropdown-menu ul li p:hover a {
  color: var(--theme-primary, #6c3baa) !important; }

#pipelineContainer .oh-tabs__content--active .hlv-container {
  padding: 0 !important; }

#pipelineContainer .oh-kanban,
#pipelineContainer .oh-kanban__section-body {
  border-top: none !important;
  border: none !important; }

#taskStatusView .fixed-table td {
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 45px !important;
  max-height: none !important;
  align-items: center;
  word-break: break-word; }

#taskStatusView .fixed-table tbody tr {
  height: auto !important;
  min-height: 45px; }

svg.toolbar-icon {
  color: #6c3baa;
  color: var(--theme-primary); }

.new-ui-page {
  background: #f3f4f1;
  font-family: "DM Sans", sans-serif;
  min-height: 100vh;
  padding: 0 18px 40px 18px; }

.new-ui-title {
  font-family: "Inter", sans-serif;
  font-size: 37px;
  font-weight: 900;
  font-style: italic;
  color: #000000;
  margin-bottom: 24px; }

.new-ui-card {
  background: #ffffff;
  border-radius: 69px;
  box-shadow: 0px 0px 32px 8px rgba(0, 0, 0, 0.03);
  padding: 52px 48px;
  transition: all 0.3s ease; }
  .new-ui-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 4px 36px 12px rgba(0, 0, 0, 0.08); }
  .new-ui-card--secondary {
    background: #f7f7f5; }
  .new-ui-card--small {
    padding: 22px 25px;
    border-radius: 28px; }
  .new-ui-card--no-hover:hover {
    transform: none;
    box-shadow: 0px 0px 32px 8px rgba(0, 0, 0, 0.03); }
  .new-ui-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px; }
  .new-ui-card__title {
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000000; }
  .new-ui-card__body {
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    color: #333; }

.new-ui-table {
  width: 100%;
  background: transparent;
  border-collapse: collapse; }
  .new-ui-table__header {
    background: #f3f4f1;
    position: sticky;
    top: 0;
    z-index: 10; }
  .new-ui-table__header-row {
    display: grid;
    border-bottom: 1px solid #e2e8f0; }
  .new-ui-table__header-cell {
    padding: 16px 20px;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    border-right: 1px solid #e2e8f0; }
    .new-ui-table__header-cell:last-child {
      border-right: none; }
  .new-ui-table__body {
    background: #ffffff; }
  .new-ui-table__row {
    display: grid;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background 0.2s ease; }
    .new-ui-table__row:hover {
      background: rgba(200, 177, 228, 0.25); }
    .new-ui-table__row:last-child {
      border-bottom: none; }
  .new-ui-table__cell {
    padding: 16px 20px;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    color: #333;
    display: flex;
    align-items: center;
    border-right: 1px solid #e2e8f0; }
    .new-ui-table__cell:last-child {
      border-right: none; }
  .new-ui-table__container {
    overflow-y: auto;
    max-height: 500px; }
    .new-ui-table__container::-webkit-scrollbar {
      width: 6px; }
    .new-ui-table__container::-webkit-scrollbar-track {
      background: transparent; }
    .new-ui-table__container::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.15);
      border-radius: 3px; }

.new-ui-modal {
  background: #f7f7f5 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  max-width: 650px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; }
  .new-ui-modal::before {
    display: none !important; }
  .new-ui-modal__header {
    padding: 24px 46px !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    background: #f7f7f5 !important; }
  .new-ui-modal__title {
    font-family: "DM Sans", sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 !important; }
  .new-ui-modal__close {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 24px !important;
    color: #000000 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; }
    .new-ui-modal__close:hover {
      opacity: 0.7 !important; }
  .new-ui-modal__body {
    padding: 0 46px 24px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    background: #f7f7f5 !important; }
  .new-ui-modal__footer {
    padding: 7px 46px 24px !important;
    border-top: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
    background: #f7f7f5 !important; }

.new-ui-tabs {
  background: #f3f4f1;
  border-radius: 100px;
  padding: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 52px; }
  .new-ui-tabs--vertical {
    flex-direction: column;
    border-radius: 28px;
    height: auto;
    padding: 12px; }

.new-ui-tab {
  min-width: 150px;
  height: 38px;
  border-radius: 100px;
  border: none;
  background: transparent;
  font-family: "DM Sans", sans-serif;
  font-weight: 200;
  font-size: 17px;
  color: #757575;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; }
  .new-ui-tab:hover:not(.new-ui-tab--active) {
    background: rgba(255, 255, 255, 0.5); }
  .new-ui-tab--active {
    background: #c8b1e4;
    color: #6c3baa;
    font-weight: 500; }
  .new-ui-tab--primary-active {
    background: #6c3baa;
    color: #ffffff;
    font-weight: 500; }

.new-ui-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "DM Sans", sans-serif; }
  .new-ui-btn--icon {
    width: 55px;
    height: 55px;
    border-radius: 100px;
    background: white;
    box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03); }
    .new-ui-btn--icon:hover {
      transform: translateY(-2px);
      box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }
  .new-ui-btn--primary {
    background: #6c3baa !important;
    background-image: none !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important; }
    .new-ui-btn--primary:hover {
      background: #012d66 !important; }
  .new-ui-btn--secondary {
    background: #ededed !important;
    background-image: none !important;
    color: #434851 !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important; }
    .new-ui-btn--secondary:hover {
      background: #e0e0e0 !important; }
  .new-ui-btn--accent {
    background: #c8b1e4;
    color: #000000; }
    .new-ui-btn--accent:hover {
      background: #8b5dc9; }

.new-ui-input {
  width: 100%;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  color: #1e293b !important;
  background: #ffffff !important;
  transition: all 0.2s ease; }
  .new-ui-input:focus {
    outline: none !important;
    border-color: #6c3baa !important;
    box-shadow: 0 0 0 3px rgba(2, 62, 138, 0.1) !important; }
  .new-ui-input::placeholder {
    color: #9ca3af; }
  .new-ui-input--rounded {
    border-radius: 100px !important;
    height: 55px !important;
    padding: 0 24px !important;
    border: none !important;
    box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03) !important; }

.new-ui-label {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #434851;
  margin-bottom: 6px;
  display: block; }

.new-ui-input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem; }

.new-ui-badge {
  padding: 6px 16px;
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: inline-block; }
  .new-ui-badge--success {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e; }
  .new-ui-badge--error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444; }
  .new-ui-badge--warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b; }
  .new-ui-badge--info {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6; }

.new-ui-dropdown {
  position: relative; }
  .new-ui-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    padding: 0;
    z-index: 1000;
    display: none; }
    .new-ui-dropdown__menu--open {
      display: block; }
  .new-ui-dropdown__item {
    display: block;
    padding: 12px 20px;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    color: #000000;
    text-decoration: none;
    transition: background 0.2s ease;
    cursor: pointer; }
    .new-ui-dropdown__item:first-child {
      border-radius: 12px 12px 0 0; }
    .new-ui-dropdown__item:last-child {
      border-radius: 0 0 12px 12px; }
    .new-ui-dropdown__item:hover {
      background: rgba(108, 59, 170, 0.15);
      color: #6c3baa; }
    .new-ui-dropdown__item--active {
      background: rgba(108, 59, 170, 0.15);
      color: #6c3baa;
      font-weight: 600;
      position: relative; }
      .new-ui-dropdown__item--active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 60%;
        background: #6c3baa;
        border-radius: 0 2px 2px 0; }

.new-ui-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
  padding: 20px 0; }
  .new-ui-pagination__item {
    background: #f7f7f5;
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0 12px;
    border: none;
    cursor: pointer; }
    .new-ui-pagination__item:hover {
      background: #0022ff;
      color: white; }
    .new-ui-pagination__item--active {
      background: #0022ff;
      color: white; }
    .new-ui-pagination__item--disabled {
      opacity: 0.3;
      cursor: not-allowed;
      pointer-events: none; }

.new-ui-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0px;
  margin-bottom: 20px; }

.new-ui-toolbar__left {
  display: flex;
  align-items: center; }

.new-ui-toolbar__back {
  background: #f7f7f5;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #000000; }
  .new-ui-toolbar__back ion-icon {
    font-size: 24px;
    color: #000000; }
  .new-ui-toolbar__back:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.new-ui-toolbar__title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 37px;
  color: #000000;
  margin: 0;
  margin-left: 18px;
  text-transform: uppercase; }

.new-ui-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 12px; }

.new-ui-toolbar__search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative; }

.new-ui-toolbar__search {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03); }
  .new-ui-toolbar__search ion-icon {
    font-size: 19px;
    color: #757575; }
  .new-ui-toolbar__search:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.new-ui-toolbar__search-input {
  display: none;
  background: white;
  border: none !important;
  border-radius: 100px !important;
  height: 55px !important;
  padding: 0 24px !important;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #757575;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease; }
  .new-ui-toolbar__search-input:focus {
    outline: 2px solid #0022ff;
    outline-offset: 0; }
  .new-ui-toolbar__search-input--expanded {
    display: block;
    width: 295px;
    opacity: 1; }

.new-ui-toolbar__icon-btn {
  background: white;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .new-ui-toolbar__icon-btn ion-icon {
    font-size: 19px;
    color: #757575; }
  .new-ui-toolbar__icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.new-ui-toolbar__add {
  background: #c8b1e4;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease; }
  .new-ui-toolbar__add ion-icon {
    font-size: 24px;
    color: #6c3baa; }
  .new-ui-toolbar__add:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06);
    background: #b89ed4; }

.new-ui-toolbar__month-picker {
  display: flex;
  align-items: center; }

.new-ui-toolbar__month-input {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: white;
  border: 1px solid rgba(117, 117, 117, 0.3);
  border-radius: 8px;
  padding: 10px 15px;
  cursor: pointer;
  height: 55px; }
  .new-ui-toolbar__month-input:focus {
    outline: none;
    border-color: var(--theme-primary); }
  .new-ui-toolbar__month-input::-webkit-calendar-picker-indicator {
    cursor: pointer; }

.new-ui-toolbar__month-btn {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: white;
  border: 1px solid rgba(117, 117, 117, 0.3);
  border-radius: 100px;
  padding: 0 20px;
  cursor: pointer;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease; }
  .new-ui-toolbar__month-btn:hover {
    border-color: var(--theme-primary);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08); }
  .new-ui-toolbar__month-btn:focus {
    outline: none;
    border-color: var(--theme-primary); }
  .new-ui-toolbar__month-btn ion-icon {
    color: #757575; }

.month-picker-dropdown {
  background: #f7f7f5;
  border-radius: 20px;
  padding: 20px;
  min-width: 280px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15); }

.month-picker-year-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px; }

.month-picker-year-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #333;
  transition: all 0.2s; }
  .month-picker-year-btn:hover {
    background: var(--theme-accent, #90e0ef);
    border-color: var(--theme-primary, #023e8a); }

.month-picker-year-display {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #000;
  min-width: 60px;
  text-align: center; }

.month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; }

.month-picker-btn {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease; }
  .month-picker-btn:hover {
    background: var(--theme-accent, #90e0ef);
    border-color: var(--theme-primary, #023e8a);
    color: var(--theme-primary, #023e8a); }
  .month-picker-btn.active {
    background: var(--theme-primary, #023e8a);
    color: white;
    border-color: var(--theme-primary, #023e8a); }

.new-ui-toolbar__tab {
  background: white;
  height: 55px;
  padding: 0 24px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none; }
  .new-ui-toolbar__tab span {
    font-family: "DM Sans", sans-serif;
    font-weight: 200;
    font-size: 18px;
    color: #757575; }
  .new-ui-toolbar__tab ion-icon {
    font-size: 18px;
    color: #757575; }
  .new-ui-toolbar__tab:hover {
    transform: translateY(-2px);
    box-shadow: 0px 2px 12px 8px rgba(0, 0, 0, 0.06); }

.new-ui-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer; }
  .new-ui-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #6c3baa;
    cursor: pointer; }
  .new-ui-checkbox label {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: #434851;
    cursor: pointer;
    margin: 0; }

.new-ui-select2 .select2-container {
  width: 100% !important; }

.new-ui-select2 .select2-container .select2-selection--single,
.new-ui-select2 .select2-container .select2-selection--multiple {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  min-height: 42px !important;
  background: #ffffff !important;
  padding: 4px 8px !important; }

.new-ui-select2 .select2-container .select2-selection--multiple:focus-within,
.new-ui-select2 .select2-container .select2-selection--single:focus-within {
  border-color: #6c3baa !important;
  box-shadow: 0 0 0 3px rgba(2, 62, 138, 0.1) !important; }

.new-ui-select2 .select2-container .select2-selection__choice {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #000000 !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  margin: 2px !important; }

.new-ui-select2 .select2-container .select2-selection__choice__remove {
  color: #000000 !important;
  margin-right: 4px !important; }

.new-ui-text--primary {
  color: #000000; }

.new-ui-text--secondary {
  color: #757575; }

.new-ui-text--muted {
  color: #9ca3af; }

.new-ui-text--error {
  color: #ef4444; }

.new-ui-text--success {
  color: #22c55e; }

.new-ui-text--warning {
  color: #f59e0b; }

.new-ui-bg--page {
  background: #f3f4f1; }

.new-ui-bg--card {
  background: #ffffff; }

.new-ui-bg--secondary {
  background: #f7f7f5; }

.new-ui-font--dm-sans {
  font-family: "DM Sans", sans-serif; }

.new-ui-font--inter {
  font-family: "Inter", sans-serif; }

.new-ui-fw-200 {
  font-weight: 200; }

.new-ui-fw-300 {
  font-weight: 300; }

.new-ui-fw-400 {
  font-weight: 400; }

.new-ui-fw-500 {
  font-weight: 500; }

.new-ui-fw-600 {
  font-weight: 600; }

.new-ui-fw-700 {
  font-weight: 700; }

.new-ui-fw-900 {
  font-weight: 900; }

.new-ui-required {
  color: #dc2626; }

#listContainer .heightContainer {
  flex: 1 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  padding: 7px;
  border: 0.25px solid rgba(117, 117, 117, 0.5) !important;
  border-radius: 8px; }

.report-inline-filters {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 75px;
  padding: 12px 20px;
  background: #ffffff;
  border-radius: 12px;
  margin: 0 0 15px 0;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03);
  border: 0.5px solid rgba(117, 117, 117, 0.5);
  flex-wrap: wrap; }
  .report-inline-filters__group {
    display: flex;
    align-items: center;
    gap: 8px; }
  .report-inline-filters__label {
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    line-height: 30px;
    margin-bottom: 0px !important; }
  .report-inline-filters__input {
    height: 45px !important;
    padding: 0 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-family: "DM Sans", sans-serif !important;
    min-width: 230px;
    box-sizing: border-box;
    outline: none;
    text-align: left;
    transition: border-color 0.2s; }
    .report-inline-filters__input:focus {
      border-color: var(--theme-primary, #6c3baa); }
    .report-inline-filters__input::placeholder {
      color: #94a3b8;
      text-align: left; }
  .report-inline-filters__select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: visible; }
  .report-inline-filters__select {
    height: 45px !important;
    line-height: 45px !important;
    padding: 0 30px 0 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-family: "DM Sans", sans-serif !important;
    min-width: 180px;
    box-sizing: border-box;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color 0.2s; }
    .report-inline-filters__select:focus {
      border-color: var(--theme-primary, #6c3baa); }
  .report-inline-filters__arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    opacity: 0.5; }
  .report-inline-filters__btn {
    height: 45px;
    padding: 0 24px;
    background: var(--theme-primary, #023e8a);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
    margin-left: 15px; }
    .report-inline-filters__btn:hover {
      opacity: 0.9; }

/* WebRupee Font Face Declaration */
/* Path from static/build/kaaspro-ui/dist/main.css to static/fonts/rupee/ */
@font-face {
  font-family: "WebRupee";
  src: url("../../../fonts/rupee/WebRupee.V2.0.eot");
  src: local("WebRupee"), url("../../../fonts/rupee/WebRupee.V2.0.woff") format("woff"), url("../../../fonts/rupee/WebRupee.V2.0.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

/* Class to apply official Rupee symbol */
.WebRupee,
.rupee-symbol,
.currency-symbol {
  font-family: "WebRupee", "Poppins", sans-serif !important; }

/* Inline rupee symbol wrapper */
.rupee {
  font-family: "WebRupee", sans-serif !important;
  font-size: inherit;
  font-weight: normal;
  font-style: normal; }

/* Rupee symbol in tables and data displays */
td .rupee,
th .rupee,
.data-value .rupee {
  font-family: "WebRupee", sans-serif !important; }

/* Rupee symbol in payroll contexts */
.payroll-amount .rupee,
.salary-amount .rupee,
.payslip-amount .rupee {
  font-family: "WebRupee", sans-serif !important; }

/* Larger rupee symbol for headings */
h1 .rupee, .h1 .rupee,
h2 .rupee,
.h2 .rupee,
h3 .rupee,
.h3 .rupee,
.amount-large .rupee {
  font-family: "WebRupee", sans-serif !important; }

.payroll-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem; }

.payroll-stat-card {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.75rem;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .payroll-stat-card h3, .payroll-stat-card .h3 {
    font-size: 2.25rem;
    margin: 0;
    font-weight: 600;
    color: #475569; }
  .payroll-stat-card p {
    margin: 0.75rem 0 0 0;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px; }

.payroll-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.8125rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.3px; }
  .payroll-role-badge--hr {
    background: linear-gradient(135deg, #6c3baa 0%, #8b5fc7 100%);
    color: white; }
  .payroll-role-badge--finance {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white; }
  .payroll-role-badge--ceo {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white; }

.payroll-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8125rem;
  gap: 0.375rem; }
  .payroll-status-badge--success {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534; }
  .payroll-status-badge--secondary {
    background: #f1f5f9;
    color: #64748b; }
  .payroll-status-badge--enabled {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534; }
  .payroll-status-badge--disabled {
    background: #f1f5f9;
    color: #64748b; }

.payroll-settings-card {
  background: #ffffff;
  border-radius: 50px;
  padding: 30px 40px;
  margin-bottom: 1.5rem;
  border: none;
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.03); }
  .payroll-settings-card h2, .payroll-settings-card .h2 {
    margin-bottom: 1.5rem;
    color: #0f172a;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem; }
    .payroll-settings-card h2 ion-icon, .payroll-settings-card .h2 ion-icon {
      color: #475569;
      font-size: 1.375rem; }

.payroll-settings-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e2e8f0; }
  .payroll-settings-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none; }

.payroll-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0; }
  .payroll-section-header ion-icon {
    color: #475569;
    font-size: 1.25rem; }

.payroll-settings-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden; }
  .payroll-settings-table thead th {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: white;
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 700;
    border: none;
    font-size: 0.9375rem;
    letter-spacing: 0.3px; }
  .payroll-settings-table tbody tr {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.2s ease; }
    .payroll-settings-table tbody tr:hover {
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      box-shadow: 0 2px 8px rgba(71, 85, 105, 0.08); }
    .payroll-settings-table tbody tr:last-child {
      border-bottom: none; }
  .payroll-settings-table tbody td {
    padding: 1rem 1.25rem;
    border: none;
    font-size: 0.9375rem;
    color: #1e293b; }

.payroll-rules-table {
  width: 100%;
  border-collapse: collapse; }
  .payroll-rules-table tr {
    border-bottom: 1px solid #f1f5f9; }
    .payroll-rules-table tr:last-child {
      border-bottom: none; }
  .payroll-rules-table td {
    padding: 0.75rem 0;
    font-size: 0.9375rem; }
    .payroll-rules-table td:first-child {
      color: #64748b;
      width: 60%; }
    .payroll-rules-table td:last-child {
      color: #0f172a;
      font-weight: 600;
      text-align: right;
      width: 40%; }

.payroll-info-banner {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 1px solid #fde047;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 12px; }
  .payroll-info-banner .banner-icon {
    font-size: 1.5rem;
    color: #ca8a04;
    flex-shrink: 0; }
  .payroll-info-banner .banner-title {
    font-weight: 600;
    color: #713f12;
    margin-bottom: 4px; }
  .payroll-info-banner .banner-text {
    color: #713f12;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0; }

.payroll-help-section {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 12px; }
  .payroll-help-section .help-icon {
    font-size: 1.5rem;
    color: #0284c7;
    flex-shrink: 0; }
  .payroll-help-section .help-title {
    font-weight: 600;
    color: #0c4a6e;
    margin-bottom: 8px; }
  .payroll-help-section .help-text {
    color: #0c4a6e;
    font-size: 0.875rem;
    line-height: 1.6; }
    .payroll-help-section .help-text code {
      font-size: 0.75rem;
      background: #dbeafe;
      padding: 2px 6px;
      border-radius: 4px; }
  .payroll-help-section--info {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-color: #7dd3fc; }
    .payroll-help-section--info .help-icon {
      color: #0284c7; }
    .payroll-help-section--info .help-title,
    .payroll-help-section--info .help-text {
      color: #0c4a6e; }
  .payroll-help-section--success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac; }
    .payroll-help-section--success .help-icon {
      color: #16a34a; }
    .payroll-help-section--success .help-title,
    .payroll-help-section--success .help-text {
      color: #14532d; }
  .payroll-help-section--warning {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-color: #fde047; }
    .payroll-help-section--warning .help-icon {
      color: #ca8a04; }
    .payroll-help-section--warning .help-title,
    .payroll-help-section--warning .help-text {
      color: #713f12; }
  .payroll-help-section--error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fca5a5; }
    .payroll-help-section--error .help-icon {
      color: #dc2626; }
    .payroll-help-section--error .help-title,
    .payroll-help-section--error .help-text {
      color: #7f1d1d; }

.payroll-toggle-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease; }
  .payroll-toggle-card.disabled {
    background: #f8fafc;
    opacity: 0.7; }

.payroll-toggle-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem; }

.payroll-toggle-card__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  color: #0f172a; }

.payroll-toggle-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem; }
  .payroll-toggle-card__icon--tds {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af; }
  .payroll-toggle-card__icon--pt {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534; }
  .payroll-toggle-card__icon--hours {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4338ca; }

.payroll-toggle-card__description {
  color: #64748b;
  font-size: 0.875rem;
  margin-left: 52px; }

.payroll-action-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8125rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 0.375rem;
  text-decoration: none; }
  .payroll-action-btn--edit {
    background: #dbeafe;
    color: #1e40af; }
    .payroll-action-btn--edit:hover {
      background: #bfdbfe;
      transform: translateY(-1px);
      color: #1e40af;
      text-decoration: none; }
  .payroll-action-btn--delete {
    background: #fee2e2;
    color: #b91c1c; }
    .payroll-action-btn--delete:hover {
      background: #fecaca;
      transform: translateY(-1px);
      color: #b91c1c; }
  .payroll-action-btn--add {
    background: #6c3baa;
    color: white; }
    .payroll-action-btn--add:hover {
      background: #8b5fc7;
      transform: translateY(-1px);
      color: white;
      text-decoration: none; }

.payroll-btn-save {
  background: var(--theme-primary, #6c3baa);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; }
  .payroll-btn-save:hover {
    background: #5a2d96;
    transform: translateY(-1px); }
  .payroll-btn-save ion-icon {
    font-size: 18px; }

.payroll-empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: #ffffff;
  border-radius: 12px;
  border: 1px dashed #e2e8f0; }
  .payroll-empty-state ion-icon {
    font-size: 3rem;
    color: #94a3b8;
    margin-bottom: 0.75rem; }
  .payroll-empty-state h3, .payroll-empty-state .h3 {
    color: #475569;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 1.125rem; }
  .payroll-empty-state p {
    color: #64748b;
    margin-bottom: 0;
    font-size: 0.875rem; }

.payroll-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0; }
  .payroll-setting-row:last-child {
    border-bottom: none; }

.payroll-setting-info {
  flex: 1;
  padding-right: 20px; }

.payroll-setting-label {
  font-weight: 600;
  color: #2d3748;
  font-size: 0.938rem;
  margin-bottom: 4px; }

.payroll-setting-description {
  font-size: 0.813rem;
  color: #64748b;
  line-height: 1.5; }

.payroll-setting-control {
  flex-shrink: 0; }

.payroll-form-switch .form-check-input {
  width: 48px;
  height: 26px;
  cursor: pointer;
  background-color: #cbd5e1;
  border: none !important;
  border-radius: 26px;
  transition: background-color 0.2s ease;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }
  .payroll-form-switch .form-check-input:checked {
    background-color: var(--theme-primary, #6c3baa) !important;
    border: none !important;
    box-shadow: none !important; }
  .payroll-form-switch .form-check-input:focus, .payroll-form-switch .form-check-input:focus-visible, .payroll-form-switch .form-check-input:active {
    box-shadow: none !important;
    outline: none !important;
    border: none !important; }
  .payroll-form-switch .form-check-input:valid, .payroll-form-switch .form-check-input:invalid, .payroll-form-switch .form-check-input.is-valid, .payroll-form-switch .form-check-input.is-invalid {
    border: none !important;
    box-shadow: none !important;
    background-image: none; }

.was-validated .payroll-form-switch .form-check-input, .needs-validation .payroll-form-switch .form-check-input {
  border: none !important;
  box-shadow: none !important; }

.payroll-settings-section .form-check-input[type="checkbox"],
.payroll-toggle-card .form-check-input[type="checkbox"],
.payroll-setting-row .form-check-input[type="checkbox"] {
  border: none !important;
  box-shadow: none !important;
  outline: none !important; }
  .payroll-settings-section .form-check-input[type="checkbox"]:focus, .payroll-settings-section .form-check-input[type="checkbox"]:checked, .payroll-settings-section .form-check-input[type="checkbox"]:active,
  .payroll-toggle-card .form-check-input[type="checkbox"]:focus,
  .payroll-toggle-card .form-check-input[type="checkbox"]:checked,
  .payroll-toggle-card .form-check-input[type="checkbox"]:active,
  .payroll-setting-row .form-check-input[type="checkbox"]:focus,
  .payroll-setting-row .form-check-input[type="checkbox"]:checked,
  .payroll-setting-row .form-check-input[type="checkbox"]:active {
    border: none !important;
    box-shadow: none !important;
    outline: none !important; }

.payroll-table-wrapper {
  border: 0.5px solid rgba(117, 117, 117, 0.5);
  border-radius: 10px;
  padding: 7px;
  overflow-x: auto; }

.payroll-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 800px; }

.payroll-table__header .payroll-table__row {
  display: flex;
  gap: 7px; }

.payroll-table__th {
  flex: 1;
  background: rgba(217, 217, 217, 0.5);
  border: 0.25px solid rgba(117, 117, 117, 0.5);
  height: 60px;
  padding: 8px 12px;
  border-radius: 5px;
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: black;
  display: flex;
  align-items: center; }
  .payroll-table__th--center {
    justify-content: center;
    text-align: center; }
  .payroll-table__th--actions {
    flex: 0 0 100px; }

.payroll-table__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 7px; }

.payroll-table__row {
  display: flex;
  gap: 7px; }

.payroll-table__td {
  flex: 1;
  background: #ffffff;
  border: 0.25px solid rgba(117, 117, 117, 0.5);
  min-height: 55px;
  padding: 12px;
  border-radius: 5px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: black;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  transition: all 0.2s ease; }
  .payroll-table__td--center {
    justify-content: center;
    text-align: center; }
  .payroll-table__td--actions {
    flex: 0 0 100px;
    gap: 8px; }

.payroll-table__body .payroll-table__row {
  position: relative;
  transition: all 0.2s ease;
  border-radius: 5px;
  border: 0.75px solid transparent; }

.payroll-table__body .payroll-table__row:hover {
  background: #f0ebf7;
  border: 0.75px solid var(--theme-primary, #6c3baa); }

.payroll-table__body .payroll-table__row:hover .payroll-table__td {
  border-color: transparent;
  background: transparent; }

.payroll-table__th:nth-child(1),
.payroll-table__td:nth-child(1) {
  flex: 1.5 1 0 !important;
  min-width: 180px !important; }

.payroll-table__th:nth-child(2),
.payroll-table__td:nth-child(2) {
  flex: 1.2 1 0 !important;
  min-width: 120px !important; }

.payroll-table__th:nth-child(3),
.payroll-table__td:nth-child(3) {
  flex: 1.2 1 0 !important;
  min-width: 120px !important; }

.payroll-table__th:nth-child(4),
.payroll-table__td:nth-child(4) {
  flex: 1.2 1 0 !important;
  min-width: 120px !important; }

.payroll-table__th:nth-child(5),
.payroll-table__td:nth-child(5) {
  flex: 1.2 1 0 !important;
  min-width: 130px !important; }

.payroll-table__th:nth-child(6),
.payroll-table__td:nth-child(6) {
  flex: 0 0 100px !important;
  min-width: 100px !important;
  max-width: 100px !important; }

.payroll-status-badge-new {
  height: 39px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid black;
  color: black;
  font-family: "DM Sans", sans-serif;
  background: white;
  box-shadow: none;
  white-space: nowrap; }

.payroll-status-dot {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 3px;
  background-color: #94a3b8; }
  .payroll-status-dot--hr {
    background-color: #6c3baa; }
  .payroll-status-dot--finance {
    background-color: #3b82f6; }
  .payroll-status-dot--ceo {
    background-color: #22c55e; }

.payroll-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  border: 1px solid; }
  .payroll-action-icon ion-icon {
    font-size: 18px;
    pointer-events: none; }
  .payroll-action-icon--edit {
    background: rgba(108, 59, 170, 0.2) !important;
    border-color: #6c3baa !important; }
    .payroll-action-icon--edit ion-icon {
      color: #6c3baa !important; }
    .payroll-action-icon--edit:hover {
      background: rgba(108, 59, 170, 0.3) !important; }

button.payroll-action-icon--delete,
button.payroll-action-icon--delete[type="submit"],
.payroll-action-icon.payroll-action-icon--delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  padding: 0 !important;
  background: #fef2f2 !important;
  background-image: none !important;
  border: 1px solid #dc2626 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important; }
  button.payroll-action-icon--delete ion-icon,
  button.payroll-action-icon--delete[type="submit"] ion-icon,
  .payroll-action-icon.payroll-action-icon--delete ion-icon {
    font-size: 18px !important;
    color: #dc2626 !important;
    pointer-events: none !important; }
  button.payroll-action-icon--delete:hover,
  button.payroll-action-icon--delete[type="submit"]:hover,
  .payroll-action-icon.payroll-action-icon--delete:hover {
    background: #fee2e2 !important;
    background-image: none !important;
    border-color: #dc2626 !important; }

.payroll-rules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch; }
  @media (max-width: 1200px) {
    .payroll-rules-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 768px) {
    .payroll-rules-grid {
      grid-template-columns: 1fr; } }
.payroll-toggle-card--rules {
  height: 100%;
  display: flex;
  flex-direction: column; }
  .payroll-toggle-card--rules .payroll-toggle-card__header {
    flex-shrink: 0; }
  .payroll-toggle-card--rules .payroll-rules-table {
    flex: 1; }

.oh-btn--new-blue {
  background: var(--theme-primary, #6c3baa) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 600;
  border: none;
  transition: all 0.2s ease;
  font-family: "DM Sans", sans-serif; }
  .oh-btn--new-blue:hover {
    background: #5a2d96 !important;
    transform: translateY(-1px); }

.oh-btn--new-ash {
  background-color: #ededed !important;
  color: #434851 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 600;
  border: none;
  transition: all 0.2s ease;
  font-family: "DM Sans", sans-serif; }
  .oh-btn--new-ash:hover {
    background-color: #e0e0e0 !important; }

.oh-modal__dialog--new-design {
  background: #f7f7f5 !important;
  border-radius: 30px !important;
  max-width: 700px !important;
  width: 90% !important;
  margin: auto !important; }
  .oh-modal__dialog--new-design .oh-modal__dialog-header {
    padding: 30px 30px 20px 30px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: none !important; }
  .oh-modal__dialog--new-design .oh-modal__dialog-title {
    font-family: "DM Sans", sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #000000 !important;
    margin: 0 !important; }
  .oh-modal__dialog--new-design .oh-modal__close--custom {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    font-size: 24px !important;
    color: #000000 !important;
    transition: transform 0.2s ease; }
    .oh-modal__dialog--new-design .oh-modal__close--custom:hover {
      transform: rotate(90deg); }
  .oh-modal__dialog--new-design .oh-modal__dialog-body {
    padding: 0px 30px !important;
    max-height: calc(90vh - 200px) !important;
    overflow-y: auto !important; }
  .oh-modal__dialog--new-design .oh-modal__dialog-footer {
    padding: 20px 30px 30px 30px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    border-top: none !important; }
  .oh-modal__dialog--new-design .oh-input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem; }
    .oh-modal__dialog--new-design .oh-input-group .oh-label {
      font-weight: 600;
      margin-bottom: 8px;
      color: #1e293b; }
    .oh-modal__dialog--new-design .oh-input-group select,
    .oh-modal__dialog--new-design .oh-input-group input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 14px;
      font-family: "DM Sans", sans-serif;
      background: #ffffff; }
      .oh-modal__dialog--new-design .oh-input-group select:focus,
      .oh-modal__dialog--new-design .oh-input-group input:focus {
        outline: none;
        border-color: var(--theme-primary, #6c3baa);
        box-shadow: 0 0 0 3px rgba(108, 59, 170, 0.1); }
  .oh-modal__dialog--new-design .oh-input-error {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem; }
  .oh-modal__dialog--new-design .required-star::after {
    content: " *";
    color: #dc2626; }

.role-quick-filters-container {
  margin-bottom: 1rem; }

.payroll-filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid black;
  border-radius: 5px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #333; }
  .payroll-filter-btn:hover {
    background: #f5f5f5;
    transform: scale(1.02); }

.payroll-filter-dot {
  width: 20px;
  height: 20px;
  border-radius: 0;
  flex-shrink: 0; }

.role-filter-btn--active {
  background-color: #f0ebf7 !important;
  border-color: var(--theme-primary, #6c3baa) !important;
  font-weight: 600; }

.modern-filter {
  position: fixed !important;
  top: 180px !important;
  right: 20px !important;
  width: 475px;
  max-height: 70vh;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 10000 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "DM Sans", sans-serif; }
  .modern-filter > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden; }
  .modern-filter > form > div:not([class*="modern-filter__"]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden; }
  .modern-filter__search {
    padding: 20px 24px 12px;
    flex-shrink: 0; }
  .modern-filter__search-wrap {
    position: relative;
    display: flex;
    align-items: center; }
  .modern-filter__search-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: #94a3b8;
    pointer-events: none; }
  .modern-filter__search-wrap input.modern-filter__search-input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 40px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 12px !important;
    font-size: 13px;
    font-family: "DM Sans", sans-serif;
    color: #1e293b;
    background: #f8f9fa !important;
    outline: none;
    transition: border-color 0.2s; }
    .modern-filter__search-wrap input.modern-filter__search-input::placeholder {
      color: #94a3b8; }
    .modern-filter__search-wrap input.modern-filter__search-input:focus {
      border-color: #6c3baa; }
  .modern-filter__applied {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 24px 12px;
    flex-shrink: 0; }
    .modern-filter__applied--visible {
      display: flex; }
  .modern-filter__applied-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: rgba(108, 59, 170, 0.08);
    color: #6c3baa;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap; }
  .modern-filter__applied-tag__remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: #6c3baa;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity 0.15s; }
    .modern-filter__applied-tag__remove:hover {
      opacity: 1; }
  .modern-filter__applied-clear {
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    margin-left: 4px; }
    .modern-filter__applied-clear:hover {
      color: #6c3baa; }
  .modern-filter__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px; }
    .modern-filter__body::-webkit-scrollbar {
      width: 4px; }
    .modern-filter__body::-webkit-scrollbar-thumb {
      background: #d1d5db;
      border-radius: 4px; }
  .modern-filter__field {
    display: flex;
    flex-direction: column;
    gap: 6px; }
  .modern-filter__field-label {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    font-family: "DM Sans", sans-serif; }
  .modern-filter__footer {
    padding: 16px 24px 24px;
    flex-shrink: 0;
    display: flex;
    gap: 10px; }
  .modern-filter__clear-btn {
    height: 44px;
    padding: 0 24px;
    background: #ededed;
    color: #434851;
    border: none;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    font-family: "DM Sans", sans-serif;
    cursor: pointer;
    transition: background 0.2s; }
    .modern-filter__clear-btn:hover {
      background: #dedede; }
  .modern-filter__apply-btn {
    flex: 1;
    height: 44px;
    background: #6c3baa;
    color: #ffffff;
    border: none;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    font-family: "DM Sans", sans-serif;
    cursor: pointer;
    transition: background 0.2s; }
    .modern-filter__apply-btn:hover {
      background: #59308c; }
  .modern-filter .select2-container .select2-selection--single {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important; }
  .modern-filter .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 13px !important;
    color: #1e293b !important;
    padding-left: 12px !important; }
  .modern-filter .select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px !important; }
  .modern-filter .select2-container .select2-selection--multiple {
    position: relative !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    padding: 4px 28px 4px 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    cursor: pointer !important; }
    .modern-filter .select2-container .select2-selection--multiple::after {
      content: "";
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-60%) rotate(45deg);
      width: 8px;
      height: 8px;
      border-right: 1px solid #757575;
      border-bottom: 1px solid #757575;
      border-top: none;
      border-left: none;
      pointer-events: none; }
  .modern-filter .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 0 !important; }
  .modern-filter .select2-selection--multiple .select2-search--inline {
    flex: 1 !important;
    min-width: 60px !important; }
  .modern-filter .select2-selection--multiple .select2-search__field {
    margin: 0 !important;
    height: 28px !important;
    width: 100% !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    font-family: "DM Sans", sans-serif !important; }
  .modern-filter select:not(.select2-hidden-accessible) {
    width: 100%;
    height: 42px !important;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-family: "DM Sans", sans-serif;
    color: #1e293b;
    background: #ffffff;
    appearance: auto;
    outline: none; }
    .modern-filter select:not(.select2-hidden-accessible):focus {
      border-color: #6c3baa; }
  .modern-filter input[type="text"]:not(.modern-filter__search-input),
  .modern-filter input[type="email"],
  .modern-filter input[type="date"],
  .modern-filter input[type="time"] {
    width: 100%;
    height: 42px !important;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-family: "DM Sans", sans-serif;
    color: #1e293b;
    background: #ffffff;
    outline: none;
    box-sizing: border-box; }
    .modern-filter input[type="text"]:not(.modern-filter__search-input)::placeholder,
    .modern-filter input[type="email"]::placeholder,
    .modern-filter input[type="date"]::placeholder,
    .modern-filter input[type="time"]::placeholder {
      color: #94a3b8; }
    .modern-filter input[type="text"]:not(.modern-filter__search-input):focus,
    .modern-filter input[type="email"]:focus,
    .modern-filter input[type="date"]:focus,
    .modern-filter input[type="time"]:focus {
      border-color: #6c3baa; }

@media (max-width: 480px) {
  .modern-filter {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    top: 80px !important;
    max-height: 80vh; } }

.oh-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  min-height: calc(100vh - 4rem);
  margin-top: 2rem;
  margin-bottom: 2rem; }
  @media (max-width: 767.98px) {
    .oh-auth {
      align-items: center;
      height: 100%;
      margin-top: 2rem; } }
.oh-auth-card {
  background-color: #ffffff;
  width: 90%;
  max-width: 450px;
  padding: 2.5rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; }
  @media (max-width: 767.98px) {
    .oh-auth-card {
      padding: 1.5rem; } }
.oh-main__titlebar-title {
  font-size: 1.5rem; }

.oh-titlebar-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end; }

.oh-titlebar-container__buttons {
  display: flex;
  align-items: center; }

.oh-titlebar-container__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; }

.oh-main__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  padding-bottom: 2rem; }
  @media (max-width: 767.98px) {
    .oh-main__topbar {
      flex-direction: column;
      align-items: flex-start; } }
.oh-main__titlebar--right {
  display: flex;
  align-items: center; }
  @media (max-width: 767.98px) {
    .oh-main__titlebar--right {
      width: 100%; } }
@media (max-width: 767.98px) {
  .oh-main__titlebar--right > * {
    flex-basis: 0;
    flex-grow: 1; } }

.oh-main__titlebar-button-container {
  display: flex;
  align-items: center; }
  @media (max-width: 767.98px) {
    .oh-main__titlebar-button-container {
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 1rem; }
      .oh-main__titlebar-button-container button {
        margin-left: 0; } }
.oh-main__titlebar-button-container > *:first-child {
  margin-left: 15px; }
  @media (max-width: 767.98px) {
    .oh-main__titlebar-button-container > *:first-child {
      margin-left: 0px;
      margin-right: 0px; } }
.oh-main__titlebar-search-toggle {
  display: block;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.3rem;
  border: 1px solid #e5e7eb; }

.oh-main__titlebar-serach-icon {
  font-size: 1.2rem; }

@media (max-width: 1000px) {
  .oh-main__titlebar--left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; } }

.oh-main__titlebar-search-toggle {
  display: none !important; }
  @media (max-width: 1000px) {
    .oh-main__titlebar-search-toggle {
      display: flex !important; } }
@media (max-width: 991.98px) {
  .oh-main__sidebar-visible {
    width: 1200px; } }

@media (max-width: 767.98px) {
  .oh-main__section--reverse-sm > div:first-child {
    order: 2; }
  .oh-main__section--reverse-sm > div:last-child {
    order: 1; } }

/* =================================
*          QUESTIONNAIRE
* ================================ */
.oh-section-edit--delete {
  position: absolute;
  left: 0.09rem; }

/* =================================
*          VIEW TYPES
* ================================ */
.oh-view-types {
  list-style-type: none;
  padding-left: 0px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0px; }
  @media (max-width: 767.98px) {
    .oh-view-types {
      height: 100%; } }
.oh-view-type {
  background-color: #1f2937;
  border: 1px solid #e5e7eb;
  height: 48.84px; }
  @media (max-width: 767.98px) {
    .oh-view-type {
      height: 100%;
      height: 46.8px; } }
  @media (max-width: 575.98px) {
    .oh-view-type {
      flex-basis: 0;
      flex-grow: 1;
      height: 43.5px; } }
  .oh-view-type:first-child {
    border-right: 0; }

.oh-btn--view {
  height: 100%; }

/* =================================
*          PERMISSIONS
* ================================ */
.oh-permission-panel,
.oh-user-panel {
  background-color: #f8f9fa;
  border: 2px solid #f3f4f6;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem; }
  .oh-permission-panel:hover,
  .oh-user-panel:hover {
    background-color: whitesmoke; }

.oh-user-panel {
  padding: 0.5rem 0 0.5rem 0.75rem; }

.oh-permission-panel__remove,
.oh-user-panel__remove {
  background-color: transparent;
  border: none;
  border-left: 2px solid #f3f4f6;
  width: 35px;
  height: 35px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem; }
  .oh-permission-panel__remove:hover,
  .oh-user-panel__remove:hover {
    color: #ef4444; }

.oh-user-panel__remove {
  border-left: none; }

.oh-permission-table__collapse {
  border: none;
  display: flex;
  align-items: center;
  padding: 0.5rem;
  font-size: 1.25rem;
  visibility: hidden; }

.oh-sticky-table__tr:hover .oh-permission-table__collapse {
  visibility: visible; }

.oh-permission-table__tr .oh-sticky-table__sd {
  width: 35%; }

.oh-permission-count {
  width: 100%;
  display: flex;
  padding: 0.5rem 0rem;
  font-style: italic;
  color: #5e5e5e;
  width: 100%; }

.oh-permission-table--collapsed .oh-permission-panel,
.oh-permission-table--collapsed .oh-user-panel {
  display: none; }

.oh-permission-table--collapsed .oh-permission-table__collapse .oh-permission-table__collapse-up {
  display: none; }

.oh-permission-table--collapsed .oh-permission-table__collapse .oh-permission-table__collapse-down {
  display: block; }

.oh-permission-table__collapse .oh-permission-table__collapse-up {
  display: block; }

.oh-permission-table__collapse .oh-permission-table__collapse-down {
  display: none; }

@media (max-width: 575.98px) {
  .oh-permission-table__collapse {
    display: none !important; } }

/* =================================
*          QUESTIONNAIRE
* ================================ */
.oh-empty {
  width: 100%;
  height: calc(100vh - 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }

.oh-empty__message {
  font-size: 1rem;
  color: #737373;
  text-align: center;
  max-width: 600px; }

/* =================================
*         DASHBOARD PAGE
* ================================ */
.oh-dashboard {
  padding-top: 2.5rem;
  max-width: 100%; }
  .oh-dashboard.row {
    display: flex !important;
    flex-wrap: wrap; }
  @media (max-width: 767.98px) {
    .oh-dashboard {
      margin: 0 !important; } }
.oh-dashboard__movable-cards {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 0 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important; }
  @media (max-width: 991.98px) {
    .oh-dashboard__movable-cards {
      grid-template-columns: repeat(2, 1fr) !important; } }
  @media (max-width: 767.98px) {
    .oh-dashboard__movable-cards {
      grid-template-columns: 1fr !important; } }
.oh-dashboard__cards {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important; }

.oh-dashboard__cards > div {
  margin-bottom: 0 !important; }
  .oh-dashboard__cards > div:not(.oh-dashboard__movable-cards) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 auto !important; }

.oh-dashboard__movable-cards > div {
  margin-bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important; }

.oh-dashboard__cards--3 {
  grid-template-columns: 1fr 1fr 1fr; }

.oh-card-dashboard--no-scale:hover {
  transform: scale(100%) !important; }

.oh-dashboard__movable-cards--2 {
  grid-template-columns: 1fr 1fr; }

.oh-card-dashboard__title {
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  margin-bottom: 0.5rem !important;
  text-transform: uppercase;
  letter-spacing: 0.5px; }

.oh-card-dashboard__count {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
  margin-bottom: 0.5rem; }

.oh-card-dashboard {
  width: 100%;
  background-color: white !important;
  padding: 1.5rem;
  border-radius: 12px !important;
  border: none;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden; }
  .oh-card-dashboard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 12px 12px 0 0;
    background: #f59e0b;
    z-index: 1; }
  .oh-card-dashboard:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; }

.oh-card-dashboard__header {
  margin-bottom: 0.75rem; }

.oh-card-dashboard__header--divider {
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem; }

.oh-card-dashboard__sign {
  font-size: 1rem;
  color: #6b7280; }

.oh-card-dashboard__counts {
  display: flex;
  align-items: baseline;
  gap: 0.5rem; }

.oh-card-dashboard__badge {
  border-radius: 12px;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  font-weight: 600; }

.oh-card-dashboard--success .oh-card-dashboard__badge {
  background-color: #d1fae5;
  color: #065f46; }

.oh-card-dashboard--success .oh-card-dashboard__sign {
  color: #10b981; }

.oh-card-dashboard--danger .oh-card-dashboard__badge {
  background-color: #fee2e2;
  color: #991b1b; }

.oh-card-dashboard--danger .oh-card-dashboard__sign {
  color: #ef4444; }

.oh-card-dashboard--warning .oh-card-dashboard__badge {
  background-color: #fef3c7;
  color: #92400e; }

.oh-card-dashboard--warning .oh-card-dashboard__sign {
  color: #f59e0b; }

.oh-card-dashboard--neutral .oh-card-dashboard__badge {
  background-color: #f3f4f6;
  color: #374151; }

.oh-card-dashboard--neutral .oh-card-dashboard__sign {
  color: #6b7280; }

.oh-card-dashboard--transparent {
  border-color: #e5e7eb;
  background: #ffffff; }
  .oh-card-dashboard--transparent .oh-card-dashboard__badge {
    background-color: #f3f4f6;
    color: #6b7280; }
  .oh-card-dashboard--transparent .oh-card-dashboard__sign {
    color: #6b7280; }

.oh-dashboard__cards.row {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  flex-wrap: nowrap; }
  .oh-dashboard__cards.row > div {
    flex: 1 1 0;
    min-width: 0; }

.oh-card-dashboard.tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  min-height: 180px;
  padding: 2rem 1.5rem !important;
  position: relative;
  background: white !important;
  border: none;
  border-radius: 45px !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden; }
  .oh-card-dashboard.tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 45px 45px 0 0;
    background: #f59e0b;
    z-index: 1; }
  .oh-card-dashboard.tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; }
  .oh-card-dashboard.tile .oh-card-dashboard__header {
    width: 100%;
    margin-bottom: 1rem; }
  .oh-card-dashboard.tile .oh-card-dashboard__title {
    font-size: 0.95rem !important;
    margin-bottom: 0.5rem !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px; }
  .oh-card-dashboard.tile .oh-card-dashboard__body {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; }
  .oh-card-dashboard.tile .oh-card-dashboard__count {
    font-size: 3rem !important;
    font-weight: 800 !important;
    color: #2d3748 !important;
    line-height: 1; }
  .oh-card-dashboard.tile .oh-card-dashboard__counts {
    justify-content: center; }

.oh-dashbaord__events-reel {
  display: flex;
  transition: all 0.3s ease-in-out; }

.oh-dashboard__event {
  width: 100%;
  color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  padding: 1.25rem 1.25rem 2.5rem;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  flex-grow: 1; }

.oh-dashboard__event--purple {
  background-color: rebeccapurple; }

.oh-dashboard__event--crimson {
  background-color: crimson; }

.oh-dasboard__event-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 0.75rem;
  border: 4px solid rgba(255, 255, 255, 0.3); }

.oh-dasboard__event-photo,
.oh-dasboard__event-details {
  flex-shrink: 0; }

.oh-dashboard__event-userphoto {
  width: 100%;
  height: 100%; }

.oh-dasboard__event-details {
  display: flex;
  flex-direction: column; }

.oh-dashboard__event-title {
  font-weight: bold;
  font-size: 0.8rem; }

.oh-dashboard__event-main {
  font-size: 1.35rem;
  margin-bottom: 0.15rem; }

.oh-dashboard__event-date {
  font-size: 0.8rem; }

.oh-dashboard__events {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  display: flex; }

.oh-dashboard__events-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 0; }

.oh-dashboard__events-nav-item {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  margin-right: 0.25rem;
  cursor: pointer; }
  .oh-dashboard__events-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.5); }
  .oh-dashboard__events-nav-item:last-child {
    margin-right: 0; }

.oh-dashboard__events-nav-item--active {
  background-color: rgba(255, 255, 255, 0.8); }

.oh-card-dashboard__user-list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0; }

.oh-card-dashboard__user-item {
  margin-bottom: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed #f3f4f6; }
  .oh-card-dashboard__user-item:last-child {
    margin-bottom: 0;
    border: none; }

.oh-dashboard-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 1.25rem; }

/* ==============================
*           OrgChart
* ============================ */
.oh-main__org-chart-data {
  display: none; }

.dashboard-widget {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
  .dashboard-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #d7dae0; }

.stat-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
  .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: #d7dae0; }

.chart-container {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
  .chart-container:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

.home-dashboard .shadow-card .hlv-container table.fixed-table thead tr {
  background: white !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  overflow: hidden !important; }

#online_employees .hlv-container {
  overflow: hidden !important; }

.oh-profile-section {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 1.25rem; }

.oh-profile-section__sidebar {
  height: 100%;
  border-right: 1px solid #e5e7eb; }

.oh-profile-section__sidebar-items {
  padding-left: 0px;
  list-style-type: none; }

.oh-profile-section__sidebar-item {
  padding: 0.75rem 0; }

.oh-profile-section__sidebar-item--active {
  border-right: 4px solid #6c3baa; }

.oh-profile-section__sidebar-link:hover, .oh-profile-section__sidebar-link:focus, .oh-profile-section__sidebar-link:focus-visible {
  text-decoration: none; }

.oh-profile-section__edit-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease-in-out; }
  .oh-profile-section__edit-photo:hover::after {
    content: "Edit";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.6);
    padding: 0.25rem;
    transition: all 0.4s ease-in-out; }

.oh-profile-section__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover; }

@media (max-width: 767.98px) {
  .oh-profile-section__topbar {
    flex-direction: row !important; } }

@media (max-width: 575.98px) {
  .oh-profile-section__topbar {
    padding-bottom: 0.75rem;
    flex-direction: column !important; }
    .oh-profile-section__topbar .oh-profile-section__tab {
      margin-top: 1.5rem; } }

.oh-profile-section__modal-avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden; }
  @media (max-width: 767.98px) {
    .oh-profile-section__modal-avatar {
      max-width: 100px;
      height: 100px; } }
.oh-profile-section__modal-image {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.oh-profile-section__image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }

.oh-history_date {
  position: relative;
  text-align: center;
  margin: 1.6rem 0; }

.oh-history_date::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  right: 0;
  background-color: #f3f4f6;
  top: 10px; }

.oh-history_date-content {
  z-index: 1;
  padding: 6px 24px;
  background-color: #ffffff;
  position: relative; }

.oh-history_user-img {
  width: 40px;
  height: 40px;
  margin-right: 0.6rem;
  position: relative; }

.oh-history_user-pic {
  width: 100%;
  height: 100%;
  border-radius: 50%; }

.oh-history_time {
  color: #606366;
  font-size: 0.875em; }

.oh-history__username {
  font-size: 1rem; }

.oh-history_msg-container {
  background-color: #f8f9fa;
  border: 1px solid #f3f4f6;
  border-radius: 0 0.6rem 0.6rem 0.6rem;
  padding: 0.8rem 1rem;
  width: fit-content;
  margin: 0.4rem 0;
  font-size: 0.9rem; }

.oh-history_msging-email {
  background-color: #fdf2f2;
  color: #ef4444;
  padding: 0.2rem 0.6rem;
  border-radius: 0.2rem;
  margin-right: 0.2rem;
  font-size: 0.8rem; }

.oh-history_task-state {
  color: #454545;
  font-size: 0.9rem; }

.oh-progress_arrow {
  width: 0.8rem;
  height: auto; }

.oh-history_task-tracker {
  padding: 0.2rem 0;
  font-size: 0.85rem; }

.oh-history_task-list {
  padding: 0.2rem 0; }

.oh-history_tracking-value {
  color: #ef4444; }

.oh-history-task-state {
  color: #606366; }

.oh-history_user-state {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  right: 2px;
  bottom: 0px;
  cursor: pointer; }

.oh-history_user-details {
  flex: 1; }

.oh-user_inactive {
  background-color: #999999;
  border: 2px solid #ffffff; }

.oh-history_abt {
  width: 50%;
  margin-top: 0.2rem;
  margin-bottom: 1.6rem; }
  @media (max-width: 767.98px) {
    .oh-history_abt {
      width: 100%; } }
.oh-history_tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem; }

.oh-history_tabs-items {
  border-radius: 1rem;
  border: 1px solid;
  font-size: 0.7rem; }

.oh-history_log-container {
  margin-top: 2rem;
  display: flex; }

.oh-history-log_msg-section {
  width: 100%; }

.oh-history-log_msg-container {
  border-radius: 0.6rem;
  border: 1px solid #e5e7eb;
  width: 100%;
  padding: 1rem; }

.oh-history_textarea {
  border: none;
  outline: none;
  width: 100%;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.8rem;
  padding: 0.4rem 0;
  resize: none; }

.oh-history_cust_btn {
  display: flex; }

.oh-history-log_buttons {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.oh-history_iconbtn {
  padding: 0 0.2rem; }

.oh-history_tabs-items:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #6c3baa; }

.oh-wrapper-main--1 {
  grid-template-columns: auto; }

.members-container {
  background-color: #f9f9f9;
  border: 1px solid #e7e7e7;
  padding: 8px;
  max-width: fit-content;
  border-radius: 45px; }
  .members-container .oh-faq_search--icon {
    top: 12px; }

.members-container ul li {
  list-style: none;
  float: left;
  border: 2px solid #f9f9f9; }

.members-container ul .li-last {
  margin-right: 0px;
  background-color: #f2f3f5;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px; }

.members-container ul .li-last a {
  text-decoration: none;
  position: relative; }

.img-right-arrow,
.img-left-arrow {
  float: right;
  margin-right: 6px; }

.members-container ul .active {
  border: 2px solid #e54f38;
  border-radius: 50%; }

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  top: 168px;
  padding: 10px;
  border-radius: 10px; }
  .dropdown-content .oh-input {
    padding: 0.4rem 1rem;
    padding-left: 28px; }

.dropdown-content a {
  color: black;
  padding: 6px 10px;
  text-decoration: none;
  display: block;
  border-radius: 10px; }

.dropdown-content a span {
  padding-left: 5px; }

.dropdown-content a img {
  width: 28px; }

.dropdown-content a:hover {
  background-color: #e7e7e9;
  border-radius: 12px; }

.show {
  display: block; }

a.oh-profile-dropdown-link:hover {
  text-decoration: none; }

.oh-sorting-field .oh-card-dashboard--moveable:hover {
  cursor: grab; }

.oh-card-dashboard--moveable {
  position: relative; }

.oh-state-highlight {
  background-color: #f0f0f0;
  border: 1px dashed #ccc;
  line-height: 1.2em;
  min-height: 2rem;
  height: auto;
  width: 100%;
  margin-top: 1rem;
  box-sizing: border-box; }
  @media (max-width: 992px) {
    .oh-state-highlight {
      width: 100%; } }
.p-6 {
  padding: 1.5rem; }

.pt-24 {
  padding-top: 6rem !important; }

/*
PHASE 1 (Current):
- Basic structure setup
- Core variables with current colors
- Minimal utilities and animations
- No visual changes

PHASE 2 (Future):
- Kaaspro brand colors
- Modern components (glassmorphism, gradients)
- Full animation library
- Theme switching
- All page transformations

Remember: Keep USE_NEW_UI = False during Phase 1!
*/