/**
 * These styles override default Tom-Select styles that are imported dynamically later.
 * To prevent the dynamic styles from winning the specificity race,
 * use a tag selector with the class (e.g., `div.ts-control`) to increase weight.
 */
div.ts-control {
    border: 1px solid #c6c6c6;
    border-radius: 50px;
    justify-content: center;
}
div.ts-control:not(.rtl) {
    padding-right: 1rem !important;
}
div.ts-control .item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
div.ts-dropdown {
    margin:0;
}
div.ts-control, div.ts-control input, div.ts-dropdown {
    color: #000;
}
div.ts-dropdown .create, div.ts-dropdown .no-results, div.ts-dropdown .optgroup-header, div.ts-dropdown .option {
    padding: 6px .75rem;
}
div.ts-wrapper:not(.form-control,.form-select).single div.ts-control {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5"><path d="M0 0 L8 0 L4 5 Z" fill="%23888"/></svg>');
    background-size: 0.5rem 0.35rem;
    background-position: right 0.6rem center;
}
div.focus .ts-control {
    border-color: #c6c6c6;
    box-shadow: 0 0 0 -0.1rem #c6c6c6;
}

/** Transitions to prevent Layout Shift while initializing TomSelect */
.ts-control-hide .ts-wrapper {
    opacity: 0;
    transform: translateY(5px);
}
.ts-control-hide .ts-wrapper {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}
.ts-control-hide select {
    visibility: hidden;
    display: block;
    height: 2.5rem;
}