/* Your Global Styles */
:root .lpx-brand-logo {
    --lpx-logo: url('/images/logo/leptonxlite/logo-light.png');
    --lpx-logo-icon: url('/images/logo/leptonxlite/logo-light-thumbnail.png');
}

:root .abp-account-layout #lpx-wrapper .lpx-content-container {
    background-image: url('/images/login/MintAI_D_login.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 767px) {
    .lpx-mobile-navbar, .user-menu-groups, .lpx-mobile-nav-items {
        background-color: #f5f5f7 !important; /* Reset background to transparent */
    }
}

@media only screen and (max-width: 767px) {
    .user-menu-groups .btn-toggle {
        justify-content: flex-start;
        color: #011272 !important;
    }
}

.lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu,
body,
.lpx-sidebar .lpx-logo-container,
.lpx-topbar-container,
.lpx-nav-menu .lpx-menu-item-link.selected,
.lpx-sidebar {
    background-color: #f5f5f7 !important;
    color: #000 !important;
}

.lpx-nav {
    color: #000 !important;
}

/* Hover and Selected State for the Menu Item Link */
/* General menu item link styles */
.lpx-nav-menu .lpx-menu-item-link {
    color: black !important;
    background-color: transparent !important; /* Transparent default background */
    border-radius: 15px !important; /* Ensure radius is always applied */
    transition: all 0.3s ease-in-out; /* Smooth transitions for background and color */
}

    /* Hover state */
    .lpx-nav-menu .lpx-menu-item-link:hover {
        color: white !important;
        background-color: #011272 !important; /* Apply dark blue background */
        border-radius: 15px !important; /* Ensure consistent radius on hover */
    }

    /* Selected state */
    .lpx-nav-menu .lpx-menu-item-link.selected {
        color: white !important;
        background-color: #011272 !important; /* Dark blue for selected state */
        border-radius: 15px !important; /* Ensure radius remains */
        font-weight: bold; /* Emphasize selected item */
    }

    /* Icon color changes */
    .lpx-nav-menu .lpx-menu-item-link .lpx-menu-item-icon {
        color: black !important; /* Default icon color */
        transition: color 0.3s ease-in-out; /* Smooth transition for color */
    }

    .lpx-nav-menu .lpx-menu-item-link:hover .lpx-menu-item-icon,
    .lpx-menu-item-link.selected .lpx-menu-item-icon {
        color: white !important; /* Icon color changes to white */
    }

/* Adjust outer menu item spacing */
.outer-menu-item {
    margin-left: 10px !important;
    padding: 5px 0; /* Ensure consistent padding */
}

a.lpx-menu-item-link.lpx-menu-item.selected {
    background-color: #011272 !important;
    border-radius: 15px !important;
}



/* Style for the group button in DataTable.js */
.dataTables_wrapper .dropdown .btn,
.dataTables_wrapper .singel-action-style-button .btn {
    border: 2px solid #011272 !important; /* Dark blue border */
    background-color: transparent !important; /* Transparent background */
    color: #011272 !important; /* Dark blue text */
    border-radius: 25px !important; /* Rounded corners */
    padding: 8px 16px !important; /* Padding for spacing */
    font-size: 16px !important; /* Adjust font size */
    font-weight: bold !important; /* Bold text */
    display: inline-flex; /* Align content horizontally */
    align-items: center; /* Center-align text and icon */
    justify-content: center;
    transition: all 0.3s ease; /* Smooth hover effect */
}

    /* Add hover effect */
    .dataTables_wrapper .dropdown .btn:hover,
    .dataTables_wrapper .singel-action-style-button .btn:hover {
        background-color: #011272 !important; /* Dark blue background */
        color: white !important; /* White text */
    }

    /* Adjust icon spacing */
    .dataTables_wrapper .dropdown .btn i {
        margin-left: 8px; /* Add spacing between icon and text */
        margin-top: 2px; /* Aline the icon with text*/
    }

.dataTables_wrapper .dataTable_footer {
    background-color: #f5f5f7 !important;
}

