/* 
	Catatan oleh pul 20250623

	property var(...) tidak digunakan karena tidak support untuk legacy browser,
	case pada TV sekretariat diskominfo yang menggunakan Tizen Browser yang tidak
	support property var(...)
 */

:root {
	--primary: #0b9b46;
	--primary-dark: #0a58ca;
	--secondary: #6c757d;
	--success: #0b9b46;
	--info: #0dcaf0;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #212529;
	--white: #ffffff;
	--border-radius: 0.375rem;
	--transition: all 0.2s ease-in-out;
	--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	--font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--primary-shade-light-1: #3aa559;
	--primary-shade-light-2: #56af6b;
	--primary-shade-light-3: #6dba7e;
	--primary-shade-light-4: #83c490;
	--primary-shade-light-5: #99cea2;
	--primary-shade-light-6: #add8b4;
	--primary-shade-light-7: #c2e2c7;
	--primary-shade-light-8: #d6ebd9;
	--primary-shade-light-9: #ebf5ec;

	--primary-shade-dark-1: #08863c;
	--primary-shade-dark-2: #067232;
	--primary-shade-dark-3: #045e28;
	--primary-shade-dark-4: #024b1e;
	--primary-shade-dark-5: #013915;
	--primary-shade-dark-6: #01280d;
	--primary-shade-dark-7: #001805;
	--primary-shade-dark-8: #000902;
	--primary-shade-dark-9: #000100;

	/* --primary-row-odd: var(--primary-shade-light-7); */
	--primary-row-odd: #c2e2c7;
	/* --primary-row-even: var(--primary-shade-light-9); */
	--primary-row-even: #ebf5ec;
}

.btn {
	display: inline-block;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 0.9rem;
	line-height: 1.5;
	/* border-radius: var(--border-radius); */
	border-radius: 0.375rem;
	/* transition: var(--transition); */
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}

.btn-primary {
	/* color: var(--white); */
	color: #FFF;
	/* background-color: var(--primary); */
	background-color: #0b9b46;
	/* border-color: var(--primary); */
	border-color: #0b9b46;
}

.btn-primary:hover {
	/* background-color: var(--primary-dark); */
	background-color: #0a58ca;
	/* border-color: var(--primary-dark); */
	border-color: #0a58ca;
}

