:root{--pesiola-common-grid-gap:15px;--color-light-blue:#C5D7FC;--color-darker-blue:#8CB5F8;--color-beige:#F6F1ED;--color-darker-beige:#F1EAE4;--color-blue:#294294;--color-green:#35CE8D;--color-lighter-green:#5BD7A3;--color-black:#081921;--color-red:#ED0131;--lightest-blue:#C5D7FC;--pesiola-h1:24px;--pesiola-h2:18px;--pesiola-h3:24px;--customer-form-gap-vertical:15px}body{background:var(--color-blue);display:flex;flex-direction:column}#container{background:var(--color-blue);flex:0 0 auto}#main{min-height:35vh}h1{font-size:var(--pesiola-h1);font-weight:600}div#popup_box>div h1{font-size:var(--pesiola-h1)}.form_field_wrap label{color:var(--color-black)}#customer_info_wrapper{margin-top:48px}#register-customer-wrapper #customer_info_wrapper{margin-top:24px}#customer_info_wrapper h2{font-size:var(--pesiola-h2);font-weight:600}#register-customer-wrapper h3{font-size:var(--pesiola-h3);margin-bottom:16px}#login_form_wrapper h3{margin-bottom:15px;font-weight:600}#polku{display:none}
#customer_info_wrapper {
	.form_field_wrap {
		> label {
			font-weight: 500;
		}
	}
}

