.scrollable-div {
    height: 800px;
    overflow-y: auto; /* scrollbar always visible */
    overflow-x: hidden;
}
/* Chrome, Edge, Safari */
.scrollable-div-div::-webkit-scrollbar {
    width: 10px; /* scrollbar width */
}

.scrollable-div::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
}

.scrollable-div::-webkit-scrollbar-thumb {
    background: #888; /* thumb color */
    border-radius: 5px;
}

    .scrollable-div::-webkit-scrollbar-thumb:hover {
        background: #555; /* thumb on hover */
    }

/* Firefox */
.scrollable-div {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #888 #f1f1f1; /* thumb track */
}

.disabled-div {
    pointer-events: none; /* prevents clicks */
    opacity: 0.6; /* looks disabled */
    user-select: none; /* prevents text selection */
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button:visited,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate a,
.dataTables_wrapper .dataTables_paginate span {
    font-size: 14px !important; /* lock size */
    line-height: 1.2 !important; /* prevent growth */
}

@media print {
    .col-xl-3 {
        display: inline-block;
        width: 24%; /* This ensures 4 columns fit in one row (100% / 4 columns = 25%, adjust to 24% for spacing) */
        vertical-align: top;
        margin-right: 1%; /* Optional: Adds small space between columns */
    }

        .col-xl-3:last-child {
            margin-right: 0; /* Remove margin from the last column */
        }

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

    .table-responsive {
        margin-top: 15px;
    }
}

.card-body.accounting-style {
    border-left: 5px solid #23b7e5; /* green accent for finance */
}

.car-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

#movingCar {
    position: absolute;
    width: 80px;
    transition: transform 0.1s linear;
    transform-origin: center center;
    z-index: 20;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
}

#smokeContainer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
}

.smoke {
    position: absolute;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, rgba(100, 100, 100, 0.6) 0%, transparent 70%);
    opacity: 0.6;
    border-radius: 50%;
    animation: smokeFade 1.5s forwards ease-out;
}


@keyframes smokeFade {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.textSearchEnglish {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    height: 38px !important;
}
.textSearchArabic {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    height: 40px !important;
}
.buttonSearchEnglish {
    margin-left: 0px !important;
    margin-right: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important
}
.buttonSearchArabic {
    margin-left: 0px !important;
    margin-right: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important
}

.logo-circle-bg {
    width: 40px; /* Adjust to fit your image size */
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, #42b9de 0%, #42b9de00 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin-right: 0px;
}

    .logo-circle-bg img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 50%; /* optional if your image has corners */
    }



#header-notification-scroll {
    max-height: 300px; /* or any height that fits your design */
    overflow-y: auto;
}
.divBorder {
    border-top-style: none !important;
    border-left-style: none !important;
    border-right-style: none !important;
}

.fading-border {
    -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Light border (white with transparency) */
    border-radius: 12px; /* Rounded corners */
    overflow: hidden; /* Optional: hide anything outside the rounded border */
}
#myTab1 .nav-link {
    pointer-events: none;
}

.image-container {
    position: relative; /* Make this container the reference for positioning */
}

.image-container-bg {
    display: flex;
    justify-content: center; /* Horizontally center the image */
    align-items: center; /* Vertically center the image */
    width: 100%; /* You can adjust the width of the container as needed */
    height: 70vh; /* Adjust the height if needed (this example sets it to full viewport height) */
    overflow: hidden; /* To prevent the image from overflowing if larger than the container */
}

image-container-bg img {
    width: auto; /* Keep the original width */
    height: auto; /* Keep the original height */
}

.disabled {
    pointer-events: none; /* Prevents clicking */
    color: gray; /* Change text color */
    text-decoration: none; /* Remove underline */
}

.cloud-background {
    /*position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/images/homeBG.jpg');
    background-size: cover;
    background-position: center;
    clip-path: polygon( 0% 30%, 5% 5%, 30% 0%, 50% 5%, 70% 0%, 95% 5%, 100% 30%, 100% 100%, 95% 95%, 70% 100%, 50% 95%, 30% 100%, 5% 95% );
    overflow: hidden;
    animation: fadeEffect 15s infinite;*/ /* Fade effect every 10 seconds */
}

@keyframes fadeEffect {
    0%, 100% {
        opacity: 1; /* Fully visible */
    }

    50% {
        opacity: 0.3; /* 70% transparent */
    }
}

