:host {
    display: block;
}

:host(:focus-visible) {
    outline: none;
}

.select_container::after {
    --icon-size: 0.5em;

    border-style: solid;
    border-width: 2px 2px 0 0;
    color: var(--sds-g-gray-9);
    content: "";
    display: block;
    height: var(--icon-size);
    position: absolute;
    right: 0.7rem;
    top: calc((1.75rem / 2) - 5px);
    transform: rotate(135deg);
    width: var(--icon-size);
}

.select-element_placeholder {
    color: var(--sds-g-gray-9);
}

select.select-element:focus:not([disabled]),
select.select-element:active:not([disabled]) {
    border-width: 2px;
    border-color: var(--dx-g-blue-vibrant-50);
    box-shadow: none;
}

.has-error select.select-element:focus,
.has-error select.select-element:active {
    border-color: #ea001e;
    box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
}

@media (min-width: 48em) {
    .form-element_horizontal .form-element_control {
        padding-left: 33%;
        clear: none;
    }
}

abbr[title] {
    border-bottom: 1px dotted;
    text-decoration: none;
    cursor: help;
}

abbr[title]::after {
    content: " (" attr(title) ")";
}

abbr[title],
fieldset,
hr {
    border: 0;
}

button,
select {
    text-transform: none;
}

.form-element_control {
    clear: left;
    position: relative;
}

.form-element_label {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    display: inline-block;
    color: #3e3e3c;
    font-size: 0.75rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    margin-bottom: 0.125rem;
}

.form-element_label:empty {
    margin: 0;
}

.form-element_stacked .form-element_label,
.form-element_stacked .form-element_control {
    border-bottom: 0;
    padding-left: 0;
}

.form-element_stacked .form-element_control {
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    clear: left;
}

.assistive-text {
    position: absolute !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.required-element {
    color: #ea001e;
    margin: 0 0.125rem;
}

.select-element {
    height: calc(1.875rem + (1px * 2));
    width: 100%;
    border: 1px solid #dddbda;
    border-radius: 0.25rem;
    background-color: transparent;
    transition: border 0.1s linear, background-color 0.1s linear;
    z-index: 1;
}

.select-element:focus,
.select-element:active {
    outline: 0;
    border-color: #1b96ff;
    background-color: transparent;
    box-shadow: 0 0 3px #0176d3;
}

.select-element[disabled],
.select-element.slds-is-disabled {
    background-color: #ecebea;
    border-color: #c9c7c5;
    color: #3e3e3c;
    cursor: not-allowed;
    user-select: none;
    opacity: 1;
    z-index: 0;
}

.select-element[disabled]:focus,
.select-element[disabled]:active,
.select-element.slds-is-disabled:focus,
.select-element.slds-is-disabled:active {
    box-shadow: none;
}

.select-element[size] {
    min-height: calc(1.875rem + (1px * 2));
    height: inherit;
}

.select-element[size] option {
    padding: 0.5rem;
}

.has-error .select-element {
    border-color: #ea001e;
    box-shadow: #ea001e 0 0 0 1px inset;
    background-clip: padding-box;
}

.select_container {
    display: grid;
    position: relative;
    background-color: white;
}

.select_container .select-element {
    appearance: none;
    padding-left: 0.5rem;
    padding-right: 1.5rem;
}

.select_container .select-element::-ms-expand {
    display: none;
}

.has-error .select-element:focus,
.has-error .select-element:active {
    box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
}

.form-element:not(.has-error) .select-element:required {
    box-shadow: none;
}

.form-element_help,
.form-element_helper {
    font-size: 0.75rem;
    margin-top: 0.125rem;
    display: block;
}

.has-error .form-element_help {
    color: #ea001e;
}