:root{
    --color-white: #ffffff;
    --color-light:#f0eff5;
    --color-gray-light:#86848c;
    --color-gray-dark:#56555e;
    --color-dark:#27282f;
    --color-primary:rgb(71,7,234);
    --color-success:rgb(34,202,75);
    --green: #2ecc71;
    --color-danger:rgb(255,67,54);
    --color-warning:rgb(234,181,7);
    --color-purple:rgb(160,99,245);
    --color-background2: rgb(236, 239, 248);
    --color-primary-light: color-mix(in srgb, var(--color-primary) 50%, white 40%);
    --color-success-light:rgb(34,202,75, 0.2);
    --color-danger-light:rgb(255,67,54, 0.2);
    --color-purple-light:rgb(160,99,245, 0.2);
    --color-background:rgb(214, 214, 239);
    --box-shadow-color: #272b35;

    --card-padding:1.6rem;
    --padding-1:1rem;
    --padding-2:8px;

    --card-border-radius:1.6rem;
    --border-radius-1:1rem;
    --border-radius-2:6px;

    --COLOR-BLUE: #44b9ff;

    /* Bootstrap colors */
    --primary-color: #007bff; /* Main accent */
    --primary-color-dark: #0056b3;

    /* Login Page */
    --primary-blue: #0a7cff;
    --page-bg: #f4f7fc;
    --card-bg: #ffffff;
    --info-panel-bg: #eef5ff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --input-border: #ced4da;

    /* Text */
    --text-light: #6c757d;
    --text-green: #57c317;

    /* Shadow */
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

    /*Hover Color*/
    --hover-light-blue: #f8faff;
}

.table-no-padding > tbody > tr > td,
.table-no-padding > tbody > tr > th,
.table-no-padding > thead > tr > td,
.table-no-padding > thead > tr > th {
    padding: 0;
}
.table-padding-1 > tbody > tr > td,
.table-padding-1 > tbody > tr > th,
.table-padding-1 > thead > tr > td,
.table-padding-1 > thead > tr > th {
    padding: 0.2rem;
}
/*
@font-face {
  font-family: 'Poppins';
  src: url('google-fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: 'Hammersmith One';
  src: url('google-fonts/HammersmithOne_Regular/HammersmithOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
*/

* {
    font-family: 'Poppins', sans-serif;
    /* font-size: 12.5px; */
    color: #232323;
    font-weight: 400;
}

html { font-size: 12.5px; }

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

.card-header {
    border-radius: 12px 12px 0 0!important;
}
/*
.border-radius-12 {
    border-radius: 12px!important;
}

.header-radius-12 {
    border-radius: 12px 12px 0 0!important;
}
*/
.card-stats-icon-blue {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-blue)!important;
    background-color: #e6f2ff!important;
    padding: 5px;
    border-radius: 12px;
}

.card-stats-icon-blue i {
    color: var(--primary-blue)!important;
}

.card-stats-icon-green {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-green)!important;
    background: rgb(89 205 171 / 19%);
    padding: 5px;
    border-radius: 12px;
}

.card-stats-icon-green i {
    color: var(--text-green)!important;
}

/* Accordion */
.accordion {
    border: none;
    margin-bottom: 1.5rem;
}

.accordion-item {
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: .5rem;
}

