.select-container { position: relative; min-width: 200px; width: 100%;}
.select-container * { width: 100% }

.input-group-text + .select-container { width: 200px !important; }
.input-group-text + .select-container.long { width: 90% !important; }

.select-container.disabled .select-placeholder { background-color: #E9ECEF;}
.select-container .select-placeholder { position: relative; background-image: none !important;    display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; }
.select-container .select-placeholder::after { content: "";  position: absolute;background-image: var(--bs-form-select-bg-img);width: 12px;height: 12px;right: 13px;top: 50%;transform: translateY(-50%);transition: transform 0.3s ease;}


.select-container.active .select-placeholder {color: var(--bs-body-color);background-color: var(--bs-body-bg);border-color: #86b7fe;outline: 0;box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);background-image: rotate()}
.select-container.active .select-placeholder::after { transform: translateY(-50%) rotate(180deg);}

.select-container .select-wrap {display: none ; position: absolute; background-color: #fff; border: var(--bs-border-width) solid var(--bs-border-color);border-radius: var(--bs-border-radius);transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;top: 32px; z-index: 100;}

.select-container.active .select-wrap { display: block ;}
.select-container.active .select-wrap.select-wrap-lg { top: 40px !important; font-size: 1rem;}
.select-container .select-list {  padding: 0px ; margin: 0px;  max-height: 300px; overflow-y: scroll;}
.select-container .select-list .select-item { list-style: none ; padding: 8px 12px; border-bottom: 1px solid var(--bs-border-color); display: flex; align-items: center; justify-content: space-between;}
.select-container .select-list .select-item.none { display: none;}
.select-container .select-list .select-item input[type=checkbox] { width: 15px; height: 15px;}
.select-container .select-list .select-item label { width: calc(100% - 25px); display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; color: #333 }

.select-container .overall-wrap { display: none; }
.select-container.active .overall-wrap { display: block;  background: var(--bs-gray-200); }

/* 전체 스크롤바 스타일 설정 */
.select-list::-webkit-scrollbar {
    width: 4px; /* 가로 폭을 4px로 설정 */
}

/* 스크롤바의 트랙 (스크롤바 배경) */
.select-list::-webkit-scrollbar-track {
    background: var(--bs-gray-200); /* 트랙 배경색을 회색으로 설정 */
}

/* 스크롤바의 thumb (스크롤바의 이동 가능한 부분) */
.select-list::-webkit-scrollbar-thumb {
    background-color: var(--bs-blue); /* thumb의 색상을 검정색으로 설정 */
    border-radius: 2px; /* 둥근 모서리 설정 (선택 사항) */
}

.select-wrap .search-box { padding: 4px;  margin-bottom: 8px;; background: var(--bs-gray-200);  }
.select-wrap .search-box input[type=text] { background: var(--bs-gray-200); }
.select-wrap .search-box input[type=text]::placeholder { color: #333}
