.main-content-grid {
  display: grid;
	  grid-template-areas:
		"left_side_top left_side_top left_side_top"
		"main_content main_content main_content"
		"left_side_bottom left_side_bottom left_side_bottom"
		"right_side right_side right_side";
  grid-template-columns: auto auto auto;
  gap: 0 1em;
}

.main-content-grid > div.left_side_top {
  grid-area: left_side_top;
}
.main-content-grid > div.left_side_bottom {
  grid-area: left_side_bottom;
}
.main-content-grid > div.main_content {
  grid-area: main_content;
}
.main-content-grid > div.right_side {
  grid-area: right_side;
}


@media (min-width: 992px){
	.main-content-grid {
		grid-template-areas:
			"left_side_top main_content main_content"
			"left_side_bottom main_content main_content"
			"right_side main_content main_content"
			"right_side main_content main_content"
			"right_side main_content main_content"
			"right_side main_content main_content"
			"right_side main_content main_content";
		grid-template-columns: 250px auto 250px;
	}

	.main-content-grid > div.main_content {
	  grid-row: 1 / span 3;
	}
}

@media (min-width: 1200px){
	.main-content-grid {
		grid-template-areas:
			"left_side_top main_content right_side"
			"left_side_bottom main_content right_side"
			"left_side_bottom main_content right_side"
			"left_side_bottom main_content right_side"
			"left_side_bottom main_content right_side"
			"left_side_bottom main_content right_side";
			grid-template-columns: auto 687px 250px;
	}
	.main-content-grid > div.main_content {
		grid-row: 1 / span 2;
	}
}



.caret_toggle{
	width: 2rem;
	text-align: center;
	margin: -1rem -1rem -1rem 0;
	font-size: 1.3rem;
}

.caret_toggle_parent[aria-expanded="true"] .fa-caret-down,
.caret_toggle_parent[aria-expanded="false"] .fa-caret-up,
.caret_toggle[aria-expanded="true"] .fa-caret-down,
.caret_toggle[aria-expanded="false"] .fa-caret-up{
	display: none;
}

.content_header{
    --bs-blue: #437AB1; 
	background-color: var(--bs-blue);
	color:var(--white);
    --link-color: var(--white);
    --link-color-rgb: var(--body-bg-rgb);
    --link-hover-color: var(--white));
    --link-hover-color-rgb: var(--body-bg-rgb);
  line-height: 1.25rem !important;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
}



.blog-featured{
  background-color:pink;
}

.com-content-article div.page-header{
  background-color: lightblue;
}


@media (width >= 992px) {
  .border-lg-top{
    border-top: var(--border-width)var(--border-style)var(--border-color) !important;
  }
  .border-lg-bottom{
    border-bottom: var(--border-width)var(--border-style)var(--border-color) !important;
  }
}

.att_list_link{
    color: var(--dark) !important;
	padding: 0 0.4rem 0.1rem 0.4rem;
}
.att_list_link.selected{
    background-color: rgba(var(--secondary-rgb), 0.1) !important;
}
.att_list_link.optgroup{
    background-color: rgba(var(--secondary-rgb), 0.3) !important;
}








.att_list_button{
  color: var(--dark) !important;
  background-color: var(--white);
    --border-style: solid;
	border-radius: var(--border-radius) !important;
    font-size: 0.95rem;
	padding: 0 0.4rem 0.1rem 0.4rem;
  	border: var(--border-width)var(--border-style)var(--border-color) !important;
    margin: 0 0.25rem 0.25rem 0.25rem;
}
@media (max-width: 992px) {
	.att_list_link{
        border-radius: var(--border-radius) !important;
		font-size: 0.95rem;
		padding: 0 0.4rem 0.1rem 0.4rem;
      	border: var(--border-width) solid var(--gray-300) !important;
		margin: 0 0.25rem 0.25rem 0.25rem;
	}
}




.badge.badge-count {
  background-color: rgba(var(--secondary-rgb), 0.5);
  font-weight: normal;
  min-width: 20px;
  height: 16px;
  line-height: 14px;
  font-size: 12px;
  padding:  0 0.2rem;
}

.border-dotted{
  --border-style: dotted;
  --border-color: var(--gray-500);
}

.border-dashed{
  --border-style: dashed;
  --border-color: var(--gray-500);
}
.border-dotted *,
.border-dashed *{
  --border-style: solid;
  --border-color: var(--gray-300);
}



.light-hover:not(.optgroup):hover{
	background-color: rgba(230,230,230, 1) !important;
}
a.light-hover:hover{
	text-decoration: none !important;
}
.mx-minus-1{
	margin-right: -0.25rem;
	margin-left: -0.25rem;
}
.fs-7 {
  font-size: 0.95rem !important;
}
.fs-8 {
  font-size: 0.9rem !important;
}
.fs-9 {
  font-size: 0.85rem !important;
}
.fs-10 {
  font-size: 0.75rem !important;
}

