/* Emoticon barının ana stilini ayarlayan kısım */
#main_emoticon {
    height: 25px; /* Yüksekliği 25px */
    padding: 5px 0; /* Yukarı ve aşağıdan 5px boşluk */
    border-radius: 5px 5px 0 0; /* Üst köşeleri yuvarlatılmış */
}

/* Seçenekler için genel bar ayarları */
.bar_options {
    height: 100%; /* Tam yüksekliği kaplar */
    width: auto; /* Genişlik otomatik ayarlanır */
    float: left; /* Sol tarafa hizalanır */
    padding: 0 4px; /* Sağ ve sol taraflara 4px boşluk */
}

/* Arka plan ve yazı rengi simgeleri */
.backpen, .frontpen {
    font-size: 18px; /* Yazı tipi büyüklüğü 18px */
}

/* İlk seçenek için kenar boşluğu kaldırılır */
.bar_options:first-child {
    border-left: none !important; /* Sol kenar çizgisi yok */
}

/* Son seçenek için kenar boşluğu kaldırılır */
.bar_options:last-child {
    border-right: none !important; /* Sağ kenar çizgisi yok */
}

/* Seçeneklerin içinde yer alan resimlerin stilini ayarlayan kısım */
.bar_options img {
    width: auto; /* Genişlik otomatik */
    height: 100%; /* Yüksekliği tam kaplar */
    display: block; /* Blok seviyesinde görünür */
    margin: 0 auto; /* Ortalanmış */
}

/* Renk seçim kutusu (picker) */
#picker_box {
    width: 18%; /* Genişlik ekran genişliğine göre yüzde olarak ayarlandı */
    height: auto; /* İçeriğe göre otomatik yükseklik */
    padding: 2px; /* İç boşluk 2px */
    display: none; /* Varsayılan olarak gizli */
    z-index: 10000; /* Diğer ögelerin üstünde gösterilmesi için yüksek z-index */
    background-color: #333; /* Koyu arka plan */
}

.wrap_picker, .picker {
    border: none; /* Sınırı kaldır */
    background: none; /* Arka planı kaldır */
    box-shadow: none; /* Gölgeyi kaldır */
    margin: 0; /* Kenar boşluğunu sıfırla */
    padding: 0; /* İç boşluğu sıfırla */
}
.picker:hover {
    box-shadow: none; /* Hover efektindeki gölgeyi kaldır */
    transform: none; /* Büyüme efekti varsa kaldır */
}

/* Seçeneklerin her birinin kutusu */
.bar_options_item {
    width: 21px; /* Genişlik 21px */
    height: 21px; /* Yükseklik 21px */
    float: left; /* Sol tarafa hizalanır */
    margin-right: 3px; /* Sağ taraftan 3px boşluk */
    margin-top: 2px; /* Yukarıdan 2px boşluk */
}

/* İçindeki resimlerin stilleri */
.bar_options_item img {
    width: 100%; /* Genişlik %100, kutuyu doldurur */
    height: 100%; /* Yükseklik %100, kutuyu doldurur */
}

/* Renk seçici stilini ayarlar */
.picker, .wrap_picker {
    height: 20px; /* Yükseklik 17px */
    width: 20px; /* Genişlik 17px */
    margin: 0 auto; /* Ortalanmış */
    float: left; /* Sol tarafa hizalanır */
}

/* Picker stilini tamamlar */
.wrap_picker {
    margin-top: 3px; /* Yukarıdan 3px boşluk */
    background-size: 100% 100%; /* Arka plan tam olarak kaplanır */
}

/* Boş picker kutusu için stil */
.empty_pick {
    background-size: 100% 100%; /* Arka plan tam olarak kaplanır */
}

/* Renk seçici kutuları */
.pick_color {
    width: 28px; /* Genişlik 18px */
    height: 28px; /* Yükseklik 18px */
    float: left; /* Sol tarafa hizalanır */
    margin: 5px; /* Etrafına 3px boşluk bırakılır */
    background-size: 100% 100%; /* Arka plan tam olarak kaplanır */
    border-radius: 50%; /* Yuvarlak şekil */
    transition: transform 0.2s ease-in-out; /* Büyüme efekti için geçiş */
}

/* Hover efekti */
.pick_color:hover {
    transform: scale(1.2); /* Hover efektiyle büyüme */
}


/* Emoticon listesinin genel ayarları */
#list_emoticon {
    width: 100%; /* Genişlik 235px */
    height: auto; /* Yükseklik içeriğe göre ayarlanır */
    display: none; /* Varsayılan olarak gizli */
    z-index: 10000; /* Yüksek z-index */
    border-radius: 6px; /* Kenarları 6px yuvarlatılmış */
    overflow: hidden; /* Taşan içerik gizlenir */
}

/* Emoticon resimlerinin stilini ayarlar */
#list_emoticon img {
    float: left; /* Sol tarafa hizalanır */
    display: block; /* Blok olarak gösterilir */
    margin: 4px; /* Her tarafında 4px boşluk */
    height: 28px; /* Yüksekliği 25px */
    width: auto; /* Genişliği otomatik ayarlanır */
}

/* Emoticon içerik alanı */
#smile_content {
    width: 100%; /* Tam genişlik kaplanır */
    height: 240px; /* Yükseklik 240px */
}

/* Emoticon penceresi başlığı */
#smile_header {
    width: 100%; /* Tam genişlik kaplanır */
    height: 24px; /* Yükseklik 24px */
    padding: 3px 0; /* Yukarı ve aşağıdan 3px boşluk */
}

/* Emoticon penceresi başlığının yazı stili */
#smile_header {
    font-size: 20px; /* Yazı tipi büyüklüğü 20px */
}

/* Emoticon penceresi için kilit butonu */
.lock_sm {
    width: 40%; /* Genişlik %40 */
    float: left; /* Sol tarafa hizalanır */
    margin-left: 5px; /* Soldan 5px boşluk */
}

/* Emoticon penceresi için kapatma butonu */
.close_sm {
    width: 40%; /* Genişlik %40 */
    float: right; /* Sağ tarafa hizalanır */
    text-align: right; /* Sağda hizalanır */
    margin-right: 5px; /* Sağdan 5px boşluk */
}

/* Emoticon listesinin kaydırılabilir alanı */
#emo_list {
    width: 100%; /* Tam genişlik kaplanır */
    height: 100%; /* Tam yükseklik kaplanır */
    overflow-y: auto; /* Dikey kaydırma barı eklenir */
}

#list_emoticon {
    overflow-y: auto; /* Dikey kaydırma ekle */
    overflow-x: hidden; /* Yatay kaydırmayı kapat */
    max-height: 768px; /* Maksimum yükseklik ayarı */
    max-width: 90%; /* Küçük ekranlar için genişliği sınırlama */
    margin: 0 auto; /* Ortala */
    background: #000; /* Arka plan rengini koyu yap */
    border: 1px solid #848484; /* Kenar çizgisi ekle */
    border-radius: 5px; /* Köşeleri yuvarla */
}

#emo_list {
    overflow-y: auto; /* İç liste için kaydırma ekle */
    max-height: calc(100% - 50px); /* Kapsayıcı alanı doldur */
}