#customer_register_form {

	.main_login_wrapper {
		background: var(--color-light-blue);
		border-radius: 4px;

		a {
			font-weight: 500;
		}
	}

	.form_field_wrap {
		> label {
			font-weight: 500;
		}

		&.checkbox_wrapper {
			
			label > span::before {

				background: #fff;
			}

		}
	}

	.robot_check_wrap {
		padding: 1rem 0 0 0;
	}

}
@keyframes openable_open{0%{opacity:0;max-height:0;padding-top:0}60%{opacity:0}100%{opacity:1;max-height:250px;padding-top:20px}}@keyframes openable_close{0%{opacity:1;max-height:250px;padding-top:20px}100%{opacity:0;max-height:0;padding-top:0}}@keyframes border_flash{0%{box-shadow:0 0 0 #fc0202}100%{box-shadow:0 0 20px rgba(252,2,2,0)}}#main>div:not(:has(#work_reservation_form_container)){padding:40px 0;background:var(--color-beige);border-bottom-right-radius:6px;border-bottom-left-radius:6px}@media screen and (min-width:700px){#main>div:not(:has(#work_reservation_form_container)){width:var(--wrapper-max-width);margin-right:auto;margin-left:auto}}header,html{overflow-x:hidden}header.navi_opened{overflow-x:visible}.proceed{border-radius:var(--input-border-radius);color:var(--color-black);font-weight:500;font-size:var(--text-default-size);background:var(--color-green);user-select:none;-webkit-user-select:none}.proceed,.proceed:after,.proceed:before{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important;opacity:100!important;transform:none!important}.proceed:hover::before{transform:none!important}.proceed:hover{background-color:var(--color-lighter-green);color:var(--color-black)}#delete_account_content .proceed{color:var(--color-white)}
#work_reservation_form_container {

	form {
		max-width: var(--wrapper-max-width) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 0 !important;
	}

	@media (max-width: 768px) {
		margin-left: auto;
		margin-right: auto;
	}

	h1 {
		font-size: 18px;
		
	}
	h1 + p {
		margin-top: 20px;
	}

	h1 + div.two_field {
		margin-top: 35px;
	}
	h1:has(+ div.form_field_wrap.hidden) {
		margin-bottom: 24px;
	}

	form {
		padding: 0 0 25px 0;
	}

	div.form_fields_wrapper {
		margin: 0;
	}
	
	div.form_fields_wrapper h4 {
		margin: 10px 0 20px 0;
	}

	> form > .form_fields_wrapper > div, div.preview_container {
		padding: 40px 0 40px 0;
		background: var(--color-beige);
	}

	&:has(.cabin_select_container) > form > .form_fields_wrapper > div:first-child {
		border-top-right-radius: 6px;
		border-top-left-radius: 6px;
	}

	> form > .form_fields_wrapper > div:first-child,
	div.preview_container:first-child {
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
	}

	#reservation_item_container {
		margin: 20px 0;
	}

	@media screen and (min-width: 768px) {
		div.preview_container {
			width: var(--wrapper-max-width);
			margin-right: var(--main-x-padding);
		}
		> form > .form_fields_wrapper > div, div.preview_container {
			padding-left: 40px;
			padding-right: 40px;
			margin-bottom: 8px;
		}
	}
	@media screen and (max-width: 768px) {
		> form > .form_fields_wrapper > div + div {
			margin-top: 8px;
		}

		> form > .form_fields_wrapper > div > *, #reservation_item_container {
			margin-left: 24px;
			margin-right: 24px;
		}
		> form > .form_fields_wrapper > div, div.preview_container {
			padding-top: 32px;
			padding-bottom: 32px;
		}

	}

	> form > .form_fields_wrapper > div:not(:first-child),
	div.preview_container:not(:first-child) {
		border-radius: 6px;
	}

	> form > .form_fields_wrapper > div > h1, div.preview_container h1 {
		font-size: 24px;
	}
	
	> div.preview_container h2 {
		font-size: 18px;
		font-weight: 500;
	}
	
	> form > .form_fields_wrapper > div:last-child {
		padding-bottom: 24px;
	}

	.form_field_wrap label:not(.checkbox), .labels p {
		font-weight: 500;
	}
	.form_field_wrap label p.formfield_sub_label {
		font-weight: normal;
	}

	.form_field_wrap.error_field:after, .bedding_count_container.error_field:after, .form_field_wrap.error_date_field:after {
		content: 'Korjaa kentän arvo';
		color: red;
		font-size: 14px;
	}

	.js_error_notice {
		color: red;
		font-size: 14px;
	}

	.form_field_wrap.error_date_field:after {
		content: 'Valitse päivämäärä';
	}

	.form_field_wrap.error_field input, .error_date_field input, .form_field_wrap.error_field select {
		border: 1px solid red;
		animation: border_flash 1.5s 3 ease-out;
	}

	form > div > div > div.submit-button-container {
		display: flex;
		flex-wrap: wrap;
		gap: 24px;
		margin-top: 40px;
		box-sizing: border-box;
	}
		
	form > div.notify_box {
		margin-top: 20px;
		margin-bottom: -20px;
	}
	
	form > div.submit-button-container,
	form > div > div.submit-button-container {
		width: 100%;
		display: grid;
		grid-template-columns: 25% 1fr;
		gap: 24px;
		margin-top: 40px;
	}

	form > div.submit-button-container:not(:has(input[type=submit][name=btn_submit_finished])) {
		grid-template-columns: 1fr;
	}

	@media screen and (max-width: 699.99px) {
		form > div.submit-button-container {
			grid-template-columns: 35% 1fr;
		}
	}

	.submit-button-container .button_save {
		background: var(--color-green);
		color: var(--color-black);
	}

	.submit-button-container:has(+ .button_clear) {
		margin-bottom: 24px;
	}
	.submit-button-container + input[type=submit][name=btn_clear] {
		color: var(--color-blue);
	}

	input[type=submit] {
		border-radius: var(--input-border-radius);
		color: var(--color-black);
		font-weight: 500;
		font-size: var(--text-default-size);
	}
	input[type=submit][name=btn_submit_finished],
	input[type=submit][name=btn_submit_preview] {
		flex-basis: 50%;
		background: var(--color-green);
	}

	input[type=submit][name=btn_submit_finished]:hover,
	input[type=submit][name=btn_submit_preview]:hover,
	.submit-button-container .button_save:hover	{
		background-color: var(--color-lighter-green);
	}

	input[type=submit][name=btn_edit]:hover {
		background: var(--color-beige);
		filter: brightness(.97);
	}
	
	input[type=submit][name=btn_submit_preview],
	input[type=submit][name=btn_submit_finished] {
		flex-basis: 100%;
	}

	form > div.submit-button-container {
		
		input[type=submit][name=btn_edit] +
		input[type=submit][name=btn_submit_finished],
		input[type=submit][name=btn_edit]:has(+ input[type=submit][name=btn_submit_finished]) {
			padding: 12px 16px;
			font-size: 15px;
		}
	}

	@media screen and (max-width: 699.99px) {

		form > div > div > div.submit-button-container {
			width: calc(100% - 48px);
		}
	}

	li.border-button a, a.proceed.border-button, input[name=btn_edit] {
		border: 1px solid var(--color-blue);
		background: transparent;
	}
	
	a.proceed.border-button:hover {
		background-color: #fff;
	}
	
	input[type=submit][name=btn_clear], .button_clear {
		font-size: 12px;
		width: 100%;
		display: block;
		padding: 0;
		color: rgba(0, 0, 0, .3);
		background: transparent;
	}

	div.two_field, div.tri_field, div.two_row {
		display: grid;
		grid-gap: var(--pesiola-common-grid-gap);
		margin-bottom: 15px;
	}

	div.two_field.hidden,
	div.tri_field.hidden,
	div.two_row.hidden {
		display: none;
	}

	div.two_row.openable > label {
		font-weight: 500;
		font-size: 16px;
	}

	.guest_field div.two_field {
		margin-bottom: 0;
	}
	.guest_field div.two_field div.labels p:first-child {
		font-weight: 600;
	}
	.guest_field div.two_field div.labels p:nth-child(2) {
		font-weight: normal;
	}
	
	@media (max-width: 600px) {
		div.two_field.uneven {
			display: block;
		}
		div.two_field.uneven > div + div {
			margin-top: 15px;
		}
		div.two_field.uneven > .cabin_lockbox_code {
			width: calc(50% - var(--pesiola-common-grid-gap) / 2);
		}
		div.two_field.reservation_date {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (min-width: 600.1px) {
		
		div.two_field {
			grid-template-columns: repeat(2, 1fr);
		}

		div.two_row {
			grid-template-rows: 2fr 1fr 2fr;
		}

		div.two_field.uneven {
			grid-template-columns: 70% 1fr;
		}

		div.tri_field {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.multi_option_field > .multi_selection_wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 5px 10px;
	}
	
	.form_field_wrap:has(.radiobox_new,.checkbox_new) {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.multi_option_field:has(.multi_selection_wrapper) + .multi_option_field:has(.multi_selection_wrapper) .multi_selection_wrapper {
		margin-top: 20px;
	}	

	.multi_option_field > .form_field_wrap.multi_selection_wrapper > label {
		display: flex;
		flex-basis: 100%;
		flex-wrap: wrap;

	}
	.multi_option_field > .form_field_wrap.multi_selection_wrapper > .form_field_wrap {
		display: flex;
		flex-basis: calc(50% - 10px);
		background: #fff;
		border-radius: 4px;
		justify-content: space-around;
	}

	.multi_option_field > .form_field_wrap.multi_selection_wrapper > .form_field_wrap > label {
		flex-basis: 90%;
		padding: 14px 0;
		cursor: pointer;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-content: center;
		align-items: center;
	}
	.multi_option_field > .form_field_wrap.multi_selection_wrapper > .form_field_wrap > label span {
		display: inherit;
		align-self: center;
		padding-left: 5px;
	}
	.multi_option_field > .form_field_wrap.multi_selection_wrapper > .form_field_wrap > label:after {
		justify-self: self-end;
	}

	.multi_option_field > .form_field_wrap.multi_selection_wrapper .form_field_wrap label {
		font-size: 16px;
	}
	.multi_option_field > .multi_selection_wrapper.form_field_wrap label .formfield_sub_label {
		font-size: 15px;
		flex-basis: 100%;
	}

	@media (max-width: 600px) {
		
		.multi_option_field > .multi_selection_wrapper.form_field_wrap label .formfield_sub_label {
		
		}
	}

	#reservation_items {
		max-height: unset;
		margin: 20px 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--pesiola-common-grid-gap);
	}

	@media (max-width: 699.99px) {
		#reservation_items {
			grid-template-columns: 1fr;
		}
	}


	#reservation_item_container > p {
		font-weight: 500;
	}
	#reservation_item_container.closed {
		display: none;
	}
	
	#reservation_items .form_field_wrap {
		min-height: 60px;
		background: #fff;
		border-radius: 6px;
		display: grid;
		padding: 12px 16px;
	}
	#reservation_items .form_field_wrap:not(.countable) {
		
	}
	#reservation_items .form_field_wrap:not(.countable) span p.formfield_sub_label {
		
	}

	#reservation_items .form_field_wrap.checkbox_wrapper {
		border: 1px solid #fff;
	}

	.multi_option_field > .form_field_wrap.multi_selection_wrapper > .form_field_wrap:has(input:checked),
	#reservation_items .form_field_wrap.checkbox_wrapper:has(input:checked) {
		border-color: var(--color-darker-blue);
		background: var(--color-light-blue);
	}

	#reservation_items .form_field_wrap.countable {
		grid-template-columns: 100% 35%;
		
		label > span {
			max-width: 62%;
		}
	}

	@media screen and (max-width: 699.99px) {
		#reservation_items .form_field_wrap.countable {
			grid-template-columns: 100% 40%;
		}
	}

	#reservation_items .form_field_wrap:has(input:checked) {
		border: 1px solid #000;
	}

	#reservation_items .form_field_wrap label {
		font-size: 16px;
	}

	#reservation_items .form_field_wrap input,
	#reservation_items .form_field_wrap label {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	#reservation_items .form_field_wrap label p.formfield_sub_label {
		font-size: 13px;
	}

	#reservation_items .form_field_wrap label {
		min-height: 40px;
		display: grid;
		align-content: center;
	}

	#reservation_items .form_field_wrap:not(:has(input:checked)) > .count-tools {
		display: none;
	}

	div.openable.closed {
		padding-top: 0;
		max-height: 0;
		overflow: hidden;
		pointer-events: none;
	
	}
	div.openable.closed-animation {
		animation: openable_close ease-out 250ms 1;
	}
	div.openable:not(.closed) {
		animation: openable_open ease-out 250ms 1;
		padding-top: 20px;
	}

	span:has(.openable_button.button-open) {
	}
	
	span:has(.openable_button.button-open), span:has(.openable_button.button-closed) {
		margin-top: 28px;
		line-height: 24px;
		height: 24px;
		display: block;
	}

	a.openable_button.button-open,
	a.openable_button.button-closed {
		font-weight: 500;
		font-size: 15px;
		vertical-align: middle;
		color: var(--color-black);
	}
	span:has(.openable_button.button-open):before {
		content: '\2212';
	}
	span:has(.openable_button.button-closed):before {
		content: '\002B';
	}

	span:has(.openable_button.button-open):before,
	span:has(.openable_button.button-closed):before {
		font-size: 22px;
		margin-right: 7px;
		text-decoration: none;
		line-height: 20px;
		height: 27px;
		vertical-align: middle;
	}

	.form_field_wrap.bedding_made:not(.show) {
		display: none;
	}

	#reservation_preview_container {
		display: grid;
		gap: 24px 0;
	}

	h1 + #reservation_preview_container {
		margin-top: 24px;
	}

	@media (min-width: 780px) { 
		#reservation_preview_container .form_fieldset {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.form_fieldset {
	}

	.form_fieldset p.field_name {
		font-weight: 500;
		color: var(--color-black);
	}

	.count-tools {
		width: 145px;
		height: 48px;
		background: #fff;
	}
	#reservation_items .form_field_wrap .count-tools {
		margin-left: calc(-95%);
	}

	#reservation_items .count-tools {
		height: 40px;
	}
	.form_field_wrap.countable .count-tools {
		width: 100%;
	}

	.guest_field .labels p:first-child {
		font-size: 15px;
		font-weight: 500;
	}
	.guest_field .labels p:last-child {
		font-size: 13px;
	}

	.labels {
		display: grid;
		align-content: center;
	}

	@media screen and (max-width: 600px) {

		.two_field.guest_counts {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			align-content: center;
			justify-content: center;
		}

	}

	.two_field.guest_counts.error_field, .bedding_count_container.error_field input {
		border: 1px solid red;
		border-radius: 4px;
		padding: 5px;
		animation: border_flash 1.5s 6 ease-out;
	}

	div.count-tools {
		border: 1px solid #838C90;
		border-radius: 4px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	div.count-tools > * {
		text-align: center;
		vertical-align: middle;
		height: 47px;
		line-height: 47px;
	}

	div.count-tools input {
		line-height: unset;
		min-height: unset;
		max-height: 46px;
		padding-left: 0;
		padding-right: 0;
		border: 0 !important;
	}

	#reservation_items div.count-tools input {
		max-height: 38px;
	}

	div.count-tools .count_action_button {
		text-decoration: none;
		font-size: 20px;
		vertical-align: middle;
		position: relative;
		padding-top: 0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		background: transparent;
		min-height: unset;
		height: 100%;
		max-height: 100%;
		line-height: 100%;
	}

	div.count-tools .count_action_button:active {
		background: rgba(0, 0, 0, .1);
	}
	
	#reservation_items div.count-tools .count_action_button:before {
		position: relative;
		top: 3px;
	}

	.bedding_count_container:not(.show),
	.service_request_time_select:not(.show) {
		display: none;
	}

	.service_request_time_select label {
		font-weight: 500;
	}
	.service_request_time_select .multi_selection_wrapper > div {
		max-height: unset;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--pesiola-common-grid-gap);
	}
	
	@media (max-width: 699.99px) {
		.service_request_time_select .multi_selection_wrapper > div {
			grid-template-columns: 1fr;
		}
	}

	.service_request_time_select .multi_selection_wrapper > div .form_field_wrap {
		min-height: 60px;
		background: #fff;
		border-radius: 6px;
		display: grid;
		cursor: pointer;
	}
	.service_request_time_select .multi_selection_wrapper > div .form_field_wrap:has(input:checked) {
		border-color: var(--color-darker-blue);
		background: var(--color-light-blue);
	}
	.service_request_time_select .multi_selection_wrapper > div .form_field_wrap label {
		font-weight: 400;
		cursor: pointer;
		padding: 12px 16px;
	}
	.service_request_time_select .multi_selection_wrapper > div .form_field_wrap label > span::before {
		background: transparent;
	}
	.service_request_time_select .form_field_wrap.error_field::after {
		padding: 0 16px 12px 16px;
	}


	.bedding_count_container.show {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.bedding_count_container {
		margin: 25px 0;
	}

	.bedding_count_container.show .count-tools {
		justify-self: end;
	}

	.select_wrap.reservation_start_time select,
	.select_wrap.reservation_end_time select {
		width: 100%;
		appearance: none;
		
	}
	
	.validity_indicator {
		pointer-events: none;
		width: 28px;
		height: 45px;
		align-content: center;
		top: 50px;
	}

	.validity_indicator:after {
		display: inline-block;
		width: 28px;
		height: 28px;
		font-size: 20px;
		color: #ccc;
	}

	.form_field_wrap.reservation_start_date .validity_indicator:after,
	.form_field_wrap.reservation_end_date .validity_indicator:after {
		font-family: 'icomoon';
		color: #294294;
		content: '\e900';
		position: relative;
		top: -2px;
		right: -12px;
	}
	.select_wrap.reservation_start_time .validity_indicator:after,
	.select_wrap.reservation_end_time .validity_indicator:after {
		font-family: 'icomoon';
		color: #294294;
		content: '\e903';
		position: relative;
		top: -2px;
		right: -12px;
	}

	input[type=submit] {
	}

	div.reservation-login-notice {
		
		position: relative;
		background: var(--color-light-blue);
		padding: 34px;
		margin-bottom: 40px;
		border-radius: 4px;

		a.close-reservation-login-notice {
			position: absolute;
			top: 0;
			right: 10px;
			text-decoration: none;
			font-size: 30px;
		}
		a.close-reservation-login-notice i:before {
			font-size: 21px;
		}

		h2 {
			font-size: 18px;
			margin: 0 0 8px 0;
			color: #000;
			font-weight: bold;
		}

		h2 i {
			margin-right: 0;
		}
		h2 i:before {
			margin-right: 8px;
			color: var(--color-blue);
		}

		p {
			margin-bottom: 24px;
			color: #000;
		}

		.proceed {
			border-radius: 4px;
			width: 113px;
			height: 48px;
			padding: 12px 24px;
		}

	}
	
	> .form_fields_wrapper > div > .customer-cabin-container {
		margin: 24px auto;
	}

	#reservation_preview_container:has(.customer-cabin-container) {
		margin-top: 24px;
	}

	.cabin_select_container #customer-cabin-container {
		margin: 24px 0;
	}

	#customer-cabin-container + div:has(a.proceed) {
		padding-top: 16px;
	}

	.cabin_select_container + form {
		margin-top: 8px;
	}

	#customer-cabin-container {

		.cabin-item {
			display: grid;
			grid-template-columns: 1fr;
			padding: 16px 24px;
			gap: 16px;
			background: var(--color-light-blue);
			margin-bottom: 16px;
			border-radius: 4px;
			
			&:has(:not(div a)) {
				grid-template-columns: 70% 1fr;
			}
			
			&:has(div > a > i) {
				grid-template-columns: 80% 1fr 1fr;
			}
			
			> div {
				display: grid;
				text-decoration: none;
			}

			a, span.link_text {
				align-self: center;
				justify-self: self-end;
				font-size: 14px;
				font-weight: 500;
				text-decoration: underline;
			}
			a:hover {
				text-decoration: none;
			}
			a > i {
				align-self: center;
				justify-self: self-end;	
			}
		}

		a.cabin-item {
			text-decoration: none;
		}

		.cabin-item:last-child {
			margin-bottom: 0;
		}

		.cabin-address {
			font-size: 14px;
		}
		
		.reservation-item-container {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 24px;
			align-self: stretch;
		}
		

		
		.reservation-item-container > div.reservation-item {
			background-color: var(--color-white);
			padding: 24px;
			width: 100%;
			border-radius: 4px;
			border: 1px solid #838C90;
		}
		
		.reservation-item-container > div.reservation-item > div:first-child {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24px;
			color: var(--color-black);
			font-weight: 500;
			font-size: 22px;
			
		}
		
		div.preview {
			transition: height .3s ease-out;
		}

		div.preview:not(.hidden) {
			height: calc-size(auto, size);
		}

		div.preview.hidden {
			height: 0;
			overflow-y: hidden;
		}

		div.preview .reservation-preview-container {
			transition: opacity .6s;
			margin: 16px 0;
		}

		div.preview.hidden .reservation-preview-container {
			opacity: 0;
		}

		div.preview:not(.hidden).reservation-preview-container {
			opacity: 1;
		}

	}

	.finished-reservation-view-container {

		width: 100%;
		background: var(--color-white);
		padding: 24px;
		display: flex;
		flex-wrap: wrap;
		border-radius: var(--input-border-radius);
		border: 1px solid var(--color-grey);
		margin-top: 45px;
		margin-bottom: 45px;

		h2 {
			display: flex;
			flex-flow: row wrap;
			gap: 10px;
			align-items: center;
			font-size: 18px;

			span {
				font-size: 14px;
				border-radius: 4px;
				padding: 4px 6px;
				background: var(--color-light-blue);
				font-weight: 400;
			}
		}

		> div:has(a) {
			text-align: right;
		}
		> div a {
			font-weight: 500;
			font-size: 14px;
		}

		> div:not(#cabin-container, .edit-reservation-container) {
			flex-basis: 100%;
			flex-grow: 1;
			flex-shrink: 0;
		}

		> div.cabin_details {
			flex-basis: 70% !important;
			flex-grow: 1;
			flex-shrink: 0;
		}
		> div.reservation_actions {
			flex-basis: 30% !important;
			flex-grow: 1;
			flex-shrink: 0;

			display: flex;
			flex-flow: row nowrap;
			gap: 10px;
			justify-content: flex-end;
		}
		
		.reservation_details_brief {
			margin-top: 16px;
			display: grid;
			gap: 24px 0;
			font-size: 0.9em;
		}
		.reservation_details_brief b {
			font-weight: 500;
		}

		.reservation_details_brief .status {
			padding-top: 0.6rem;

			display: flex;
			flex-flow: row wrap;
			gap: 0.25rem;
			align-items: center;

			.dot {
				display: inline-block;
				width: 12px;
				height: 12px;
				margin-top: -1px;
				margin-left: 4px;
				border-radius: 100px;
			}
		}

		@media (max-width: 600px) { 
			> div.cabin_details {
				flex-basis: 50% !important;

				h2 {
					flex-flow: column nowrap;
					align-items: flex-start;
				}
			}
			> div.reservation_actions {
				flex-basis: 50% !important;
			}
		}

		@media (min-width: 780px) { 
			.reservation_details_brief .form_fieldset {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
			}
		}

		div.preview {
			transition: height .3s ease-out;
		}

		div.preview:not(.hidden) {
			
			height: calc-size(auto, size);
		}
		div.preview.hidden {
			height: 0;
			overflow-y: hidden;
		}

		div.preview #reservation_preview_container {
			transition: opacity .6s;
			margin: 16px 0;
		}

		div.preview.hidden #reservation_preview_container {
			opacity: 0;
		}

		div.preview:not(.hidden) #reservation_preview_container {
			opacity: 1;
		}

		&:not(:has(div.preview.hidden)) #cabin-container {
			display: none;
		}

		#cabin-container {
			width: 100%;
			margin-top: 24px;
		}
		
		.edit-reservation-container {
			width: 100%;
			margin-top: 20px;
		}
		.edit-reservation-container.hidden {
			display: none;
		}
		
		.proceed.border-button:before  {
			background: var(--color-white);
		}
		
		.proceed:hover:before {
			background: var(--color-beige);
		}
		
		
	}
	
	.customer-list-container.preview_container .finished-reservation-view-container {
		margin-top: 16px;
		margin-bottom: 0;
	}
	
	
	.proceed.border-button:before  {
		background: var(--color-beige);
	}
	
	
	.proceed.border-button:hover:before {
		background: var(--color-darker-beige);
	}
	
	.created {
		margin-bottom: 20px;
	}

	#overlap_alert {
		color: #f00;

		&.is_admin {
			color: #0084f0;
		}

		&:not(.visible) {
			display: none;
		}

		#list_of_overlaps {
			margin-left: 1rem;
			padding: 0.5rem 0;

			li {

				padding-bottom: 0.3rem;

				&:last-child {
					padding-bottom: 0;
				}

				> div {
					width: 100%;
					display: flex;
					flex-flow: row wrap;
					gap: 0.2rem 0.5rem;
					justify-content: space-between;

					span:last-child a {
						font-weight: 600;

						&:hover {
							text-decoration: none;
						}
					}
				}
			}
		}

		b {
			font-weight: 500;
		}
	}
	#overlap_ok {
		display: flex;
		align-items: center;
		gap: 6px;
		color: #008f3b;
		font-weight: 500;

		i.check::before {
			content: '\e902';
			font-style: normal;
			font-family: 'icomoon';
			font-size: 24px;
		}

		&:not(.visible) {
			display: none;
		}
	}
}

