:root {
	--e-global-color-primary: #081466;
	--e-global-color-secondary: #7B7E8F;
	--e-global-color-text: #666666;
	--e-global-color-accent: #1967D2;
	--e-global-typography-primary-font-family: "Reddit Sans";
	--e-global-typography-primary-font-weight: 200
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
	font-family: "Lato", sans-serif;
	margin: 0px;
	padding: 0px;
	background-color: #F6F8FC
}

.fame-main-wrapper {
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 24px;
	align-items: flex-start;
}

.fame-container-common {
	min-width: 100%;
	grid-column: 1 / -1;
}

.fame-container {
	min-width: 100%;
	display: flex;
	gap: 24px;
	align-items: flex-start
}

.fame-filters {
	min-width: 20%;
	width: 20%;
	background-color: #fff;
	box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
	border-radius: 10px;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in
}
.fame-topic-filters-inn,
.fame-layout-default .fame-filters {
	width: 100%;
}
.fame-layout-default .fame-filters {
	box-shadow: none;
}
.fame-layout-default input.fame-topic-search {
	background-color: #F4F7FF;
}
.fame-layout-default div.fame-topic-overlay__panel h3 {
    padding: 0px 0px 15px 0px;
    margin-bottom: 20px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.fame-layout-default div.fame-topic-overlay__panel h3 i {
    font-size: 30px;
    padding-top: 3px;
    line-height: 0;
    display: flex;
    cursor: pointer;
}

.fame-filters-title {
	display: flex;
	width: 100%;
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 100%;
	padding: 20px;
	color: var(--e-global-color-primary);
	align-items: center;
	justify-content: space-between
}

.fame-filters-title i {
	display: inline-flex;
	width: 30px;
	height: 30px;
	border-radius: 5px;
	background-color: var(--e-global-color-primary);
	color: #ffffff;
	align-items: center;
	justify-content: center;
	font-size: 16px
}

.fame-filters-restitle {
	display: none;
	background-color: #ffffff;
	border-radius: 8px
}

a.fame-filters-close-bar {
	display: none;
	position: absolute;
	right: 15px;
	top: 15px;
	font-size: 28px;
	color: var(--e-global-color-primary)
}

.fame-filters-sec,
.fame-filters-links {
	display: flex;
	width: 100%;
	flex-wrap: wrap
}

.fame-filters-nflbel {
	display: flex;
	width: 100%;
	padding: 18px 0px;
	border-top: 1px solid #E2E3EB;
	align-items: center;
	gap: 14px;
	position: relative;
	cursor: pointer
}

.fame-filters-clcklbl .fame-filter-arrowact {
	font-size: 10px;
	color: var(--e-global-color-primary);
	margin-left: auto;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in
}

.fame-filters-clcklbl.fame-active .fame-filter-arrowact {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg)
}

.fame-filters-subsec {
	display: none;
	width: 100%;
	flex-wrap: wrap;
	padding: 15px 10px;
	border-top: 1px solid #E2E3EB
}

.fame-filters-subsec .fame-filters-nflbel {
	border: none;
	padding: 0px 0px 0px 20px;
    border-left: 1px solid #E2E3EB;
}

.fame-filters-subsec .fame-filters-links-txt {
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 32px;
	color: #333333;
}

.fame-filters-nflbel input[type="checkbox"] {
	display: none
}

.fame-switch {
	position: relative;
	display: inline-flex;
	width: 20px;
	min-width: 20px;
	height: 20px;
	background-color: #EFF1F8;
	border: 1px solid #CCCCCC;
	border-radius: 50px;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in
}

.fame-switch::after {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	font-size: 10px;
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 1px 0px 0px 0px;
}

.fame-filters-nflbel input[type="checkbox"]:checked+.fame-switch,
.fame-active .fame-switch {
	background-color: var(--e-global-color-primary);
	color: #fff;
}

.fame-filters-nflbel input[type="checkbox"]:checked+.fame-switch::after,
.fame-active .fame-switch::after {
	content: "✓";
	color: #ffffff;
}

.fame-filters-links-txt {
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #181818;
}

.fame-quiz-questions-con {
	display: flex;
	width: 100%;
	background-color: #fff;
	box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
	border-radius: 10px
}

.fame-question-top-con {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #E2E3EB
}

.fame-question-top-con .fame-quest-numb-con {
	display: flex;
	width: 100%;
	justify-content: space-between
}

.fame-question-top-con .fame-quest-numb-con strong,
.fame-question-top-con .fame-quest-numb-con span {
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
	color: #FF5050
}

.fame-question-top-con .fame-quest-totl-con {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	min-width: 150px;
	justify-content: flex-end
}
.fame-system-question-top__actions {
    display: flex;
    margin-top: 3px;
}

.fame-question-top-con .fame-totl-outof-quests {
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 21px;
	color: #7B7E8F
}