.accordion-item:first-of-type {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.accordion-item:last-of-type {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.accordion-item:not(:first-of-type) {
    border: 1px solid #ddd;
}

.accordion-header {
    margin: 0;
}

.accordion-button {
    background-color: #f8f9fa;
    color: #333;
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.accordion-button:hover,
.accordion-button:focus {
    background-color: #fff;
    text-decoration: none;
    box-shadow: none;
}

.accordion-button:hover {
    background-color: whitesmoke;
}

.accordion-button:not(.collapsed) {
    color: #0c63e4;
    background-color: #fff;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

.accordion-button.collapsed {
    background-color: #fff;
    color: #555;
}

.accordion-body {
    padding: 1rem 1.25rem;
    background-color: #fff;
    font-size: .95rem;
    line-height: 1.5;
}

.accordion-user-actions-button-action {
    /* display: none; */
    border: none;
    padding: 0.5rem 1.08rem;
    border-radius: 50%;
    background-color: transparent;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s;
}

.accordion-user-actions-button-action:hover {
    background-color: lightgrey;
}

.department-user-li:hover .accordion-user-actions-button-action {
    opacity: 1;
    transform: translateX(0);
}

/* End Accordion */

.kpi-card {
    height: 100%;
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.kpi-icon-bg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.kpi-icon-bg.blue { background-color: #e6f2ff!important; color: #007bff!important; }
.kpi-icon-bg.orange { background-color: #fff8e1; color: #f39c12; }
.kpi-icon-bg.red { background-color: #ffebee; color: #e74c3c; }
.kpi-icon-bg.green { background-color: #e8f5e9; color: #2ecc71; }
.kpi-icon-bg.grey { background-color: #e0e0e0 !important; color: #424242 !important; }

.text-light-green {
    color: #2ecc71!important;
}

.kpi-content p {
    color: var(--text-light);
    font-size: 14px;
    margin: 0;
}

.kpi-content h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.card-header {
    background-color: #fff;
}

.shadow-xl {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.w-50{
    width: 50px;
}

.table-primary {
    --bs-table-bg: #cfe2ff!important;
}

.fw-600 {
    font-weight: 600;
}

/* SEGMENTED CONTROL */
.segmented-control {
    display: flex;
    background-color: #e9ecef;
    border-radius: 8px;
    padding: 4px;
}

.segmented-control label {
    background-color: transparent;
    border: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.segmented-control label .segmented-control-icon {
    color: var(--text-light);
    transition: color 0.3s ease;
}

.segmented-control label:hover:not(.active) {
    background-color: #dee2e6;
}

.segmented-control label.active {
    background-color: var(--card-bg);
    color: var(--primary-blue);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.segmented-control label.active-green {
    color: var(--green);
}

.segmented-control label.active .segmented-control-icon {
    color: var(--primary-blue);
}

.segmented-control label.active .segmented-control-icon-green {
    color: var(--green);
}
/* END SEGMENTED CONTROL */

/* Progress Bar */
.progress-bar-container > * {
    margin: 0 !important;
    padding: 0 !important;
}

.progress-bar-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 83.33%;
    transform: translate(-50%, -50%);
}

.steps {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%; /* Make steps container 100% width */
    padding: 0 10px; /* Add padding to ensure steps are not at the very edges */
    box-sizing: border-box; /* Ensure padding is included in the width calculation */
}

.step {
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 2px solid #ACACA6;
    border-radius: 50%;
    transition: background 1s, transform 0.5s ease-in-out;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.step .step-title {
    display: block;
    text-align: center;
    margin-top: 4.5rem;
    text-wrap: nowrap;
}

.step.selected {
    border: 2px solid #0d6efd;
    box-shadow: none !important;
    transition: background 1s, transform 0.5s ease-in-out;
}

.step.completed {
    border: 2px solid #0d6efd;
    background: #0d6efd;
}

.step.completed i {
    color: white;
}

.step-error {
    background-color: red;
}

.progress {
    position: absolute;
    width: 100%;
    height: 2px; /* Adjusted height to better fit the percent element */
    background-color: #ACACA6;
    top: 50%; /* Center the progress bar vertically relative to steps */
    transform: translateY(-50%);
    z-index: -1;
}

.percent {
    position: absolute;
    top: 50%; /* Center the percentage vertically relative to the progress bar */
    left: 0;
    width: 0;
    height: 2px; /* Match the progress bar height */
    background-color: #0d6efd;
    z-index: 1;
    transition: width 1s;
    transform: translateY(-50%);
}
/* End Progress Bar */

/* Elegant Modal */
.elegant-modal-content {
    border-radius: 0.75rem;
    border: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    background-color: #f8f9fa;
    overflow: hidden;
    /* Subtle backdrop filter for a frosted glass effect, if browser supports */
    /* backdrop-filter: blur(10px) saturate(180%); */
    /* background-color: rgba(255, 255, 255, 0.75); */ /* Fallback if backdrop-filter not used/supported */
}

.elegant-modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    color: white;
    border-bottom: none;
    padding: 1.25rem 2rem;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
.elegant-modal-header .modal-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
}
.elegant-modal-header .btn-close-white {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.elegant-modal-header .btn-close-white:hover {
    opacity: 1;
}
/* End Elegant Modal */

/* Shift Parts */
.finished-shifts-table td {
    padding-top: 0.25rem;
    padding-bottom: 0;
}

.shift-parts-holder {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#long_text_modal {
    z-index: 1062;
}

#modal-shift-parts-holder {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

#shift-timestamps-holder {
    width: 100%;
    /* margin-top: 1rem; */
    /* border-top: 1px solid #333; */
    display: flex;
    flex-direction: row;
    pointer-events: none;
}

.shift-timestamp {
    width: 0;
    height: 22px;
    border-left: 2px solid #333;
    transform: translateY(-16px);
    /* border: 1px solid blue; */
    position: relative;
    pointer-events: none;
}

.shift-no-timestamp {
    pointer-events: none;
}

.shift-timestamp div {
    width: 40px;
    text-align: center;
    position: absolute;
    left: -1.55rem;
    top: 1.75rem;
}

.shift-part-workstation,
.shift-part-manual,
.shift-part-break,
.shift-part-no-activity {
    height: 15px;
    transition: background-color 0.75s;
    /* width: 100%; */
}

.shift-part-workstation {
    background-color: lightskyblue;
}

.shift-part-workstation:hover {
    background-color: hsl(203, 92%, 65%); /* last value decreased by 10 */
}

.shift-part-manual {
    background-color: lightpink;
}

.shift-part-manual:hover {
    background-color: 	hsl(351, 100%, 76%);
}

.shift-part-break {
    background-color: lightsalmon;
}

.shift-part-break:hover {
    background-color: 	hsl(17, 100%, 64%);
}

.shift-part-no-activity {
    background-color: lightgrey;
}

.shift-part-no-activity:hover {
    background-color: 	hsl(0, 0%, 73%);
}
/* End Shift Parts */

.toggle-session-icon {
    pointer-events: none;
}

.video_href i {
    pointer-events: none;
}

.file-list-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-remove-attachment {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.btn-remove-attachment i {
    font-size: 1.5rem;
    margin-top: 0.35rem;
}

.skill-slider-button {
    background-color: white;
    border: 1.5px solid lightgrey;
    /* border-radius: 0.5rem; */
    padding: 0.75rem;
}

.skill-slider-button:hover {
    background-color: #f8f8f8;
}

#skill-search-results,
#add-worker-search-results,
#add-user-with-role-search-results {
    position: absolute;
    z-index: 10000;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    left: 0;
    right: 0;
    border: 1px solid rgba(51, 51, 51, 0.20);
    border-top: none;
}

#department-name-number-card .position-absolute {
    display: none;
}

#department-name-number-card:hover .position-absolute {
    display: block;
}

.department-user-li:hover {
    background-color: var(--hover-light-blue);
}

.department-user-li:hover .accordion-user-actions-button-action {
    display: block;
}

.skill-search-choice {
    padding: 1rem;
}

.skill-search-choice:hover,
.add-worker-search-choice:hover,
.add-user-with-role-search-choice:hover {
    background-color: whitesmoke;
    cursor: pointer;
}

.action-button {
    border: 0.5px solid #333;
    padding: 0.75rem;
    border-radius: 0.33rem;
}

.search-emails i,
.compose-email i {
    cursor: pointer;
    transition: 0.25s;
}

.search-emails:hover i,
.compose-email:hover i {
    color: #0d6efd;
}
.alert-error {
  background-color: #f8d7da; /* Light red background */
  border-color: #f5c2c7; /* Red border */
}
.alert-error h6{
    color: #721c24; /* Dark red text */
}
.alert-success {
  background-color: #d4edda; /* Light green background */

  border-color: #bce2c4; /* Green border */
}
.alert-success h6{
    color: #155724; /* Dark green text */
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        pointer-events: none;
    }
}

.fade-out-10s {

    animation: fadeOut 1s 10s forwards;

}

.hover-100 {
    cursor: pointer;
    opacity: 70%;
    transition: opacity 0.2s ease-in-out;
}

.hover-100:hover {
    opacity: 100%!important;
}

.no-select {
    user-select: none;
}

.no-border {
    border: none!important;
}

input:not([type="submit"]), select, textarea{
    border-radius: 3px; /* !important */
    padding-left: 5px; /* !important */
    /* background-color: #f9f9ff !important; */
}

#regenerate_qr_submit_button:hover{
    color: white!important;
    background-color: #dc3545!important;
}
#regenerate_qr_submit_button{
    color: #dc3545!important;
    background-color: transparent!important;
}


.user-profile-card span.item{
    border:0;
    background-color: ghostwhite;
    border-radius: 3px !important;
    padding-left: 5px !important;
}

.error-border {
    border: 1px solid red!important;
}

tbody > tr:last-child > td {
  border-bottom: 0;
}

.extra-bold {
  text-shadow: 0px 1px, 1px 0px, 1px 1px;
}

input[type=radio] {
    
}

.inactivity_modal{
    width: 350px;
    height: 150px;
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 101;
    background-color: rgba(246, 246, 243, 0.9);
    padding:25px 15px;
    border: 1px solid lightgray;
    border-radius: 3px;

}

#absence_status_update_alert_message{
    font-size: larger;
    font-weight: bold;
    color: #535353;
}

/*
.btn-primary {
    border-color: var(--COLOR-BLUE) !important;
    background-color: var(--COLOR-BLUE) !important;
}
*/

.btn-primary-light, .btn-primary-light:hover{
    background-color: var(--color-primary-light);
    color: whitesmoke;
}

.btn-success-light, .btn-success-light:hover{
    background-color: var(--color-success-light);
}


.btn-outline-success span,
.btn-outline-success i {
    color: green;
}

.btn-outline-success:hover,
.btn-outline-success:hover span,
.btn-outline-success:hover i {
    color: whitesmoke;
}

.btn-outline-danger span,
.btn-outline-danger i {
    color: red;
}

.btn-outline-primary span,
.btn-outline-primary i {
    color: #0d6efd;
}

.btn-outline-danger:hover,
.btn-outline-danger:hover span,
.btn-outline-danger:hover i,
.btn-outline-primary:hover,
.btn-outline-primary:hover span,
.btn-outline-primary:hover i,
.btn-outline-secondary:hover,
.btn-outline-secondary:hover span,
.btn-outline-secondary:hover i {
    color: whitesmoke;
}

.active-btn {
    background-color: lightgrey;
}

.active-btn:hover {
    background-color: lightgrey;
}

.session-activity-row{
    cursor: pointer;
}
.session-activity-row:hover{
  box-shadow: 0px 5px 5px 0px #88888894, 0px -5px 5px #88888891;
}

.available_workstation_radio {
    height: 20px;
    width: 20px;
}

/* Sessions Table Animations */
.session-table-row {
    transition: background-color 0.3s ease;
}

.row-highlight-normal {
    animation: flash-grey-normal 0.7s forwards;
}

.row-highlight-warning {
    animation: flash-grey-warning 0.7s forwards;
}

.row-highlight-danger {
    animation: flash-grey-danger 0.7s forwards;
}

.row-highlight-success {
    animation: flash-grey-success 0.7s forwards;
}

.row-highlight-info {
    animation: flash-grey-info 0.7s forwards;
}

@keyframes flash-grey-normal {
  0% {
    background-color: lightgrey;
  }
  100% {
    background-color: var(--bs-table-bg);
  }
}

@keyframes flash-grey-warning {
  0% {
    background-color: lightgrey;
  }
  100% {
    background-color: #fff3cd;
  }
}

@keyframes flash-grey-danger {
  0% {
    background-color: lightgrey;
  }
  100% {
    background-color: #f8d7da;
  }
}

@keyframes flash-grey-success {
  0% {
    background-color: lightgrey;
  }
  100% {
    background-color: #d1e7dd;
  }
}

@keyframes flash-grey-info {
  0% {
    background-color: lightgrey;
  }
  100% {
    background-color: #cff4fc;
  }
}
/* End Sessions Table Animations */

#particles-js {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -100;
  background-image: linear-gradient(to top, #002055, #000c2d);
}

.user-login-form {
    /* From https://css.glass */
    width: 700px;
    background: rgb(57 60 75 / 40%);
    box-shadow: 0px 13px 30px rgb(0 0 0);
    backdrop-filter: blur(5.4px);
    -webkit-backdrop-filter: blur(5.4px);
    border: 1px solid rgb(35 19 88);
}

.user-login-form h3,
.user-login-form h5,
.user-login-form label {
    color: white;
}

.user-login-form h3 span,
.user-login-form i {
    color: white!important;
}
.user-login-form #id_username, .user-login-form #id_password{
    background-color: #a2a9b842 !important
}

.login_form_non_field_errors{
    background-color: rgb(254 112 112 / 74%);
}
.login_form_non_field_errors li{
    color:#e9e9e9;
}
.user-login-form .btn{
    border-color: #6d8ab5 !important;
}

#login-submit-input{
    background-color: #2153c9e0 !important;
    color: white;
 }

input[value="Login"] {
    background-color: rgb(18 20 74 / 71%) !important;
    color: white;
}
input[value="Login"]:hover{
    color: white !important;
}

.nav-search-submit:hover i {
    color: whitesmoke;
}
/*
.video-js span{
    color: white;
}*/

.vjs-menu-item-text{
    color: black;
}
.vjs-icon-placeholder, vjs-volume-panel{
    color: whitesmoke;
}


.vjs-menu-item.vjs-selected {
  background-color: #444 !important;  /* Dark gray */
  color: #fff !important;             /* White text */
}

/* If you also want a hover state to be different, for example: */
.vjs-menu-item:hover {
  background-color: #666 !important;
  color: #fff !important;
}

.vjs-playback-rate,
.vjs-playback-rate * {
  color: whitesmoke !important;
}

th {
    border-bottom: none;
}

.text-small{
    font-size: small;
}

.text-smaller{
    font-size: smaller;
}


.online-dot {
    width: 10px;
    height: 10px;
    background-color: #56af59; /* Green color */
    border-radius: 50%;
    animation: pulse 1s infinite alternate; /* Pulsating animation */
    margin-bottom: 2px;
    margin-left: 5px;
  }

@keyframes pulse {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.3);
      background-color: lime;
    }
  }

.offline-dot {
    width: 10px;
    height: 10px;
    background-color: #af5656; /* Green color */
    border-radius: 50%;
    animation: pulse-offline 1s infinite alternate; /* Pulsating animation */
    margin-bottom: 2px;
    margin-left: 5px;
  }

@keyframes pulse-offline {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.3);
      background-color: #ff0000;
    }
  }

/* SHOW CHILD ELEMENT ON PARENT HOVER*/
.hiddens-parent .hidden-child{
    visibility: hidden;
}

