@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Poppins:var(--heading-5-20px-font-weight),400,700,var(--body-large-18px-regular-font-weight),var(--label-ekstra-large-font-weight)");
:root {
	--hover-trans-time: 0.4s;
	--trans-x: 0;
	--trans-y: 0;
}

* {
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	transform: translate(var(--trans-x), var(--trans-y));
}

html,
body {
	margin: 0px;
	height: 100%;
}

button:focus-visible {
	/* Generic focus style */
	outline: 2px solid #4a90e2 !important;
	outline: -webkit-focus-ring-color auto 5px !important;
}

a {
	text-decoration: none;
}

/* === Common classes === */
.grayContentBlock {
	padding: 30px;
	background-color: #d9d9d980;
	border: 1px solid var(--linear, #245158);
	width: 100%;
}

.mb20 {
	margin-bottom: 20px;
}
.mb30 {
	margin-bottom: 30px;
}
.mb40 {
	margin-bottom: 40px;
}

.ml20 {
	margin-left: 20px;
}
.ml30 {
	margin-left: 30px;
}
.ml40 {
	margin-left: 40px;
}

.pr20 {
	padding-right: 20px;
}

.pt10 {
	padding-top: 10px;
}
.pt20 {
	padding-top: 20px;
}
.pt30 {
	padding-top: 30px;
}
.pt50 {
	padding-top: 50px;
}

.resizeVertical {
	resize: vertical;
}

.transDown100 {
	--trans-y: 100%;
}
.transLeft5 {
	--trans-x: -5px;
}
.whitespacePreLine {
	white-space: pre-line;
}

/* === Header classes === */
.headerGradient{
	height: 200px;
	background: var(--header-gradient);
}

.headerWelcomeTitle {
	color: var(--darkaccent-teal);
	display: inline-block;
	font-family: "Poppins", Helvetica;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 61.2px;
	white-space: nowrap;
}
.headerLogoutLink {
	color: var(--darkaccent-teal);
	display: block;
	float: right;
	font-family: "Poppins", Helvetica;
	font-size: 16px;
	font-weight: 700;
	line-height: 27.2px;
}
.headerBackLink {
	color: var(--darkaccent-teal);
	display: inline-block;
	font-family: "Poppins", Helvetica;
	font-size: 16px;
	font-weight: 700;
	line-height: 27.2px;
}
.headerBackLink:hover,
.headerBackLink:focus-visible {
	text-decoration: underline;
}

/* === Form classes === */
.baseFormHeader {
	color: var(--black);
	font-family: var(--label-ekstra-large-font-family);
	font-size: 36px;
	font-style: var(--label-ekstra-large-font-style);
	font-weight: var(--label-ekstra-large-font-weight);
	letter-spacing: var(--label-ekstra-large-letter-spacing);
	line-height: var(--label-ekstra-large-line-height);
	white-space: nowrap;
}

.baseFormSubheader {
	color: var(--black);
	font-family: "Poppins", Helvetica;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 37.4px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 30px;
	width: 100%;
}

.baseFormError {
	color: red;
	font-family: var(--body-large-18px-regular-font-family);
	font-size: var(--body-large-18px-regular-font-size);
	font-style: var(--body-large-18px-regular-font-style);
	font-weight: var(--body-large-18px-regular-font-weight);
	letter-spacing: var(--body-large-18px-regular-letter-spacing);
	line-height: var(--body-large-18px-regular-line-height);
	white-space: nowrap;
}

.baseFormInput {
	background-color: var(--white);
	border: 1px solid;
	border-color: var(--lightaccent-tan);
	border-radius: 40px;
	color: #252525;
	display: inline-block;
	font-family: var(--body-large-18px-regular-font-family);
	font-size: var(--body-large-18px-regular-font-size);
	font-style: var(--body-large-18px-regular-font-style);
	font-weight: var(--body-large-18px-regular-font-weight);
	letter-spacing: var(--body-large-18px-regular-letter-spacing);
	padding: 14px 50px;
	width: 540px;
}
.baseFormInput::placeholder {
	color: var(--dark-dark-4);
}
.baseFormInput.mediumWidth {
	width: 300px;
}
.baseFormInput.smallWidth {
	padding: 14px 36px;
	width: 150px;
}
.baseFormInput.errorField {
	border: 2px solid red;
}
.baseFormInput:read-only {
	background-color: #ddd;
}
.baseFormInput.numberField{
	appearance: textfield;
}

.baseFormLabel {
	color: #252525;
	font-family: var(--body-large-18px-regular-font-family);
	font-size: var(--body-large-18px-regular-font-size);
	font-style: var(--body-large-18px-regular-font-style);
	font-weight: var(--body-large-18px-regular-font-weight);
	letter-spacing: var(--body-large-18px-regular-letter-spacing);
	line-height: var(--body-large-18px-regular-line-height);
}

.baseFormSelect {
	appearance: none;
	background-color: var(--white);
	border: 1px solid var(--lightaccent-tan);
	border-radius: 40px;
	color: #252525;
	display: inline-block;
	font-family: var(--body-large-18px-regular-font-family);
	font-size: var(--body-large-18px-regular-font-size);
	font-style: var(--body-large-18px-regular-font-style);
	font-weight: var(--body-large-18px-regular-font-weight);
	letter-spacing: var(--body-large-18px-regular-letter-spacing);
	padding: 14px 50px;
	width: 540px;
}
.baseFormSelect:focus-visible::after {
	transform: translateY(-50%) rotate(-45deg);
}
.baseFormSelect:has(option:disabled:checked),
.baseFormSelect:has(option:checked[data-disabled]) {
	color: var(--dark-dark-4);
}
.baseFormSelect.errorField {
	border: 2px solid red;
}
.baseFormSelect:disabled {
	background-color: #ddd;
}

.baseFormSelectArrow {
	/* Custom dropdown arrow for selects */
	aspect-ratio: 1 / 1;
	border: 2px solid transparent;
	border-bottom-color: var(--dark-dark-4);
	border-left-color: var(--dark-dark-4);
	display: block;
	pointer-events: none;
	position: absolute;
	right: 50px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	transition: transform ease-in-out 0.1s;
	width: 10px;
}
.baseFormSelect.open + .baseFormSelectArrow {
	transform: translateY(-50%) rotate(-45deg);
}

.baseFormTextarea {
	background-color: var(--white);
	border: 1px solid;
	border-color: var(--lightaccent-tan);
	border-radius: 20px;
	color: #252525;
	display: inline-block;
	font-family: var(--body-large-18px-regular-font-family);
	font-size: var(--body-large-18px-regular-font-size);
	font-style: var(--body-large-18px-regular-font-style);
	font-weight: var(--body-large-18px-regular-font-weight);
	height: 200px;
	letter-spacing: var(--body-large-18px-regular-letter-spacing);
	padding: 30px;
}
.baseFormTextarea::placeholder {
	color: var(--dark-dark-4);
}
.baseFormTextarea.errorField {
	border: 2px solid red;
}
.baseFormTextarea:read-only {
	background-color: #ddd;
	height: auto;
	resize: none;
}

.baseFormSubmitButton {
	background-color: var(--darkaccent-teal);
	border: none;
	border-radius: 40px;
	color: var(--white);
	cursor: pointer;
	display: block;
	font-family: var(--label-ekstra-large-font-family);
	font-size: var(--label-ekstra-large-font-size);
	font-style: var(--label-ekstra-large-font-style);
	font-weight: var(--label-ekstra-large-font-weight);
	letter-spacing: var(--label-ekstra-large-letter-spacing);
	line-height: var(--label-ekstra-large-line-height);
	padding: 16px 48px;
	text-align: center;
	transition: filter var(--hover-trans-time) ease;
	white-space: nowrap;
}
.baseFormSubmitButton:hover {
	filter: brightness(1.3);
}
.baseFormSubmitButton.inlineBlock {
	display: inline-block;
}
.baseFormSubmitButton.fixedWidth {
	width: 250px;
}

.baseFormResetButton {
	color: var(--darkaccent-teal);
	cursor: pointer;
	font-family: "Poppins", Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	top: calc(50% + 1.5rem);
}

/* === Table classes === */
.baseStripedTable>tbody>tr:nth-child(2n + 1){
	background-color: #ececec;
}
.baseStripedTable>tbody>tr:nth-child(2n){
	background-color: #fffa;
}
.baseTableHeader {
	color: var(--black);
	font-family: var(--label-ekstra-large-font-family);
	font-size: var(--label-ekstra-large-font-size);
	font-style: var(--label-ekstra-large-font-style);
	font-weight: var(--label-ekstra-large-font-weight);
	letter-spacing: var(--label-ekstra-large-letter-spacing);
	line-height: var(--label-ekstra-large-line-height);
	padding: 7px;
	white-space: nowrap;
}
.baseTableCell {
	color: var(--black);
	font-family: var(--body-large-18px-regular-font-family);
	font-size: 16px;
	font-style: var(--body-large-18px-regular-font-style);
	font-weight: var(--body-large-18px-regular-font-weight);
	letter-spacing: var(--body-large-18px-regular-letter-spacing);
	line-height: var(--body-large-18px-regular-line-height);
	padding: 7px;
}

/* === Components === */
/* Alerts */
.alert {
	background-color: #efefef;
	color: #000;
	font-family: "Poppins", Helvetica;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0;
}
.alert-error {
	color: #dd5533;
}
.alert-medium {
	font-size: 16px;
}
.alert-success {
	color: #188150;
}
.alert-transparent {
	background-color: transparent;
}

/* Collapsable block */
.baseCollapsableBlock {
	background-color: #ececec;
}
.baseCollapsableBlockHeader {
	background-color: transparent;
	border: none;
	color: var(--darkaccent-teal);
	cursor: pointer;
	font-family: var(--body-large-18px-regular-font-family);
	font-size: 22px;
	font-style: var(--body-large-18px-regular-font-style);
	font-weight: var(--body-large-18px-regular-font-weight);
	height: 87px;
	letter-spacing: var(--body-large-18px-regular-letter-spacing);
	line-height: var(--body-large-18px-regular-line-height);
	padding: 0 20px;
	position: relative;
	text-align: start;
	transition: background-color var(--hover-trans-time) ease;
	white-space: nowrap;
	width: 100%;
}
.baseCollapsableBlockHeader:hover {
	background-color: #ccc;
}
.baseCollapsableBlockHeader::after {
	aspect-ratio: 1 / 1;
	background-color: #43737e;
	content: "";
	height: 13px;
	mask-image: url("/assets/img/triangle.svg");
	mask-position: center center;
	mask-size: contain;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
}
.baseCollapsableBlock:has(.open) .baseCollapsableBlockHeader::after {
	transform: translateY(-50%) rotate(-180deg);
}
.baseCollapsableBlockBody {
	overflow: hidden;
	position: relative;
}
.baseCollapsableBlockBody:not(.open) {
	display: none !important;
}

/* === Internal page classes === */
.baseContentSubtitle {
	color: black;
	font-family: "Poppins", Helvetica;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0;
}