/* Modern dropdowns (modern-select.js), brand colours only */

/* the native select stays in the page, out of sight */
select.ms-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* keeps those hidden selects inside a scrolling table, so phones don't scroll sideways */
.table-responsive, .dataTable-container { position: relative; }

.ms { display: block; width: 100%; min-width: 0; }
.ms[hidden] { display: none !important; }
.ms.ms-inline { display: inline-block; width: auto; vertical-align: middle; }

.ms-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 8px 12px 8px 12px;
    font: inherit;
    line-height: 1.4;
    text-align: left;
    color: #000;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    -webkit-appearance: none;
    appearance: none;
}
.ms-trigger .ms-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-trigger .ms-chevron { flex: none; color: rgba(0, 0, 0, .55); transition: transform .18s ease, color .15s; }
.ms-trigger:hover { border-color: rgba(0, 0, 0, .34); }
.ms-trigger:hover .ms-chevron { color: #15786d; }
.ms-trigger:focus { outline: none; }
.ms-trigger:focus-visible,
.ms.is-open .ms-trigger { border-color: #15786d; box-shadow: 0 0 0 3px rgba(21, 120, 109, .18); }
.ms.is-open .ms-chevron { transform: rotate(180deg); color: #15786d; }
.ms-trigger.is-placeholder .ms-value { color: rgba(0, 0, 0, .45); }
.ms-trigger:disabled { cursor: not-allowed; color: rgba(0, 0, 0, .65); background: rgba(0, 0, 0, .04); box-shadow: none; }
.ms-trigger:disabled .ms-chevron { opacity: .4; }

.ms-trigger.is-invalid,
.has-error .ms-trigger,
.field.invalid .ms-trigger,
.is-invalid + .ms .ms-trigger { border-color: #000; border-width: 1.5px; }
.ms-trigger.is-valid { border-color: #15786d; }

.input-group > .ms { flex: 1 1 auto; width: 1%; }

.ms-panel {
    position: fixed;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
    color: #000;
    line-height: 1.4;
    animation: ms-in .14s ease-out;
    transform-origin: top center;
}
.ms-panel.is-above { animation-name: ms-in-up; transform-origin: bottom center; }
@keyframes ms-in { from { opacity: 0; transform: translateY(-4px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes ms-in-up { from { opacity: 0; transform: translateY(4px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ms-panel { animation: none; } .ms-trigger .ms-chevron { transition: none; } }

.ms-search {
    flex: none;
    margin: 2px 2px 6px;
    padding: 9px 12px 9px 34px;
    font: inherit;
    font-size: 15px;
    color: #000;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.8' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='1.6'/%3E%3Cpath d='M10.6 10.6L14 14' stroke='%23000' stroke-opacity='.45' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px center;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 8px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.ms-search:focus { border-color: #15786d; box-shadow: 0 0 0 3px rgba(21, 120, 109, .15); }
.ms-search::-webkit-search-cancel-button { -webkit-appearance: none; }

.ms-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .2) transparent; }
.ms-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}
.ms-option .ms-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ms-option .ms-check { flex: none; color: #15786d; visibility: hidden; }
.ms-option.is-active { background: rgba(21, 120, 109, .08); }
.ms-option.is-selected { color: #15786d; font-weight: 600; }
.ms-option.is-selected .ms-check { visibility: visible; }
.ms-option.is-placeholder { color: rgba(0, 0, 0, .5); }
.ms-option.is-disabled { color: rgba(0, 0, 0, .35); cursor: not-allowed; }
.ms-group { padding: 10px 12px 4px; font-size: .72em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 0, 0, .5); }
.ms-empty { padding: 12px; color: rgba(0, 0, 0, .5); text-align: center; }

@media (max-width: 600px) {
    .ms-search { font-size: 16px; }
    .ms-option { padding-top: 11px; padding-bottom: 11px; }
}