.hiddens-parent:hover .hidden-child{
    visibility: visible;
}
/* END SHOW CHILD ELEMENT ON PARENT HOVER*/

.notification-animate{
    animation-name: notification-animate;
    animation-duration: 2s;
}
@keyframes notification-animate {
    0%{
        background-color: #adadad;
    }
    100%{
        background-color: white;
    }
}

.notification-badge-gradient{
    background: linear-gradient(127deg, #ff7987 0%, rgb(252 1 76) 50%, rgb(205 3 77) 100%);
}

.notification-badge-animate{
    animation-name: notification-badge-animate;
    animation-duration: 0.3s;
}
@keyframes notification-badge-animate {
    0%{
        transform: scale(130%, 130%);
    }
    100%{
        transform: scale(100%, 100%);
    }
}




.notification-counter-badge {
    font-size: 1rem;
    box-shadow: 1px 4px 10px 1px rgba(0,0,0,0.75);
    position: absolute;
    border-radius: 50%;
    height: 1.6rem;
    width: 1.6rem;
    line-height: 1.3rem;
    padding: 3px;
    top: 0;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.6);
    z-index: 2;
}

.notification-priority-1 {
    color: #664d03!important;
    background-color: #fff3cd!important;
    border-color: #ffecb5!important;
}

.notification-priority-1 a,
.notification-priority-1 span {
    color: #664d03!important;
}

.notification-priority-2 {
    color: #842029!important;
    background-color: #f8d7da!important;
    border-color: #f5c2c7!important;
}

.notification-priority-2 a,
.notification-priority-2 span {
    color: #842029!important;
}

.spoiler-eur, .spoiler-eur span, .spoiler-usd, .spoiler-usd span, .spoiler-usd .rsd, .spoiler-usd .usd, .spoiler-rsd, .spoiler-rsd span, .spoiler-total-payment, .spoiler-total-payment span{
    background-color: #525252 !important;
    color: #525252 !important;
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
}

.spoiler-total-payment:hover, .spoiler-total-payment:hover span{
        color: #ffffff !important;
        background-color: #198754!important;

}
.spoiler-usd:hover, .spoiler-usd:hover span{
    background: rgb(89 205 171 / 19%)!important;
    color: #57c317!important;
}

.spoiler-rsd:hover, .spoiler-rsd:hover span{
    background: rgb(190 193 192 / 19%)!important;
    color: #707070!important;
}

.spoiler-eur, .spoiler-eur span{
    background: rgba(89, 164, 205, 0.19);
    color: #1d38f3;
}

.sticky-th th{
    position: sticky; top: 0;
    font-weight: 600 !important;
    color: #424242 !important;
    
    /*-webkit-box-shadow: 3px 5px 10px grey;*/
    /*-moz-box-shadow: 3px 5px 10px grey;*/
    /*box-shadow: 3px 5px 10px grey;*/

}
table th{
    vertical-align: middle;

}

.fw-600{
    font-weight: 600;
}
/* table sort*/

th i.fa-sort{
    color: silver;
}

/* end table sort*/


.tr-declined{
    background-color: #f9cebd;
}



.bg-flex-shift{
    background-color: #24299F;
}

/* recording video modal */

/* The Modal (background) */
.recording_video_modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  z-index: 1062;
}

/* Modal Content/Box */
.recording_video_modal_content {
  /*background-color: #40424a;
  margin: auto;
  max-width: 87%;*/


  position: relative;
  width: 100%;
  height: 56.25vw;
  max-height: calc(100vh - 250px);
  min-height: 480px;
  background: #000;
  margin-top: 5%;

  overflow: hidden;
}

video{
  display: block;
  margin: 0 auto;
  width: 100%;
}

.zoomed {
      transform: scale(1.5); /* Adjust the zoom level as needed */
      transition: transform 0.3s ease-in-out;
}


/* end video modal */

/* Position the control bar so it doesn't overlap other page content */
/* Allow control bar children to wrap onto multiple lines */
/* This CSS applies to the custom div inside the progress control */
/* Allow items to wrap */
.video-js .vjs-control-bar {
  display: flex;
  flex-wrap: wrap;
}

/* Set order explicitly */
/* Enable wrapping for the control bar */
.video-js .vjs-control-bar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom:15px;
}

/* Ensure your custom div always takes up a full row */
.video-js .vjs-my-custom-div {
    order: 100;           /* Ensure it appears after all other items */
    flex: 0 0 100%;       /* Force full width */
    width: 100%;
    background-color: #272b35;
    height: 10px;
    opacity: 1;
}
.video-js .chunk-bar-container{
    background-color: #272b35;
    height: 10px;
    width: 100%;
}
.video-js #chunk-bar{
    margin-left: 50px;           /* Set this to the actual left offset of your seekbar */
    width: calc(100% - 200px);
    border-radius: 5px;
    height: 100%;
}

.vjs-tech{
    /* Add padding to video inside player so the seekbar doesn't cover lower part of the video*/
    padding-bottom: 50px;
}

.vjs-progress-control:hover .vjs-time-tooltip {
  font-size: 16px !important;
}

/* End video player styles */

.segment-strip-item.active{
    box-shadow: 0 3px 5px 0 #ffffff;
    border: 2px solid white;
}

/* VIDEO PLAYER / INFORMATION DIV*/
/* Default layout (if needed) */
.video-info-container {
    display: flex;
    flex-direction: column; /* Fallback: stacked layout */
    height: 100vh;
}

/* When info should be below the video */
.video-info-container.info-below {
  flex-direction: column;
}

/* When info should be on the right of the video */
.video-info-container.info-right {
    flex-direction: row;
}

.video-60vh{
    height: 60vh !important;
}

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


/* Example styling adjustments */
.video-player, .video-info {
    background-color: black;
}

.video-player {
  flex: 2;
  height: 100vh ;
}

.video-info {
    flex: 1;
    background-color: rgb(20 25 40); /*var(--color-background2) ;*/
}


/**/
.btn-silver-dark {
  background-color: #a0a0a0; /* Medium dark grey */
  color: #fff; /* Light text for contrast */
  border: 1px solid #909090;
  background-image: none; /* Remove gradient for darker style */
}

.btn-silver-dark:hover {
  background-color: #909090;
  border-color: #808080;
}

.btn-silver-dark:active {
  background-color: #808080;
  border-color: #707070;
}
/**/


.text-lightgrey{
    color: #d3d3d3 !important
}
.video-info *{
    color: #d3d3d3 !important
}
/* END VIDEO PLAYER / INFORMATION DIV*/


/* AI PRODUCTIVITY VIDEO PLAYER PAGE */
.segment-score-0 {
  color: #bb3939 !important;
}
.segment-score-1 {
  color: #FF7043 !important;
}
.segment-score-2 {
  color: #FFC107 !important;
}
.segment-score-3 {
  color: #76bd79 !important;
}
.segment-score-4 {
  color: #42ad47 !important;
}
.segment-score-5 {
  color: #11ff00 !important;
}

.segment-score-default{
  color: #959595 !important;
}
.segment-score-bg-0 {
  background-color: #bb3939;
}
.segment-score-bg-1 {
  background-color: #FF7043; /* Deep Orange 400 */
}
.segment-score-bg-2 {
  background-color: #FFC107;
}
.segment-score-bg-3 {
  background-color: #76bd79; /* Green 400 */
}
.segment-score-bg-4 {
  background-color: #42ad47; /* Green 500 */
}
.segment-score-bg-5 {
  background-color: #11ff00;
}
.segment-score-bg-default{
  background-color: #959595;
}

/* --------------END SCORE COLORS--------------------*/


/* -----------------SHIFT NAME CHANGE CALENDAR INPUT----------------*/
/* make the icon sit on top of the select’s right edge */
.edit-icon {
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1rem;
    color: #6c757d;      /* adjust to match your theme */
    z-index: 2;
  }
  
  /* ensure your hidden input matches select sizing */
  .edit-input {
    /* using form-control defaults via .form-input + your existing CSS */
    /* it’s already flex-grow:1 from the inline style, to match the select width */
  }
  
  /* optional: remove bottom margin on labels */
  .option-container .form-label {
    margin-bottom: 0;
  }

/* -----------------END SHIFT NAME CHANGE CALENDAR INPUT----------------*/  


/* GAUGE CHART*/

.gauge {
  width: 200px;
  height: 100px;        /* half of width */
  overflow: hidden;     /* show top half of the circle */
  margin: 1rem auto;    /* center it */
}

.gauge__body {
  width: 200px;
  height: 200px;        /* full circle dimension */
  background: #ccc;
  border-radius: 50%;
  position: relative;
  transform: rotate(-90deg); /* start from left side */
}

.gauge__fill {
  width: 200px;
  height: 200px;
  background: #28a745;  /* fill color (green) */
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(0deg); /* dynamically changed via inline style */
}

.gauge__cover {
  width: 100px;
  height: 50px;
  background: #fff;
  border-radius: 0 0 100px 100px;
  position: absolute;
  top: 50%;
  left: 25%;
  font-size: 1.5rem;
  text-align: center;
  line-height: 50px;
}



/* END GAUGE CHART */


.doughnut-chart-small {
  width: 200px;
  height: 200px;
  position: relative; /* required for Chart.js to fill it */
}

.doughnut-chart-small canvas {
  width: 100% !important;
  height: 100% !important;
}

