/**
 * h5p-quiz.css — Tutor LMS quiz page skin (51-TTI)
 *
 * Scope: body.single-tutor_quiz only.
 *
 * DOM (logged-in quiz attempt page):
 *   .tutor-course-single-content-wrapper          [maroon bg]
 *   ├── .tutor-course-single-sidebar-wrapper      [400px topic sidebar — untouched]
 *   └── .tutor-quiz-single-entry-wrap (flex-col)  [right pane, untouched]
 *       ├── .tutor-course-topic-single-header     [BLACK FULL-WIDTH BANNER — leave alone]
 *       ├── .tutor-quiz-wrapper                   [outer container — make a flex centerer]
 *       │   └── .tutor-start-quiz-wrapper         [⭐ the actual visible CARD]
 *       └── .tutor-course-topic-single-footer     [Prev/Next nav — leave alone]
 *
 * Architecture:
 *   - Do NOT change .tutor-quiz-single-entry-wrap layout (was breaking the
 *     header banner by shrinking it cross-axis).
 *   - Make .tutor-quiz-wrapper a flex container that vertically + horizontally
 *     centers its child (.tutor-start-quiz-wrapper) while it grows to fill
 *     remaining vertical space between the header and footer banners.
 *   - Style .tutor-start-quiz-wrapper (and analogous mid-attempt wrappers) as
 *     the polished grey card with maroon text.
 *
 * Specificity:
 *   Tutor's theme/tutor-quiz.css uses (0,3,1) selectors with !important
 *   (e.g. .tutor-course-single-content-wrapper #tutor-single-entry-content
 *   .tutor-quiz-wrapper { padding: 20px 24px !important }).
 *   We match or exceed that specificity and use longhand padding properties
 *   so the cascade picks up each side independently (CSS variables in
 *   shorthand padding don't decompose to longhand — burned us in v2).
 */

/* =========================================================================
   Tokens (defined on body for inheritance into the card)
   ========================================================================= */
body.single-tutor_quiz {
	--ttiq-grey:        #adadad;          /* lighter medium grey — better contrast for maroon text */
	--ttiq-grey-edge:   #9c9c9c;
	--ttiq-grey-glow:   #bcbcbc;
	--ttiq-maroon:      #7a0012;
	--ttiq-maroon-deep: #4c0404;          /* body-text maroon (better contrast) */
	--ttiq-card-w:      1080px;           /* widened — drag-and-drop questions need room */
	--ttiq-card-radius: 16px;
}

/* =========================================================================
   1. .tutor-quiz-wrapper → THE CARD (outer container — always present)
       It contains either .tutor-start-quiz-wrapper (pre-attempt info) or
       .tutor-quiz-wrap (attempt table / active question), so styling it
       directly gives a single consistent card across all states.
       `margin: auto` centers it both horizontally AND vertically inside
       .tutor-quiz-single-entry-wrap (flex column with header banner at top
       and footer banner pinned to bottom via tutor-mt-auto).
       Internal overflow scroll keeps everything inside the maroon area
       between the header and footer — content never bleeds past the
       footer banner.
   ========================================================================= */
body.single-tutor_quiz .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-quiz-wrapper {
	background:
		linear-gradient(180deg, var(--ttiq-grey-glow) 0%, var(--ttiq-grey) 60%, var(--ttiq-grey-edge) 100%) !important;
	color: var(--ttiq-maroon-deep) !important;
	border: 0 !important;
	border-radius: var(--ttiq-card-radius) !important;
	max-width: var(--ttiq-card-w) !important;
	width: calc(100% - 64px) !important;
	margin: auto !important;
	padding-top: 40px !important;
	padding-right: 56px !important;
	padding-bottom: 40px !important;
	padding-left: 56px !important;
	max-height: calc(100vh - 240px);
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow:
		0 24px 60px -16px rgba(0, 0, 0, 0.55),
		0 8px 22px rgba(0, 0, 0, 0.22),
		0 0 0 1px rgba(0, 0, 0, 0.10) inset !important;
	box-sizing: border-box;
	letter-spacing: 0.005em;
	scrollbar-width: thin;
	scrollbar-color: var(--ttiq-maroon) rgba(0, 0, 0, 0.10);
}
body.admin-bar.single-tutor_quiz .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-quiz-wrapper {
	max-height: calc(100vh - 272px);
}
/* WebKit scrollbar styling */
body.single-tutor_quiz .tutor-quiz-wrapper::-webkit-scrollbar { width: 8px; }
body.single-tutor_quiz .tutor-quiz-wrapper::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.10); border-radius: 999px; }
body.single-tutor_quiz .tutor-quiz-wrapper::-webkit-scrollbar-thumb { background: var(--ttiq-maroon); border-radius: 999px; }