/* General Pagination Style */
.dataTables_paginate .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
}

    /* Pagination Item Style */
    .dataTables_paginate .pagination .page-item {
        font-size: 16px;
        font-weight: bold;
        color: #011272; /* Dark blue */
    }

    /* Pagination Link Style */
    .dataTables_paginate .pagination .page-link {
        color: #011272; /* Dark blue */
        text-decoration: none;
        border: none;
        background: none;
        outline: none;
        padding: 0;
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        line-height: 30px;
        transition: all 0.3s ease;
    }

    /* Active Page (on click) */
    .dataTables_paginate .pagination .page-item.active .page-link {
        color: #011272; /* Blue text */
        border: 2px solid #ff007f; /* Pink border */
        border-radius: 50%;
        width: 40px; /* Larger size for active page */
        height: 40px;
        line-height: 40px;
    }

    /* Hover Effect */
    .dataTables_paginate .pagination .page-link:hover {
        color: #ff3399; /* Darker pink */
    }

    /* Disabled Items (Previous/Next when not applicable) */
    .dataTables_paginate .pagination .page-item.disabled .page-link {
        color: #ccc; /* Light gray for disabled */
        cursor: not-allowed;
    }

    /* Previous and Next Buttons */
    .dataTables_paginate .pagination .page-item.previous .page-link,
    .dataTables_paginate .pagination .page-item.next .page-link {
        font-size: 20px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: #011272; /* Dark blue */
        border-radius: 50%;
        transition: all 0.3s ease;
    }

        /* Previous and Next Hover Effect */
        .dataTables_paginate .pagination .page-item.previous .page-link:hover,
        .dataTables_paginate .pagination .page-item.next .page-link:hover {
            color: #ff007f; /* Pink */
        }
/* Styling for DataTables info */
.dataTables_info, .dataTables_length {
    color: #011272 !important; /* Dark blue color for text */
    font-size: 16px; /* Adjust font size */
    font-weight: bold; /* Make text bold */
    text-align: center; /* Center-align the text */
    margin-top: 10px; /* Add some spacing if needed */
    margin-left: 10px;
}
.table {
    --bs-table-striped-bg: var(--mint-blue-dark-color) !important;
}
.table > :not(caption) > * > * { /*fix non sort column titles*/
    background-color: transparent;
}

table.dataTable thead > tr > th {
    color: #011272 !important;
}
    /* Add hover effect to sortable table headers */
    table.dataTable thead > tr > th.sorting:hover {
        background-color: #f0f8ff !important; /* Light blue background on hover */
        color: #ff007f !important; /* Pink text color */
        cursor: pointer; /* Show pointer cursor on hover */
        transition: all 0.3s ease; /* Smooth transition for hover effect */
    }

    table.dataTable thead > tr > th.sorting:after {
        opacity: 0.5;
    }

    table.dataTable thead > tr > th.sorting.sorting_asc,
    table.dataTable thead > tr > th.sorting.sorting_desc {
        color: var(--mint-pink-color) !important;
    }
/*:root {
    --primary: #011272;*/ /* Your custom primary color */
/*--primary-hover: #0056b3;*/ /* Optional: Adjust hover effect */
/*}*/
:root {
    --bs-btn-bg: #011272 !important; /* Your custom primary color */
    --bs-primary-hover: #011272 !important; /* Optional hover color */
    --bs-link-hover-color: #ff007f !important;
    --bs-link-color: #ff007f !important;
    --mint-blue-light-color: #f0f8ff;
    --mint-blue-dark-color: #011272;
    --mint-pink-color: #ff007f;
}

    :root .nav-tabs {
        --bs-nav-tabs-link-active-color: #ff007f !important;
        background-color: transparent !important;
    }

        :root .nav-tabs .nav-item a {
            background-color: transparent !important;
        }

            :root .nav-tabs .nav-item a.active {
                background-color: var(--mint-blue-light-color) !important;
                border-bottom-color: var(--mint-blue-light-color);
            }


