/* Custom CSS */

/* Custom for map button */
.btn.btn-primary.btn-large {
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0.75rem 1.5rem;
}

/* Custom for feature icons (tjänster)*/
.fea.icon-features {
  height: 20px;
  width: 20px;
  margin-bottom: 0.25rem;
}

/* Custom for home page */
.bg-half-cust {
    padding: 240px 0;
    background-size: cover !important;
    align-self: center;
    position: relative;
    background-position: center center;
}

/* Custom for cta section */
.bg-half-cta {
    padding: 120px 0;
    background-size: cover !important;
    align-self: center;
    position: relative;
    background-position: center center;
}

/* Custom general page header */
.bg-half-page {
  padding: 200px 0;
  background-size: cover !important;
  align-self: center;
  position: relative;
  background-position: center center;
}

/* Custom article page header */
.bg-half-170.half-home {
  padding: 100px 0 40px;
  margin-bottom: -20px;
}

.heading-typed {
    font-size: 45px !important;
}

.heading-cta {
    font-size: 40px !important;
}

.section {
  padding: 60px 0 20px 0;
  position: relative;
}

h1.blog-title {
   font-size: 2.4em !important;
}

.article-list > li {
  margin-top: 1.6rem;
  margin-bottom: 2.2rem;
  padding-left: 0.4rem;
}

.blog-content > h3, 
.blog-content > h4 {
  margin-top: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.blog-content > p.truncate {
    margin: 14px 10px 14px 0;
    margin: 0.8rem 0.5rem 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-post-title {
    font-size: 18px !important;
    transition: all 0.5s ease;
    line-height: 1.4em;
    min-height: calc(1.43em * 3);
    display: -webkit-box;    
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

div.info-box {
    background-color: rgb(252, 252, 252);
    padding: 2.6rem 1.4rem 0.6rem 1.4rem;
    margin: 3rem 5rem 0 5rem;
    border-radius: 6px;
    border: 1px solid #ddd;
}


/* Table stuff */
.table-container {
      overflow-x: auto;
}

th, td {
	border: 1px solid #ccc;
	text-align: left;
}

	.center {
		text-align: center;
	}

	.borderless {
		border: none;
		background: none;
	}

    .td2 {
        font-size: 0.9em;
        font-weight: bold
    }

th {
	background-color: #f2f2f2;
	font-size: 0.9em;
	font-weight: bold;
}

td {
	font-size: 0.8em;
}

tr:nth-child(even) {
	background-color: #f9f9f9;
}

/* Breadcrumbs */
.page-next-level .page-next li:after {
  content: "›";
  font-family: inherit;
  color: currentColor;
  margin: 0 0.3em;
  font-size: 1.4em;

}

.accordion .accordion-item .accordion-button:before {
  content: "▴";
  font-family: inherit;
  font-size: 14px;
  color: #00c9a7;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.5s ease;
}

.swiper-slider-hero .swiper-container .swiper-button-prev:before,
.swiper-slider-hero .swiper-container .swiper-button-next:before {
  content: none !important;
}

.sidebar .widget .widget-search .searchform:after {
  content: none !important;
}


/* Map stuff */
.map-grid {
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: calc(var(--vh, 1vh) * 100);
}

#map {
  width: 100%;
  height: 100%;
  background-color: #e0e0e0;
  box-sizing: border-box;
}

.map-nav {
    height: 74px;
}

.map-infobar {
    position: relative;
    height: 56px;
    background-color: #e6ebe5;
}

.mapboxgl-ctrl-geocoder {
  box-shadow: 4px 4px 10px rgba(88, 88, 88, 0.8) !important;

  font-size: 1.2em !important;
}

#filter-pane {
    position: absolute;
    right: 10px;
	top: 176px;
    width: 240px;
	height: 50vh;
    background-color: #fff;
	color: #353635;
    padding: 20px;
	border-radius: 5px;
    display: none;
    overflow-y: auto;
    z-index: 9;
	box-shadow: 4px 4px 10px rgba(88, 88, 88, 0.8);
}

#filter-pane.visible {
    display: block;
}

.filter-text {
	margin-left: 12px;
  	margin-top: 4px;
}

