@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');
:root
	{
	--spo-blue:#008fca;
	--spo-blue-dark:#0073ad;
	--spo-blue-soft:#e7f6fc;
	--ink:#17334a;
	--muted:#738896;
	--border:#d8e5eb;
	--page:#f3f7f9;
	--white:#fff;
	--green:#159260;
	--green-soft:#e7f7ef;
	--orange:#dc7c16;
	--orange-soft:#fff2e3;
	--shadow:0 12px 28px rgba(22,57,78,.12);
	}

*
	{
	box-sizing:border-box;
	}

html,
body
	{
	margin:0;
	padding:0;
	width:100%;
	min-height:100%;
	font-family:"Rajdhani",sans-serif;
	font-size:14px;
	color:var(--ink);
	background:var(--page);
	}

@media(min-width:700px)
	{
	html,
	body
		{
		font-size:17px;
		}
	}
	
body
	{
	min-height:100vh;
	}

.app
	{
	width:100%;
	min-height:100vh;
	background:var(--page);
	position:relative;
	display:flex;
	flex-direction:column;
	padding-bottom:78px;
	}

.hero
	{
	height:190px;
	background:var(--spo-blue);
	padding:18px 20px;
	position:relative;
	flex:none;
	overflow:hidden;
	}

.hero:after
	{
	display:none;
	}

.topbar
	{
	height:55px;
	background:#fff;
	border-radius:17px;
	display:flex;
	align-items:center;
	padding:0 14px;
	position:relative;
	z-index:1;
	}

.logo
	{
	width:116px;
	height:30px;
	object-fit:contain;
	}

.top-actions
	{
	margin-left:auto;
	display:flex;
	gap:8px;
	align-items:center;
	}

.round
	{
	width:35px;
	height:35px;
	border-radius:50%;
	display:grid;
	place-items:center;
	background:var(--spo-blue-soft);
	color:var(--spo-blue-dark);
	}

.avatar
	{
	background:var(--spo-blue);
	color:#fff;
	font-size:12px;
	font-weight:900;
	}

.page-title
	{
	position:relative;
	z-index:1;
	margin:29px 0 0;
	color:#fff;
	font-size:30px;
	line-height:1.05;
	}

.page-subtitle
	{
	position:relative;
	z-index:1;
	color:#d9f3ff;
	font-size:13px;
	margin:8px 0 0;
	}

.content
	{
	padding:22px 20px;
	flex:1;
	}

.home-hero
	{
	height:320px;
	}

.home-hero .page-title
	{
	font-size:31px;
	margin-top:27px;
	}

.welcome
	{
	position:relative;
	z-index:1;
	color:#d9f3ff;
	font-size:12px;
	font-weight:900;
	letter-spacing:.04em;
	margin-top:27px;
	}

.home-content
	{
	padding-top:62px;
	}

.balance-card
	{
	position:absolute;
	z-index:2;
	top:225px;
	left:20px;
	right:20px;
	background:#fff;
	border-radius:23px;
	padding:18px;
	box-shadow:var(--shadow);
	display:grid;
	grid-template-columns:45px 1fr auto;
	gap:12px;
	align-items:start;
	}

.balance-card .icon-tile
	{
	margin-top:2px;
	}

.balance-label
	{
	color:var(--muted);
	font-size:11px;
	font-weight:900;
	}

.balance-value
	{
	font-size:27px;
	font-weight:900;
	margin:4px 0 7px;
	}

.section-head
	{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin:18px 0 13px;
	}

.section-head h2
	{
	margin:0;
	font-size:20px;
	}

.section-tag
	{
	font-size:10px;
	font-weight:900;
	color:var(--muted);
	}

.card
	{
	background:#fff;
	border:1px solid var(--border);
	border-radius:19px;
	padding:16px;
	box-shadow:0 6px 18px rgba(22,57,78,.07);
	}

.icon-tile
	{
	width:42px;
	height:42px;
	border-radius:13px;
	background:var(--spo-blue-soft);
	color:var(--spo-blue-dark);
	display:grid;
	place-items:center;
	flex:0 0 auto;
	}

.icon
	{
	width:23px;
	height:23px;
	stroke:currentColor;
	fill:none;
	stroke-width:1.9;
	stroke-linecap:round;
	stroke-linejoin:round;
	}

.shortcut-grid
	{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:10px;
	}