.fame-question-top-con .fame-totl-outof-quests span {
	color: var(--e-global-color-primary)
}
.fame-flag-pstg {
	padding-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fame-flag-pstg i {
    font-size: 30px;
}

.fame-system-layout {
    position: relative;
}

.fame-system-inline-toast-wrap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.fame-system-inline-toast {
    min-width: 220px;
    max-width: 320px;
    padding: 12px 16px;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 16px 32px rgba(8, 20, 102, 0.18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}

.fame-system-inline-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fame-system-inline-toast-success {
    background: #49C192;
}

.fame-system-inline-toast-danger {
    background: #DF4B59;
}

.fame-question-top-con .fame-quest-prev-sbtn,
.fame-question-top-con .fame-quest-next-sbtn {
	font-size: 12px;
	color: var(--e-global-color-secondary);
	text-decoration: none;
	line-height: 1;
}
.fame-question-top-con .fame-quest-next-sbtn i {
	line-height: 1;
    display: flex;
    font-size: 12px;
    padding-top: 4px;
}
.fame-question-toolbar .fame-qtool-btn.fame-flag-pstg i {
	padding-top: 4px;
	line-height: 0;
}
.fame-system-question-top__actions i,
.fame-system-question-top__actions i:before {
	color: #333333;
}

.fame-question-top-con .fame-quest-prev-sbtn i {
	display: inline-flex;
	-webkit-transform: scale(-1);
	-moz-transform: scale(-1);
	-ms-transform: scale(-1);
	-o-transform: scale(-1);
	transform: scale(-1)
}

.fame-body-main .fame-question-top-con {
	display: inline-flex;
	align-items: center;
	gap: 8px
}

.fame-body-main .fame-question-top-con span.fame-quizeslctn-wrong,
.fame-body-main .fame-question-top-con span.fame-quizeslctn-right,
span.fame-quizeslctn-rtwrcon.fame-quizeslctn-wrong,
span.fame-quizeslctn-rtwrcon.fame-quizeslctn-right {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 5px 10px;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(8, 20, 102, 0.12)
}

.fame-body-main .fame-question-top-con span.fame-quizeslctn-wrong,
span.fame-quizeslctn-rtwrcon.fame-quizeslctn-wrong {
	background: linear-gradient(135deg, #ff6b81 0%, #e63946 100%) !important;
	color: #fff !important;
}

.fame-body-main .fame-question-top-con span.fame-quizeslctn-right,
span.fame-quizeslctn-rtwrcon.fame-quizeslctn-right {
	background: linear-gradient(135deg, #49c192 0%, #1f9d73 100%) !important;
	color: #fff !important;
}

.fame-question-markup-holdr {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	padding: 20px;
	background-color: #ffffff;
	border-radius: 12px;
    box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
}

.fame-mockquests-main-holdr {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: 20px
}

.fame-question-nxtprv-wrap {
	display: flex;
	width: 100%;
	justify-content: flex-end;
	padding: 0px 20px 20px 20px;
	align-items: center;
}
.fame-question-nxtprv-inn {
	display: flex;
	width: 100%;
	background-color: #F4F7FF;
}

.fame-question-nxtprv-inn a span {
    display: flex;
    flex-wrap: wrap;
    text-align: right;
    justify-content: flex-end;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	color: #0084C5;
	text-transform: uppercase;
}
.fame-question-nxtprv-inn a span small {
	width: 100%;
}
.fame-next-title,
.fame-prev-title {
	text-transform: none;
}

.fame-question-nxtprv-inn a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    flex: 1;
    -webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in
}
.fame-question-nxtprv-inn a.fame-nextq-btn span {
	text-align: left;
    justify-content: flex-start;
}
.fame-question-nxtprv-inn a.fame-question-skip-btn {
    display: flex;
    background-color: #F8B81F;
    color: #333333;
    padding: 10px 15px;
    gap: 6px;
    align-items: center;
    flex: initial;
}
.fame-question-nxtprv-inn a.fame-question-skip-btn i {
	font-size: 16px;
}
.fame-question-nxtprv-inn a:hover {
	background-color: #0084C5;
	color: #ffffff;
}
.fame-question-nxtprv-inn a:hover span,
.fame-question-nxtprv-inn a:hover small,
.fame-question-nxtprv-inn a:hover i,
.fame-question-nxtprv-inn a:hover i:before {
color: #ffffff;
}

.fame-question-nxtprv-wrap a i,
.fame-question-nxtprv-wrap a i:before {
	font-size: 12px;
	color: #34353C;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in
}

.fame-question-nxtprv-wrap a.fame-prevq-btn i {
	-webkit-transform: scale(-1);
	-moz-transform: scale(-1);
	-ms-transform: scale(-1);
	-o-transform: scale(-1);
	transform: scale(-1)
}

.fame-question-main-con,
.fame-question-ansrs-list {
	display: flex;
	width: 100%;
	flex-wrap: wrap
}

.fame-question-txt-str {
	display: flex;
	width: 100%
}

/* On the mock results view (quest-submitted), the question text is the
   click target that toggles options + explanation. Show a hand cursor
   so users know it's clickable. */
.fame-mock-questionare-maincon .fame-mockquest-markup-itm .fame-question-main-con.quest-submitted .fame-question-txt-str {
	cursor: pointer;
}

/* Auto-number questions in the mock view as Q.1, Q.2, … using a CSS
   counter — purely presentational, no markup changes. The counter is
   reset on the outer holder and incremented once per question card. */
.fame-mockquests-main-holdr { counter-reset: fame-q-num; }
.fame-mockquests-main-holdr .fame-mockquest-markup-itm { counter-increment: fame-q-num; }
.fame-mockquests-main-holdr .fame-mockquest-markup-itm .fame-question-txt-str strong::before {
	content: 'Q.' counter(fame-q-num) ' ';
	color: #FF5050;
	font-weight: 700;
	margin-right: 6px;
	flex-shrink: 0;
}

/* Per-topic Correct / Wrong filter chips on the mock results view.
   The chips live in the topic header to the right of the title and
   toggle visibility of sibling .fame-mockquest-markup-itm rows whose
   data-fame-q-status doesn't match the active chip. Counter numbering
   is preserved (CSS counters increment regardless of display:none). */
.fame-section-filters {
	display: inline-flex;
	gap: 8px;
	margin-left: auto;
	flex-wrap: wrap;
	align-items: center;
}
.fame-section-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.fame-section-filter-chip i.fame-icon {
	width: auto;
	height: auto;
	min-width: 0;
	background: transparent !important;
	color: inherit !important;
	border-radius: 0;
	font-size: 14px;
	display: inline-flex;
}
.fame-section-filter-chip .fame-chip-count {
	border-radius: 999px;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	min-width: 22px;
	text-align: center;
	background: #fff;
}

/* Correct chip — green by default, deeper green on active. */
.fame-section-filter-chip.is-correct {
	background: #16a34a;
	border-color: #16a34a;
}
.fame-section-filter-chip.is-correct:hover {
	background: #15803d;
	border-color: #15803d;
}
.fame-section-filter-chip.is-correct .fame-chip-count {
	color: #16a34a;
}
.fame-section-filter-chip.is-correct[data-fame-active="true"] {
	background: #166534;
	border-color: #166534;
	box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.18);
}
.fame-section-filter-chip.is-correct[data-fame-active="true"] .fame-chip-count {
	color: #166534;
}

/* Wrong chip — red by default, deeper red on active. */
.fame-section-filter-chip.is-wrong {
	background: #ef4444;
	border-color: #ef4444;
}
.fame-section-filter-chip.is-wrong:hover {
	background: #dc2626;
	border-color: #dc2626;
}
.fame-section-filter-chip.is-wrong .fame-chip-count {
	color: #ef4444;
}
.fame-section-filter-chip.is-wrong[data-fame-active="true"] {
	background: #991b1b;
	border-color: #991b1b;
	box-shadow: 0 0 0 3px rgba(153, 27, 27, 0.18);
}
.fame-section-filter-chip.is-wrong[data-fame-active="true"] .fame-chip-count {
	color: #991b1b;
}
.fame-mockquest-markup-itm.fame-quest-hidden {
	display: none !important;
}

/* Click the topic header to collapse/expand its questions. Chips
   inside the header are excluded from the toggle in JS. The chevron
   on the title rotates on collapse for visual feedback. */
.fame-mock-questionare-maincon .fame-testquest-hder {
	cursor: pointer;
	user-select: none;
}
.fame-mock-questionare-maincon .fame-testquest-hder h2::after {
	content: '\25BE';
	display: inline-block;
	margin-left: 8px;
	color: #94a3b8;
	font-size: 12px;
	transition: transform 0.2s ease;
}
.fame-mock-questionare-maincon [data-fame-section].fame-section-collapsed .fame-testquest-hder h2::after {
	transform: rotate(-90deg);
}

/* Top-right status dot on each completed-attempt question card.
   Anchored to .fame-mockquest-markup-itm itself (which IS the visible
   rounded white card — see .fame-question-markup-holdr). The dot is
   skipped/absent during in-progress attempts because the data
   attribute is only emitted when $isCompleted (see mock-holder.blade.php). */
.fame-mock-questionare-maincon .fame-mockquest-markup-itm[data-fame-q-status] {
	position: relative;
}
.fame-mock-questionare-maincon .fame-mockquest-markup-itm[data-fame-q-status]::after {
	content: '';
	position: absolute;
	top: 14px;
	right: 14px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	z-index: 2;
	pointer-events: none;
}
.fame-mock-questionare-maincon .fame-mockquest-markup-itm[data-fame-q-status="correct"]::after {
	background: #16a34a;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}
.fame-mock-questionare-maincon .fame-mockquest-markup-itm[data-fame-q-status="wrong"]::after {
	background: #ef4444;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.fame-mock-questionare-maincon .fame-mockquest-markup-itm[data-fame-q-status="skipped"]::after {
	background: #94a3b8;
	box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

/* Explanation images imported from .docx via QuestionImportImageWriter,
   landing under /userfiles/media/fame/questions/explanations/. Word
   often embeds large originals — clamp to the explanation block width
   so layouts don't blow out, with a small vertical rhythm. */
.fame-question-explanation img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 8px 0;
	border-radius: 6px;
}

/* Question toolbar "Tools" dropdown — used on small viewports to
   collapse Notes/Feedback/Calculator/Mark into a single trigger.
   Desktop (>767px): trigger is hidden, toolbar lays out inline. */
.fame-question-toolbar-wrap {
	position: relative;
	display: contents;
}
.fame-qtool-dropdown-trigger {
	display: none;
}

@media (max-width: 767px) {
	.fame-question-toolbar-wrap {
		display: inline-flex;
		position: relative;
	}

	.fame-qtool-dropdown-trigger {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 8px 12px;
		border: 1px solid #d8dde6;
		background: #ffffff;
		border-radius: 999px;
		color: #0f172a;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}
	.fame-qtool-dropdown-trigger:hover,
	.fame-qtool-dropdown-trigger:active {
		background: #f1f5f9;
		border-color: #cbd5e1;
	}
	.fame-question-toolbar-wrap.is-open .fame-qtool-dropdown-trigger {
		background: #206bc4;
		border-color: #206bc4;
		color: #ffffff;
	}
	.fame-qtool-dropdown-trigger__caret {
		transition: transform 0.18s ease;
	}
	.fame-question-toolbar-wrap.is-open .fame-qtool-dropdown-trigger__caret {
		transform: rotate(180deg);
	}

	/* Bottom-sheet drawer for the toolbar. We can't use
	   position:absolute because an ancestor (.fame-question-top-con)
	   has overflow-x:auto, which clips absolutely-positioned descendants.
	   Position:fixed escapes every clipping context, and a bottom-sheet
	   is the standard mobile pattern for action lists. */
	.fame-question-toolbar-wrap .fame-question-toolbar {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1050;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0));
		background: #ffffff;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -12px 32px rgba(8, 20, 102, 0.18);
		transform: translateY(100%);
		transition: transform 0.22s ease;
	}
	.fame-question-toolbar-wrap.is-open .fame-question-toolbar {
		display: flex;
		transform: translateY(0);
	}

	/* Grab-handle bar at the top of the sheet — visual affordance
	   that this panel can be dismissed. Pure decorative. */
	.fame-question-toolbar-wrap .fame-question-toolbar::before {
		content: '';
		display: block;
		width: 44px;
		height: 4px;
		margin: 0 auto 12px;
		background: #cbd5e1;
		border-radius: 999px;
	}

	/* Backdrop behind the sheet — click to dismiss. The JS already
	   closes the sheet on any click outside the toolbar-wrap, so
	   tapping this dim layer triggers the same path. */
	.fame-question-toolbar-wrap.is-open::after {
		content: '';
		position: fixed;
		inset: 0;
		z-index: 1049;
		background: rgba(15, 23, 42, 0.45);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}

	/* Each tool button stacks full-width inside the sheet so the
	   icon + label sit on one row with comfortable touch targets. */
	.fame-question-toolbar-wrap .fame-question-toolbar .fame-qtool-btn {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		padding: 12px 14px;
		border-radius: 10px;
		color: #0f172a;
		min-height: 48px;
		background: transparent;
	}
	.fame-question-toolbar-wrap .fame-question-toolbar .fame-qtool-btn:hover,
	.fame-question-toolbar-wrap .fame-question-toolbar .fame-qtool-btn:active {
		background: #f1f5f9;
		color: #0f172a;
	}
	.fame-question-toolbar-wrap .fame-question-toolbar .fame-qtool-label {
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.2px;
	}
}

/* Tag chips rendered inline at the END of a question's <strong> text
   in the quiz-question component. Source: views/components/quiz-question.blade.php
   resolves the question's tags against tag_packages_map and emits one
   chip per matching tag (e.g. NRE 1, AMC 1, FCPS-1). Slug carried in
   data-fame-tag-slug so palettes can be themed per tag. Inline-block
   so they wrap naturally after long question text. */
.fame-question-tag-chip {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #ffffff;
	background: #206bc4;
	border-radius: 999px;
	line-height: 1.4;
	vertical-align: middle;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 1px 2px rgba(8, 20, 102, 0.08);
	white-space: nowrap;
}
.fame-question-tag-chip + .fame-question-tag-chip {
	margin-left: 4px;
}
/* Per-slug palette overrides — extend as new tags are added. */
.fame-question-tag-chip[data-fame-tag-slug="nre-1"] {
	background: #2563eb;
}
.fame-question-tag-chip[data-fame-tag-slug="amc-1"] {
	background: #16a34a;
}
.fame-question-tag-chip[data-fame-tag-slug="fcps-exam"],
.fame-question-tag-chip[data-fame-tag-slug="fcps-1"] {
	background: #b45309;
}

/* Empty-state card shown inside the question navigator when the
   active filter chips (Correct / Wrong / Skipped / Unanswered) leave
   zero matches. Sits in place of the .fame-navgrid button grid; same
   width, soft elevation, centred icon. The icon is a no-results
   magnifying-glass rendered as an inline SVG data URI so we don't
   need to touch the markup or load a separate asset. */
.fame-navempty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 180px;
	margin: 12px 0 8px;
	padding: 28px 24px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 14px;
	color: #475569;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	text-align: center;
	box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
}
.fame-navempty::before {
	content: '';
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #eef2ff no-repeat center / 28px 28px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23206bc4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='8.5' y1='8.5' x2='13.5' y2='13.5'/><line x1='13.5' y1='8.5' x2='8.5' y2='13.5'/></svg>");
	flex-shrink: 0;
}
.fame-navempty::after {
	content: 'Try a different filter from the chips above.';
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #94a3b8;
	letter-spacing: 0.1px;
}

/* Per-tag package CTA, rendered via views/components/tag-package-cta.blade.php
   when tag_packages_map is configured AND the current user lacks a paid
   order for at least one mapped tag. Each "group" shows the tag's own
   packages; if a tag has no packages mapped, the partial falls back to
   the union of every configured tag's packages. */
.fame-tag-package-cta {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	margin: 16px 0;
}
.fame-tag-package-cta__group {
	border: 1px solid #dbe4ee;
	border-radius: 12px;
	background: #ffffff;
	padding: 14px 16px;
	box-shadow: 0 1px 3px rgba(8, 20, 102, 0.04);
}
.fame-tag-package-cta__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
}
.fame-tag-package-cta__head strong {
	font-size: 15px;
	color: #0f172a;
	letter-spacing: 0.1px;
}
.fame-tag-package-cta__hint {
	color: #64748b;
	font-size: 13px;
}
.fame-tag-package-cta__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}
.fame-tag-package-cta__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	border: 1px solid #d8e0eb;
	border-radius: 10px;
	color: #0f172a;
	background: #f8fafc;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.fame-tag-package-cta__item:hover {
	background: #eff6ff;
	border-color: #93c5fd;
	transform: translateY(-1px);
	color: #0f172a;
	text-decoration: none;
}
.fame-tag-package-cta__title {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
}
.fame-tag-package-cta__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #2563eb;
	font-weight: 600;
	font-size: 12px;
}