.star {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8); /* Star color */
    animation: twinkle 1.5s infinite;
}

@keyframes twinkle {
    0%, 100% {
        transform: scale(1); /* Original size */
        opacity: 0.5; /* Slightly visible */
    }

    50% {
        transform: scale(1.5); /* Slightly larger */
        opacity: 1; /* Fully visible */
    }
}

/* Overlay style */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Black with 50% transparency */
    z-index: 1; /* Ensure it's on top */
}

.topZIndex {
    z-index: 2 !important;
}

.topZIndexTwo {
    z-index: 3 !important;
}

.left-Padding-20 {
    padding-left: 20px !important;
}

.bottom-Padding-10 {
    padding-bottom: 10px !important;
}

.margin-Left-35 {
    margin-left: 35px !important;
}

.margin-Right-35 {
    margin-right: 35px !important;
}

.margin-Padding-20 {
    margin-bottom: 20px !important;
}

.left-Padding-10 {
    padding-left: 10px !important;
}

.right-Padding-10 {
    padding-right: 10px !important;
}

.right-Padding-20 {
    padding-right: 20px !important;
}

.top-Padding-20 {
    padding-top: 20px !important;
}

.bottom-Padding-20 {
    padding-bottom: 20px !important;
}

.bottom-Padding-40 {
    padding-bottom: 40px !important;
}

.top-Padding-40 {
    padding-top: 40px !important;
}

.top-Padding-10 {
    padding-top: 10px !important;
}

.top-Padding-5 {
    padding-top: 5px !important;
}

.top-Padding-0 {
    padding-top: 0px !important;
}

.loading-overlay {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 999; /* Ensure it covers the entire page */
}

.loading-spinner {
    display: none; /* Initially hidden */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050; /* Ensure it is above other content */
}

/* Modal Container */
.modal-container {
    position: relative;
    width: 90%;
    max-width: 500px; /* Adjust width as needed */
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

/* Ensure content within the modal is centered */
.text-center {
    text-align: center;
}

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


#loading {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
}

#loadingcontent {
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#loadingspinner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: center;
    font-size: larger;
    padding-top: 80px;
}

.splitter {
    width: 1px;
    height: 22px;
    background-color: #ccc;
    margin: 0 10px;
    margin-top: 21px;
}

.splitter2 {
    width: 4px !important;
    max-width: 4px !important;
    height: 100%;
    background: linear-gradient(to top, #f0f1f7, #ffffff), linear-gradient(to bottom, #f0f1f7, #ffffff);
    background-repeat: no-repeat;
    background-size: 3px 100%, 3px 100%;
    margin: 0 10px;
    margin-bottom: 21px !important;
}

.background-cover-left {
    height: 630px !important; /* Adjust height as needed */
    width: 100%;
    background-image: url('../../assets/images/bg1.jfif'); /* Replace with your image URL */
    background-size: cover; /* Make the image cover the entire div */
    background-position: left; /* Center the image */
    background-repeat: no-repeat; /* Prevent image from repeating */
}

.background-cover-right {
    height: 630px !important; /* Adjust height as needed */
    width: 100%;
    background-image: url('../../assets/images/bg1RTL.jfif'); /* Replace with your image URL */
    background-size: cover; /* Make the image cover the entire div */
    background-position: left; /* Center the image */
    background-repeat: no-repeat; /* Prevent image from repeating */
}

.link-offset-Language {
    color: white; /* Default text color */
    transition: opacity 0.3s; /* Smooth transition */
    text-decoration: none;
}

    .link-offset-Language:hover {
        opacity: 0.6; /* Change opacity on hover */
        color: white; /* Default text color */
        text-decoration: none;
    }



.input-group {
    display: flex;
    align-items: center;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 40vw; /* Image covers 30% of width */
    height: 40vh; /* Image covers 30% of height */
    background: url('../../assets/images/bg4Transparent.png') no-repeat center;
    background-size: cover;
    /* Clipping the image into a curved shape */
    clip-path: ellipse(90% 80% at top left);
    -webkit-mask-image: radial-gradient(circle at top left, rgba(240, 241, 247, 1) 40%, rgba(240, 241, 247, 0) 90%);
    mask-image: radial-gradient(circle at top left, rgba(240, 241, 247, 1) 40%, rgba(240, 241, 247, 0) 90%);
}