/* CSS UNIVERSAL */

/* Element CSS */
.fa-user-friends { margin-right: 5px }
.fa-video { margin-right:5px }
.toggle_title { cursor:pointer; display:block; transition: all 0.2s ease 0s;}	
.toggle_content { display:none; overflow: hidden; line-height:1.2em; padding:0; margin:0; background: transparent }
	.toggle_content.show {display: block; padding:0; margin:0; background: transparent}
	
.running,.scheduled,.expired,.closed,.stopped {
	display:block;
	font-size:10px;
	line-height:1em;
	text-align:center;
	margin:0;
	padding:5px;
	border-radius:10px;
	-moz-border-radius:10px;
	}
	
@media screen and (max-width:800px){	
	.tab button { font-size:12px; padding:10px;	margin-right:0; margin-left:10px;}
	.tab .fa-user-friends,.tab .fa-video {display:none }	
	}	

/* Table style */
table { font-size:0.9em; line-height:1.4em; width: 100%; border-collapse: collapse; }
table a {color:#034DAD}
tr td:first-child:before { counter-increment: Serial; content: counter(Serial); }
tbody { border-bottom:2px solid #aaa }
td { padding: 15px; vertical-align:top; }
tr:nth-child(odd) { background-color: #ddd }
tr:nth-child(even) { background-color:#eee }
tr:hover { background-color:#bbb }
th { 
	font-size:14px;
	font-weight:500;
	padding: 20px 15px; 
	vertical-align:middle; 
	text-align: left; 
	background-color:#034dad; 
	color:#fff;
	}

/* Table filter box */
input:focus {outline:0;}	
#table-filter {
	float:right;
	font: 14px 'Poppins', sans-serif;
	width: 460px;
	padding:7px 10px; 
	border: 1px solid #999;
	border-radius:3px;
	background:#fff;
	color:#333;
	}	
@media screen and (max-width:1024px) {	
	#table-filter { 
		width:96%; 
		padding:15px; 
		margin:0 2% 20px 2% 
		}
}	

/* Table info */
.table-info { display:block; float:left; height:40px }
.table-info h1 { font-size:18px }

/* Edited global table style */
tr td[colspan]:first-child:before {
    content: none !important;
    counter-increment: none !important;
}

/* CSS JADWAL TRAINING */

/* Page Layout CSS */
.dashboard-scheduled-table { padding:30px 0 }
.dashboard-scheduled-entry { padding:40px; margin:10px; background-color:#fff; border-radius:10px; box-shadow: 0 0 10px 0 #ddd; }
	.dashboard-scheduled-entry h2 { font-size:18px }
	.dashboard-scheduled-entry p { padding:0; margin:5px 0 15px 0}
@media screen and (max-width:1280px) {	
	.dashboard-scheduled-table {padding:30px 20px}
	}
@media screen and (max-width:781px) {	
	.dashboard-scheduled-table { padding:20px 0 }
	}	

/* Table content style */
.table-content-title p { margin:0; padding:0 }
	.table-content-title-main {font-size:16px;font-weight:600}
	.table-content-title-sup {font-size:12px;font-weight:600;text-transform:uppercase}
	.table-content-title-sub {font-size:14px;font-weight:400;}
.ds_col1{width:4%;text-align:center}
.ds_col2{width:45%}.ds_col2 a:hover{text-decoration:none}
.ds_col3{width:5%}
.ds_col4{width:25%}
.ds_col5{width:15%}
.ds_col6{width:6%;text-align:center}
@media screen and (max-width:1024px){	
	table th.ds_col1, table td.ds_col1, table th.ds_col3, table td.ds_col3, table th.ds_col5, table td.ds_col5 { display: none; } 
	}	
@media screen and (max-width:781px){	
	.table-content-main tbody { display: grid }
	.table-content-main tr { display: contents}
	.table-content-main td { display: block }
	.table-content-main tr td + td { order: 1 }
	table th.ds_col4, table th.ds_col6, table td.ds_col6 { display: none; } 
	table th.ds_col2 { width:90%; padding:30px 5% 20px 5% }
	table td.ds_col2 { width:90%; padding:15px 5% 0 5%; background-color:#eee }	
	table td.ds_col4 { width:90%; padding:0 5% 15px 5%; background-color:#eee; border-bottom:1px solid #ccc }	
	}	
	
/* CSS ALL EVENT (Internal) */

/* Page Layout CSS */
.dashboard-all {
		clear:both;
		overflow:hidden;
		padding:20px;
		background:#ffffff
		}
	.dashboard-all h1 {color:#333}
	.dashboard-all h2 {font-size:1.1em } #dashboard-all h2 a { color:#034dad }
	.dashboard-all h3 {font-size:0.9em; font-weight:normal; text-transform:uppercase; color:#034dad}
	.dashboard-all h4 {font-size:1em; font-weight:normal; color:#034dad}
	.dashboard-all h2, .dashboard-all h3, .dashboard-all h2 { line-height:1.2em }	

/* Layout column */
.da_col1{width:2%;text-align:center}
.da_col2{width:24%}
	.da_col2-title { margin:0 0 10px 0 }
	.da_col2-desc { line-height:1.2em }
.da_col3{width:18%}
.da_col4{width:12%}
.da_col5{width:14%}
.da_col6{width:3%;text-align:center}
.da_col7{width:3%;text-align:center}
.da_col8{width:3%}
.da_col9{width:15%}

/* Table content style */
.dual-listing {min-height:80px; padding:0 0 20px 0 }
.penulis-modul { margin:10px 0 0 0 }
	.penulis-modul p{font-size:0.8em;line-height:1.2em}
	.penulis-modul span{font-size:0.8em;font-weight:bold}


/* CSS REPORT STATUS (Internal) */

/* Page Layout CSS */
.dashboard-report{clear:both;overflow:hidden;width:95%;padding:20px 2.5%}
	.dashboard-report-entry {clear:both; overflow:hidden}
	.dashboard-report-entry a:hover{text-decoration:none}
	.dashboard-report-entry-title h1 { font-size:20px; margin: 10px 0; }

/* Layout column 2 */
.dr_col1{width:2%;text-align:center}
.dr_col2{width:20%}.dr_col2 small{font-size:0.75em;dr_color:#999}
.dr_col3{width:15%}
.dr_col4{width:12%}
.dr_col5{width:20%}
.dr_col6{width:7.5%;text-align:center}
.dr_col7{width:7.5%;text-align:center}
.dr_col8{width:7.5%;text-align:center}
.dr_col9{width:2.5%;text-align:center}
.dr_col11{width:6%;text-align:center}

/* CSS EXPIRED EVENT (Internal) */

/* Page Layout CSS 3*/
.tools-expiration {padding:2.5%;min-height:600px}
	.tools-expiration sup {color:#CD0000}
	.tools-expiration-title {margin:20px 0 40px 0}
	.tools-expiration-title h1 { font-size:20px; line-height:1; padding:0; margin:0}
	.tools-expiration-content-title {font-weight:bold}

/* Layout column 3 */
.ex_col1{width:2%;text-align:center}
.ex_col2{width:35%}.ex_col2 a:hover{text-decoration:none}
.ex_col3{width:15%}
.ex_col4{width:15%}
.ex_col6{width:6%;text-align:center}
.ex_col7{width:6%;text-align:center}
.ex_col8{width:6%;text-align:center}
.ex_col9{width:15%;text-align:center}

/* Modals style */
.btn-edit-row {
    background-color: #0066cc;
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.btn-edit-row:hover { background-color: #004999; }
.custom-modal {
    display: none; 
    position: fixed; 
    z-index: 99999; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.6); 
}
.custom-modal-content {
    background-color: #fefefe;
    margin: 80px auto;
    padding: 25px;
    border: 1px solid #888;
    width: 90%;
    max-width: 650px;
    border-radius: 8px;
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
}
.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close-modal:hover { color: #000; }

/* Ubah container field ACF menjadi flexbox */
#modalFormContainer .acf-fields {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;
}

/* Lebar field dipaksa jadi 33% */
#modalFormContainer .acf-field:nth-of-type(4),
#modalFormContainer .acf-field:nth-of-type(5),
#modalFormContainer .acf-field:nth-of-type(6),
#modalFormContainer .acf-field:nth-of-type(9) {
    width: 33% !important;
    flex: 0 0 33% !important;
    max-width: 33% !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
    margin-bottom: 20px !important;
}

/* lebar field dipaksa jadi 50% */
#modalFormContainer .acf-field:nth-of-type(1),
#modalFormContainer .acf-field:nth-of-type(2) {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
    margin-bottom: 20px !important;
}

/* Lebar field dipaksa jadi 67% */
#modalFormContainer .acf-field:nth-of-type(10),
#modalFormContainer .acf-field:nth-of-type(11) {
    width: 67% !important;
    flex: 0 0 67% !important;
    max-width: 67% !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
    margin-bottom: 20px !important;
}

/* Lebar field dipaksa jadi 100% */
#modalFormContainer .acf-field:nth-of-type(3),
#modalFormContainer .acf-field:nth-of-type(7),
#modalFormContainer .acf-field:nth-of-type(8),
#modalFormContainer .acf-field:nth-of-type(n+12) {
    width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
    margin-bottom: 20px !important;
}

/* Input & Textarea full sesuai kotak kolomnya */
#modalFormContainer input[type="text"],
#modalFormContainer input[type="date"],
#modalFormContainer textarea,
#modalFormContainer select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}