/*
 * ============================================================+
 * TEMA ANBK - Public Area
 * Layered override DI ATAS public/styles/default.css
 * (file asli default.css TIDAK diubah)
 *
 * Cara pakai: admin/code/tmf_general_settings.php
 *   [SITE SETTINGS > Tema Public Area] > ANBK
 *   -> tmf_general_settings.json { "publicTheme":"anbk" }
 *   -> K_PUBLIC_THEME = 'anbk' (public/config/tce_config.php)
 *   -> header memuat stylesheet ini + dispatch login ANBK
 * ============================================================+ */

/* ============================================================+
 * 1. PALET WARNA ANBK (berlaku di SEMUA halaman public)
 *    Pakai !important agar menang atas Custom Color Scheme
 *    (colorscheme di-echo SEBELUM stylesheet tema ini)
 * ============================================================+ */
:root{
	--col-1:#105686 !important;   /* biru ANBK (primer) */
	--col-2:#105686 !important;
	
	--col-4:#0f1f3d !important;   /* navy gelap */
	--col-5:#eef2f7 !important;
	--col-5a:#e6ecf3 !important;
	--col-5l:#f5f8fb !important;
	--col-6:#1f3a5f !important;   /* teks utama */
	--col-7:#ffffff !important;
	--col-8:#dfda9e !important;   /* biru terang (CTA) */
	--col-9:#2ecc8f !important;
	--col-10:#e1306c !important;
	--col-11:#1f3a5f !important;
	--col-12:#e8f0fa !important;
	--col-13:#5c7a99 !important;  /* teks redup */
	--col-14: #de2384;
	--header:#105686 !important;
	--link:#105686 !important;
	--col-1t:rgba(16,86,134,0.2) !important;
	--col-2t:rgba(16,86,134,0.2) !important;
	--col-3t:rgba(16,86,134,0.2) !important;
	--col-4t:rgba(15,31,61,0.2) !important;
	--bor-1:#c7d6e5 !important;
	--bor-col1:#dbe6f0 !important;
	--shd-1:rgba(15,31,61,0.12) !important;
}

/* ============================================================+
 * 2. HALAMAN LOGIN (hanya saat <form id="form_login"> ada)
 *    body:has(...) => rule hanya aktif pada halaman login
 * ============================================================+ */

/* Body: gradien biru ANBK 25% atas, putih 75% bawah.
   !important mengalahkan <style>body{background-image:url(...)}
   yang di-echo oleh tce_page_header saat logged-out. */
   
