/* default login css */

/* intro */
#login_wrap { width:100%; height:100%; }
#intro_top { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:100%; min-height:100%; padding:60px 14px 40px 14px; overflow:hidden; background:#3d6fb8 url('images/background.jpg') center center / cover no-repeat fixed; }
#intro_top:before { content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(165,192,226,0.88) 0%, rgba(90,135,202,0.9) 45%, rgba(46,84,150,0.94) 100%); }
#intro_top:after { content:''; position:absolute; inset:0; pointer-events:none; opacity:0.55;
	background-image:
		radial-gradient(circle at 20px 30px, #fff 0 1.5px, transparent 2px),
		radial-gradient(circle at 90px 110px, #fff 0 2px, transparent 2.5px),
		radial-gradient(circle at 150px 50px, #fff 0 1.2px, transparent 1.7px);
	background-size:180px 180px, 240px 240px, 130px 130px;
	animation:loginDots 30s linear infinite; }
@keyframes loginDots {
	from { background-position:0 0, 0 0, 0 0; }
	to { background-position:180px 180px, -240px 240px, 130px 260px; }
}
@media (prefers-reduced-motion:reduce){
	#intro_top:after { animation:none; }
}

#login_all { position:relative; z-index:2; width:420px; max-width:100%; margin:0 auto; }
.login_card { padding:34px 28px 24px 28px; text-align:center; color:#2b3445; background:#fff; border-radius:22px; box-shadow:0 18px 50px rgba(20,40,80,0.35), 0 2px 6px rgba(20,40,80,0.2); animation:loginCard .45s ease-out; }
@keyframes loginCard {
	from { opacity:0; transform:translateY(14px); }
	to { opacity:1; transform:translateY(0); }
}
.login_logo_wrap { display:inline-block; padding:12px 20px; border-radius:16px; background:linear-gradient(to bottom, #a5c0e2 0%, #5a87ca 53%, #5a87ca 100%); box-shadow:0 4px 12px rgba(90,135,202,0.45); }
#login_logo { display:block; height:56px; width:auto; max-width:220px; }
.login_text { padding:20px 0 22px 0; }
.login_title { margin:0; font-size:24px; line-height:1.4; color:#24406e; }
.login_welcome { margin-top:8px; font-size:14px; line-height:1.8; font-weight:normal; color:#6a7385; }

.login_actions { display:flex; flex-direction:column; gap:10px; }
.login_btn { display:block; width:100%; min-height:50px; padding:12px 18px; border:none; border-radius:14px; font-size:16px; cursor:pointer; transition:transform .12s ease, box-shadow .15s ease, background .15s ease; }
.login_btn i { margin:0 6px; }
.login_btn:active { transform:scale(0.98); }
.login_primary { color:#fff; background:linear-gradient(to bottom, #6f9bd8 0%, #4a79c0 100%); box-shadow:0 6px 16px rgba(74,121,192,0.45); }
.login_primary:hover { box-shadow:0 8px 22px rgba(74,121,192,0.6); }
.login_secondary { color:#fff; background:#3b4a63; }
.login_secondary:hover { background:#465773; }
.login_outline { color:#4a79c0; background:#f2f6fc; box-shadow:inset 0 0 0 1.5px #a9c2e6; }
.login_outline:hover { background:#e6eefa; }
.login_btn:focus-visible { outline:3px solid rgba(90,135,202,0.45); outline-offset:2px; }

.login_register { padding-top:18px; }
.login_divider { display:flex; align-items:center; gap:12px; padding-bottom:12px; font-size:12px; color:#8a93a3; }
.login_divider:before, .login_divider:after { content:''; flex:1; height:1px; background:#e1e6ee; }

.login_features { display:flex; justify-content:space-between; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid #eef1f5; }
.login_feature { flex:1; font-size:11px; color:#6a7385; }
.login_feature i { display:block; width:38px; height:38px; margin:0 auto 6px auto; line-height:38px; border-radius:50%; font-size:15px; color:#4a79c0; background:#eaf1fb; }
.login_feature span { display:block; white-space:nowrap; }

#intro_lang { position:absolute; z-index:3; top:14px; right:16px; width:42px; height:42px; padding:5px; border-radius:50%; background:rgba(255,255,255,0.25); box-shadow:0 2px 6px rgba(0,0,0,0.2); }
#intro_lang img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.login_not_member { text-align:center; padding-top:5px; }

/* login & registration boxes */
#login_form_box .modal_title, #registration_form_box .modal_title { font-size:19px; text-align:center; color:#24406e; }
#login_form_box .full_input, #registration_form_box .full_input { padding:14px 14px; border-radius:12px; font-size:15px; }
#login_form_box .full_input:focus, #registration_form_box .full_input:focus { border-color:#5a87ca !important; box-shadow:0 0 0 3px rgba(90,135,202,0.2); }
#login_form_box .large_button, #registration_form_box .large_button { min-height:50px; border-radius:14px; background:linear-gradient(to bottom, #6f9bd8 0%, #4a79c0 100%); box-shadow:0 6px 16px rgba(74,121,192,0.4); }
#registration_form_box .register_date .label { color:#6a7385; }
#registration_form_box .selectboxit-container .selectboxit { border-radius:12px; }

/* section css */
.section { width:100%; height:auto; margin:0 auto; }
.section_content { width:100%; max-width:1100px; margin:0 auto; }
.section_inside { margin:0 auto; }

@media screen and (max-width:1120px){
	.section_inside { width:96%; }
}
@media screen and (max-width:480px){
	#intro_top { padding:64px 12px 28px 12px; }
	.login_card { padding:26px 18px 18px 18px; border-radius:18px; }
	.login_title { font-size:21px; }
	#login_logo { height:48px; }
}