:root {
	--bs-body-font-family: Verdana, Geneva, Tahoma, sans-serif;

	--bd-blue: #203370;
	--bd-blue-rgb: rgb(32, 51, 112);
	--bd-blue-rgb-form: rgb(32, 51, 112, 0.25);
	--bd-blue-10: #1D2E65;
	--bd-blue-20: #1A295A;
	--bd-green: #33aa22;
	--bd-green-rgb: rgb(51, 170, 34);
	--bd-green-rgb-form: rgb(51, 170, 34, 0.25);
	--bd-green-10: #2E991F;
	--bd-green-20: #29881B;
	--bd-secondary-color: #d9d9d9;
	--bd-tertiary-color: #f2f2f2;
	--bd-contrast-color: #ff914d;
	--bd-correct-color-0: #98c889;
	--bd-correct-color-20: #7fbf6f;
	--bd-incorrect-color-0: #ffb0b0;
	--bd-incorrect-color-20: #ff9a9a;
}

@media (prefers-color-scheme: light) {
	:root {
		--bs-body-color: #333333;
		--bs-body-bg: var(--bs-white);
		--bd-primary: var(--bd-blue);
		--bd-primary-rgb: var(--bd-blue-rgb);
		--bd-primary-rgb-form: var(--bd-blue-rgb-form);
		--bd-primary-10: var(--bd-blue-10);
		--bd-primary-20: var(--bd-blue-20);
		--bd-correct-color: var(--bd-correct-color-0);
		--bd-incorrect-color: var(--bd-incorrect-color-0);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bs-body-color: var(--bs-white);
		--bs-body-bg: #333333;
		--bd-primary: var(--bd-green);
		--bd-primary-rgb: var(--bd-green-rgb);
		--bd-primary-rgb-form: var(--bd-green-rgb-form);
		--bd-primary-10: var(--bd-green-10);
		--bd-primary-20: var(--bd-green-20);
		--bd-correct-color: var(--bd-correct-color-20);
		--bd-incorrect-color: var(--bd-incorrect-color-20);
	}
}

/* TEXT INPUTS, SELECTS, RANGE SLIDERS */
.form-control:focus,
.form-select:focus,
.form-range:focus {
	border-color: var(--bd-primary);
	box-shadow: 0 0 0 0.25rem var(--bd-primary-rgb-form);
}

/* CHECKBOXES & RADIOS – checked state */
.form-check-input:checked {
	background-color: var(--bd-primary);
	border-color: var(--bd-primary);
}

/* CHECKBOXES & RADIOS – focus (outline) */
.form-check-input:focus {
  border-color: var(--bd-primary);
  box-shadow: 0 0 0 0.25rem var(--bd-primary-rgb-form);
}

.bd-bg-primary {
	background-color: var(--bd-primary);
}

.btn-primary {
	--bs-btn-color: var(--bs-white);
	--bs-btn-bg: var(--bd-primary);
	--bs-btn-border-color: var(--bd-primary);
	--bs-btn-border-radius: .5rem;
	--bs-btn-hover-color: var(--bs-white);
	--bs-btn-hover-bg: var(--bd-primary-10);
	--bs-btn-hover-border-color: var(--bd-primary-10);
	--bs-btn-focus-shadow-rgb: var(--bd-primary-rgb);
	--bs-btn-active-color: var(--bs-btn-hover-color);
	--bs-btn-active-bg: var(--bd-primary-20);
	--bs-btn-active-border-color: var(--bd-primary-20);
	--bs-btn-disabled-bg: var(--bd-primary-20);
	--bs-btn-disabled-border-color: var(--bd-primary-20);
}

.btn-upvote {
	--bs-btn-color: var(--bs-white);
	--bs-btn-bg: var(--bd-correct-color);
	--bs-btn-border-color: var(--bd-correct-color);
	--bs-btn-border-radius: .8rem;
}

.btn-downvote {
	--bs-btn-color: var(--bs-white);
	--bs-btn-bg: var(--bd-incorrect-color);
	--bs-btn-border-color: var(--bd-incorrect-color);
	--bs-btn-border-radius: .8rem;
}

