body {
    background-color: #f0f2f5;
    margin: 0;
    padding: 0;
}

.baskerville-font {
    font-family: "Baskerville", "Baskerville Old Face", sans-serif;
    color: #2A3F60;
}

.main-wrapper {
    width: 90%;
    margin: 0 auto;
}

.title-section {
    padding-top: 30px;
    padding-bottom: 30px;
    position: relative;
}

.uei-logo {
    height: 70px;
    width: auto;
    position: relative;
    float: right;
    margin: 0 auto 20px auto;
    display: block;
}

.dashboard-title {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.dashboard-subtitle {
    font-size: 20px;
    text-align: center;
    margin: 5px 0 0 0;
}

.dropdown-menu-label {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}


.rounded-dropdown-menu {
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.content-card {
    background-color: white;
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    box-sizing: border-box;
    overflow-x: hidden;
}

.metrics-row-title {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 5vh 0;
    padding: 15px;
    border-radius: 30px;
    background-color: #f0f2f5;
}

.metrics-row-sections {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 20px;
    overflow: hidden;
}

.metrics-section {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    padding: 10px;
}

.metrics-section-icon {
    height: 70px;
    width: auto;
    margin-right: 30px;
}

.metrics-section-label {
    font-size: 18px;
    font-weight: 600;
    margin: 0
}

.total-problems-section {
    font-size: 28px;
    line-height: 1.1;
    margin-top: 15px;
    display: block;
}

.table-title-main {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 25px;
}

.table-title-sub {
    color: #72809A;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 5px;
}

.download-btn {
    background-color: #72809A;
    color: white;
    padding: 10px 15px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out; 
    display: flex;
    align-items: center;
}

.download-btn:hover {
    background-color: #2A3F60; 
    box-shadow: 0 6px 16px rgba(0,0,0,0.2); 
    transform: translateY(-2px); 
}

.download-btn:active {
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dash-spreadsheet-container {
    display: block !important;
    border-radius: 30px; 
    overflow: hidden;
}

.dash-spreadsheet-container table {
    table-layout: fixed; 
    width: auto !important; 
    min-width: 100%;
}

.dash-table-tooltip {
    background-color: #72809A !important;
    color: white !important;
    font-family: 'Baskerville', 'Baskerville Old Face', sans-serif !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    padding: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    z-index: 9999 !important;
    border: none !important;
    max-width: 450px !important;
}

/* This ensures cells in your Dash table are highlightable */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    cursor: text;
}

.disclaimer-text {
    font-style: italic;
    font-size: 18px;
    text-align: center;
    padding: 40px 0;
}


.Select-control, .Select-placeholder, .VirtualizedSelectOption {
    font-family: 'Baskerville', 'Baskerville Old Face', sans-serif !important;
    font-size: 16px !important;
}

.Select-control {
    height: 38px !important; 
    display: flex !important;
    align-items: center !important;
    background-color: white !important;
    border-radius: 30px !important;
    border: 1px solid #BDC3DC !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    overflow: hidden !important; 
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
}

.Select-control:hover {
    border-color: #72809A !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
    transform: translateY(-1px);
}

.is-focused:not(.is-opened) > .Select-control {
    border-color: #2A3F60 !important;
    box-shadow: 0 0 0 3px rgba(42, 63, 96, 0.1) !important;
}

.Select-value, 
.Select-placeholder,
.Select-input {
    padding-left: 20px !important; 
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
}

.Select-value-label,
.Select-placeholder,
.Select-input > input {
    color: #2A3F60 !important; 
    font-weight: 500 !important;
}

.VirtualizedSelectOption {
    padding-left: 20px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    color: #2A3F60 !important;
    display: flex !important;
    align-items: center !important;
    transition: background-color 0.2s ease !important;
}

.VirtualizedSelectFocusedOption {
    background-color: #f0f2f5 !important;
    color: #2A3F60 !important;
}

.Select-multi-value-wrapper {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.Select-arrow-zone {
    width: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.3s ease !important;
}

.is-open .Select-arrow-zone {
    transform: rotate(180deg);
}

.Select-arrow {
    border-color: #2A3F60 transparent transparent !important;
    border-width: 7px 5px 2px !important;
    position: relative !important;
    top: 2px;
}

.Select-clear-zone {
    display: none !important;
}