.popover-dark-trigger + .popover {
  background-color: #2b2b2b !important;
  color: #ffffff !important;
  border: 1px solid #444444 !important;
}
.popover-dark-trigger + .popover .popover-arrow::before {
  border-right-color: #2b2b2b !important;
}

/* END AI PRODUCTIVITY VIDEO PLAYER PAGE */

.additional-personal-info{
    display: none;
}

.toggle-additional-personal-info {
    border: 0;
    background: none;
}

.toggle-additional-personal-info:hover,
.toggle-additional-personal-info:focus {
    border-radius: 7px;
}

/* SCROLLBAR STYLED */
.styled-scrollbar::-webkit-scrollbar-track {
    background-color: #e0e0e0; /* Light grey track */
}

.styled-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a0a0a0; /* Medium grey thumb */
    border-radius: 0;
}

.styled-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #808080;
}

.styled-scrollbar::-webkit-scrollbar {
    width: 8px; /* Slightly wider scrollbar */
}
/* END SCROLLBAR STYLED */



a.nohover:hover {
      color: inherit;
}

.card-400{
    max-height: 400px;
    overflow-y: auto;
}

.card-200{
    max-height: 200px;
    overflow-y: auto;
}
.card-150{
    max-height: 150px;
    overflow-y: auto;
}
.card-800{
    max-height: 650px;
    overflow-y: auto;
}

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

.card-130{
    min-height: 130px;

}

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

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


.font-size-xx{
    font-size: 2rem!important;
}

.orange-pill{
    background: rgba(250, 175, 109, 0.19)!important;
    color: #e34901 !important;
}

.red-pill{
    background: rgba(250, 109, 109, 0.19) !important;
    color: #d20000 !important;
}

.info-pill{
    background: rgba(109, 250, 222, 0.19) !important;
    color: #00d2cb !important;
}

.yellow-pill{
    background: rgba(250, 243, 109, 0.19) !important;
    color: #e3cc01 !important;
}

.grey-pill{
    background: rgba(191, 191, 191, 0.19) !important;
    color: #7f7f7f !important;
}

.rounded-pill {
    font-size: 1rem;
}

.day_number {
    padding: 0px 3px;
    background-color: white;
    font-weight: bold;
    border-radius: 2px;
}

/* calendar */

.calendar {
        width: 100%;
        border-collapse: collapse;
}

.calendar-large td, .calendar-small td{
    vertical-align: top;
}


.calendar-small table {
    width: 100%;
    table-layout: fixed;
}

.calendar-small .fa-file-image {
    display: none;
}

.calendar-small .absence_update_status {
    display: none;
}
.calendar-small .approve_status_icon {
    padding: 0;
    font-size: 1rem;
}

.calendar-small .absence_icons_container {
    min-height: 0!important;
}


.calendar th {
    background-color: #d7d7d7;
    text-align: center;
    padding: 1px;
}
.calendar td {
    text-align: center;
    padding: 4px;
    border: 1px solid #ddd;
}

.calendar .calendar-navigation-btn {
    display: none;
}

.calendar-large-month .calendar-navigation-btn {
    border-radius: 50%;
    border-width: 2px;
    box-shadow: darkgray;
}

/*
.calendar-large {
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); Added shadow
}
*/

.calendar-large {
    border-radius: 12px;
}

.calendar-large table {
    border-collapse: separate;
    table-layout: fixed;
    width: 100%;
    border-radius: 12px!important;
}

.month {
    border-radius: 12px;
}

.calendar-large-month {
    border-radius: 12px 12px 0 0;
}

.calendar-large-month,
.mon, .tue, .wed, .thu, .fri, .sat, .sun {
    color: black!important;
    background-color: #f0eff5 !important;
}

.calendar-large-month span {
    font-weight: 600!important;
    font-size: 1.4rem;
    color: #6a6a6a;
}

.calendar-large-month a {
    margin: 0.5rem 1rem;
}

.calendar-large-month a:hover i {
    color: whitesmoke!important;
}

.calendar-large th {
    background-color: #3498db; /* Changed background color */
    color: #fff; /* Added text color */
    text-align: center;
    padding-bottom: 1rem; /* padding: 10px; */
    font-weight: 600;
    font-size: larger;
    /* box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.27); /* Added shadow */
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.27);
}

.calendar-large tr td:nth-child(6),
.calendar-large tr td:nth-child(7) {
    background-color: #f7f7fa;
}

.calendar-day:hover, .calendar-day-with-shift:hover, .calendar-day-with-absence:hover {
    background-color: #e8e8e8!important;
}

.calendar-large td {
    /*text-align: center;*/
    text-align: end !important;
    padding-bottom: 4.5rem; /* padding-bottom: 45px; */
    padding-top: 1.5rem;
    padding-left: 1rem;
    border: 1px solid #ddd;
    font-weight: 500;
    font-size: large;
    background-color: #fff; /* Changed background color */
    box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.21); /* Added shadow
    /*box-shadow: inset -5px -4px 10px 1px rgba(0, 0, 0, 0.05);*/
}

.calendar-large td:hover .calendar-shift-color {
    opacity: 100%!important;
    transition: opacity 0.5s;
}

.calendar-large td span {
    position: relative;
    right: 0.5rem;
}

.calendar-large td.date-selected{
    /* background-color: #cff593 !important; */
    background-color: lightskyblue !important;
    box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.31);
    border: 1px solid darkgray;
}

.day-of-current-week {
    box-shadow: inset 0px 0px 4px 2px rgba(0, 0, 0, 0.5)!important;
}

.approve_status_icon {
    padding: 0.5rem;
    font-size: 1.5rem;
    color: lightgreen;
}

.fa-thumbs-up {
    color: lightskyblue;
}

.current-week {
    outline: 2px solid #007bff;
}

.calendar-footer {
    padding: 1rem!important;
    border: none !important;
    border-radius: 0 0 12px 12px;
    background-color: rgb(240, 239, 245) !important;
}

.calendar > div:first-of-type {
    border: 1px solid lightgrey;
    border-radius: 12px;
}

.calendar tr > td:first-child {
    border-left: none;
}

.calendar tr > td:last-child {
    border-right: none;
}

/* calendar end */



/* currency icons */

.usd{
    font-weight: 600;
    background: rgb(89 205 171 / 19%);
    color: #57c317;
    font-size: 15px;
    border: 1px solid rgba(13, 205, 148, 0.1);
    border-radius: 8px !important;
    padding-left: 3px;
    padding-right: 3px;
    position: relative;
    /*top: -2px;*/
    margin-left: 1px;
}

.usd span {
    color: #57c317 !important;
}

.eur{
    background: rgba(89, 164, 205, 0.19);
    color: #1d38f3;
    font-size: 15px;
    border: 1px solid rgba(13, 90, 205, 0.1);
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px !important;
    padding-left: 3px;
    padding-right: 3px;
    position: relative;
    /*top: -2px;*/
    margin-left: 1px;
}

.rsd{
    background: rgb(190 193 192 / 19%);
    color: #707070;
    font-size: 12px;
    border: 1px solid rgba(13, 90, 205, 0.1);
    font-weight: 600;
    border-radius: 8px !important;
    padding-left: 3px;
    padding-right: 3px;
    position: relative;
    margin-left: 1px;
}

.grey-eur {
    background: rgba(120, 120, 120, 0.19);
    color: #5e5e5e;
    font-size: 15px;
    border: 1px solid rgba(13, 90, 205, 0.1);
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px !important;
    padding-left: 3px;
    padding-right: 3px;
    position: relative;
    /*top: -2px;*/
    margin-left: 1px;
}

.mark-payment{
    border: 1px solid #29e736;
    border-radius: 10px;
    box-shadow: 0 0 5px 2px #76e77d !important;

}

/*responsive iframes*/

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  content: "";
  display: block;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.embed-responsive-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


.ws-stream-ai-card{
    height: 102px;
    margin: 0;
    padding: 0;
    padding-left: 15px;
    padding-right: 15px;
    overflow-y: auto;
}
/*end responsive iframes*/


/* success bar */

.success-bar{
    width: 100%;
    height: 4px;

    -webkit-animation: animateGradient 3s ease infinite, fadeOut 2s ease 5s forwards;
    -moz-animation: animateGradient 3s ease infinite, fadeOut 2s ease 5s forwards;
    background: linear-gradient(268deg, rgba(184, 255, 119, 0.89), rgb(120, 255, 0), rgb(23, 175, 0)) 0% 0% / 400% 400%;
    animation: 5s ease 0s infinite normal none running animateGradient, fadeOut 0.4s ease 7s forwards, animateGlow 1.5s ease-in-out infinite alternate;
}


/*
.form-group .form-control,
.form-group .form-select,
.form-item-diff {
    border-radius: 0;
    border: 0;
	padding: 7px 0;
	border-bottom: 1px solid #ccc;
}

.form-group .form-control:focus,
.form-group .form-select:focus,
.form-item-diff {
    border-bottom: 1px solid #ccc;
    box-shadow: none!important;
}

.form-group .form-control ~ .focus-border,
.form-group .form-select ~ .focus-border,
.form-item-diff ~ .focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-image: linear-gradient(to right, lightskyblue, mediumpurple);
    transition: 0.3s;
}
.form-group .form-control:focus ~ .focus-border,
.form-group .form-select:focus ~ .focus-border,
.form-item-diff:focus ~ .focus-border {
    width: 100%;
    transition: 0.4s;
}

.form-label {
    transition: transform 0.3s, color 0.3s;
}

.form-label label {
    transition: color 0.3s;
}

.form-group .form-control:focus ~ .form-label,
.form-group .form-select:focus ~ .form-label,
.form-item-diff ~ .form-label{
    transform: translateY(-7px);
    color: lightskyblue;
}

.form-group .form-control:focus ~ .form-label label,
.form-group .form-select:focus ~ .form-label label {
    color: lightskyblue;
}
*/

