/* layout.css */

:root {
	--main-layout-content-margin: 193px;
	--main-page-max-width: 1320px;
}

.content {
	display: flex;
	height: 100%;
	z-index: 1;
	background-color: white;
}

.main {
	flex-grow: 1;
	overflow-y: auto;
	padding: 1.5rem !important;
}

.logo {
	display: flex;
}

	.logo > img {
		margin-right: 3rem;
		width: 9rem;
	}

.validation-errors {
	padding-left: 1rem;
}

.line-height-normal {
	line-height: normal;
}


.date-picker {
	padding: .25rem .5rem;
	font-size: 1rem;
}

.invalid {
	outline: 1px solid var(--outline-red-color);
}

.validation-message {
	padding-top: .2rem;
	font-size: .75rem;
	color: var(--font-error-red-color);
}

.flash-element {
}

.form-group.row > .col-form-label {
	text-align: right;
}

.form-check-input {
	transition: all ease-in-out 0.15s;
}

	.form-check-input:focus {
		box-shadow: 0 0 0 0.25rem rgba(210, 212, 214, 1);
	}

	.form-check-input:checked {
		background-color: var(--bg-black-color);
		border-color: var(--bg-black-color);
	}

input#file-upload-button {
	font-family: var(--font-family-primary);
	font-size: 1rem;
	font-weight: var(--font-weight-regular);
	padding: 0.375rem 0.75rem;
	border: none;
	background-color: var(--bg-btn-black-color) !important;
	color: var(--font-btn-black-color) !important;
	transition: background-color ease-in-out 0.15s, color ease-in-out 0.15s;
}

#baseFile {
}

	#baseFile > * {
		color: aliceblue;
	}

input[type="file"] > * {
	font-family: var(--font-family-primary);
	font-size: 1rem;
	font-weight: var(--font-weight-regular);
	padding: 0.375rem 0.75rem;
	border: none;
	background-color: var(--bg-btn-black-color) !important;
	color: var(--font-btn-black-color) !important;
	transition: background-color ease-in-out 0.15s, color ease-in-out 0.15s;
}

.input-hidden {
	max-width: 0;
	max-height: 0;
	opacity: 0;
}

.form-select:focus,
.form-control:focus {
	box-shadow: none;
	border-color: black;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0s, border-color 0.15s ease-in-out;
	-webkit-box-shadow: 0 0 0 30px white inset !important;
}

textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0s, border-color 0.15s ease-in-out;
	-webkit-box-shadow: 0 0 0 30px white inset !important;
}

textarea.form-control::placeholder,
.form-control::placeholder,
.mud-input::placeholder,
.mud-autocomplete-custom input::placeholder {
	color: rgba(33, 37, 41, 0.5) !important;
	opacity: 1 !important;
}

textarea.form-control[readonly],
textarea.form-control:read-only,
input.form-control[readonly],
input.form-control:read-only {
	/*cursor: not-allowed;*/
}

.btn-close:focus {
	outline: none;
	box-shadow: none;
}

.btn {
	font-family: var(--font-family-primary);
	font-size: 1rem;
	font-weight: var(--font-weight-regular);
	padding: 0.375rem 0.75rem;
	transition: background-color ease-in-out 0.15s, color ease-in-out 0.15s, opacity ease-in-out 0.15s;
}

.btn-black {
	border: none;
	background-color: var(--bg-btn-black-color) !important;
	color: var(--font-btn-black-color) !important;
}

	.btn-black:hover {
		background-color: var(--bg-btn-black-hover-color) !important;
		color: var(--font-btn-black-color-hover-color) !important;
	}

	.btn-black:active {
		background-color: var(--bg-btn-black-hover-color) !important;
		color: var(--font-btn-black-color-hover-color) !important;
	}

.btn-white {
	border: var(--font-primary-color);
	background-color: var(--bg-btn-white-color) !important;
	color: var(--font-btn-white-color) !important;
}

	.btn-white:hover {
		background-color: var(--bg-btn-white-hover-color) !important;
		color: var(--font-btn-white-hover-color) !important;
	}

	.btn-white:active {
		background-color: var(--bg-btn-white-hover-color) !important;
		color: var(--font-btn-white-hover-color) !important;
	}

.btn-gray {
	border: 1px solid;
	border-color: var(--bg-light-gray-color);
	background-color: var(--bg-btn-gray-color) !important;
	color: var(--font-btn-gray-color) !important;
}

	.btn-gray:hover {
		border-color: var(--bg-light-gray-hover-color);
		background-color: var(--bg-btn-gray-hover-color) !important;
		color: var(--font-btn-gray-hover-color) !important;
	}

	.btn-gray:active {
		border-color: var(--bg-light-gray-hover-color);
		background-color: var(--bg-btn-gray-color) !important;
		color: var(--font-btn-gray-hover-color) !important;
	}

.flex-center-button {
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	height: 28px;
	width: 28px;
	line-height: 1;
	padding: 0;
	/*padding: 0 20px;*/
	cursor: pointer;
}

.question-mark {
	display: inline-flex;
	border: 1px solid black;
	border-radius: 50%;
	min-width: .875rem;
	min-height: .875rem;
	max-width: .875rem;
	max-height: .875rem;
	align-items: center; /* Vertically center content */
	justify-content: center; /* Horizontally center content */
	cursor: pointer;
}

	.question-mark > span {
		display: block;
		font-size: 0.75rem;
		width: min-content;
		height: min-content;
		line-height: normal;
		font-weight: var(--font-weight-bold);
		justify-self: center;
		vertical-align: middle;
	}

.inline-article {
	display: inline-block;
	margin-bottom: .5rem;
}

.column-article {
	display: grid;
}

.article-bullet {
	display: list-item;
	margin-left: 2rem;
}

.article-numerical-bullet {
	display: list-item;
	list-style-type: decimal;
	margin-left: 2rem;
}

.basis-50 {
	flex-basis: 50%;
}

.try-center {
	align-self: center;
	justify-self: center;
}

.justify-items-center {
	justify-items: center;
}

.justify-self-center {
	justify-self: center;
}

.justify-self-flex-end {
	justify-self: flex-end
}

.align-self-flex-end {
	align-self: flex-end;
}

.align-content-baseline {
	align-content: baseline;
}