@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);
.select {
    --border: thin solid #dadada;
    --radius: 4px; 
    --padding-y: 10px;
    --padding-x: 25px;
    --padding: var(--padding-y) var(--padding-x); 
    --background: #fff;
    --bg-hover: rgb(245, 245, 245);
    --background-selected: rgb(245, 245, 245);
    --height: attr(data-height);
    min-width: attr(data-width) !important;
    position: relative !important;
    display: inline-flex;   
    flex-direction: column; 
    box-sizing: border-box;
    flex-wrap: wrap; 
} 
.select:not(.show) > span:not(.select-show) { 
    visibility: hidden;
    opacity: 0;
}  
.select > span:not(.select-show) {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%; 
    min-width: min-content;
    border: var(--border);
    border-radius: var(--radius);
    max-height: calc(((var(--padding-y) * 4) * 10));  
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1000;
}  
.select > .select-show img {
    max-width: 250px;
    height: 100%;
    aspect-ratio: 16/9;
    max-height: 150px;
    object-fit: cover;
}
.select .option img {
    max-width: 180px;
    height: 100%;
    aspect-ratio: 16/9;
    max-height: 150px;
    object-fit: cover;
}
.select > .select-show:has(img){
    padding: 0 !important;
}
.select > span:not(.select-show):-webkit-scrollbar {
    width: 2px;
}
.select > span:not(.select-show):-webkit-scrollbar-thumb {
    background: #dadada;
}
.select[data-type='true']::before,.select .select-show { 
    position: relative;
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--padding);
    content: attr(data-html);
    background: var(--background); 
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer; 
}  
.select .option {
    position: relative; 
    padding: var(--padding);  
    width: min-content;
    font-family: 1rem;
    box-sizing: border-box; 
    border-top: 0px; 
    min-width: max-content;
    width: 100%;
    border-bottom: 0px;
    cursor: pointer;
    background: var(--background); 
}  
.select .option.selected {
    background: var(--background-selected); 
}
.select .option:hover {
    background: var(--bg-hover);
} 
.select input[type=search]{
    width: 100%;
    position: sticky;
    top: 0;
    min-width: 150px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 0px;
    border: 0;
    font-size: 0.86rem;
    border-bottom: 1px solid #dadada;
    outline: 0; 
    z-index: 10;
}
/* bu sınıfın css kısmmı ile oynamayın - Do not modify the CSS for this class */
.dropdown-input-value-area______ {
    position: fixed;
    left: -5000%;
    top: -5000%;
    display: none;
    user-select: none;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}