.btn-warning {
	/* background-color: var(--warning); */
	background-color: #ffc107;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-btn {
	/* background-color: var(--light); */
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	/* color: var(--dark); */
	color: #212529;
	padding: 0.375rem 1rem;
	font-size: 0.9rem;
	/* border-radius: var(--border-radius); */
	border-radius: 0.375rem;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.dropdown-btn:after {
	content: "";
	display: inline-block;
	margin-left: 0.5rem;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
}

.alert-bar {
	/* background-color: var(--warning); */
	background-color: #ffc107;
	/* color: var(--dark); */
	color: #212529;
	padding: 0.5rem 0;
	position: relative;
	overflow: hidden;
}

.alert-content {
	animation: scrollText 20s linear infinite;
	white-space: nowrap;
	padding-left: 100%;
}

.card-first {
	margin-top: -15px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
}
.card-second {
	margin-top: -25px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
}

@keyframes scrollText {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

.main-content {
	padding: 2rem 0;
}

.card {
	background-color: #fdf6ac;
	/* border-radius: var(--border-radius); */
	border-radius: 0.375rem;
	/* box-shadow: var(--shadow); */
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	margin-bottom: 2rem;
	overflow: hidden;
}

.card-header {
	padding: 1rem;
	/* background-color: var(--success); */
	background-color: #0b9b46;
	/* color: var(--white); */
	color: #FFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}

.card-body {
	padding: 0;
}

.agenda-table {
	width: 100%;
	border-collapse: collapse;
}

.agenda-table th {
	background-color: #ffc107;
	text-align: left;
	padding: 0.7rem;
	font-weight: 600;
	/* color: var(--dark); */
	color: #212529;
	border-bottom: 1px solid #dee2e6;
}

.agenda-table td {
	padding: 1rem;
	border-bottom: 1px solid #dee2e6;
	vertical-align: top;
}

/* This rule now has higher specificity and uses !important */
.agenda-table tr:last-child td,
.agenda-table-body tr:last-child td {
	border-bottom: none !important;
}

.agenda-table tr:hover {
	background-color: #faec49;
}

.badge {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 10rem;
}

.badge-primary {
	/* color: var(--white); */
	color: #FFF;
	/* background-color: var(--primary); */
	background-color: #0b9b46;
}

.badge-success {
	/* color: var(--white); */
	color: #FFF;
	/* background-color: var(--success); */
	background-color: #0b9b46;
}

.badge-warning {
	/* color: var(--dark); */
	color: #212529;
	/* background-color: var(--warning); */
	background-color: #ffc107;
}

.time-badge {
	display: flex;
	align-items: center;
}

.time-badge i {
	margin-right: 0.25rem;
}

.future-events {
	/* background-color: var(--success); */
	background-color: #0b9b46;
	/* color: var(--white); */
	color: #FFF;
}

.footer {
	/* background-color: var(--success); */
	background-color: #0b9b46;
	/* color: var(--light); */
	color: #f8f9fa;
	padding: 1rem 0;
	text-align: center;
	position: fixed;
	bottom: 0;
	width: 100%;
}

/* Fixed Marquee Styles */
.marquee-wrapper {
	position: relative;
	overflow: hidden;
	height: 150px; /* Adjust height as needed */
	/* border-bottom: 1px solid #dee2e6; */
}

.marquee-viewport {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.marquee-content {
	position: absolute;
	width: 100%;
	animation: smoothScroll 10s linear infinite;
}

.agenda-table-body {
	width: 100%;
	border-collapse: collapse;
	border-top: none;
}

.agenda-table-body tr td {
	border: 1px solid #dee2e6;
}

/* Removed the conflicting rule that was adding the border back */
/* .agenda-table tr:last-child td {
          border-bottom: 1px solid #dee2e6;
        } */

.agenda-table td {
	line-height: 1.3; /* You can adjust this value as needed */
}

@keyframes smoothScroll {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(-100%);
	}
}

/* Optional: pause animation on hover */
.marquee-wrapper:hover .marquee-content {
	animation-play-state: paused;
}

#filter-section {
	display: flex;
	align-items: center;
}

#filter-section label {
	margin-right: 10px;
}

#filter-section select {
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-right: 10px;
}

#filter-section button {
	padding: 8px 16px;
	background-color: #daa520;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

#filter-section button:hover {
	background-color: #c9a023;
}



.header {
	/* background-color: var(--primary-shade-dark-1) !important; */
	background-color: #08863c !important;
}

.footer-rev #running {
    /* background-color: var(--primary) !important; */
    background-color: #0b9b46 !important;
}

.agenda-details .details-kegiatan {
	/* color: var(--primary-shade-dark-2) !important; */
	color: #067232 !important;
}

.table-flex-item {
	/* background-color: var(--primary-shade-light-9) !important; */
	background-color: #ebf5ec !important;
}

.table-flex-item header {
	/* background-color: var(--primary) !important; */
	background-color: #0b9b46 !important;
}

.table-flex-item .table-scroller li {
	/* background-color: var(--primary-shade-light-9) !important; */
	background-color: #ebf5ec !important;
}

.table-flex-item .next {
    /* background-color: var(--warning) !important; */
    background-color: #ffc107 !important;
}

.table-flex-item .nama-opd {
    /* background-color: var(--primary) !important; */
    background-color: #0b9b46 !important;
}

.table-flex-item .row.odd {
	/* background-color: var(--primary-row-odd) !important; */
	background-color: #c2e2c7 !important;
}

.table-flex-item .row.even {
	/* background-color: var(--primary-row-even) !important; */
	background-color: #ebf5ec !important;
}