:root {
  --black: #1D1E20;
	--color-primary: #002653;
  --primary: #002653;
	--primary-button: #012F63;
	--primary-button-hover: #10447C;
  --secondary: #002653;
}
body{
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 25px;
	color: var(--color-primary);
	background: #fff;
}
h1, h2, h3, h4{
	font-family: inherit;
  font-weight: 700 !important;
	margin-bottom: 15px;
}
h1{ font-size: 2.25em; line-height: 1.4em;}
h2{ font-size: 2.2em; line-height: 1.4em;}
h3{ font-size: 1.58em; line-height: 1.3em;}
h4{ font-size: 1.25em;}

.bg-black{background-color: var(--black);}
.bg-white{background-color: #fff;}
.bg-blue{background-color: var(--primary);}
.bg-hover-red:hover{background-color: #c82333 !important;}
.bg-lightblue{background-color: #E8F0F4;}

.color-primary{color: var(--color-primary);}
.color-gray, .color-grey{color:#CECECE;}
.color-yellow{color: #FCB002;}
.color-hover-red:hover{color: #c82333 !important;}
.color-green{color: #64a70b;}
.color-red{color: var(--primary-button);}

.font-size-lg{font-size: 1.6em;line-height: 1.4em;}
.font-size-sm{font-size: .87em;line-height: 1.7em;}

underline{text-decoration: underline;}
.text-line-through{text-decoration: line-through;}

img{max-width: 100%;}

a, a:hover{color: inherit; text-decoration: none; transition: all 0.2s ease 0s;}
a, a:hover, a:active, a:focus, button:focus, button:active{color: inherit; text-decoration: none;outline: 0 !important;}
a, a:hover, a:active, a:focus, button:focus:not(.mobile-toggler), button:active:not(.mobile-toggler){box-shadow:none !important;}

strong{font-weight: 700;}

.btn, .wp-block-button__link{
	padding: 1.06rem 1.25rem;
	background: transparent;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .03em;
	font-size: .82em;
	border: 0;
  border-radius: .25rem;
}

.btn.btn-primary, .btn.btn-blue, .wp-block-button__link{
	color: #fff;
	background-color: var(--primary-button);
}
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus, .btn.btn-blue:hover, .btn.btn-blue:active, .btn.btn-blue:focus, .wp-block-button__link:hover, .wp-block-button__link:active, .wp-block-button__link:focus{
	background-color: var(--primary-button-hover) !important;
	color: #fff !important;
}
.btn.btn-white{
	color: var(--color-primary);
	background-color: #fff;
}
.btn.btn-white:hover, .btn.btn-white:active, .btn.btn-white:focus{
	background-color: #e8f0f4 !important;
	color: var(--color-primary) !important;
}
.btn-sm{
	padding: .3rem .7rem;
	font-weight: 700;
}

.drop-shadow{
	box-shadow: 0 3px 6px rgba(0,0,0,.1);
}

hr{border-top: 2px solid var(--black);}
hr.border-light-blue{border-color: #E8F0F4;}

.distance-sm{	height: 2em !important; }
.distance-md{	height: 5em !important; }
.distance-lg{	height: 10em !important; }

.max-width{ max-width: 600px;}

.alert{
  border: 0 !important;
	padding: .85rem 1.4rem .65rem;
}
.alert.alert-parking, .alert.alert-info{
	background-color: #E8F0F4;
	color: var(--color-primary);
}
.alert.alert-error{
	background-color: #F4E8E8;
	color: var(--color-primary);
}
.alert a{font-weight: 800;}
.close {
    color: #10447C;
    opacity: .5;
		font-size: 1.2rem;
}

@media only screen and (min-width: 991px) {
	.shadow-md-none{
		box-shadow: none !important;
	}
}

.hidden{display: none;}
#loader{
	position: absolute;
  z-index: 99;
  height: 260px;
  background: white;
  width: 100%;
}
#loader svg{max-width: 100px;}

.list-mb-1 > li{margin-bottom: .25rem!important;}
.list-mb-2 > li{margin-bottom: .5rem!important;}
.list-mb-3 > li{margin-bottom: 1rem!important;}

/*------------------------------------*\
	Header & main menu
\*------------------------------------*/
header{
	box-shadow: none;
	transition: box-shadow .15s ease-in-out;
}
header .sticked-brand{
	width: 150px;
	position: absolute;
	transition: opacity .15s ease-in-out;
	opacity: 0;
}
header.active{ box-shadow: 0 3px 6px rgba(0,0,0,.1); z-index: 1021;}
header.active .sticked-brand{opacity: 1;}

.navbar-brand img{
	width: 250px;
	height: 70px;
}

@media only screen and (max-width: 767px) {
	.navbar-brand img{
		/*width: 270px;*/
		/*height: 25px;*/
	}
}

#navigation li{
	line-height: 0;
   text-align: center;
}
#navigation li:last-of-type{border: 0;}
#navigation li > a, #lang-switcher button {
	font-size: .8em;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1.4rem .9rem;
	line-height: 1.3em;
	transition: all .15s ease;
	display: block;
	position: relative;
	letter-spacing: .02em;
}
#navigation li > a:hover, #navigation li:not([class^="jump"]).current_page_item > a, #lang-switcher button:hover, #lang-switcher .dropdown-menu a:hover{
	background: var(--primary);
	color: #fff;
}

	/* Lang Switcher */
	#lang-switcher button{
		border-radius: 0;
		 padding-left: 1rem;
    padding-right: 1rem;
	}
	#lang-switcher button:after{display: none;}
	#lang-switcher .dropdown-menu{
		min-width: 0;
		border-radius: 0;
		border: 0;
		padding: 0;
		box-shadow: 0 3px 6px rgba(0,0,0,.1);
    width: 100%;
    text-align: center;
	}
	#lang-switcher .dropdown-menu a{
		font-size: .8em;
		font-weight: 700;
		text-transform: uppercase;
		padding: 1.4rem 1rem;
		line-height: 1.3em;
	}


@media only screen and (max-width: 991px) {
	#navigation > ul{
		padding-top:2rem;
		padding-bottom:2rem;
		overflow-y: auto;
	}
	#navigation li{
		border: 0;
		max-width: inherit;
	}
	#navigation li > a{
		font-size: inherit;
		padding-top:1rem;
		padding-bottom:1rem;
	}
}

