.icon-xl {
    width: 100px;
    height: 100px;
}

.copy-icon, .payment {
    font-size: 24px; /* Adjust icon size */
    cursor: pointer; /* Change cursor to hand */
    position: relative;
    z-index: 10;
}

.payment, .productList {
    position: relative;
    cursor: pointer;
    width: 18em%;
}

    .payment:hover, .productList:hover {
        background-color: #d9d4d4;
    }

    .payment.selected::after {
        content: '\2713'; /* Unicode for checkmark */
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 20px;
        color: green;
        font-weight: bold;
    }

    .payment.selected {
        background-color: #e5e0fb; /* Keep selected background */
        border-color: #007eff; /* Keep selected border */
    }

#tblPaymentDtl tr.selected::after {
    content: '\2713'; /* Unicode checkmark */
    font-size: 20px;
    color: green;
    position: absolute;
    top: 5px;
    right: 10px;
}
#tblPaymentDtl tr.selected {
    background-color: #e5e0fb; /* Highlight selected row */
}


#tblPaymentDtl tr {
    position: relative; /* Needed for absolute positioning */
    cursor: pointer;
    padding: 100px;
    border-radius: 100px;
}

.img-product-checkout {
    height: 50vh; /* 50% of viewport height */
    width: 100%; /* Full width of container */
    object-fit: cover; /* Crop image to fit, preserving aspect ratio */
}
/* Optional: Adjust for smaller screens */
@media (max-width: 768px) {
    .img-product-checkout {
        height: 30vh; /* Smaller height on mobile */
    }
}

.img-payment-checkout {
    height: 8vh; /* 50% of viewport height */
    padding:10px;
    object-fit: cover; /* Crop image to fit, preserving aspect ratio */
}
/* Optional: Adjust for smaller screens */
@media (max-width: 768px) {
    .img-payment-checkout {
        width: 40%;
        height: 10vh; /* Smaller height on mobile */
    }
}
@media (max-width: 575.98px) {
    .img-payment-checkout {
        width: 40%; /* Full width of container */
        max-height: 40vh
    }
}


@media (max-width: 575.98px) {
    .screen-payment-img  {
        width: 40%; /* Full width of container */
        height: 5vh; /* Even smaller for very small screens */
    }
}

@media (max-width: 575.98px) {
    .dashboardImg {
        width: 100%; /* Full width of container */
        max-height: 50vh
    }
}

@media (max-width: 575.98px) {
    .dash-img {
        width: 100%; /* Full width of container */
        max-height: 40vh
    }
}