:root {
    --bs-primary: #6372E3;
    --bs-primary-rgb: 99, 114, 227;
}

#budget-pacing > div.js-plotly-plot > div > div > svg > g.cartesianlayer > g > g.plot > g > g > g > g > path {
    clip-path: inset(0% 0% 0% 0% round 0.8rem);
}

.main-container {
    height: 72vh; /* Set maximum height */
    /* overflow-y: scroll; Add vertical scrollbar */
}

.centered-loading {
    position: fixed; /* Position fixed to the viewport */
    top: 50%;       /* Center vertically */
    left: 50%;      /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust to exact center */
    z-index: 1000;  /* Ensure it's on top of other elements */
}

.header-button {
    font-weight: 500 !important; /* Make the text bold */
    color: #ffffff !important; /* White text */
    background-color: #6372E3; /* Purple background */
    border-radius: 15px !important; /* More rounded corners */
    border: none !important; /* Remove border */
    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.3) !important; /* Drop shadow */
    padding: 10px 24px !important; /* Padding for larger button size */
    margin-left: 10px !important; /* Space between buttons */
    margin-top: 10px !important; /* Space above buttons */
    margin-bottom: 5px !important; /* Space below buttons */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}
.save-header-button {
    font-weight: 500 !important; /* Make the text bold */
    color: #ffffff !important; /* White text */
    border-radius: 15px !important; /* More rounded corners */
    border: none !important; /* Remove border */
    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.3) !important; /* Drop shadow */
    padding: 10px 24px !important; /* Padding for larger button size */
    margin-left: 10px !important; /* Space between buttons */
    margin-top: 10px !important; /* Space above buttons */
    margin-bottom: 5px !important; /* Space below buttons */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

.support-button {
    font-weight: 500 !important; /* Make the text bold */
    color: #ffffff !important; /* White text */
    border-radius: 15px !important; /* More rounded corners */
    border: none !important; /* Remove border */
    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.3) !important; /* Drop shadow */
    padding: 10px 24px !important; /* Padding for larger button size */
    margin-left: 10px !important; /* Space between buttons */
    margin-top: 10px !important; /* Space above buttons */
    margin-bottom: 5px !important; /* Space below buttons */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

.footer-button {
    font-weight: 500 !important; /* Make the text bold */
    color: #ffffff !important; /* White text */
    border-radius: 15px !important; /* More rounded corners */
    border: none !important; /* Remove border */
    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.3) !important; /* Drop shadow */
    padding: 10px 24px !important; /* Padding for larger button size */
    margin-left: 10px !important; /* Space between buttons */
    margin-top: 10px !important; /* Space above buttons */
    margin-bottom: 5px !important; /* Space below buttons */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

.header-button:hover {
    background-color: #4D59B2; /* Lighter purple background on hover */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3) !important; /* Extended drop shadow on hover to give a raised effect */
}

.edit-customer-modal {
    background-color: #ececec !important; /* Light gray background */
    border-radius: 10px !important; /* Rounded corners */
}
/* Add zebra-striping to table rows */
.custom-table tr:nth-of-type(odd) {
    background-color: #ffffff; /* White for odd rows */
    text-align: center; /* Center the text */
    font-size: large;
}

.custom-table tr:nth-of-type(even) {
    background-color: #F8F8FF; /* Light purple for even rows */
    text-align: center; /* Center the text */
    font-size: large;
}

/* Style for table header */
.custom-table .table-header {
    background: #fff; /* White background for the header */
    color: #333; /* Dark text color for the header */
    font-size: medium;
    text-align: center; /* Center the text */
}

.expand-btn {
    background-color: #EDEDED;
    color: #202020;
    border-color: #EDEDED;
}

.expand-btn:hover {
    background-color: #EDEDED;
    color: #202020;
    border-color: #6372E3;
}

button.expand-btn:active {
    background-color: #EDEDED !important;
    color: #6372E3 !important;
    border-color: #6372E3 !important;
}

.collapse-btn {
    background-color: #6372E3;
    border-color: #6372E3;
    color: #ffffff;
}

.collapse-btn:hover {
    background-color: #8894f1;
    border-color: #202020;
}

button.collapse-btn:active {
    background-color: #8894f1 !important;
    border-color: #202020 !important;
}