.navbar-toggler {
  padding: 0 .4rem;
  font-size: 2rem;
  line-height: 0;
	color: var(--color-primary);
}

#bg-img > div, #bg-img{
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	width: 100%;
	position: fixed;
	z-index: -1;
	top: 0;
}
#bg-img{
	background: transparent no-repeat center top;
	-webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
	z-index: -2;
}
#bg-img > div{
	background-color: var(--primary);
	opacity: .32;
}

.mobile-toggler{
	position: fixed;
	background: var(--primary);
	bottom: 0;
	left: 0;
	z-index: 99;
	border-radius: 50%;
	padding: 0;
	width: 65px;
	height: 65px;
	color: #fff !important;
	border: 2px solid #fff;
}
.mobile-toggler.navbar-toggler{
	left: inherit;
	right: 0;
}
.mobile-toggler > i{
	font-size: 32px;
}


/*------------------------------------*\
	Google map
\*------------------------------------*/
#hitta-hit .embed-responsive{
	height: 500px;
}


/*------------------------------------*\
	Forms
\*------------------------------------*/
.form-control{
	background: #E8F0F4 !important;
	color: var(--color-primary) !important;
	border: 0;
	padding: .85rem 1.4rem .65rem;
	height: calc(2.55em + .75rem);
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active  {
    -webkit-box-shadow: none !important;
		-webkit-text-fill-color: var(--color-primary) !important;
}
.form-control::placeholder {
  color: #98B4C4;
  opacity: 1;
}
.form-control:-ms-input-placeholder, .form-control::-ms-input-placeholder {
  color:#98B4C4;
}
.form-control:focus{
	border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
	outline: 0 !important;
}
.form-control:disabled,.datetime > .disabled{
	color: #9dadbf !important;
	cursor: not-allowed;
}
label{
	margin-bottom: .2rem;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 13px;
	font-size: .825em;
	line-height: 1;
}

	/* Selectbox */

	select.form-control{
		vertical-align: middle;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
		background-position: right 1.25rem center !important;
		background-size: 8px 10px !important;
		background-repeat: no-repeat !important;
		cursor: pointer;
	}

	/* Checkboxes */

	label.checkbox{
		display: block;
	  position: relative;
	  padding-left: calc(2.55em + 1.5rem);
	  margin-bottom: 12px;
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}
	label.checkbox > p{
		font-size: .87rem;
		font-weight: 400;
		margin-top: .2em;
		text-transform: none;
	}
	label.checkbox input{
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}
	label.checkbox .checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
		height: calc(2.55em + .75rem);
		width: calc(2.55em + .75rem);
	  background-color: #e8f0f4;
		border-radius: .25rem;
	}
	label.checkbox .checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}
	label.checkbox input:checked ~ .checkmark:after {display: block;}
	label.checkbox .checkmark:after {
		left: 16px;
   top: 7px;
   width: 13px;
   height: 26px;
   border: solid var(--primary);
   border-width: 0 5px 5px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
   border-radius: 0px;
	}

	/* Radio-buttons bootstrap */
	.custom-control {
    min-height: 2rem;
    padding-left: 2.5rem;
	}
	.custom-control .custom-control-label{
		line-height: 2;
	}
	.custom-control .custom-control-label, .custom-control .custom-control-label::before, .custom-radio .custom-control-label::after{
	cursor: pointer;
	}
	.custom-control .custom-control-label::before{
		background: #E8F0F4 !important;
		border: 0;
		width: 2rem;
    height: 2rem;
    left: -2.5rem;
		box-shadow: none !important;
		top: 0;
	}
	.custom-control .custom-control-label::after{
		border-radius: 50%;
    width: 2rem;
    height: 2rem;
    left: -2.5rem;
    /* margin-top: .5rem; */
    color: var(--color-primary);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1;
    text-align: center;
    padding-top: 7px;
		top: 0;
	}

	.custom-control .custom-control-input:checked~.custom-control-label::after{
		background: none;
		content: "\f00c";

	}


