/* ============================================================
   Consumer dashboard dropdown styling
   Applies to dropdowns with:
   className="delinquency-dropdown"
   ============================================================ */


/* ------------------------------------------------------------
   CLOSED DROPDOWN
   ------------------------------------------------------------ */

.delinquency-dropdown .Select-control,
.delinquency-dropdown.is-focused .Select-control,
.delinquency-dropdown.is-open .Select-control,
.delinquency-dropdown .Select.is-focused > .Select-control,
.delinquency-dropdown .Select.is-open > .Select-control {
    background-color: #1d1b35 !important;
    border: 1px solid #555 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: #ffffff !important;

    min-height: 42px !important;
    height: 42px !important;
}


/* ------------------------------------------------------------
   SELECTED VALUE
   Example: All Groups, All, Regional / Community Banks
   ------------------------------------------------------------ */

.delinquency-dropdown .Select-value,
.delinquency-dropdown .Select-value-label,
.delinquency-dropdown .Select--single > .Select-control .Select-value {
    color: #ffffff !important;
}

.delinquency-dropdown .Select-value-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 40px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ------------------------------------------------------------
   PLACEHOLDER
   ------------------------------------------------------------ */

.delinquency-dropdown .Select-placeholder {
    color: #aaaaaa !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
}


/* ------------------------------------------------------------
   SEARCH INPUT
   ------------------------------------------------------------ */

.delinquency-dropdown .Select-input {
    background-color: transparent !important;
    height: 40px !important;
}

.delinquency-dropdown .Select-input input {
    background-color: transparent !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 40px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ------------------------------------------------------------
   DROPDOWN ARROW
   ------------------------------------------------------------ */

.delinquency-dropdown .Select-arrow {
    border-top-color: #aaaaaa !important;
}

.delinquency-dropdown.is-open .Select-arrow,
.delinquency-dropdown .Select.is-open .Select-arrow {
    border-bottom-color: #aaaaaa !important;
}


/* ------------------------------------------------------------
   CLEAR ICON
   ------------------------------------------------------------ */

.delinquency-dropdown .Select-clear {
    color: #aaaaaa !important;
}

.delinquency-dropdown .Select-clear:hover {
    color: #ffffff !important;
}


/* ------------------------------------------------------------
   OPEN MENU CONTAINER
   ------------------------------------------------------------ */

.delinquency-dropdown .Select-menu-outer {
    background-color: #1d1b35 !important;
    border: 1px solid #555 !important;
    border-radius: 0 0 6px 6px !important;
    color: #ffffff !important;

    width: 100% !important;
    min-width: 100% !important;

    z-index: 9999 !important;
}

.delinquency-dropdown .Select-menu {
    background-color: #1d1b35 !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------
   MENU OPTIONS
   Older Dash / React Select virtualized dropdowns
   ------------------------------------------------------------ */

.delinquency-dropdown .VirtualizedSelectOption,
.delinquency-dropdown .VirtualizedSelectFocusedOption,
.delinquency-dropdown .VirtualizedSelectSelectedOption {
    background-color: #1d1b35 !important;
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 18px !important;

    padding: 8px 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}


/* Focused / hovered option */

.delinquency-dropdown .VirtualizedSelectFocusedOption {
    background-color: #34325a !important;
    color: #ffffff !important;
}


/* Selected option */

.delinquency-dropdown .VirtualizedSelectSelectedOption {
    background-color: #292745 !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------
   FALLBACK FOR NON-VIRTUALIZED OPTIONS
   ------------------------------------------------------------ */

.delinquency-dropdown .Select-option {
    background-color: #1d1b35 !important;
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 18px !important;

    padding: 8px 12px !important;
    white-space: normal !important;
}

.delinquency-dropdown .Select-option.is-focused {
    background-color: #34325a !important;
    color: #ffffff !important;
}

.delinquency-dropdown .Select-option.is-selected {
    background-color: #292745 !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------
   FALLBACK FOR NEWER REACT SELECT VERSIONS
   ------------------------------------------------------------ */

.delinquency-dropdown div[class*="-control"],
.delinquency-dropdown div[class*="-control"]:hover {
    background-color: #1d1b35 !important;
    border-color: #555 !important;
    box-shadow: none !important;
    color: #ffffff !important;

    min-height: 42px !important;
}

.delinquency-dropdown div[class*="-singleValue"] {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.delinquency-dropdown div[class*="-placeholder"] {
    color: #aaaaaa !important;
    font-size: 14px !important;
}

.delinquency-dropdown div[class*="-input"] {
    color: #ffffff !important;
    font-size: 14px !important;
}

.delinquency-dropdown div[class*="-indicatorContainer"] {
    color: #aaaaaa !important;
}

.delinquency-dropdown span[class*="-indicatorSeparator"] {
    background-color: #555 !important;
}

.delinquency-dropdown div[class*="-menu"],
.delinquency-dropdown div[class*="-menuList"] {
    background-color: #1d1b35 !important;
    color: #ffffff !important;
    z-index: 9999 !important;
}

.delinquency-dropdown div[class*="-option"] {
    background-color: #1d1b35 !important;
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 18px !important;

    padding: 8px 12px !important;
    white-space: normal !important;
}

.delinquency-dropdown div[class*="-option"]:hover {
    background-color: #34325a !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------
   PREVENT MENU FROM APPEARING BEHIND THE PLOT
   ------------------------------------------------------------ */

.delinquency-dropdown {
    position: relative !important;
    z-index: 10000 !important;
}


/* ------------------------------------------------------------
   SCROLLBAR INSIDE OPEN MENU
   ------------------------------------------------------------ */

.delinquency-dropdown .Select-menu-outer::-webkit-scrollbar,
.delinquency-dropdown .VirtualizedSelectOption::-webkit-scrollbar {
    width: 8px;
}

.delinquency-dropdown .Select-menu-outer::-webkit-scrollbar-track {
    background: #1d1b35;
}

.delinquency-dropdown .Select-menu-outer::-webkit-scrollbar-thumb {
    background: #7d879d;
    border-radius: 4px;
}

.delinquency-dropdown .Select-menu-outer::-webkit-scrollbar-thumb:hover {
    background: #9ba5ba;
}