body{
	background:linear-gradient(to bottom, #105686 236px, #ffffff 236px) !important;
	background-attachment:fixed !important;
	min-height:100vh;
}

/* Header navbar disembunyikan (login ANBK tanpa navbar) */
body:has(#form_login) .header{display:none !important}

.header{background:none; position: absolute;top: -53px;}

#menu_open{background:none !important;position:absolute;top:2em;color:#ffffff55 !important}
body:has(.testlist) #containerWrapper, body:has(.confirmbox) .container{margin:0 auto;border-radius: 0.5em !important;box-shadow:0 8px 30px rgba(15, 31, 61, 0.25) !important;padding:0 !important}
body:has(.confirmbox) .container{width:fit-content; padding:2em !important}
#fprintmsg {border-radius: 0.5em}
form#form_test_terminate{border:none}


body:has(.testlist) .testlist{padding-left:2em;padding-right:2em;margin-bottom:2em}
body:has(.testlist) .testlist ul{border:1px solid #b4b8bd;border-radius:0.5em;min-width:330px}

body:has(.testlist) .testlist>ul>li>div:nth-child(2){
	top: 5px;
	right: 5px;
}

body:has(.testlist) .testlist>ul>li>div>a {border-radius: 5em; font-size: smaller}



#infolinkCont {border-radius: 1em;top: 206px;left:50%;transform:translateX(-50%);opacity:1 !important;border: 1px solid #dadada;width:max-content}
body:has(.scrolledFloat) #infolinkCont {top:68px}
        
/* .body: hapus latar abu & margin-kanan asimetris,
   biarkan flex-centering default menengahkan kartu */
body:has(#form_login) .body{
	background:none !important;
	margin-right:0 !important;
}

/* Login box: transparan (bukan kartu putih default),
   lebar ~28em, tengah. */
body:has(#form_login) .tceformbox.login_box{
	background:none !important;
	box-shadow:none !important;
	border:none !important;
	width:28em;
	max-width:94%;
	margin:1.5em auto 3em !important;
}

/* Logo + nama institusi sejajar (icon kiri, teks kanan) */
body:has(#form_login) .login_box #insLogo{padding:0 !important}
body:has(#form_login) .login_box #insCont{margin-bottom:2em}
body:has(#form_login) .login_box #insName{color:#ffffff !important}
body:has(#form_login) .login_box #appDesc{color:#cfe0f0 !important}

/* Form: kartu putih */
body:has(#form_login) form#form_login{
	background:#ffffff !important;
	border-radius:0.5em !important;
	box-shadow:0 8px 30px rgba(15,31,61,0.25) !important;
	padding:2.5em 0 0 0 !important;
}

/* Heading "Selamat datang," + subtitle */
body:has(#form_login) form#form_login .py-05em.brad5.px-1em{padding:0 3em 0.5em 3em !important}
body:has(#form_login) form#form_login .py-05em.brad5.px-1em h1{
	color:#105686 !important;
	font-size:1.6em !important;
	font-weight:700;
	margin:0 0 0.15em 0;
}
body:has(#form_login) form#form_login .py-05em.brad5.px-1em p,
body:has(#form_login) form#form_login .py-05em.brad5.px-1em div{
	color:#5c7a99;
	font-size:0.92em;
}

/* Baris field: ikon + label + input (flex sejajar) */
body:has(#form_login) #loginFieldCont div:first-child{margin-bottom:0 !important}
body:has(#form_login) #loginFieldCont .row{
	display:flex !important;
	align-items:center;
	margin-bottom:1em !important;
}
body:has(#form_login) #loginFieldCont .row > div:first-child{margin-right:1em !important}
body:has(#form_login) #loginFieldCont .row > div:last-child{flex:1;min-width:0}

/* Label: kecil, di atas input (bukan floating absolute) */
body:has(#form_login) #loginFieldCont .label label{
	position:static !important;
	top:auto !important;
	left:auto !important;
	display:block;
	font-size:0.8em !important;
	color:#5c7a99 !important;
	font-weight:600;
	margin-bottom:0.15em !important;
}

/* Input: boxed (bukan underline), radius lembut
body:has(#form_login) #loginFieldCont input[type=text],
body:has(#form_login) #loginFieldCont input[type=password]{
	border:1px solid #c7d6e5 !important;
	border-radius:0.375em !important;
	background:#ffffff !important;
	box-shadow:none !important;
	padding:0.7em 0.9em !important;
	width:100% !important;
}
body:has(#form_login) #loginFieldCont input[type=text]:focus,
body:has(#form_login) #loginFieldCont input[type=password]:focus{
	border-color:#3f6ad8 !important;
	outline:none !important;
	box-shadow:0 0 0 3px rgba(63,106,216,0.15) !important;
}*/

/* ============================================================+
 * 2a. FLOATING LABEL username & password (CSS-only, pola contoh)
 *     Struktur per baris: .row > [ikon absolute] + .tmf-fl-wrapper
 *     input DAHULU, label SESUDAH -> input:focus ~ label /
 *     input:not(:placeholder-shown) ~ label (input wajib placeholder=" ")
 *     Input TETAP BERGARIS BAWAH (bukan kotak).
 * ============================================================+ */

div.popupcontainer div.tceformbox div.row {white-space:nowrap}

/* wrapper: acuan posisi absolut label (posisi relatif terhadap kotak input) */
body:has(#form_login) #loginFieldCont .tmf-fl-wrapper{
	position:relative;
	flex:1;
	min-width:0;
}

/* input: garis bawah saja (bukan kotak), ruang atas utk label mengambang */
body:has(#form_login) #loginFieldCont .tmf-fl-wrapper input{
	width:100% !important;
	box-sizing:border-box;
	border:none !important;
	border-bottom:2px solid #c7d6e5 !important;
	border-radius:0 !important;
	background:transparent !important;
	box-shadow:none !important;
	outline:none !important;
	padding:1.35em 2.4em 1.25em 2.5em !important;
	margin:0 !important;
	font-size:1em;
	color:#1f3a5f;
	transition:border-color .3s ease;
}
body:has(#form_login) #loginFieldCont .tmf-fl-wrapper input:focus{
	border-bottom-color:#3f6ad8 !important;
	box-shadow:none !important;
}

/* label: duduk di atas garis input (seperti placeholder) */
body:has(#form_login) #loginFieldCont .tmf-fl-wrapper label{
	position:absolute;
	top:1.3em;
	left:3.5em;
	margin:0 !important;
	width:auto;
	display:block;
	font-size:1em;
	font-weight:500;
	color:#8aa0b8;
	pointer-events:none;
	text-transform:capitalize;
	transition:top .25s ease, font-size .25s ease, color .25s ease;
}

/* label mengambang ke atas saat input focus ATAU terisi */
body:has(#form_login) #loginFieldCont .tmf-fl-wrapper input:focus ~ label,
body:has(#form_login) #loginFieldCont .tmf-fl-wrapper input:not(:placeholder-shown) ~ label{
	top:0.05em;
	font-size:0.72em;
	font-weight:600;
	color:#3f6ad8;
}

/* ikon mata (showPass/hidePass): tengah vertikal di sisi kanan */
body:has(#form_login) #loginFieldCont .tmf-fl-wrapper .labeldesc{
	position:absolute;
	top:50% !important;
	right:0;
	transform:translateY(-50%);
	margin:0 !important;
	line-height:1;
}
body:has(#form_login) #loginFieldCont .tmf-fl-wrapper .labeldesc .icon{
	position:static !important;
	padding:0.3em;
	font-size:1.15em;
	color:#8aa0b8 !important;
}
body:has(#form_login) #loginFieldCont .tmf-fl-wrapper .labeldesc .icon:hover{color:#3f6ad8 !important}

/* Tombol login: biru ANBK, full-width */
body:has(#form_login) button#login{
	background:#3f6ad8 !important;
	border-radius:0.375em !important;
	border:none !important;
	color:#ffffff !important;
	width:100% !important;
	margin:1em auto 0 !important;
	text-transform:capitalize;
	font-weight:700;
	cursor:pointer;
}
body:has(#form_login) button#login:hover{filter:brightness(1.08)}

/* Footer forgotReg: latar #eff9ff, border atas */
body:has(#form_login) div#forgotReg{
	margin-top:1.5em !important;
	background:#eff9ff !important;
	border-radius:0 0 0.5em 0.5em !important;
	border-top:1px solid #cedce5 !important;
	padding:1em 3em 2em 3em !important;
}
body:has(#form_login) div#forgotReg a{color:#3f6ad8 !important;font-weight:600}

body:has(#form_login) div#forgotReg a#googleLogin{color:rgba(0,0,0,0.54) !important;font-weight:600}

/* Tombol Login LiveScore + Masuk dengan Google: outline */
body:has(#form_login) #livescore{
	margin:0.75em auto !important;
	background:none !important;
	color:rgba(0,0,0,0.54) !important;
	border:1px solid #cedce5 !important;
	border-radius:0.375em !important;
}
body:has(#form_login) #googleLogin{
	background:none !important;
	color:rgba(0,0,0,0.54) !important;
	border:1px solid #cedce5 !important;
	border-radius:0.375em !important;
}

body:has(#form_login) #cont-header-alt{
	display:none;
}

input:focus {
    outline: none !important;
}

body:has(#form_login) h1{
	margin: 0;
    padding: 0;
}

#footer {visibility:hidden}

#xuser_name {margin-bottom: 0;}

#cont-header-alt{color:#ffffff;margin:0 auto;margin-bottom:1em;margin-top:2.5em;}
.container{background:#ffffff}
body:has(#form_login) .container{background:none !important}

body:has(#form_resultallusers) #containerWrapper, body:has(#form_resultallusers) .container, body:has(#form_resultallusers) .tceformbox, body:has(#form_resultallusers) #form_resultallusers, body:has(#page-user) #containerWrapper, body:has(#change-email) #containerWrapper, body:has(#change-password) #containerWrapper {width:fit-content; border-radius: 0 0 1em 1em}
#bismillahbox {box-shadow:1px 15px 20px 0px rgba(0, 0, 0, 0.2)}
body:has(#form_resultallusers) #form_resultallusers{padding:0 3em}
form#form_resultallusers div.row span.label {text-align: left}
form#form_resultallusers div.row {border-bottom: 1px solid #b4b8bd}
form#form_resultallusers div.row:nth-child(12),form#form_resultallusers div.row:nth-child(11),form#form_resultallusers div.row:nth-child(13) {border-bottom: none !important}
span:has(input#selectcategory),input#selectcategory{width:100%}

#nottestpage {border-radius: 0.5em 0.5em 0 0; padding-top: 2em; text-transform: capitalize}
#nottestpage .icon-clipboard, #nottestpage .icon-mail, #nottestpage .icon-lock {display:none}
body:has(#form_test_login) .container, body:has(#form_test_login) #containerWrapper, body:has(.popupcontainer) #containerWrapper, body:has(#page-user) #containerWrapper, body:has(#change-email) #containerWrapper {margin:0 auto}
body:has(.popupcontainer) .popupcontainer, body:has(#form_test_login) .container {box-shadow:1px 15px 20px 0px rgba(0, 0, 0, 0.2);background: #ffffff;padding:3em}
body:has(#form_resultallusers) #containerWrapper, body:has(#page-user) #containerWrapper {margin:0 auto;box-shadow:1px 15px 20px 0px rgba(0, 0, 0, 0.2);padding:0}
body:has(#change-email) #containerWrapper, body:has(#change-password) #containerWrapper, body:has(#testform) .container {box-shadow:1px 15px 20px 0px rgba(0, 0, 0, 0.2);padding:0;margin:0 auto}
body:has(#testform) .navlink {background:#ffffff;border-top:1px solid #cacaca;margin: 0 -2em;padding:2em 2em 1em 2em}
body:has(#testform) .navlink> div.d-flex.jc-c.ai-unset:first-child{justify-content:space-between} 
body:has(#testform) .container{border-radius: 0 0 1em 1em; padding:1em 2em}
body:has(#testform) #timerform {margin-bottom: 0; padding:0 1em}
body:has(#testform) #containerWrapper {padding-top: 0}
body:has(#testform) span#nosoal {color:var(--col-3);background:#fff;padding:0}
body:has(#testform) div#nosoalTop {font-size:larger}

body:has(#testform) #utilTop {margin:0 auto;padding:2em 2em 1em 2em;border-radius:1em 1em 0 0;background:#ffffff;border-bottom: 1px solid #cacaca}
body:has(#testform) textarea {border:1px solid #cacaca}
#question_timer_container>div:first-child{border-radius:5em !important}

#change-email, #change-password {padding: 1.5em 2.5em}
#page-user{padding:1em;border-radius:0 0 0.5em 0.5em}
#page-user ul{list-style: none; margin:0;padding:1em 2em}
#page-user ul li{margin-bottom:1em}
body:has(#form_test_login) .container {border-radius:0.5em}
body:has(#form_test_login) #form_test_login .row .label {margin:0}
body:has(#form_test_login) #xtest_password, body:has(#change-email) #user_email, body:has(#change-email) #user_email_repeat, body:has(#change-email) #currentpassword, body:has(#change-password) #currentpassword, body:has(#change-password) #newpassword, body:has(#change-password) #newpassword_repeat {border-bottom:2px solid #6b86a1;border-radius:0 !important}
body:has(#form_test_login) #xtest_password:focus, body:has(#change-email) #user_email:focus, body:has(#change-email) #user_email_repeat:focus, body:has(#change-email) #currentpassword:focus, body:has(#change-password) #currentpassword:focus, body:has(#change-password) #newpassword:focus, body:has(#change-password) #newpassword_repeat:focus {outline:none !important; box-shadow:none; border-bottom:2px solid #3f6ad8}
body:has(.popupcontainer) .tceformbox {background: none}
body:has(.popupcontainer) h1 {text-align:left;font-size:x-large}
a.logoutbutton{text-transform: capitalize}
body:has(#form_resultallusers) input, body:has(#form_resultallusers) select {border:1px solid #cacaca}
body:has(#form_resultallusers) button[title=kalender] {border:1px solid #cacaca !important;top:8px !important}
/*#fprintmsg.warning{color:#544f14;background:#dfda9e} */
span#qlistShow{border:none;background:var(--col-3);font-size:xx-small;padding: 0.75em 1.5em;margin-left:1em}
#tomboldaftarsoal_anbk{width:3em;line-height:1;font-size:1.4em}

#iconsettings {
    padding: 0.5em 1em ;
    border-radius: 5em;
    background: var(--col-3);
    color: #fff;
}

span.font-option.p-05em.active{font-weight:bold;color:var(--col-14)}

#iconsettings:before{content:'Info Soal';font-weight:bold;font-family:"OpenSans", system-ui, -apple-system, "Segoe UI", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}

.wysibb-text-editor.wysibb-body{text-align:-webkit-auto}
@media (max-width:4000px){
	#cont-header-alt{max-width:70%}
	body:has(#form_test_login) .container, body:has(.testlist) #containerWrapper, body:has(.popupcontainer) #containerWrapper {max-width:60%}
	body:has(#testform) .container {max-width:1024px}
	body:has(#testform) #utilTop {max-width:1024px}
	#tmfModal1{width:20em !important}
	.scrolledFloat{left:16px;right:16px}
}

@media (max-width:1500px){
	#cont-header-alt{max-width:80%}
	body:has(#form_test_login) .container, body:has(.testlist) #containerWrapper, body:has(.popupcontainer) #containerWrapper {max-width:60%}
	body:has(#testform) .container {max-width:1024px}
	body:has(#testform) #utilTop {max-width:1024px}
	.scrolledFloat{left:16px;right:16px}
}

@media (max-width:1280px){
	#cont-header-alt{max-width:90%}
	body:has(#form_test_login) .container, body:has(.testlist) #containerWrapper, body:has(.popupcontainer) #containerWrapper {max-width:70%}
	body:has(#testform) .container {max-width:1024px}
	body:has(#testform) #utilTop {max-width:1024px}
	.scrolledFloat{left:16px;right:16px}
}

@media (max-width:1024px){
	body:has(#testform) .container {max-width:900px}
	body:has(#testform) #utilTop {max-width:900px}
	.scrolledFloat{left:16px;right:16px}
}

#tmfModal1 {z-index:100}

/* ============================================================+
 * 3. RESPONSIVE (layar kecil)
 * ============================================================+ */
@media (max-width:767.98px){
	body:has(#form_login) form#form_login{
		padding:1em 0 0 0 !important;
	}
	body:has(#form_login) .tceformbox.login_box{width:auto;margin:1em 0.5em 2em !important}
	body:has(#form_login) form#form_login .py-05em.brad5.px-1em,
	body:has(#form_login) #loginFieldCont,
	body:has(#form_login) #googleLogin,
	body:has(#form_login) div#forgotReg{padding-left:1.5em !important;padding-right:1.5em !important}
	body:has(#form_login) .body{margin-right:0 !important}
	body:has(#form_login) .container{ display: flex; justify-content: center;}
	body:has(#form_login) #loginBtnCont {padding:0 !important}
	body:has(#form_login) #loginBtnCont button#login {width:90% !important}
	
	#insLogo img {width:55px !important;height:55px !important} 
	#userContAnbkTestlist #profilePhotoAlt {width:55px !important;height:55px !important} 
	#appDesc p, #insName p, #userContAnbkTestlist {font-size:0.85em !important}
	 
	#bg-gradien {left:-300px !important}
	#container-welcome {padding:2em 0 !important}
	#cont-header-alt{max-width:93%}
	body:has(#form_test_login) .container, body:has(.testlist) #containerWrapper, body:has(.popupcontainer) #containerWrapper {max-width:93%}
	body:has(#testform) .container {max-width:767px}
	body:has(#testform) #utilTop {max-width:767px}
	body:has(#testform) #timerform {padding: 0 12px}
	#insNameAltTestlist {width:150px}
	#infolinkCont {top:183px}
	.scrolledFloat{left:12px;right:12px}
	#tomboldaftarsoal_anbk{display:none}
	#iconsettings:before{content:'Info'}
}


@media (max-width:321px){
	body:has(.testlist) .testlist ul{min-width:280px !important}
	div#userContAnbkTestlist, div#insNameAltTestlist{font-size: 0.75em !important;}
	#insLogo img {
        width: 45px !important;
        height: 45px !important;
    }
     #userContAnbkTestlist #profilePhotoAlt {
        width: 45px !important;
        height: 45px !important;
    }
    body:has(.testlist) div.tcecontentbox div {margin: 0 1em !important; padding:0;text-align:justify} 
    
}