@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-SemiBold.ttf');
    font-weight: 600;
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-ExtraBold.ttf');
    font-weight: 800;
}



* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	/* font-family: var(--font-family); */
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 0.97;
	/* color: var(--dark); */
	color: #212529;
	background-color: #f5f5f7;
	padding-bottom: 60px;
    overflow: hidden;
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.header {
	/* background-color: var(--primary-shade-dark-1); */
	/* background-color: #08863c; */
	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1rem;
}

.logo-section {
	display: flex;
	align-items: center;
}

.logo {
	height: 60px;
	margin-right: 1rem;
}

.instansi-section {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 7px;
    /* color: var(--dark); */
    color: #212529;
    /* background-color: var(--warning); */
    background-color: #ffc107;
    align-self: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.instansi-nama {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.title-section h1 {
	font-size: 1.5rem;
	font-weight: 700;
	/* color: var(--white); */
	color: #FFF;
	margin: 0;
}

.title-section h1.sub-title {
	font-size: 1.5rem;
	font-weight: 700;
	/* color: var(--warning); */
	color: #ffc107;
	margin: 0;
}

.user-section {
	display: flex;
	align-items: center;
}

.date-time {
	text-align: right;
	margin-right: 1.5rem;
}

.date {
	font-size: 0.9rem;
	/* color: var(--white); */
	color: #FFF;
}

.time {
	font-size: 1.5rem;
	font-weight: 700;
	/* color: var(--white); */
	color: #FFF;
}

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

.footer-rev {
    position: fixed;
    bottom: -5px;
    width: 100%;
    height: 5.5%;
    *zoom: 1;
}

.footer-rev:before,
.footer-rev:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.footer-rev:after {
    clear: both;
}

.footer-rev:before,
.footer-rev:after {
    display: table;
    content: "";
    line-height: 0;
}

.footer-rev:after {
    clear: both;
}

.footer-rev:before,
.footer-rev:after {
    content: " ";
    display: table;
}

.footer-rev:after {
    clear: both;
}

.footer-rev #copyright {
    width: 14%;
    background-color: #efc10b;
    text-align: center;
    font-size: 1em;
    float: left;
}

.footer-rev #copyright p {
    font-family: "OpenSansBold", Helvetica, Arial, sans-serif;
    margin: 0;
    line-height: 2.6em;
    letter-spacing: 1px;
}

.footer-rev #running {
    width: 86%;
    /* background-color: var(--primary); */
    /* background-color: #0b9b46; */
    position: relative;
    z-index: 1;
    font-size: 1em;
    float: left;
}

.footer-rev #running p {
    font-family: "OpenSansRegular", Helvetica, Arial, sans-serif;
    color: white;
    position: relative;
    margin: 0;
    margin-right: 2em;
    padding: .8em 0;
    padding-left: 2em;
    line-height: 1em;
    letter-spacing: 1px;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    /* Fix for IE7 */
    *display: inline;
    /* Fix for IE7 */
    text-rendering: optimizeLegibility;
    z-index: 1;
}

.footer-rev #running p:before {
    content: url('../images/running.png');
    position: absolute;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    /* Fix for IE7 */
    *display: inline;
    /* Fix for IE7 */
    width: 25px;
    height: 25px;
    margin-right: 20px;
    top: 9px;
    left: -10px;
    overflow: hidden;
}

.date-rev {
	font-size: 1.2rem;
	/* color: var(--white); */
	color: #FFF;
}

.time-rev {
	font-size: 2rem;
	font-weight: 700;
	/* color: var(--white); */
	color: #FFF;
}



/* Hide mobile menu toggle by default */
.mobile-menu-toggle {
	display: none;
	background: none;
	border: none;
	/* color: var(--white); */
	color: #FFF;
	font-size: 1.5rem;
	cursor: pointer;
}

.mobile-container {
	width: 100%;
	background-color: plum;
	display: none;
}

.mobile-container .mobile-tanggal {
	padding: 0.75rem;
	font-size: 1.5rem;
	/* color: var(--dark); */
	color: #212529;
	background-color: #efc10b;
	font-weight: bold;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
	z-index: 10;
}

.mobile-container .mobile-agenda {
	padding: 0.5rem;
	display: flex;
	flex-direction: row;
}

.mobile-container .mobile-agenda.agenda-even {
	background-color: #ddd;
}

.mobile-container .mobile-agenda.agenda-odd {
	background-color: #f5f5f5;
}