.selected-department {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    border-radius: 10px;
    padding-right: 0.5rem;
    background-color: whitesmoke;
    border: 0.5px solid #333;
    user-select: none;
}

.delete-section {
    transition: background-color 0.3s ease;
}

.delete-section i {
    transition: color 0.3s ease;
}

.delete-section:hover {
    background-color: rgba(250, 109, 109, 0.19) !important;
}

.delete-section:hover i {
    color: #d20000 !important;
}

.selected-department .btn-remove-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    border: none;
    border-radius: 10px 0 0 10px;
    background-color: whitesmoke;
}

.selected-department .btn-remove-section-disabled {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    border: none;
    border-radius: 10px 0 0 10px;
    background-color: lightgrey;
    cursor: auto;
}

.btn-remove-section i,
.btn-remove-section-disabled i {
    padding-top: 1.124px;
}

.selected-department .btn-remove-section:hover {
    background-color: red;
}

.selected-department .btn-remove-section:hover i {
    color: white;
}

.selected-department span {
    color: #333;
}

.form-label {
    transition: 0.25s;
}

.form-control:focus ~ .form-label,
.form-select:focus ~ .form-label {
    color: lightskyblue;
}

.form-control,
.form-select {
    transition: 0.25s;
}

.form-control:focus,
.form-select:focus {
    border-width: 1.25px;
    box-shadow: none;
}

.no-focus:focus {
    outline: none;
    box-shadow: none;
}

.form-field-error {
    border: 1px solid #ff4848 !important;
}

.form-field-error-message {
    color: #ff4848!important;
}

.nav-tabs {
    background-color: white;
    border-radius: 0 12px 0 0;
}

.nav-item span.active.nav-link-error, .nav-item span.nav-link-error{
    color: #ff4848!important;
}



@-webkit-keyframes animateGradient {
     0%{background-position:0% 48%; box-shadow: 0px 0px 2px rgb(77, 187, 0);}
    50%{background-position:100% 53%; box-shadow: 0px 0px 7px rgb(111, 255, 0);}
    100%{background-position:0% 48%; box-shadow: 0px 0px 2px rgb(0, 253, 80);}
}
@-moz-keyframes animateGradient {
     0%{background-position:0% 48%; box-shadow: 0px 0px 2px rgb(77, 187, 0);}
    50%{background-position:100% 53%; box-shadow: 0px 0px 7px rgb(111, 255, 0);}
    100%{background-position:0% 48%; box-shadow: 0px 0px 2px rgb(0, 253, 80);}
}
@keyframes animateGradient {
    0%{background-position:0% 48%; box-shadow: 0px 0px 2px rgb(77, 187, 0);}
    50%{background-position:100% 53%; box-shadow: 0px 0px 7px rgb(111, 255, 0);}
    100%{background-position:0% 48%; box-shadow: 0px 0px 2px rgb(0, 253, 80);}
}

@-webkit-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

@-moz-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}


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

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid gray;
}


.font-weight-700{
    font-weight: 700;
}


.font-weight-600{
    font-weight: 600;
}

.text-glow {
    text-shadow: 0 0 2px #FFFFFF;
}

.star-glow {
    text-shadow: 2px 2px 3px rgb(242 190 24 / 35%)
}


/* pills */

.success-pill{
    background: rgba(13, 205, 148, 0.1);
    color: #0dcd94;
    font-size: 12px;
    border: 1px solid rgba(13, 205, 148, 0.1);
    padding: 0.3rem;
    border-radius: 7px;
}

.danger-pill {
    background: rgba(247, 40, 74, 0.1);
    color: #f7284a;
    font-size: 12px;
    border: 1px solid rgba(247, 40, 74, 0.1);
    padding: 0.3rem;
    border-radius: 7px;

}

.text-pink {
    color: rgba(255, 99, 132, 1)
}