.shortcut
	{
	height:96px;
	padding:12px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	text-decoration:none;
	color:var(--ink);
	}

.shortcut span
	{
	font-size:11px;
	font-weight:900;
	}

.ad-card,
.event-feature
	{
	background:var(--spo-blue-dark);
	border:0;
	color:#fff;
	min-height:126px;
	position:relative;
	overflow:hidden;
	}

.ad-card:after,
.event-feature:after
	{
	content:'';
	position:absolute;
	width:120px;
	height:120px;
	border:22px solid rgba(255,255,255,.09);
	border-radius:50%;
	right:-48px;
	top:-26px;
	}

.ad-label
	{
	display:inline-block;
	background:#fff;
	color:var(--spo-blue-dark);
	border-radius:999px;
	padding:7px 12px;
	font-size:10px;
	font-weight:900;
	}

.ad-card h3,
.event-feature h3
	{
	font-size:21px;
	line-height:1.15;
	margin:14px 0 6px;
	position:relative;
	z-index:1;
	}

.ad-card p,
.event-feature p
	{
	color:#d9f3ff;
	font-size:12px;
	margin:0;
	}

.btn
	{
	border:0;
	border-radius:12px;
	padding:12px 15px;
	font-weight:900;
	font-size:12px;
	text-decoration:none;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	gap:7px;
	cursor:pointer;
	}

.btn-primary
	{
	background:var(--spo-blue);
	color:#fff;
	}

.btn-light
	{
	background:#fff;
	color:var(--spo-blue-dark);
	}

.btn-outline
	{
	background:#fff;
	border:1.5px solid var(--spo-blue);
	color:var(--spo-blue-dark);
	}

.btn-block
	{
	width:100%;
	}

.btn-small
	{
	padding:10px 13px;
	}

.pill
	{
	display:inline-flex;
	align-items:center;
	border-radius:999px;
	padding:7px 11px;
	font-size:10px;
	font-weight:900;
	}

.pill-green
	{
	background:var(--green-soft);
	color:var(--green);
	}

.pill-orange
	{
	background:var(--orange-soft);
	color:var(--orange);
	}

.pill-blue
	{
	background:var(--spo-blue-soft);
	color:var(--spo-blue-dark);
	}

.list
	{
	display:grid;
	gap:14px;
	}

.row
	{
	display:flex;
	gap:12px;
	align-items:center;
	}

.grow
	{
	flex:1;
	min-width:0;
	}

.muted
	{
	color:var(--muted);
	}

.small
	{
	font-size:11px;
	}

.title-sm
	{
	font-size:15px;
	font-weight:900;
	margin:0 0 6px;
	}

.date-box
	{
	width:60px;
	height:68px;
	border-radius:16px;
	background:var(--spo-blue-soft);
	display:grid;
	place-items:center;
	align-content:center;
	color:var(--spo-blue-dark);
	flex:none;
	}

.date-box strong
	{
	font-size:25px;
	line-height:1;
	}

.date-box span
	{
	font-size:11px;
	font-weight:900;
	margin-top:5px;
	}

.registration-card .bottom,
.certificate-card .bottom
	{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-top:14px;
	}

.payment-methods
	{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:9px;
	}

.payment-method
	{
	height:64px;
	display:grid;
	place-items:center;
	text-align:center;
	font-size:10px;
	font-weight:900;
	}

.separator
	{
	border:0;
	border-top:1px solid var(--border);
	margin:14px 0;
	}

.history-item
	{
	display:grid;
	grid-template-columns:38px 1fr auto;
	gap:10px;
	align-items:center;
	}

.status-check
	{
	width:34px;
	height:34px;
	border-radius:11px;
	background:var(--green-soft);
	display:grid;
	place-items:center;
	color:var(--green);
	font-weight:900;
	}

.news-image
	{
	height:118px;
	background:#dceef6;
	border-radius:16px;
	position:relative;
	overflow:hidden;
	}

.news-image:before
	{
	content:'';
	position:absolute;
	width:140px;
	height:140px;
	border:25px solid rgba(0,143,202,.14);
	border-radius:50%;
	right:-45px;
	top:-70px;
	}

.news-card h3
	{
	font-size:16px;
	line-height:1.25;
	margin:13px 0 8px;
	}

.news-row .thumb
	{
	width:68px;
	height:64px;
	border-radius:13px;
	background:var(--spo-blue-soft);
	display:grid;
	place-items:center;
	color:var(--spo-blue-dark);
	font-weight:900;
	}