/* The .tutor-quiz-wrap when used as the body.php outer is INSIDE the wrapper —
   strip any card styling and let the wrapper-card's own styling carry. */
body.single-tutor_quiz .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-quiz-wrapper > .tutor-quiz-wrap {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	color: var(--ttiq-maroon-deep) !important;
}

/* =========================================================================
   2. .tutor-start-quiz-wrapper — the inner pre-quiz info block.
       The wrapper-card already provides the grey card; this one is now a
       transparent block with centered text content.
       Tutor's defaults (border 1px #c0c3cb, max-width 560px, padding 65px 95px)
       must be neutralized.
   ========================================================================= */
body.single-tutor_quiz .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-quiz-wrapper .tutor-start-quiz-wrapper {
	background: transparent !important;
	color: var(--ttiq-maroon-deep) !important;
	border: 0 !important;
	border-radius: 0 !important;
	max-width: none !important;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box;
	text-align: center;
}

/* Previous-attempts table rendered inside .tutor-quiz-wrap */
body.single-tutor_quiz #tutor-single-entry-content > .tutor-quiz-wrap .tutor-table-responsive {
	background: rgba(255, 255, 255, 0.10) !important;
	border-radius: 12px !important;
	padding: 4px !important;
	margin: 0 0 24px !important;
	overflow-x: auto;
}
body.single-tutor_quiz #tutor-single-entry-content > .tutor-quiz-wrap .tutor-table {
	background: transparent !important;
	color: var(--ttiq-maroon-deep) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	width: 100% !important;
	margin: 0 !important;
}
body.single-tutor_quiz #tutor-single-entry-content > .tutor-quiz-wrap .tutor-table th,
body.single-tutor_quiz #tutor-single-entry-content > .tutor-quiz-wrap .tutor-table td {
	color: var(--ttiq-maroon-deep) !important;
	background: transparent !important;
	border-color: rgba(76, 4, 4, 0.18) !important;
	padding: 12px 14px !important;
	font-size: 14px;
	font-weight: 600;
}
body.single-tutor_quiz #tutor-single-entry-content > .tutor-quiz-wrap .tutor-table thead th {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--ttiq-maroon) !important;
	border-bottom: 2px solid rgba(76, 4, 4, 0.30) !important;
}
body.single-tutor_quiz #tutor-single-entry-content > .tutor-quiz-wrap .tutor-table tbody tr + tr td {
	border-top: 1px dashed rgba(76, 4, 4, 0.18) !important;
}

/* Pass / Fail badges in the Result column */
body.single-tutor_quiz #tutor-single-entry-content > .tutor-quiz-wrap .tutor-badge-label,
body.single-tutor_quiz #tutor-single-entry-content > .tutor-quiz-wrap .tutor-badge,
body.single-tutor_quiz .tutor-quiz-wrap [class*="tutor-badge-"] {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	border: 1.5px solid currentColor !important;
}

/* Center the Start Quiz button group below the table */
body.single-tutor_quiz #tutor-single-entry-content > .tutor-quiz-wrap .tutor-quiz-btn-grp {
	display: flex !important;
	justify-content: center !important;
	margin-top: 24px !important;
}

/* =========================================================================
   3. Typography hierarchy — eyebrow / title / body / divider
       text-align center comes from the card; child blocks inherit.
   ========================================================================= */

/* "Quiz" eyebrow */
body.single-tutor_quiz .tutor-start-quiz-title > .tutor-fs-6:first-child,
body.single-tutor_quiz .tutor-start-quiz-title > div:first-child {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--ttiq-maroon-deep) !important;
	opacity: 0.75;
	margin-bottom: 12px !important;
	padding-bottom: 0 !important;
	text-align: center !important;
}

