.header-description {
    color: #CFCFCF;
    margin: 4px auto;
    text-align: center;
    max-width: 384px;
}

/* Body styles */
body {
    background-color: #F7F8FC !important;
}



@media (min-width: 576px) {
    .container, .container-sm{
        padding: 0;
        max-width: 690px;
    }
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 1920px;
    }
}

.navbar-brand{
    font-size: 1.8rem;
    font-weight: 700;
    color: #36485C;
}

.navbar-brand:hover{
    color: #36485C;
}

.menubar .nav-link{
    color: #36485C !important;

}
.menubar .nav-link:hover{
    color: #36485C !important;
    background-color: rgb(54, 72, 92, 0.1)

}

.display-6{
    font-weight: 600;
    line-height: 1.2;
    color: #A4A6B3;
    font-size: 1.8rem !important;
}


.bi{
    padding: 0 0.2rem;
}

:root, [data-bs-theme=light]{
    --bs-border-radius: 0.4rem !important;
}

.card{
    border:#FFFFFF;
    box-shadow: 0 12px 30px rgba(46, 71, 101, 0.1) !important;
}
.card-header{
    background-color: #FFFFFF !important; 
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    padding-top: 1.5rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.card-body{
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-bottom: 2rem !important;
}

.row{
    margin-bottom: 1.2rem;
}


.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: #FFFFFF !important;
    color: #5F7896 !important;
}

.dash-cell{
    border-width: 0 0 1px 0 !important;
    height: 4rem !important;
}

.dash-header {
    border-width: 0 !important;
}

.form-label{
    font-weight: 600 !important;
}

.form-control{
    border-radius: 0;
}

.dash-graph{
    padding: 0 !important;
}

.Select-control{
    padding: 0.375rem!important;
    border: 1px solid #dbdbdb;
}

.css-13xy2my {
    border: 0 !important;
    box-shadow: none !important;
}

.css-1bigob2 {
    background-color: #FFFFFF !important;
    font-size: 0.875rem !important;
    color: #5F7896 !important;
    font-weight: 600 !important;
    padding: 2px !important;
    border-bottom: 0 !important;
}

.css-13njpue{
    color: #5F7896 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 2px !important;
    border-bottom: 0 !important;
}

.m_f0824112{
    color: #ffffff;
    padding: 10px;
    margin-bottom: 0.2rem;
    border-radius: 0.4rem;
}


.m_f0824112:hover{
    background-color: #36485C;
    color: #ffffff;
}

.m_f0824112:where([data-active], [aria-current='page']){
    background-color: #36485C !important;
    color: #ffffff;
}

.css-1bp1ao6 {
    width: 30% !important;
    right: 0 !important;
}
.css-igs3ac{
    border: 1px solid #5F7896 !important
}


.css-1chpzqh{
    margin: 1rem 0;
}

.css-q34dxg {
    border-bottom: 1px solid #004961 !important;
}
.css-1gqug66:hover{
    background-color: rgba(244, 248, 250, 1);
    border-left: 5px solid rgba(187, 202, 210, 1);
}

.css-hboir5{
    border-bottom: 2px solid #004961 !important;
    border-left: 2px solid #004961 !important;
    margin-left: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}



.css-1rs06yn{
    background-color: #36485C !important;
    padding: 16.5px 14px !important;
    font-size: 0.875rem !important;
}

.css-1rs06yn:hover{
    background-color: #212631!important;
    box-shadow: none !important;
}

.css-1v4ccyo{
    width: 100% !important;
}

.css-7g5oui:focus{
    color:#36485C !important;
}

.css-1ald77x.Mui-focused{
    color:#36485C !important;
}

.css-1km1ehz{
    color:#36485C !important;
    font-size: 0.875rem !important;
}

.css-1chpzqh{
    color:#36485C !important;
    font-size: 0.875rem !important;
}

.css-rmmij8{
    color:#36485C !important;
    font-size: 0.875rem !important;
}

.css-1gs62wq{
    color:#36485C !important;
    font-size: 0.875rem !important;
}

.keywords-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *, .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *:after, .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *:before{
    text-align: left;
}

.DateRangePickerInput_clearDates{
    top:36%;
}

.card-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.card-header-container .help-icon {
    display: flex;
    align-items: center;
}

.css-84czuy{
    justify-content: flex-start !important;
    padding-top: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.css-i44wyl{
    width: 200px !important;;
}

#sidebar {
    padding: 2rem 1.2rem;
    background-color: #212631;
}

#sidebar h2 {
    font-weight: 800;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.87);
    font-size: 1.5rem !important;
}
#login h2 {
    font-weight: 800;
    line-height: 1.2;
    color:#36485C;
    font-size: 1.5rem !important;
    text-align: center;
    margin:1rem;
}

/* Hide the blurb on a small screen */
#blurb {
    display: none;
    color: #36485C;
    border-top: 2px solid #36485C;
}

#sidebar-toggle {
    display: none;
}

#page-content {
    padding: 1.2rem 1rem;
    transition: margin-left 0.3s ease-in-out; /* Smooth transition for margin change */
}

