/* Global Styles */
body {
    background-color: #f5f5f5;
    font-family: 'Arial', sans-serif;
    padding-top: 70px;
}

.meetingLink {
    text-decoration: none;
    list-style: none;
    color: black;
}
/* Generic Components */
.card {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    margin-bottom: 20px;
}

.card-header {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #e9ecef;
}

.card-footer {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-top: 1px solid #e9ecef;
}

/* Navbar */
.navbar {
    @extend .card;
    background-color: white;
    padding: 1rem;
}

.navbar-brand img {
    height: 50px;
}

/* Search Bar */
.search-bar {
    width: 300px;
}

/* Content Section */
.content, .main-content {
    margin-top: 20px;
}

.post-card, .thread-card {
    @extend .card;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 20px;
}

.thread-card img {
    border-radius: 50%;
    height: 50px;
    width: 50px;
}

.thread-card .badge {
    background-color: #00C0DF;
    color: white;
}

/* section  */
.sectionHome {
    padding:0;
    margin:0;
    background: #fcf8f1;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    top: 14%; /* Sesuaikan dengan tinggi navbar */
}

.sidebar .card img {
    border-radius: 10px;
}

.sidebar .card-title {
    font-size: 1.1rem;
    font-weight: bold;
}
.btn-none:hover {
    box-shadow: 5px 10px;
}
.border-first::placeholder {
  color: #00C0DF;
  opacity: 1; /* Firefox */
}
.border-first {
    border: 1px solid #00C0DF;
}

.text-first {
    color: #00C0DF;
}
.text-red {
    color: #dc3545;
}
.text-pink {
    color: #FF78DC;
}

.bg-first {
    background: #00C0DF;
}
.bg-grey {
    background: #eee !important;
}

.btn-first {
    background: #00C0DF;
    color:white;
}
.btn-first:hover {
    color: #00C0DF;
    background:white;
    border-color: #00C0DF;
}
.btn-outline-first {
  color: #00C0DF;
  border-color: #00C0DF;
}
.btn-outline-first:hover {
  color: white;
  background: #00C0DF;
}

.sidebar .card-text {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Thread Sidebar */
.thread-sidebar {
    @extend .card;
    padding: 15px;
}

.thread-item {
    margin-bottom: 15px;
}

.thread-item img {
    width: 100%;
    height: auto;
}

.thread-item p {
    margin: 0;
}

.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
}

.hover-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}