@font-face {
    font-family: 'JosefinSans-Bold';
    src: url('https://rezaervani.com/social/css/fonts/JosefinSans-Bold.ttf') format('truetype');
}

.navbar-brand {
    font-family: "JosefinSans-Bold", sans-serif;
    font-size: 1.75rem;
}

.status-card {
    background-color: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(27,31,35,.12), 0 1px 2px rgba(27,31,35,.24);
}

.status-content img {
    max-width: 100%;
}

/* .hideContent {
    overflow: hidden;
    line-height: auto;
    height: 5em;
} 

.showContent {
    line-height: auto;
    height: auto;
} */


.modern-login-form {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 4px;
  }

  .modern-login-button {
    background-color: #00ACEE;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px;
    width: 100%;
  }

  .modern-login-eye-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }

  .modern-login-eye-icon:hover {
    color: #00ACEE;
  }


.status-content .video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.status-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.status-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1px;
}

.status-username {
    font-weight: bold;
}

.status-timestamp {
    color: #657786;
}

.status-card-footer button {
    margin-right: 10px;
  }

.status-content {
    font-size: 18px;
    margin-bottom: 10px;
    height: 10em; /* Set the initial height to 5em */
    overflow: hidden; /* Hide content that overflows the height */
    transition: height 0.1s; /* Add a smooth transition effect */
}

.status-content:not(:empty) .tombol-lengkap {
    display: block;
  }

/* Custom CSS for nested styles */
.comments {
    margin-top: 20px;
}

.comment {
    border: 1px solid #e1e8ed;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.comment-username {
    font-weight: bold;
}

.comment-content {
    font-size: 16px;
}

        /* Custom CSS for the Twitter-style profile */
        .profile-header {
            background: #1da1f2;
            color: #fff;
            text-align: center;
            padding: 20px;
        }

        .profile-image {
            border: 5px solid #fff;
            border-radius: 50%;
            max-width: 150px;
        }

        .user-name {
            font-size: 24px;
            margin-top: 10px;
        }

        .user-handle {
            font-size: 18px;
        }

        .profile-stats {
            display: flex;
            justify-content: space-around;
            background: #f0f0f0;
            padding: 10px;
        }



        .profile-button {
            width: 100%;
            
        }

        .stat-label {
            font-weight: bold;
        }

        .stat-value {
            font-size: 20px;
        }

.popup {
    width: 100%;
    height: 100%;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    border: 1px solid #ccc;
    overflow: auto;
}

/* PEMBARUAN: Container untuk membungkus angka agar posisinya stabil */
.notification-container {
    position: absolute;
    top: 4px;
    left: 24px;
    pointer-events: none;
}

/* PEMBARUAN: Bulatan merah yang lebih "cantik" (Modern Style) */
.notification-activity {
    background-color: #ef4444; /* Merah red-500 Tailwind */
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 0px 5px;
    border-radius: 9999px; /* Bentuk Pill/Bulat sempurna */
    border: 2px solid white; /* Outline putih agar kontras dengan ikon */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* Bayangan halus */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    line-height: 1;
}

 /* Apply some general styling to the chat container */
.chat-container {
    max-height: calc(100vh - 10px); /* Adjust the height based on your needs */
    overflow-y: auto;
    padding: 0px;
    
}

.tampil-pesan {
    overflow-y: scroll;
    max-height: calc(65vh - 100px); /* Adjust the maximum height as needed */
    /* margin-top: 10px; */
}


/* Style user and other messages with different background colors */
.chat-box {
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    max-width: 70%;
}

.user-message {
    background-color: #C6F9AB; /* Light green, you can customize this */
    align-self: flex-end;
    margin-left: auto; /* Push user messages to the right */
}

.other-message {
    background-color: #F8E6C1; /* White, you can customize this */
    align-self: flex-start;
}

/* Style the input box and send button */
.input-grup-pesan {
    position: sticky;
    bottom: 0;
    background-color: #f7f7f7; /* Light gray, you can customize this */
    padding: 5px;
}

textarea.area-pesan {
    resize: none; /* Disable resizing of the textarea */
}

button.btn-pesan {
    margin-top: 10px;
}