.event-feature
	{
	padding:19px;
	}

.quick-actions
	{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:9px;
	margin-top:13px;
	}

.quick-action
	{
	background:#fff;
	border:1px solid var(--border);
	border-radius:14px;
	padding:12px 5px;
	text-align:center;
	color:var(--spo-blue-dark);
	font-size:10px;
	font-weight:900;
	text-decoration:none;
	}

.profile-card
	{
	text-align:center;
	}

.profile-photo
	{
	width:76px;
	height:76px;
	border-radius:50%;
	background:var(--spo-blue-soft);
	color:var(--spo-blue-dark);
	display:grid;
	place-items:center;
	font-size:24px;
	font-weight:900;
	margin:auto;
	}

.form-group
	{
	margin-bottom:14px;
	}

.form-label
	{
	display:block;
	font-size:11px;
	font-weight:900;
	margin-bottom:7px;
	}

.form-control
	{
	width:100%;
	height:50px;
	border:1px solid var(--border);
	border-radius:13px;
	background:#fff;
	padding:0 14px;
	font:inherit;
	color:var(--ink);
	}

textarea.form-control
	{
	height:100px;
	padding-top:13px;
	}

.notification-item
	{
	display:flex;
	gap:12px;
	align-items:flex-start;
	}

.toggle
	{
	width:42px;
	height:24px;
	border-radius:999px;
	background:#bdcbd3;
	padding:3px;
	flex:none;
	}

.toggle:after
	{
	content:'';
	display:block;
	width:18px;
	height:18px;
	border-radius:50%;
	background:#fff;
	}

.toggle.active
	{
	background:var(--spo-blue);
	}

.toggle.active:after
	{
	margin-left:18px;
	}

.contact-card a
	{
	color:var(--spo-blue-dark);
	font-weight:900;
	text-decoration:none;
	font-size:12px;
	}

.social-grid
	{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:8px;
	}

.social
	{
	background:var(--spo-blue-soft);
	border-radius:12px;
	padding:13px 5px;
	text-align:center;
	color:var(--spo-blue-dark);
	font-size:10px;
	font-weight:900;
	}

.bottom-nav
	{
	position:fixed !important;
	left:0;
	right:0;
	bottom:0;
	top:auto;
	z-index:99999;
	width:100%;
	height:78px;
	margin:0;
	padding:0;
	background:#fff;
	border-top:1px solid var(--border);
	display:grid;
	grid-template-columns:repeat(5,1fr);
	}

.nav-link
	{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:5px;
	color:#879aa6;
	text-decoration:none;
	font-size:9px;
	font-weight:900;
	}

.nav-link .icon
	{
	width:22px;
	height:22px;
	}

.nav-link.active
	{
	color:var(--spo-blue-dark);
	}

.login
	{
	padding-bottom:30px;
	}

.login .hero
	{
	height:288px;
	}

.login .page-title
	{
	font-size:31px;
	margin-top:35px;
	}

.login-card
	{
	margin:-52px 20px 0;
	position:relative;
	z-index:2;
	padding:22px;
	}

.tabs
	{
	display:grid;
	grid-template-columns:1fr 1fr;
	background:#eef3f5;
	padding:4px;
	border-radius:13px;
	margin:18px 0;
	}

.tab
	{
	padding:12px 4px;
	text-align:center;
	border-radius:10px;
	font-size:11px;
	font-weight:900;
	color:var(--muted);
	}

.tab.active
	{
	background:#fff;
	color:var(--spo-blue-dark);
	}

.input-wrap
	{
	position:relative;
	}

.input-wrap .icon
	{
	position:absolute;
	left:14px;
	top:14px;
	color:var(--spo-blue-dark);
	}

.input-wrap .form-control
	{
	padding-left:48px;
	}

.login-footer
	{
	text-align:center;
	color:var(--muted);
	font-size:11px;
	margin-top:28px;
	}

.desktop-note
	{
	display:none;
	}

@media(min-width:700px)
	{
	html,
	body
		{
		width:100%;
		min-height:100%;
		background:var(--page);
		}

	body
		{
		margin:0;
		padding:0;
		}

	.app
		{
		width:100%;
		max-width:none;
		min-height:100vh;
		border-radius:0;
		box-shadow:none;
		padding-bottom:78px;
		}

	.hero
		{
		border-radius:0;
		}

	.bottom-nav
		{
		position:fixed !important;
		left:0;
		right:0;
		bottom:0;
		top:auto;
		width:100%;
		border-radius:0;
		}
	}