input.ok_field ~ .validity_indicator:before {
	content: unset;
}


#work_reservation_form_container {

	input[type=checkbox], .form_field_wrap.styled_radiobutton input[type=radio] {
		position: absolute;
	    background-color: transparent;
	    opacity: 0;
	    width: 20px;
	    height: 20px;
	    min-height: 20px;
	    padding: 0;
	    margin: 0;
	    pointer-events: none;
	    font-size: 0;
	}

	input[type=radio] + label i.radiobox_icon:after,
	input[type=radio]:checked + label i.radiobox_icon:after {
		font-family: 'icomoon';
		font-size: 24px;
		color: #294294;
		font-style: normal;
	}

	.form_field_wrap.styled_radiobutton input[type=radio] + label i:after,
	.form_field_wrap.styled_radiobutton input[type=radio] + label i {
		display: grid;
		justify-self: end;
		margin-right: 5px;
	}

	.form_field_wrap.styled_radiobutton input[type=radio] + label i.radiobox_icon:after {
		content: '\e909';
		display: inline-block;
	}
	.form_field_wrap.styled_radiobutton input[type=radio]:checked + label i.radiobox_icon:after {
		content: '\e908';
		display: inline-block;
	}

	input[type=checkbox] + label > span > span {
		position: relative;
		top: -5px;		
	}
	

	input[type=checkbox] + label > span:before,
	input[type=checkbox][checked] + label > span:before {
		font-family: 'icomoon';
		margin-right: 15px;
		font-size: 24px;
		color: #294294;
		
	}

	input[type=checkbox]:not(:checked) + label > span:before {
		content: '\e901';
	}

	input[type=checkbox]:checked + label > span:before {
		content: '\e902';
	}

	.multi_selection_wrapper .form_field_wrap:has([type=radio]:focus),
	.checkbox_wrapper:has([type=checkbox]:focus) {
		outline: 2px solid #000;
	}

}
#header+#header_push,body #header_mobile a#header_login_link span{display:none}
#container:has(.messages) {

	#header_mobile {
	}

	.messages > div > div {
		border-radius: 6px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	}
}
#header,#header_mobile{position:unset}@media screen and (min-width:800px){#container #main_outer .messages{left:calc(100% / 2 - var(--wrapper-max-width)/ 2)}#header_mobile{margin-top:25px}}
#header_mobile {
	
	margin-left: auto;
	margin-right: auto;
    max-width: var(--wrapper-max-width);
    background-color: unset;
    box-shadow: unset;

    div.header_sect > div:has(#logo_wrapper) {
    	display: grid;
    	align-content: center;
    	position: relative;
    }

    div.header_sect.sect_1 > div > div {
    	width: 50%;
    }

	@media screen and (min-width: 768px) {
	    border-top-left-radius: 6px;
	    border-top-right-radius: 6px;
	}
    
    background-color: var(--header-background-color);
    box-shadow: var(--default-box-shadow);

    ul {
    	display: grid;
    	grid-template-columns: 1fr 175px 135px;
		gap: 10px;
    	padding: 0 20px;
    	align-content: center;
    }

    ul.items_2 li,
    ul.items_3 li {
    	width: 100%;
    }
    li > a > span {
    	align-content: start;
    }
    li.menu {
    	display: flex;
    	flex-wrap: wrap;
    	align-content: center;
    	justify-content: end;
    }
    li.menu > button {
    }
    button#navi_open_mobile span {
    	display: none;
    }

    li.new_reservation {
    	display: flex;
    	flex-wrap: wrap;
    	align-content: center;
    	justify-content: center;
    }
	li.new_reservation span {
		display: none;
	}
	li.new_reservation a.proceed {
    	border: 1px solid var(--color-blue);
		border-radius: var(--input-border-radius);
		font-weight: 500;
		height: unset;

		padding: 12px 24px;
		line-height: unset;
		box-sizing: border-box;
		display: block;
		font-size: 16px;
		width: 175px;
		max-height: 48px;
		cursor: pointer;
    }

    button#navi_open_mobile {
    	border: 1px solid var(--color-blue);
		background: transparent;
		border-radius: var(--input-border-radius);
		color: var(--color-black);
		font-weight: 500;
		height: unset;

		padding: 12px 24px;
		line-height: unset;
		box-sizing: border-box;
		display: block;
		font-size: 16px;
		width: 135px;
		max-height: 48px;
		cursor: pointer;
    }

    button#navi_open_mobile:hover {
    	background: var(--color-beige);
    }

    button#navi_open_mobile:after {
    	font-size: 16px;
    }

    ul li + li {
    	border: 0;
    }

}

