/**
 * Common CSS
 *
 * This stylesheet include:
 * - Basic, non-layout, styling such as colors and effects
 * - Helpers, that are always the same, such as clearfix
 * - Generic CSS Blocks - Reusable styles shared among specific components and elements
 * - Component CSS Blocks
 */
 
/**
 * Basic styles
 */
/*
 @font-face{
	font-family: Gabriola;
	src: url(../_fonts/Gabriola.ttf);
  }
 
@font-face {
	font-family: "Eras Light ITC";
	src: url(../_fonts/ErasLightITC.ttf);
}
@font-face {
	font-family: "NeueAachenProRegular";
	src: url(../_fonts/NeueAachenProRegular.ttf);
}
*/

html {
	position: relative;
	min-height: 100%;
 }
 
html, body {
	font: 400 1em/1.4 sans-serif;
	font-family: "Tahoma", sans-serif;
	font-size: 24x;
	color: #2a2a2a;
	background-color: #f9f5f3;
}
@font-face {
	font-family: "Gabriola";
	src: url(../_fonts/Gabriola.ttf);
}
@font-face {
	font-family: "Eras Light ITC";
	src: url(../_fonts/ErasLightITC.ttf);
}
@font-face {
	font-family: "NeueAachenProRegular";
	src: url(../_fonts/NeueAachenProRegular.TTF);
}
@font-face {
	font-family: "OutfitBold";
	src: url(../_fonts/Outfit-Bold.ttf);
}
@font-face {
	font-family: "Roboto";
	src: url(../_fonts/Roboto-Light.ttf);
}
@font-face {
	font-family: "Raleway";
	src: url(../_fonts/Raleway-Regular.ttf);
}
@font-face {
	font-family: "Playfair Display";
	src: url(../_fonts/PlayfairDisplay-Regular.ttf);
}
@font-face {
	font-family: "RobotoCondensed";
	src: url(../_fonts/RobotoCondensed-Regular.ttf);
}


.localmenu {
    font-family: 'Roboto', sans-serif;
}

body {
	height: 100vh;
    display: flex;
    flex-direction: column;
	margin: 0;
	min-height: 100vh;
}
main {
	flex-grow: 1;
	min-height: calc(100vh - 141px);
}

a {
	color: #7693a0;
}