.pagination {
    --bs-pagination-color: var(--bs-white);
	--bs-pagination-bg: var(--bd-primary);
	--bs-pagination-hover-color: var(--bs-white);
	--bs-pagination-hover-bg: var(--bd-primary-10);
	--bs-pagination-active-color: var(--bs-btn-hover-color);
	--bs-pagination-active-bg: var(--bd-primary-20);
    --bs-pagination-focus-bg: var(--bd-primary-10);
    --bs-pagination-focus-box-shadow: var(--bd-primary-10);
}

.navbar {
	background-color: var(--bd-blue);
	--bs-navbar-color: var(--bd-secondary-color);
	--bs-navbar-active-color: var(--bs-white);
	--bs-navbar-hover-color: var(--bs-white);
	--bs-navbar-toggler-border-color: var(--bs-white);
	--bs-navbar-toggler-icon-bg: var(--bs-white);
}

.navbar-brand img {
	width: auto;
	max-height: 50px;
}

.dropdown-menu {
	--bs-dropdown-link-active-bg: var(--bd-blue);
}

.progress-stacked {
	--bs-progress-height: 7px;
}

.breadcrumb {
	--bs-breadcrumb-item-active-color: var(--bs-body-color);
}
.card {
	--bs-card-border-width: 0px;
}

.breadcrumb li a {
	color: var(--bs-body-color);
}

.nav{
	--bs-nav-link-color: var(--bs-body-color);
	--bs-nav-link-hover-color: var(--bd-primary);
}

.nav-pills{
	--bs-nav-pills-link-active-color: var(--bs-white);
	--bs-nav-pills-link-active-bg: var(--bd-primary);
}

.bd-bg-contrast {
	background-color: var(--bd-contrast-color);
}

.icon-correct {
	color: var(--bd-correct-color);
}

.icon-incorrect {
	color: var(--bd-incorrect-color);
}

.answer-box-icon {
	margin-top: 2px;
}

.accordion {
	--bs-accordion-active-bg: var(--bd-primary-10);
	--bs-accordion-active-color: var(--bs-white);
}

/* Hidde the accordion button arrow */
.accordion-button::after {
  display: none;
}

.icon-toggle .bi-caret-down-fill {
  display: none;
}
.accordion-button:not(.collapsed) .icon-toggle .bi-caret-up-fill {
  display: none;
}
.accordion-button:not(.collapsed) .icon-toggle .bi-caret-down-fill {
  display: inline;
}

.accordion-button.collapsed .bi-check-circle-fill {
	color: var(--bd-correct-color);
}

.accordion-button.collapsed .bi-x-circle-fill {
	color: var(--bd-incorrect-color);
}

.question-card {
	min-height: 5em;
	padding-left: 10%;
	padding-right: 10%;
}

/* Styling for exam-overview pages */

.question-answer-radio {
	margin-left: 4em;
}

.question-link {
	text-decoration: none;
}
.comment-footer {
	--bs-card-cap-bg: var(--bs-bg-color);
}


/* Styling for exam page */

.exam-tab:hover {
	color: whitesmoke;
	background-color: 121d41;
}





/* Cards & logo on home page */

.home-logo {
	margin-top: 2em;
	margin-bottom: 3em;
}

.home-card-col {
	max-width: 18em;
}

.home-card {
	border-width: 0px;
}

.home-card-link {
	text-decoration: none;
}

@media (prefers-color-scheme: light) {
	.home-card:hover {
		background-color: whitesmoke;
	}
}

@media (prefers-color-scheme: dark) {
	.home-card:hover {
		background-color: #1b1f22;
	}
}

/* Colors for correctly/ incorrectly answered questions */

@media (prefers-color-scheme: light) {
	.answer-incorrect {
		background-color: var(--bd-incorrect-color);
	}

	.answer-correct {
		background-color: var(--bd-correct-color);
	}

	.answer-unanswered {
		background-color: lightgray;
	}

	.answer-answered {
		background-color: darkgray;
	}
}

@media (prefers-color-scheme: dark) {
	.answer-incorrect {
		color: #212529;
		background-color: var(--bd-incorrect-color);
	}

	.answer-correct {
		color: #212529;
		background-color: var(--bd-correct-color);
	}

	.answer-unanswered {
		color: #212529;
		background-color: lightgray;
	}

	.answer-answered {
		color: #212529;
		background-color: darkgray;
	}
}

/* Cards on exam overview page */

.exam-overview-card {
	border-width: 0px;
}