.navbar-toggler {
    color: rgba(255, 255, 255, 0.87);
    font-weight: 900 !important;
    font-size: 1.5rem;
}

/* Base styles for the menu bar */
#menubar-content {
    padding: 1.4rem 1rem 0 1rem;
    transition: margin-left 0.3s ease-in-out; /* Smooth transition for margin change */
}

#sidebar {
    .row{
        margin-bottom: 0 !important;
    }
}
/* Footer styling */
#footer {
    padding: 2rem 1rem;
    bottom: 0;
    color:#212631;
    transition: margin-left 0.3s ease-in-out; /* Smooth transition for margin change */

    .nav-link{
        color:#004961;
        padding: 0 1rem;
        
    }
    .nav-link:hover{
        background-color: transparent;
        color:var(--bs-nav-pills-link-active-bg);

    }
}
.footer-nav {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0; /* Remove margin if default styling adds it */

}

@media (min-width: 48em) {
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 17rem;
        text-align: left;
        transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out;
    }

    #sidebar-toggle {
        display: inline-block;
        position: relative;
        top: 0;
        transition: top 0.3s ease-in-out;
    }

    /* add negative margin to sidebar to achieve the collapse */
    #sidebar.collapsed {
        margin-left: -13.5rem; /* Adjust according to the sidebar width */
        padding-right: 0.5rem;
    }

    /* Adjust margin of page content and menubar when sidebar is collapsed */
    #sidebar.collapsed ~ #page-content {
        margin-left: 4.5rem; /* Adjust to match collapsed sidebar width */
    }

    #sidebar.collapsed ~ #menubar-content {
        margin-left: 4.5rem; /* Adjust to match collapsed sidebar width */
    }

    /* Move all contents of navbar other than header (containing toggle) further off-screen */
    #sidebar.collapsed > *:not(:first-child) {
        margin-left: -6rem;
        margin-right: 6rem;
    }

    /* Reveal the blurb on a large screen */
    #blurb {
        display: block;
        margin-bottom: 1.5rem;

    }

    /* Hide the toggle on a large screen */
    #navbar-toggle {
        display: none;
    }

    #collapse {
        display: block;
    }

    /* Set margins of the main content so that it doesn't overlap the sidebar */
    #page-content {
        margin-left: 18rem; /* Adjust based on expanded sidebar width */
        margin-right: 1rem;
        transition: margin-left 0.3s ease-in-out; /* Smooth transition for margin change */
    }
    #menubar-content {
        margin-left: 18rem; /* Default width of the sidebar when expanded */
        margin-right: 1rem;
        transition: margin-left 0.3s ease-in-out; /* Smooth transition for margin change */
    }
    #footer {
        margin-left: 18rem; /* Default width of the sidebar when expanded */
        margin-right: 1rem;
        transition: margin-left 0.3s ease-in-out; /* Smooth transition for margin change */
    }

}

.notification-card{
    border-color:var(--mantine-color-violet-light);   
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
    font-family: sans-serif !important;
    font-size: 0.875rem !important;
    --accent: var(--bs-nav-link-hover-bg) !important;
}

.selectionrow .row{
    margin: 0;
}

.selectionrow .card-body{
    padding: 1rem !important
}

#menubar-content{
    .nav-link{
        color: #36485C;
    }
    .nav-link:hover{
        background-color: transparent;
    }
    .dropdown-menu.show{
        padding:1rem 0;
    }
    .dropdown-item:active{
        background-color: transparent;
    }
    .dropdown-item{
        padding: 0.8rem;

    }
}

@media (max-width: 768px) {
    #menubar-content {
        padding: 10px; /* Reduced padding for small screens */
    }
}

#sources{
    a{
        color:#5F7896;
        text-decoration: solid;
    }
}

#footer{
    .row {
        margin: 0;
    }
    a{
        color:#5F7896;
        text-decoration: solid;
    }
}
#login{
    .nav-tabs .nav-link{
        color:#212631;
    }
    .form-control{
        padding:14px;
        margin-top: 1rem;
    }
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
       background-color: #36485C;
       color: #FFFFFF;
    }
    .nav-link:hover{
        background-color: TRANSPARENT;
    }
    .button{
        display: block;
        margin: auto;
    }
    .alert:before{
        display: none;
    }
}

#login-feedback{
    margin:1rem;
    text-align: center;
}

#register-feedback{
    margin:1rem;
    text-align: center;
}


/* Apply the margin only on large screens (e.g., 1024px and above) */
@media (min-width: 1024px) {
    .m_8bffd616 {
        margin-bottom: 1rem;
    }
}

.card-subtitle{
    color: var(--mantine-color-dimmed);
    font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - calc(0.125rem* var(--mantine-scale))));
    word-wrap: break-word;
    line-height: 1.2;
    display: block;
    margin: 0;
    padding: 0;
}

.dash-table-tooltip {
    background-color: #000000 !important;
    font-size: 0.875rem !important;
    color: #FFFFFF !important;
    border-radius: 0.4rem !important;
    min-width: none;
}