.btn-primary {
    --bs-btn-bg: inherit;
    --bs-primary-hover: inherit;
}

.btn-link {
    color: #011272;
}

.fancy-page-title {
    color: #011272;
    font-size: 28px;
    font-weight: bold;
}

.fancy-modal-title,
.modal .modal-header .modal-title {
    color: #011272;
    font-size: 24px;
    font-weight: bold;
}

.modal .btn-close {
    background-color: transparent; /* Transparent background */
    color: #ff007f; /* Pink icon color */
    border: 2px solid #ff007f; /* Pink border */
    font-size: 12px; /* Smaller font size for the button itself */
    width: 28px; /* Smaller width */
    height: 28px; /* Smaller height */
    border-radius: 50%; /* Fully rounded button */
    display: inline-flex; /* Flex for centering */
    align-items: center; /* Center the icon vertically */
    justify-content: center; /* Center the icon horizontally */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth transitions */
    outline: none; /* Remove default outline */
    background-image: none; /* Remove the default background image if any */
}

    /* Make the "X" even larger */
    .modal .btn-close::before {
        content: '\00d7'; /* Unicode for "X" symbol */
        font-family: Arial, sans-serif; /* Ensure compatibility for the "X" */
        color: #ff007f; /* Apply pink color to the "X" */
        font-size: 24px; /* Larger "X" size */
        line-height: 1; /* Adjust line height for proper centering */
    }

    /* Hover effect */
    .modal .btn-close:hover {
        background-color: #ff007f; /* Pink background on hover */
        color: #ffffff; /* White icon color */
        border-color: #ff3399; /* Slightly lighter pink border */
        transform: scale(1.1); /* Slight scaling on hover */
    }

        .modal .btn-close:hover::before {
            color: #ffffff; /* Make the "X" white on hover */
        }

    /* Active state */
    .modal .btn-close:active {
        background-color: #ff3399; /* Slightly lighter pink for active state */
        border-color: #ff66b2; /* Even lighter pink border */
        transform: scale(0.9); /* Slight compression effect */
    }

        .modal .btn-close:active::before {
            color: #ffffff; /* Ensure the "X" remains white */
        }

    /* Focus effect */
    .modal .btn-close:focus {
        box-shadow: 0 0 8px rgba(255, 0, 127, 0.5); /* Glowing pink shadow */
    }



.fancy-action-button,
.modal .modal-footer .btn.btn-primary,
.swal2-actions .btn.btn-primary {
    background-color: #011272; /* Deep blue background */
    color: #ffffff; /* White text */
    font-size: 18px; /* Slightly larger text */
    font-weight: bold; /* Bold text */
    padding: 12px 24px; /* Larger padding for a prominent look */
    border: none; /* No border */
    border-radius: 25px; /* Fully rounded corners */
    display: inline-flex; /* Flex for icon and text alignment */
    align-items: center; /* Vertically align icon and text */
    gap: 10px; /* Spacing between icon and text */
    cursor: pointer; /* Pointer cursor for hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    text-align: center; /* Center-align text */
    justify-content: center; /* Center-align content inside the button */
}
/* Specific style for .modal .modal-footer .btn.btn-primary */
.modal .modal-footer .btn.btn-primary,
.swal2-actions .btn.btn-primary {
    font-size: 14px; /* Smaller font size for modal button */
    padding: 8px 16px; /* Smaller padding for a compact look */
}
    /* Hover effect */
    .fancy-action-button:hover,
    .modal .modal-footer .btn.btn-primary:hover,
    .swal2-actions .btn.btn-primary:hover {
        background-color: #0056b3; /* Lighter blue on hover */
        transform: scale(1.05); /* Slight scaling on hover */
    }

    /* Focus effect */
    .fancy-action-button:focus,
    .modal .modal-footer .btn.btn-primary:focus,
    .swal2-actions .btn.btn-primary:focus {
        outline: none; /* Remove default focus outline */
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Glow effect on focus */
    }

/* Disabled state */
.fancy-action-button:disabled {
    background-color: #cccccc; /* Light gray for disabled state */
    cursor: not-allowed;
    color: #666666; /* Dimmed text color */
}

