/*
|----------------------------------------------------------------------------------
| Bootstrap button drop-down inside responsive table not visible because of scroll
|----------------------------------------------------------------------------------
*/
/* .btn-group {  
  white-space: nowrap;              
}
.btn-group .btn {  
  float: none;
  display: inline-block;
}
.btn + .dropdown-toggle { 
  margin-left: -4px;
} */

/* .dropdown-menu{
  position: static !important;
} */


/* --------------- side nav bar stylings ------------------- */
[v-cloak] {
    display: none;
}

aside li.nav-item.mt-3 {
    display: none;
}

#sidenav-main::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px #CDC4F9; */
    border-radius: 8px;
    /* background-color: #F5F5F5; */
}

#sidenav-main::-webkit-scrollbar {
    width: 8px;
    /* background-color: #F5F5F5; */
}

#sidenav-main::-webkit-scrollbar-thumb {
    border-radius: 8px;
    /* -webkit-box-shadow: inset 0 0 6px #CDC4F9; */
    background-color: #a4a4a4;
}
/* ---------------------------------------------------- */

/*
|--------------------------------------------------------------------------
| Hiding the time stamp icon in input type time
|--------------------------------------------------------------------------
*/
input[type="time"]::-webkit-calendar-picker-indicator {
    background: none;
}

/*
|--------------------------------------------------------------------------
| Page Loader Animation
|--------------------------------------------------------------------------
*/
.ams-loader {
    position: fixed;
    /* z-index: 99; */
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.ams-loader.hidden {
    display: none;
}
.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes fadeOut {
    75% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: hidden;
    }
}

/* Give v-cloak Opacity To Prevent Displaying Variables On Loading Page */
[v-cloak] {
    display: none;
}
img {
    object-fit: cover;
    object-position: top;
}
.card-img-top {
    width: 100%;
    height: 192px;
    object-fit: cover;
    border-top-left-radius: 0.6rem !important;
    border-top-right-radius: 0.6rem !important;
}

/* All user Page Styling Starts Here */
.user_history_profile {
    height: 153.6px;
    object-fit: cover;
    width: 150px !important;
}
.user_history_modal_header {
    z-index: 1;
    border-bottom: none !important;
}

/* weekends modal */
.modal-content {
    /* border-top-left-radius: 0px !important;
    border-top-right-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 0px !important; */
}
.modal-content #day,
/* .modal-content button, */
.modal-content #day option {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 0px !important;
}
.label_day {
    border-top: 2px solid #117eef;
    border-bottom: 2px solid #117eef;
}
.label_day:hover {
    letter-spacing: 5px;
    background-color: black;
    color: white;
    margin-bottom: 10px;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
.select-modal-label {
    color: #b0baca;
}
/* .modal-content #day{
  border-top-left-radius: 0px !important;
  border-top-right-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 0px !important;
} */
/* .modal-content{

} */

/* Notification Button */

.notif_count {
    margin-top: -1.8rem !important;
    font-size: 8px !important;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 80% !important;
}

#notification-window {
    max-height: 430px;
    overflow: hidden;
    overflow-y: auto;
}

