.customer-group {
    padding: 20px;
}
.customerdeletebutton{
    margin-left:110px;
}

.mylogin {
    background-color: #354052;
    /*padding: 100px;*/
}

.btn-primary {
    /*background-color: #4b6c9e;*/
    background-color: #354052;
}

.mainbackground {
    background-color: #354052;
}

.sidebar {
    background-color: #354052;
    background: #354052;
}
.sidebar-content {
    background-color: #354052;
    background: #354052;
}
.js-simplebar {
    background-color: #354052;
    background: #354052;
}

.settings-group {
    padding: 20px;
}

.settings-group-nopadding {
    padding: 0px;
}

.settingscheckbox {
    margin-left: 110px;
}

/*.dx-icon-customicon {
    background-image: url(data:image/png;base64,... LONG BASE64 CODE IS HERE ...);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}*/

.centered-card {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

:root {
    --sitebackgrounddark: #354052;
}

.dx-form-validation-summary {
padding-left:140px;
}

.custom-width {
    width: 100%;
}

.paycycleunsaved{
    color: #ffffff;
    background-color: #ff0000;
}

.sidebar-brand {
    color: #cccccc;
    /*display: block;*/
   /* font-size: 1.125rem;*/
    font-weight: 500;
   /* padding: 1.15rem 1.5rem;*/
    text-align: left;
}

.card.headingcolors p,
.card.headingcolors h3 {
    color: #354052 !important;
}

.grid-save-results {
    color: #354052 !important;
}

/* Additional styling for .sidebar-brand with smaller text */
body .sidebar-brand.smaller-text {
    font-size: 1.1rem; /* Adjust the font size as needed */
    margin-left: 25px;
    margin-top:-20px;
}

.hideelement {
    display: none !important;
}

/* Dark theme styles */
.dark-theme .bg-body-secondary {
    background-color: #343a40; /* Darker shade suitable for dark mode */
    color: #ffffff; /* Light text color for readability */
}

.dark-theme .btn-outline-dark {
    border-color: #ffffff; /* Light outline for buttons */
    color: #ffffff;
}

    .dark-theme .btn-outline-dark:hover {
        background-color: #ffffff; /* Light background on hover */
        color: #343a40; /* Dark text color on hover */
    }

/* Light theme styles - assuming default styles are for light theme */
/* Customize as needed */
.light-theme .bg-body-secondary {
    background-color: #f8f9fa; /* Light background */
    color: #000000; /* Dark text color for readability */
}

.light-theme .btn-outline-dark {
    border-color: #000000; /* Dark outline for buttons */
    color: #000000;
}

    .light-theme .btn-outline-dark:hover {
        background-color: #000000; /* Dark background on hover */
        color: #ffffff; /* Light text color on hover */
    }

.unmappeditem {
    background-color: red;
}

.btn-small {
    width: 200px;
}

@media (max-width: 768px) {
    .iframe-container {
        padding-top: 100% !important; /* Makes it more square on mobile */
    }
}

@media (max-width: 480px) {
    .iframe-container {
        padding-top: 125% !important; /* Even taller on very small screens */
    }
}

.setup-coach {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #007bff;
    color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}

.testcolor {
    background: #007bff;
    color: white;
}

.toast-icon-orange i.dx-icon {
    color: #ff6f00 !important;
}

. /* Sidebar container */
#sidebar.sidebar {
    background-color: #222; /* example dark bg */
    min-height: 100vh;
}

/* Sidebar links */
#sidebar .sidebar-link {
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 500;
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
}

    /* Hover effect */
    #sidebar .sidebar-link:hover {
        background-color: #354052;
        color: #fff !important;
    }

    /* Active link (current page) */
    #sidebar .sidebar-link.active {
        background-color: #354052;
        color: #fff !important;
        font-weight: 600;
    }