#filter-button {
    position: absolute;
    top: 8px;
    right: 10px;
}

.mapboxgl-popup-content {
	border: 1px solid #979797;
	border-radius: 8px !important;
	font-size: 12pt;
	padding: 2px 24px 12px 24px !important;
	background-color: rgba(238, 240, 235, 0.85) !important;
	color: #191a19;
}

.mapboxgl-popup-content p {
    font-size: 0.95em !important;
  	margin-bottom: 8px !important;
}

.mapboxgl-popup-content h3 {
	font-size: 1.1em !important;
  	margin-bottom: 6px !important;
	margin-top: 1.2em !important;
}

.mapboxgl-popup-content h4 {
    font-size: 1.1em !important;
    margin-bottom: 20px !important;
}

.mapboxgl-popup-content a {
    font-size: 0.95em !important;
    text-decoration: underline !important;
}

.popup-list {
    margin-top: 22px !important;
    margin-bottom: 20px !important;
}

.mapboxgl-popup-tip {
	display: none !important;
}


/* Extra large devices (<1400px) */
@media (max-width: 1399.98px) {
    
    .bg-half-cust {
        padding: 220px 0;
    }

    .bg-half-cta {
        padding: 100px 0;
    }

    .bg-half-page {
        padding: 180px 0;
    }

    .heading-typed {
        font-size: 40px !important;
    }

    .heading-cta {
        font-size: 36px !important;
    }
}

/* Large devices (<1200px) */
@media (max-width: 1199.98px) {
    
    .bg-half-cust {
        padding: 200px 0;
    }

    .bg-half-cta {
        padding: 80px 0;
    }

    .bg-half-page {
        padding: 180px 0 160px 0;
    }

    .heading-typed {
        font-size: 35px !important;
    }

    .heading-cta {
        font-size: 32px !important;
    }

    div.info-box {
        margin: 3rem 3rem 2rem 3rem;
    }
}

/* Medium devices (<992px) */
@media (max-width: 991.98px) {  
    
    .bg-half-cust {
        padding: 180px 0;
    }

    .bg-half-cta {
        padding: 70px 0;
    }

    .bg-half-page {
        padding: 180px 0 120px 0;
    }

    .heading-typed {
        font-size: 30px !important;
    }

    .heading-cta {
        font-size: 30px !important;
    }
}

/* Small devices (<768px) */
@media (max-width: 767.98px) {
    
    .bg-half-cust {
        padding: 160px 0;
    }

    .bg-half-cta {
        padding: 60px 0;
    }

    .bg-half-page {
        padding: 180px 0 100px 0;
    }

    .heading-typed {
        font-size: 28px !important;
    }

    .heading-cta {
        font-size: 28px !important;
    }

    .bg-half-170.half-home {
        padding: 90px 0 35px;
    }

    div.info-box {
        margin: 3rem 1rem 2rem 1rem;
    }

    .filter-text {
        margin-top: 6px;
        margin-left: 10px;
        font-size: 0.9em;
    }

    #filterOffcanvas.offcanvas-end {
        width: 340px;
    }

}

/* Extra small devices (<576px) */
@media (max-width: 575.98px) {
    
    .bg-half-cust {
        padding: 110px 0;
    }

    .bg-half-cta {
        padding: 50px 0;
    }

    .bg-half-page {
        padding: 160px 0 80px 0;
    }

    .heading-typed {
        font-size: 24px !important;
    }

    .heading-cta {
        font-size: 24px !important;
    }

    .bg-half-170.half-home {
        padding: 90px 0 20px;
        margin-bottom: -40px;
    }

    .section {
        padding-left: 5px;
        padding-right: 5px;
    }

    div.info-box {
        margin: 3rem 0.5rem 2rem 0.5rem;
    }

    .filter-text {
        margin-top: 7px;
        margin-left: 8px;
        font-size: 0.8em;
    }

    .mapboxgl-popup-content p {
        font-size: 0.9em !important;
    }

    .mapboxgl-popup-content h3 {
        font-size: 1.05em !important;
    }

    .mapboxgl-popup-content h4 {
        font-size: 1.05em !important;
    }

    .mapboxgl-popup-content a {
        font-size: 0.9em !important;
    }
}