/**
 * Helper classes
 */
 .clearfix:after {
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearer {
	clear:both;
}
.pillarbox {
	max-width: 1920px;
	padding-left: 20px;
	padding-right: 20px;
}
.container-md {
	max-width: 1920px;

}
.mobileNav {
	display: none;
}

/**
* Media dependent style settings for responsive design.
**/
 
@media (min-width: 1024px) {
	html, body {
		font-size: 20px;
	}
	.navbar {
		height: 15em; /* Adjusted height for menu and login */
	}
	.headerAndMainWrapper .logo {
		height: 2.5em;
		margin: 0.7em 0 0.1em 2em;
		width: auto;
	}
}
/* This must be fixed as several rules currently are overridden */
@media (max-width: 1023px) {
	html, body {
		font-size: 22px;
	}
	.navbar {
		height: 15em; /* Adjusted height for menu and login */
	}
	.headerAndMainWrapper .logo {
		height: 2rem;
		margin:  1.0em 0 0.1em 2em;
		width: auto;
	}
	.headerAndMainWrapper .mainContent {
		padding: 2em;
	}
	.navbar nav ul.main-menu li a {
		font-size: 1.2rem !important;
		line-height: 1.0;
		text-decoration: none;
		letter-spacing: 0.1em;
		margin: 0;
		padding: 0.35rem 0.7rem 0.8rem 0.7rem !important;
		display: none;
	}
}
/*Smartphone specifics */
@media (max-width: 767px) {
	html, body {
		font-size: 24px;
	}
	menu {
		margin: 0;
		padding: 0;
	}
	.headerAndMainWrapper .logo {
		height: 2rem;
		margin: 1em 0 0 1em;
		width: auto;
	}
	.headerAndMainWrapper .navbar nav h2 {
		display: block;
	}
	.headerAndMainWrapper .navbar nav ul.mobile-menu {
		background-color: #f5deca;
		opacity: 1;
		display: none;
		z-index: 1;
		margin: 0;
		position: fixed;
		right: 0;
		top: 4em;
		width: auto;
		min-width: 50%;
		border-bottom: 0;
	}
	.headerAndMainWrapper .navbar nav ul.mobile-menu li {
		float: none;
		display: block;
		margin: 0;
		padding: 0;
		vertical-align: bottom;
		width: 100%;
		text-align: center;
		line-height: 1em;
	}
	.headerAndMainWrapper .navbar nav ul.mobile-menu li:hover {
		background-color: #ececee;
	}
	.headerAndMainWrapper .navbar nav ul.mobile-menu li a {
		display: block;
		width: 100%;
		height: 100%;
		padding: 0.6em 0 0.33em 0;
	}
	.headerAndMainWrapper .navbar nav ul.mobile-menu li a:hover {
		color: #9a7260;
		border-bottom: none;
	}
	.headerAndMainWrapper .mainText,
	.headerAndMainWrapper .sidebar,
	.headerAndMainWrapper .googleMap {
		float: left;
		width: 100%;
	}
	.headerAndMainWrapper .sidebar .container-md {
		border-left: 0;
		padding: 0;
	}
	.headerAndMainWrapper .mainContent {
		margin: 0;
		padding: 3em 1em;
	}
	.headerAndMainWrapper .mainContent .DocumentSectionJumbotron {
		margin: -3em -1em 0 -1em;
		width: 100% + 2em;
	}
	footer .footerAddress address, footer .footerAddress address ul, footer .footerAddress address li  {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	footer .footerAddress {
		width: 100%;
		display: block;
	}
	footer .footerAddress address li {
		margin: 0.1em 0;
	}
	footer .footerAddress address li:last-of-type {
		margin-bottom: 2em;
	}
	footer .footerAddress li:after {
		content: "" !important;
	}
	aside.side-menu {
		display: none;
		width: 80%;
		right: 0;
		top: 4rem;
		position: fixed;
	}
	nav.mobileNav {
		display: block;
	}
	nav.screenNav {
		display: none;
	}

	.pillarbox {

	}
	#menu-images-btn,
	#menu-btn {
		float: right;
		display: inline-block;
		color: hsla(11, 23%, 23%, 0.954);
		color: #eb7965;
		color: #cc4e4e;
		/*-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: #8f7d4b;*/
		vertical-align: top;
		padding: 0.3rem 0.7rem 0 0.8rem;
		margin-top: 1.4em;
		height: 2.6rem;
		margin-right: 0;
	}
	#menu-btn:hover {
		cursor: pointer;
	}
	#menu-images-btn .pi-images,
	#menu-btn .pi-bars {
		line-height: 1.3rem !important;
		font-size: 1.2rem;
	}

	/* Responsive menu styles */
	nav.mobileNav .responsive-menu {
		display: block;
		float: right;
	}
	nav.mobileNav .responsive-menu #menu_hem {
		display: inline-block;
	}
	nav.mobileNav .responsive-menu #menu_mina_sidor a {
		padding-left: 0.1rem !important;
		padding-right: 2.6rem !important;
	}
	nav.mobileNav .responsive-menu #menu_hem a,
	nav.mobileNav .responsive-menu #menu_galleri a {
		padding-left: 0.1rem !important;
		padding-right: 2.6rem !important;
	}
	nav.mobileNav .responsive-menu #menu_hem a,
	nav.mobileNav .responsive-menu #menu_mina_sidor a,
	nav.mobileNav .responsive-menu #menu_galleri a {
		line-height: 1.2rem !important;
    	font-size: 1.1rem !important;
    	font-weight: 900;
		font-family: 'primeicons' !important;
  		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		display: inline-block;
		visibility: hidden;
		padding: 0;
		margin-right: 0;
		width: 1.2rem;
		padding: 0.35rem 2.5rem 0 0.7rem;
		color: #eb7965;
		color: #cc4e4e;
		height: 1rem;
	}
	nav.mobileNav .responsive-menu .main-menu #menu_hem a::before,
	nav.mobileNav .responsive-menu .main-menu #menu_mina_sidor a::before,
	nav.mobileNav .responsive-menu .main-menu #menu_galleri a::before {
		--webkit-backface-visibility: hidden;
  		backface-visibility: hidden;
		font-size: 1.1em !important;
		visibility: visible;
		width: 1.2rem;
		color: #eb7965;
		color: #cc4e4e;
		padding: 0.7rem 0.7rem 0.75rem 0.7rem !important;
	}
	nav.mobileNav #menu-btn:active,
	nav.mobileNav #menu-btn:hover {
		color: #9a7260;
		border-bottom: 5px solid #dd5252;
		background-color: #e6d6cf;
		background-image: linear-gradient(to bottom, #eee, #faeadd);
		background-image: linear-gradient(to bottom, #faf4e9, #ffe4ce);
		padding: 0.3rem 0.7	rem 0rem 0.8rem !important;
	}
	nav.mobileNav .responsive-menu .main-menu #menu_hem a:hover:before,
	nav.mobileNav .responsive-menu .main-menu #menu_mina_sidor a:hover:before,
	nav.mobileNav .responsive-menu .main-menu #menu_galleri a:hover:before {	
		color: #9a7260;
		border-bottom: 5px solid #dd5252;
		background-color: #e6d6cf;
		background-image: linear-gradient(to bottom, #eee, #faeadd);
		background-image: linear-gradient(to bottom, #faf4e9, #ffe4ce);
		padding: 0.35rem 0.7rem 0.8rem 0.7rem !important;
	}
	nav.mobileNav .responsive-menu .main-menu #menu_mina_sidor a::before {
		content: "\e91d";
	}
	nav.mobileNav .responsive-menu .main-menu #menu_galleri a::before {
		content: "\e973";
	}
	nav.mobileNav .responsive-menu .main-menu #menu_hem a::before {
		content: "\e925";
	}
	nav.mobileNav .responsive-menu .main-menu #menu_mina_sidor.current {
		display: none;
	}
	nav.mobileNav #menu-btn {
		display: none;
	}
	nav.mobileNav .responsive-menu .main-menu #menu_galleri.current a::before {
		border-bottom: 6px solid #dd5252;
		padding: 0.35rem 0.7rem 0.8rem 0.7rem !important;
	}
	nav.mobileNav #menu-btn.current {
		border-bottom: 6px solid #dd5252 !important;
	}
	

	nav.mobileNav .user-icon-container {
		float: right;
		display: inline-block;
		color: #cc4e4e;
		/*-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: #8f7d4b;*/
		vertical-align: top;
		padding: 0.2rem 0.7rem 0 0.7rem;
		margin-top: 1.4em;
		height: 2.6rem;
		margin-right: 0;
	}
	nav.mobileNav .user-icon-container:hover {
		color: #9a7260;
		padding-bottom: 0.33em;
		background-color: #e6d6cf;
		background-image: linear-gradient(to bottom, #eee, #faeadd);
		background-image: linear-gradient(to bottom, #faf4e9, #ffe4ce);
		cursor: pointer;
		border-bottom: 6px solid #dd5252;
	}
	nav.mobileNav .user-icon-container .pi-user {
		line-height: 1.2em !important;
		font-size: 1.2em;
		font-weight: 900;
	}
	nav.mobileNav ul.mobile-menu li.current a {
		border-bottom: none !important;
	}
	/* Sub-menu styles */
	nav.mobileNav menu.sub-menu {
		background-color: #f5deca;
		opacity: 1;
		z-index: 1;
		margin: 0;
		right: 0;
		top: 54px;
		width: auto;
		min-width: 50%;
		border-bottom: 0;
		position: fixed;
	}
}

/**
* Style for the top navigation bar. Note that some behaviours are
* media dependent and defined separately.
**/

/**
* Color palette for menu background
* Green theme
* #90afac
* #a6bfbc
**/
.navbar {
	background-color: #c5a495;
	border-bottom: 0.2em solid #ba8e7c;
	background-color: rgba(166, 191, 188, 0.6);
	background-color: rgb(166, 191, 188);
	background-color: #d2dfdd;
	background-color: #fcdcc0;
	background-color:#f5deca;
	/*background-color: rgba(166, 191, 188, 0.6);*/
	border-bottom: 0.2em solid #39736f;
	border-bottom: 0.2em solid #9a7260;
	border-bottom: 0.25rem solid #a36765;
	text-align: left;
	position: fixed;
	transition: height 0.5s, box-shadow 0.5s;
	width: 100%;
	height: 4em;
	/*height: 3.3em;*/
	z-index: 100;
	/*background-image: url(../img/abstract-checkered-mosaic-background.jpg);*/
	/*background-image: url(../img/grey-square-pattern-background.jpg);*/
	/*background-blend-mode: multiply;
	background-repeat: repeat;
	background-position: right;*/
}
.navbar h2 {
	display: none;
	color: hsla(11, 23%, 23%, 0.954);
	cursor: pointer;
	text-align: right;
	font-family: LeagueGothic;
	font-weight: normal;
	margin: 1em 1em 0 0;
	padding: 0;
	line-height: 1.2em;
}
.navbar h2:hover {
	color: #2e231e;
}
.navbar .dropdown {
	float: right;
}
.headerAndMainWrapper ul.mobile-menu.show,
.headerAndMainWrapper .navbar nav ul.main-menu.show {
	display: inline-block;
}

.footerLogo img,
.navbar,
.headerAndMainWrapper header img.logo {
	-moz-transition: height 1s ease-in-out, left 1.0s ease-in-out;
	-webkit-transition: height 1s ease-in-out, left 1.0s ease-in-out;
	-moz-transition: height 1s ease-in-out, left 1.0s ease-in-out;
	-o-transition: height 1s ease-in-out, left 1.0s ease-in-out;
	transition: height 1s ease-in-out, left 1.0s ease-in-out;
}
.navbar nav ul.main-menu li a {
	-moz-transition: font-size 0.5s;
	-webkit-transition: font-size 1s;
	-moz-transition: font-size 1s;
	-o-transition: font-size 1s;
	transition: font-size 0.5s;
}

.navbar nav ul.main-menu {
	float: right;
}
.navbar nav ul.main-menu {
	margin-top: 1.4em;
	font-size: 100%;
	padding: 0;
}
.navbar nav ul.main-menu li {
	float: left;
	display: block;
	vertical-align: bottom;
}
.navbar nav ul.main-menu li a {
	color: #1a1615;
	color: #5e463b;
	font-family: "RobotoCondensed";
	font-weight: normal;
	font-size: 1.4em;
	line-height: 1.0;
	text-decoration: none;
	letter-spacing: 0.05rem;
	margin: 0;
	padding: 0.35em 1.3em 0 1.3em;
	display: inline-block;
}
.navbar nav ul.main-menu li.current a,
.navbar nav ul.main-menu li a:hover {
	color: #9a7260;
	border-bottom: 5px solid #dd5252;
	padding-bottom: 0.33em;
	background-color: #e6d6cf;
	background-image: linear-gradient(to bottom, #eee, #faeadd);
	background-image: linear-gradient(to bottom, #faf4e9, #ffe4ce);
}

.user-icon-container {
	float: right;
	display: inline-block;
	color: #cc4e4e;
	/*-webkit-text-stroke-width: 1px;
  	-webkit-text-stroke-color: #8f7d4b;*/
	vertical-align: top;
	padding: 0.3em 1.3em 0 1.3em;
	margin-top: 1.4em;
	height: 2.6rem;
	margin-right: 2rem;
}
.user-icon-container:hover {
	color: #9a7260;
	border-bottom: 5px solid #dd5252;
	padding-bottom: 0.33em;
	background-color: #e6d6cf;
	background-image: linear-gradient(to bottom, #eee, #faeadd);
	background-image: linear-gradient(to bottom, #faf4e9, #ffe4ce);
	cursor: pointer;
}
.user-icon-container .pi-user {
	line-height: 1.2em !important;
	font-size: 1.4em;
	font-weight: 900;
}


/**
* Mobile navigation
**/


/**
* Local menu
**/
ul.localmenu {
	margin: 0;
	padding: 0;
}
ul.localmenu li {
	margin: 0;
	padding: 0;
}
nav {
		margin: 0;
	padding: 0;
}

/**
* New local menu
**/
// Remy function
@function remy($value) {
  @return ($value / 16px) * 1rem;
}
/*body {
  margin-top: 2rem;
  font: 100% "Open sans", "Trebuchet MS", sans-serif;
}
a {text-decoration: none;}
*/
/**
 * Hidden fallback
 */
[hidden] {
  display: none;
  visibility: hidden;
}
/**
 * Styling navigation
 */
.side-menu {
 	float: right;
	position: absolute;
	top: 8rem;
	right: 1rem;
  	margin-right: auto;
  	margin-left: auto;
  	max-width: 30rem;
  	width: 30%;
  	box-shadow: 0 3px 12px rgba(0,0,0,.25);
  	height: auto; /* Ensure height is based on content */
	min-height: 0; /* Reset any inherited min-height */
	overflow: visible;
	align-self: flex-start;
}
.side-menu a {
	text-decoration: none;
}
/**
 * Styling top level items
 */
.accordionMenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.accordionMenu a,
.accordionMenu label {
	display: block;
	padding: .65rem;
	box-shadow: inset 0 -1px lighten(#735548, 3%);
	-webkit-transition: all .25s ease-in;
	transition: all .25s ease-in;
}
.accordionMenu label {cursor: pointer;}
/**
 * Styling first level lists items
 */
.group-list a,
.group-list label {
  padding-left: 2rem;
  flex: 1, 1, 1;

}
.group-list label {
	padding-left: 0;
}
/**
 * Styling second level list items
 */
.group-list .group-list a,
.group-list .group-list label {
  padding-left: 4rem;
  background: #9c7260;
  box-shadow: inset 0 -1px lighten(#9c7260, 7%);
  &:focus,
  &:hover {background: darken(#9c7260, 7%);}
  /*
  padding-left: 4rem;
  background: #353535;
  box-shadow: inset 0 -1px lighten(#353535, 7%);
  &:focus,
  &:hover {background: darken(#353535, 7%);}
  */
}
.group-list .group-list label {
	padding-left: 0;
}



/**
 * Rotating chevron icon
 */
.accordionMenu label > span.pi {
  float: right;
  transition: transform .65s ease;
}

/**
 * Styling footer
 */



.headerAndMainWrapper {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.headerAndMainWrapper:has(.placeholder) {
	min-height: calc(100vh + 25%);
}

.mainContent .DocumentSectionJumbotron {
	margin: -3em -3em 0 -2.99em;
	width: 100% + 6em;
}
.mainContent .DocumentSectionJumbotron .viewport {
	background-position: center;
	height: 400px;
}
/**
 * Component: MainImageSlideshow
 */
 .MainImageSlideshow > .viewport {
	background-image: transparent;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	z-index: 10;
	max-height:520px;
	text-align:center;
	overflow:hidden;
}
.MainImageSlideshow > .viewport .placeholder {
	padding-top: 50%;
}

/**
*
**/

.mainContent {
	margin: 0;
	padding: 3em;
	padding-top: 3.5rem;
}

.mainContent .page p {
	color: #2a2a2a;
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-size: 0.8rem;
}
.page h1 {
	font-family: "Playfair Display", "Times New Roman", serif;
	font-size: 28px;
	letter-spacing: 0.03rem;
	padding-bottom: 0;
	margin-bottom: 0;
	padding-top: 1em;
	font-weight:900;
	color: #5e463b;
	/* text-shadow: 1px 1px 1px #a4a4ab; */
}
.page h2 {
	font-family: "Playfair Display", "Times New Roman", serif;
	font-size: 28px;
	letter-spacing: 0;
	padding-bottom: 0;
	margin-bottom: 0;
	padding-top: 0.8em;
	font-weight:300;
	color: #5e463b;
}
.mainText {
	float: left;
	padding-bottom: 2em;
	width: 67%;
}
.mainText.loginPage,
.mainText.newsArchive {
	width: 100%;
}

/**
* Style for Google map on the front page
**/

.googleMap {
	float: left;
	width: 67%;
	padding-bottom: 2em;
}
.googleMap iframe {
	border: 5px groove #72727b;
	border: 1px solid transparent;
  	border-image: linear-gradient(to right, #72727b, #c5a495);
  	border-image-slice: 1;
	width: 100%;
	min-height: 300px;
}
.googleMap iframe:hover {
	border: 1px solid transparent;
	border-image: linear-gradient(to left, #72727b, #c5a495);
	border-image-slice: 1;
}


/** 
* Style for sidebars. So far we have news and document lists here. Most
* of the style is shared between the lists.
**/

.sidebar {
	background-color: #f4ebe6;; /* Light beige to match the overall design */
    padding: 1.5rem; /* Add padding for spacing */
    border-radius: 8px; /* Rounded corners for a softer look */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
	float: right; /* Float to the right for screen users */
	width: 30%; /* Set width for the sidebar */
}
.sidebar .section-wrapper {
	padding: 0 1.5rem; /* Add padding for spacing */
}

ul.document-list,
ul.news-list {
	list-style: none;
	list-style-position: outside;
	margin: 0;
	padding: 0;
}

.document-item:first-child,
.news-item:first-child {
	margin: 0 0 0 0;
	padding: 0.75em 0 1em 0;
}
.document-item h2,
.news-item h2 {
    font-family: "Playfair Display", serif; /* Elegant serif font */
    font-size: 1.2rem; /* Slightly larger font size */
    font-weight: 700; /* Bold for emphasis */
    color: #5e463b; /* Darker brown for strong contrast */
    margin: 0 0 0.5rem 0; /* Add spacing below the heading */
}
ul.news-list .news-item ul.files {
	padding: 1em 0 0 0;
	margin: 0;
}
.news-item ul.files li.file {
	font-size: 75%;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mainContent section.sidebar h1 {
	padding-top: 0;
}
.mainContent .news-item {
    border-bottom: 1px solid #e0e0e0; /* Elegant separator for news items */
    padding-bottom: 1rem; /* Add spacing below each news item */
    margin-bottom: 1.5rem; /* Ensure separation between news items */
}
.mainContent .news-item h2 {
    margin-top: 0.2rem; /* Reduce spacing above the heading */
    margin-bottom: 0.5rem; /* Ensure spacing below the heading */
	padding-top: 0;
}
.mainContent .document-item p,
.mainContent .news-item p {
    font-family: "Roboto", sans-serif; /* Consistent font */
    font-size: 0.8rem; /* Standard font size */
    font-weight: 400; /* Normal weight */
    color: #2a2a2a; /* Dark gray for readability */
    line-height: 1.6; /* Improved readability */
}
.mainContent .news-item .date {
    font-family: "Roboto", sans-serif; /* Consistent font */
    font-size: 0.7rem; /* Slightly smaller font size */
    color: #9a7260; /* Soft brown for subtle emphasis */
    margin-bottom: 0.2rem; /* Add spacing below the date */
    display: block; /* Ensure it appears on its own line */
	text-align: center;
}
.mainContent .news-item a {
	text-decoration: none;
}
.news-item ul.files {
    list-style: none; /* Remove default list styling */
    margin: 0;
	margin-top: 0.5rem;
    padding: 0.5rem 0 0 1rem; /* Add spacing above the file list */
}

.news-item ul.files li.file {
    font-family: "Roboto", sans-serif; /* Consistent font */
    font-size: 0.9rem; /* Slightly smaller font size */
    color: #2a2a2a; /* Dark gray for readability */
    margin-bottom: 0.5rem; /* Add spacing between file items */
    display: flex; /* Align icon and text horizontally */
    align-items: center;
}

.news-item ul.files li.file i {
    margin-right: 0.5rem; /* Add spacing between icon and text */
    color: #9a7260; /* Soft brown for the icon */
    font-size: 1rem; /* Adjust icon size */
}
.news-item ul.files li.file a .file-icon {
    font-family: "primeicons"; /* Ensure the icon uses the correct font */
    margin-right: 0.5rem; /* Add spacing between icon and text */
    font-size: 1rem; /* Adjust icon size */
    color: inherit; /* Retain file-specific color */
	display: inline-block;
	vertical-align: top; /* Align icon vertically with text */
    position: relative; /* Set positioning context for ::before */
    width: 1.5rem; /* Set a fixed width for the icon */
    height: 1.5rem; /* Set a fixed height for the icon */
    text-align: center; /* Center the icon within its container */
    line-height: 1.5rem; /* Vertically center the icon */

}
.news-item ul.files li.file a {
    font-size: 0.8rem; /* Smaller font size for links */
    color: #0056b3; /* Consistent blue color for links */
    text-decoration: none; /* Remove underline for cleaner look */
    display: flex; /* Align icon and text horizontally */
    align-items: center; /* Vertically center icon and text */
}
.news-item ul.files li.file .file-size {
    margin-left: auto; /* Push file size to the right */
    font-size: 0.8rem; /* Smaller font size for file size */
    color: #9a7260; /* Soft brown for subtle emphasis */
}

.news-item ul.files li.file a:hover {
    color: #003d80; /* Darker blue on hover */
}
.news-item p:not(:first-child):not(:last-child) {
    margin-top: 0.5rem; /* Add subtle margin between paragraphs */
    margin-bottom: 0.5rem; /* Add subtle margin between paragraphs */
}

.news-item p:first-child {
    margin-top: 0; /* No margin above the first paragraph */
}

.news-item p:last-child {
    margin-bottom: 0; /* No margin below the last paragraph */
}


/* Container for the archive link */
.archive-link-container {
    text-align: center; /* Center the button */
    margin-top: 2rem; /* Add spacing above the button */
}

/* Style for the archive link */
.archive-link {
    display: inline-block; /* Make it behave like a button */
    font-family: "Roboto", sans-serif; /* Consistent font */
    font-size: 1rem; /* Standard font size */
    font-weight: 600; /* Semi-bold for emphasis */
    color: #ffffff; /* White text for contrast */
    background-color: #5ba4a4;
	background-color: #d4a373; /* Muted coral for a fun yet elegant look */
    padding: 0.8rem 1.5rem; /* Add padding for button-like appearance */
    border-radius: 8px; /* Rounded corners for elegance */
    text-decoration: none; /* Remove underline */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease; /* Smooth transitions */
}

/* Hover effect for the archive link */
.archive-link:hover {
    background-color: #4a8c8c;
	background-color: #b5885a; /* Slightly darker coral on hover */
    transform: scale(1.05); /* Subtle scaling effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
}

/* Focus effect for accessibility */
.archive-link:focus {
    outline: 2px solid #9a7260; /* Soft brown outline for focus */
    outline-offset: 2px;
}

.newsArchive {
    max-width: 1200px; /* Limit the width */
    margin: 0 auto; /* Center the content */
    padding: 2rem; /* Add padding for spacing */
    background-color: #f9f5f3; /* Light beige background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
	overflow: hidden;
	background-color: #f4ebe6;
}
.newsArchive .news-item {
    border-bottom: 1px solid #e0e0e0; /* Divider between news items */
    padding-bottom: 1rem; /* Add spacing below each news item */
    margin-bottom: 1.5rem; /* Ensure separation between news items */
    transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect for the divider */
.newsArchive .news-item:hover {
    border-bottom: 1px solid #9a7260; /* Soft brown for hover */
}
.newsArchive h1 {
    font-family: "Playfair Display", serif; /* Elegant serif font */
    font-size: 2rem; /* Larger font size for the main heading */
    font-weight: 700; /* Bold for emphasis */
    color: #5e463b; /* Darker brown for strong contrast */
    text-align: center; /* Center the heading */
    margin-bottom: 2rem; /* Add spacing below the heading */
}

.newsArchive .news-item h2 {
    font-family: "Playfair Display", serif; /* Elegant serif font */
    font-size: 1.4rem; /* Slightly larger font size */
    font-weight: 700; /* Bold for emphasis */
    color: #5e463b; /* Darker brown for strong contrast */
    margin: 0 0 0.5rem 0; /* Add spacing below the heading */
}
/* Sidebar placeholder */
.newsArchive-sidebar {
    float: right;
    width: 30%; /* Reserve space for the sidebar */
    background-color: #f4ebe6; /* Light beige background */
    border-radius: 8px; /* Rounded corners */
    padding: 1.5rem; /* Add padding for spacing */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    display: none; /* Hide for now */
}

/* Pagination placeholder */
.newsArchive-pagination {
    text-align: center; /* Center the pagination */
    margin-top: 2rem; /* Add spacing above the pagination */
}

.newsArchive-pagination a {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    color: #0056b3;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.newsArchive-pagination a:hover {
    background-color: #0056b3;
    color: #ffffff;
}
.newsArchive .news-year {
    margin-bottom: 2rem; /* Add spacing below each year's section */
}

.newsArchive .year-header {
    font-family: "Playfair Display", serif;
    font-size: 2rem; 
    font-weight: 700;
    color: #5e463b;
    margin-bottom: 0.5rem; /* Add spacing below the header */
    border-bottom: 2px solid #e0e0e0; /* Subtle divider below the year */
    padding-bottom: 0.5rem; /* Add padding below the text */
    background-color: #f4ebe6; /* Light beige background */
    padding: 0.5rem 1rem; /* Add padding for spacing */
    border-radius: 8px; /* Rounded corners for elegance */
    text-align: center; /* Center-align the year header */
}

.newsArchive .year-context {
    font-family: "Roboto", sans-serif; /* Consistent font */
    font-size: 1rem; /* Standard font size */
    color: #7e5a4d; /* Muted brown for subtle emphasis */
    margin-bottom: 1rem; /* Add spacing below the context text */
    text-align: center; /* Center-align the context text */
}
.newsArchive .year-header i {
    margin-right: 0.5rem; /* Add spacing between the icon and the text */
    color: #9a7260; /* Soft brown for the icon */
    font-size: 1.5rem; /* Adjust icon size */
    vertical-align: middle; /* Align icon with text */
}
.newsArchive .news-year-container {
    background-color: #f9f5f3; /* Light beige background */
    padding: 1.5rem; /* Add padding for spacing */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin-bottom: 2rem; /* Add spacing below each year's section */
}
.newsArchive .year-header:hover {
    color: #7e5a4d; /* Muted brown on hover */
    background-color: #f4ebe6; /* Slightly darker beige on hover */
    cursor: pointer; /* Change cursor to indicate interactivity */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}
.no-news-message {
    text-align: center; /* Center the message */
    background-color: #f9f5f3; /* Light beige background */
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    padding: 2rem; /* Add padding for spacing */
    margin: 2rem auto; /* Center the container and add spacing */
    max-width: 600px; /* Limit the width */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.no-news-message p {
    font-family: "Roboto", sans-serif; /* Consistent font */
    font-size: 1rem; /* Standard font size */
    color: #7e5a4d; /* Muted brown for subtle emphasis */
    margin: 0; /* Remove default margins */
}

/* Future sidebar for News Archive sidebar */
.newsArchive-sidebar {
    width: 25%; /* Sidebar width */
    background-color: #f4ebe6; /* Light beige background */
    border-radius: 8px; /* Rounded corners */
    padding: 1.5rem; /* Add padding for spacing */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    float: right; /* Align sidebar to the right */
    margin-left: 2rem; /* Add spacing between sidebar and main content */
}

.newsArchive-sidebar h2 {
    font-family: "Playfair Display", serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #5e463b;
    margin-bottom: 1rem;
}

.newsArchive-sidebar .year-filter {
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
}

.newsArchive-sidebar .year-filter li {
    margin-bottom: 0.5rem; /* Add spacing between links */
}

.newsArchive-sidebar .year-filter li a {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    color: #0056b3; /* Blue for links */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease;
}

.newsArchive-sidebar .year-filter li a:hover {
    color: #003d80; /* Darker blue on hover */
}

/* Corrected styles for file/document lists */

.DocumentList {
    margin: 1.5em 1.5em 1.5em 0;
    padding: 2rem;
}

.DocumentList > article.fileItem:hover {
    background-color: #e6d6cf;
    border-color: #6d7bb1; /* Change border color on hover */
    cursor: pointer; /* Pointer cursor for the entire item */
}
.fileItem {
	border: 2px solid transparent; /* Default border */
	padding: 1em;
	transition: background-color 0.3s, border-color 0.3s; /* Smooth transition */
}
.fileItem .pi {
}

.p-card {
	background: var(--surface-card);
	border: var(--card-border);
	padding: 2rem;
	border-radius: 10px;
	margin-bottom: 1rem;
}

.p-card-link {
	text-decoration: none !important;
	color: inherit;
}

.p-card-link:hover {
	text-decoration: none;
}
.p-card-link > div:hover {
    background-color: #f4ebe6 !important;
    transition: background-color 0.3s ease-in-out !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}
.p-button-icon-transparent {
	 background-color: transparent;
	 border: transparent;
}
/*
.p-button {
	background-color: #6d7bb1;
	color: #f6efed;
	border: none;
	border-radius: 0.25em;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
*/

.p-button:hover {
	background-color: #5a6f9b;
}

.userbox {
	background-color: transparent;
	float:right;
	font-size: 0.7rem;
	position: fixed;
	right: 2em;
}
.userbox a {
	font-size: 0.7rem;
}
.userbox span {
	font-size: 0.8rem;
}
.userbox {
	position: absolute;
    top: 100%; /* Position directly below the .user-icon-container */
    right: 1rem;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
	margin: 0;
    z-index: 100;
    width: auto;
    display: none; /* Initially hidden */
}

.userbox.visible {
    display: block !important; /* Show when toggled */
}
.userbox-info {
    margin-bottom: 0.5rem;
	width: auto;
	float: left;
}
.userbox-name {
	font-weight: 900;
	float: left;
	position: relative;
}
.userbox .userbox-role {
	clear: left;
	float: left;
	position: relative;
	font-size: 90%;
}
.userbox-logout {
	float: right;
	position: relative;
}

.p-inputgroup {
	font-size: 0.8rem;
	display: flex;
    align-items: stretch;
    width: 100%;
	box-sizing: border-box;
}
.p-inputgroup .p-inputtext {
	flex: 1 1 auto;
    width: 1%;
}
.p-inputgroup input {
	font-size: 0.8rem;
}
.p-inputgroup label {
	display: none;
}
.p-inputgroup-addon {
	border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
	background: #f3f4f6;
    color: #6b7280;
    border-top: 1px solid #d1d5db;
    border-left: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
    padding: 0.75rem 0.75rem;
    min-width: 3rem;
	display: flex;
    align-items: center;
    justify-content: center;
}
.p-inputgroup-addon .pi {
	font-size: 0.8rem;
}
.p-checkbox {
	border: 2px solid #d1d5db;
    background: #ffffff;
    width: 22px;
    height: 22px;
    color: #4b5563;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    outline-color: transparent;
}

.error,
.py-4 .error {
	color: red !important;
}

/**
* Some code for styling checkboxes
* Source: https://dev.to/madsstoumann/styling-checkboxes-and-switches-pf0
*/

[type=checkbox] {
  --_accent: #0075ff;
  --_bdw: calc(1em * (4/3) / 13.333333);
  --_mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="3" stroke="%23000" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 12l5 5l10 -10"/></svg>');

  appearance: none;
  aspect-ratio: 1;
  background: var(--_bg, Field);
  border: var(--_bdw) solid var(--_bdc, GrayText);
  border-radius: var(--_bdrs, .2em);
  box-sizing: border-box;
  font-size: 1em;
  height: 1em;
  margin: var(--_m, .1875em .1875em .1875em .25em);
  position: relative;
  width: 1em;

  &::after {
    background: var(--_bga, transparent);
    content: "";
    inset: 0;
    position: absolute;
    mask: var(--_mask) no-repeat center / contain;
    -webkit-mask: var(--_mask) no-repeat center / contain;
  }

  &:checked {
    --_bdc: var(--_bdc--checked, transparent);
    --_bg:  var(--_bg--checked, var(--_accent));
    --_bga: var(--_bga--checked, Field);
  }

  &[role=switch] {
    --_bdc: hotpink;
    --_bdc--hover: transparent;
    --_bdrs: 1em;
    --_bg: #d1d1d1;
    --_bga: Field;
    --_mask: none;
    aspect-ratio: 1.8 / 1;
    border: 0;
    display: grid;
    padding: .125em;
    place-content: center start;
    width: 1.8em;
    &::after {
      border-radius: 50%;
      height: .75em;
      inset: unset;
      position: static;
      width: .75em;
    }
    &:checked {
      --_bg: var(--_bg--checked, var(--_accent));
      justify-content: end;
    }
  }

  @media (hover: hover) {
    &:checked:hover {
      --_bg: var(--_bg--checked-hover, color-mix(in srgb, var(--_accent) 60%, CanvasText 40%));
    }
    &:not(:checked):hover {
      --_bdc: var(--_bdc--hover, color-mix(in srgb, GrayText 60%, CanvasText 40%));
      &[role=switch] {
        --_bg: GrayText;
      }
    }
  }
  @media (prefers-color-scheme: dark) {
    --_accent: #99C8FF;
  }
}
/**


/**
*  Style for the page footer with address information. Note that some
* behaviours are media dependent and defined separately.
**/

footer {
    background-color: #5a3e3e; /* Brighter reddish-brown for a subtle but warm look */
    border-top: 5px solid #4a2f2f; /* Slightly darker reddish border for separation */
    color: #ececee; /* Light font color for readability */
	float: left;
	width: 100%;
	padding: 2rem 0;
	margin: 0;
	bottom: 0;
	margin-top: auto;
	text-align: center;
}

footer a {
    color: #ececee; /* Match the light font color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition for hover */
}

footer a:hover {
    color: #ffffff; /* Slightly brighter on hover */
}

.footerAddress address {
    font-family: "Roboto", sans-serif; /* Consistent font */
    font-size: 0.7rem; /* Correct font size for the address */
    font-style: normal;
    color: #ececee; /* Light font color */
}

.footerAddress ul {
    list-style: none;
    margin: 0;
    padding: 1rem 0 0 0; /* Add spacing */
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

.footerAddress li {
    float: left;
    margin: 0 0.25rem; /* Add spacing between items */
    padding: 0;
}



footer .footerLogo {
    text-align: center;
    width: 100%;
}

footer .footerLogo img {
    height: 1.5em; /* Keep the original logo size */
    width: auto;
}

/**
* Class we use to fix things (better description needed)
*/

.fullWidth {
	width: 100% !important;
}



/**
 * Component: MainImageSlideshow
 */
.MainImageSlideshow > .viewport {
	background-image: transparent;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	z-index: 10;
	max-height:520px;
	text-align:center;
	overflow:hidden;
}
.MainImageSlideshow > .viewport .placeholder {
	padding-top: 50%;
}


/**
 * Section (type): Jumbotron
 */

.section-jumbotron {
	background-color: #2e2e2e;
	background-image: linear-gradient(to bottom right, #535353, #6c6c6c, #4d4d4d);
	background-size: cover; 
	background-position: 50% 50%;
	color: white;
	padding: 0;
}
.section-jumbotron .image-spacer {
	/*padding-top: 40%;*/
	height: 208px;
}
.section-jumbotron .section-content {
	z-index: 10;
	/*position: absolute; /*Once removed since it disturbed other content, but doesn't anymore??? */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-family: "EurostileExtendedBold", arial, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-transform: uppercase;
	text-shadow: 0px 5px 15px rgba(0,0,0,0.2);
}
.section-jumbotron .section-content > * {
}
.section-jumbotron .section-content h1 {
	display: block;
	max-width: 1040px;
	padding: 0 1em;
	text-align: center;
	font-size: 5vw;
	line-height: 1.1;
	letter-spacing: 0.1em;
	margin: 0;
	text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
}
.section-jumbotron .section-content p {
	display: block;
	max-width: 1200px;
	padding: 0 1em;
	text-align: center;
	font-size: 2.2vw;
	line-height: 1.1;
	letter-spacing: 0.1em;
	margin: 0.5em;
}
.section-jumbotron.style-background-grayscale .MainImageSlideshow {
	opacity: 0.7;
}
.section-jumbotron.compact .MainImageSlideshow .viewport .placeholder {
	padding-top: 25%;
}
.section-jumbotron.compact .section-content h1 {
	font-size: 3vw;
}


/**
 * PSWP
 */
.pswp-gallery a {
	text-decoration: none;
}
.pswp-gallery {
	padding-bottom: 2em;
}
.pswp__custom-caption {
	/*background: #876354;*/
	background: rgba(135, 99, 84, 0.7);
	background: rgba(33, 33, 33, 0.7);
	font-size: 0.7em;
	color: #eee;
	width: calc(100% - 64px);
	max-width: 600px;
	padding: 10px 12px;
	border-radius: 6px;
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
}
.pswp__custom-caption::first-line {
	font-weight: bold;
}
.pswp__custom-caption a {
	color: #eee;
	text-decoration: underline;
}
.hidden-caption-content {
	display: none;
  }


/* General styling for the side menu */
.side-menu {
    float: right;
    position: absolute;
    top: 8rem;
    right: 3rem;
    margin-right: auto;
    margin-left: auto;
    max-width: 22rem; /* Compact width */
    width: 25%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
    background-color: #f9f5f3; /* Light beige background */
    border-radius: 8px; /* Rounded corners */
    overflow: visible; /* Prevent content overflow */
    transition: all 0.3s ease-in-out; /* Smooth transitions */
}

/* Styling for top-level menu items */
.side-menu .accordionMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-menu .accordionMenu li {
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #f4ebe6; /* Light beige for top-level items */
    transition: background-color 0.3s ease;
}

.side-menu .accordionMenu label {
	padding-top: 0;
	padding-bottom: 0;
}
.side-menu .accordionMenu a {
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
}

.side-menu .accordionMenu li#menu_mina_sidor {
    background-color: #e5d1c0; /* Slightly darker beige for "Mina Sidor" */
	background-color: #caa39a;
}

.side-menu .accordionMenu a,
.side-menu .accordionMenu label {
    color: #2a2a2a; /* Dark text color */
    font-family: "Roboto", "Tahoma", sans-serif; /* Consistent font family */
    font-size: 0.9rem; /* Slightly smaller font size */
	font-weight: 400;
    text-decoration: none;
    background-color: inherit; /* Match background color of parent */
    transition: color 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}
.side-menu .accordionMenu a {
	display: inline-block;
	width: 80%;
}
.side-menu .accordionMenu span.pi.pi-angle-right + a {
    width: 80%; /* Set width to 80% if preceded by the specific <span> */
}

.side-menu .accordionMenu a {
    width: 100%; /* Default width */
}
.side-menu .accordionMenu label {
	display: block
}

/* Ensure consistent hover effect for <li>, <a>, and <label> */
.side-menu .accordionMenu li:hover,
.side-menu .accordionMenu a:hover,
.side-menu .accordionMenu label:hover {
    color: #333; /* Keep text color consistent */
}

/* Styling for nested menu items */
.side-menu .accordionMenu .group-list li,
.side-menu .accordionMenu .group-list label { 
	background-color: #e5d0cb;
}
.side-menu .accordionMenu .group-list li.current:not(.parent):last-of-type{
    background-color: #e49d9d !important;
    color: #5e463b !important;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}
.side-menu .accordionMenu .group-list li.current:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Slightly darker on hover */
    color: #4a2f2f; /* Muted reddish-brown for hover */
}
/* Should li.current have another style? */
.side-menu .accordionMenu .group-list li:hover,
.side-menu .accordionMenu .group-list a:hover,
.side-menu .accordionMenu .group-list label:hover { 
	background-color: #e49d9d;
}
.side-menu .accordionMenu .group-list .group-list li,
.side-menu .accordionMenu .group-list .group-list label { 
	background-color: #f4eae8;
}
.side-menu .accordionMenu .group-list .group-list li:hover,
.side-menu .accordionMenu .group-list .group-list a:hover,
.side-menu .accordionMenu .group-list .group-list label:hover { 
	background-color: #e49d9d;
}
.side-menu .accordionMenu .group-list .group-list .group-list li,
.side-menu .accordionMenu .group-list .group-list .group-list label {
    background-color: #f9f4f3;
}
.side-menu .accordionMenu .group-list .group-list .group-list li:hover,
.side-menu .accordionMenu .group-list .group-list .group-list a:hover,
.side-menu .accordionMenu .group-list .group-list .group-list label:hover { 
	background-color: #e49d9d;
}
.side-menu .accordionMenu label:has(input[type=checkbox]:checked) + ul {
    /* reset the height when checkbox is checked */
  max-height: 1000px;
}
.side-menu .accordionMenu .localmenu label:has(input[type=checkbox]:checked) + ul {
    /* reset the height when checkbox is checked */
  max-height: 1000px;
}

/* Position the icon to the right */
.side-menu .accordionMenu label > span.pi {
    font-size: 0.8rem; /* Adjust icon size */
    color: #333; /* Match text color */
    transition: transform 0.3s ease, color 0.3s ease;
	float: right;
	line-height: 3.2rem;
}

.side-menu .accordionMenu label:has(input[type="checkbox"]:checked) > span.pi {
    transform: rotate(90deg); /* Rotate icon when expanded */
    color: #6d7bb1; /* Muted purple for expanded state */
}

/* Styling for expanded/collapsed sections */
.side-menu .accordionMenu .group-list,
.side-menu .accordionMenu .group-list .group-list,
.side-menu .accordionMenu .group-list .group-list .group-list {
	height: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

/* Styling for active menu items */
.side-menu .accordionMenu a.active,
.side-menu .accordionMenu label.active {
    background-color: #6d7bb1; /* Muted purple for active state */
    color: #fff;
    font-weight: bold;
}

/* Adjust responsive menu to avoid interference with main menu */
.headerAndMainWrapper .navbar nav .responsive-menu.visible ul.main-menu {
    display: block !important;
}

/* Responsive menu visibility */
.responsive-menu {
    display: none; /* Hidden by default */
}

.responsive-menu.visible {
    display: block !important; /* Show when toggled */
}
aside.side-menu.visible {
    display: block !important; /* Show when toggled */
}


/* To do

Bestämma färg på användarikon/handheld-ikoner
Ska roll/stuga ha någon konvention?
Fixa brytning av menyn vid låg skärmupplösning
Ska storleken på logotypen vara responsiv?
Fixa märkliga beteenden för hover i lokal meny
Bestämma typsnitt och färg i lokal meny
Bestämma färg på pilen i lokal meny (active/inactive)
Bestämma färg/effekt på hover i lokal meny
Ska den lokala menyn försvinna om man klickar utanför den i handheld
Ska ett "hus" (pi-home) läggas in för "Hem" i handheld?
Vad händer om det inte finns några nyheter?
Ska det finnas någon gräns/pagination för nyhetsarkivet?
Bestämma namn på "Mina sidor" (betänk css om det ändras)
Rensa bort bortkommenterad kod och optimera koden
Städa upp/optimera CSS
Fixa stil på inbjudningsmejl
Datum i administrationen (dubbla kalendrar, samt MM-DD-YYYY i nuläget)

*/