.hero-small
	{
	height:145px;
	}

.back-link
	{
	position:relative;
	z-index:2;
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:19px;
	color:#fff;
	text-decoration:none;
	font-size:12px;
	font-weight:900;
	}

.back-link .icon
	{
	width:18px;
	height:18px;
	}

.news-detail
	{
	padding-top:25px;
	}

.news-detail-header
	{
	display:flex;
	flex-direction:column;
	}

.news-detail-intro
	{
	order:1;
	}

.news-detail-image
	{
	order:2;
	width:100%;
	margin:8px 0 25px;
	}

.news-detail-date
	{
	margin-bottom:14px;
	}

.news-detail-title
	{
	font-size:27px;
	line-height:1.15;
	margin:0 0 14px;
	color:var(--ink);
	}

.news-detail-lead
	{
	font-size:15px;
	line-height:1.55;
	color:var(--muted);
	margin:0 0 14px;
	}

.news-detail-image-placeholder
	{
	width:100%;
	aspect-ratio:16/9;
	border-radius:20px;
	background:linear-gradient(135deg,var(--spo-blue-soft),#c6eafa);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:32px;
	font-weight:900;
	color:var(--spo-blue-dark);
	position:relative;
	overflow:hidden;
	}

.news-detail-image-placeholder:after
	{
	content:'';
	position:absolute;
	width:180px;
	height:180px;
	border:32px solid rgba(0,143,202,.12);
	border-radius:50%;
	right:-65px;
	top:-75px;
	}

.news-detail-body
	{
	font-size:15px;
	line-height:1.7;
	color:var(--ink);
	}

.news-detail-body p
	{
	margin:0 0 18px;
	}

.news-detail-body h2
	{
	font-size:20px;
	line-height:1.3;
	margin:28px 0 12px;
	color:var(--ink);
	}

.news-detail-footer
	{
	margin-top:32px;
	padding-top:20px;
	border-top:1px solid var(--border);
	}

@media(min-width:700px)
	{
	.news-detail
		{
		width:100%;
		margin:0 auto;
		padding:35px 35px;
		}

	.news-detail-header
		{
		display:grid;
		grid-template-columns:minmax(0,1fr) minmax(0,1fr);
		gap:35px;
		align-items:center;
		margin-bottom:35px;
		}

	.news-detail-image
		{
		order:initial;
		margin:0;
		}

	.news-detail-intro
		{
		order:initial;
		}

	.news-detail-title
		{
		font-size:32px;
		}

	.news-detail-lead
		{
		font-size:16px;
		margin-bottom:0;
		}

	.news-detail-body
		{
		margin:0 auto;
		font-size:16px;
		}

	.news-detail-footer
		{
		margin:32px auto 0;
		}
	}	

@media(min-width:700px)
	{
	.news-detail
		{
		width:100%;
		margin:0 auto;
		padding:35px 30px;
		}

	.news-detail-header
		{
		display:grid;
		grid-template-columns:45% 1fr;
		gap:30px;
		align-items:center;
		margin-bottom:30px;
		}

	.news-detail-image
		{
		width:100%;
		max-width:none;
		margin:0;
		order:initial;
		}

	.news-detail-intro
		{
		width:100%;
		min-width:0;
		order:initial;
		}

	.news-detail-image-placeholder
		{
		width:100%;
		aspect-ratio:16/9;
		}

	.news-detail-title
		{
		font-size:30px;
		line-height:1.15;
		}

	.news-detail-lead
		{
		font-size:15px;
		line-height:1.55;
		margin-bottom:0;
		}

	.news-detail-body
		{
		margin:0 auto;
		font-size:15px;
		}

	.news-detail-footer
		{
		max-width:100%;
		margin:32px auto 0;
		}
	}

@media(min-width:1100px)
	{
	.news-detail
		{
		padding:40px 40px;
		}

	.news-detail-header
		{
		grid-template-columns:35% 1fr;
		gap:40px;
		align-items:center;
		}

	.news-detail-title
		{
		font-size:32px;
		}

	.news-detail-lead
		{
		}
	}
.event-list
	{
	display:grid;
	gap:12px;
	}

.event-list-card
	{
	display:grid;
	grid-template-columns:64px minmax(0,1fr) 22px;
	gap:14px;
	align-items:center;
	text-decoration:none;
	color:var(--ink);
	padding:14px;
	}

.event-list-date
	{
	width:64px;
	height:76px;
	border-radius:16px;
	background:var(--spo-blue-soft);
	color:var(--spo-blue-dark);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	}

.event-list-date strong
	{
	font-size:25px;
	line-height:1;
	}

.event-list-date span
	{
	font-size:11px;
	font-weight:900;
	margin-top:4px;
	}

.event-list-date small
	{
	font-size:9px;
	color:var(--muted);
	margin-top:2px;
	}

.event-list-content
	{
	min-width:0;
	}

.event-list-tags
	{
	display:flex;
	gap:6px;
	margin-bottom:7px;
	}

.event-list-content h3
	{
	font-size:15px;
	line-height:1.25;
	margin:0 0 8px;
	}

.event-list-info
	{
	display:flex;
	flex-direction:column;
	gap:5px;
	color:var(--muted);
	font-size:11px;
	}

.event-list-info div
	{
	display:flex;
	align-items:center;
	gap:5px;
	}

.event-list-info .icon
	{
	width:14px;
	height:14px;
	flex:none;
	}

.event-list-arrow
	{
	color:var(--muted);
	}

.event-list-arrow .icon
	{
	width:20px;
	height:20px;
	}

.event-list-past
	{
	opacity:.72;
	}

@media(min-width:700px)
	{
	.event-list
		{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:15px;
		}

	.event-list-card
		{
		min-height:130px;
		padding:18px;
		}

	.event-list-date
		{
		width:70px;
		height:82px;
		}

	.event-list-content h3
		{
		font-size:17px;
		}
	}

@media(min-width:1100px)
	{
	.content
		{
		width:100%;
		max-width:100%;
		margin:0 auto;
		}
	}		
@media(min-width:900px)
	{
	.registration-layout
		{
		display:grid;
		grid-template-columns:minmax(0,60%) minmax(0,40%);
		gap:20px;
		align-items:start;
		}

	.registration-form
		{
		min-width:0;
		}

	.registration-info
		{
		width:100%;
		min-width:0;
		}
	}
.form-label
	{
	display:block;
	font-size:14px;
	font-weight:900;
	margin-bottom:7px;
	}

@media(max-width:899px)
{
.registration-layout
{
display:flex;
flex-direction:column;
}

.registration-info
{
order:1;
}

.registration-form
{
order:2;
}
}	
.font-responsive
	{
	font-size:14px;
	}

@media(min-width:700px)
	{
	.font-responsive
		{
		font-size:17px;
		}
	}	

.news-image
	{
	display:block;
	width:100%;
	height:auto;
	border-radius:16px;
	}

@media(min-width:700px)
	{
	.news-card
		{
		display:grid;
		grid-template-columns:380px 1fr;
		column-gap:24px;
		align-items:center;
		}

	.news-card .news-image
		{
		width:380px;
		height:auto;
		grid-column:1;
		grid-row:1 / 4;
		}

	.news-card > div:not(.news-image),
	.news-card h3,
	.news-card .btn
		{
		grid-column:2;
		}

	.news-card > div:not(.news-image)
		{
		margin-top:0 !important;
		align-self:end;
		}

	.news-card h3
		{
		margin:8px 0;
		align-self:center;
		}

	.news-card .btn
		{
		justify-self:start;
		align-self:start;
		}
	}
.search-form
	{
	display:flex;
	gap:10px;
	align-items:center;
	}

.search-field
	{
	flex:1;
	}

.search-field .form-control
	{
	width:100%;
	height:46px;
	border-radius:10px;
	}

.search-button
	{
	height:46px;
	padding:0 18px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	background-color:#014083;
	border-color:#014083;
	white-space:nowrap;
	}

@media(max-width:699px)
	{
	.search-form
		{
		display:grid;
		grid-template-columns:1fr 48px;
		gap:8px;
		}

	.search-field .form-control
		{
		height:44px;
		font-size:14px;
		}

	.search-button
		{
		width:48px;
		height:44px;
		padding:0;
		border-radius:10px;
		}

	.search-button span
		{
		display:none;
		}

	.search-button svg
		{
		width:18px;
		height:18px;
		}
	}
.news-image
	{
	display:block;
	width:100%;
	height:auto;
	border-radius:16px;
	}

@media(min-width:700px)
	{
	.news-card
		{
		display:grid;
		grid-template-columns:380px 1fr;
		column-gap:24px;
		align-items:center;
		}

	.news-card .news-image
		{
		width:380px;
		height:auto;
		grid-column:1;
		grid-row:1 / 4;
		}

	.news-card > div:not(.news-image),
	.news-card h3,
	.news-card .btn
		{
		grid-column:2;
		}

	.news-card > div:not(.news-image)
		{
		margin-top:0 !important;
		align-self:end;
		}

	.news-card h3
		{
		margin:8px 0;
		align-self:center;
		}

	.news-card .btn
		{
		justify-self:start;
		align-self:start;
		}
	}
.search-form
	{
	display:flex;
	gap:10px;
	align-items:center;
	}

.search-field
	{
	flex:1;
	}

.search-field .form-control
	{
	width:100%;
	height:46px;
	border-radius:10px;
	}

.search-button
	{
	height:46px;
	padding:0 18px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	background-color:#014083;
	border-color:#014083;
	white-space:nowrap;
	}

@media(max-width:699px)
	{
	.search-form
		{
		display:grid;
		grid-template-columns:1fr 48px;
		gap:8px;
		}

	.search-field .form-control
		{
		height:44px;
		font-size:14px;
		}

	.search-button
		{
		width:48px;
		height:44px;
		padding:0;
		border-radius:10px;
		}

	.search-button span
		{
		display:none;
		}

	.search-button svg
		{
		width:18px;
		height:18px;
		}
	}
@media (min-width: 768px)
{
.social-grid
{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
}

.social
{
width: 60px;
min-height: 42px;
flex: none;
}
}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
}