/* Headings inside explanations (emitted as <h4> by formatExplanationHtml
   when the parser detects an all-bold standalone paragraph in the
   source .docx — e.g. "High-Yield Overview", "Why not others"). */
.fame-question-explanation h4 {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	margin: 16px 0 6px;
	letter-spacing: 0.1px;
}

/* Word tables extracted by QuestionImportParser::tableToHtmlLine().
   Selectors target `table.fame-explanation-table` directly (no
   .fame-question-explanation ancestor required) because the table
   renders in several contexts: mock results, quiz answered state,
   admin editor preview, and the standalone preview page. */
table.fame-explanation-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 14px 0;
	font-size: 14px;
	line-height: 1.5;
	background: #fff;
	box-shadow: 0 1px 0 rgba(8, 20, 102, 0.04);
	border-radius: 8px;
	overflow: hidden;
	display: table;
	color: #111827;
}

table.fame-explanation-table tbody,
table.fame-explanation-table thead {
	display: table-row-group;
}

table.fame-explanation-table tr {
	display: table-row;
}

table.fame-explanation-table td,
table.fame-explanation-table th {
	border: 1px solid #d8e0eb;
	padding: 10px 14px;
	vertical-align: top;
	text-align: left;
	color: #111827;
	background-clip: padding-box;
	display: table-cell;
	font-weight: normal;
}

