/* Global Dropdown Style
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Default Style -- Best when Dropdown Options < 24 Characters */
.dropdown {
    min-width: 216px;
    max-width: fit-content;    
    font-size: 14px;
    color: #FFFFFF;
    height: 40px;
    border-radius: 5px;
    padding: 0
}

.dropdown_margin {
    margin: 12px;
}

.dropdown .Select-control {
    background: none;
}

/* Select Text Input */
.dropdown .Select-input input {
    color: #FFFFFF !important;
}

/* Selected Value */
.dropdown .Select-control .Select-value .Select-value-label {
    color: #FFFFFF !important;
    margin-left: 10px;
}

.dropdown .Select-control .Select-value .Select-value-label span {
    color: #FFFFFF !important;
}


/* Dash Overrides
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Dropdown Menu Overrides */
.Select-menu-outer {
    background-color: #0D2031;
    border-radius: 4px;
    color: white;
    border: 0.5px solid #4E5D6C;
}

/* .Select-menu-outer:hover {
    background-color: #0D2031;
    border-radius: 4px;
    color: white;
    border: 0.5px solid #4E5D6C;
    z-index: 9999 !important;
    position: absolute !important;    
} */

/* .Select-menu-outer:hover {
    box-shadow: 0 2.5px 5px #4E5D6C;
    border: 0.5px solid #EBEBEE;
} */

/* Ensure dropdown options appear above all other elements */
.dash-dropdown .Select-menu-outer,
.Select__menu {
    z-index: 1300 !important;  /* Ensure dropdown appears above modal */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
} 


/* Custom Dropdown Widths
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Use when dropdown options are 25-50 characters */
.dropdown_medium {
    min-width: 375px;
    max-width: fit-content;
    font-size: 14px;
    color: #FFFFFF;
    height: 40px;
    border-radius: 5px;
    padding: 0;
    margin: 12px;
}


.dropdown_large {
    min-width: 500px;
    max-width: fit-content;
    font-size: 14px;
    color: #FFFFFF;
    height: 40px;
    border-radius: 5px;
    padding: 0;
    margin: 12px;
}

.dropdown_xlarge {
    min-width: 850px;
    max-width: fit-content;
    font-size: 14px;
    color: #FFFFFF;
    height: 40px;
    border-radius: 5px;
    padding: 0;
    margin: 12px;
}

.dropdown_responsive {
    width: 100%;
    font-size: 14px;
    color: #FFFFFF;
    height: 40px;
    border-radius: 5px;
    padding: 0;
    margin: 12px;
}


/* Dropdown Styling for Placeholders 
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.dropdown .Select-placeholder {
    margin-left: 10px; 
}