/*------------------------------------*\
	Booking form start / datetime / flatpickr
\*------------------------------------*/

body.home #booking-start-container{
    top: 61px;
		box-shadow: none;
		transition: all .15s ease-in-out;
}
body.home #booking-start-container *{ transition: all .15s ease-in-out; }
body.home #booking-start-container.active{ box-shadow: 0 3px 6px rgba(0,0,0,.1); }
body.home #booking-start-container.active > div{
	padding-top: .5rem !important;
	padding-bottom: .5rem !important;
}
body.home #booking-start-container.active form label{
	opacity: 0;
	height: 0;
	display: none;
}
body.home #booking-start-container.active  form .datetime{
	padding: .6rem 0 .5rem 1.4rem;
	height: inherit;
}
body.home #booking-start-container.active  form button[type="submit"]{
	padding-top: .75rem;
	padding-bottom: .75rem;
}
form .datetime{
	background: red;
	display: inline-block;
	position: relative;
	padding: .95rem 0 .6rem 1.4rem;
	width: 100%;
}
form .datetime > *:focus{
	border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
	outline: 0 !important;
}
form .datetime > *{
	border: 0;
	background: #E8F0F4;
	color: var(--color-primary) !important;
	position: relative;
}
form .datetime > input:first-of-type{
	border-right: 2px solid var(--color-primary);
	width: 50%;
}
form .datetime > select, form .datetime > input[type="time"]{padding-left: 15px;}
form .datetime *::-webkit-inner-spin-button, form .datetime *::-webkit-clear-button{
	-webkit-appearance: none;
	display: none;
}
form .datetime > select{
	-moz-appearance: none;
	-webkit-appearance: none;
}
form .datetime > select > option{
	background: #fff;
}
form .datetime input[type="date"]::-webkit-calendar-picker-indicator{
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

	/*  Custom input date (flatpickr)  */

	.flatpickr-calendar select,.flatpickr-calendar input, .flatpickr-weekday{
		color: var(--color-primary) !important;
	}
	.flatpickr-day.today:hover, .flatpickr-day.today:focus{
		background: #e8f0f4;
		border-color: #e8f0f4;
		color: var(--color-primary);
	}
	.flatpickr-day.selected:hover{
		background: #10447C !important;
		border-color: #10447C;
		color: #fff;
	}
	.flatpickr-day.today {border-color: #b5c3d0;}
	.flatpickr-day.selected{
		background: var(--primary);
		border-color: var(--primary);
	}
	.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange,
	.flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover,
	.flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus,
	.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .numInputWrapper:hover{
		background: #e8f0f4;
		border-color: #e8f0f4;
	}
	.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
	    fill: var(--primary);
	}


/*------------------------------------*\
	Booking form & Change form & Deleteform
\*------------------------------------*/

#booking-form{
	min-height: 500px;
	transition: .2s ease-in min-height;
}
.form-text{
	font-size: .85em;
  line-height: 1.5em;
}
.form-text strong{
	display: block;
	margin-top: 1.7em;
	margin-bottom: .3rem;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1;
}
.form-text table tr{vertical-align: top;}