/* When a cell has bgcolor we soften the default grey border so it
   doesn't fight a coloured fill. */
table.fame-explanation-table td[bgcolor],
table.fame-explanation-table th[bgcolor] {
	border-color: rgba(0, 0, 0, 0.10);
}

/* Run-colour <font color="…"> from the parser. The HTML attribute
   itself sets the colour; this rule lets the inline color attribute
   propagate naturally without being overridden by a parent rule. */
table.fame-explanation-table font[color] {
	color: inherit;
}

/* Dark coloured headers commonly used by exported MCQ packs (AMC's
   "#2E7D32" green, navy "#1F4E79", slate "#2C3E50", indigo "#206BC4",
   etc.) — backstop white text in case the source didn't ship a run
   colour. */
table.fame-explanation-table td[bgcolor="#2E7D32" i],
table.fame-explanation-table th[bgcolor="#2E7D32" i],
table.fame-explanation-table td[bgcolor="#1F4E79" i],
table.fame-explanation-table th[bgcolor="#1F4E79" i],
table.fame-explanation-table td[bgcolor="#2C3E50" i],
table.fame-explanation-table th[bgcolor="#2C3E50" i],
table.fame-explanation-table td[bgcolor="#206BC4" i],
table.fame-explanation-table th[bgcolor="#206BC4" i],
table.fame-explanation-table td[bgcolor="#0F766E" i],
table.fame-explanation-table th[bgcolor="#0F766E" i] {
	color: #ffffff;
	font-weight: 600;
	letter-spacing: 0.2px;
}

table.fame-explanation-table td[bgcolor="#2E7D32" i] font,
table.fame-explanation-table th[bgcolor="#2E7D32" i] font {
	color: #ffffff;
}

/* Images inside a table cell shouldn't blow the cell's width. */
table.fame-explanation-table td img,
table.fame-explanation-table th img {
	max-width: 100%;
	height: auto;
	display: inline-block;
	margin: 4px 0;
	border-radius: 4px;
}

.fame-question-txt-str strong {
	font-style: normal;
	font-weight: bold;
	font-size: 16px;
	line-height: 22px;
	color: #34353C
}

.fame-question-main-con {
	gap: 20px
}

.fame-question-ansrs-list {
	border: 1px solid #EFF0F8;
	border-radius: 5px;
	overflow: hidden
}

.fame-question-ansrs-list .fame-question-ansr-itm {
	display: flex;
	width: 100%;
	padding: 20px 15px;
	align-items: center;
	gap: 15px;
	cursor: pointer;
	border-bottom: 1px solid #E2E3EB
}

.fame-question-ansrs-list .fame-question-ansr-itm:last-child {
	border: none
}

.fame-question-ansrs-list .fame-question-ansr-itm:nth-child(odd) {
	background-color: #f3f4fe
}

.fame-question-ansrs-list .fame-question-ansr-itm .fame-ansritm-circle {
	line-height: 1
}

.fame-question-ansrs-list .fame-question-ansr-itm.fame-wrong-answer {
	background-color: #FEE5E6
}

.fame-question-ansrs-list .fame-question-ansr-itm.fame-wrong-answer i {
	color: #FF5050
}

.fame-question-ansrs-list .fame-question-ansr-itm.fame-correct-answer {
	background-color: #DBF4E9
}

.fame-question-ansrs-list .fame-question-ansr-itm.fame-correct-answer i {
	color: #49C192
}

.fame-question-ansrs-list .fame-ansritm-circle i {
	color: #000000;
	font-size: 20px;
	line-height: 1;
	display: flex;
    padding-top: 6px;
}

.fame-question-ansrs-list .fame-ansritm-text {
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	color: #7B7E8F
}

.fame-explanation {
	display: flex;
	width: 100%;
	background-color: #fff;
	box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
	border-radius: 10px;
	flex-wrap: wrap
}

.fame-explanation .fame-explanation-title {
	display: flex;
	width: 100%;
	padding: 20px;
	border-bottom: 1px solid #E2E3EB;
	align-items: center;
	gap: 5px;
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 100%;
	color: var(--e-global-color-primary)
}

.fame-explanation .fame-explanation-title i {
	font-size: 20px;
	line-height: 0;
    display: flex;
    padding-top: 5px;
}

.fame-explanation .explanation-text {
	display: flex;
	width: 100%;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1px;
	color: #000000;
	padding: 20px;
	margin: 0px;
	flex-wrap: wrap;
	gap: 8px;
}

.fame-explanation .explanation-text p {
	margin: 0px;
}
.fame-explanation h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}
.fame-explanation ul {
    margin-bottom: 0;
}

.fame-explanation .explanation-text p:last-child {
	margin-bottom: 0px
}

.fame-explanation h4,
.fame-explanation ul {
	display: flex;
	width: 100%;
	flex-wrap: wrap
}

.fame-explanation ul li {
	width: 100%;
	list-style: disc
}

.fame-explanation hr {
	display: flex;
	width: 100%
}

.fame-main {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	width: 100%
}

.fame-main>div {
	width: 100%
}

.fame-invite {
	background: linear-gradient(180deg, #E8F4FF 0%, #FEF4FE 100%);
	border-radius: 10px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
	box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
}
.fame-invite.fame-invite-side {
    gap: 30px;
}
.fame-invite-side .fame-refer-wrapbox {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.fame-invite-side .fame-referral-scllnk {
	width: 100%;
	justify-content: center;
}
.fame-invite-side .fame-referral-fncytlt {
	width: 185px;
}
.fame-invite-content {
	flex-wrap: nowrap;
	gap: 70px;
}
.fame-invite-content .fame-refer-wrapbox {
	padding-top: 55px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
.fame-refer-mnhdng {
	display: flex;
	width: 100%;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}
.fame-invite-content .fame-refer-mnhdng {
	justify-content: flex-start;
	text-align: left;
}
.fame-refer-mnhdng h3 {
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	color: #181818;
	margin: 0px;
}
.fame-refer-mnhdng p {
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #6D6E79;
	margin: 0px;
}
.fame-refsc-inner {
	display: flex;
	width: 100%;
	justify-content: space-between;
	gap: 60px;
	align-items: center;
}
.fame-invite-secvew-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 30px;
}
.fame-invite-secvew-wrap,
.fame-refer-wrapbox {
	flex: 1;
}
.fame-refer-qrcode {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}
.fame-refer-qrcode svg {
    width: 110px;
    height: 110px;
    background-color: #fff;
    padding: 10px;
    border-radius: 6px;
}
.fame-refer-qrcode small {
    width: 100%;
    display: flex;
    justify-content: center;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 20px;
	color: #6D6E79;
}
.fame-referral-scllnk {
    display: inline-flex;
    gap: 10px;
    align-items: center;
}
.fame-referral-scllnk a,
.fame-referral-scllnk a:before {
    display: flex;
    line-height: 1;
    font-size: 30px;
}
.fame-referral-scllnk a.fame-google-gmail:before {
	color: #DF4B59;
}
.fame-referral-scllnk a.fame-facebook-solid-o:before {
	color: #0084C5;
}
.fame-referral-scllnk a.fame-linkedin-circle:before {
	color: #0490D9;
}
.fame-referral-scllnk a.fame-iphone-circle:before {
	color: #333333;
}
.fame-referral-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
}
.fame-referral-fncytlt {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 400;
  color: #555555;
  text-transform: uppercase;
  width: 100%;
}

.fame-referral-fncytlt::before,
.fame-referral-fncytlt::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #AFB3B8;
}

