.youtube-wrapper{
    position: relative;
    width: 100%;
}

.video-actions{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;

    display: flex;
    gap: 5px;
}

.video-actions a{
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: #fff;

    text-decoration: none;
}

.video-actions a:hover{
    background: #2196f3;
    color: #fff;
}

.chat-wrapper {
    position: fixed;
    right: 20px;
    bottom: 10px;
    width: 340px;
    z-index: 9999;
}

.online-user{
    display:flex;
    align-items:center;
    padding:0 12px;
}

.online-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#00a65a;
    margin-right:10px;
    flex-shrink:0;
}

.online-info{
    flex:1;
    min-width:0;
}

.online-name{
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:600;
    line-height:20px;
    white-space:normal;
    word-break:break-word;
    color: black;
}

.online-name .label{
    margin:0;
    font-size:10px;
    font-weight:normal;
}

.online-user-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

.online-user-link:hover{
    background:#f4f4f4;
    text-decoration:none;
}

.btn-box-tool {
    color :#fff !important;
}

.chat-wrapper .input-group{
    display:table;
    width:100%;
}

.chat-wrapper .chat-input{
    height:60px !important;
    resize:none;
}

.chat-wrapper .input-group-btn{
    vertical-align: middle !important;
}

.chat-wrapper .input-group-btn .chat-send{
    display: block;
    height: 60px;      /* samakan dengan tinggi textarea */
    min-height: 60px;
}
.chat-body{
    padding:10px;
    position: relative;
    overflow-y: auto;
}
/* Class tombol custom berbasis latar putih */
.btn-white {
    background-color: #ffffff !important;
    background-image: none !important; /* Menghapus gradient bawaan BS 3.3.7 */
    color: #333333 !important;          /* Warna teks & icon gelap agar kontras */
    border: 1px solid #cccccc !important; /* Border tipis agar bentuk tombol jelas */
    border-radius: 6px !important;       /* Atur kelengkungan sudut sesuai kebutuhan */
    box-shadow: none !important;
    transition: all 0.2s ease-in-out;
}

/* Efek saat tombol di-hover, difokuskan, atau diklik */
.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white.active {
    background-color: #f5f5f5 !important; /* Warna agak abu-abu saat di-hover */
    color: #000000 !important;
    border-color: #adadad !important;
}

/* Styling Kotak Alert Custom */
.alert-custom-box {
    background-color: #ffffff !important;
    border: 1px solid #222222 !important; /* Border hitam tipis tegas */
    border-radius: 6px !important;        /* Sudut sedikit membulat */
    color: #333333 !important;
    /*padding: 12px 16px !important;*/
    margin-bottom: 15px;
    position: relative;
}

/* Judul Alert (Ikon + Teks Alert!) */
.alert-custom-box .alert-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    color: #222222;
}

.alert-custom-box .alert-title i {
    margin-right: 8px;
    font-size: 16px;
}

/* Pesan Alert di Baris Kedua */
.alert-custom-box .alert-message {
    font-size: 14px;
    color: #222222;
    margin: 0;
}

/* Tombol Close (x) di Kanan Atas */
.alert-custom-box .close {
    font-size: 18px;
    font-weight: bold;
    color: #999999;
    opacity: 0.7;
    text-shadow: none;
    outline: none;
}

.alert-custom-box .close:hover {
    color: #333333;
    opacity: 1;
}

/* Styling Pagination Bulat Custom */
.pagination-circle > li {
    display: inline-block !important; /* Memisah tombol dari grup menyatu */
    margin: 0 3px !important;         /* Memberi jarak antar tombol */
}

.pagination-circle > li > a,
.pagination-circle > li > span {
    border-radius: 50% !important;    /* Membuat bentuk lingkaran sempurna */
    width: 36px;                      /* Ukuran lebar lingkaran */
    height: 36px;                     /* Ukuran tinggi lingkaran */
    padding: 0 !important;            /* Reset padding bawaan */
    line-height: 34px !important;     /* Menyejajarkan teks/angka vertikal pas di tengah */
    text-align: center !important;
    border: 1px solid #ddd !important;
    color: #333333;
    transition: all 0.2s ease-in-out;
}

/* Penyesuaian khusus tombol berpembatas teks panjang (seperti 'Awal' & 'Akhir') */
.pagination-circle > li > a:not(:empty) {
    width: auto;
    min-width: 36px;
    padding: 0 12px !important;
    border-radius: 18px !important;  /* Bentuk kapsul/pill untuk teks panjang */
}

/* Efek saat Hover */
.pagination-circle > li > a:hover,
.pagination-circle > li > span:hover {
    background-color: #f5f5f5 !important;
    border-color: #adadad !important;
    color: #000000;
}

/* Tampilan Tombol Aktif (Page Saat Ini) */
.pagination-circle > .active > a,
.pagination-circle > .active > span,
.pagination-circle > .active > a:hover,
.pagination-circle > .active > span:hover,
.pagination-circle > .active > a:focus,
.pagination-circle > .active > span:focus {
    background-color: #31708f !important; /* Warna biru aktif (bisa disesuaikan) */
    border-color: #31708f !important;
    color: #ffffff !important;
}

/* Tampilan Tombol Disabled (Tidak bisa diklik) */
.pagination-circle > .disabled > span,
.pagination-circle > .disabled > a {
    color: #cccccc !important;
    background-color: #ffffff !important;
    border-color: #eeeeee !important;
}
.content-header {
    padding : 45px 15px 0 15px !important;
}
/* Mengunci tinggi area judul agar selalu sama (maksimal 2 baris) */
.video-title-clamp {
    height: 2.8em; /* Mengunci tinggi wadah judul untuk 2 baris teks */
    line-height: 1.4em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Batasi maksimal 2 baris */
    -webkit-box-orient: vertical;
    margin-bottom: 8px; /* Jarak antara judul dan video */
}