button[type="submit"]{
	transition: all .15s ease-in-out;
	background-position: right;
}
button.loading[type="submit"]{
	background-image: url(../img/loader.svg);
  background-repeat: no-repeat;
  padding-right: 55px;
}

#booking-submit-alert, #booking-delete-alert{
	display: none;
}
#booking-form input.invalid, #booking-form select.invalid,
#booking-change-form input.invalid, #booking-change-form select.invalid{
	background-color: #F4E8E8 !important;
}
#booking-form #credentials input[name="park-car-registration"]{
	text-transform: uppercase;
}

#booking-form #price.sticky-top, #booking-change-form #price.sticky-top{
	top: 61px;
	box-shadow: 0 3px 6px rgba(0,0,0,.1);
	z-index: 20;
}

#booking-form hr{
	border-color: #e8f0f4;
}


/*------------------------------------*\
	Pricerange slider
\*------------------------------------*/
#price.changed{
	animation: priceflash .15s linear ;
}
@keyframes priceflash {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}


#price .rangeIndicator{
	height: 30px;
  width: 30px;
  background: var(--secondary);
  color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  margin-top: -4px;
  left: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85em;
}
#price .rangeIndicator:after{
	content: "Dygn";
  display: block;
  position: absolute;
  top: 31px;
  color: var(--secondary);
  font-weight: 800;
  font-size: 1.2em;
}
#price  input[type=range]::-webkit-slider-thumb{
	height: 30px;
	width: 30px;
	margin-top: -10px;
	background: var(--primary);
	opacity: 0;
}
#price  input[type=range]::-webkit-slider-runnable-track {
  height: 9px;
  background: #D8E0E4;
	border-radius: 5px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	#price .rangeIndicator{display: none;}
}
#price .counters{
	font-weight: 700;
	font-size: 1.1em;
}
/* #price .counters > div{
	opacity: .5;
} */
#price .counters > div > div{
	font-size: 1.7em;
  margin-top: .4em;
}
/* #price .counters .price-total{
	transform: scale(1.2);
	opacity: 1;
} */
#price .counters .price-regular{
	text-decoration: line-through;
}
/* Rows */
#price .counters.counter-rows{
	font-size: 1.3em;
	line-height: .8em;
	max-width: 350px;
  margin: 0 auto;
}
#price .counters.counter-rows > div{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#price .counters.counter-rows .price-total{
	transform: none;
}
#price .counters.counter-rows > div > div{
  font-size: 1em;
	margin-top: 0;
}

/*------------------------------------*\
	Tables
\*------------------------------------*/
.table-striped td, .table-striped th {
  border: 0;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #E8F0F4;
}
.price-table{
	font-weight: 700;
	color: var(--color-primary);
}
.price-table thead th{border-bottom: 0;}
.price-table thead tr{
	background-color: var(--primary);
	color: #fff;
}
.price-table tbody tr{
	border: 1px solid #00265321;
	border-top: 0;
	background: #fff !important;
}
.price-table tbody tr > td:first-of-type{
	background: #e8f0f4;
}