.mobile-agenda .agenda-no {
	min-width: 50px;
	/* background-color: bisque; */
	display: flex;
	justify-content: center;
	align-items: center;
	color: darkslategray;
}

.mobile-agenda .agenda-details {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.5rem 0;
}

.mobile-agenda .agenda-no p {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

.agenda-details .details-jam {
	font-size: 1.2rem;
	font-weight: 700;
}

.agenda-details .details-kegiatan {
	font-size: 1.3rem;
	line-height: 1.7rem;
	font-weight: 700;
	/* color: var(--primary-shade-dark-2); */
	/* color: #067232; */
}

.agenda-details .details-lokasi {
	font-size: 1.1rem;
	line-height: 1.5rem;
}

.agenda-details .details-keterangan {
	font-size: 1.1rem;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
	.agenda-table th,
	.agenda-table thead th,
	.card-body .agenda-table th {
		border: none !important;
		border-bottom: none !important;
	}
	.header-content {
		flex-direction: column;
		align-items: flex-start;
	}

	.logo-section {
		/* margin-bottom: 0.75rem; */
		width: 100%;
	}

    .instansi-section {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }

	.title-section h1 {
		font-size: 1.1rem;
	}

	.title-section h1.sub-title {
		font-size: 1rem;
	}

	.user-section {
		width: 100%;
		justify-content: space-between;
		margin-top: 0.5rem;
	}

	.logo {
		height: 40px;
		margin-right: 0.5rem;
	}

	.date-time {
		margin-right: 0.5rem;
	}

	.time {
		font-size: 1.1rem;
	}

	.date {
		font-size: 0.8rem;
	}

	.dropdown-btn {
		padding: 0.25rem 0.5rem;
		font-size: 0.8rem;
	}

	.btn {
		padding: 0.25rem 0.5rem;
		font-size: 0.8rem;
	}

	.card-header {
		padding: 0.75rem;
		flex-direction: column;
		align-items: flex-start;
	}

	.badge-warning {
		margin-top: 0.5rem;
	}

	.agenda-table th {
		padding: 0.5rem;
		font-size: 0.8rem;
	}

	.agenda-table td {
		padding: 0.5rem;
		font-size: 0.8rem;
	}

	/* Responsive Table for Mobile */
	.agenda-table,
	.agenda-table-body {
		table-layout: fixed;
	}

	.agenda-table th:nth-child(1),
	.agenda-table td:nth-child(1) {
		width: 10% !important;
	}

	.agenda-table th:nth-child(2),
	.agenda-table td:nth-child(2) {
		width: 40% !important;
	}

	.agenda-table th:nth-child(3),
	.agenda-table td:nth-child(3) {
		width: 15% !important;
	}

	.agenda-table th:nth-child(4),
	.agenda-table td:nth-child(4) {
		width: 20% !important;
	}

	.agenda-table th:nth-child(5),
	.agenda-table td:nth-child(5) {
		width: 15% !important;
	}

	/* Adjust marquee for mobile */
	.marquee-wrapper {
		height: 200px;
	}

	/* Small mobile screens */
	@media (max-width: 480px) {
        body {
            overflow: auto;
        }

        .title-section h1 {
            font-size: 1.1rem;
        }

        .title-section h1.sub-title {
            font-size: 1rem;
        }

		.date-time {
			display: none;
		}

        .table-flex-container {
            /* visibility: hidden; */
            display: none !important;
        }

		.logo-section {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}

        .logo {
            height: 40px;
            margin-right: 0.5rem;
        }

		.instansi-section {
			margin-bottom: 0;
		}

		.instansi-nama {
			font-size: 1rem;
		}

		/* Show mobile menu toggle only on small screens */
		.mobile-menu-toggle {
			display: block;
			margin-left: auto;
			padding: 0.25rem 0.5rem;
		}

		.user-controls {
			display: flex;
			width: 100%;
			justify-content: space-between;
		}

		.dropdown-btn {
			width: 80px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.card-header {
			padding: 0.5rem;
		}

		.card-title {
			font-size: 0.9rem;
		}

		.footer-rev {
			display: none;
		}

		/* Stack table content vertically for very small screens */
		.agenda-table thead,
		.card-body .agenda-table thead {
			/* display: none; */
			border: none !important;
		}

		/* Target any remaining th elements */
		.agenda-table th,
		.agenda-table thead th,
		.card-body .agenda-table th {
			border: none !important;
			border-bottom: none !important;
		}

		/* Additionally, remove borders from the table */
		.agenda-table,
		.agenda-table-body {
			border: none !important;
		}
		.agenda-table-body td:before {
			position: absolute;
			left: 0.5rem;
			width: 35%;
			padding-right: 10px;
			white-space: nowrap;
			font-weight: bold;
		}
		.agenda-table th {
			padding: 0.5rem;
			font-size: 0.5rem;
		}

		/* Adjust marquee height for stacked content */
		.marquee-wrapper {
			height: 300px;
		}

		.footer {
			font-size: 0.5rem;
		}
		
		.mobile-container {
			display: flex;
			flex-direction: column;
		}
	}
}



.onerow {
	width: 100%;
}

.table-custom {
    font-size: 1.2em;
}
.table-custom .no,
.table-custom .kegiatan,
.table-custom .tanggal,
.table-custom .jam,
.table-custom .tempat,
.table-custom .keterangan {
    position: relative;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    /* Fix for IE7 */
    /* display: inline; */
    /* Fix for IE7 */
}
.table-custom .no {
    width: 3%;
    text-align: center;
}
.table-custom .kegiatan {
    width: 30%;
}
.table-custom .tanggal {
    width: 13%;
    text-align: center;
}
.table-custom .jam {
    width: 10%;
    text-align: center;
}
.table-custom .tempat {
    width: 22%;
}
.table-custom .keterangan {
    width: auto;
}
.table-custom .satu {
    text-align: center;
    width: 100%;
    background-color: #0b9a45;
    color: white;
}
.table-custom header {
    background-color: #efc10b;
    font-family: "OpenSansBold", Helvetica, Arial, sans-serif;
    color: #161616;
    width: 100%;
}
.table-custom header > div {
    padding: 1.5vh 1vh;
}
.table-custom main {
    width: 100%;
    height: 72%;
    overflow: hidden;
}
.table-custom main ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.table-custom main ul li {
    margin: 0;
    padding: 0;
}
.table-custom .row {
    font-family: "OpenSansSemibold", Helvetica, Arial, sans-serif;
}
.table-custom .row > div {
    padding: 1.5vh 1vh;
}
.table-custom .row.odd {
	background-color: #faec49;
	color: #222;
}
.table-custom .row.even {
	background-color: #fdf6ac;
	color: #222;
}



.table-flex-container {
	display: flex;
	flex-direction: column;
    font-size: 1.2rem;
	line-height: 1.5;
    overflow: hidden;
}

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

.table-flex-item.item-satu {
    height: 40vh;
}

.table-flex-item.item-dua {
    height: 55vh;
}

.table-flex-item header {
	/* background-color: var(--primary); */
	/* background-color: #0b9b46; */
	font-family: "OpenSans", Helvetica, Arial, sans-serif;
	color: #fff;
	width: 100%;
	display: flex;
	flex-direction: row;
}

.table-flex-item main {
	overflow: hidden;
}

.table-flex-item .table-scroller li {
	/* background-color: var(--primary-shade-light-9); */
	/* background-color: #ebf5ec; */
	font-family: "OpenSans", Helvetica, Arial, sans-serif;
	color: #161616;
	width: 100%;
	display: flex;
	flex-direction: row;
}

.table-flex-item header > div {
	/* border: 1px solid black; */
    padding: 1.5vh 1.5vh;
	font-weight: bold;
}

.table-flex-item .table-scroller li div {
	/* border: 1px solid black; */
    padding: 1.5vh 1.5vh;
    font-weight: 600;
}

.table-flex-item header .no,
.table-flex-item .table-scroller .no,
.table-flex-item header .tanggal,
.table-flex-item .table-scroller .tanggal,
.table-flex-item header .jam,
.table-flex-item .table-scroller .jam {
	text-align: center;
}

.table-flex-item .next {
    flex: 1;
    text-align: center;
    /* background-color: var(--warning); */
    /* background-color: #ffc107; */
    color: #161616;
}

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

.table-flex-item .no {
    flex-basis: 4%;
}

.table-flex-item .kegiatan {
    flex-basis: 35%;
}

.table-flex-item .tanggal {
    flex-basis: 15%;
}

.table-flex-item .jam {
    flex-basis: 5%;
}

.table-flex-item .tempat {
    flex-basis: 20%;
}

.table-flex-item .keterangan {
    flex-grow: 1;
}

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

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