/* Quiz title */
body.single-tutor_quiz .tutor-start-quiz-title .tutor-fs-4 {
	font-size: 32px !important;
	line-height: 1.18 !important;
	font-weight: 800 !important;
	color: var(--ttiq-maroon-deep) !important;
	letter-spacing: -0.01em !important;
	margin-bottom: 16px !important;
	text-align: center !important;
}

/* Quiz summary description */
body.single-tutor_quiz .tutor-start-quiz-title > div:last-child,
body.single-tutor_quiz .tutor-start-quiz-title > div:last-child * {
	font-size: 15.5px !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
	color: var(--ttiq-maroon-deep) !important;
}
body.single-tutor_quiz .tutor-start-quiz-title > div:last-child {
	text-align: center !important;
}

/* Divider under the title block */
body.single-tutor_quiz .tutor-start-quiz-title {
	padding-bottom: 28px !important;
	border-bottom: 1px solid rgba(76, 4, 4, 0.20) !important;
	margin-bottom: 28px !important;
	text-align: center !important;
}

/* =========================================================================
   4. Info rows — clean two-column layout: label left, value right
   ========================================================================= */
body.single-tutor_quiz .tutor-quiz-info-area {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
}

body.single-tutor_quiz .tutor-quiz-info {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 16px !important;
	padding: 14px 4px !important;
	border-bottom: 1px dashed rgba(76, 4, 4, 0.22) !important;
}
body.single-tutor_quiz .tutor-quiz-info:last-child {
	border-bottom: 0 !important;
}

body.single-tutor_quiz .tutor-quiz-info > span:first-child {
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.10em !important;
	text-transform: uppercase !important;
	color: var(--ttiq-maroon) !important;
	opacity: 0.85;
}
body.single-tutor_quiz .tutor-quiz-info > span:last-child {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--ttiq-maroon-deep) !important;
}

/* =========================================================================
   5. Force-maroon override for Tutor color utility classes inside the card
   ========================================================================= */
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-color-black,
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-color-secondary,
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-color-muted,
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-color-primary-60,
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-color-white,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-color-black,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-color-secondary,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-color-muted,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-color-primary-60,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-color-white {
	color: var(--ttiq-maroon-deep) !important;
}

/* Bare body text inside the card */
body.single-tutor_quiz .tutor-start-quiz-wrapper p,
body.single-tutor_quiz .tutor-start-quiz-wrapper label,
body.single-tutor_quiz .tutor-start-quiz-wrapper span:not([class*="tutor-icon"]),
body.single-tutor_quiz .tutor-quiz-wrap p,
body.single-tutor_quiz .tutor-quiz-wrap label,
body.single-tutor_quiz .tutor-quiz-wrap span:not([class*="tutor-icon"]) {
	color: var(--ttiq-maroon-deep) !important;
}

/* =========================================================================
   6. Buttons — pill, polished
   ========================================================================= */
body.single-tutor_quiz .tutor-quiz-btn-group {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
	margin-top: 36px !important;
	padding: 0 !important;
}
body.single-tutor_quiz .tutor-quiz-btn-group .tutor-ml-24 {
	margin-left: 0 !important;
}

/* -------------------------------------------------------------------------
   Attempt-details page — the "← Back" button at top-left of the card.
   Scoped via .tutor-mb-24 (the wrapper Tutor renders only on this template,
   first child of .tutor-quiz-wrap). White bg + cream border, maroon text.
   ------------------------------------------------------------------------- */
body.single-tutor_quiz .tutor-quiz-wrapper .tutor-quiz-wrap > .tutor-mb-24:first-child > a.tutor-btn-ghost,
body.single-tutor_quiz .tutor-quiz-wrap[class*="tutor-quiz-wrap-"] > .tutor-mb-24:first-child > a.tutor-btn-ghost {
	background: #ffffff !important;
	border: 2px solid #f0e2c3 !important;
	color: var(--ttiq-maroon-deep) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}