.start .price-table{
	font-size: 1rem;
  line-height: 1.4rem;
}




/*------------------------------------*\
	Firstpage
\*------------------------------------*/
#start-text{
	color:  #fff;
	min-height: 400px;
	font-size: 1.5rem;
  line-height: 1.4em;
	font-weight: 700;
}
#start-text h1{font-size: 3.7rem;}
#start-text strong{font-size: 1.5em;}
.firstpage-list{
	margin: 0 auto;
  max-width: 520px;
  font-size: 1.2em;
  line-height: 1.5em;
}
.firstpage-list > li{
	margin-bottom: 1rem;
	list-style: none;
}
.firstpage-list > li:before {
  content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
  float: left;
  margin-left: -2em;
  color: var(--secondary);
	font-size: 1.3em;
}

/*------------------------------------*\
	Review columns
\*------------------------------------*/
#reviews-columns .rating > .fa-star{margin-right: 3px;}
#reviews-columns .rating > .fa-star:last-of-type{margin-right: 0;}
#review-stars .star{
	font-size: 3rem;
}


/*------------------------------------*\
	Pages
\*------------------------------------*/
ul.list li{	margin-bottom: .5rem!important; }


/*------------------------------------*\
	Frågor & svar
\*------------------------------------*/
#fragor p:empty{display: none;}
#fragor .card{border: 0;}
#fragor .card-header{margin-bottom: 0; border-bottom-color: #fff;}
#fragor .card-header{background-color: #E8F0F4;}
#fragor .card-header > a{cursor: pointer;}
#fragor .card-body{font-size: .9em;line-height: 2em;}
#fragor .card-body a{font-weight: 700;}

#fragor .card-header < a.collapsed{background-color: var(--primary);}

/*------------------------------------*\
	Shortcodes
\*------------------------------------*/
.apps-wrap img{
	width: 70px;
}
.l-columns-2{columns: 2;}
.l-columns-3{columns: 3;}
.l-columns-4{columns: 4;}
.l-columns-5{columns: 5;}

.prislapp{
	position: relative;
  color: #fff;
  text-align: center;
  background: #ce1b1b;
  -webkit-animation: main 250ms;
  -moz-animation: main 250ms;
  -ms-animation: main 250ms;
  animation: main 250ms;
  line-height: 1;
  font-size: 4rem;
	display: inline-block;
	padding: .8rem 2rem;
}
.prislapp .after{	font-size: .4em; }

@-webkit-keyframes main {
  0% { -webkit-transform: scaleX(0); }
  100% { -webkit-transform: scaleX(1); }
 }

 @keyframes main {
   0% { -webkit-transform: scaleX(0); }
   100% { -webkit-transform: scaleX(1); }
  }

	@-moz-keyframes main {
	  0% { -webkit-transform: scaleX(0); }
	  100% { -webkit-transform: scaleX(1); }
	 }

/*------------------------------------*\
	Footer
\*------------------------------------*/
footer{
	background-color: #D8E0E4;
}
footer  a{	opacity: 0.5;}
footer  a:hover{	opacity: 1;}

footer h4{	margin-bottom: 1.5rem;}
footer .menu > li{margin-bottom: .4rem;}

footer .contact{
	border-top: 1px solid #00265314;
	border-bottom: 1px solid #00265314;
}
footer .contact span{
	vertical-align: text-top;
	line-height: 1;
}
footer .copy{
	color: #98B4C4;
}
footer .comment i{
	vertical-align: text-top;
	margin-right: 4px;
}
footer .comment i:last-of-type{
	margin-right: 0;
	margin-left: 4px;
}
#contact .l-columns-2 > p{word-break: normal;break-inside: avoid-column;}

/*------------------------------------*\
	Explorer popup
\*------------------------------------*/
#explorer .modal-header, #explorer .modal-footer{
	border: 0;
}