/*  gradient bootstrap-colors */
.text-primary-gradient{
  background: -webkit-linear-gradient(rgba(9, 9, 121, 0.7) 30%, rgba(0, 140, 255, 0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-secondary-gradient{
  background: -webkit-linear-gradient(rgb(103, 103, 103) 30%, rgb(176, 176, 176) 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-success-gradient{
  background: -webkit-linear-gradient(rgba(19, 73, 0, 0.88) 30%, rgb(0, 255, 80) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-danger-gradient{
  background: -webkit-linear-gradient(rgba(105, 0, 0, 0.88) 30%, rgb(255, 0, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-warning-gradient{
  background: -webkit-linear-gradient(rgba(107, 93, 0, 0.88) 30%, rgb(255, 222, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-primary{
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(7, 35, 129, 0.69) 0%, rgba(26, 62, 232, 0.7) 30%, rgba(51, 94, 243, 0.7) 100%);

}

.bg-gradient-secondary{
    background: rgb(191,191,191);
background: linear-gradient(270deg, rgb(141, 141, 141) 1%, rgba(93,93,93,1) 75%, rgb(80, 80, 80) 100%);

}
.bg-gradient-success {
    background: rgb(110, 217, 0);
    background: linear-gradient(270deg, rgba(75, 166, 0, 0.79) 0%, rgba(30, 117, 0, 1) 83%, rgb(50, 84, 0) 100%);
}
.bg-gradient-danger{
    background: rgb(255,64,64);
    background: linear-gradient(270deg, rgba(204, 35, 35, 0.89) 0%, rgb(169, 33, 33) 47%, rgb(115, 25, 25) 100%);
}

.bg-gradient-warning{

}

/* end gradient bootstrap-colors */


.bg-success-light, .bg-success-light:focus{
    background-color: #7abd8b !important;
}
.bg-danger-light, .bg-danger-light:focus {
    background-color: rgba(255,128,130,0.65)!important;
}
.bg-warning-light, .bg-warning-light:focus {
    background-color: #ffc107ab!important;
}
.bg-light2{
    background-color: #ececec;
}

.shadow-glow-success {
  box-shadow: 0 0 10px 5px #198754 !important;
}
.shadow-glow-danger {
  box-shadow: 0 0 10px 5px #dc3545 !important;
}


._border-radius-1{
    border-radius: 0.4rem;
}

.min_w_150{
    min-width: 150px;
}


.dropdown-item:active{
    background-color: gray;
}


/* Apply a red border to declined sessions */
tr.declined-session-border td {
    border: 2px solid #dc3545; /* Bootstrap's danger color */
}

/* Apply a green border to approved sessions */
tr.approved-session-border td {
    border: 2px solid #28a745; /* Bootstrap's success color */
}

/* Apply a yellow border to warning sessions */
tr.warning-session-border td {
    border: 2px solid #ffc107; /* Bootstrap's warning color */
}

/* Apply a blue border to info sessions */
tr.info-session-border td {
    border: 2px solid #17a2b8; /* Bootstrap's info color */
}


/*  profile img   */
label.cabinet{
	display: block;
	cursor: pointer;
}

label.cabinet input.file{
	position: relative;
	height: 100%;
	width: auto;
	opacity: 0;
	-moz-opacity: 0;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  margin-top:-30px;
}

#upload-demo{
	width: 250px;
	height: 250px;
  padding-bottom:25px;
}

/**/








/* set empty span height same as non-empty */
span.item:empty:before {
  content: "\200b";
}
.vh-100{
    height: 100vh;
}

.errorlist{
    list-style: none;
}
/* input field styling */
.has-error input{
    background-color: hsla(0, 100%, 70%, 0.3);

}

/*  */




.remove_child_pm *{
    padding: 0;
    margin: 0;
}


/* colors*/
.bg-purple{
    background-color: rebeccapurple;
}

.text-purple{
    color: rebeccapurple;
}

.bg-orange{
    background-color: #ff5d00;
}

.text-orange{
    color: #ff5d00;
}

.border-orange {
  border-color: #ff5d00 !important;
}

.bg-grey{
    background-color: grey;
}
.text-grey{
    color: grey;
}


.btn-steelblue{
    color: #fff;
    background-color: #2874A6;
    border-color: #2874A6;
}
.btn-steelblue:hover{
    color: white;
}

.btn-orange{
    color: #fff;
    background-color: #ff5d00;
    border-color: #ff5d00;
}

.hovered-absence {
    background-color: rgba(255, 200, 200, 0.5); /* Example color for hover effect */
}

/* endcolors */

/* tooltip */


/* end tooltip */

#navigation-avatar{
    padding: 3px;
}

.form-group .country-select-flag{
    /*
    position: relative;
    top: -28px;
    left: 11px;
     */
}
.dialing_code_select{
    /*
    position: relative;
    top: -35px;
    left: 1px;
    */
    /* width: 80px; */
    border: 0;
    text-align: right;
    /* padding: 0.375rem 0.75rem; */
    padding-bottom: 2px;
    padding-right: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 2.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
input[name="personal_phone_number"], input[name="cellular_number"]{
    /* padding-left: 53px; */
}
.country-field select{
    padding-left: 35px;
}


.font-size-xl{
    font-size: 35px;

}
.font-large{
    font-size: large;
}
.font-initial{
    font-size: initial;
}
.page-header{
    color: #44454c;
}

.cursor-pointer{
    cursor:pointer;
}


.icon{
    margin: 0 6px;
    text-align: center;
    position: relative;
    border-radius: 8px;
    line-height: 2;
    background: #f1f4fb;
    justify-content: center;
    height: 45px;
    width: 45px;
}


/* autocomplete div*/
.autocomplete{
    position: relative;
    display: inline-block;
    /*max-height: 400px;
    overflow-y: auto;*/
}


.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the checkbox-container:*/
  top: 100%;
  left: 0;
  right: 0;

    max-height: 400px;
    overflow-y: auto;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}




/*end autocomplete div*/

.navbar-nav {
    width: 17rem!important;
}

.navbar-brand{
    padding: 10px 20px;
}

.background-color{
    background-color: rgb(236, 239, 248);
    min-height: calc(100vh - 58px); /* minus navbar height */
}
main{
    /*overflow-y: auto;
    height:100vh;*/
}

.card{
    border: 0;
    margin-bottom: 1rem;
    border-radius: 1px;
    -webkit-box-shadow: 4px 3.5px 6px 3px rgba(214,214,214,1);
    -moz-box-shadow: 4px 3.5px 6px 3px rgba(214,214,214,1);
    box-shadow: 4px 3.5px 6px 3px rgba(214,214,214,1);
}

.user-list table th{
    border: 0;
    font-weight: normal;
}

.borderless-th th{
        border: 0;
}

.bg-opacity-025{
    opacity: 0.25;
}

.kpi-card-selected {
    border-bottom: 2px solid; /* var(--primary-blue) */
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.page-content{
  margin-left: 260px;
  transition: margin-left 0.5s ease;
}
.sidebar.close ~ .page-content{
  margin-left: 78px;
}
.fa_menu {
   transform: rotate(0deg); /* Initial rotation */
   transition: transform 0.5s ease;
}
.sidebar.close ~ main .fa_menu{
    transform: rotate(180deg);
}

/*Sidebar*/


.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 260px;
  background: #11101d;
  z-index: 100;
  transition: all 0.5s ease;
}
.sidebar.close{
  width: 78px;
}
.sidebar .logo-details, .login-form .logo-details{
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
.sidebar .logo-details i, .login-form .logo-details i{
  font-size: 27px;
  color: #fff;
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
}
.sidebar .logo-details .logo_name, .login-form .logo_name{
  font-size: 20px;
  color: #fff;
  font-weight: 600;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}
.sidebar.close .logo-details .logo_name, .login-form .logo-details .logo_name{
  transition-delay: 0s;
  opacity: 0;
  pointer-events: none;
}

.sidebar .nav-links{
  height: 100%;
  padding: 30px 0 150px 0;
  overflow: auto;
}
.sidebar.close .nav-links{
  overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
  display: none;
}

.sidebar .nav-links li{
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}
.sidebar .nav-links li:hover{
  background: #1d1b31;
}

.sidebar .nav-links li:hover .link_name, .sidebar .nav-links li:hover i{
  /* color: aquamarine; */
  color: lightskyblue;
}
li.showMenu span.link_name, li.showMenu i{
    /* color: aquamarine !important; */
    /* color: lightskyblue; */

}

.sidebar .nav-links li .iocn-link{
  display: flex;
  align-items: center;
}
.sidebar.close .nav-links li .iocn-link{
  display: block
}
.sidebar .nav-links li i{
  height: 40px;
  min-width: 78px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;

}



.sidebar.close .menu-item{
    display: list-item;
}



.sidebar .nav-links li.showMenu i.arrow{
  transform: rotate(90deg);
}
.sidebar.close .nav-links i.arrow{
  display: none;
}
.sidebar .nav-links li a{
  display: flex;
  align-items: center;
  text-decoration: none;
}

.sidebar .nav-links li button .link_name, .sidebar .nav-links li a .link_name{
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  transition: all 0.4s ease;
  flex-grow: 2;
  line-height: 40px;
  display: block;
  text-align: left;
}

.sidebar.close .nav-links li .link_name{
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
  padding: 6px 6px 14px 80px;
  background: #1d1b31;
  display: none;

}
.sidebar .nav-links li.showMenu .sub-menu{
  display: block;

}
.sidebar .nav-links li .sub-menu a{
  color: #fff;
  font-size: 12px;
  padding: 5px 0;
  white-space: nowrap;
  opacity: 0.6;
  transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover{
  opacity: 1;
}
.sidebar .nav-links li .sub-menu a.active, .sidebar .nav-links li a span.active{
    /* color: aquamarine; */
    color: lightskyblue;
}
.sidebar.close .nav-links li .sub-menu{
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
  display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
  font-size: 12px;
  opacity: 1;
  display: block;
}
.sidebar .nav-links li .sub-menu.blank{
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
  top: 50%;
  transform: translateY(-50%);
}

/*
#navbar_searchbox input{
    width: 350px;
}
*/

#search-inputautocomplete-list {
    justify-self: center;
    width: 50%;
}

/* Login form */

.login-form .logo-details i{
    color: #11101d;
    font-size: 42px;
}
.login-form .logo_name{
    color: #11101d;
    font-size: 25px;
}
/*Users*/
#tab-access_groups{
    max-height: 500px;
    overflow-y: auto;
}

/*Breadcrumbs*/
.breadcrumb-ul li{
    list-style: none;
    display: inline;
}
.breadcrumb-ul li a {
}


/* lg */
._lg{
    transform: scale(1.3);
}
/*
.switch-success:checked{
    background-color: #47da99;
    border-color: #47da99;
}
.switch-success:focus{
    border-color: #47da99;
    color: #47da99;
}
*/

/*Checkbox*/

.cb-container {
  display: flex;
  align-items: center;
}

.cb-container label {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.cb-container input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 15%;
  border: none;
  outline: none;
  background-color: #ccc;
  margin: 7px;
  transition: background-color 0.07s ease-in-out;

}

.cb-container input[type="checkbox"]:checked {
  background-color: #1cbd09;
      transition: background-color 0.07s ease-in-out;

}

.cb-container input[type="checkbox"]::before {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  margin: 4px auto;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateX(2px);
  border-radius: 2px;
  visibility: hidden;
}

.cb-container input[type="checkbox"]:checked::before {
  visibility: visible;
}

.cb-container input[type="checkbox"]:disabled{
    background-color: #ececec;
    cursor: not-allowed;
}


/* end custom checkbox */


/*radio*/
.rb-container {
  display: flex;
  align-items: center;
}

.rb-container label {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.rb-container input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: none;
  outline: none;
  background-color: #ccc;
  margin: 7px;
  transition: background-color 0.07s ease-in-out;

}

.rb-container input[type="radio"]:checked {
    background-color: #1cbd09;
    transition: background-color 0.07s ease-in-out;
}

.rb-container input[type="radio"]:checked::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  margin: 7px;
  background-color: #fff;
  border-radius: 50%;
  transform: scale(1.2);
  transition: transform 0.2s ease-in-out;
}

.rb-container input[type="radio"]:disabled{
    background-color: #ececec;
    cursor: not-allowed;
}

/*end radio*/


.container-fixed-350{
    height:350px;
    overflow-y: auto;

}


.form-group > label{
    white-space: nowrap;
}


.user-without-ws-li.selected{
    transform: scale(1);
    background-color: var(--color-danger) ;
    color: white
}

.gambar.img-responsive.img-thumbnail,
.gambar.img-responsive.object-fit-cover {
    border-radius: 20px;
    box-shadow: 4px 4px 7px 1px rgb(108 107 107 / 75%);
    -webkit-box-shadow: 4px 4px 7px 1px rgb(108 107 107 / 75%);
    -moz-box-shadow: 4px 4px 7px 1px rgb(108 107 107 / 75%);
}


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

#user-info-img-name {
    width: 100%;
}


.login_screen.logo_icon{
    font-weight: bold;
    background: linear-gradient(to right, #00eaff, rgba(225, 225, 225, 0.49));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

        text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);

}


/* Container for the fog effect */
.fog-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Fog animation */
.fog {
    position: absolute;
    top: 0;
    right: 0; /* Position on the right side */
    width: 50%; /* Set width to 50% */
    height: 300%; /* Adjust height as needed */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%);
    animation: fogAnimation 20s linear infinite;

}
/*
.borderless-card:hover{
    background-color: lightgrey;
}

 */

.absence_status_update_alert {
    display: none;

    width: 350px;
    height: 100px;
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 101;
    background-color: rgba(244, 243, 238, 0.9);
    padding:25px 15px;
    border: 1px solid lightgray;
    border-radius: 3px;

    text-align: center;
    margin: auto;

}




.option-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.option-buttons label {
    cursor: pointer;
}

.option-container {
    display: none;
}

#select-shift.active, #select-absence.active {
    display: block;
}

#password_validation_error {
        display: block;
        max-width: 300px;
}


/*---------- DEPARTMENTS TREE ----------*/

.tree-admin {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;

    background: whitesmoke;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: lightgrey;
}

.tree-admin .gambar {
    box-shadow: 3px 3px 6px 1px rgb(108 107 107 / 42%)!important;
}

.tree-department {
    /* padding: 0.5rem; */
    padding: 1rem;
    /* background: rgba(0, 0, 0, 0.05); */
    border-radius: 16px;
    box-shadow: 5px 6px 7px 5px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.tree-department i {
    font-size: 2rem;
}

.section-preview-modal-worker td {
    padding: 0.5rem;
}

.section-preview-modal-worker:hover {
    background-color: whitesmoke;
}

.department-item {
    flex: 1 1 calc(25% - 16px);
    box-sizing: border-box;
    max-width: calc(25% - 16px);
    flex-grow: 0;
}

.department-directors-images {
    position: relative;
    width: 150px;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.department-directors-images .gambar {
    /* -webkit-box-shadow: 3px 3px 6px 1px rgb(108 107 107 / 42%); */
    box-shadow: 3px 3px 6px 1px rgb(108 107 107 / 42%)!important;
}

.overlay-image {
    position: absolute;
    top: 0;
    width: 67%;
    height: auto;
}

.plus-number-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffc107;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    position: absolute;
    top: -5px;
    right: -2px;
    z-index: 5;
}

.directors-plus-tooltip {
    visibility: hidden;
    background-color: whitesmoke;
    border-radius: 5px;
    padding: 0.5rem;
    padding-top: 0;
    position: absolute;
    bottom: 110%;
    right: 0;
    transform: translateX(45%);
    opacity: 0;
    transition: opacity 0.2s;
    border: 2px solid rgba(0, 0, 0, 0.7);
    z-index: 1;
    /* max-height: 400px; */
}

.tree-member .directors-plus-tooltip {
    left: 50%!important;
    transform: translateX(-52%)!important;
    z-index: 6;
}

.directors-plus-tooltip::after {
    content: "";
    position: absolute;
    top: 100%; /* Bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.department-options .directors-plus-tooltip {
    min-width: 15rem;
}

.department-options button,
.department-options a {
    transition: color 0.3s ease, background-color 0.3s ease;
}

.department-options button i,
.department-options a i {
    transition: color 0.3s ease;
}

.department-options button:hover,
.department-options a:hover {
    color: whitesmoke;
    background-color: black;
}

.department-options button:hover i,
.department-options a:hover i {
    color: whitesmoke;
}

.tree-member {
    position: relative;
}

.department-directors-images .show,
.tree-member .show,
.department-options .show {
    visibility: visible;
    opacity: 1;
}

.department-options button:focus {
    outline: none!important;
    box-shadow: none;
}

.selected-director-username {
    color: deepskyblue;
}

.tree-department-members {
    /*
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
     */
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    column-gap: 2rem;
}

.department-members-plus {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 10px;
    background-color: #ffffff;
    border-color: #000000 !important;
    position: relative;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.department-members-plus span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
    font-weight: bold;
    font-size: large;
    z-index: 1;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.department-members-plus:hover,
.department-members-plus:hover span {
    color: whitesmoke;
    background-color: black;
}

.department-options a,
.department-options button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 0.25rem;
    border-radius: 0.5rem;
    box-shadow: 1px 1px 0.25rem 2px rgb(0 0 0 / 20%);
}

/* Department single */

.editable-field .show-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.editable-field .btn-link {
    display: none;
}

.editable-field:hover .btn-link {
    display: inline-block;
}

.department-user-with-role,
.department-director-plus {
    border-radius: 1rem;
    border: 1px solid rgba(51, 51, 51, 0.15);
    border-left: 5px solid darkgray;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    position: relative;

    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.15);

    /*
    height: fit-content;
    position: relative;
    padding: 2.45rem 2.45rem 0.5rem 2.45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;

    background: rgba(49, 125, 255, 0.05);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1.2px solid rgba(88, 130, 255, 0.46);
     */
}

.department-director-plus {
    padding: 1rem;
}

.department-user-with-role:hover {
    box-shadow: inset 0 4px 30px rgba(0, 136, 255, 0.1);
}

.department-user-with-role .department-user-options,
.department-member .department-user-options {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25rem;
    display: none;
}

.department-user-with-role:hover .department-user-options,
.department-member:hover .department-user-options {
    display: flex;
}

.role-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    border: 1px solid transparent; /* For hover effect */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.role-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: rgb(0, 123, 255);
}

.permission-badge {
    font-weight: 500;
    padding: 0.35em 0.8em;
    color: black;
    background-color: #e9ecef !important;
    border: 1px solid #ced4da;
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
}

.form-section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.elegant-permissions-container {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 0.75rem; /* Gap between permission items */
}

.permission-item-wrapper {
    cursor: pointer;
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e0e5ec;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.permission-item-wrapper:hover {
    background-color: #e9ecef;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}
.permission-item-wrapper .form-check {
    display: flex;
    align-items: center;
    padding-left: 0; /* Override Bootstrap default if needed */
}

.permission-item-wrapper .form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0!important;
    margin-right: 0.75rem;
    cursor: pointer;
    border: 1px solid #adb5bd;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.permission-item-wrapper .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.permission-item-wrapper .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
    border-color: var(--primary-color);
}

.permission-item-wrapper .form-check-label {
    flex-grow: 1;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    font-size: 0.95rem;
}

.department-member,
.department-member-plus {
    border-radius: 1rem;
    border: 1px solid rgba(51, 51, 51, 0.15);
    border-left: 5px solid darkgray;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    position: relative;

    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.15);

    /*
    height: fit-content;
    position: relative;
    padding: 2.45rem 2.45rem 0.5rem 2.45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;

    background: rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1.2px solid rgba(0, 0, 0, 0.46);
     */
}

.department-member-plus {
    padding: 1rem;
}

.department-member:hover,
.department-member-plus:hover {
    box-shadow: inset 0 4px 30px rgba(0, 0, 0, 0.1);
}

.department-member h6 {
    pointer-events: none;
}

.add-user-dialogue,
.add-worker-dialogue {
    min-width: 300px;
    position: absolute;
    top: 120%;
    right: -360%;
    z-index: 1;
}

.select-departments {

}

.remove-director-x,
.view-department-user {
    padding: 0.55rem 0.65rem;
    text-decoration: none;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    /*
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
     */
}

.remove-director-return {
    padding: 0.5rem;
    border-radius: 20px;
    box-shadow: none;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
}


/*---------- END DEPARTMENTS TREE ----------*/

.opacity-50{
    opacity: 0.5;
}

.bottom-n4{
    bottom: -11px;
}
.top-n4{
    top: -11px;
}
.right-n4{
    right: -11px;
}
.left-n4{
    left: -11px;
}
.text-shadow{
    text-shadow: 3px 3px 4px #787878a6;
}

/*---------- EMAILS ----------*/
.email-list-item:hover {
    background-color: #e3e3e3;
    cursor: pointer;
}

.email-list-item-selected {
    background-color: whitesmoke;
}

.email-plus-img {
    width: 60px;
    height: 60px;
    background-color: #333;
    border: 4px solid #9a9a9a;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0.5rem;
    left: 30px;
}

/*---------- END EMAILS ----------*/

/* ---------- LOGIN PAGE ---------- */
.login-page-body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background-color: var(--page-bg);
    overflow: hidden; /* Hide scrollbars caused by canvas if any */
}

#login-background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place it behind all content */
}

.login-container {
    width: 100%;
    max-width: 1200px;
    min-height: 70vh; /* 700px */
    max-height: 90vh;
    background-color: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    position: relative;
    z-index: 1; /* Ensure this is on top of the canvas */
}

.info-side {
    background-color: var(--info-panel-bg);
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-content {
    max-width: 450px;
    margin: 0 auto;
}

.brand-name {
    font-size: 5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.tagline {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 3rem;
    color: var(--text-secondary);
}

.tagline #typed-text {
    color: var(--primary-blue);
    font-weight: 500;
    font-size: 1.5rem;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.feature-item {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 1.1rem;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-primary);
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.feature-item span {
    cursor: default;
    font-size: 1.25rem;
    font-weight: 500;
}

.feature-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-blue);
}

.feature-item i {
    color: var(--primary-blue);
    font-size: 1.75rem;
    width: 25px;
    text-align: center;
}

.form-side {
    padding: 60px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--card-bg);
}

.login-form-container {
    width: 100%;
    max-width: 400px;
}

.form-header h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.form-header p {
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: 2.5rem;
}

.input-group-custom {
    position: relative;
    /* margin-bottom: 1.5rem; */
}

.input-group-custom i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    opacity: 0.7;
}