.label_made {
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.4rem !important;
    /* color: #495057; */
    /* background-color: #fff; */
    background-clip: padding-box !important;
    border: 1px solid #d2d6da !important;
    appearance: none !important;
    border-radius: 0.5rem !important;
    transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

/* When user gets salary bonus */

/* .bonus {
    animation-name: celebrate;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes celebrate {
    0% {
        background-color: white;
    }
    50% {
        background-color: yellow;
    }
    100% {
        background-color: white;
    }
} */

/* center logo */
.sidenav .navbar-brand {
    display: flex;
    justify-content: center;
}

/* bonus */

.bonus {
    /* width: 100%;
    height: 100%;
    position: absolute; */
    background: linear-gradient(
        45deg,
        #f17c58,
        #e94584,
        #24aadb,
        #27dbb1,
        #ffdc18,
        #ff3706
    );
    background-size: 600% 100%;

    animation: gradient 16s linear infinite;
    animation-direction: alternate;
}
.bonus .text-secondary {
    color: rgb(255, 255, 252) !important;
}
.bonus .text-info {
    color: #142faa !important;
}
@keyframes gradient {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}

.bonus_wrapper {
    /* margin: 50px auto; */
    /* width: 280px;
    height: 370px; */
    /* background: white; */
    /* border-radius: 10px; */
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 90;
}

.ribbon-wrapper-red {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
}

.ribbon-red {
    font: bold 15px Sans-Serif;
    color: #fff;
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    background-color: #ea181e;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#ea181e),
        to(#b90005)
    );
    background-image: -webkit-linear-gradient(top, #ea181e, #b90005);
    background-image: -moz-linear-gradient(top, #bfdc7a, #8ebf45);
    background-image: -ms-linear-gradient(top, #bfdc7a, #8ebf45);
    background-image: -o-linear-gradient(top, #bfdc7a, #8ebf45);
    color: #fff;
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}

.ribbon-red:before,
.ribbon-red:after {
    content: "";
    border-top: 3px solid #b90005;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
}

.ribbon-red:before {
    left: 0;
}

.ribbon-red:after {
    right: 0;
}
.leave_date_inp
    > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
        .valid-feedback
    ):not(.invalid-tooltip):not(.invalid-feedback) {
    border-right: 1px solid #d2d6da !important;
    border-left: 1px solid #d2d6da !important;
}

.leave_date_inp .form-control:not(:first-child) {
    padding-left: 10px !important;
}
.leave_date_inp
    > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
        .valid-feedback
    ):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* .flatpickr-calendar.animate.open.arrowTop.arrowLeft {
    left: 772px !important;
}
.flatpickr-calendar.rangeMode.animate.arrowTop.arrowLeft.open {
    left: 350px !important;
} */
.flatpickr-calendar.rangeMode.animate.arrowTop.arrowLeft.open {
    margin-left: 0px;
}
/* Ringing bell */

.bell-animate {
    -webkit-animation: ring 4s 0.7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s 0.7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s 0.7s ease-in-out infinite;
    transform-origin: 50% 4px;
}
@-webkit-keyframes ring {
    0% {
        -webkit-transform: rotateZ(0);
    }
    1% {
        -webkit-transform: rotateZ(30deg);
    }
    3% {
        -webkit-transform: rotateZ(-28deg);
    }
    5% {
        -webkit-transform: rotateZ(34deg);
    }
    7% {
        -webkit-transform: rotateZ(-32deg);
    }
    9% {
        -webkit-transform: rotateZ(30deg);
    }
    11% {
        -webkit-transform: rotateZ(-28deg);
    }
    13% {
        -webkit-transform: rotateZ(26deg);
    }
    15% {
        -webkit-transform: rotateZ(-24deg);
    }
    17% {
        -webkit-transform: rotateZ(22deg);
    }
    19% {
        -webkit-transform: rotateZ(-20deg);
    }
    21% {
        -webkit-transform: rotateZ(18deg);
    }
    23% {
        -webkit-transform: rotateZ(-16deg);
    }
    25% {
        -webkit-transform: rotateZ(14deg);
    }
    27% {
        -webkit-transform: rotateZ(-12deg);
    }
    29% {
        -webkit-transform: rotateZ(10deg);
    }
    31% {
        -webkit-transform: rotateZ(-8deg);
    }
    33% {
        -webkit-transform: rotateZ(6deg);
    }
    35% {
        -webkit-transform: rotateZ(-4deg);
    }
    37% {
        -webkit-transform: rotateZ(2deg);
    }
    39% {
        -webkit-transform: rotateZ(-1deg);
    }
    41% {
        -webkit-transform: rotateZ(1deg);
    }

    43% {
        -webkit-transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(0);
    }
}

@-moz-keyframes ring {
    0% {
        -moz-transform: rotate(0);
    }
    1% {
        -moz-transform: rotate(30deg);
    }
    3% {
        -moz-transform: rotate(-28deg);
    }
    5% {
        -moz-transform: rotate(34deg);
    }
    7% {
        -moz-transform: rotate(-32deg);
    }
    9% {
        -moz-transform: rotate(30deg);
    }
    11% {
        -moz-transform: rotate(-28deg);
    }
    13% {
        -moz-transform: rotate(26deg);
    }
    15% {
        -moz-transform: rotate(-24deg);
    }
    17% {
        -moz-transform: rotate(22deg);
    }
    19% {
        -moz-transform: rotate(-20deg);
    }
    21% {
        -moz-transform: rotate(18deg);
    }
    23% {
        -moz-transform: rotate(-16deg);
    }
    25% {
        -moz-transform: rotate(14deg);
    }
    27% {
        -moz-transform: rotate(-12deg);
    }
    29% {
        -moz-transform: rotate(10deg);
    }
    31% {
        -moz-transform: rotate(-8deg);
    }
    33% {
        -moz-transform: rotate(6deg);
    }
    35% {
        -moz-transform: rotate(-4deg);
    }
    37% {
        -moz-transform: rotate(2deg);
    }
    39% {
        -moz-transform: rotate(-1deg);
    }
    41% {
        -moz-transform: rotate(1deg);
    }

    43% {
        -moz-transform: rotate(0);
    }
    100% {
        -moz-transform: rotate(0);
    }
}

@keyframes ring {
    0% {
        transform: rotate(0);
    }
    1% {
        transform: rotate(30deg);
    }
    3% {
        transform: rotate(-28deg);
    }
    5% {
        transform: rotate(34deg);
    }
    7% {
        transform: rotate(-32deg);
    }
    9% {
        transform: rotate(30deg);
    }
    11% {
        transform: rotate(-28deg);
    }
    13% {
        transform: rotate(26deg);
    }
    15% {
        transform: rotate(-24deg);
    }
    17% {
        transform: rotate(22deg);
    }
    19% {
        transform: rotate(-20deg);
    }
    21% {
        transform: rotate(18deg);
    }
    23% {
        transform: rotate(-16deg);
    }
    25% {
        transform: rotate(14deg);
    }
    27% {
        transform: rotate(-12deg);
    }
    29% {
        transform: rotate(10deg);
    }
    31% {
        transform: rotate(-8deg);
    }
    33% {
        transform: rotate(6deg);
    }
    35% {
        transform: rotate(-4deg);
    }
    37% {
        transform: rotate(2deg);
    }
    39% {
        transform: rotate(-1deg);
    }
    41% {
        transform: rotate(1deg);
    }

    43% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(0);
    }
}

/* Ck editor for personal notes */
.ck.ck-content {
    min-height: 200px !important;
    max-height: 250px !important;
    overflow-y: auto;
    height: 200px !important;
}

/* MULTI SELECT DROP DOWN STYLING */
.dropdown.bootstrap-select.show-tick.form-control.selectingredient {
    background: transparent !important;
    height: 40px !important;
}

.btn.dropdown-toggle {
    display: block !important;
    width: 100% !important;
    outline: #d2d6da;
    /* padding: 0.5rem 0.75rem !important; */
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.4rem !important;
    color: #495057 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #d2d6da !important;
    appearance: none !important;
    border-radius: 0.5rem !important;
    transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
    box-shadow: none !important;
}

.btn.dropdown-toggle:focus {
    outline: #d2d6da !important;
}

.border-dotted {
    border: 1px solid black;
    border-style: dotted;
}

.border-dashed {
    border: 1px solid black;
    border-style: dashed;
}
/* =========================================== */

.btn-check:checked+.btn-outline-primary,
.btn-check:active+.btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show{
    color: #fff !important;
}
.btn-outline-primary:hover:not(.active){
    color: #5e72e4 !important;
    background-color: #fff !important;
}
.badge-success {
    color: rgb(25.8565737052, 174.1434262948, 110.5919180421);
    background-color: rgb(176.3752988048, 237.8247011952, 211.4892430279);
}
.badge-primary,
.minor {
    color: rgb(38.3744680851, 67.3671641791, 232.6255319149);
    background-color: rgb(233.7617021277, 236.4, 251.4382978723);
}
.badge-warning,
.major {
    color: rgb(255, 55.0427807487, 9);
    background-color: rgb(254.3476923077, 229.56, 223.8523076923);
}
.badge-orange {
    color: rgb(217, 43, 4);
    background-color: rgb(255, 162, 162);
}
.badge-danger,
.critical {
    color: rgb(248, 0, 49.3403141361);
    background-color: rgb(252.7345971564, 209.4654028436, 218.0739336493);
}
.badge-secondary {
    color: rgb(88.8153846154, 116.3288461538, 162.1846153846);
    background-color: rgb(228.2923076923, 231.5230769231, 236.9076923077);
}
.badge-indigo {
    color: rgb(255, 255, 255);
    /* White text */
    background-color: rgb(76, 81, 191);
    /* Rich indigo background */
}
.badge-info {
    color: rgb(0, 123, 255);
    /* Strong blue text */
    background-color: rgb(208, 235, 255);
    /* Light blue background */
}
.badge-dark {
    color: rgb(255, 255, 255);
    /* White text for contrast */
    background-color: rgb(52, 58, 64);
    /* Dark gray background */
}

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

.scroll-notification:hover {
    background-color: #e8e3e3 !important;
}

.cursor-no-drop {
    cursor: no-drop !important;
}
/* Drop down btn */
#ms-list-1>button {
    border: 1px solid #d2d6da !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.4rem !important;
}
.mutli-select-label {
    border: 1px solid #d2d6da !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.4rem !important;
}
/**
* Reminder Card Stack Animation
* ------------------------------
*/
/* .card-stack {
    position: relative;
    width: 350px;
    height: 500px;
    margin: 50px auto;
}

.stack-card {
    position: absolute;
    width: 100%;
    cursor: grab;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
}

.stack-card:active {
    cursor: grabbing;
}

.stack-card.dragging {
    transition: none;
    z-index: 1000 !important;
}

.scrollable-description {
    max-height: 120px;
    overflow-y: auto;
    padding-right: 6px;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(69, 69, 69, 0.6) transparent;
}

*/

/* Card Stack - Minimal Custom CSS */
.card-stack {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 500px;
    margin: 0 auto;
}

.stack-card {
    position: absolute;
    width: 100%;
    cursor: grab;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.stack-card:active {
    cursor: grabbing;
}

.stack-card.dragging {
    transition: none;
    z-index: 1000 !important;
}

.scrollable-description {
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.6;
}


/* Webkit scrollbar styling */
.scrollable-description::-webkit-scrollbar {
    width: 6px;
}

.scrollable-description::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable-description::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.scrollable-description::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* top and bottom fade effect */
.scrollable-description::before,
.scrollable-description::after {
    content: "";
    position: sticky;
    left: 0;
    right: 0;
    height: 20px;
    pointer-events: none;
    z-index: 2;
}

.scrollable-description::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
}

.scrollable-description::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
}
/* ---------------------------------------------------------------------- */
/* Select2 Dropdown */
.user-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 600;
    font-size: 14px;
}

.user-email {
    font-size: 12px;
    color: #6c757d;
}

.user-option.user-warning {
    background-color: #fff3cd;
    /* Bootstrap warning background */
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    padding: 4px;
}

.user-option.user-success {
    background-color: #d1e7dd;
    /* Bootstrap success background */
    border-left: 4px solid #198754;
    border-radius: 4px;
    padding: 4px;
}

.user-option.user-danger {
    background-color: #f8d7da;
    /* Bootstrap danger background */
    border-left: 4px solid #dc3545;
    border-radius: 4px;
    padding: 4px;
}

.select2-container--bootstrap-5 .select2-selection--single {
    padding: .6rem 2.25rem .375rem .75rem !important;
}

.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + .75rem + 10px) !important;
    border-radius: 10px !important;
}
/**
* Flat picker changes 
*/
.flatpickr-wrapper {
    width: 100% !important;
}