.processing img {
    width: 50px;
    margin-bottom: 1rem;
}

.processing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .1);
    backdrop-filter: blur(2px);
    /* Blur effect */
    display: flex;
    justify-content: center;
    /* Centers horizontally */
    align-items: center;
    /* Centers vertically */
    z-index: 1;
    /* Ensures the overlay is on top */
}

.processing .centered-text {
    color: #222;
    /* font-size: 24px; */
    font-weight: bold;
    text-align: center !important;
    /* Ensures text is centered in the span */
}

.col-notify {
    display: none;
    background-color: transparent;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999 !important;
    /* Ensure it appears above other content */
    left: 0;
    margin: 0;
    /* Remove any default margin */
}

.col-notify-in {
    background-color: #3d3d3d;
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 2rem;
    display: inline-block;
    /* Ensure the background color only wraps the text */
    border: 1px solid rgba(255, 255, 255, .8);
    min-width: 300px;
}

#notifyTxt {
    font-size: 16px;
    /* font-weight: bold; */
    margin: 0;
    /* Remove default margin from the paragraph */
}

.outline-none,
.outline-none:focus {
    outline: none !important;
}

.resize-none {
    resize: none;
}

.cursor-pointer {
    cursor: pointer;
}

/* For Chrome, Edge, and Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* For Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.modal-body-height {
    max-height: 77vh !important;
    overflow: auto !important;
}

/* Remove arrow for single menu item */
.accordion-button.no-arrow::after {
    display: none;
}

.submenu {
    padding-left: 20px;
    /* Adds spacing for submenu indentation */
    margin: 0;
    list-style-type: disc;
    /* Adds bullet points to submenu items */
}

.submenu li {
    margin-bottom: 8px;
    /* Spacing between submenu items */
}

.submenu .dropdown-item {
    color: #007bff;
    /* Bootstrap primary color */
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    display: block;
    transition: all 0.3s ease;
}

.submenu .dropdown-item:hover {
    background-color: #f8f9fa;
    /* Light gray hover effect */
    color: #0056b3;
    /* Darker blue for hover text */
}

/* Remove default button focus outline */
.accordion-button:focus {
    box-shadow: none;
    outline: none;
}

/* Remove focus outline for custom buttons */
.no-outline:focus {
    outline: none;
    box-shadow: none;
}

.col-xl-2 .image-container-employee,
.col-lg-3 .image-container-employee,
.col-md-4 .image-container-employee,
.col-sm-6 .image-container-employee,
.col-xl-2 .image-container-customer,
.col-lg-3 .image-container-customer,
.col-md-4 .image-container-customer,
.col-sm-6 .image-container-customer {
    height: 100%;
    /* Adjusts the container to take up the full height of the parent */
    overflow: hidden;
    /* Hides any overflow */
    position: relative;
    /* Ensures the image fits inside */
}

/* Responsive height adjustments */
@media (min-width: 1200px) {

    /* For large screens */
    .col-xl-2 .image-container-employee {
        height: 200px;
        /* Customize as needed */
    }

    .col-xl-2 .image-container-customer {
        height: 200px;
        /* Customize as needed */
    }
}

@media (min-width: 992px) and (max-width: 1199px) {

    /* For medium screens */
    .col-lg-3 .image-container-employee {
        height: 200px;
        /* Customize as needed */
    }

    .col-lg-3 .image-container-customer {
        height: 200px;
        /* Customize as needed */
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    /* For small screens */
    .col-md-4 .image-container-employee {
        height: 200px;
        /* Customize as needed */
    }

    .col-md-4 .image-container-customer {
        height: 200px;
        /* Customize as needed */
    }
}

@media (max-width: 577px) and (max-width: 767px) {

    /* For extra small screens */
    .col-sm-6 .image-container-employee {
        height: 200px;
        /* Customize as needed */
    }

    .col-sm-6 .image-container-customer {
        height: 200px;
        /* Customize as needed */
    }
}

@media (max-width: 576px) {

    /* For extra small screens */
    .col-sm-6 .image-container-employee {
        height: auto;
        /* Customize as needed */
    }

    .col-sm-6 .image-container-customer {
        height: auto;
        /* Customize as needed */
    }

    .fit-image {
        width: 100%;
        /* Full width */
        height: auto;
        /* Full height */
        object-fit: contain;
        /* Zooms and maintains aspect ratio */
        object-position: center;
        /* Centers the image */
    }
}

.fit-image {
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    object-fit: cover;
    /* Zooms and maintains aspect ratio */
    object-position: center;
    /* Centers the image */
}

.no-select {
    user-select: none;
    /* Standard for most browsers */
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Older versions of Internet Explorer */
}

.custom-coupon-card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s, box-shadow 0.3s;
}

.custom-coupon-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.custom-coupon-image-container {
    position: relative;
    overflow: hidden;
    height: 200px;
    /* Adjust as needed */
}

.custom-coupon-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    /* Ensure the image is visible but not overpowering */
}

.custom-coupon-body {
    padding: 15px;
    border-radius: 0 0 10px 10px;
}

.custom-coupon-title {
    font-size: 2rem;
}

.custom-coupon-detail {
    font-size: 1rem;
    margin-bottom: 5px;
}

.custom-coupon-footer {
    font-size: 0.95rem;
    margin-top: 10px;
}

.custom-edit-btn {
    outline: none;
    cursor: pointer;
}

.form-control-iti {
    width: 100% !important;
    /* Override any conflicting styles */
    display: block;
    /* Ensure it behaves like a block element */
}

.iti {
    width: 100% !important;
    /* Adjust the width of the intl-tel-input wrapper */
}

.iti__input {
    width: 100% !important;
    /* Ensure the input inside the wrapper takes full width */
}

.badge-lg {
    font-size: .8rem !important;
    padding: .5rem .75rem !important;
}

.badge-xl {
    font-size: 1rem !important;
    padding: .5rem .75rem !important;
}

/* Initially hide the tap-view label */
.tap-view-parent {
    cursor: pointer;
    user-select: none;
    /* Standard for most browsers */
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Older versions of Internet Explorer */
}

.tap-view-parent .tap-view-label {
    display: none;
}

/* Show the label when the parent span is clicked or tapped */
.tap-view-parent.show-label .tap-view-label {
    display: inline;
}.agreement-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }

  .agreement-popup-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    width: 60%;
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
  }
  @media screen and (max-width: 1199px) {
    .agreement-popup-content {
      width: 90%;
    }
  }