.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.form-control-dark {
    color: #fff;
    background-color: var(--bs-dark);
    border-color: var(--bs-gray);
}

    .form-control-dark:focus {
        color: #fff;
        background-color: var(--bs-dark);
        border-color: #fff;
        box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
    }

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

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

.dropdown-toggle {
    outline: 0;
}


/* Make submenu hidden by default */
/*.sub-product {
    display: none;
    position: absolute;
    top: 0;
    z-index: 1000;
    left: 100%;*/ /* Position to the right of the parent item */
/*}*/

/* Display submenu on hover */
/*.dropdown-submenu:hover .sub-product {
    display: block;
}*/

/* Adjust submenu for larger screens if it is close to the right edge */
/*@media (min-width: 992px) {*/
    /* If there's enough space on the right, it will show to the right by default */
    /*.dropdown-submenu {
        position: relative;
    }
}*/

/* For mobile screens (or smaller screens) */
/*@media (max-width: 768px) {
    .sub-product {
        left: 0;*/ /* Make it show below the parent on mobile */
        /*top: 100%;
    }
}*/

/* Adjust submenu positioning if it goes off-screen on the right */
/*.dropdown-submenu {
    position: relative;
}*/

    /* For situations when the submenu would go off-screen on the right, position it to the left */
    /*.dropdown-submenu.left-side .sub-product {
        left: auto;
        right: 100%;*/ /* Position it to the left of the parent item */
    /*}*/


/*Date 30032025 Comments*/
/* Make submenu hidden by default */
/*.sub-product {
    display: none;
    position: absolute;
    top: 0;
    z-index: 1000;
    left: 100%;*/ /* Position to the right of the parent item by default */
/*}*/

/* Display submenu on hover (for larger screens) */
/*.dropdown-submenu:hover .sub-product {
    display: block;
}*/

/* Adjust submenu for larger screens if it is close to the right edge */
/*@media (min-width: 992px) {
    .dropdown-submenu {
        position: relative;
    }*/

        /* If there's enough space on the right, the submenu will show to the right by default */
        /*.dropdown-submenu.left-side .sub-product {
            left: 100%;
            right: 100%;*/ /* Position it to the left of the parent item */
        /*}
}*/

/* For mobile screens (or smaller screens) */
/*@media (max-width: 768px) {
    .sub-product {
        left: 100%;*/ /* Make it show below the parent on mobile */
        /*top: 100%;*/ /* Position it just below the parent */
        /*width: 100%;*/ /* Optional: to make it full width */
    /*}*/

    /* Ensures that when submenu is on mobile, it stays within view */
    /*.dropdown-submenu {
        position: relative;
    }
}*/

/* Additional adjustment to ensure the submenu is positioned correctly on the left for some cases */
/*.dropdown-submenu.left-side .sub-product {
    left: 100%;
    right: 100%;*/ /* Position it to the left of the parent item */
/*}*/

/*Date 30032025*/

/* Main menu styles */
.dropdown-menu {
    background-color: #343a40; /* Set main menu background to dark gray */
    color: white; /* Set text color to white */
    border-radius: 4px; /* Optional: Add rounded corners for the dropdown */
}

    /* Main menu item styles */
    .dropdown-menu .dropdown-item {
        color: white; /* Ensure the item text is white */
    }

        /* Main menu item hover effect */
        .dropdown-menu .dropdown-item:hover {
            background-color: #495057; /* Darker gray on hover */
            color: white; /* Keep text white on hover */
        }

/* Make submenu hidden by default */
.sub-product {
    display: none;
    position: absolute;
    top: 0;
    z-index: 1000;
    left: 100%; /* Position to the right of the parent item by default */
    background-color: #212529; /* Set submenu background to darker gray */
    color: white; /* Set font color to white */
    border-radius: 4px; /* Optional: Add border radius for rounded corners */
}

/* Display submenu on hover (for larger screens) */
.dropdown-submenu:hover .sub-product {
    display: block;
}

/* Adjust submenu for larger screens if it is close to the right edge */
@media (min-width: 992px) {
    .dropdown-submenu {
        position: relative;
    }

        /* If there's enough space on the right, the submenu will show to the right by default */
        .dropdown-submenu.left-side .sub-product {
            left: 100%;
            right: 100%; /* Position it to the left of the parent item */
        }
}

/* For mobile screens (or smaller screens) */
@media (max-width: 768px) {
    .sub-product {
        left: 0; /* Position it below the parent on mobile */
        top: 100%; /* Position it just below the parent */
        width: 100%; /* Optional: make it full width */
        position: static; /* Remove absolute positioning for mobile */
        background-color: #212529; /* Set submenu background to darker gray on mobile */
        color: white; /* Set font color to white on mobile */
    }

    /* Ensure that when submenu is on mobile, it stays within view */
    .dropdown-submenu {
        position: relative;
    }

        /* Display submenu on click for mobile (instead of hover) */
        .dropdown-submenu .dropdown-item:focus + .sub-product,
        .dropdown-submenu .dropdown-item:active + .sub-product {
            display: block;
        }
}

/* Additional adjustment to ensure the submenu is positioned correctly on the left for some cases */
.dropdown-submenu.left-side .sub-product {
    left: 100%;
    right: 100%; /* Position it to the left of the parent item */
}

/* Optional: Adjust dropdown item color for submenu */
.sub-product .dropdown-item {
    color: white; /* Ensure the submenu item text is white */
}

    /* Optional: Hover effect for submenu items */
    .sub-product .dropdown-item:hover {
        background-color: #495057; /* Darker background on hover for submenu */
        color: white; /* Keep text white on hover */
    }