/* ============================================================ INCEPTION V15 STEP 2 + DYNAMIC STUDENT CARDS RIGHT REGISTER ONLY ============================================================ */ @media (min-width:761px){ /* ======================================================== STEP 2 ======================================================== */ #inception-register-v50-host .v15-step2-card{ width:100%!important; margin-top: 18px!important; padding:0!important; background: transparent!important; border:0!important; box-shadow: none!important; } #inception-register-v50-host .v15-step2-head{ display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:20px!important; margin-bottom: 18px!important; } #inception-register-v50-host .v15-step2-head small{ display:block!important; margin-bottom: 5px!important; color: #647fd0!important; font-size: 9px!important; font-weight: 800!important; letter-spacing: .13em!important; } #inception-register-v50-host .v15-step2-head h2{ margin: 0 0 5px!important; color: #202a43!important; font-size: 26px!important; line-height: 1.05!important; font-weight: 800!important; letter-spacing: -.025em!important; } #inception-register-v50-host .v15-step2-head p{ margin:0!important; color: #7a8498!important; font-size: 10.5px!important; line-height: 1.5!important; font-weight: 550!important; } #inception-register-v50-host .v15-stage-chip{ flex:none!important; min-width: 58px!important; padding: 9px 11px!important; border-radius: 10px!important; background: #f1f4ff!important; color: #5570c3!important; font-size: 10px!important; font-weight: 800!important; text-align: center!important; } /* TEAM SIZE */ #inception-register-v50-host .v15-team-size{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:18px!important; margin-bottom: 18px!important; padding: 13px 14px!important; border: 1px solid #e2e7f0!important; border-radius: 12px!important; background: #fafbff!important; } #inception-register-v50-host .v15-team-size-copy{ display:flex!important; flex-direction:column!important; gap:3px!important; } #inception-register-v50-host .v15-team-size-copy strong{ color: #354058!important; font-size: 11px!important; font-weight: 750!important; } #inception-register-v50-host .v15-team-size-copy span{ color: #9199aa!important; font-size: 9.5px!important; } #inception-register-v50-host .v15-size-options{ display:flex!important; align-items:center!important; gap:7px!important; } #inception-register-v50-host .v15-size-btn{ min-width: 68px!important; height: 38px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:4px!important; padding: 0 10px!important; border: 1px solid #dbe2ee!important; border-radius: 9px!important; background: #ffffff!important; color: #687389!important; cursor: pointer!important; box-shadow: none!important; } #inception-register-v50-host .v15-size-btn strong{ font-size: 12px!important; font-weight: 800!important; } #inception-register-v50-host .v15-size-btn span{ font-size: 9px!important; font-weight: 650!important; } #inception-register-v50-host .v15-size-btn.active{ border-color: transparent!important; color: #ffffff!important; background: linear-gradient( 90deg, #5575d8 0%, #7b79bd 50%, #dc7269 100% )!important; box-shadow: 0 6px 16px rgba(76,101,186,.13)!important; } /* LEADER */ #inception-register-v50-host .v15-leader-grid{ display:grid!important; grid-template-columns: minmax(0,1fr) minmax(0,1fr)!important; gap: 14px 16px!important; } /* ALL MEMBERS */ #inception-register-v50-host .v15-team-summary{ display:flex!important; align-items:center!important; justify-content:space-between!important; margin-bottom: 13px!important; padding: 10px 13px!important; border-radius: 10px!important; background: #f7f9fd!important; } #inception-register-v50-host .v15-team-summary > div{ display:flex!important; align-items:center!important; gap:7px!important; } #inception-register-v50-host .v15-team-summary span{ color: #8b94a5!important; font-size: 10px!important; } #inception-register-v50-host .v15-team-summary strong{ color: #344057!important; font-size: 11px!important; font-weight: 800!important; } #inception-register-v50-host #v15-change-size{ padding:0!important; border:0!important; background: transparent!important; color: #5572c6!important; font-size: 10px!important; font-weight: 700!important; cursor: pointer!important; } #inception-register-v50-host .v15-member-list{ display:flex!important; flex-direction:column!important; gap:9px!important; } #inception-register-v50-host .v15-member-row{ display:grid!important; grid-template-columns: 86px minmax(0,1fr) minmax(0,1fr)!important; align-items:end!important; gap: 10px 14px!important; padding: 11px 12px!important; border: 1px solid #e4e8f0!important; border-radius: 11px!important; background: #ffffff!important; } #inception-register-v50-host .v15-member-label{ align-self:center!important; display:flex!important; align-items:center!important; gap:7px!important; } #inception-register-v50-host .v15-member-label > span{ width: 29px!important; height: 29px!important; display:grid!important; place-items:center!important; flex:none!important; border-radius: 8px!important; background: #eef2ff!important; color: #5570c3!important; font-size: 9px!important; font-weight: 800!important; } #inception-register-v50-host .v15-member-label strong{ color: #354058!important; font-size: 10.5px!important; line-height: 1.25!important; font-weight: 750!important; } /* INPUTS STEP 2 */ #inception-register-v50-host .v15-step2-card .v50-field{ min-width: 0!important; } #inception-register-v50-host .v15-step2-card .v50-field > span{ display:block!important; margin-bottom: 6px!important; color: #3b4559!important; font-size: 10px!important; font-weight: 700!important; } #inception-register-v50-host .v15-step2-card .v50-field input{ width: 100%!important; height: 47px!important; min-height: 47px!important; box-sizing: border-box!important; padding: 0 13px!important; border: 1px solid #dce3ed!important; border-radius: 10px!important; background: #ffffff!important; color: #27324b!important; font-size: 12px!important; font-weight: 550!important; outline: none!important; } #inception-register-v50-host .v15-step2-card .v50-field input:focus{ border-color: #738ed8!important; box-shadow: 0 0 0 3px rgba(78,108,197,.08)!important; } #inception-register-v50-host .v15-step2-card .v50-field input::placeholder{ color: #9ba4b5!important; opacity: 1!important; } /* ACTION */ #inception-register-v50-host .v15-actions{ margin-top: 18px!important; padding-top: 16px!important; border-top: 1px solid #edf0f5!important; } /* ======================================================== STEP 3 - KARTU PELAJAR DYNAMIC ======================================================== */ #inception-register-v50-host .v15-student-cards{ grid-column: 1 / -1!important; width: 100%!important; margin-top: 4px!important; } #inception-register-v50-host .v15-doc-head{ display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap: 16px!important; margin-bottom: 12px!important; } #inception-register-v50-host .v15-doc-head > div{ display:flex!important; align-items:flex-start!important; gap: 10px!important; } #inception-register-v50-host .v15-doc-head > div > b{ width: 30px!important; height: 30px!important; display:grid!important; place-items:center!important; flex:none!important; border-radius: 8px!important; background: #eef2ff!important; color: #5570c3!important; font-size: 9px!important; } #inception-register-v50-host .v15-doc-head h3{ margin: 0 0 3px!important; color: #303b52!important; font-size: 14px!important; font-weight: 800!important; } #inception-register-v50-host .v15-doc-head p{ margin:0!important; color: #8a93a5!important; font-size: 10px!important; } #inception-register-v50-host .v15-doc-head > strong{ padding: 6px 9px!important; border-radius: 8px!important; background: #f3f5fa!important; color: #67738a!important; font-size: 9px!important; } #inception-register-v50-host .v15-card-list{ display:grid!important; grid-template-columns: repeat( 2, minmax(0,1fr) )!important; gap: 8px!important; } #inception-register-v50-host .v15-card-upload{ position: relative!important; min-width: 0!important; min-height: 55px!important; display:grid!important; grid-template-columns: 30px minmax(0,1fr) auto!important; align-items:center!important; gap: 9px!important; padding: 9px 10px!important; box-sizing: border-box!important; border: 1px dashed #d4dbea!important; border-radius: 10px!important; background: #ffffff!important; cursor: pointer!important; } #inception-register-v50-host .v15-card-upload:hover{ border-color: #8298d8!important; background: #fafbff!important; } #inception-register-v50-host .v15-card-upload.has-file{ border-style: solid!important; border-color: #b8c6eb!important; background: #f9faff!important; } #inception-register-v50-host .v15-card-number{ width: 30px!important; height: 30px!important; display:grid!important; place-items:center!important; border-radius: 8px!important; background: #eef2ff!important; color: #5974c8!important; font-size: 9px!important; font-weight: 800!important; } #inception-register-v50-host .v15-card-copy{ min-width: 0!important; display:flex!important; flex-direction:column!important; gap: 3px!important; } #inception-register-v50-host .v15-card-copy strong{ color: #354058!important; font-size: 10.5px!important; } #inception-register-v50-host .v15-card-copy span{ overflow: hidden!important; color: #9199aa!important; font-size: 9px!important; text-overflow: ellipsis!important; white-space: nowrap!important; } #inception-register-v50-host .v15-card-upload em{ color: #5570c3!important; font-size: 9.5px!important; font-style: normal!important; font-weight: 750!important; white-space: nowrap!important; } #inception-register-v50-host .v15-card-upload input{ position: absolute!important; inset: 0!important; width: 100%!important; height: 100%!important; opacity: 0!important; cursor: pointer!important; } } /* ============================================================ SMALL LAPTOP ============================================================ */ @media (min-width:761px) and (max-height:820px){ #inception-register-v50-host .v15-step2-head{ margin-bottom: 13px!important; } #inception-register-v50-host .v15-team-size{ margin-bottom: 13px!important; padding: 10px 12px!important; } #inception-register-v50-host .v15-member-list{ gap: 6px!important; } #inception-register-v50-host .v15-member-row{ padding: 8px 10px!important; } #inception-register-v50-host .v15-step2-card .v50-field input{ height: 43px!important; min-height: 43px!important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width:760px){ #inception-register-v50-host .v15-leader-grid{ display:grid!important; grid-template-columns: 1fr!important; gap: 13px!important; } #inception-register-v50-host .v15-team-size{ display:block!important; } #inception-register-v50-host .v15-size-options{ margin-top: 12px!important; display:grid!important; grid-template-columns: repeat(3,1fr)!important; } #inception-register-v50-host .v15-size-btn{ min-width: 0!important; width: 100%!important; } #inception-register-v50-host .v15-member-row{ display:grid!important; grid-template-columns: 1fr!important; } #inception-register-v50-host .v15-member-label{ margin-bottom: 3px!important; } #inception-register-v50-host .v15-card-list{ grid-template-columns: 1fr!important; } }