.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border:1px solid #ddd;
}
.login-card
{
width:100%;
max-width:620px;
margin:-45px auto 0;
padding:28px;
}
@media (max-width:768px)
{
.login-card
{
max-width:none;
margin:-30px 16px 0;
width:auto;
}
}
.login .hero
{
padding:16px 0 80px;
}
.login .topbar
{
margin:0 18px;
}
.login .welcome,
.login .page-title,
.login .page-subtitle
{
width:620px;
max-width:calc(100% - 32px);
margin-left:auto;
margin-right:auto;
}
.login .welcome
{
margin-top:28px;
}
.login-card
{
width:620px;
max-width:calc(100% - 32px);
margin:-40px auto 0;
padding:28px;
}
.login .hero
{
padding:16px 0 80px;
display:flex;
align-items:center;
justify-content:center;
}
.login-logo
{
display:flex;
align-items:center;
justify-content:center;
height:150px;
}
.login-logo img
{
width:550px;
max-width:60%;
height:auto;
display:block;
}
.recaptcha-wrap
{
display:flex;
justify-content:center;
overflow:hidden;
}
@media (max-width:380px)
{
.recaptcha-wrap .g-recaptcha
{
transform:scale(0.88);
transform-origin:center top;
}
}
.alert
{
position:relative;
padding:16px 20px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:10px;
font-weight:500;
line-height:1.5;
text-align:center;
}

