/* Change color for Select2 option being highlighted (mouseover) */
.select2-results__option--highlighted[aria-selected] {
    /* Darker background for highlighted item */
    background-color: #555 !important;
    color: #fff !important;
}

/* Adjust select2 dropdown to fit dark theme */
.select2-container--default .select2-results>.select2-results__options {
    background-color: #333;
    color: #ddd;
}

/* Adjust the select2 search within dropdown input box to fit dark theme */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #333;
    color: #ddd;
    border-color: #444;
}

/* Adjust the border and text color of the select2 box itself */
.select2-container--default .select2-selection--single {
    border-color: #444;
    color: #ddd;
}

/* Adjust the border and text color of the select2 dropdown */
.select2-dropdown {
    border-color: #444;
    color: #ddd;
}

/* Adjust the text color of the select2 results */
.select2-container--default .select2-results__option {
    color: #ddd;
}

/* Your existing styles */
body {
    /* Dark background color */
    background-color: #282c35;
    /* Light text color */
    color: #ffffff;
}


/* Add these styles to customize the Date Range Filter */
.daterangepicker {
    /* Black background color */
    background-color: #000000 !important;
    /* White text color */
    color: #ffffff;
}

.daterangepicker .calendar-table {
    color: #555555;
}

.daterangepicker .calendar-time {
    /* Black background color for time selection */
    background-color: #000000 !important;
}

.daterangepicker .daterangepicker_input {
    /* Black background color for input */
    background-color: #000000 !important;
    /* White text color for input */
    color: #ffffff !important;
}

.daterangepicker .daterangepicker_input input {
    /* Border color for input */
    border-color: #555555 !important;
}

.daterangepicker .ranges li.active {
    /* Darker background color for active range */
    background-color: #555555 !important;
}

.daterangepicker .ranges li:hover {
    /* Dark background color for hover effect */
    background-color: #444444 !important;
}

.daterangepicker .ranges li.active::before {
    /* Border color for active range indicator */
    border-bottom-color: #555555 !important;
}

.daterangepicker .applyBtn,
.daterangepicker .cancelBtn {
    /* Dark background color for buttons */
    background-color: #555555 !important;
    /* White text color for buttons */
    color: #ffffff !important;
}

.daterangepicker .applyBtn:hover,
.daterangepicker .cancelBtn:hover {
    /* Darker background color for button hover effect */
    background-color: #444444 !important;
}


.subcategory-select {
    background-color: black;
    /* Set the text color to white for better visibility */
    color: white;
}


.c3-tooltip-container {
    background-color: darkgray !important;
    color: white !important;
}

.transaction_edit_filter {
    display: flex;
    align-items: center;
}

.spacer-label {
    /* Adjust the padding as needed */
    padding: 0 10px;
}

#transactionTable_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}







/*css needed for line chart */



/* Container for the line chart */
.line-chart-container {
    position: relative;
    width: 80%;
    max-width: 1000px; /* Limit the maximum width for larger screens */
    margin: 20px auto; /* Center the chart with some margin */
    padding: 20px; /* Add padding for the glow effect */
    height: auto; /* Let the height adjust based on content */
    box-sizing: border-box;
}

/* Chart wrapper for the glowing border and perspective */
.line-chart-wrap {
    --radius: 20px;
    --perspective: 800px;
    position: relative;
    border-radius: var(--radius);
    perspective: var(--perspective);
    transform-style: preserve-3d;
    padding: 5px; /* Space for the glowing border */
    overflow: hidden; /* Prevent the border from spilling out */
}

/* Glowing gradient border for the line chart */
.line-chart-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ffd867, #ec526b, #ffd867, #ec526b);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: gradientBorder 5s linear infinite;
}

/* Keyframes for the glowing border animation */
@keyframes gradientBorder {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Subtle shadow beneath the chart */
.line-chart-wrap::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 
        0 60px 140px 30px rgba(0, 0, 0, 0.8),
        0 -60px 120px rgba(102, 106, 135, 0.4);
    filter: blur(5px);
    z-index: -2;
}

/* Glow effect for the line chart */
.line-chart-glow {
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    inset: 0;
    z-index: 3;
    overflow: hidden;
}