.edit-pencil-btn {
    background-color: #6372E3;
    color: #ffffff;
    border-color: #6372E3;
    margin-right: 10px;
    margin-left: 10px;
}

.edit-pencil-btn:hover {
    background-color: #8894f1;
    border-color: #202020;
}

button.edit-pencil-btn:active {
    background-color: #8894f1 !important;
    border-color: #202020 !important;
}

.delete-trash-btn {
    background-color: #DC3545;
    color: #ffffff;
    border-color: #DC3545;
}

.delete-trash-btn:hover {
    background-color: #f05b6d;
    border-color: #202020;
}

.custom-table tr.expanded-row-odd {
    background-color: #EDEDED;
    font-size: medium;
    height: calc(100vh / 17);
}

.custom-table tr.expanded-row-even {
    background-color: #F5F5F5;
    font-size: medium;
    height: calc(100vh / 17);
}

.custom-table .expanded-group {
    position: relative; /* Position relative to the parent */
}

/* Style for expanded group */
.custom-table .expanded-group::after {
    content: ''; /* Clear the content */
    position: absolute; /* Position absolute to the parent */
    top: 0; /* Position at the top */
    left: 0; /* Position at the left */
    width: 100%; /* Take up the full width */
    height: 100%; /* Take up the full height */
    box-shadow: inset 0 0 7px 2px rgba(0, 0, 0, 0.2); /* Add a small shadow on the top and bottom */
    pointer-events: none; /* Allow mouse events to pass through */
}

.customer-name-label {
    width: 100% !important; /* Full width */
    text-align: center !important; /* Center the text */
    font-weight: 500 !important; /* Make the text bold */
    color: #6739CA !important; /* Dark purple text */
    font-size: x-large !important; /* Larger font size */
    margin-bottom: 5px;
}

.customer-name-input {
    width: 100% !important; /* Full width */
    font-weight: 400 !important; /* Make the text bold */
    font-size: large !important; /* Larger font size */
    /* rounded corners */
    border-radius: 10px !important;
    /* border */
    border: 1px solid #6739CA !important;
    /* padding */
    padding: 5px 10px !important;
    margin-bottom: 5px;
}

.dropdown-industry-mb-ae {
    width: 100% !important; /* Full width */
    font-size: small !important; /* Smaller font size */
    border-radius: 10px !important;
    margin-bottom: -5px !important;
}

.dropdown-industry-mb-ae-label {
    width: 100% !important; /* Full width */
    text-align: center !important; /* Center the text */
    font-size: 11px !important; /* Smaller font size */
    color: #5a5a5a !important; /* Dark purple text */
}

.tags-dropdown {
    width: 100% !important; /* Full width */
    font-size: small !important; /* Smaller font size */
    border-radius: 10px !important;
}

.budget-markup-input {
    width: 100% !important; /* Full width to match dropdowns */
    font-size: small !important; /* Font size to match dropdowns */
    border-radius: 5px !important; /* Rounded corners to match dropdowns */
    border: 1px solid #ccc !important; /* Border color to match dropdowns */
    padding: 7px 12px !important; /* Padding to match dropdowns */
    margin-bottom: -5px !important; /*Space below the input field */
    margin-top: 5px;
}

.budget-markup-label {
    width: 100% !important; /* Full width */
    text-align: center !important; /* Center the text, matching other labels */
    font-size: 11px !important; /* Smaller font size to match dropdown labels */
    color: #5a5a5a !important; /* Color to match dropdown labels */
}

.tags-label {
    font-size: 11px !important; /* Smaller font size to match dropdown labels */
    color: #5a5a5a !important; /* Color to match dropdown labels */
}

.col-3 {
    padding: 3px !important;
}

.col-2 {
    padding: 3px !important;
}

.col-4 {
    padding: 3px !important;
}

.col-9 {
    padding: 0px !important;
}

.col-1 {
    padding: 0px !important;
}

.industry-dropdown-col {
    padding: 0px !important;
}

.connector-dropdown {
    width: 100% !important; /* Full width */
    font-size: smaller !important; /* Smaller font size */
    border-radius: 10px !important;
}

.Select-control {
    margin-top: 0px !important; /* Removes the top margin from locations dropdown */
}