body.single-tutor_quiz .tutor-quiz-wrapper .tutor-quiz-wrap > .tutor-mb-24:first-child > a.tutor-btn-ghost:hover,
body.single-tutor_quiz .tutor-quiz-wrapper .tutor-quiz-wrap > .tutor-mb-24:first-child > a.tutor-btn-ghost:focus-visible,
body.single-tutor_quiz .tutor-quiz-wrap[class*="tutor-quiz-wrap-"] > .tutor-mb-24:first-child > a.tutor-btn-ghost:hover,
body.single-tutor_quiz .tutor-quiz-wrap[class*="tutor-quiz-wrap-"] > .tutor-mb-24:first-child > a.tutor-btn-ghost:focus-visible {
	background: #fffaf0 !important;
	border-color: #e6d39a !important;
	color: var(--ttiq-maroon-deep) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
}
body.single-tutor_quiz .tutor-quiz-wrapper .tutor-quiz-wrap > .tutor-mb-24:first-child > a.tutor-btn-ghost .tutor-icon-previous,
body.single-tutor_quiz .tutor-quiz-wrap[class*="tutor-quiz-wrap-"] > .tutor-mb-24:first-child > a.tutor-btn-ghost .tutor-icon-previous {
	color: var(--ttiq-maroon-deep) !important;
}

body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-btn,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-btn,
body.single-tutor_quiz .tutor-quiz-btn-group .tutor-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 48px !important;
	padding: 12px 30px !important;
	border-radius: 999px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	line-height: 1 !important;
	border: 2px solid transparent !important;
	box-shadow: none !important;
	transition: transform 0.15s ease, background-color 0.15s ease,
	            box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
	cursor: pointer !important;
	text-decoration: none !important;
}

/* Primary — Start Quiz / Submit */
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-btn-primary,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-btn-primary {
	background: var(--ttiq-maroon) !important;
	border-color: var(--ttiq-maroon) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(76, 4, 4, 0.40) !important;
}
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-btn-primary:hover,
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-btn-primary:focus-visible,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-btn-primary:hover,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-btn-primary:focus-visible {
	background: var(--ttiq-maroon-deep) !important;
	border-color: var(--ttiq-maroon-deep) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 22px rgba(76, 4, 4, 0.55) !important;
}

/* Ghost / outlined — Skip Quiz, etc. */
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-btn-ghost,
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-btn-link,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-btn-ghost,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-btn-link {
	background: transparent !important;
	border-color: var(--ttiq-maroon) !important;
	color: var(--ttiq-maroon-deep) !important;
}
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-btn-ghost:hover,
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-btn-ghost:focus-visible,
body.single-tutor_quiz .tutor-start-quiz-wrapper .tutor-btn-link:hover,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-btn-ghost:hover,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-btn-ghost:focus-visible,
body.single-tutor_quiz .tutor-quiz-wrap .tutor-btn-link:hover {
	background: var(--ttiq-maroon) !important;
	border-color: var(--ttiq-maroon) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 22px rgba(76, 4, 4, 0.45) !important;
}

/* =========================================================================
   7. Mid-attempt screens
   ========================================================================= */
body.single-tutor_quiz .quiz-question-title {
	font-size: 22px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: var(--ttiq-maroon-deep) !important;
	margin: 0 0 22px !important;
	text-align: left !important;
}

/* The inner .tutor-quiz-wrap (choice container in choice-box.php) must NOT
   pick up outer-card styling. Reset it back to a transparent block. */