/* Chart card with gradient background */
.line-chart-card {
    position: relative;
    padding: 20px;
    border-radius: inherit;
    background: var(--container-background);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.7), inset 0 0 3px rgba(255, 255, 255, 0.1);
    transition: transform 0.3s cubic-bezier(0.03, 1, 0.5, 1);
    transform-style: preserve-3d;
    z-index: 2;
}

/* Ensure the canvas fits properly */
#lineChartCanvas {
    width: 100% !important;
    height: 400px !important; /* Set a fixed height for consistency */
    display: block;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .line-chart-container {
        width: 100%;
        padding: 10px;
    }

    #lineChartCanvas {
        height: 300px !important; /* Smaller height for mobile */
    }
}





/*css needed for Bar chart */


/* Container for the bar chart */
.bar-chart-container {
    position: relative;
    width: 80%;
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
    height: auto;
    box-sizing: border-box;
    background: none !important; /* Ensure no background override */
}

/* Chart wrapper for the glowing border and perspective */
.bar-chart-wrap {
    --radius: 20px;
    --perspective: 800  --radius: 20px;
    --perspective: 800px;
    position: relative;
    border-radius: var(--radius);
    perspective: var(--perspective);
    transform-style: preserve-3d;
    padding: 5px;
    overflow: hidden;
    z-index: 1; /* Ensure the wrapper is above other elements */
}

/* Glowing gradient border for the bar chart */
.bar-chart-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ffd867, #ec526b, #ffd867, #ec526b); /* Match the line chart */
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: gradientBorder 5s linear infinite;
}

/* Subtle shadow beneath the chart */
.bar-chart-wrap::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 
        0 60px 140px 30px rgba(0, 0, 0, 0.8),
        0 -60px 120px rgba(102, 106, 135, 0.4);
    filter: blur(5px);
    z-index: -2;
}

/* Chart card with gradient background */
.bar-chart-card {
    position: relative;
    padding: 20px;
    border-radius: inherit;
    background: var(--container-background);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.7), inset 0 0 3px rgba(255, 255, 255, 0.1);
    transition: transform 0.3s cubic-bezier(0.03, 1, 0.5, 1);
    transform-style: preserve-3d;
    z-index: 2;
}

/* Ensure the bar chart fits properly */
#bar_chart {
    width: 100% !important;
    height: 400px !important;
}

/* Update axis labels and ticks */
#bar_chart .c3-axis-x-label,
#bar_chart .c3-axis-y-label,
#bar_chart .c3-axis-x .tick text,
#bar_chart .c3-axis-y .tick text {
    fill: var(--text-color);
    font-size: 12px !important; /* Adjust font size as needed */
    font-weight: bold;

}

/* Style the tooltip for a polished look */
#bar_chart .c3-tooltip {
    background-color: #2e2e4e;
    border: 1px solid #4CAF50;
    border-radius: 5px;
    opacity: 0.9;
}

#bar_chart .c3-tooltip tr {
    color: #E0E0E0;
}

#bar_chart .c3-tooltip th {
    background-color: #4CAF50;
    color: #E0E0E0;
    padding: 2px 5px;
}

#bar_chart .c3-tooltip td {
    padding: 2px 5px;
}


/* Styles for the bar chart data labels */
#bar_chart .c3-chart-texts .c3-text {
    fill: var(--text-color); /* Set font color */
    font-size: 12px !important; /* Adjust font size as needed */
    font-weight: bold;

}

/* Styles for the bar chart bars */
#bar_chart .c3-bar {
    opacity: 0.8; /* Adjust opacity as needed */
}


.c3-tooltip-container {
    background-color: var(--container-background);
    color: var(--text-color);
}

/* Styles for the C3.js tooltip */
.c3-tooltip-container table td.value {
    color: var(--text-color); /* Set font color */
    font-weight: bold;
    font-size: 10px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .bar-chart-container {
        width: 100%;
        padding: 10px;
    }

    #bar_chart {
        height: 300px !important;
    }
}




  

/*css needed for Transaction Table */


