/* ============================================================ INCEPTION REGISTER RIGHT FINAL V3 HANYA PANEL KANAN REGISTER. LEFT SHARED AUTH TIDAK DISENTUH. ============================================================ */ @media (min-width:761px){ /* ======================================================== CARD ======================================================== */ #inception-register-v50-host .inc-final-shell{ position:relative!important; padding: 23px 28px 22px!important; overflow: visible!important; } /* ======================================================== BACK BUTTON ======================================================== */ #inception-register-v50-host .inc-final-back{ position:absolute!important; top:21px!important; left:28px!important; z-index:20!important; height:35px!important; min-height:35px!important; padding: 0 12px!important; border: 1px solid #dde4ef!important; border-radius: 10px!important; background: #ffffff!important; color: #4668c8!important; font-size: 10px!important; font-weight: 700!important; box-shadow: none!important; } /* ======================================================== DAFTAR TIM ======================================================== */ #inception-register-v50-host .inc-register-final-title{ min-height: 36px!important; margin: 0 0 20px!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:center!important; color: #202940!important; font-size: 30px!important; line-height: 1!important; font-weight: 800!important; letter-spacing: -.032em!important; text-align: center!important; } /* ======================================================== STEPPER ======================================================== */ #inception-register-v50-host .inc-final-stepper{ gap: 9px!important; margin: 0 0 20px!important; } #inception-register-v50-host .inc-final-stepper > *{ height: 46px!important; min-height: 46px!important; border: 1px solid #dce3ee!important; border-radius: 11px!important; font-size: 10px!important; font-weight: 700!important; } /* ======================================================== GRID ======================================================== */ #inception-register-v50-host .inc-final-step1 .inc-final-grid{ gap: 14px 16px!important; } #inception-register-v50-host .inc-final-step1-field{ position: relative!important; min-width: 0!important; } /* ======================================================== LABEL ======================================================== */ #inception-register-v50-host .inc-final-step1-field > span, #inception-register-v50-host .inc-final-step1-field .v50-label{ display:block!important; margin: 0 0 7px!important; color: #354058!important; font-size: 10.5px!important; line-height: 1.2!important; font-weight: 700!important; } /* ======================================================== ACTIVE INPUT = WHITE ======================================================== */ #inception-register-v50-host .inc-final-step1-field input:not([type="checkbox"]):not(:disabled), #inception-register-v50-host .inc-final-step1-field textarea:not(:disabled), #inception-register-v50-host .inc-final-step1-field select:not(:disabled){ height: 49px!important; min-height: 49px!important; padding: 0 14px!important; box-sizing: border-box!important; border: 1px solid #dce3ef!important; border-radius: 11px!important; background: #ffffff!important; color: #27324b!important; font-size: 12px!important; font-weight: 550!important; box-shadow: 0 1px 2px rgba(27,39,66,.02)!important; outline: none!important; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease!important; } #inception-register-v50-host .inc-final-step1-field input::placeholder, #inception-register-v50-host .inc-final-step1-field textarea::placeholder{ color: #98a2b7!important; opacity: 1!important; font-weight: 500!important; } #inception-register-v50-host .inc-final-step1-field input:not([type="checkbox"]):focus, #inception-register-v50-host .inc-final-step1-field textarea:focus, #inception-register-v50-host .inc-final-step1-field select:focus{ border-color: #718dd9!important; background: #ffffff!important; box-shadow: 0 0 0 3px rgba(78,108,197,.09)!important; } /* ======================================================== DISABLED = BARU ABU-ABU ======================================================== */ #inception-register-v50-host .inc-final-step1-field input:disabled, #inception-register-v50-host .inc-final-step1-field textarea:disabled, #inception-register-v50-host .inc-final-step1-field select:disabled{ border-color: #e2e6ee!important; background: #f4f6fa!important; color: #9da6b6!important; cursor: not-allowed!important; box-shadow: none!important; } /* ======================================================== PASSWORD EYE CLEAN: - no kotak - no outline - icon tipis saja ======================================================== */ #inception-register-v50-host .inc-auth-final-password-wrap{ position: relative!important; width: 100%!important; } #inception-register-v50-host .inc-auth-final-password-wrap > input{ padding-right: 45px!important; } #inception-register-v50-host .inc-auth-final-eye{ position:absolute!important; top:50%!important; right:12px!important; width: 30px!important; height: 30px!important; min-width: 30px!important; min-height: 30px!important; display:grid!important; place-items:center!important; margin:0!important; padding:0!important; transform: translateY(-50%)!important; border: 0!important; outline: 0!important; border-radius: 8px!important; background: transparent!important; color: #8792a8!important; box-shadow: none!important; cursor: pointer!important; transition: color .15s ease, background .15s ease!important; } #inception-register-v50-host .inc-auth-final-eye:hover{ color: #4f67a8!important; background: #f5f7fb!important; } #inception-register-v50-host .inc-auth-final-eye svg{ width: 18px!important; height: 18px!important; fill: none!important; stroke: currentColor!important; stroke-width: 1.7!important; } /* ======================================================== DROPDOWN FIELD ======================================================== */ #inception-register-v50-host .v50-searchable{ position: relative!important; width: 100%!important; min-width: 0!important; } /* * Tombol chevron juga clean, * tanpa kotak hitam. */ #inception-register-v50-host .inc-ux-province .v50-searchable button, #inception-register-v50-host .inc-ux-city .v50-searchable button, #inception-register-v50-host .inc-ux-school .v50-searchable button{ width: 30px!important; height: 30px!important; min-width: 30px!important; min-height: 30px!important; margin: 0!important; padding: 0!important; border: 0!important; outline: 0!important; border-radius: 8px!important; background: transparent!important; color: #7086bd!important; box-shadow: none!important; } #inception-register-v50-host .v50-searchable button:hover{ background: #f4f6fb!important; color: #4862aa!important; } /* ======================================================== DROPDOWN STACK ======================================================== */ #inception-register-v50-host .inc-ux-province{ z-index: 330!important; } #inception-register-v50-host .inc-ux-city{ z-index: 220!important; } #inception-register-v50-host .inc-ux-school{ z-index: 110!important; } /* ======================================================== DROPDOWN POPUP input utama sendiri berfungsi sebagai search. Jadi menu tidak butuh search box kedua. ======================================================== */ #inception-register-v50-host .v50-search-menu{ position: absolute!important; top: calc(100% + 7px)!important; left: 0!important; right: 0!important; z-index: 999999!important; width: 100%!important; max-height: 212px!important; margin: 0!important; padding: 6px!important; overflow-x: hidden!important; overflow-y: auto!important; box-sizing: border-box!important; overscroll-behavior: contain!important; border: 1px solid #dce3ee!important; border-radius: 12px!important; background: #ffffff!important; box-shadow: 0 18px 38px rgba(40,52,83,.14), 0 3px 8px rgba(40,52,83,.05)!important; scrollbar-width: thin!important; scrollbar-color: #cbd3e1 transparent!important; } #inception-register-v50-host .v50-search-menu::-webkit-scrollbar{ width: 6px!important; } #inception-register-v50-host .v50-search-menu::-webkit-scrollbar-track{ background: transparent!important; } #inception-register-v50-host .v50-search-menu::-webkit-scrollbar-thumb{ border-radius: 999px!important; background: #cbd3e1!important; } /* ======================================================== OPTION RATA KIRI. ======================================================== */ #inception-register-v50-host .v50-menu-item, #inception-register-v50-host .v50-search-menu [role="option"]{ position: relative!important; width: 100%!important; min-height: 39px!important; display:flex!important; align-items:center!important; justify-content: flex-start!important; margin: 0 0 2px!important; padding: 9px 11px!important; box-sizing: border-box!important; border: 0!important; border-radius: 8px!important; background: transparent!important; color: #344057!important; font-size: 12px!important; line-height: 1.3!important; font-weight: 550!important; text-align: left!important; cursor: pointer!important; transition: background .12s ease, color .12s ease!important; } #inception-register-v50-host .v50-menu-item:hover, #inception-register-v50-host .v50-search-menu [role="option"]:hover{ background: #f3f6ff!important; color: #3f60bd!important; } #inception-register-v50-host .v50-menu-item.active, #inception-register-v50-host .v50-menu-item.selected, #inception-register-v50-host .v50-search-menu [aria-selected="true"]{ background: #edf2ff!important; color: #365ab8!important; font-weight: 650!important; } /* ======================================================== SCHOOL MANUAL CTA ======================================================== */ #inception-register-v50-host .inc-school-manual-trigger{ color: #3f66ca!important; font-size: 10.5px!important; line-height: 1.4!important; font-weight: 650!important; text-decoration: none!important; cursor: pointer!important; } #inception-register-v50-host .inc-school-manual-trigger:hover{ color: #2d4ea8!important; text-decoration: underline!important; } /* ======================================================== SCHOOL MANUAL FIELD FULL WIDTH SAMPAI UJUNG. ======================================================== */ #inception-register-v50-host .inc-final-step1 .inc-school-manual-full{ grid-column: 1 / -1!important; width: 100%!important; max-width: 100%!important; margin-top: 1px!important; } #inception-register-v50-host .inc-school-manual-full input:not([type="checkbox"]){ width: 100%!important; background: #ffffff!important; } /* ======================================================== ACTION ======================================================== */ #inception-register-v50-host .inc-final-actions{ margin-top: 18px!important; padding-top: 18px!important; border-top: 1px solid #edf0f5!important; } #inception-register-v50-host .inc-final-next{ min-width: 210px!important; height: 47px!important; min-height: 47px!important; border-radius: 10px!important; font-size: 11px!important; font-weight: 700!important; box-shadow: 0 9px 22px rgba(68,102,192,.13)!important; } } /* ============================================================ SMALL LAPTOP HEIGHT ============================================================ */ @media (min-width:761px) and (max-height:820px){ #inception-register-v50-host .inc-register-final-title{ margin-bottom: 15px!important; font-size: 28px!important; } #inception-register-v50-host .inc-final-stepper{ margin-bottom: 15px!important; } #inception-register-v50-host .inc-final-step1 .inc-final-grid{ gap: 11px 16px!important; } #inception-register-v50-host .v50-search-menu{ max-height: 180px!important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width:760px){ #inception-register-v50-host .inc-school-manual-full{ grid-column: 1!important; } #inception-register-v50-host .v50-search-menu{ max-height: 220px!important; } }