.stage_question {
	padding-bottom: 2rem;
	max-width: 850px;
}


.stage_details_container {
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: 1rem;
}

.input_container {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 1rem;
}

.stage_details_container_reverse {
	display: flex;
	flex-direction: row-reverse;
	width: 100%;
	gap: 1rem;

}

.stage_details_child {
	width: 50%;
}

.full_width {
	width: 100%;
}


.card { 
	position: relative;
	cursor: pointer;
	border-radius: 0px;
	min-width: 192.25px;
	width: 33%;
	max-width: 250px;
	padding: 0px;
	margin: .5rem;
	font-size: 12pt;
	background-color:white;
	border:1px solid rgba(15, 130, 193,.8);
	color: rgba(25, 140, 203);
	transition: transform 0.1s ease;
}

.card_image {
	max-height: 130px;
	min-width: 192.25px;
	width: 33%;
	max-width: 250px;
}

.card_heading {
	color: rgba(0, 115, 178);
	margin: 0px;
	padding: 0px;
	text-align: center;
}


.centered {
	display: flex;
	justify-content: center;
	align-items: center;
}


.selected {
	border: 2px solid gold;
	box-shadow: -2px 2px 8px black;
	transform: scale(1.02, 1.02);
}

.card .selected {
	border: 2px solid gold;
}



@media (max-width: 600px) {
	.stage_details_container {
		flex-direction: column-reverse;
	}
	.stage_details_child {
		width: 100%;
	}
	.card_image {
		max-width: 150px;
	}
	.card {
		max-width: 150px;
	}
}

.question_card_container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: start;
	justify-content: center;
	width: 120%;
	margin-left: -5%;
}

.four_square {
	display: grid;
	grid-template-columns: auto auto;
	margin-left: 0%;
	justify-items: center;
	align-items: start;
	margin-left: -5%;
}

@media (max-width: 600px) {
	.four_square {
		display: flex;
		align-items: flex-start;
	}
}

.stage_media {
	max-width: 100%;
	max-height: 100%;
}

.stage_media > img {
	max-width: 100%;
	max-height: 100%;
}
.stage_media > video {
	max-width: 100%;
	max-height: 100%;
}


.self_selection_input_wrapper {
		display: flex;
		flex-direction: column;
		gap: 2rem;
}


.self_selection_input_field {
  position: relative;
  width: 280px;
  --focused_color: rgb(25, 117, 210)
}

.self_selection_input_field input,
.self_selection_input_field select,
.self_selection_input_field option
{
  width: 100%;
  padding: 14px 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.self_selection_input_field select {
	width: 100%;
}

.self_selection_input_field label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(119, 119, 119);
  pointer-events: none;
  transition: 0.15s ease;
  background: white;
  padding: 0 4px;
}

.self_selection_input_field input:focus + label,
.self_selection_input_field input:not(:placeholder-shown) + label,
.self_selection_input_field select:focus + label,
.self_selection_input_field select:has(option[value=""]:not(:checked)) + label{
  top: -6px;
  font-size: 12px;
  color: var(--focused_color);
}

.self_selection_input_field input:focus,
.self_selection_input_field select:focus {
  border-color: var(--focused_color);
}

.error_text {
	font-size: 12px;
	color: rgb(211, 47, 47);,
	margin-top: 4px;
}

.solidOrangeButton:disabled,
.solidOrangeButton:disabled:hover{
	background-color: gray;
	border: black;
	cursor: default;
}


.light_btn_outlined {
  --light_btn_primary: rgb(25, 118, 210);
  --light_btn_hover-bg: rgba(25, 118, 210, 0.04);
  --light_btn_focus-ring: rgba(25, 118, 210, 0.3);

  appearance: none;
  background: transparent;
  border: 1px solid var(--light_btn_primary);
  border-radius: 4px;

  padding: 5px 15px;
  min-width: 64px;

  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.02857em;
  text-transform: none;

  color: var(--light_btn_primary);
  cursor: pointer;

  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

/* Hover */
.light_btn_outlined:hover:not(:disabled) {
  background-color: var(--light_btn_primary);
  color: white;
  border-color: var(--light_btn_primary);
}

/* Focus-visible (keyboard focus) */
.light_btn_outlined:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--light_btn_focus-ring);
}

/* Active (pressed) */
.light_btn_outlined:active:not(:disabled) {
  background-color: rgba(25, 118, 210, 0.12);
}

/* Disabled */
.light_btn_outlined:disabled {
  color: rgba(0, 0, 0, 0.26);
  border-color: rgba(0, 0, 0, 0.12);
  cursor: default;
}