/* ======= Variabler ======= */
:root {

	--font-family: 'Poppins', sans-serif;

	--color-primary: #ACC2F8;
	--color-dark: #0B2D7E;
	--color-secondary: #1453EB;
	--color-danger: #EB6974;
	--color-bg-primary: #F7F8FB;
	--color-white: #FFF;
	--color-grey: #878C95;
	--color-shadow: rgba(0, 0, 0, 0.08);

	--border-radius-full: 50px;
	--border-radius-small: 0.6rem;

	--transition-fast: 0.2s ease-in;
	--transition-faster: 0.15s ease-in;

	--shadow-none: none;

	--border-light: 1px solid var(--color-white);
	--border-dark: 1px solid var(--color-dark);
	--border-sec: 1px solid var(--color-secondary);

	--border-none: none;

	--padding-btn: 12px 32px;
	--padding: 22px;
}

/* ======= ladd kopp ======= */

.spinner-custom {
	color: var(--color-secondary) !important;
}

/* ======= Global styling ======= */

*:focus {
	box-shadow: 0 0 4px 2px rgba(198, 204, 209, 0.42) !important;
	outline: 1px solid #E4E4E4;
	transition: box-shadow 0.2s ease-in-out !important;
}

button:focus {
	box-shadow: 0 0 4px 2px rgba(198, 204, 209, 0.42) !important;
	outline: 1px solid #E4E4E4 !important;
	transition: box-shadow 0.2s ease-in-out !important;
}

h1, h2, h3 {
	color: #1C2529 !important;
}

a {
	color: #193555 !important;
}

a:hover {
	color: #001022 !important;
}

.login-a {
	color: var(--color-secondary) !important;
}

.login-a:hover {
	color: #001022 !important;
}

.text-color {
	color: #193555;
}

.text-color-secondary {
	color: var(--color-secondary) !important;
}

.text-wrap {
	white-space: normal !important;
}

.text-underline, .text-underline:hover, .text-underline:focus {
	text-decoration: underline !important;
}

.primary-text {
	color: var(--color-primary) !important;
}

.bg-primary-color {
	background-color: var(--color-bg-primary);
}

.sticky-box-bottom {
	position: sticky;
	bottom: 0;
	z-index: 1000;
}

.continue-box {
	background-color: var(--color-bg-primary) !important;
	border-radius: var(--border-radius-small) !important;
	padding: var(--padding);
}

.dropdown-toggle::after {
	display: none !important;
}

