/* ==========================================================
   MYSP MONSIS
========================================================== */

.mysp_monsis_form{
	width:100%;
	max-width:900px;
	margin:20px auto;
	box-sizing:border-box;
}

/* ==========================================================
   CATEGORY / ACCORDION
========================================================== */

.mysp_monsis_category{
	margin:24px 0;
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:12px;
	overflow:hidden;
	box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.mysp_monsis_category_title{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;

	width:100%;
	padding:14px 16px;
	box-sizing:border-box;

	font-family:'Poppins',sans-serif;
	font-size:18px;
	font-weight:600;
	line-height:1.4;
	text-align:left;

	cursor:pointer;
	outline:none;

	color:#1e3a8a;
	background:#eff6ff;

	border:none;
	border-left:6px solid #2563eb;

	transition:background .2s ease,color .2s ease;
}

.mysp_monsis_category_title:hover{
	background:#dbeafe;
}

.mysp_monsis_category_title.active{
	background:#dbeafe;
}

.mysp_monsis_category_title span:first-child{
	display:flex;
	align-items:center;
	gap:10px;
}

.mysp_monsis_category_title span:first-child::before{
	content:"\f147";
	font-family:"dashicons";
	font-size:20px;
	color:#2563eb;
}

.mysp_monsis_category_title.is-teacher{
	color:#166534;
	background:#f0fdf4;
	border-left-color:#16a34a;
}

.mysp_monsis_category_title.is-history{
	color:#6b7280;
	background:#f9fafb;
	border-left-color:#9ca3af;
}

.mysp_monsis_category_title.is-teacher:hover,
.mysp_monsis_category_title.is-teacher.active{
	background:#dcfce7;
}

.mysp_monsis_category_title.is-teacher span:first-child::before{
	content:"\f330";
	color:#16a34a;
}

.mysp_monsis_category_icon{
	display:flex;
	align-items:center;
	justify-content:center;

	width:24px;
	height:24px;

	font-size:22px;
	font-weight:700;
	line-height:1;

	color:inherit;

	flex-shrink:0;

	transition:transform .2s ease;
}

.mysp_monsis_category_title.active .mysp_monsis_category_icon{
	transform:rotate(180deg);
}

.mysp_monsis_table_wrap{
	padding:15px;
	background:#fff;
	border-top:1px solid #e5e7eb;
}

/*MAIN TABLE*/
.mysp_monsis_table_wrap{
    width:100%;
    overflow-x:auto;
    padding:0;
}

.mysp_monsis_table{
    width:100%;
    border-collapse:collapse;
    padding:0;
}
.mysp_monsis_table th,
.mysp_monsis_table td{
    border-left: none !important;
    border-right: none !important;

    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}
.mysp_monsis_table tbody tr:last-child td{
    border-bottom: none !important;
}

.mysp_monsis_question{
    width:260px;
    padding:15px;
    font-weight:600;
    vertical-align:top;
}

.mysp_monsis_answer{
    padding:15px;
    vertical-align:top;
}

.mysp_monsis_radio{
    display:inline-flex;
    align-items:center;
    margin-right:18px;
    margin-bottom:10px;
    cursor:pointer;
}

.mysp_monsis_radio input{
    margin-right:6px;
}

.mysp_monsis_textarea{
    width:100%;
    min-height:90px;
    resize:vertical;
    box-sizing:border-box;
    padding:10px;
    border:1px solid #bbb;
    border-radius:4px;
    font-size:15px;
    font-family:inherit;
}

.mysp_monsis_submit_wrap{
    margin-top:25px;
    text-align:right;
}

.mysp_monsis_submit{
    background:#2271b1;
    color:#fff;
    border:none;
    border-radius:4px;
    padding:12px 28px;
    cursor:pointer;
    font-size:15px;
    transition:.2s;
}

.mysp_monsis_submit:hover{
    background:#135e96;
}

.mysp_monsis_success{
    margin-bottom:20px;
    padding:12px 15px;
    border:1px solid #46b450;
    background:#ecf9ef;
    color:#1d5c2d;
    border-radius:5px;
}

/*EMPTY MONITORING ARCHIVE*/
.mysp_monsis_empty{
	width:100%;
	padding:40px 30px;
	margin:20px 0;
	border:1px solid #dbeafe;
	border-radius:12px;
	background:#f8fbff;
	text-align:center;
	box-sizing:border-box;
}

.mysp_monsis_empty_icon .dashicons{
	font-size:48px;
	width:48px;
	height:48px;
	line-height:48px;
	color:#3b82f6;
}

.mysp_monsis_empty_title{
	font-size:20px;
	font-weight:700;
	color:#1e3a8a;
	margin-bottom:8px;
}

.mysp_monsis_empty_desc{
	max-width:600px;
	margin:0 auto;
	font-size:15px;
	line-height:1.7;
	color:#64748b;
}


.mysp_monsis_table{
	border-collapse:separate;
	border-spacing:0 8px;
}

.mysp_monsis_table tr:nth-child(odd) td{
	background:#f8fbff;
}

.mysp_monsis_table tr:nth-child(even) td{
	background:#f8fff9;
}

.mysp_monsis_table tr:nth-child(odd) td:first-child{
	border-left:4px solid #2b7de9;
}

.mysp_monsis_table tr:nth-child(even) td:first-child{
	border-left:4px solid #28a745;
}

.mysp_monsis_table tr td{
	box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.mysp_monsis_table tr td:first-child{
	border-top-left-radius:8px;
	border-bottom-left-radius:8px;
}

.mysp_monsis_table tr td:last-child{
	border-top-right-radius:8px;
	border-bottom-right-radius:8px;
}

/* ==========================================================
   Mobile
========================================================== */
@media (max-width:768px){
    .mysp_monsis_question,
    .mysp_monsis_answer{
        display:block;
        width:100%;
        box-sizing:border-box;
    }

    .mysp_monsis_table,
    .mysp_monsis_table tbody,
    .mysp_monsis_table tr,
    .mysp_monsis_table td{
        display:block;
        width:100%;
    }
	.mysp_monsis_table tr:nth-child(odd){
		border-left:4px solid #2b7de9;
		background:#f8fbff;
		border-radius:8px;
		box-shadow:0 1px 3px rgba(0,0,0,.08);
	}
	.mysp_monsis_table tr:nth-child(even){
		border-left:4px solid #28a745;
		background:#f8fff9;
		border-radius:8px;
		box-shadow:0 1px 3px rgba(0,0,0,.08);
	}

    .mysp_monsis_question{
        padding-bottom:5px;
        font-size:15px;
    }

    .mysp_monsis_answer{
        padding-top:0;
        padding-bottom:18px;
    }

    .mysp_monsis_radio{
        display:flex;
        margin-bottom:12px;
    }

    .mysp_monsis_submit{
        width:100%;
    }

}

.mysp_monsis_popup{
    transition:.4s;
}
.mysp_monsis_popup{
	position:fixed;
	left:50%;
	bottom:120px;
	transform:translateX(-50%);
	background:#28a745;
	color:#fff;
	padding:12px 24px;
	border-radius:6px;
	font-size:14px;
	font-weight:600;
	font-family:'Poppins', sans-serif;
	box-shadow:0 8px 20px rgba(0,0,0,.2);
	z-index:99999;
	opacity:1;
	transition:
		opacity .4s,
		transform .4s;
}

@keyframes myspPopupShow{
	to{

		opacity:1;
		transform:translateY(0);

	}

}

@keyframes myspPopupHide{
	to{

		opacity:0;
		transform:translateY(-15px);

	}

}

/*TOOLBAR*/
.mysp_monsis_toolbar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    gap: 10px;
    justify-content: center;

    padding: 12px;

    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -3px 12px rgba(0,0,0,.08);

    z-index: 9999;
}

/* Desktop */
.mysp_monsis_toolbar > *{
    flex: 0 0 auto;
}

/* Mobile */
@media (max-width: 768px){

    .mysp_monsis_toolbar{
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .mysp_monsis_toolbar > *{
        flex: 0 0 calc(50% - 5px);
        box-sizing: border-box;
    }

    .mysp_monsis_toolbar button,
    .mysp_monsis_toolbar a{
        width: 100%;
    }
}

/*BUTTON*/
.mysp_monsis_btn{
	min-width:120px;
	padding:12px 20px;
	border:none;
	border-radius:6px;
	cursor:pointer;
	text-align:center;
	text-decoration:none;
	font-size:15px;
	font-weight:600;
	transition:all .2s ease;
}

.mysp_monsis_btn:hover{
	filter:brightness(.92);
}

/* Save */
.mysp_monsis_btn_save{
	background:#198754;
	color:#fff;
}

/* Archive */
.mysp_monsis_btn_view{
	background:#0d6efd;
	color:#fff;
}

/* Menu */
.mysp_monsis_btn_menu{
	background:#198754;
	color:#fff;
}

/* Open */
.mysp_monsis_btn_open{
	background:#0dcaf0;
	color:#fff;
}

/* Today */
.mysp_monsis_btn_today{
	background:#6c757d;
	color:#fff;
}

/* Report */
.mysp_monsis_btn_report{
	background:#6f42c1;
	color:#fff;
}

/* Change */
.mysp_monsis_btn_change{
	background:#fd7e14;
	color:#fff;
}

/* Cancel */
.mysp_monsis_btn_cancel{
	background:#dc3545;
	color:#fff;
}

/*POPUP CALENDER*/
.mysp_monsis_modal{

	position:fixed;

	inset:0;

	background:rgba(0,0,0,.35);

	display:none;

	align-items:center;

	justify-content:center;

	z-index:99999;

}

.mysp_monsis_modal.show{

	display:flex;

}

.mysp_monsis_modal_box{

	width:320px;

	background:#fff;

	border-radius:8px;

	padding:20px;

	box-shadow:0 10px 30px rgba(0,0,0,.2);

}

.mysp_monsis_modal_box h3{

	margin:0 0 15px;

	text-align:center;

	font-size:18px;

}

.mysp_monsis_modal_box input{

	width:100%;

	padding:10px;

	font-size:16px;

	box-sizing:border-box;

}

.mysp_monsis_modal_button{

	margin-top:20px;

	display:flex;

	justify-content:flex-end;

	gap:10px;

}

.mysp_monsis_modal_button button{

	padding:10px 18px;

	cursor:pointer;

}

.mysp_monsis_student_info {
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 16px;
    background: #fff;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    table-layout: auto;
}

.mysp_monsis_modal_message{
	margin-top:8px;
	min-height:20px;
	text-align:center;
	font-size:14px;
	font-weight:600;
	color:#dc3545;
}

/* semua cell default */
.mysp_monsis_student_info td {
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
	border:1px solid #e5e7eb;
}


/* kolom 1 = label (compact) */
.mysp_monsis_student_info td:first-child {
    font-weight: 600;
    color: #111827;
    width: 70px;
    white-space: nowrap;
}

/* kolom 2 = value (compact tapi fleksibel sedikit) */
.mysp_monsis_student_info td:nth-child(2) {
    width: 10px;
    color: #9ca3af;
}

/* kolom 3 (value utama) = bebas melebar */
.mysp_monsis_student_info td:last-child {
    white-space: normal;
    width: auto;
}


/*POPUP GANTI ANAK*/
.mysp_monsis_modal_ganti_anak{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 99999;
}

.mysp_monsis_modal_ganti_anak.show{
    display: flex;
}

.mysp_monsis_modal_box_ganti_anak{
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15,23,42,.18);
    padding: 20px;
    box-sizing: border-box;
    animation: mysp_monsis_modal_show .22s ease;
}

.mysp_monsis_modal_box_ganti_anak h3{
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.mysp_monsis_modal_button_ganti_anak{
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 3px;
}

.mysp_monsis_modal_button_ganti_anak label{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all .2s ease;
    background: #fff;
}

.mysp_monsis_modal_button_ganti_anak label:hover{
    background: #f8fafc;
    border-color: #3b82f6;
    transform: translateY(-1px);
}

.mysp_monsis_modal_button_ganti_anak input[type="radio"]{
    accent-color: #2563eb;
    transform: scale(1.1);
}

.mysp_monsis_modal_button_ganti_anak span{
    color: #475569;
    line-height: 1.4;
}

.mysp_monsis_modal_button_ganti_anak strong{
    color: #111827;
    display: block;
    font-size: 14px;
}

.mysp_monsis_modal_button_ganti_anak label:has(input:checked){
    border-color: #2563eb;
    background: #eff6ff;
}

.mysp_monsis_btn:disabled,
.mysp_monsis_btn.is-disabled{
	opacity:.5;
	cursor:not-allowed;
	background:#9ca3af !important;
	color:#fff !important;
	box-shadow:none;
}

.mysp_monsis_parent_submit:disabled,
.mysp_monsis_parent_submit:disabled:hover{
	background:#6b7280;
	border:1px solid #6b7280;
	color:#fff;
	cursor:not-allowed;
	opacity:1;
	box-shadow:none;
	transform:none;
}

@keyframes mysp_monsis_modal_show{
    from{
        opacity:0;
        transform:translateY(12px) scale(.98);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/*HEADER TITLE*/

.mysp_monsis_info{

	margin:0 0 20px;

	padding:16px 20px;

	background:#eef7ff;

	border:1px solid #cfe4ff;
	border-radius:8px;

	text-align:center;

	font-size:20px;
	font-weight:700;
	line-height:1.6;

	color:#1f3b57;

}

.mysp_monsis_title{
	display:block;
	font-size:24px;
	font-weight:bold;
	line-height:1.3;
	color:#2c3e50;
	text-transform:uppercase;
	letter-spacing:.5px;
}

@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
@property --angle{
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
.mysp_monsis_subtitle{
	position:relative;
	display:block;
	margin:10px 0 12px;
	padding:10px 16px;

	background:#eef5ff;
	color:#2b7de9;
	border-radius:8px;
	font-size:18px;
	font-weight:bold;
	z-index:0;
}

.mysp_monsis_subtitle::before{
	content:"";
	position:absolute;
	inset:0;
	padding:2px;
	border-radius:inherit;

	background:conic-gradient(
		from var(--angle),
		#2b7de9,
		#00c2ff,
		#6c63ff,
		#00c2ff,
		#2b7de9
	);

	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor;
	mask-composite:exclude;

	animation:mysp_border_spin 3s linear infinite;
}

@keyframes mysp_border_spin{
	to{
		--angle:360deg;
	}
}
.mysp_monsis_subtitle.is-today{
	background:#eef5ff;
	color:#2b7de9;
}
.mysp_monsis_subtitle.is-archive{
	background:#fff;
	color:#000;
}


.mysp_monsis_date{
	display:block;
	margin:0 0 14px;
	padding:12px 16px;

	background:linear-gradient(135deg, #1e5fd6 0%, #2b7de9 50%, #5aa8ff 100%);
	color:#fff;

	font-size:20px;
	font-weight:700;
	border-radius:6px;

	box-shadow:0 3px 10px rgba(30,95,214,.25);
}
.mysp_monsis_date.is-today{
	background:linear-gradient(135deg,#2b7de9,#4f9cff);
	color:#fff;
}
.mysp_monsis_date.is-archive{
	background:linear-gradient(135deg,#4b5563,#1f2937);
	color:#fff;
}
.mysp_monsis_student_info{
	margin-top:10px;
}

/*LOGIN REQUIRED*/
/* Login Required & Empty State */
.mysp_monsis_login_required,
.mysp_monsis_empty {
	max-width: 480px;
	margin: 60px auto;
	padding: 32px 28px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	text-align: center;
}

.mysp_monsis_login_icon,
.mysp_monsis_empty_icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #eef2ff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}

.mysp_monsis_login_title,
.mysp_monsis_empty_title {
	font-size: 22px;
	font-weight: 700;
	color: #1f2937;
	margin-bottom: 10px;
}

.mysp_monsis_login_text,
.mysp_monsis_empty_text {
	font-size: 15px;
	line-height: 1.7;
	color: #6b7280;
}

.mysp_monsis_input_time{
	width:120px;
	padding:8px 10px;
	border:1px solid #d1d5db;
	border-radius:6px;
	font-size:15px;
	text-align:center;
}

.mysp_monsis_input_time.error{
	border:1px solid #dc2626;
	background:#fef2f2;
	outline:none;
	box-shadow:0 0 0 3px rgba(220,38,38,.15);
}


/*Login Required*/
.mysp_monsis_login_action{
    margin-top:20px;
    text-align:center;
}

.mysp_monsis_login_button{
    display:inline-block;
    padding:10px 24px;
    background:#4f46e5;
    color:#fff;
    text-decoration:none !important;
    border-radius:8px;
    font-weight:600;
    transition:.2s;
}

.mysp_monsis_login_button:hover,
.mysp_monsis_login_button:focus,
.mysp_monsis_login_button:active,
.mysp_monsis_login_button:visited{
    color:#fff;
    text-decoration:none !important;
    background:#4338ca;
}

/*MONSIS HEADING TITLE */
.mysp-monsis-heading {
    display: block;
    width: 100%;
    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2937;

    margin: 25px 0 20px;
    padding: 14px 18px;

    background: #f5f3ff;
    border-radius: 8px;

    letter-spacing: -0.3px;
}

@media (max-width:768px) {
    .mysp-monsis-heading {
        font-size:18px;
        padding:12px 15px;
    }
}

/*LOADING PAGE*/
.mysp-monsis-loading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:20px;

    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:500;
    color:#6b7280;
}

.mysp-monsis-loading .dashicons{
    width:20px;
    height:20px;
    font-size:20px;

    animation:mysp-monsis-spin 1s linear infinite;
}

@keyframes mysp-monsis-spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/*LOADING SUBMIT*/
.mysp_monsis_loading_overlay{

	position:fixed;

	inset:0;

	background:rgba(255,255,255,.65);

	z-index:999999;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:18px;

	font-weight:bold;

	font-family:"Poppins",sans-serif;

}


.mysp_monsis_loading_box{

	background:#fff;

	padding:20px 30px;

	border-radius:10px;

	box-shadow:0 5px 20px rgba(0,0,0,.15);

	display:flex;

	align-items:center;

	gap:10px;

}

.mysp_monsis_loading_box .spin{

	display:inline-block;

	animation:mysp_spin 1s linear infinite;

}


@keyframes mysp_spin{

	from{
		transform:rotate(0deg);
	}

	to{
		transform:rotate(360deg);
	}

}

.mysp_monsis_announcement_subtitle{
	margin:0 0 16px;
	font-size:18px;
	font-weight:600;
	text-align:center;
	color:#16a34a;
}

.mysp_monsis_announcement_message{
	font-size:15px;
	line-height:1.8;
	color:#374151;
	text-align:justify;
}

/*ANNOUNCEMENT*/
.mysp_monsis_announcement_overlay{
	position:fixed;
	inset:0;
	z-index:999999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(0,0,0,.65);
	backdrop-filter:blur(3px);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

.mysp_monsis_announcement_box{
	width:100%;
	max-width:700px;

	background:#fff;
	border-radius:14px;

	display:flex;
	flex-direction:column;

	max-height:calc(100dvh - 40px);

	overflow:hidden;

	box-shadow:0 20px 60px rgba(0,0,0,.25);

	animation:myspAnnouncement .25s ease;
}

@keyframes myspAnnouncement{

	from{
		opacity:0;
		transform:translateY(25px) scale(.96);
	}

	to{
		opacity:1;
		transform:translateY(0) scale(1);
	}

}

.mysp_monsis_announcement_header{
	flex-shrink:0;

	padding:14px 16px;

	text-align:center;

	color:#fff;

	background:linear-gradient(
		90deg,
		#2c7ee9 0%,
		#4f9cff 100%
	);
}

.mysp_monsis_announcement_title{
	display:inline-block;

	margin:0;
	padding:8px 18px;

	color:#fff;

	font-family:'Poppins',sans-serif;
	font-size:26px;
	font-weight:700;
	line-height:1.2;

	background:rgba(0,0,0,.18);
	border-radius:4px;
}

.mysp_monsis_announcement_subtitle{
	display:inline-block;

	margin-top:10px;
	padding:5px 12px;

	color:#fff;

	font-family:'Poppins',sans-serif;
	font-size:14px;
	font-weight:500;

	background:rgba(255,255,255,.18);
	border:1px solid rgba(255,255,255,.28);
	border-radius:999px;

	backdrop-filter:blur(6px);
}

.mysp_monsis_announcement_body{
	flex:1;
	overflow-y:auto;
	padding:28px;

	font-family:'Poppins',sans-serif;
	font-size:16px;
	line-height:1.8;
	color:#374151;

	white-space:normal;
	text-align: justify;
	-webkit-overflow-scrolling:touch;
}

.mysp_monsis_announcement_footer{
	flex-shrink:0;

	padding:18px 24px;

	border-top:1px solid #e5e7eb;

	background:#fff;

	text-align:right;
}

.mysp_monsis_announcement_button{
	padding:12px 28px;

	border:none;
	border-radius:8px;

	background:#2c7ee9;
	color:#fff;

	font-family:'Poppins',sans-serif;
	font-size:15px;
	font-weight:600;

	cursor:pointer;

	transition:.2s;
}

.mysp_monsis_announcement_button:hover{
	background:#1e40af;
}


/* Scrollbar */
.mysp_monsis_announcement_body::-webkit-scrollbar{
	width:8px;
}

.mysp_monsis_announcement_body::-webkit-scrollbar-thumb{
	background:#cbd5e1;
	border-radius:10px;
}

.mysp_monsis_announcement_body::-webkit-scrollbar-thumb:hover{
	background:#94a3b8;
}


/* MOBILE */

@media (max-width:768px){

	.mysp_monsis_announcement_overlay{
		align-items:center;
		justify-content:center;
		padding:10px;
	}

	.mysp_monsis_announcement_box{
		width:100%;
		max-width:700px;
		max-height:calc(100dvh - 20px);
		border-radius:10px;
		margin:0;
	}

	.mysp_monsis_announcement_header{
		padding:12px 14px;
	}

	.mysp_monsis_announcement_title{
		padding:6px 14px;
		font-size:21px;
		border-radius:10px;
	}

	.mysp_monsis_announcement_subtitle{
		margin-top:8px;
		padding:4px 10px;
		font-size:12px;
	}

	.mysp_monsis_announcement_body{
		padding:18px 16px;

		font-size:15px;

		line-height:1.8;
	}

	.mysp_monsis_announcement_footer{
		padding:14px 16px;
	}

	.mysp_monsis_announcement_button{
		width:100%;

		padding:14px;

		font-size:15px;
	}

}


/*MAPPING PILIH ANAK*/
.mysp_monsis_parent_overlay{
	position:fixed;
	inset:0;
	z-index:999999;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:16px;
	background:rgba(0,0,0,.65);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

	.mysp_monsis_parent_box{
		width:100%;
		max-width:520px;
		background:#fff;
		border-radius:10px;
		box-sizing:border-box;
		box-shadow:0 10px 30px rgba(0,0,0,.25);

		display:flex;
		flex-direction:column;

		max-height:calc(100dvh - 32px);
		overflow:hidden;
	}

	.mysp-monsis-heading{
		margin:0 0 15px;
	}

	.mysp_monsis_parent_header{
		padding:20px 20px 0;
		flex-shrink:0;
	}

	.mysp_monsis_parent_body{
		flex:1;
		min-height:0;
		overflow-y:auto;
		padding:0 20px 20px;
		-webkit-overflow-scrolling:touch;
	}

	.mysp_monsis_parent_footer{
		position:sticky;
		bottom:0;
		background:#fff;
		padding:15px 20px;
		border-top:1px solid #e5e5e5;
		box-shadow:0 -2px 10px rgba(0,0,0,.08);
		z-index:2;
	}

	.mysp_monsis_parent_desc{
		margin:0 0 12px;
		padding:14px 18px;
		text-align:center;
		font-family:"Poppins",sans-serif;
		font-size:14px;
		line-height:1.7;
		color:#2f5d3a;
		background:#eef9f0;
		border:1px solid #cfe9d5;
		border-radius:8px;
	}

	.mysp_monsis_parent_list{
		max-height:none;
		overflow:visible;
	}

	.mysp_monsis_parent_item{
		display:flex;
		align-items:center;
		padding:12px;
		margin-bottom:10px;
		border:1px solid #ddd;
		border-radius:6px;
		cursor:pointer;
	}

	.mysp_monsis_parent_item:hover{
		background:#f7f7f7;
	}

	.mysp_monsis_parent_item input{
		margin-right:12px;
		flex-shrink:0;
	}

	.mysp_monsis_parent_submit{
		width:100%;
		border:0;
		padding:14px;
		font-size:16px;
		font-weight:bold;
		background:#0073aa;
		color:#fff;
		border-radius:6px;
		cursor:pointer;
	}

	.mysp_monsis_parent_submit:hover{
		background:#005f8d;
	}

	.mysp_monsis_parent_filter{
		margin-bottom:10px;
		margin-top:5px;
	}

	.mysp_monsis_parent_filter label{
		display:block;
		font-weight:600;
		margin-bottom:6px;
	}

	.mysp_monsis_parent_filter select{
		width:100%;
		padding:10px 12px;
		border:1px solid #ddd;
		border-radius:6px;
		font-size:14px;
	}

	#mysp_monsis_parent_form{
		display:flex;
		flex-direction:column;
		flex:1;
		min-height:0;
	}

		.mysp_monsis_parent_message{

			display:none;

			margin-bottom:15px;

			padding:12px 15px;

			border-radius:8px;

			font-size:14px;

			font-family:'Poppins',sans-serif;

			text-align:center;

		}

		.mysp_monsis_parent_message{
			color:#991b1b;
			background:#fee2e2;
			border:1px solid #fecaca;
		}


	@media (max-width:768px){

		.mysp_monsis_parent_overlay{
			align-items:center;
			padding:10px;
		}

		.mysp_monsis_parent_box{
			max-height:calc(100dvh - 20px);
			border-radius:8px;
		}

		.mysp-monsis-heading{
			font-size:20px;
		}

		.mysp_monsis_parent_body{
			padding:16px;
		}

		.mysp_monsis_parent_footer{
			padding:12px 16px;
		}

		.mysp_monsis_parent_desc{
			padding:10px 12px;
			font-size:10px;
			line-height:1.5;
			margin-bottom:15px;
		}

		.mysp_monsis_parent_item{
			padding:10px;
			font-size:14px;
		}

		.mysp_monsis_parent_submit{
			padding:12px;
			font-size:15px;
		}
	}
	

/* ==========================================================
   SUB MENU 
========================================================== */
.mysp_monsis_parent_menu{
	position:relative;
	display:inline-block;
}

/* dropdown buka ke atas */
.mysp_monsis_parent_dropdown{
	display:none;
	position:absolute;
	bottom:100%;
	right:0;
	margin-bottom:6px;
	background:#fff;
	border:1px solid #ddd;
	border-radius:8px;
	box-shadow:0 5px 15px rgba(0,0,0,.15);
	min-width:150px;
	z-index:9999;
	overflow:hidden;
	box-sizing:border-box;
}

/* item menu */
.mysp_monsis_parent_dropdown button{
	width:100%;
	display:block;
	text-align:left;
	padding:10px 14px;
	background:#fff;
	color:#333;
	border:none;
	border-radius:0;
	font-size:18px;
	font-weight:500;
	cursor:pointer;
	box-sizing:border-box;
}

/* hover */
.mysp_monsis_parent_dropdown button:hover{
	background:#f5f5f5;
	color:#222;
}

/* icon jika menggunakan dashicons */
.mysp_monsis_parent_dropdown .dashicons{
	color:#333;
	vertical-align:middle;
	margin-right:5px;
}

/* tampil */
.mysp_monsis_parent_dropdown.show{
	display:block;
}

/*MODAL PAYMENT KARTU SPP*/
/* ==========================================================
   PAYMENT MODAL
========================================================== */


.mysp_monsis_payment_modal{

	display:none;

	position:fixed;

	inset:0;

	background:rgba(0,0,0,.5);

	z-index:999999;

	align-items:center;

	justify-content:center;

	padding:20px;

	box-sizing:border-box;

}


.mysp_monsis_payment_modal.show{

	display:flex;

}



/* ==========================================================
   PAYMENT BOX
========================================================== */


.mysp_monsis_payment_box{

	background:#fff;

	width:100%;

	max-width:900px;

	height:85vh;

	max-height:800px;

	border-radius:15px;

	position:relative;

	padding:20px;

	box-sizing:border-box;

	display:flex;

	flex-direction:column;

	overflow:hidden;

}



/* ==========================================================
   PAYMENT CONTENT
========================================================== */


.mysp_monsis_payment_content{

	flex:1;

	min-height:0;

	padding-top:20px;

	overflow-y:auto;

}



/* ==========================================================
   CLOSE BUTTON
========================================================== */


.mysp_monsis_payment_close{

	position:absolute;

	top:10px;

	right:10px;

	z-index:10;


	width:32px;

	height:32px;


	background:#fff;

	color:red;


	border:1px solid #ddd;

	border-radius:50%;


	display:flex;

	align-items:center;

	justify-content:center;


	font-size:18px;

	font-weight:600;


	padding:0;

	margin:0;


	line-height:1;


	cursor:pointer;

	box-sizing:border-box;

}



.mysp_monsis_payment_close:hover{

	background:#000;

	color:red;

}



/* ==========================================================
   HEADER PAYMENT
========================================================== */


.mysp-payment-header{

	margin-bottom:20px;

}



.mysp-payment-header table{

	width:100%;

}



.mysp-payment-header td{

	padding:5px;

}



/* ==========================================================
   MOBILE
========================================================== */


@media(max-width:600px){


	.mysp_monsis_payment_box{

		height:90vh;

		padding:15px;

	}


}

/*POPUP BERKAS*/
/* ==========================================================
   BERKAS MODAL
========================================================== */

.mysp_monsis_berkas_modal{

	display:none;

	position:fixed;

	inset:0;

	background:rgba(0,0,0,.5);

	z-index:999999;

	align-items:center;

	justify-content:center;

	padding:20px;

	box-sizing:border-box;

}


.mysp_monsis_berkas_modal.show{

	display:flex;

}


/* ==========================================================
   BERKAS BOX
========================================================== */

.mysp_monsis_berkas_box{

	background:#fff;

	width:100%;

	max-width:1000px;

	max-height:90vh;

	border-radius:15px;

	position:relative;

	padding:20px;

	box-sizing:border-box;

	overflow:auto;

}


/* ==========================================================
   BERKAS IMAGE
========================================================== */
/* ==========================================================
   BERKAS MODAL
========================================================== */

.mysp_monsis_berkas_modal{

	display:none;

	position:fixed;

	inset:0;

	background:rgba(0,0,0,.5);

	z-index:999999;

	align-items:center;

	justify-content:center;

	padding:20px;

	box-sizing:border-box;

}


.mysp_monsis_berkas_modal.show{

	display:flex;

}



/* ==========================================================
   BERKAS BOX
========================================================== */

.mysp_monsis_berkas_box{

	background:#fff;

	width:100%;

	max-width:1000px;

	height:90vh;

	max-height:900px;

	border-radius:15px;

	position:relative;

	padding:20px;

	box-sizing:border-box;

	overflow:hidden;

	display:flex;

	flex-direction:column;

}



/* ==========================================================
   BERKAS CONTENT
========================================================== */

.mysp_monsis_berkas_content{

	flex:1;

	min-height:0;

	width:100%;

	overflow-y:auto;

	padding-top:10px;

	box-sizing:border-box;

}



/* ==========================================================
   POPUP MODAL BERKAS IMAGE
========================================================== */

#mysp_monsis_berkas_image{
	display:block;
	width:100%;
	height:auto;
	border-radius:8px;
	cursor:grab;
	touch-action:none;
	transform-origin:center top;
}

/* ==========================================================
   SCROLLBAR
========================================================== */

.mysp_monsis_berkas_content::-webkit-scrollbar{
	width:8px;
}

.mysp_monsis_berkas_content::-webkit-scrollbar-thumb{
	background:#ccc;
	border-radius:10px;
}


/* ==========================================================
   CLOSE BUTTON
========================================================== */

.mysp_monsis_berkas_close{

	position:absolute;

	top:10px;

	right:10px;

	z-index:10;


	width:32px;

	height:32px;


	background:#fff;

	color:red;


	border:1px solid #ddd;

	border-radius:50%;


	display:flex;

	align-items:center;

	justify-content:center;


	font-size:18px;

	font-weight:600;


	padding:0;

	margin:0;


	line-height:1;


	cursor:pointer;

	box-sizing:border-box;

}


.mysp_monsis_berkas_close:hover{

	background:#000;

	color:red;

	font-weight:bold;

}


/* ==========================================================
   ZOOM CONTROL
========================================================== */

.mysp_monsis_berkas_zoom_control{

	position:absolute;

	top:10px;

	left:10px;

	z-index:20;

	display:flex;

	gap:5px;

}


.mysp_monsis_berkas_zoom_control button{

	width:34px;

	height:34px;

	background:#fff;

	border:1px solid #ddd;

	border-radius:50%;

	font-size:22px;

	font-weight:bold;

	color:#333;

	display:flex;

	align-items:center;

	justify-content:center;

	cursor:pointer;

	line-height:1;

	padding:0;

}


.mysp_monsis_berkas_zoom_control button:hover{

	background:#f1f1f1;

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:600px){


	.mysp_monsis_berkas_modal{

		padding:10px;

	}


	.mysp_monsis_berkas_box{

		height:95vh;

		padding:15px;

		border-radius:12px;

	}


	#mysp_monsis_berkas_image{

		border-radius:6px;

	}

}

/*COUNTER PROGRESS ANSWER*/
.mysp_monsis_counter{
	display:inline-block;
	margin-left:8px;
	padding:2px 4px;
	background:#fffeb6;
	color:#555;
	font-size:12px;
	font-weight:600;
	line-height:18px;
}