.fame-referral-fncytlt::before {
  margin-right: 5px;
}

.fame-referral-fncytlt::after {
  margin-left: 5px;
}
.fame-referral-email-box {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: 12px;
}
.fame-referral-email-tlt {
	font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #6D6E79;
}
.fame-referral-email-inn {
	display: flex;
	width: 100%;
	height: 44px;
	background-color: #ffffff;
	border-radius: 5px;
	position: relative;
}
.fame-referral-email-inn input {
	display: flex;
	width: 100%;
	height: 100%;
	padding: 10px 40px;
	background-color: transparent;
	border: none;
	outline: none;
	color: #6D6E79;
	font-size: 14px;
}
.fame-referral-email-inn i {
	position: absolute;
	left: 10px;
	top: 0px;
	font-size: 20px;
	color: #6D6E79;
	height: 100%;
	display: inline-flex;
	align-items: center;
	padding-top: 6px;
}
.fame-referral-email-inn button {
	display: inline-flex;
	padding: 5px 25px;
	line-height: 1;
	color: #ffffff;
	height: 100%;
	background-color: #0084C5;
	border-radius: 5px;
	border: 1px solid #0084C5;
	font-weight: 500;
	font-size: 18px;
	align-items: center;
}

.fame-invite .fame-filters-title {
	border-bottom: 1px solid #E2E3EB
}

.fame-system-sidebar {
	width: 25%;
	display: inline-flex;
	gap: 20px;
	flex-wrap: wrap
}

.fame-system-sidebar .fame-login-thumb-sec,
.fame-system-sidebar .fame-rightside-boxsec,
.fame-system-sidebar .fame-form-style {
	width: 100%;
	min-width: 100%
}

.fame-invite-box {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: 15px
}
.fame-invite-tlt {
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 17px;
	color: #6D6E79;
}

.fame-invite-box .fame-invite-submit {
	display: flex;
	width: 100%;
	background-color: #47C392;
	border-radius: 5px;
	padding: 7px;
	border: 1px solid #47C392;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 23px;
	color: #fff;
	justify-content: center;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in
}

.fame-invite-box .fame-invite-submit:hover {
	background-color: #ffffff;
	color: #47C392
}

.fame-invite-box .fame-invite-copy {
	display: flex;
	width: 100%;
	height: 44px;
	align-items: center;
	cursor: pointer;
	gap: 10px;
}

.fame-invite-box .fame-invite-copy small {
	display: flex;
	width: 100%;
	font-style: normal;
	font-size: 16px;
	color: var(--e-global-color-primary);
	font-style: normal;
	font-weight: 400;
	line-height: 19px;
	opacity: 0.8;
	background-color: #ffffff;
	border: 1px solid #EEEFF8;
	border-radius: 5px;
	padding: 5px 10px;
	height: 100%;
	align-items: center;
	word-break: break-all;
}

.fame-invite-box .fame-invite-copy i {
	font-size: 20px;
    color: #ffffff;
    background-color: #49C192;
    box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
    border-radius: 5px;
    display: inline-flex;
    min-width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    padding-top: 6px;
}

.fame-invite-box .fame-coupon-txt {
	display: flex;
	width: 100%;
	margin: 0px;
	background-color: #00be90;
	color: #ffffff;
	border-radius: 8px;
	padding: 8px;
	justify-content: center;
	text-align: center
}

.fame-invite-box .fame-coupon-info {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	margin: 0px;
	gap: 12px;
	background-color: #f3f4fd;
	padding: 15px;
	border-radius: 12px;
	font-size: 14px
}

.fame-invite-box .fame-coupon-info .fame-coupon-infoitm {
	display: flex;
	width: 100%;
	gap: 8px;
	align-items: flex-start
}

.fame-invite-box .fame-coupon-info small {
	font-size: 16px
}

.fame-invite-box .fame-coupon-info a {
	font-weight: bold;
	color: #000000
}

.fame-copy-message {
	display: flex;
	width: 100%;
	background-color: #000000;
	color: #ffffff;
	padding: 8px;
	border-radius: 4px;
	justify-content: center;
	position: relative
}

.fame-copy-message::before {
	content: '';
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #000000;
	position: absolute;
	left: 50%;
	top: -9px
}

body input.fame-input-style {
	display: flex;
	width: 100%;
	border: 1px solid #DCDDEA;
	border-radius: 5px;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 15px;
	color: #7B7E8F;
	padding: 5px 10px;
	height: 32px;
	outline: none
}

input.fame-input-style::placeholder {
	color: #7B7E8F;
	opacity: 1
}

input.fame-input-style:-ms-input-placeholder {
	color: #7B7E8F
}

input.fame-input-style::-ms-input-placeholder {
	color: #7B7E8F
}

.fame-orthopedic-wrap {
	display: flex;
	width: 100%;
	background-color: #FFF6F9;
	box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
	border-radius: 10px;
	margin-bottom: 24px;
	justify-content: space-between;
	align-items: center;
	padding: 20px
}

.fame-orthopedic-wrap .fame-orthopedic-mvlink {
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	color: #7B7E8F;
	display: inline-flex;
	align-items: baseline;
	text-decoration: none;
	gap: 5px;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in
}

.fame-orthopedic-wrap .fame-orthopedic-mvlink i {
	font-size: 11px
}

.fame-orthopedic-wrap .fame-orthopedic-mvlink:hover {
	color: var(--e-global-color-primary)
}

.fame-dashboard-wrapper .fame-orthopedic-wrap {
	background-color: #00be90
}

.fame-dashboard-wrapper .fame-orthopedic-wrap .fame-orthopedic-mvlink {
	color: #ffffff
}

.fame-dashboard-wrapper .fame-orthopedic-wrap .fame-orthopedic-mvlink strong {
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 15px
}

.fame-dashboard-wrapper .fame-orthopedic-desc span,
.fame-dashboard-wrapper .fame-orthopedic-desc strong {
	color: #ffffff
}

.fame-dashboard-wrapper .fame-orthopedic-desc i {
	background-color: #ffffff;
	padding: 6px;
	border-radius: 100%;
	font-size: 18px
}

.fame-orthopedic-desc {
	display: inline-flex;
	gap: 15px;
	align-items: center
}

.fame-orthopedic-desc i.fame-orthopedic-iconst {
	display: inline-flex;
	min-width: 34px;
	height: 34px;
	background-color: var(--e-global-color-primary);
	color: #fff;
	border-radius: 100%;
	font-size: 16px;
	align-items: center;
	justify-content: center
}

.fame-orthopedic-desc span {
	display: flex;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 21px;
	color: #7B7E8F;
	align-items: center;
	gap: 10px;
}
.fame-orthopedic-pdbdcm {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
}
.fame-orthopedic-pdicon {
    display: inline-flex;
    min-width: 34px;
    height: 34px;
    background-color: #0084C5;
    color: #fff;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    padding-top: 3px;
    font-size: 18px;
}
.fame-system-progress {
    width: 180px;
    min-height: 24px;
    background: #ffffff;
    border-radius: 50px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}
.fame-filterbar-bitween {
	align-items: center;
}
.fame-orthopedic-wthfltr {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: 5px;
}

.fame-system-progress-bar {
    display: block;
    height: 100%;
    background-color: #49C192;
    border-radius: 50px;
    transition: width 0.4s ease;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}

.fame-system-progress > span:last-child {
    position: relative;
    z-index: 1;
    display: block;
    color: #000000;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.fame-orthopedic-desc strong {
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	color: var(--e-global-color-primary)
}

.fame-performance-wrapper {
	display: flex;
	width: 100%;
	box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
	border-radius: 10px;
	background-color: #fff;
	overflow: hidden
}

.fame-performance-wrapper .fame-performance-chartsec,
.fame-performance-wrapper .fame-performance-prgrsbrsec {
	flex: 1 auto
}