.sb-table-container {
    margin: 20px auto;
    width: 95%; /* Increased width to prevent overflow */
}

/* Desktop Styles for transactionTable */
.transaction-table-container {
    margin: 20px auto;
    width: 95%; /* Increased width to prevent overflow */
}

.transaction-table {
    width: 100%; /* Ensure table takes full width of container */
    table-layout: fixed; /* Force table layout to fit container */
}


.transaction-table th {
    background: var(--table-header-background);
    color: var(--table-header-text-color) !important;
}


.transaction-table td {
    border: none;
    border-bottom: 1px solid var(--table-border-color);
}

.transaction-table .re-categorize-button {
    background: linear-gradient(90deg, #ff6f61, #ff8a65);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.transaction-table .re-categorize-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 111, 97, 0.4);
}

.transaction-table .split-button {
    background: linear-gradient(90deg, #4dd0e1, #81d4fa);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.transaction-table .split-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(77, 182, 172, 0.4);
}

/* Hide mobile view on desktop */
.transaction-table-mobile-container {
    display: none;
}

/* Mobile Styles */
@media (max-width: 768px) {
    /* Hide desktop table on mobile */
    .transaction-table-container {
        display: none;
    }

    /* Show mobile view */
    .transaction-table-mobile-container {
        display: block;
        margin: 20px auto;
        width: 90%;
    }

    /* Card styling */
    .transaction_details_card {
        background-color: var(--container-background);
        border-radius: 8px;
        margin: 10px 0;
        padding: 15px;
        color: var(--text-color);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .transaction_details_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .transaction_details_info {
        flex-grow: 1;
    }

    .transaction_details_amount_container {
        display: flex;
        flex-direction: column; /* Stack amount and status vertically */
        align-items: flex-end; /* Right-align items within this container */
    }

    .transaction_details_payee {
        font-size: 16px;
        font-weight: bold;
        display: block;
    }

    .transaction_details_date {
        font-size: 12px;
        color: #aaa;
    }

    .transaction_details_amount {
        font-size: 16px;
        font-weight: bold;
        display: block;
    }

    .transaction_details_status {
        font-size: 12px;
        color: #00cc00;
        cursor: pointer;
    }

    .transaction_details_body {
        margin-top: 10px;
    }

    .transaction_details_field {
        margin: 5px 0;
    }

    .transaction_details_label {
        font-weight: bold;
        color: #aaa;
    }

    .transaction_details_reCategorizeButton,
    .transaction_details_splitButton {
        background: linear-gradient(90deg, #ff6f61, #ff8a65);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 500;
        margin: 5px 0;
    }

    .transaction_details_splitButton {
        background: linear-gradient(90deg, #4dd0e1, #81d4fa);
    }

    .transaction_details_reCategorizeButton:hover,
    .transaction_details_splitButton:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 111, 97, 0.4);
    }

    .transaction_details_splitButton:hover {
        box-shadow: 0 4px 12px rgba(77, 182, 172, 0.4);
    }
}




/*css needed for Add Transaction popup */
/* Popup Overlay */
#addTransactionPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Popup Content */
#addTransactionPopup .popup-content {
    background: #1e1e2f;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    color: #e0e7ff;
}

/* Popup Header */
#addTransactionPopup .popup-header {
    margin-bottom: 20px;
}

#addTransactionPopup .popup-header h2 {
    margin: 0;
    font-size: 20px;
    color: #61dafb;
}

#addTransactionPopup .popup-header p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #aaa;
}

#addTransactionPopup .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: #e0e7ff;
    cursor: pointer;
}

/* Form Styles */
#addTransactionForm .form-group {
    margin-bottom: 15px;
}

#addTransactionForm .form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #fdfdfd;
}

#addTransactionForm .form-group input,
#addTransactionForm .form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #444;
    border-radius: 4px;
    background: #2a2a3d;
    color: #e0e7ff;
    font-size: 14px;
}

#addTransactionForm .form-actions {
    display: flex;
    justify-content: space-between;
}

#addTransactionForm .btn {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#addTransactionForm .btn-primary {
    background: #61dafb;
    color: #1e1e2f;
}

