﻿
.s2 {
    position: relative;
    width: 100%;
}

    .s2 .s2-outer {
        align-items: center;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
    }

        .s2 .s2-outer i {
        }

        .s2 .s2-outer span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .s2.s2-disabled .s2-outer {
        cursor: not-allowed;
        background-color: #e2e8ee;
    }

    .s2:not(.s2-expanded) .s2-inner {
        display: none;
    }

    .s2.s2-expanded .s2-inner {
        display: flex;
    }

    .s2 .s2-inner {
        background-color: #fff;
        border: 1px solid #c7c7c7;
        border-radius: .2rem;
        flex-direction: column;
        margin-top: 2px;
        width: 100%;
        position: absolute;
        z-index: 1000;
    }

        .s2 .s2-inner .s2-input-container {
            padding: .7rem;
            scrollbar-width: thin;
        }

        .s2 .s2-inner .s2-inner-container {
            display: flex;
            flex-direction: column;
            max-height: 250px;
            overflow-y: auto;
            scrollbar-width: thin;
        }

            .s2 .s2-inner .s2-inner-container .s2-inner-option {
                cursor: pointer;
                padding: .25rem .7rem;
            }

                .s2 .s2-inner .s2-inner-container .s2-inner-option:hover {
                    background-color: lightgray !important;
                }

                .s2 .s2-inner .s2-inner-container .s2-inner-option.s2-inner-option-selected {
                    background-color: #f1f1f1;
                }