.fame-performance-wrapper .fame-prfmnc-toglesec {
	background-color: #F9FAFE;
	cursor: pointer
}

.fame-container-common .fame-performance-bottmsec,
.fame-container-common .fame-performance-prgrsbrcntn {
	height: 180px
}

.fame-active .fame-performance-bottmsec,
.fame-active .fame-performance-prgrsbrcntn,
.fame-active .fame-system-bars-con {
	margin-top: 0px;
	opacity: 1;
	visibility: visible
}

.fame-active .fame-prfmnc-tgbtn {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg)
}

.fame-performance-bottmsec,
.fame-performance-prgrsbrcntn,
.fame-system-bars-con {
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	margin-top: -180px;
	opacity: 0;
	visibility: hidden
}
.fame-performance-second {
    display: flex;
    width: 100%;
    justify-content: space-between;
    background-color: #ffffff;
    position: relative;
    z-index: 1;
    padding: 27px 18px 10px 18px;
    cursor: pointer;
}
.fame-system-bars-con {
	padding: 0px 18px;
}
.fame-system-monthly-stats {
	display: inline-flex;
	height: 25px;
	background: #ffffff;
	border: 1px solid #E8E8E8;
	border-radius: 5px;
	width: 116px;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.3px;
	color: #6D6E79;
	padding: 0px 5px;
}
.fame-topic-sidebar.fame-filters h3 {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.fame-topic-sidebar.fame-filters h3 i {
    font-size: 26px;
    display: flex;
    padding-top: 4px;
}

.fame-performance-headsec {
	display: flex;
	width: 100%;
	align-items: center;
	padding: 20px;
	gap: 25px;
	height: 76px;
	position: relative;
	z-index: 2;
	justify-content: space-between;
	background-color: #fff;
	cursor: pointer
}

.fame-performance-headsec .fame-performance-heading {
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 100%;
	color: var(--e-global-color-primary)
}

.fame-performance-headsec.fame-prfmnc-toglesec {
	justify-content: space-between
}

.fame-prfmnc-togleclck .fame-prfmnc-tgbtn {
	opacity: 0
}

.fame-performance-btns {
	display: flex;
	gap: 10px
}
 .fame-performance-btns a {
	display: inline-flex;
	border: 1px solid #ebf9f4;
	border-radius: 5px;
	padding: 8px 20px;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 23px;
	letter-spacing: 0.3px;
	background-color: #ebf9f4;
	color: #49C192;
	text-decoration: none;
	align-items: center;
	gap: 5px;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in
}
.fame-performance-btns a.fame-test-reset-btn {
	background-color: #DF4B59;
	border-color: #DF4B59;
	color: #ffffff;
}
.fame-performance-btns a.fame-test-reset-btn:hover,
.fame-performance-btns a.fame-test-reset-btn:hover i:before {
	color: #DF4B59;
}
.fame-performance-btns a.fame-test-reset-btn i:before {
	color: #ffffff;
}
.fame-performance-btns a i,
.fame-performance-btns a i:before {
	color: #49C192;
	padding-top: 3px;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
}

 .fame-performance-btns a:hover {
	background-color: #ffffff;
	color: #49C192
}

.fame-prfmnc-tgbtn {
	display: inline-flex;
	text-decoration: none;
	color: var(--e-global-color-primary);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	align-items: center
}

.fame-performance-bottmsec {
	display: flex;
	width: 100%;
	gap: 45px;
	align-items: center;
	padding: 22px 30px
}

.fame-performance-bottmsec .fame-performance-values {
	flex: 1
}

.fame-testquests-catwise-con {
	gap: 10px;
	display: flex;
	width: 100%;
	flex-wrap: wrap
}
.fame-testquests-catwise-con > .fame-testquests-catwise-con {
	padding: 20px;
	box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
	border-radius: 10px;
	background-color: #ffffff;
}

.fame-donut-chart {
	width: 220px;
	height: 220px;
	margin: auto
}

.fame-donut-chart.small {
	width: 180px;
	height: 180px
}

.fame-donut-chart svg path {
	fill-opacity: 1 !important;
	stroke-opacity: 1 !important
}

.fame-performance-values {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: 20px
}

.fame-performance-values-itm {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center
}

.fame-performance-values-itm div {
	display: inline-flex;
	align-items: center;
	gap: 20px
}

.fame-performance-values-itm i {
	color: #49C192;
	font-size: 25px
}

.fame-performance-values-itm span {
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	color: #7B7E8F
}

.fame-performance-values-itm small {
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	color: #7B7E8F
}

.fame-performance-values-itm.fame-performance-wrong-values i {
	color: #FF5050
}

.fame-performance-values-itm.fame-performance-unanswer-values i {
	color: #C4CFDF
}

.fame-performance-prgrsbrcntn {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	padding: 22px 30px;
	gap: 20px
}

.fame-performance-chartsec,
.fame-performance-prgrsbrsec {
	overflow: hidden
}

.fame-performance-prgrsbr-title {
	display: flex;
	width: 100%;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 1px;
	color: #7B7E8F;
	align-items: center;
	gap: 5px;
	margin-bottom: 7px
}

.fame-performance-prgrsbr-title::before {
	content: '';
	min-width: 11px;
	height: 11px;
	background-color: #F27D82;
	border-radius: 3px
}

.fame-performance-prgrsbr-title.fame-performance-passed::before {
	background-color: #47C392
}

.fame-progress-item {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: 5px
}

.fame-progress-headsec {
	display: flex;
	width: 100%;
	justify-content: space-between
}

.fame-progress-headsec span {
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 21px;
	color: #7B7E8F
}

.fame-progress-headsec small {
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0.3px;
	color: var(--e-global-color-primary)
}

.fame-performance-progress {
	position: relative;
	width: 100%;
	height: 8px;
	background-color: #E1E2E9;
	border-radius: 80px;
	overflow: hidden
}

.fame-performance-progress::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 0;
	background-color: var(--e-global-color-primary);
	border-radius: inherit;
	animation: fill 1.6s ease-out forwards
}

@keyframes fill {
	to {
		width: var(--value)
	}
}

.fame-bredcrum-con {
	display: inline-flex;
	width: 100%;
	gap: 10px;
	align-self: flex-end;
	flex-wrap: wrap
}

.fame-bredcrum-con .fame-bredcrum-itm {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	cursor: pointer
}

.fame-bredcrum-con .fame-bredcrum-itm i {
	color: #FF5050;
	padding-top: 3px;
}

.fame-demo-strtbtn-con {
	display: flex;
	width: 100%;
	margin-bottom: 15px;
	padding: 20px;
	background-color: #fff;
	box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
	border-radius: 10px;
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
	gap: 30px
}

.fame-demo-strtbtn-con strong {
	font-weight: bold;
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	color: var(--e-global-color-primary)
}

.fame-demo-strtbtn-con span {
	font-size: 14px;
	color: #000;
	letter-spacing: 1px;
	font-weight: 500;
	line-height: 24px;
	text-shadow: 0px 0px 1px #000
}

.fame-demo-strtbtn-con a {
	display: inline-flex;
	padding: 14px 20px;
	line-height: 1;
	font-size: 16px;
	border-radius: 8px;
	color: #ffffff;
	background-color: var(--e-global-color-primary)
}

.fame-demotime-countdown-con {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background-color: #fff;
	box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
	border-radius: 10px
}

.fame-demotime-countdown-con span {
	font-size: 18px;
	color: #000000;
	font-weight: bold
}

.fame-demotime-countdown-con.fame-demotime-expired {
	justify-content: center;
	background-color: #FF5050
}

.fame-demotime-countdown-con.fame-demotime-expired strong {
	color: #ffffff
}