.login-form-control {
    font-size: 1.25rem;
    background-color: var(--card-bg) !important;
    border: 1px solid var(--input-border);
    border-radius: 12px!important;
    height: 60px;
    padding-left: 55px!important;
    color: var(--text-primary)!important;
    font-weight: 400;
    transition: all 0.3s ease;
}

.login-form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

.login-form-control:focus {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(10, 124, 255, 0.2);
    outline: none;
}

.btn-login {
    background-color: var(--primary-blue);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 15px;
    border-radius: 12px;
    border: none;
    transition: all 0.3s ease;
}

.btn-login:hover {
    color: #fff;
    background-color: #0062cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(10, 124, 255, 0.3);
}
/* ---------- END LOGIN PAGE ---------- */

/* Keyframes for fog animation */
@keyframes fogAnimation {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

@media (min-width: 1900px) {
    .content-container{
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
    #user-info-img-name {
        width: 80%;
    }
}

@media (max-width: 1600px) {
    .vpn-info {
        flex-direction: column;
    }
    .department-item {
        flex: 1 1 calc(33.33% - 16px);
        max-width: calc(33.33% - 16px);
    }
}

@media (max-width: 1400px) {
    .vpn-info {
        flex-direction: row;
    }
    #user-info-img-name {
        width: 80%;
    }
}

@media (max-width: 1536px) {
    .content-container{
        /*padding-left: 10px !important;
        padding-right: 10px !important;*/
    }
    .selected {
        transform: scale(1.05);
    }

    #table-search-dates {
        gap: 1rem!important;
    }

    #table-search-dates-date {
        flex-direction: column;
    }
}