body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-quiz-wrap,
body.single-tutor_quiz .quiz-question-ans-choice-area > .tutor-quiz-wrap {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* -------------------------------------------------------------------------
   Quiz answer options — CSS Grid 2-column for consistency
   Tutor's choice-box.php renders each option as
     .tutor-col-12.tutor-col-sm-6.tutor-quiz-answer-single inside .tutor-row
   This is Bootstrap-style float layout — replace with CSS Grid so 4 options
   form a clean 2x2 every time, regardless of content height.
   ------------------------------------------------------------------------- */
body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-row {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-quiz-answer-single {
	width: 100% !important;
	max-width: none !important;
	flex: unset !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* The visible per-option card (Tutor's .tutor-card inside the label) */
body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-quiz-question-item {
	display: block;
	height: 100%;
	cursor: pointer;
	margin: 0 !important;
}
body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-quiz-question-item .tutor-card {
	background: rgba(255, 255, 255, 0.14) !important;
	border: 1.5px solid rgba(76, 4, 4, 0.28) !important;
	border-radius: 12px !important;
	padding: 14px 18px !important;
	margin: 0 !important;
	height: 100%;
	box-sizing: border-box;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-quiz-question-item:hover .tutor-card,
body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-quiz-question-item:focus-within .tutor-card {
	background: rgba(255, 255, 255, 0.24) !important;
	border-color: var(--ttiq-maroon) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(76, 4, 4, 0.18) !important;
}
body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-quiz-question-item input.tutor-form-check-input:checked ~ * .tutor-card,
body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-quiz-question-item:has(input.tutor-form-check-input:checked) .tutor-card {
	background: rgba(122, 0, 18, 0.14) !important;
	border-color: var(--ttiq-maroon) !important;
	box-shadow: 0 0 0 3px rgba(122, 0, 18, 0.18) !important;
}

/* Single-column on narrow viewports */
@media (max-width: 640px) {
	body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-row {
		grid-template-columns: 1fr !important;
	}
}

body.single-tutor_quiz .tutor-form-check-input {
	border-color: var(--ttiq-maroon) !important;
	width: 18px;
	height: 18px;
}
body.single-tutor_quiz .tutor-form-check-input:checked {
	background-color: var(--ttiq-maroon) !important;
	border-color: var(--ttiq-maroon) !important;
}

/* Pagination dots */
body.single-tutor_quiz .tutor-quiz-questions-pagination ul {
	display: flex !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	padding: 0 !important;
	margin: 0 0 22px !important;
	list-style: none !important;
	justify-content: center !important;
}
body.single-tutor_quiz .tutor-quiz-question-paginate-item {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 32px;
	height: 32px;
	padding: 0 10px !important;
	border: 1.5px solid var(--ttiq-maroon) !important;
	border-radius: 999px !important;
	color: var(--ttiq-maroon-deep) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	background: transparent !important;
	transition: background .15s ease, color .15s ease;
}
body.single-tutor_quiz .tutor-quiz-question-paginate-item:hover,
body.single-tutor_quiz .tutor-quiz-question-paginate-item.is-active {
	background: var(--ttiq-maroon) !important;
	color: #fff !important;
}

body.single-tutor_quiz .tutor-quiz-question-counter,
body.single-tutor_quiz .tutor-quiz-question-counter * {
	color: var(--ttiq-maroon-deep) !important;
	font-weight: 700 !important;
}

body.single-tutor_quiz #tutor-quiz-time-update {
	font-weight: 800 !important;
	color: var(--ttiq-maroon-deep) !important;
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
   8. Responsive
   ========================================================================= */
@media (max-width: 1024px) {
	body.single-tutor_quiz .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-quiz-wrapper {
		padding-top: 32px !important;
		padding-right: 20px !important;
		padding-bottom: 32px !important;
		padding-left: 20px !important;
	}
	body.single-tutor_quiz .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-quiz-wrapper .tutor-start-quiz-wrapper {
		padding-top: 40px !important;
		padding-right: 32px !important;
		padding-bottom: 40px !important;
		padding-left: 32px !important;
	}
	body.single-tutor_quiz .tutor-start-quiz-title .tutor-fs-4 { font-size: 26px !important; }
}

@media (max-width: 640px) {
	body.single-tutor_quiz .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-quiz-wrapper {
		padding-top: 20px !important;
		padding-right: 12px !important;
		padding-bottom: 20px !important;
		padding-left: 12px !important;
	}
	body.single-tutor_quiz .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-quiz-wrapper .tutor-start-quiz-wrapper {
		padding-top: 28px !important;
		padding-right: 22px !important;
		padding-bottom: 28px !important;
		padding-left: 22px !important;
		border-radius: 12px !important;
	}
	body.single-tutor_quiz .tutor-start-quiz-title .tutor-fs-4 { font-size: 22px !important; }
	body.single-tutor_quiz .tutor-quiz-info {
		flex-wrap: wrap !important;
	}
	body.single-tutor_quiz .tutor-quiz-btn-group {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	body.single-tutor_quiz .tutor-quiz-btn-group .tutor-btn { width: 100% !important; }
}