/* Icon inside the button */
.fancy-action-button .icon {
    font-size: 20px; /* Icon size slightly larger */
    display: inline-block;
    vertical-align: middle; /* Align icon vertically */
}

.modal .modal-footer .btn.btn-outline-primary,
.swal2-actions .btn.btn-outline-primary,
.modal .modal-footer .btn.btn-secondary {
    background-color: transparent; /* Transparent background */
    color: #ff007f; /* Pink text for close button */
    border: 2px solid #ff007f; /* Pink border */
    font-size: 14px; /* Compact font size */
    font-weight: bold; /* Bold text */
    padding: 8px 16px; /* Compact padding */
    border-radius: 25px; /* Rounded corners */
    display: inline-flex; /* Flex alignment */
    align-items: center; /* Vertical alignment */
    justify-content: center; /* Center-align text */
    transition: all 0.3s ease; /* Smooth transitions for hover and focus states */
    cursor: pointer; /* Pointer cursor for interactivity */
}

    /* Hover effect */
    .modal .modal-footer .btn.btn-outline-primary:hover,
    .swal2-actions .btn.btn-outline-primary:hover,
    .modal .modal-footer .btn.btn-secondary:hover {
        background-color: #ff007f; /* Pink background on hover */
        color: #ffffff; /* White text on hover */
        border-color: #ff3399; /* Slightly lighter pink border */
    }

    /* Focus effect */
    .modal .modal-footer .btn.btn-outline-primary:focus,
    .swal2-actions .btn.btn-outline-primary:focus,
    .modal .modal-footer .btn.btn-secondary:focus {
        outline: none; /* Remove default focus outline */
        box-shadow: 0 0 8px rgba(255, 0, 127, 0.5); /* Pink glow for focus */
    }

/* Media query for smaller screens */
@media only screen and (max-width: 767px) {
    .fancy-action-button span {
        display: none; /* Hide the text on smaller screens */
    }

    .fancy-action-button {
        padding: 10px; /* Reduce padding for smaller screens */
        width: 40px; /* Make the button more compact */
        height: 40px; /* Equalize width and height for a circular look */
    }

        .fancy-action-button i {
            font-size: 20px; /* Increase the size of the icon */
        }
}

/* Center the card and logo */
.mint-login-page-logo-card {
    text-align: center; /* Center-align the content */
    background-color: transparent; /* Make the card background transparent */
    border: none; /* Remove any card borders */
    box-shadow: none; /* Remove default card shadow */
    margin: 20px auto; /* Center the card horizontally with margin */
    padding: 10px; /* Add padding to space it nicely */
}

/* Style the logo */
.mint-login-page-logo {
    width: 150px; /* Set logo width */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center the image */
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); /* Add subtle shadow */
    display: block;
}

/* Base style for the button */
.fancy-mint-style-button {
    background-color: transparent; /* Transparent background */
    color: #011272; /* Dark blue text color */
    font-size: 16px; /* Text size */
    font-weight: bold; /* Bold text */
    padding: 10px 20px; /* Padding for spacing */
    border: 2px solid #ff007f; /* Pink border */
    border-radius: 25px; /* Rounded corners for pill shape */
    cursor: pointer; /* Pointer cursor for hover effect */
    text-align: center; /* Center-align text */
    transition: all 0.3s ease; /* Smooth transition */
}

    /* Hover effect */
    .fancy-mint-style-button:hover {
        background-color: #ff007f; /* Pink background on hover */
        color: #ffffff; /* White text on hover */
    }

    /* Active state */
    .fancy-mint-style-button:active {
        background-color: #ff3399; /* Slightly darker pink on click */
        color: #ffffff; /* White text */
        transform: scale(0.95); /* Slight compression on click */
    }

    /* Focus effect */
    .fancy-mint-style-button:focus {
        outline: none; /* Remove focus outline */
        box-shadow: 0 0 8px rgba(255, 0, 127, 0.5); /* Glow effect */
    }