.alert-primary
{
color:#084298;
background-color:#cfe2ff;
border-color:#b6d4fe;
}
.alert-secondary
{
color:#41464b;
background-color:#e2e3e5;
border-color:#d3d6d8;
}
.alert-success
{
color:#0f5132;
background-color:#d1e7dd;
border-color:#badbcc;
}
.alert-danger
{
color:#842029;
background-color:#f8d7da;
border-color:#f5c2c7;
}
.alert-warning
{
color:#664d03;
background-color:#fff3cd;
border-color:#ffecb5;
}
.alert-info
{
color:#055160;
background-color:#cff4fc;
border-color:#b6effb;
}
.alert-light
{
color:#636464;
background-color:#fefefe;
border-color:#fdfdfe;
}
.alert-dark
{
color:#141619;
background-color:#d3d3d4;
border-color:#bcbebf;
}
.alert a
{
font-weight:700;
text-decoration:underline;
color:inherit;
}
.alert-heading
{
color:inherit;
margin-top:0;
margin-bottom:8px;
font-weight:700;
}
.alert-dismissible
{
padding-right:50px;
}
.alert-dismissible .btn-close
{
position:absolute;
top:0;
right:0;
padding:16px;
background:transparent;
border:0;
font-size:20px;
line-height:1;
cursor:pointer;
color:inherit;
opacity:.6;
}
.alert-dismissible .btn-close:hover
{
opacity:1;
}
.alert.font-responsive
{
font-size:17px !important;
}
@media (max-width:768px)
{
.alert.font-responsive
{
font-size:14px !important;
}
}
.toggle
{
position:relative;
display:inline-block;
width:46px;
height:26px;
flex-shrink:0;
}