#addTransactionForm .btn-secondary {
    background: #444;
    color: #e0e7ff;
}



/* Popup Overlay */
#splitTransactionPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Popup Content */
#splitTransactionPopup .popup-content {
    background: #1e1e2f;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    color: #e0e7ff;
}

/* Form Styles */
#splitTransactionForm .form-group {
    margin-bottom: 15px;
}

#splitTransactionForm .form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #f5f3f3;
}

#splitTransactionForm .form-group input,
#splitTransactionForm .form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #444;
    border-radius: 4px;
    background: #2a2a3d;
    color: #e0e7ff;
    font-size: 14px;
}

#splitTransactionForm .form-actions {
    display: flex;
    justify-content: space-between;
}

#splitTransactionForm .btn {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#splitTransactionForm .btn-primary {
    background: #61dafb;
    color: #1e1e2f;
}

#splitTransactionForm .btn-secondary {
    background: #444;
    color: #e0e7ff;
}








/*--------------------------------------------------------------
# Income vs. Expense Chart Styles
--------------------------------------------------------------*/

/* Container for the income vs. expense chart */
.income-expense-chart-container {
    position: relative;
    width: 80%;
    max-width: 1000px; /* Limit the maximum width for larger screens */
    margin: 20px auto; /* Center the chart with some margin */
    padding: 20px; /* Add padding for the glow effect */
    height: auto; /* Let the height adjust based on content */
    box-sizing: border-box;
}

/* Chart wrapper for the glowing border and perspective */
.income-expense-chart-wrap {
    --radius: 20px;
    --perspective: 800px;
    position: relative;
    border-radius: var(--radius);
    perspective: var(--perspective);
    transform-style: preserve-3d;
    padding: 5px; /* Space for the glowing border */
    overflow: hidden; /* Prevent the border from spilling out */
}

/* Glowing gradient border for the income vs. expense chart */
.income-expense-chart-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ffd867, #ec526b, #ffd867, #ec526b);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: gradientBorder 5s linear infinite;
}

/* Subtle shadow beneath the chart */
.income-expense-chart-wrap::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow:
        0 60px 140px 30px rgba(0, 0, 0, 0.8),
        0 -60px 120px rgba(102, 106, 135, 0.4);
    filter: blur(5px);
    z-index: -2;
}

/* Chart card with gradient background */
.income-expense-chart-card {
    position: relative;
    padding: 20px;
    border-radius: inherit;
    background: linear-gradient(to bottom, #201c29 40%, #37374b 100%);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.7), inset 0 0 3px rgba(255, 255, 255, 0.1);
    transition: transform 0.3s cubic-bezier(0.03, 1, 0.5, 1);
    transform-style: preserve-3d;
    z-index: 2;
}

/* Ensure the canvas fits properly */
#incomeExpenseChartCanvas {
    width: 100% !important;
    height: 400px !important; /* Set a fixed height for consistency */
    display: block;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .income-expense-chart-container {
        width: 100%;
        padding: 10px;
    }

    #incomeExpenseChartCanvas {
        height: 300px !important; /* Smaller height for mobile */
    }
}






/* -------------------------------------------------------------
# Net Cash Flow Chart Styles
-------------------------------------------------------------- */

/* Container for the Net Cash Flow chart */
.net-cashflow-chart-container {
    position: relative;
    width: 80%;
    max-width: 1000px; /* Limit the maximum width for larger screens */
    margin: 20px auto; /* Center the chart with some margin */
    padding: 20px; /* Add padding for the glow effect */
    height: auto; /* Let the height adjust based on content */
    box-sizing: border-box;
}

/* Chart wrapper for the glowing border and perspective */
.net-cashflow-chart-wrap {
    --radius: 20px;
    --perspective: 800px;
    position: relative;
    border-radius: var(--radius);
    perspective: var(--perspective);
    transform-style: preserve-3d;
    padding: 5px; /* Space for the glowing border */
    overflow: hidden; /* Prevent the border from spilling out */
}

/* Glowing gradient border for the Net Cash Flow chart */
.net-cashflow-chart-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ffd867, #ec526b, #ffd867, #ec526b);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: gradientBorder 5s linear infinite;
}