.fame-timetaken-countdown,
.fame-remaintime-countdown {
	display: flex;
	gap: 10px;
	position: relative
}

@media (min-width: 768px) and (max-width: 1366px) {

	body .fame-system-layout .fame-top-grid {
	    grid-template-columns: 1fr;
	}
}
/* 768–819 */
@media (min-width: 768px) and (max-width: 819px) {
    body .fame-performance-bottmsec {
        margin-top: -220px;
    }
}

/* 820–1180 */
@media (min-width: 820px) and (max-width: 1180px) {
    body .fame-performance-bottmsec {
        margin-top: -268px;
    }
}

/* 1181–1366 */
@media (min-width: 1024px) and (max-width: 1366px) {
    body .fame-performance-bottmsec {
        margin-top: -181px;
    }
    .fame-invite-content {
	    flex-wrap: wrap;
	}
}
/* 912–1366 */
@media (min-width: 912px) and (max-width: 1366px) {
    body .fame-performance-bottmsec {
        margin-top: -181px;
    }
    .fame-invite-content {
	    flex-wrap: wrap;
	}
}

@media (min-width: 768px) and (max-width: 990px) {

	.fame-container,
	.fame-performance-wrapper,
	.fame-performance-bottmsec,
	.fame-orthopedic-wrap,
	.fame-performance-headsec,
	.fame-orthopedic-desc,
	.fame-bredcrum-con {
		flex-wrap: wrap
	}

	.fame-filters,
	.fame-invite {
		width: 100%
	}

	.fame-orthopedic-wrap {
		gap: 10px
	}

	.fame-performance-headsec {
		justify-content: center;
		gap: 15px
	}

	.fame-performance-prgrsbrsec {
		opacity: 0
	}

	.fame-active .fame-performance-prgrsbrsec,
	.fame-prfmnc-togleclck .fame-prfmnc-tgbtn {
		opacity: 1
	}

	.fame-performance-bottmsec,
	.fame-performance-prgrsbrcntn {
		margin-top: -244px;
		opacity: 0;
		visibility: hidden
	}

	.fame-container-common .fame-performance-bottmsec,
	.fame-container-common .fame-performance-prgrsbrcntn {
		height: auto
	}

	.fame-filters-restitle,
	a.fame-filters-close-bar {
		display: flex
	}

	.fame-filters {
		position: fixed;
		left: -100%;
		top: 0px;
		width: 100%;
		height: 100vh;
		z-index: 99;
		opacity: 0;
		visibility: hidden;
		overflow: auto
	}

	.fame-leftbar-active .fame-filters {
		left: 0px;
		opacity: 1;
		visibility: visible
	}
}

@media (max-width: 767px) {

	.fame-container,
	.fame-performance-wrapper,
	.fame-performance-bottmsec,
	.fame-orthopedic-wrap,
	.fame-performance-headsec,
	.fame-orthopedic-desc,
	.fame-bredcrum-con {
		flex-wrap: wrap
	}

	.fame-invite,
	.fame-system-sidebar {
		width: 100%
	}

	.fame-orthopedic-wrap {
		gap: 10px
	}

	.fame-performance-headsec {
		justify-content: center;
		gap: 15px
	}

	.fame-performance-prgrsbrsec {
		opacity: 0
	}

	.fame-prfmnc-toglesec .fame-prfmnc-tgbtn {
		display: none
	}

	.fame-active .fame-performance-prgrsbrsec,
	.fame-prfmnc-togleclck .fame-prfmnc-tgbtn {
		opacity: 1
	}

	.fame-performance-bottmsec,
	.fame-performance-prgrsbrcntn {
		margin-top: -222px;
		opacity: 0;
		visibility: hidden
	}

	.fame-filters-restitle,
	a.fame-filters-close-bar {
		display: flex
	}

	.fame-filters {
		position: fixed;
		left: -100%;
		top: 0px;
		width: 100%;
		height: 100vh;
		z-index: 99;
		opacity: 0;
		visibility: hidden;
		overflow: auto
	}

	.fame-leftbar-active .fame-filters {
		left: 0px;
		opacity: 1;
		visibility: visible
	}

	.fame-container-common .fame-performance-bottmsec,
	.fame-container-common .fame-performance-prgrsbrcntn {
		height: auto
	}

}

@media (max-width: 480px) {

	.fame-performance-bottmsec,
	.fame-performance-prgrsbrcntn,
	.fame-system-bars-con {
		margin-top: 0px;
		opacity: 1;
		visibility: visible;
	}
	.fame-system-bars-con {
		margin-top: 0px;
	}

	.fame-performance-headsec {
		height: auto
	}
	.fame-performance-bottmsec {
		padding-left: 10px;
		padding-right: 10px;
	}
	body .fame-system-layout .fame-prfmnc-togleclck .fame-prfmnc-tgbtn,
	body .fame-system-layout .fame-prfmnc-tgbtn {
	    display: none;
	}
}


.fame-system-layout {
	padding: 28px 0 48px;
	background: radial-gradient(circle at top left, rgba(0, 132, 197, .09), transparent 24%), radial-gradient(circle at top right, rgba(246, 124, 136, .1), transparent 22%), #f7f9fc
}

.fame-system-layout .fame-shell {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 30px;
}

.fame-system-layout .fame-top-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, .5fr);
	gap: 20px;
	margin-bottom: 20px;
	align-items: flex-start;
}

.fame-system-layout .fame-content-grid {
	display: grid;
	width: 100%;
	grid-template-columns: minmax(0, 1fr) 50%;
	gap: 20px;
	align-items: start
}

.fame-system-layout.fame-layout-switched .fame-content-grid {
	grid-template-columns: 7fr 3fr;
}

.fame-system-layout .fame-card,
.fame-system-layout .fame-performance-wrapper,
.fame-system-layout .fame-panel,
.fame-system-layout .fame-quiz-explanation-con,
.fame-system-layout .fame-topic-overlay__panel {
	background-color: #fff;
	border: 1px solid #e2e8f2;
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(8, 20, 102, .08);
}
.fame-system-layout .fame-topic-sidebar {
	background-color: #F4F7FF;
	border-radius: 10px;
}
.fame-topic-sidebar-inn {
	display: flex;
	width: 100%;
	padding: 30px;
	flex-wrap: wrap;
}

.fame-system-layout .fame-performance-wrapper {
	overflow: hidden
}

.fame-system-layout .fame-performance-headsec {
	padding: 18px 22px;
}

.fame-system-layout .fame-performance-heading {
	font-size: 20px;
	font-weight: 700;
	color: #10213b
}

.fame-system-layout .fame-prfmnc-togleclck .fame-prfmnc-tgbtn,
.fame-system-layout .fame-prfmnc-tgbtn {
	display: inline-flex;
	margin-left: auto;
	font-size: 18px;
	color: #10213b;
	cursor: pointer;
	opacity: 1;
}
.fame-system-layout .fame-performance-second {
	display: flex;
	align-items: center;
	gap: 8px;
}
.fame-system-layout .fame-performance-second .fame-system-monthly-stats {
	margin-left: auto;
}
.fame-system-layout .fame-performance-second .fame-prfmnc-tgbtn {
	margin-left: 8px;
}
.fame-system-layout .fame-top-grid.fame-active .fame-prfmnc-tgbtn {
	transform: rotate(180deg);
}
.fame-system-layout .fame-panel {
	padding: 18px
}

.fame-system-layout .fame-filterbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 8px 8px 8px 8px;
	border-radius: 10px;
	background: linear-gradient(90deg, #D8EDFF 0%, #FFEFFF 100%);
}

.fame-system-layout .fame-orthopedic-desc {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap
}