.toggle input
{
opacity:0;
width:0;
height:0;
}

.toggle-slider
{
position:absolute;
cursor:pointer;
inset:0;
background:#d8dde3;
border-radius:30px;
transition:.2s;
}

.toggle-slider:before
{
content:"";
position:absolute;
width:20px;
height:20px;
left:3px;
top:3px;
background:#fff;
border-radius:50%;
transition:.2s;
box-shadow:0 1px 3px rgba(0,0,0,.20);
}

.toggle input:checked + .toggle-slider
{
background:#007dbf;
}

.toggle input:checked + .toggle-slider:before
{
transform:translateX(20px);
}

.alert-layout
{
display:block;
}

@media (min-width:992px)
{
.alert-layout
{
display:grid;
grid-template-columns:1fr 420px;
gap:24px;
align-items:start;
}
}
.notification-item
{
display:flex;
align-items:center;
gap:12px;
position:relative;
overflow:visible;
}

.notification-item .grow
{
flex:1;
min-width:0;
}

.notification-item strong a
{
color:inherit;
text-decoration:none;
}

.notification-item strong a:hover
{
text-decoration:underline;
}

.notification-more
{
position:relative;
flex-shrink:0;
}

.notification-more summary
{
list-style:none;
}

.notification-more summary::-webkit-details-marker
{
display:none;
}

.notification-more-button
{
cursor:pointer;
font-size:20px;
line-height:1;
padding:8px;
color:#62788a;
user-select:none;
}

.notification-dropdown
{
position:absolute;
top:34px;
right:0;
width:190px;
background:#ffffff;
border:1px solid #dfe6ec;
border-radius:10px;
box-shadow:0 8px 25px rgba(0,0,0,.12);
padding:6px;
z-index:9999;
}

.notification-dropdown ul
{
list-style:none;
padding:0;
margin:0;
}

.notification-dropdown li
{
margin:0;
padding:0;
}

.notification-dropdown li a
{
display:block;
padding:9px 12px;
text-decoration:none;
font-weight:normal;
white-space:nowrap;
border-radius:6px;
}

.notification-dropdown li a:hover
{
background:#f3f7fa;
}

.notification-divider
{
height:1px;
background:#e6edf2;
margin:4px 0 !important;
}

@media (max-width:768px)
{
.notification-item
{
align-items:flex-start;
}

.notification-more-button
{
padding:4px;
}
}
.search-form
{
display:flex;
align-items:stretch;
gap:8px;
width:100%;
}

.search-field
{
flex:1;
min-width:0;
}

.search-field .form-control
{
width:100%;
height:46px;
}

.search-button
{
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.search-filter
{
width:150px;
flex-shrink:0;
}

.search-filter .js-select
{
width:100%;
height:46px;
padding:0 8px;
border:1px solid #d7e0e7;
border-radius:8px;
background:#fff;
font-family:inherit;
font-size:14px;
cursor:pointer;
}

@media (max-width:600px)
{
.search-form
{
flex-wrap:nowrap;
gap:6px;
}

.search-field
{
flex:1;
min-width:0;
}

.search-button
{
width:42px;
height:44px;
flex-shrink:0;
}

.search-filter
{
width:105px;
flex-shrink:0;
}

.search-filter .js-select
{
height:44px;
font-size:12px;
padding:0 4px;
}
}
.notification-wrapper
{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
}

.notification-dot
{
position:absolute;
top:-3px;
right:-3px;
width:12px;
height:12px;
background:#e53935;
border:2px solid #fff;
border-radius:50%;
box-sizing:border-box;
z-index:20;
pointer-events:none;
animation:notification-blink 1.2s ease-in-out infinite;
}

@keyframes notification-blink
{
0%, 100%
{
opacity:1;
}

50%
{
opacity:.3;
}
}