@media (min-width: 1200px) {
    .vpn-hours-total .card-title span,
    .vpn-sessions-total .card-title span,
    .workstation-hours-total .card-title span,
    .workstation-sessions-total .card-title span {
        display: block;
        margin-top: 1em;
        margin-bottom: 1em;
    }
}

@media (min-width: 1341px) {
    .vpn-hours-total .card-title span,
    .vpn-sessions-total .card-title span,
    .workstation-hours-total .card-title span,
    .workstation-sessions-total .card-title span {
        display: inline;
        margin: 0;
    }
}

@media (max-width: 1300px) {
    .department-item {
        flex: 1 1 calc(50% - 16px);
        max-width: calc(50% - 16px);
    }

    .video-info-container {
      flex-direction: column !important; /* Fallback: stacked layout */
    }
    .session-video{
        height: 60vh !important;
    }

}

/* Custom modal size */
  .modal-xxl {
    max-width: 1320px; /* match container-xxl width or set your own */
  }



@media (max-width: 1200px) {

    .session-details-container {
        flex-direction: column;
    }
    .selected {
        transform: scale(1.03);
    }
    .search-container {
        width: 75%!important;
    }
    /*
    #search-input {
        width: 75%!important;
    }
     */
    #search-inputautocomplete-list {
        width: 75%!important;
    }
    /*
    .form-group-vpn-sessions {
        flex-direction: column;
    }
    .form-group-vpn-sessions div {
        min-width: 250px;
    }
     */
    .vpn-sessions-settings, #workstation-sessions-table, #location-access-history-table {
        flex-direction: column;
    }

}

@media (max-width: 978px) {
    .navbar-nav {
        width: 20rem!important;
    }
    #navbar_searchbox input{
        width: 100%;
    }
    .content-container{
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
    .user-login-form {
        width: 100% !important;
    }
    #user-info-img-name {
        width: 100%;
    }

    .login-input-container{
        margin-left: 3rem !important;
        margin-right: 3rem !important;
    }
    .department-item {
        flex: 1 1 calc(100% - 16px);
        max-width: calc(100% - 16px);
    }
}

@media (min-width: 992px) {
    .card-additional-info h5 {
        display: none;
    }
}
@media (max-width: 768px) {
    .selected {
        transform: scale(1.05);
        -webkit-box-shadow: 8px 7px 12px 6px rgba(61, 61, 61, 0.7);
        -moz-box-shadow: 8px 7px 12px 6px rgba(61, 61, 61, 0.7);
        box-shadow: 8px 7px 12px 6px rgba(61, 61, 61, 0.7);
    }

    #navbarTogglerDemo03 {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        max-width: 75%!important;
        margin: 0 auto;
    }

    .navbar-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%!important;
    }
    .search-container {
        width: 100%!important;
    }
    /*
    #search-input {
        width: 100%!important;
    }
     */
    #search-inputautocomplete-list {
        width: 100%!important;
    }
    .calendar-large td {
        padding-bottom: 3rem;
    }
    /*
    .period-info-mid {
        flex-direction: column!important;
    }
     */
    .all-departments-container {
        margin: 0!important;
        padding: 0!important;
    }

    /**/
    #table-search-dates {
        flex-direction: column;
    }
}

@media (min-width: 577px){
    .finance-data-approved div span,
    .finance-data-paid div span {
        display: block;
        margin-top: 0.9rem;
        margin-bottom: 0.9rem;
    }

    .finance-data-pay-rate div span{
        display: block;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

@media  (min-width: 735px){
    .finance-data-approved div span,
    .finance-data-paid div span {
        display: inline;
        margin: 0;
    }
}

@media (min-width: 616px) {
    .finance-data-days-working div span {
        display: block;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

@media (min-width: 656px) {
    .finance-data-pay-rate div span,
    .finance-data-days-working div span {
        display: inline;
        margin-top: 0rem;
        margin-bottom: 0rem;
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        /*max-width: 1000px;*/
        margin: 1.75rem auto;
    }
}

@media (max-width: 576px) {
    .login-input-container{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .login-inputs-container{
        margin: 10px !important;
    }

    .content-container{
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    .login-form{
    width: 80%;
    }

    .sidebar.close{
    width: 0;
    }

    .sidebar.close .menu-item , .sidebar.close .logo_icon , .sidebar.close .logo-details .logo_name{
    display: none;
    }/*
    .sidebar.close .fa_right{
    display: block;
    }*/

    .page-content{
    transition: margin-left 0.5s ease;
    }
    .sidebar.close ~ .page-content{
        margin-left: 0;
    }

    .sidebar ~ .page-content{
        margin-left: 78px;
    }

    .sidebar.close ~ main .fa_menu{
        transform: rotate(180deg);
    }

    .sidebar{
        width: 78px;
    }

    .sidebar .logo-details .logo_name, .login-form .logo-details .logo_name{
        transition-delay: 0s;
        opacity: 0;
        pointer-events: none;
    }

    .sidebar .nav-links{
     overflow: visible;
    }


    .sidebar .nav-links li .iocn-link{
    display: block
    }


    .sidebar .menu-item{
    display: list-item;
    }

    .sidebar .nav-links i.arrow{
    display: none;
    }

    .sidebar .nav-links li .link_name{
    opacity: 0;
    pointer-events: none;
    }


    .sidebar .nav-links li .sub-menu{
    position: absolute;
    left: 100%;
    top: -10px;
    margin-top: 0;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    opacity: 0;
    display: block;
    pointer-events: none;
    transition: 0s;
    }
    .sidebar .nav-links li:hover .sub-menu{
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
    }


    .sidebar .nav-links li .sub-menu .link_name{
    font-size: 12px;
    opacity: 1;
    display: block;
    }

    /*
    .calendar-day .calendar-day-with-shift, .calendar-day-with-absence {
        padding: 0!important;
    }
    */

    .calendar-large th .calendar-large td {
        padding: 0!important;
    }

    .day_number {
        padding: 0!important;
    }

    .card-header {
        padding: 1rem 0;
    }

    .card-body {
        padding: 0;
    }

    .vpn-info {
        flex-direction: column;
    }
}

@media (max-width: 489px) {
    .finance-data-approved div span,
    .finance-data-paid div span {
        display: block;
        margin-top: 1rem;
        margin-bottom: 0.8rem;
    }
    #user-period-info-table tbody tr {
        display: flex;
        flex-direction: column;
    }
    .user-info-table-1 {
        text-align: left!important;
    }
}

.payment-info-table label {
    font-size: 1rem;
    padding: 0.5rem;
    background-color: lightgray;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: var(--text-primary);
}


.company_shifts_table th,
.company_shifts_table td {
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 409px) {
    .finance-data-days-working div span,
    .finance-data-pay-rate div span {
        display: block;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 369px) {
    .finance-data-days-working div span {
        display: inline;
        margin: 0;
    }
}



.user-info-card .fw-bold{
    color: #535353;
}

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

.w-95 {
    width: 95%!important;
}
.w-40{
    width: 40px;
}

.card-inside {
    box-shadow: 2px 2px 8px 2px rgb(191, 191, 191);
}


.h-200 {
    height: 200px!important;
}

.h-250 {
    height: 250px!important;
}
.h-10{
    height: 10px;
}

@property --myColor1 {
  syntax: '<color>';
  initial-value: grey;
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: grey;
  inherits: false;
}


.file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.file-input + .form-label-file {
    font-size: 1.25em;
    font-weight: 700;
    color: whitesmoke!important;
    display: inline-block;
    padding: 0.5rem;
    border-radius: 12px;
    background: linear-gradient(to right, var(--myColor1), var(--myColor2));
    transition: --myColor1 0.5s, --myColor2 0.5s;
}

.file-input:focus + .form-label-file {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

.untracked-document {
    width: 150px;
    height: 150px;
    flex: 0 auto;
    transition: transform 0.25s;
}

.untracked-document:hover {
    transform: scale(1.1);
}

.untracked-document img {
    width: 100px;
}

.untracked-document i {
    font-size: 50px;
}

.fa-file-pdf {
    color: #ff4444;
}

.exclamation-badge {
    background-color: #ffad4d;
    border-radius: 50%;
}

.fs-7 {
    font-size: 0.75rem;
}

.custom-checkbox-lg input[type="checkbox"] {
    transform: scale(1.5); /* Increase size */
    margin-right: 8px; /* Optional: Add spacing */
}

.highlight-row {
    /* ensure there’s a border to animate */
    border: 2px solid transparent;
    /* run one animation that covers both bg and border */
    animation: highlight-row 3s ease-out both;
  }
  
  @keyframes highlight-row {
    0% {
      background-color: #44baff6f;
      border-color: #44baff6f;
      color: white;
    }
    12.5% {
      background-color: #44baff9f;
      border-color: #44baff9f;
    }
    25% {
      background-color: #44baff6f;
      border-color: #44baff6f;
    }
    37.5% {
      background-color: #44baff9f;
      border-color: #44baff9f;
    }
    50% {
      background-color: #44baff6f;
      border-color: #44baff6f;
    }
    62.5% {
      background-color: #44baff9f;
      border-color: #44baff9f;
    }
    75% {
      background-color: #44baff6f;
      border-color: #44baff6f;
    }
    87.5% {
      background-color: #44baff9f;
      border-color: #44baff9f;
    }
    100% {
      background-color: transparent;
      border-color: transparent;
      color: inherit;
    }
  }

.highlight-row {
    animation: highlight-row 3s ease-out;
}