/* Placeholder */
.select2-placeholder {
    display: none;
}

/* Main */
.ss-main {
    color: inherit;
    display: block;
}
.ss-main .ss-single-selected,
.ss-main .ss-multi-selected {
    background: var(--body-color);
    border: 1px solid var(--inputs-borders-color);
    border-radius: 0;
    transition: background-color ease .2s, border-color ease .2s, color ease .2s, opacity ease .2s;
    padding: 3px 11px;
    height: 45px;
    align-items: center;
}
.ss-main .ss-single-selected .placeholder,
.ss-main .ss-multi-selected .placeholder {
    line-height: 1.6;
}
.ss-main .ss-single-selected .placeholder .ss-disabled,
.ss-main .ss-multi-selected .ss-values .ss-disabled {
    color: var(--inputs-placeholders-color);
    transition: color ease .1s;
}
.ss-main .ss-single-selected:hover,
.ss-main .ss-multi-selected:hover {
    border-color: var(--inputs-borders-color-hover);
}
.ss-main .ss-single-selected[class*=ss-open],
.ss-main .ss-multi-selected[class*=ss-open] {
    border-color: var(--inputs-borders-color-focus);
}
.ss-main .ss-single-selected[class*=ss-open] .placeholder .ss-disabled,
.ss-main .ss-multi-selected[class*=ss-open] .ss-values .ss-disabled {
    color: var(--secondary-color);
}

/* Arrow */
.ss-main .ss-single-selected .ss-arrow {
    margin: 0;
}
.ss-main .ss-single-selected .ss-arrow span {
    border: none;
    border-width: 0;
    padding: 0;
    display: flex;
    transition: transform ease .2s;
}
.ss-main .ss-single-selected .ss-arrow span.arrow-down {
    transform: none;
    margin: 0;
}
.ss-main .ss-single-selected .ss-arrow span.arrow-up {
    transform: perspective(100px) rotateX(180deg);
    margin: 0;
}
.ss-main .ss-single-selected .ss-arrow span svg {
    position: relative;
    height: auto;
    width: 8px;
}

/* Plus */
.ss-main .ss-multi-selected .ss-add {
    margin: 0 4px 0 0;
}
.ss-main .ss-multi-selected .ss-add .ss-plus {
    background: var(--primary-color);
}
.ss-main .ss-multi-selected .ss-add .ss-plus:after {
    background: var(--primary-color);
}
.ss-main .ss-multi-selected .ss-values .ss-value {
    background: var(--primary-color);
    color: var(--body-color);
    border-radius: 0;
}

/* Content */
.ss-content {
    background: var(--body-color);
    border-color: var(--inputs-borders-color-focus);
}
.ss-content .ss-list .ss-option {
    padding: 8px 11px;
    box-sizing: border-box;
    transition: all ease .2s;
}
.ss-content .ss-list .ss-option:hover,
.ss-content .ss-list .ss-option.ss-highlighted {
    color: inherit;
    background: var(--third-color);
}
.ss-content .ss-list .ss-option.ss-disabled {
    background: var(--primary-color);
    color: var(--body-color);
}

/* Focus transition */
.input-style-2 .select-focus-transition .ss-main .ss-single-selected .select2-placeholder {
    position: absolute;
    z-index: 101;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    padding-bottom: 1px;
    display: inline-block;
    transition: color ease .1s,transform .15s cubic-bezier(.4,0,.2,1);
    transform-origin: top left;
    left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    padding-right: 33px;
    box-sizing: border-box;
    cursor: pointer;
    line-height: 1.6;
}
.input-style-2 .select-focus-transition .ss-main .ss-single-selected[class*=ss-open] .select2-placeholder,
.input-style-2 .select-focus-transition .ss-main .ss-single-selected .select2-placeholder.select-focused-placeholder {
    transform: translateY(-106%) scale(.75);
}
.input-style-2 .select-focus-transition .ss-main .ss-single-selected .ss-arrow {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
.input-style-2 .select-focus-transition .ss-main .ss-single-selected .placeholder .ss-disabled {
    display: none;
}