::selection{ background-color: #E13300; color: white; }
	::moz-selection{ background-color: #E13300; color: white; }
	::webkit-selection{ background-color: #E13300; color: white; }

	body {
		background-color: #fff;
		margin:0px auto;
		font-size:12px;
		font-family:'Tahoma',Arial;
		color: #4F5155;
		width:900px;
		background-image:url(../images/bg-diagonal.png);
	}

	a {
		color: #003399;
		background-color: transparent;
		font-weight: normal;
	}

	h1 {
		color: #444;
		background-color: transparent;
		border-bottom: 1px solid #D0D0D0;
		font-size: 19px;
		font-weight: normal;
		margin: 0 0 14px 0;
		padding: 14px 15px 10px 15px;
	}

	/* ============================================
	   TABLE STYLING - Consistent across all pages
	   ============================================ */
	
	.styled-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 12px;
		margin: 15px 0;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
		background: #fff;
	}

	.styled-table thead tr {
		background-color: #f7f7f7;
		text-align: center;
		font-weight: bold;
		border-bottom: 2px solid #ddd;
	}

	.styled-table th,
	.styled-table td {
		padding: 10px 12px;
		border: 1px solid #ddd;
	}

	.styled-table tbody tr {
		border-bottom: 1px solid #ddd;
	}

	.styled-table tbody tr:nth-of-type(even) {
		background-color: #f9f9f9;
	}

	.styled-table tbody tr:hover {
		background-color: #f1f1f1;
		transition: background-color 0.2s ease;
	}

	.styled-table tbody tr:last-of-type {
		border-bottom: 2px solid #ddd;
	}

	/* Table title row */
	.styled-table .table-title {
		background-color: #fff;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 13px;
		padding: 12px;
	}

	/* Existing table class compatibility */
	.table-bordered {
		width: 100%;
		border-collapse: collapse;
		font-size: 12px;
		margin: 15px 0;
	}

	.table-bordered th,
	.table-bordered td {
		border: 1px solid #ddd;
		padding: 10px 12px;
	}

	.table {
		width: 100%;
		margin-bottom: 1rem;
		background-color: transparent;
	}

	/* ============================================
	   FORM CONTROLS - Consistent input styling
	   ============================================ */
	
	.form-control {
		display: block;
		width: 100%;
		padding: 8px 12px;
		font-size: 12px;
		line-height: 1.5;
		color: #555;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		transition: border-color 0.15s ease-in-out;
	}

	.form-control:focus {
		border-color: #66afe9;
		outline: 0;
		box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.2);
	}

	.form-group {
		margin-bottom: 15px;
	}

	.form-group label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
		color: #333;
	}

	/* Form table layout (for add/edit event forms) */
	.form-table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
	}

	.form-table td {
		padding: 8px 10px;
		vertical-align: middle;
	}

	.form-table td:first-child {
		font-weight: 500;
		color: #333;
		white-space: nowrap;
		width: 150px;
	}

	.form-table input[type="text"],
	.form-table select {
		width: 100%;
		padding: 8px 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 12px;
		box-sizing: border-box;
	}

	.form-table input[type="text"]:focus,
	.form-table select:focus {
		border-color: #66afe9;
		outline: 0;
		box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.2);
	}

	/* ============================================
	   BUTTONS - Modern consistent button styling
	   ============================================ */
	
	.btn {
		display: inline-block;
		padding: 8px 16px;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.5;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		cursor: pointer;
		border: 1px solid transparent;
		border-radius: 4px;
		transition: all 0.15s ease-in-out;
		white-space: nowrap;
	}

	.btn:hover {
		opacity: 0.9;
		text-decoration: none;
	}

	.btn-primary {
		color: #fff;
		background-color: #337ab7;
		border-color: #2e6da4;
	}

	.btn-primary:hover {
		background-color: #286090;
		border-color: #204d74;
	}

	.btn-success {
		color: #fff;
		background-color: #5cb85c;
		border-color: #4cae4c;
	}

	.btn-success:hover {
		background-color: #449d44;
		border-color: #398439;
	}

	.btn-info {
		color: #fff;
		background-color: #5bc0de;
		border-color: #46b8da;
	}

	.btn-info:hover {
		background-color: #31b0d5;
		border-color: #269abc;
	}

	.btn-warning {
		color: #fff;
		background-color: #f0ad4e;
		border-color: #eea236;
	}

	.btn-warning:hover {
		background-color: #ec971f;
		border-color: #d58512;
	}

	.btn-danger {
		color: #fff;
		background-color: #d9534f;
		border-color: #d43f3a;
	}

	.btn-danger:hover {
		background-color: #c9302c;
		border-color: #ac2925;
	}

	.btn-default {
		color: #333;
		background-color: #fff;
		border-color: #ccc;
	}

	.btn-default:hover {
		background-color: #e6e6e6;
		border-color: #adadad;
	}

	.btn-sm {
		padding: 5px 10px;
		font-size: 11px;
	}

	.btn-lg {
		padding: 10px 20px;
		font-size: 14px;
	}

	/* ============================================
	   EXISTING STYLES (preserved)
	   ============================================ */

	#bg-line {
		font-size: 12px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		display: block;
		margin: 14px 0 14px 0;
		padding: 12px 10px 12px 10px;
	}

	.input-teks-login {
		font-size: 12px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		color: #002166;
		display: block;
		margin: 14px 0 14px 0;
		padding: 12px 10px 12px 10px;
		width:95%;
	}

	.input-read-only {
		background-image:url(../images/bg-menu.jpg);
		background-position:center;
		background-repeat:repeat-x;
		border: 1px solid #D0D0D0;
		padding: 5px;
	}

	.link {
		background-color: #000;
		padding: 5px 8px 5px 8px;
		-moz-border-radius: 20px; 
		border-radius: 20px;
		text-decoration:none;
		color:#FFFFFF;
		float:left;
	}

	.link:hover {
		background-color: #FF3300;
		padding: 5px 8px 5px 8px;
		-moz-border-radius: 20px; 
		border-radius: 20px;
		text-decoration:none;
		float:left;
	}

	.link2 {
		background-color: #000;
		padding: 5px 8px 5px 8px;
		-moz-border-radius: 20px; 
		border-radius: 20px;
		text-decoration:none;
		color:#FFFFFF;
	}

	.link2:hover {
		background-color: #FF3300;
		padding: 5px 8px 5px 8px;
		-moz-border-radius: 20px; 
		border-radius: 20px;
		text-decoration:none;
	}

	.btn-kirim-login {
		font-size: 12px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		padding: 9px 10px 9px 10px;
		background-image:url(../images/bg-menu.gif);
		background-repeat:repeat-x;
		background-position:center;
		color:#FFFFFF;
		cursor:pointer; 
		-moz-border-radius: 6px; 
		border-radius: 6px;
	}

	.btn-kirim {
		font-size: 12px;
		background-color: #337ab7;
		border: 1px solid #2e6da4;
		padding: 8px 16px;
		color:#FFFFFF;
		cursor:pointer; 
		border-radius: 4px;
		text-decoration: none;
		display: inline-block;
		transition: all 0.15s ease-in-out;
	}

	.btn-kirim:hover {
		background-color: #286090;
		border-color: #204d74;
	}

	#body{
		margin: 0 15px 0 15px;
	}

	#body h5{
		margin:0px;
		padding:0px;
	}

	#body h4{
		margin:0px 0px 10px 0px;
		padding:0px;
	}
	
	p.footer{
		text-align: right;
		font-size: 11px;
		border-top: 1px solid #D0D0D0;
		padding: 10px 10px 20px 10px;
		margin: 20px 0 0 0;
		line-height:18px;
	}
	
	#container{
		margin: 10px;
		border: 1px solid #D0D0D0;
		-webkit-box-shadow: 0 0 8px #D0D0D0;
		background-color:#FFFFFF;
	}
	
	#menu {
		background-image: url(../images/bg-menu.gif);
		background-repeat: repeat-x;
		padding: 0;
		margin: 0 auto;
		border: 1px solid #D0D0D0;
		border-radius: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#menu ul {
		display: flex;
		flex-wrap: nowrap;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#menu li {
		flex: 0 0 auto;
		padding: 10px 15px;
		border-right: 1px solid #D0D0D0;
		white-space: nowrap;
		margin: 0;
	}

	#menu li a {
		color: #fff !important;
		text-decoration: none;
	}

	#menu li a:hover {
		color: #FFFF00 !important;
		text-decoration: underline;
	}

	#menu::-webkit-scrollbar {
		height: 6px;
	}
	#menu::-webkit-scrollbar-thumb {
		background: rgba(0,0,0,0.2);
		border-radius: 3px;
	}
	#menu::-webkit-scrollbar-track {
		background: transparent;
	}
	
	#list{
		padding:5px;
	}
	
	#list ul{
		margin:5px 10px 5px 30px;
		padding:0px;
	}
	
	#list li{
		padding:5px 15px 5px 15px;
	}
	
	.line-dot { clear: both; width:100%; height: 10px; border-bottom:1px dashed #333333; }
	
	.cleaner_h0 { clear: both; width:100%; height: 0px; }
	.cleaner_h5 { clear: both; width:100%; height: 5px; }
	.cleaner_h3 { clear: both; width:100%; height: 3px; }
	.cleaner_h10 { clear: both; width:100%; height: 10px; }
	.cleaner_h20 { clear: both; width:100%; height: 20px; }
	.cleaner_h30 { clear: both; width:100%; height: 30px; }
	.cleaner_h40 { clear: both; width:100%; height: 40px; }
	.cleaner_h50 { clear: both; width:100%; height: 50px; }
	.cleaner_h60 { clear: both; width:100%; height: 60px; }

	.pagingpage-nomor{
		background-color: #fff;
		text-align:center;
		width:20px;
		padding: 3px;
		border: 1px solid #CCCCCC;
		float:left;
		margin:1px;
	}
	.pagingpage-nomor a{
		text-decoration:none;
	}
	.pagingpage-nomor a:hover{
		text-decoration:underline;
	}
	
	.pagingpage{
		background-color: #fff;
		padding: 3px;
		border: 1px solid #CCCCCC;
		float:left;
		margin:1px;
	}
	.pagingpage a{
		text-decoration:none;
	}
	.pagingpage a:hover{
		text-decoration:underline;
	}

	/* ============================================
	   RESPONSIVE DESIGN
	   ============================================ */

	@media (max-width: 768px) {
		body {
			width: 100%;
			padding: 0 10px;
			box-sizing: border-box;
		}

		#container {
			margin: 5px;
		}

		.styled-table {
			font-size: 11px;
		}

		.styled-table th,
		.styled-table td {
			padding: 6px 8px;
		}

		/* Make tables scrollable on mobile */
		.table-responsive {
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}

		.btn {
			padding: 6px 12px;
			font-size: 11px;
		}

		h1 {
			font-size: 16px;
			padding: 10px;
		}
	}

	@media (max-width: 480px) {
		.styled-table {
			font-size: 10px;
		}

		.styled-table th,
		.styled-table td {
			padding: 4px 6px;
		}

		.btn {
			padding: 5px 10px;
			font-size: 10px;
		}
	}