.cursor_pointer{
    cursor: pointer;
}



.category-desc:after {
  clear: both;
  content: "";
  display: block;
}



img {
	max-width: 100%;
}





.tourist_binoculars_filler {
	height: 382px;
	background-image: 
	url('https://www.barnsemester.se/bilder/modules/tourist_binoculars_center.jpg'), 
	url('https://www.barnsemester.se/bilder/modules/tourist_binoculars_start.jpg'),
	url('https://www.barnsemester.se/bilder/modules/tourist_binoculars_end.jpg') ;
	background-position: 70% bottom, left bottom, right bottom;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: 545px 100%, calc(70% - 222px) 100%, calc(50% - 222px) 100%;
}

.tourist_binoculars_filler_mini {
	height: 150pxpx;
	background-image: 
	url('https://www.barnsemester.se/bilder/modules/tourist_binoculars_mini_center.jpg'), 
	url('https://www.barnsemester.se/bilder/modules/tourist_binoculars_mini_start.jpg'),
	url('https://www.barnsemester.se/bilder/modules/tourist_binoculars_mini_end.jpg') ;
	background-position: 60% bottom, left bottom, right bottom;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: 214px 100%, calc(60% - 107px) 100%, calc(50% - 107px) 100%;
}
		
		
.link_arrow {
	--bs-arrow-bg: var(--bs-pink);
	--bs-arrow-hover-bg: var(--bs-orange);
	height: 32px;
	line-height:32px !important;
	display: inline-block;
	position: relative;
	margin-left:3px;
	margin-top:1px;
	white-space:nowrap;
	padding:0px 8px 0px 8px;
	
	--link-color: #FFFFFF;
	--link-color-rgb: 255, 255, 255;
	--link-hover-color: #FFFFFF;
	--link-color-rgb: 255, 255, 255;
	background-color: var(--bs-arrow-bg);
  
  
}
.link_arrow:before {
	height: 32px;
	color: transparent;
	border-left: 16px solid;
	display: inline-block;
	content: '';
	position: absolute;
 	left: -16px;
}
.link_arrow:after {
	height: 32px;
	border-left: 15px solid;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	display: inline-block;
	content: '';
	position: absolute;
	top: 0px;
	right: -15px;
	z-index:2;
}
@media (pointer: coarse) and (max-width: 767.98px){
	a.outer_link_arrow { 
		font-size: 0.9rem !important;
	}
}
.link_arrow:before { border-top: 15px solid var(--bs-arrow-bg); border-bottom: 15px solid var(--bs-arrow-bg); }
.link_arrow:after { color: var(--bs-arrow-bg); }
.link_arrow:hover:after { color: var(--bs-arrow-hover-bg); }
.link_arrow:hover:before { border-top: 15px solid var(--bs-arrow-hover-bg); border-bottom: 15px solid var(--bs-arrow-hover-bg); }
.link_arrow:hover { background-color: var(--bs-arrow-hover-bg); }


.tags .btn{
 --btn-border-color: var(--gray-500);
  --btn-hover-border-color: var(--gray-500);
  --btn-bg: transparent;
  --btn-hover-bg: var(--gray-100);
  --btn-focus-shadow-rgb: 39, 39, 111;
}


h1,h2,h3,h4,h5,h6,
.size_h1,.size_h2,.size_h3,.size_h4,.size_h5,.size_h6 {
	color: rgb(251,153,27); 
	background-color: transparent; 
	text-rendering: optimizelegibility;
	font-weight:600 !important;

}

h1, .size_h1 {
	font-size: 2rem !important;
}

h2, .size_h2 {
	font-size: 1.5rem !important;
}

h3, .size_h3 {
	font-size: 1.25rem !important;
}

h4, .size_h4 {
	font-size: 1.25rem; 
	line-height: 1;
	padding-bottom: 0px;
	color: black;
}

h5, .size_h5 {
	color:green;
	font-size: 1.25rem; 
	font-weight:bold;
	margin-bottom:5px;
}

h6, .size_h6{
	font-size:1.125rem !important;
}

@media only screen and (max-width: 767.98px) {
  h1, .size_h1 {
	font-size: 1.5rem !important;
  }
  h2, h3, h4, .size_h2, .size_h3, .size_h4 {
	font-size: 1.1rem !important;
  }
}

@media only screen and (max-width: 567.98px) {
  h1, .size_h1 {
	font-size: 1.3rem !important;
  }
}