/* Subtle shadow beneath the chart */
.net-cashflow-chart-wrap::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 60px 140px 30px rgba(0, 0, 0, 0.8), 0 -60px 120px rgba(102, 106, 135, 0.4);
    filter: blur(5px);
    z-index: -2;
}

/* Chart card with gradient background */
.net-cashflow-chart-card {
    position: relative;
    padding: 20px;
    border-radius: inherit;
    background: linear-gradient(to bottom, #201c29 40%, #37374b 100%);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.7), inset 0 0 3px rgba(255, 255, 255, 0.1);
    transition: transform 0.3s cubic-bezier(0.03, 1, 0.5, 1);
    transform-style: preserve-3d;
    z-index: 2;
}

/* Ensure the canvas fits properly */
#netCashFlowChartCanvas {
    width: 100% !important;
    height: 400px !important; /* Set a fixed height for consistency */
    display: block;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .net-cashflow-chart-container {
        width: 100%;
        padding: 10px;
    }

    #netCashFlowChartCanvas {
        height: 300px !important; /* Smaller height for mobile */
    }
}








/* -------------------------------------------------------------
# Spending Trend Chart Styles
-------------------------------------------------------------- */

/* Container for the Spending Trend chart */
.spending-trend-chart-container {
    position: relative;
    width: 80%;
    max-width: 1000px; /* Limit the maximum width for larger screens */
    margin: 20px auto; /* Center the chart with some margin */
    padding: 20px; /* Add padding for the glow effect */
    height: auto; /* Let the height adjust based on content */
    box-sizing: border-box;
}

/* Chart wrapper for the glowing border and perspective */
.spending-trend-chart-wrap {
    --radius: 20px;
    --perspective: 800px;
    position: relative;
    border-radius: var(--radius);
    perspective: var(--perspective);
    transform-style: preserve-3d;
    padding: 5px; /* Space for the glowing border */
    overflow: hidden; /* Prevent the border from spilling out */
}

/* Glowing gradient border for the Spending Trend chart */
.spending-trend-chart-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ffd867, #ec526b, #ffd867, #ec526b);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: gradientBorder 5s linear infinite;
}

/* Subtle shadow beneath the chart */
.spending-trend-chart-wrap::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 60px 140px 30px rgba(0, 0, 0, 0.8), 0 -60px 120px rgba(102, 106, 135, 0.4);
    filter: blur(5px);
    z-index: -2;
}

/* Chart card with gradient background */
.spending-trend-chart-card {
    position: relative;
    padding: 20px;
    border-radius: inherit;
    background: linear-gradient(to bottom, #201c29 40%, #37374b 100%);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.7), inset 0 0 3px rgba(255, 255, 255, 0.1);
    transition: transform 0.3s cubic-bezier(0.03, 1, 0.5, 1);
    transform-style: preserve-3d;
    z-index: 2;
}

/* Ensure the canvas fits properly */
#spendingTrendChartCanvas {
    width: 100% !important;
    height: 400px !important; /* Set a fixed height for consistency */
    display: block;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .spending-trend-chart-container {
        width: 100%;
        padding: 10px;
    }

    #spendingTrendChartCanvas {
        height: 300px !important; /* Smaller height for mobile */
    }
}



@media (max-width: 768px) {
    .mobile-header-logo .nav-icon {
      display: none;
    }
  }
/* Styles for the Add Transaction button */
#addTransactionButton {
    border: none;
    width: 10em; /* Reduced width */
    height: 3em; /* Reduced height */
    border-radius: 2em; /* Adjusted border-radius */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Reduced gap */
    background: #3a404c; /* Changed background color */
    cursor: pointer;
    transition: all 450ms ease-in-out;
    margin: 20px auto; /* Center the button and add margin */

   font-weight: 600;
   color: white;
   font-size: small;

}

#addTransactionButton:hover {
    background: linear-gradient(0deg,#A47CF3,#683FEA);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
    inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 4px rgba(255, 255, 255, 0.2),
    0px 0px 180px 0px #9917FF;
    transform: translateY(-2px);
    color: white;
}