body:not(.registered_customer_signed_in) #header_mobile li.new_reservation {
	display: none;
}

body:not(.registered_customer_signed_in) #header_mobile ul {
	grid-template-columns: 1fr 140px;
}
@media screen and (max-width:500px){body #header_mobile li.new_reservation{display:none}body #header_mobile ul{grid-template-columns:1fr 140px}}body #header_mobile #new_reservation_menu_button:after{content:'Uusi työpyyntö';font-size:16px}body #header_mobile a#header_login_link:after,body #header_mobile button#navi_open_mobile:after{content:'Kirjaudu'}body #header_mobile a#header_login_link{border:1px solid var(--color-blue);background:0 0;border-radius:var(--input-border-radius);color:var(--color-black);font-weight:500;height:unset;padding:12px 24px;line-height:unset;box-sizing:border-box;display:block;font-size:16px;width:135px;max-height:48px;cursor:pointer;text-align:center}body #header_mobile a#header_login_link:hover{background:var(--color-beige)}body.registered_customer_signed_in #header_mobile button#navi_open_mobile:after{content:'Omat sivut'}@media screen and (max-width:1399.9px){body:has(#header.navi_opened) #header_mobile button#navi_open_mobile:after{content:'Sulje'}}.navi_overlay{display:none;transition:opacity .3s;opacity:0}#header #navs>nav,#header .search_wrapper{height:100vh}#header div.header_sect.sect_2>div>div{width:var(--wrapper-max-width)}@media screen and (min-width:1400px){body:has(#header.navi_opened) .navi_overlay{position:absolute;top:0;left:0;height:100vh;width:100%;display:block;z-index:4;background:rgba(0,0,0,.2);opacity:1}#header div.header_sect.sect_2>div>div{width:390px;position:absolute;top:0;right:0}}#header ul#nav_menu{padding:40px 24px}#header ul#nav_menu li{border-radius:4px}#header ul#nav_menu li>a{justify-content:center;font-weight:500}#header ul#nav_menu li>a.logout_link{font-size:14px;padding:16px 0 0;text-decoration:underline}#header ul#nav_menu li>a.logout_link:hover{text-decoration:none}#header #navs nav ul>li{border:0}#header ul#nav_menu li.border-button{border:1px solid var(--color-blue)}#header ul#nav_menu li.border-button:hover{background:var(--color-beige)!important}#header ul#nav_menu li.main-button{background:var(--color-green);border:0}#header ul#nav_menu li.main-button:hover{background:var(--color-lighter-green)}#header ul#nav_menu li+li{margin-top:24px}#footer{padding-top:0}#footer .footer_sections,#footer .footer_sections a{text-align:center;color:var(--lightest-blue)}#footer .footer_rehti{border-top:1px solid rgba(140,181,248,.2);margin-top:32px;padding-top:32px}#footer .footer_rehti .powered_by i:before{font-size:42px}#footer .footer_sections div.footer_links{margin-top:8px}#footer .footer_sections div.footer_links p{display:inline-block}#footer .footer_sections div.footer_links p,#footer .footer_sections div.footer_links p a{font-size:14px}#footer .footer_sections div.footer_links p:not(:last-child):after{content:'•';margin-left:4px}div.customer-list-container h1{font-size:24px}div.customer-list-container h1+div{margin-top:20px}#reservation_mode_links_container{display:flex;justify-content:space-between;margin-bottom:24px;gap:20px}@media screen and (max-width:780px){#reservation_mode_links_container{flex-flow:column wrap}}#reservation_mode_links_container>div{display:flex;justify-content:flex-start;gap:20px;align-items:center}#reservation_mode_links_container>div.form_field_wrap{gap:10px}#reservation_mode_links_container a{font-weight:500;text-decoration:none}#reservation_mode_links_container a.selected,#reservation_mode_links_container a:active,#reservation_mode_links_container a:hover{text-decoration:underline}div#main_outer div#work_reservation_form_container.customer-list{padding-left:0;padding-right:0;margin-top:-20px}div#main_outer div#work_reservation_form_container.customer-list form div.form_field_wrap>div{margin-bottom:20px}@media screen and (max-width:699.99px){#main:has(#work_reservation_form_container){min-height:30vh}div#main_outer div#work_reservation_form_container.customer-list div.preview_container{padding-left:20px;padding-right:20px}#work_reservation_form_container #customer-cabin-container div.cabin-item:has(div > a > i){grid-template-columns:60% 1fr 1fr}}@media screen and (max-width:320px){#work_reservation_form_container #customer-cabin-container div.cabin-item:has(div > a > i){grid-template-columns:40% 1fr 1fr}}div.form_field_wrap:not(.reservation_start_date,.reservation_end_date,.reservation_start_time,.reservation_end_time) span.validity_indicator{display:none}div#main_outer div#work_reservation_form_container #cabin_form_errors div#messages{position:relative;top:0;left:0;margin-bottom:20px}#new_cabin_form.loading button.proceed>span{opacity:0}#new_cabin_form.loading button.proceed>i:after{content:"\f110";text-decoration:none;text-transform:none;font-style:normal;font-family:tmvk_icon;top:0;left:50%;margin-left:-25px;z-index:10;font-size:22px;color:var(--color-black);position:absolute;width:50px;height:50px;border-radius:50%;text-align:center;line-height:50px;-webkit-animation:1.5s steps(50) infinite anim-spin;animation:1.5s steps(50) infinite anim-spin}div.pika-single{width:min(336px,80dvw);border-radius:6px}div.pika-single .pika-lendar{box-sizing:border-box;width:calc(100% - 16px)}body .pika-next,body .pika-prev{min-height:auto}body .pika-button{min-height:auto;padding:.5rem 0;text-align:center}body .pika-button:hover{border-radius:4px}body .is-today:not(.is-selected) .pika-button{outline:1px solid var(--main-color);border-radius:2px}body main div.clear.main_clear{display:none!important}#reservation_item_container label.checkbox>span{display:grid;grid-template-columns:34px 1fr;align-items:center}#reservation_item_container label.checkbox>span span{padding-top:7px}label.checkbox>span::before{background:#fff}#reservation_items label.checkbox>span::before{background:0 0!important}#container.page-customer_details #main>div{padding-top:20px}.notify_box{border-radius:4px;font-weight:400;color:#000;display:flex;align-items:center;align-content:center}.notify_box>i{margin-top:5px;margin-right:5px}.notify_box>i.pesiola-info:before{color:#dd3d68;font-size:18px}.link_password a::after,.link_register a::after{content:''}.heading_size_fix h1{font-size:23px}.heading_size_fix h2{font-size:20px}.heading_size_fix h3{font-size:17px}.heading_size_fix h4{font-size:15px}.heading_size_fix h5{font-size:14px}.reservation_form_actions{display:grid;grid-template-columns:1fr 100px;align-items:center;gap:.8rem;padding:0 0 1rem}.reservation_form_actions h1{font-size:24px!important}.reservation_form_actions input[name=btn_clear]{border:1px solid var(--color-blue);background:0 0;font-size:14px!important;color:var(--color-black)!important;min-height:2.4rem}.reservation_form_actions input[name=btn_clear]:hover{background:var(--color-beige)!important;filter:brightness(.97)!important}.reservation_form_actions input[name=btn_edit]{border:1px solid var(--color-blue);background:0 0;font-size:16px!important;color:var(--color-black)!important}@media screen and (max-width:650px){.reservation_form_actions{grid-template-columns:1fr 100px}}#address_details_container{overflow:visible}div.register_return_link{display:block}span.req.req-either-one::after{content:"**"}span.req.req-before-info::after{content:""}span.req.req-before-info::before{content:"**";margin-right:5px;font-size:1.1em;line-height:.5;color:red}span.req.req-before-info{margin-top:15px;display:none;font-size:.9em}span.req.req-before-info.show{display:block}