@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

* {
	font-family: "Rubik", sans-serif;
}

:root {
	--primary-color: #323653; /* Light purple used for active elements */
	--primary-background: #ffffff; /* Dark purple used for the main background */
	--secondary-background: #323653; /* Violet for progress indicator and secondary accents */
	--light-background: #fff; /* White used for contrast in text and interactive elements */
	--header-background: #ECF1FA; /* Similar to primary background */
	--button-background: #0589d6; /* Light purple for buttons */
	--button-secondary-background: #0589d6; /* Violet for secondary buttons or hovered state */
	--button-disabled-background: #c4e9ff; /* A muted version of the primary background */
	--button-border: #ffffff; /* Matching the button background */
	--button-disabled-border: rgba(50, 54, 83, .6); /* Darker and muted tone for disabled states */
	--active-element: #c4e9ff; /* Highlight and active state color */
	--text-primary: #0d1128; /* Primary text color */
	--text-secondary: #323653; /* Secondary text, lighter for less emphasis */
	--text-dark: #323653; /* Dark text, mostly for use on light backgrounds */
	--text-light: #323653; /* Light text for use on dark backgrounds */
	--border-color: #0589d6; /* Borders for elements needing emphasis */
	--border-color-faded: #0589d6; /* Faded borders for less focus */
	--shadow-color: #3E185F1a; /* Subtle shadow for depth, slightly transparent */
	--shadow-color-strong: #00000040; /* Stronger shadow for prominent elements */
	--highlight-bg: #0589d6; /* Background for highlighted items */
	--progress: #e3e5e8; /* Color for progress bars or active elements */
	--progress-track: #0589d6; /* Background color of progress tracks, more subdued */
	--empathy-orange-40: #0589d6;
	--sui-button-border-radius: 12px;
	--mindful-brown-white: #b6b6b6;
	--mindful-brown-80: #323653;
	--background-before-after: #c4e9ff;
}

.welcome .quiz__body.full-img {
	align-items: center;
}

.quiz__btn-prev-icon path {
	stroke: var(--progress-track);
}

.quiz__screen.welcome .radios-quiz__options-images-c {
	border-top: none;
	border-right: none;
	border-left: none;
	height: 109px;
}

.quiz__screen.welcome .radios-quiz__options-images img {
	height: auto;
	border-radius: 12px 12px 0 0;
}

.quiz__screen.welcome .radios-quiz__options-images-name {
	background: #ffffff;
	padding: 8px 12px;
	color: #000000;
	justify-content: center;
	box-shadow: 0 0 2px #dedede;
}

.quiz__progress {
	height: 4px;
}

.quiz__screen.welcome .radios-quiz__options-images-name svg {
	display: none;
}

.what-sex .radios-quiz__descr {
	display: block;
	text-align: center;
	align-items: center;
}

.radios-quiz__descr {
	font-weight: 500;
}

.what-sex .radios-quiz__descr span {
	font-size: 64px;
	margin: 0 0 20px 0;
	display: block;
}

.button {
	text-transform: capitalize;
}

.quiz__screen.load {
	display: flex;
	height: calc(100vh - 100px);
	justify-content: center;
}

.button[disabled] {
	background: var(--button-disabled-background);
}