.fame-system-layout .fame-chip {
	font-weight: 700;
	font-size: 14px;
	line-height: 17px;
	color: #181818;
}
.fame-system-layout .fame-filter-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 6px;
	background-color: #fff;
	color: #181818;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
}
.fame-system-layout .fame-filter-trigger span {
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	color: #181818;
}
.fame-system-layout .fame-filter-trigger i,
.fame-system-layout .fame-filter-trigger i:before {
	color: #181818;
	font-size: 24px;
    color: #181818;
    padding-top: 5px;
    line-height: 0;
}
.fame-system-layout .fame-system-view-type,
.fame-system-layout .fame-finish-btn,
.fame-system-layout .fame-system-tmtkn-type {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 6px;
	border: 1px solid #e2e8f2;
	background-color: #fff;
	color: #333333;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.fame-system-layout .fame-system-tmtkn-type {
	background-color: #49C192;
	color: #fff;
	border-color: #49C192
}
.fame-system-layout .fame-system-tmtkn-type i,
.fame-system-layout .fame-system-tmtkn-type i:before,
.fame-system-layout .fame-system-view-type i,
.fame-system-layout .fame-system-view-type i:before {
	color: #333333;
}
.fame-system-layout .fame-system-view-type i,
.fame-system-layout .fame-system-view-type i:before {
	font-size: 18px;
	line-height: 0;
    padding-top: 3px;
    display: flex;
}

.fame-system-layout .fame-finish-btn {
	background-color: #DF4B59;
	color: #fff;
	border-color: #DF4B59
}

.fame-system-layout.fame-layout-switched [data-filter-topics-btn] {
	display: none
}

.fame-system-layout .fame-main-column,
.fame-system-layout .fame-right-column {
	display: flex;
	flex-direction: column;
	gap: 18px
}

.fame-system-layout .fame-topic-sidebar {
	display: none
}

.fame-system-layout.fame-layout-switched .fame-topic-sidebar {
	display: block
}

.fame-system-layout .fame-topic-search {
	width: 100%;
	min-height: 48px;
	border: none;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 400;
	color: #6C7D7B;
	background-color: #ffffff;
	outline: none;
}
.fame-topic-search-wrpcn {
    display: flex;
    width: 100%;
    position: relative;
    margin-bottom: 30px;
}
.fame-topic-search-wrpcn i {
    position: absolute;
    right: 15px;
    top: 0;
    display: inline-flex;
    height: 100%;
    align-items: center;
    padding-top: 3px;
    font-size: 18px;
}
.fame-topic-search-wrpcn i,
.fame-topic-search-wrpcn i:before {
	color: #6D6E79;
}

.fame-system-layout .fame-topic-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .36);
	z-index: 999;
	display: none
}

.fame-system-layout .fame-topic-overlay.is-open {
	display: block
}

.fame-system-layout .fame-topic-overlay__panel {
	position: fixed;
	top: 0;
	left: 0;
	width: 320px;
	max-width: calc(100vw - 40px);
	max-height: 100%;
	overflow: auto;
	padding: 16px;
	border-radius: 0px;
	height: 100%;
}

/* Desktop only: in switched layout the topics live inline in the
   sidebar so the overlay would be redundant. On mobile (<=900px) the
   sidebar is hidden by the responsive rules below and the overlay is
   the only access path — so the !important hide must NOT apply there. */
@media (min-width: 901px) {
	.fame-system-layout.fame-layout-switched .fame-topic-overlay {
		display: none !important
	}
}

/* Explanation always lives in the right column — never inline in centre */
.fame-system-layout .fame-explanation-inline {
	display: none !important
}

.fame-system-layout .fame-explanation-side {
	display: flex !important
}

/* Overlay panel — fade + slide on open */
.fame-system-layout .fame-topic-overlay__panel {
	transition: transform .22s ease, opacity .22s ease;
	transform: translateX(-20px);
	opacity: 0
}

.fame-system-layout .fame-topic-overlay.is-open .fame-topic-overlay__panel {
	transform: translateX(0);
	opacity: 1
}

/* Responsive: collapse to single column below 900 px */
@media(max-width:900px) {
	.fame-system-layout .fame-content-grid {
		grid-template-columns: 1fr !important
	}

	.fame-system-layout.fame-layout-switched .fame-topic-sidebar {
		display: none !important
	}

	.fame-system-layout.fame-layout-switched [data-filter-topics-btn] {
		display: inline-flex !important
	}

	.fame-system-layout.fame-layout-switched .fame-topic-overlay {
		display: block
	}

	.fame-system-layout.fame-layout-switched .fame-topic-overlay:not(.is-open) {
		display: none !important
	}

	.fame-system-layout .fame-explanation-inline,
	.fame-system-layout .fame-explanation-side {
		display: flex !important
	}

	/* The legacy mobile drawer at the top of this file positions
	   `.fame-filters` fixed at left:-100%, opacity:0 — that turns the
	   list invisible inside the NEW overlay panel too (it contains a
	   `.fame-filters` tree). Reset positioning when filters live inside
	   the overlay panel so the overlay's open animation actually shows
	   the topic list. */
	.fame-topic-overlay__panel .fame-filters {
		position: static !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
		z-index: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
		overflow: visible !important;
	}
}

/* Final layout override for system explanation placement */
.fame-system-layout.fame-layout-default .fame-explanation-inline {
	display: none !important;
}

.fame-system-layout.fame-layout-default .fame-explanation-side {
	display: flex !important;
}

.fame-system-layout.fame-layout-switched .fame-explanation-inline {
	display: flex !important;
}

.fame-system-layout.fame-layout-switched .fame-explanation-side,
.fame-system-layout.fame-layout-switched .fame-right-column .fame-explanation {
	display: none !important;
}

@media (max-width: 900px) {
	.fame-system-layout.fame-layout-default .fame-explanation-inline {
		display: none !important;
	}

	.fame-system-layout.fame-layout-default .fame-explanation-side {
		display: flex !important;
	}

	.fame-system-layout.fame-layout-switched .fame-explanation-inline {
		display: flex !important;
	}

	.fame-system-layout.fame-layout-switched .fame-explanation-side,
	.fame-system-layout.fame-layout-switched .fame-right-column .fame-explanation {
		display: none !important;
	}
}

.fame-system-layout.fame-layout-default .fame-invite-side {
	display: none !important;
}

.fame-system-layout.fame-layout-switched .fame-invite-bottom {
	display: none !important;
}


@media (max-width: 900px) {

	.fame-system-layout.fame-layout-default .fame-invite-side {
		display: none !important;
	}

	.fame-system-layout.fame-layout-switched .fame-invite-bottom {
		display: none !important;
	}

}

/* Media 420Px Start */
@media (max-width: 767px) {

	.fame-filterbar .fame-filterbar-bitween,
	.fame-invite-content,
	.fame-refsc-inner,
	.fame-question-nxtprv-inn {
	    flex-wrap: wrap;
	}
	.fame-system-layout .fame-content-grid {
		grid-template-columns: repeat(1, minmax(0, 100%)) !important;
	}
	.fame-system-question-top__actions .fame-question-toolbar {
	    flex-shrink: 1 !important;
	    flex-wrap: wrap;
        justify-content: center;
	}
	.fame-question-nxtprv-inn a.fame-question-skip-btn {
		width: 100%;
	}
	.fame-question-top-con {
	    flex-wrap: wrap !important;
	    justify-content: center;
	}
	.fame-refsc-inner,
	.fame-system-question-top__actions .fame-quest-totl-con,
	.fame-filterbar .fame-filterbar-bitween,
	.fame-orthopedic-wthfltr,
	.fame-system-layout .fame-filterbar .fame-orthopedic-desc {
		justify-content: center;
	}
	.fame-prfmnc-togleclck small.text-muted {
	    display: none;
	}

}