.dropdown-menu {
	color: #67757C;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}

.dropdown-menu li {
	display: list-item !important;
	text-align: -webkit-match-parent !important;
}


[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
	border: 2px solid var(--color-secondary); }

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:after {
	background-color: var(--color-secondary);
	z-index: 0; }

.switch label input[type=checkbox]:checked + .lever {
	background-color: #C3C3C3 !important;
}

.switch label input[type=checkbox]:checked + .lever:after {
	background-color: var(--color-secondary) !important;
}

.switch-reverse label {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 1.5rem;
	gap: 12px;
}

.switch-reverse .switch-text {
	order: -1;
}

.gap-2 {
	gap: 1rem;
}

.gap-3 {
	gap: 1.5rem;
}

.hidden {
	display: none !important;
}

.glass-effect {
	background: rgba(255, 255, 255, 0.52);
	border-radius: 16px;
	padding: 42px;
	box-shadow: 0 4px 30px rgba(120, 120, 140, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 2px solid rgba(255, 255, 255, 0.3);
	margin: 32px;
}

.round-image {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* ======= Primary-button ======= */

.btn-primary {
	font-family: var(--font-family), serif;
	border: var(--border-none) !important;
	color: var(--color-dark);
	background-color: var(--color-primary);
	border-radius: var(--border-radius-full);
	box-shadow: var(--shadow-none) !important;
	font-size: 14px;
	font-weight: 500;
	transition: var(--transition-fast);
	padding: 12px 22px;
	cursor: pointer;
}

.btn-primary:hover {
	background-color: var(--color-dark);
	color: var(--color-white);
}

.btn-primary:active {
	background-color: var(--color-dark);
	color: var(--color-white);
}

.btn-primary:focus {
	background-color: var(--color-dark);
	color: var(--color-white);
}

.btn-primary-disabled {
	background-color: grey !important;
	cursor: not-allowed !important;
}

@media (max-width: 600px) {
	padding: 12px 12px !important;
}

/* ======= multistep ======= */
.booking-steps button {
	all: unset;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
	cursor: pointer;
}

.booking-steps button::before {
	content: attr(data-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background-color: var(--color-grey);
	color: var(--color-white);
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 6px;
	transition: var(--transition-fast);
}

.booking-steps button.multi-steps-active::before {
	background-color: var(--color-secondary);
}

.booking-steps button.multi-steps-complete::before {
	background-color: var(--color-white);
	border: var(--border-sec);
	color: var(--color-secondary);
}

.booking-steps button.multi-steps-incomplete::before {
	background-color: var(--color-grey);
}

/*.booking-steps button span {*/
/*	font-size: 16px;*/
/*	color: #333;*/
/*	text-align: center;*/
/*}*/

/*.booking-steps button:focus-visible::before {*/
/*	outline: 2px solid #000;*/
/*	outline-offset: 2px;*/
/*}*/

.booking-steps button.multi-steps-active::before {
	background-color: var(--color-secondary);
}

.step-line {
	align-self: center;
	height: 2px;
	background-color: var(--color-grey);
	margin-top: -20px;
	flex: 1;
}

.step-line.line-complete {
	background-color: var(--color-secondary);
}

.step-line.line-active {
	background-color: var(--color-secondary);
}

.step {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
}

@media (max-width: 600px) {

	.booking-steps {
		margin: 0 !important;
	}

	.step {
		min-width: 100px;
	}

	.step-line {
		opacity: 0;
	}

	.booking-steps {
		flex-direction: column;
		align-items: stretch;
		font-size: 14px;
	}

	.booking-steps button::before {
		width: 42px;
		height: 42px;
	}
}

@media (max-width: 450px) {


	.step {
		min-width: 75px;
	}

}

/* ======= intern-multistep ======= */
.multi-steps {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.multi-steps > li {
	text-align: center;
	display: table-cell;
	position: relative;
}

.multi-steps > li:before {
	content: '\f00c';
	content: '\2713;';
	content: '\10003';
	content: '\10004';
	content: '\2713';
	display: block;
	margin: 0 auto 4px;
	background-color: #FFF;
	width: 36px;
	height: 36px;
	margin-bottom: 10px;
	line-height: 32px;
	text-align: center;
	font-weight: bold;
	border-width: 2px;
	border-style: solid;
	border-color: var(--color-secondary);
	color: var(--color-secondary);
	border-radius: 50%;
}

.multi-steps > li:after {
	content: '';
	width: 100%;
	border-bottom: 2px solid var(--color-secondary);
	position: absolute;
	top: 16px;
	left: 50%;
	z-index: -1;
}

.multi-steps > li:last-child:after {
	display: none;
}

.multi-steps > li.is-active:before {
	background-color: #FFF;
	border-color: var(--color-secondary);
}

.multi-steps > li.is-active ~ li:before {
	content: '\f00c';
	content: '\2717;';
	content: '\10007';
	content: '\10008';
	content: '\2717';
	font-family: inherit;
	font-weight: 700;
}

.multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
	border-bottom: 2px dashed #EDEDED;
}

.multi-steps > li.is-active ~ li:before {
	border-color: #EDEDED;
	color: #EDEDED;
}

/* ======= Round-button ======= */

.btn-round {
	font-family: var(--font-family), serif;
	width: 82px;
	aspect-ratio: 1 / 1;
	border-radius: var(--border-radius-full);
	border: var(--border-none);
	padding: 0;
	font-size: 16px;
	font-weight: bold;
	background-color: var(--color-primary);
	color: var(--color-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-fast);
	cursor: pointer;
	box-shadow: var(--shadow-none);
}

.btn-round:hover,
.btn-round:focus {
	background-color: var(--color-dark);
	color: var(--color-white);
}

.btn.round.active {
	background-color: var(--color-dark);
	color: var(--color-white);
	outline: none;
}

.btn-round-s {
	font-family: var(--font-family), serif;
	padding: 4px 6px;
	border: var(--border-none);
	border-radius: var(--border-radius-full);
	font-size: 12px;
	background-color: var(--color-primary);
	color: var(--color-dark);
	transition: var(--transition-fast);
	cursor: pointer;
	box-shadow: var(--shadow-none);
}

.btn-round:hover,
.btn-round:focus {
	background-color: var(--color-dark);
	color: var(--color-white);
}

.btn.round.active {
	background-color: var(--color-dark);
	color: var(--color-white);
	outline: none;
}

@media (max-width: 600px) {
	.btn-round {
		width: 62px !important;
		font-size: 14px;
	}

}

/* ======= secondary-button ======= */

.btn-secondary {
	background-color: var(--color-secondary);
	color: var(--color-white);
	border: var(--border-none);
	border-radius: var(--border-radius-full);
	padding: var(--padding-btn);
	transition: var(--transition-fast);
	cursor: pointer;
	box-shadow: var(--shadow-none) !important;
}

.btn-secondary:hover {
	background-color: var(--color-primary);
	color: var(--color-secondary) !important;
}

.btn-secondary:active {
	background-color: var(--color-primary) !important;
	color: var(--color-secondary) !important;
}

.btn-secondary:focus {
	background-color: var(--color-primary) !important;
	color: var(--color-secondary) !important;
}

/* ======= cart-button ======= */

.btn-cart {
	background-color: var(--color-white);
	border-radius: 50px;
	padding: var(--padding-btn);
	border: var(--border-none);
	width: 100%;
	cursor: pointer;
	border: var(--border-light);
	transition: var(--transition-fast);
	box-shadow: var(--shadow-none);
}

.btn-cart:hover {
	border: var(--border-dark);
}

.mini-round-btn {
	height: 44px;
	width: 44px;
	border-radius: var(--border-radius-full);
	background-color: var(--color-white);
	color: var(--color-dark);
	border: var(--border-light);
	transition: var(--transition-fast);
	cursor: pointer;
}

.mini-round-btn:hover {
	border: var(--border-dark);
}

.badge-cart {
	display: inline-block;
	padding: .25em .4em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 100%;
	background-color: var(--color-primary);
}

/* ======= calender-time-slot-button ======= */

.btn-calendar-slot:hover {
	color: var(--color-white);
	background-color: var(--color-dark);
}

.calendar-time-slot-selected {
	color: var(--color-white);
	background-color: var(--color-dark);
}

.calendar-item-today {
	color: var(--color-white);
	background-color: var(--color-secondary);
}

@media (max-width: 540px) {
	.btn-calendar-slot {
		padding-top: 6px;
		padding-bottom: 6px;
		border-radius: .4rem;
		margin: 2px 2px 5px;
		border: none;
		background-color: var(--color-bg-primary);
	}
}

@media (min-width: 541px) {
	.btn-calendar-slot {
		padding-top: 10px;
		padding-bottom: 10px;
		border-radius: .4rem;
		margin: 5px 5px 5px;
		border: none;
		background-color: var(--color-bg-primary);
	}
}

.month-calendar-dates-rental {
	padding: 0 !important;
}

@media (max-width: 600px) {
	.flex-reverse {
		/*flex-direction: column-reverse !important;*/
	}
}

.min-w {
	min-width: 300px;
	padding-bottom: 10px;
}

.calender-top-rental {
	margin-top: 0 !important;
}

@media (max-width: 700px) {
	.available div {
		font-size: 11px !important;
	}

	.weekday-calendar-active-text {
		font-size: 11px !important;
	}

	.month-calendar-week-text {
		font-size: 11px !important;
	}

	.weekday-calendar-today-text {
		font-size: 12px !important;
	}

	.weekday-calendar-red-days-text {
		font-size: 12px !important;

	}

	.weekday-calendar-inactive-text {
		font-size: 12px !important;
	}

	.weekday-calendar-inactive-background {
		font-size: 12px !important;
	}

	.month-calendar-weekday-name {
		font-size: 11px !important;
		font-weight: 400 !important;
	}

	.weekday-calendar-red-days-background {
		font-size: 12px !important;

	}

	.month-calendar-week-heading {
		display: none !important;
	}

	.weekday-calendar-today-background {
		font-size: 12px !important;
		font-weight: 600;
	}

	.min-w {
		min-width: 100px !important;
	}
}

@media (max-width: 400px) {
	.available div {
		font-size: 8px !important;
		padding-top: 6px;
	}

	.weekday-calendar-red-days-text {
		font-size: 10px !important;
	}

	.month-calendar-weekday-name {
		font-size: 10px !important;
	}

	.month-calendar-dates-header {
		padding: 0 !important;
	}
}


/* ======= action-buttons ======= */
.btn-green {
	font-family: var(--font-family), serif;
	border: 2px solid #FFF;
	color: #FFF;
	background-color: #44BB73;
	border-radius: var(--border-radius-full);
	box-shadow: var(--shadow-none) !important;
	font-size: 16px;
	font-weight: 500;
	transition: var(--transition-fast);
	padding: var(--padding-btn);
	cursor: pointer;
}

.btn-green:hover {
	border: 2px solid #44BB73;
	color: #44BB73 !important;
	background-color: #FFF;
}

.btn-red {
	font-family: var(--font-family), serif;
	border: 1px solid #E64856;
	color: #E64856;
	background-color: #FFF;

	border-radius: var(--border-radius-full);
	box-shadow: var(--shadow-none) !important;
	font-size: 14px;
	font-weight: 500;
	transition: var(--transition-fast);
	padding: 12px 22px;
	cursor: pointer;
}

@media (max-width: 600px) {
	.btn-red {
		padding: 12px 12px !important;
	}

	.btn-primary {
		padding: 12px 12px !important;
	}
}

@media (max-width: 400px) {
	.btn-red {
		padding: 8px 10px !important;
		font-size: 12px;
	}

	.btn-primary {
		padding: 8px 10px !important;
		font-size: 12px;
	}

	.btn-red-small {
		padding: 8px 10px !important;
		font-size: 12px !important;
	}

	h2 {
		font-size: 20px;
	}
}

.btn-red:hover {
	border: 1px solid #FFF;
	color: #FFF !important;
	background-color: #E64856 !important;
}

.btn-red:focus {
	border: 2px solid #FFF;
	color: #FFF !important;
	background-color: #E64856 !important;
}

.btn-red-small {
	font-family: var(--font-family), serif;
	border: 1px solid #E64856;
	color: #E64856;
	background-color: #FFF;

	border-radius: var(--border-radius-full);
	box-shadow: var(--shadow-none) !important;
	font-size: 14px;
	font-weight: 500;
	transition: var(--transition-fast);
	padding: 8px 12px;
	cursor: pointer;
}

.btn-red-small:hover {
	border: 1px solid #FFF;
	color: #FFF !important;
	background-color: #E64856 !important;
}

/* ======= icon ======= */

.icon-color {
	color: var(--color-secondary);
}


/* ======= other ======= */

.container-booking {
	max-width: 1200px;
	padding: 0 42px 42px;
	margin: auto;
	gap: 10px;
	display: flex;
	flex-direction: column;
}

@media (max-width: 600px) {
	.container-booking {
		padding: 23px;
	}

}

@media (max-width: 450px) {
	.container-booking {
		padding: 12px;
		gap: 0;
	}

	.chosen-card {
		font-size: 12px;
	}

	.chosen-card h4 {
		font-size: 16px;
	}

	.chosen-card h5 {
		font-size: 14px;
		margin-bottom: 0;
	}
}


/* ======= header ======= */

.booking-header {
	background-image: url("/img/rental/header-booking/bg-pastel.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
	color: #1C2529 !important;
}

.booking-header h1 {
	color: #1C2529 !important;
}

.short-header {
	height: 50px !important;
	overflow: hidden;
	transition: height 0.3s ease;
}

@media (max-width: 600px) {

	.resp-title h1 {
		font-size: 28px;
	}

	.glass-effect {
		padding: 22px;
	}

}

@media (max-width: 450px) {

	.glass-effect {
		padding: 12px;
	}

	.resp-title p {
		font-size: 14px;
	}

	.resp-title h1 {
		font-size: 20px;
	}

}

/* ======= card ======= */
.wrap {
	flex-wrap: wrap;
}

.card {
	border-radius: 10px !important;
	box-shadow: 0 4px 30px rgba(120, 120, 140, 0.1) !important;
	border: 1px solid #F3F3F3 !important;
	background-color: var(--color-white);
	padding: 12px;
}

@media (max-width: 600px) {
	.card {
		font-size: 14px !important;
	}
}

@media (max-width: 400px) {
	.card {
		font-size: 12px !important;
	}
}

.card-booking {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 0.6rem;
	box-shadow: 0 4px 30px rgba(120, 120, 140, 0.1);
	transition: var(--transition-fast) !important;
	background-color: var(--color-white);
	padding: 22px;
	gap: 22px;
	border: 1px solid #F3F3F3 !important;

	flex: 1 1 300px;
}

@media (max-width: 850px) {
	.card-booking {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

.card-booking:hover {
	transform: translateY(-4px);
}

.card-booking .category-box-add:focus {
	outline: 1px dotted #CCC !important;
}

/* === BILD === */
.card-booking .category-box-image {
	border-top-left-radius: 0.6rem !important;
	border-top-right-radius: 0.6rem !important;
	position: relative;
	height: 200px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* === TEXT === */
.card-booking .category-box-text {
	font-size: 14px;
	text-align: center;
	margin-bottom: 0;
}

/* ======= intervaller ======= */

.interval-background {
	background-color: var(--color-bg-primary);
	padding: 10px;
	border-radius: 10px;
}

.interval-time {
	font-size: 18px;
	font-weight: 600;
	color: #1C2529 !important;
}

.interval-price, .interval-duration {
	font-size: 16px;
	font-weight: 400;
}

@media (max-width: 600px) {

	.interval-time {
		font-size: 14px;
	}

	.interval-price, .interval-duration {
		font-size: 12px;
	}
}

/* ======= individual ======= */

.individual-btn {
	border: var(--border-none);
	background-color: var(--color-bg-primary);
	font-weight: 700;
	text-align: left;
	padding: 12px;
	border-radius: 10px;
	min-height: 100px;
	margin-bottom: 12px;
	color: #1C2529 !important;
}

.individual-btn-unselected {
	border: var(--border-none);
	background-color: var(--color-bg-primary);
	font-weight: 700;
	text-align: left;
	padding: 12px;
	border-radius: 10px;
	min-height: 100px;
	margin-bottom: 12px;
	color: #1C2529 !important;
}


.individual-name {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 0;
	color: #193555;
}

.individual-comment {
	font-size: 14px;
	font-weight: 500;
	color: #193555;
}

.img-circle {
	height: 82px;
	width: 82px;
	margin-right: 12px;
}

@media (max-width: 600px) {
	.individual-name {
		font-size: 14px;}

	.individual-comment {
		font-size: 12px;
	}

	.individual-btn-unselected {
		padding: 12px;
		min-height: 95px;
	}

	.individual-btn {
		padding: 12px;
		min-height: 95px;
	}

	.img-circle {
		height: 62px;
		width: 62px;
	}
}

/* ======= responsive ======= */
@media (max-width: 500px) {
	.res-col {
		display: flex;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 20px !important;
	}
}

@media (max-width: 900px) {
	.responsive-col {
		flex-direction: column;
	}

}

/* ======= confirmation ======= */
.bg-confirmation {
	background-image: url("/img/rental/header-booking/bg-plant.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	object-position: center;
	background-attachment: fixed;
	position: relative;
	z-index: 1;
}

.confirmation-heading h1 {
	font-size: 62px;
	line-height: 60px;

}

@media (max-width: 600px) {
	.confirmation-heading h1 {
		font-size: 40px;
		line-height: 60px;
	}
}

/* ======= Inloggning ======= */

.btn-login {
	background-color: #FFF;
	border-radius: 50px;
	cursor: pointer;
	color: #193555;
	padding: 12px 32px;
	transition: .1s linear;
	border: solid 1px #FFF;
}

.btn-login:focus {
	outline: none;
}

.btn-login:hover {
	border: solid 1px #193555;
}

h2 {
	letter-spacing: 1px;
}

.font-weight-semibold {
	font-weight: 600;
}

.box1,
.box2 {
	flex: 1;
}

/*Text, background & button - colors */


.bg-primary-dark-color {
	background-color: #193555 !important;
}

.bg-primary-light-color {
	background-color: #D7E9E4;
}

/*.btn {*/
/*	font-size: revert;*/
/*}*/

/*button:focus {*/
/*	box-shadow: none !important;*/
/*}*/
/*.btn-primary-disabled{*/
/*	cursor: not-allowed;*/
/*	opacity: 0.4 !important;*/
/*}*/

/*.btn-primary-color {*/
/*	background-color: #fff;*/
/*	border: 1px solid #193555 !important;*/
/*	color: #193555;*/
/*	padding: 12px 32px;*/
/*	text-transform: uppercase;*/
/*	min-width: 120px;*/
/*	letter-spacing: 1px;*/
/*	cursor: pointer;*/
/*	transition: 0.2s ease-in;*/
/*	border-radius: 50px !important;*/

/*}*/

/*.btn-secondary-outline-color {*/
/*	border: 1px solid #193555 !important;*/
/*	color: #193555;*/
/*	padding: 12px 32px;*/
/*	text-transform: uppercase;*/
/*	letter-spacing: 1px;*/
/*	min-width: 90px;*/
/*	background-color: transparent;*/
/*	font-weight: normal;*/
/*	transition: 0.2s ease-in;*/
/*	border-radius: 50px !important;*/

/*}*/

/*.btn-danger-outline-color {*/
/*	border: 1px solid #EB6974 !important;*/
/*	color: #EB6974;*/
/*	padding: 12px 32px;*/
/*	text-transform: uppercase;*/
/*	letter-spacing: 1px;*/
/*	min-width: 90px;*/
/*	background-color: transparent;*/
/*	font-weight: normal;*/
/*	transition: 0.2s ease-in;*/
/*	border-radius: 50px !important;*/
/*}*/

/*.btn-secondary-outline-color-small {*/
/*	border: 1px solid #EB6974 !important;*/
/*	color: #EB6974;*/
/*	font-size: 14px;*/
/*	text-transform: uppercase;*/
/*	letter-spacing: 1px;*/
/*	background-color: transparent;*/
/*	font-weight: 500;*/
/*	transition: 0.2s ease-in;*/
/*	border-radius: 50px !important;*/
/*	padding: 10px 22px;*/
/*}*/

/*.btn-secondary-outline-light {*/
/*	border: 2px solid white;*/
/*	background-color: transparent;*/
/*	color: white;*/
/*	text-transform: uppercase;*/
/*	letter-spacing: 1px;*/
/*	padding: 8px 16px;*/
/*	transition: 0.2s ease-in;*/
/*}*/

/*.btn-tertiary {*/
/*	font-weight: 500;*/
/*	color: #193555;*/
/*	text-decoration: underline;*/
/*	cursor: pointer;*/
/*	transition: 0.2s ease-in;*/
/*}*/

.addon-btns input[type="checkbox"] {
	display: none;
}

.addon-btns input[type="checkbox"] {
	display: none;
}

.addon-btns [type="checkbox"] ~ span {
	border: 2px solid var(--color-secondary) !important;
	color: var(--color-secondary);
	padding: 8px 16px;
	font-size: 12px;
	border-radius: 0.25rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	width: 120px;
	text-align: center;
	background-color: transparent;
	cursor: pointer;
	font-weight: normal;

}

.addon-btns [type="checkbox"] ~ .add {
	display: none;
}

.addon-btns [type="checkbox"] ~ .added {
	display: none;
}

.addon-btns [type="checkbox"]:not(:checked) ~ .add {
	display: inline-block;
}

.addon-btns [type="checkbox"]:checked ~ .added {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary) !important;
	color: #FFF;
	display: inline-block;
}

.filter-btn {
	border-radius: 60px;
	padding: 7px 18px;
	color: #343A40;
	font-weight: 400;
	background-color: transparent;
	background-image: none;
	border: 1px solid #343A40;
}

.cursor {
	cursor: pointer;
}

.sticky-top {
	top: 95px;
	z-index: 1;
}

.card-row {
	flex-direction: row !important;
}

/*
	.card .card-img-width-30 {
		width: 30%:
	}
	*/

.card-img-top {
	width: 100%;
	object-fit: cover;
	object-position: center;
}

.card-img-left {
	width: 100%;
	object-fit: cover;
	object-position: center;
}

.rounded-lg-top {
	border-top-right-radius: 0.6rem;
	border-top-left-radius: 0.6rem;
}

.rounded-left-lg {
	border-bottom-left-radius: 0.6rem;
	border-top-left-radius: 0.6rem;
}

hr {
	margin: 0px !important;
}

.border-lighter {
	border-color: rgba(255, 255, 255, 0.45) !important;
}

/*.prevent-select {*/
/*	-webkit-user-select: none; !* Safari *!*/
/*	-ms-user-select: none; !* IE 10 and IE 11 *!*/
/*	user-select: none; !* Standard syntax *!*/
/*}*/

.form-control-focus:focus, .form-control-focus:focus {
	box-shadow: none !important;
	border-color: var(--color-secondary) !important;
	outline: 2px solid var(--color-secondary) !important;
}

.fad:before {
	color: var(--color-secondary);
}

.fad.fa-danger:before {
	color: #EB6974 !important;
}

.fad:after {
	color: var(--color-secondary);
}

.fad.fa-danger:after {
	color: #EB6974 !important;
}

.dot:before {
	content: "\A";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #193555;
	margin-right: 5px;
	display: inline-block;
}

.booking-vertical-bar:after {
	content: "\2758";
	font-size: 24px;
	color: var(--color-secondary);
	font-weight: 500;
	margin-right: 3px;
	opacity: 25%;
}

legend {
	letter-spacing: 1px;
	font-size: 16px;
	text-transform: uppercase;
}

/* NAV LINK */

.nav-link-desktop {
	font-size: 18px;
	font-weight: normal;
	color: rgba(0, 0, 0, 0.7) !important;
	display: inline-block;
	position: relative;
}

.active > .nav-link-desktop {
	color: #193555 !important;
}

.nav-link-desktop:hover {
	color: #193555 !important;
}

.nav-link-desktop:after {
	background: none repeat scroll 0 0 transparent;
	bottom: 0;
	content: "";
	display: block;
	height: 2px;
	left: 50%;
	position: absolute;
	background: #193555;
	transition: width 0.3s ease 0s, left 0.3s ease 0s;
	width: 0;
}

.nav-link-desktop:hover:after {
	width: 100%;
	left: 0;
}

.logo {
	max-height: 50px;
}

.avatar-img {
	width: 65px;
}

.bg-container {
	background-image: linear-gradient(180deg, rgb(0, 90, 160) 50%, rgb(0, 90, 160, .75));
}

.bg-booking-gray-box {
	background-image: linear-gradient(180deg, #E5E7EB, #FFF 30rem);
	width: 100%;
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}

/* Background image for this element set in footer_view since it is dynamic */

.bg-room-booking {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	object-position: center;
	background-size: cover;
	/* background-attachment: fixed; */
	position: relative;
	z-index: 1;
	padding-top: 5rem !important;
	padding-bottom: 5rem !important;
}


.bg-services {
	background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("/img/rental/booking_massage.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	object-position: center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	z-index: 1;
}

.bg-rental {
	background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("/img/rental/rental_trailer.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	object-position: center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	z-index: 1;
}

.booking-form {
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.booking-form-icon {
	font-size: 2rem;
}

.modal {
	z-index: 3000 !important;
}

.modal-header {
	padding: 10px 15px 5px 0px !important;
}

.modal-body, .modal-footer {
	padding-top: 0px !important;
}

.btn-plus, .btn-minus {
	font-size: 28px;
	color: #67757C;
}

.btn-plus-muted, .btn-minus-muted {
	font-size: 28px;
	color: rgba(103, 117, 124, 0.5);
}


.form-group label {
	margin-bottom: 0.2rem;
	font-size: 13px;
	color: rgba(103, 117, 124, 0.65);
}

.section-heading-bigger {
	font-size: 20px;
	color: #193555;
	font-weight: 500;
}

.current-product-img {
	width: 150px;
	height: auto;
}

.services-category-img {
	width: 100px;
	height: auto;
}

.optionals-img-width {
	width: 200px;
	height: 200px;
}

.room-img-width {
	width: 300px;
	height: 300px;
}

.overview-img-width {
	width: 300px;
	height: 300px;
}

.modal-carousel-width {
	width: 500px;
	object-fit: cover;
}

.modal-img-width {
	width: 500px;
	height: 500px;
	object-fit: cover;
}

.carousel-item img {
	width: 500px;
	height: 500px;
	object-fit: cover;
	object-position: 50% 50%;
}

.services-person-box {
	border: 1px solid transparent;
}

.services-person-box-active {
	background-color: #EEF5F9;
	border: 1px solid #193555;
}


.business-type .customer-company {
	display: none;
}

.business-type .customer-private {
	display: none;
}

.business-type input[value="company"]:checked ~ .customer-company {
	display: block;
}

.business-type input[value="private"]:checked ~ .customer-private {
	display: block;
}

.fa-chevron-circle-up:before {
	color: #193555;
}

.fa-chevron-circle-down:before {
	color: #193555;
}

/*a[aria-expanded=false] .fa-chevron-circle-up, a[aria-expanded=false] .fa-chevron-up {*/
/*	display: none;*/
/*}*/

/*a[aria-expanded=true] .fa-chevron-circle-down, a[aria-expanded=true] .fa-chevron-down {*/
/*	display: none;*/
/*}*/

.multi-steps {
	display: table;
	table-layout: fixed;
	width: 100%;
}

li {
	text-align: center;
	display: table-cell;
	position: relative;
	z-index: 0;
}

.dropdown-menu li {
	display: list-item !important;
	text-align: -webkit-match-parent !important;
}

/*Multi steps*/
.multi-steps .step-icon-package:before {
	font-family: "Font Awesome 6 Pro";
	content: '\f467';

}

.multi-steps .step-icon-room:before {
	font-family: "Font Awesome 6 Pro";
	content: '\f236';

}

.multi-steps .step-icon-extra:before {
	font-family: "Font Awesome 6 Pro";
	content: '\f067';

}

.multi-steps .step-icon-pay:before {
	font-family: "Font Awesome 6 Pro";
	content: '\f217';

}

.multi-steps .step-icon-service:before {
	font-family: "Font Awesome 6 Pro";
	content: '\f00c';

}

.multi-steps .step-icon-person:before {
	font-family: "Font Awesome 6 Pro";
	content: '\f007';

}

.multi-steps .step-icon-time:before {
	font-family: "Font Awesome 6 Pro";
	content: '\f073';

}

.multi-steps .step-icon-category:before {
	font-family: "Font Awesome 6 Pro";
	content: '\f5fd';
}

.multi-steps .step-icon-service:before {
	font-family: "Font Awesome 6 Pro";
	content: '\f4fd';
}

.multi-steps .step-icon-provider:before {
	font-family: "Font Awesome 6 Pro";
	content: '\f0c0';
}

/*.multi-steps li:before {*/
/*	display: block;*/
/*	margin: 0 auto 4px;*/
/*	width: 46px;*/
/*	height: 46px;*/
/*	font-size: 18px;*/
/*	line-height: 46px;*/
/*	text-align: center;*/
/*	font-weight: bold;*/
/*	border: 1px solid #146acc;*/
/*	border-radius: 50%;*/
/*}*/

/*.multi-steps .multi-steps-complete:before {*/
/*	background-color: #146acc;*/
/*	border: 1px solid #146acc;*/
/*	color: #ffffff;*/

/*}*/

/*.multi-steps .multi-steps-active:before {*/
/*	background-color: #ffffff;*/
/*	border: 1px solid #146acc;*/
/*	color: #ffffff;*/

/*}*/

/*.multi-steps .multi-steps-incomplete:before {*/
/*	border: 1px solid #146acc;*/
/*	background-color: #ffffff;*/
/*	color: #146acc;*/
/*}*/

/*.multi-steps .multi-steps-incomplete:before {*/
/*	border: 1px solid #ffffff;*/
/*	background-color: #ffffff;*/
/*	color: #fff;*/
/*}*/

/*.multi-steps li:after {*/
/*	content: '';*/
/*	height: 2px;*/
/*	width: 100%;*/
/*	background-color: #146acc;*/
/*	position: absolute;*/
/*	top: 23px;*/
/*	left: 50%;*/
/*	z-index: -1;*/
/*}*/

/*.multi-steps li:last-child:after {*/
/*	display: none;*/
/*}*/

/*.multi-steps .multi-steps-incomplete:after {*/
/*	background-color: #e6e7ee;*/
/*}*/

/*.multi-steps .multi-steps-active:after {*/
/*	background-color: #e6e7ee;*/
/*}*/

input[type=radio], input[type=checkbox] {
	position: relative;
	appearance: none;
	cursor: pointer;
	width: 1em;
	margin: 0;
	color: inherit;
	outline: none;
	font-family: 'Font Awesome 6 Pro';
	transition: 300ms ease-out;
}

input[name=checkbox-small] {
	font-size: 1.2rem !important;
}

input[name=checkbox-md] {
	font-size: 1.5rem !important;
}

input[name=radio-small] {
	font-size: 1.2rem !important;
}

input[name=radio-big] {
	font-size: 2rem !important;
}

input[type=checkbox]::after, input[type=radio]::after {
	content: '\f111';
	color: #193555;
	display: inline-block;
	text-align: center;
	width: 1em;
}

input[type=checkbox]:checked::after, input[type=radio]:checked::after {
	font-weight: 900;
}

input[type=checkbox]:active, input[type=radio]:active {
	transform: scale(.6);
}

input[type=checkbox]:checked::after, input[type=radio]:checked::after {
	content: '\f058';
	color: #193555;
}

[type="checkbox"]:not(:checked), [type="checkbox"]:checked, [type="radio"]:not(:checked), [type="radio"]:checked {
	position: unset;
	left: 0;
	opacity: unset;

}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
	outline: none;
	box-shadow: none;
}

.btn .badge {
	top: -5px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	font-size: 12px;
	padding: 0px !important;
	border-radius: 24px;
	text-align: center;
}

.animated-icon {
	width: 30px;
	height: 20px;
	position: relative;
	margin: 0px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

.animated-icon span {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.animated-icon span {
	background: #193555;
}

.animated-icon span:nth-child(1) {
	top: 0px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

.animated-icon span:nth-child(2) {
	top: 10px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

.animated-icon span:nth-child(3) {
	top: 20px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

.animated-icon.open span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 0px;
	left: 8px;
}

.animated-icon.open span:nth-child(2) {
	width: 0%;
	opacity: 0;
}

.animated-icon.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 21px;
	left: 8px;
}

.nav-meny {
	position: sticky !important;
	top: 0;
	z-index: 10;
	background-color: #FFF !important;
	box-shadow: rgb(0 0 0 / 0%) 0px 15px 25px, rgb(0 0 0 / 5%) 0px 5px 10px;
}

/*noUISlider styling*/
.noUi-target {
	border: none;
	box-shadow: none;
	background-color: #DBDBDB;
	border-radius: 11px;
}

.noUi-connect {
	background: rgba(var(--color-secondary), 0.66);
}

.noUi-horizontal .noUi-handle {
	width: 28px;
	height: 28px;
	border-radius: 34px;
	background-color: var(--color-secondary);
	border: none;
	box-shadow: none;
	right: -10px;
	top: -8px;
}

.noUi-handle:after, .noUi-handle:before {
	display: none;
}

#drag-values {
	margin-top: 10px;
	font-size: 18px;
	font-weight: 500;
}

.noUi-horizontal {
	height: 12px;
}

/*.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {*/
/*	background-image: linear-gradient(rgb(25, 53, 85), rgb(25, 53, 85)), linear-gradient(#D9D9D9, #D9D9D9);*/
/*}*/


/*.has-error label,*/
/*.has-error .col-form-label,*/
/*.has-error .custom-control,*/
/*.has-error .form-check-label,*/
/*.has-error .form-control-feedback,*/
/*.has-error .form-control-label {*/
/*	color: #FC4B6C; }*/

/*.has-error .form-control-danger {*/
/*	background-image: url(/assets/images/icon/danger.svg); }*/

/*.has-error .form-control, .has-error .form-control:focus, .has-error.form-control, .has-error.form-control:focus {*/
/*	background-image: -webkit-gradient(linear, left top, left bottom, from(#FC4B6C), to(#FC4B6C)), -webkit-gradient(linear, left top, left bottom, from(#FC4B6C), to(#FC4B6C));*/
/*}*/

/*.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {*/
/*	background: var(--color-secondary);*/
/*	border-color: var(--color-secondary);*/
/*}*/

/*.form-control:disabled, .form-control[readonly] {*/
/*	opacity: 1 !important;*/
/*	font-size: 16px;*/
/*	font-weight: 300;*/
/*}*/

.confirmation-box {
	background: rgb(255 255 255 / 80%);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.next-step-card-footer {
	display: block;
	border: none;
	color: #FFF;
	background-color: #4D39D0;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.next-step-card-footer:hover {
	background-color: #4D39D0;
	-webkit-transition: background-color 300ms linear;
	-ms-transition: background-color 300ms linear;
	transition: background-color 300ms linear;
}


@media (max-width: 991.98px) {
	/*
	.card .card-img-width-30 {
		width: 100%;
	}*/
	.rounded-lg-top {
		border-radius: 0.6rem 0.6rem 0rem 0rem !important;
	}

	.confirmation-heading {
		font-size: 40px;
		line-height: 60px;
	}

	.room-img-width, .overview-img-width {
		width: 200px;
		height: 200px;
	}

	.bg-room-booking {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}
}

@media (max-width: 767.98px) {

	.container-fluid {
		padding: 0px 0px 0px 0px !important;
	}

	h3 {
		font-size: 20px;
	}

	.card-m-0 {
		margin: 0px !important;
	}

	.price-text {
		font-size: 12px;
	}

	.modal-body, .modal-footer {
		padding: 15px !important;
	}

	.border-radius {
		border-bottom-left-radius: 8px;
	}

	.border-radius-0 {
		border-radius: 0px !important;
	}

	.range-slider {
		width: 100% !important;
	}

	#drag-values {
		text-align: center;
	}

	.card-row {
		flex-direction: column !important;
	}

	.room-img-width, .overview-img-width {
		width: 250px;
		height: 250px;
	}
}

@media (max-width: 575.98px) {
	.services-category-img {
		width: 65px;
	}

	.multi-steps {
		font-size: 14px;
	}

	.modal-img-width {
		width: 300px;
		height: 300px;
		object-fit: cover;
	}

	.modal-carousel-width {
		width: 300px;
	}

	.carousel-item img {
		width: 300px;
		height: 300px;
		object-fit: cover;
		object-position: 50% 50%;
	}

	.btn-round {
		width: 62px;
		height: 62px;
	}
}

@media (hover: hover) {
	.btn-primary-color:hover {
		border: 2px solid #193555;
		background-color: #193555;
		color: #FFF !important;
		transition: 0.2s ease-out;
	}

	.btn-secondary-outline-light:hover {
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		transition: 0.2s ease-out;
	}

	.btn-secondary-outline-color:hover, .btn-secondary-outline-color-small:hover {
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		background-color: #193555;
		border-color: #193555 !important;
		color: #FFF;
		transition: 0.2s ease-out;
	}

	.btn-secondary-outline-color-small:hover {
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		background-color: #EB6974;
		border-color: #EB6974 !important;
		color: #FFF;
		transition: 0.2s ease-out;
	}

	.btn-danger-outline-color:hover {
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		background-color: #EB6974;
		border-color: #EB6974 !important;
		color: #FFF;
		transition: 0.2s ease-out;
	}

	.btn-tertiary:hover {
		color: #000 !important;
		text-decoration: underline;
		transition: 0.2s ease-out;
	}

	.addon-btns [type="checkbox"] ~ span:hover {
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		background-color: var(--color-secondary);
		border-color: var(--color-secondary) !important;
		color: #FFF;
	}

	.filter-btn:hover {
		background-color: #343A40;
		color: #FFF;
	}

	.btn-light-danger:hover {
		background-color: #EB6974;
		color: #FFF !important;
	}

	.btn-plus:hover, .btn-minus:hover {

	}

	.services-person-box:hover {
		background-color: #EEF5F9;
		border: 1px solid #3FA473;
	}

	.services-container:hover {
		background-color: rgba(238, 245, 249, 0.7);
	}

	a:hover {
		color: #193555;
		text-decoration: none !important;
	}

}
