/* Container */
.section-container {
    margin-bottom: 70px;
}
#event .section-title::after {
    content: "";
    margin: 0 auto;
    margin-top: 50px;
    display: block;
    width: 100px;
    height: 4px;
    background-color: var(--blue);
}
#event .form-control,
#event .form-select {
    border: 1px solid var(--blue);
    border-radius: var(--small-radius);
}

/* Button */
#event-list a:hover > div {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
#event button {
    font-size: .9rem;
    font-weight: 600;
    color: var(--yellow);
    background-color: var(--blue);
    border-radius: var(--big-radius);
    text-transform: uppercase;
}
#event button:hover {
    border-color: transparent !important;
}

/* Text/Image */
.section-title {
    color: var(--blue);
    margin-bottom: 50px;
}
#event a {
    color: inherit;
    text-decoration: none;
}
#event img {
    border-radius: var(--big-radius);
}

.title-page-event {
    font-size: 48px;
}

.highlight-info h5 {
    font-size: 32px;
}

.highlight-info span {
    font-size: 20px;
    color: #474747;
    font-weight: 500;
}

.highlight-info-not-found h5 {
    font-size: 32px;
}

.highlight-info-not-found p {
    font-size: 16px;
    color: #8F8F8F;
    font-weight: 500;
}

.highlight-info-not-found a {
    background-color: #0060CD;
    border-radius: 8px;
    color: #FFF;
    text-decoration: none;
    font-size: 16px;
    padding: 16px;
    width: fit-content;
}

.list-event-not-found h2 {
    font-size: 24px;
    font-weight: 600;
}

.list-event-not-found span {
    font-size: 16px;
    color: #626262;
}

.filter-input {
	position: relative;
	border-radius: 4px;
	border: 1px solid #d9d9d9;
	overflow: hidden;
	width: 100%;
	max-width: 400px;
}

.filter-input input {
	width: 100%;
	padding: 8px 0 8px 32px;
	border: 0 !important;
    border-radius: initial !important;
	margin: 0;
}

.filter-input::before {
	content: "";
	background-image: url('/images/components/navicon/carbon_search.png');
	width: 16px;
	height: 16px;
	background-size: contain;
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
}

.inter {
	font-family: "inter", sans-serif;
}

.btn-filter-date {
    border: 1px solid #D9D9D9;
    background: transparent;
    border-radius: 4px;
    padding: 8px 16px;
}

.card-event {
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px; /* Tentukan tinggi minimum kartu */
    height: 100%; /* Pastikan kartu memanfaatkan ruang penuh */
}

.card-event img {
    border-radius: 4px;
}

.card-event span {
    color: #474747;
    font-size: 16px;
}

.card-event h5 {
    font-size: 20px;
    flex-grow: 1; /* Pastikan judul menyesuaikan ruang */
    overflow: hidden; /* Sembunyikan teks yang terlalu panjang */
    text-overflow: ellipsis; /* Tambahkan ellipsis jika teks terlalu panjang */
    white-space: nowrap; /* Cegah teks melampaui satu baris */
}

.btn-register-event {
    color: white;
    background: #A80004;
    border-radius: 8px;
    text-decoration: none;
    font-size: 16px;
    display: flex;
    width: fit-content;
    font-weight: 600;
    transition: 0.2s ease-in-out all;
    border: 2px solid #A80004;
    padding: 12px 32px;
    align-self: flex-start; /* Pastikan tombol tetap di bawah */
}

.btn-register-event:hover {
    color: #A80004;
    background: white;
    text-decoration: none;
    border: 2px solid #A80004;
}

.image-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    border-radius: 4px;
    background: url('https://via.placeholder.com/300x200?text=Loading...') center center no-repeat;
    background-size: cover;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#event-date-range {
    border-radius: 4px !important;
    border: 1px solid #d9d9d9 !important;
    width: 100%;
    padding: 8px;
}

#event-sortby {
    border-radius: 4px !important;
    border: 1px solid #d9d9d9 !important;
    padding-top: 8px;
    padding-bottom: 8px;
}