@import "variables.css";

/* Using a string */

/* CSS Variables generated from Kigen.design/color */
/* root {
	--cumin-50: #fcf8f7;
	--cumin-100: #f5edeb;
	--cumin-200: #f1e3e0;
	--cumin-300: #f6e1db;
	--cumin-400: #fadcd4;
	--cumin-500: #fed6cb;
	--cumin-600: #ffcec0;
	--cumin-700: #ffc5b3;
	--cumin-800: #ffbaa4;
	--cumin-900: #ffaf96;
	--cumin-1000: #ffa487;
	--cumin-1100: #ff9576;
	--cumin-1200: #ff8462;
	--cumin-1300: #f67857;
	--cumin-1400: #e56b4c;
	--cumin-1500: #d15d40;
	--cumin-1600: #bc4f34;
	--cumin-1700: #a44028;
	--cumin-1800: #8b301a;
	--cumin-1900: #792913;
} */

/* Debug */
/* *,
*:before,
*:after {
  outline: solid 1px;
} */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-weight: 400;
	background-color: #fafcfc;
	position: relative;
}

html {
	font-family: "Nunito", sans-serif !important;
	line-height: 1.44rem;
	color: var(--textColor);
	scroll-behavior: smooth;
}


.center {
	margin-inline-start: auto;
	margin-inline-end: auto;
}

.size-50 {
	width: 50%
}

.size-80 {
	width: 80%
}

.size-70 {
	width: 70%
}

a {
	color: var(--linkColor);
	text-decoration: underline;
}

a:focus,
a:visited,
a:hover,
a:active {
	text-decoration: none;
}


/* .box:hover{
border: 0.125rem solid #1e1b19;
    box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #1e1b19;
} */

/*
To fullfil Web Content Accessibility Guidelines
only implemented on index.html
*/
.skip-to-main-content-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1em;
	background-color: whitesmoke;
	color: var(--redColor);
	opacity: 0;
}

.skip-to-main-content-link:focus {
	left: 50%;
	transform: translateX(-50%);
	opacity: 1;
}

/* HEADER */

/* Added 2025-02 */
#head {
	transition: margin-top 1s ease-in-out;
}

header {
	inline-size: 100%;
	inset-block-start: 0;
	position: sticky;
	z-index: 99;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	gap: 0.2rem 1rem;
	background-color: var(--redColor);
	box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
	/* Added 2025-01 */
	background-image: linear-gradient(to right, var(--redColor), #B74E36);

}

header h1 {
	color: white;
	margin-block-end: 0;
	display: block;
	margin-inline-start: 3rem;

}

header a {
	color: white;
	border-bottom: solid 2px transparent;
	padding: 0.2rem;
	transition: border-bottom 0.5s ease-out;
}

header a,
header a:hover,
header a:visited,
header a:focus,
header a:active {
	text-decoration: none;
	color: white;
}

header a:hover {
	text-decoration: none;
	/* modified with 2px => 4px 2023-12-26 */
	border-bottom: solid 4px white;
	/* color: var(--redColor);
   background-color: white; */
}

/*
header a {
	color: #ccc;
	text-decoration: none;
}
header a {
	border-bottom: 1px solid rgba(155, 155, 155, 0.4);
	padding-bottom: 2px;
	--bg-h: 2px;
	background: linear-gradient(0deg, orange, orange) no-repeat right bottom / 0 var(--bg-h);
	transition: background-size 0.8s cubic-bezier(0.7, 0.3, 0, 1);
}
header a:hover,
header a:focus-visible {
	background-size: 100% var(--bg-h);
	background-position-x: left;
}
*/

header li {
	list-style: none;
}

/* Symbol for an external link  */
a.external-link::after {
	content: "\00a0";
	inline-size: 0.8rem;
	/* block-size: 11px; */
	margin-inline-start: 0.2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' inline-size='16' block-size='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}

/* a[data-link] {
	color: burlywood;
} */
/* a[class~="external-link"] {
	color: #ffc300;
} */
/* /* a:is(.external-link) {
	color: brown
} */

/* a:where(.external-link)+ {
	color: chartreuse;
} */

/* p:has(a):has(.external-link) a {
	color: greenyellow
} */

/* Define bolded text */
.b {
	font-weight: 600;
}

.pdf {
	text-transform: capitalize;
	font-size: small;
}

.pdf::after {
	content: " (PDF)";
	/* color: #F40F02; */
	/* display: inline-block;
	content: ' ';
	background-image: url('../img/pdf.svg');
	background-size: 18px 18px;
	height: 18px;
	width: 18px; */
}


/*
a[href$=".pdf"]::after {
	content: " 📄";
	display: inline-block;
	text-decoration: none;
} */

span+p {
	margin-block-start: 0;
}

/* span:empty {
	margin: 0;
} */

span.house-color {
	display: inline-block;
	font-size: small;
	inline-size: 2rem;
	border: 1px solid var(--redColor);
	background-color: var(--redColor);
}

h2 {
	color: var(--h2Color);
	margin-block-start: 0;
	margin-block-end: 0;
	font-size: 1.2rem;
}

.item {
	border-radius: 0.4rem;
}

.item-header {
	color: var(--redColor);
	margin-block-start: 0;
	margin-block-end: 0.8rem;
}

.maion h2.item-header:has(+ div) {
	margin-block-end: 1rem;
}

h2.item-header:has(+ img) {
	margin-block-end: 2rem;
}

h2.item-header:has(+ picture) {
	margin-block-end: 1.2rem;
}

h3 {
	color: var(--h2Color);
	margin-block-start: 0;
	margin-block-end: 0;
	font-size: 1rem;
}

h4 {
	color: var(--h4Color);
	margin-block-end: 0.5rem;
}

.dotColor {
	color: var(--dotColor);
}

.button {
	border-radius: 5%;
	background-color: var(--redColor);
	/* #fbeced*/
	padding: 0.375rem 0.75rem;
	font-size: 0.8rem;
	color: white;
	border: 1px solid var(--redColor);
	transition: all 0.5s ease-out;
}

a.button {
	text-decoration: none;
	color: white;
}

.button:hover,
.button:focus {
	color: var(--redColor);
	background-color: white;
}

.button:focus-visible {
	/* border: 2px dashed var(--redColor); */
	outline: none;
}

.button.get {
	background-color: var(--btnColor);
	padding: 0.2rem 0.2rem;
	font-size: 0.8rem;
	color: white;
	border: 2px solid var(--btnColor);
	border-radius: 5px;
}

.button.get:before {
	content: "Hämta";
	/* content: "Hämta"; */
}

.button.get:hover {
	color: var(--btnColor);
	background-color: white;
	font-weight: 600;
}

/* Currently not used
.icon-home {
  block-size: 20px;
  inline-size: 20px;
  fill: #fff;
  color: white;
}
.icon-hamburger {
  block-size: 20px;
  inline-size: 20px;
  fill: #fff;
}
#hamburger {
  visibility: hidden;
}
.icon-external-link {
  block-size: 12px;
  inline-size: 12px;
}
.icon-right-arrow {
  block-size: 113px;
  inline-size: 33px;
}
*/

/* Google translate */
.uk-flag {
	block-size: 15px;
	inline-size: 25px;
}

li#uk-flag a,
li#uk-flag a:visited,
li#uk-flag a:focus {
	text-decoration: none;
	border-bottom: 0px;
}

li#uk-flag a:hover {
	opacity: 100%;
}

/* - */

.icon-fb {
	position: relative;
	inset-block-start: 0.2rem;
	block-size: 20px;
	inline-size: 20px;
}

/* ::popover-open {
  inline-size: 300px;
  block-size: min-content;
  padding: 0 10px;
  border-radius: 10px;
  border-color: var(--redColor);
} */

::backdrop {
	backdrop-filter: blur(1px);
}

.alert {
	background-color: white;
	inline-size: 100%;
	padding: 0.4rem;
	font-size: small;
	border: 0px;
	border-left: 6px solid #f44336;
	text-align: left;
	position: relative;
}

/* Not used */
/* .alert:after {
    content:'';
    inset-block-start:0;
    bottom:0;
    right:0;
    inline-size:70%;
    background: linear-gradient(90deg ,transparent,rgb(77, 7, 7));
    position:absolute;
    z-index:1;
    pointer-events:none;
  } */

/* Specify current page */
.current {
	font-weight: 600;
	text-decoration: none;
	border-bottom: solid 2px white;
	padding: 0.2rem;
}



/*
Check if nav has a hover =>
nav:has(a:hover) a:not(:hover) {
	opacity: 0.5;
}
or
ul:has(a:hover) a:not(:hover) {
	opacity: 0.5;
}
	 */

nav ul {
	margin-inline-start: 3rem;
	margin-inline-end: 1rem;
	padding: 0%;
	/* Modified 2025-01-05 from flex => inline-flex*/
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0 1rem;
}


/* #nav {
	container-type: inline-size;
	container-name: navigate;
	border: 1px dotted white;
}

@container navigate (width <600px) {
	nav ul {
		background-color: #f44336;
	}
} */


/* nav ul li.mnu1::before {
  content: "\2302";
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
} */

.hidden {
	visibility: hidden;
}

.visible {
	visibility: visible;
}

.show {
	display: block;
}


/* nav li:lastchild { */
nav li:nth-child(9) {
	margin-inline-start: auto;
	margin-inline-end: 2rem;
}

section article:not(:first-child) {
	margin-block-start: 2rem;
}

summary {
	color: var(--h4Color);
	font-weight: 600;
}

details {
	border-bottom: 1px solid #eee;
	margin-block-end: 1rem;
	/* Change above to get a more compact view */
}

details summary {
	cursor: pointer;
}

details summary::-webkit-details-marker {
	display: none;
}

details>summary {
	list-style: none;
}

details summary::marker {
	display: none;
}

details summary:before {
	content: " + ";
	color: var(--dotColor);
	float: left;
	margin-inline-end: 10px;
}

details[open] summary:before {
	content: " - ";

}

details[open] summary~* {
	animation: open 0.8s ease-in-out;
}


@keyframes open {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes close {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}


main:is(.template,
	.index,
	.about,
	.docs,
	.contacts,
	.info,
	.neighborhood,
	.news,
	.todo,
	.others,
	.newowner,
	.links)

/* MAIN CONTENT
  Display grids */
/* main.template,
main.index,
main.about,
main.docs,
main.contacts,
main.info,
main.neighborhood,
main.news,
main.todo,
main.others,
main.newowner  */
	{
	display: grid;
	gap: clamp(0.5vw, 1vw, 2vw);
	max-inline-size: 70rem;
	margin: auto auto;
	margin-block-start: 2rem;
}


main.newowner {
	max-inline-size: 50rem;
}

main a:hover {
	text-decoration: none;
}

/* Specify layout of different pages */
main.index {
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

main.others {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

main.about {
	grid-template-columns: 2fr 1fr;
	align-items: flex-start
}

main.docs {
	grid-template-columns: 4fr 2fr;
	align-items: flex-start
}

main.docs .protocol {
	grid-row: span 2;
}

main.info {
	grid-template-columns: 3fr 2fr;
	/* Added alignment 23 march 2025 */
	align-items: flex-start
}

main.contacts {
	grid-template-columns: 2fr 1fr;
}

main.neighborhood {
	grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
	align-items: flex-start;
}

main.news {
	grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
	align-items: flex-start
}

main.newowner,
main.links {
	grid-template-columns: 1fr
}

/* Specify grid items */

.item {
	padding: 1rem;
	background-color: white;
	margin: min(1vw, 0.5rem);
	box-shadow: none;
	border: 1px solid #e8ebed;
	transition: box-shadow 0.5s;
}

.item:hover {
	/* box-shadow: 0 1px 2px 0 #e8ebed;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* If we want to hide other sections
main:has(section:hover) section:not(:hover) {
	opacity: 40%;
} */

.item.color {
	background-color: white;
}

#welcomeItem {
	background-color: var(--firstItemC);
	position: relative
}

.item img {
	max-inline-size: 100%;
	border-radius: 2.5%;
	/* Modified 2023-10-22 */
	object-fit: cover;
	position: relative;
	display: block;
	transition: transform 0.9s ease;
}

.img-wrapper {
	border-radius: 12px;
	overflow: hidden;
}

.index .item img:hover {
	/* filter: brightness(110%) contrast(110%); */
	transform: scale(1.1);
	border-radius: 2.5%;
}

.item .content {
	block-size: 100%;
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.item div.info,
div.welcome.item {
	flex: 1 1 auto;
}

/* Page Kontakter */
main.contacts .styrelse {
	max-inline-size: 100%;
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	justify-content: flex-start;
	flex: 1;
	/* block-size: 3rem;  Modified 20205-12-16*/
}

.address {
	font-variant-caps: normal;
}

p.post,
p.address {
	margin-block-start: 0;
	margin-block-end: 0;
	position: relative;
}

main.contacts .styrelseuppdrag .post>p {
	block-size: 1rem;
}

main.contacts .styrelse .post {
	inline-size: 33%;
}

main.contacts .styrelse .post>p {
	margin: 0;
}

main.contacts span.phone {
	cursor: pointer;
	color: var(--redColor);
}

main.contacts span.phone:hover {
	color: var(--barColor);
}

main.contacts span.phone:hover::after {
	content: "\0020" attr(data-phone);
	background-color: var(--barColor);
	color: black;
	position: absolute;
	left: 1rem;
	bottom: 1.5rem;
	inline-size: 8rem;
	text-align: center;
	padding: 0.3rem;
	z-index: 99;
	border-radius: 0.3rem;
}


/* Divs for API (Artportalen) */
#oldObservations,
#yesterday {
	display: inline-flex;
	gap: 0.2rem;
	flex-wrap: wrap;
	/* display: inline-block; */
	font-size: small;
	margin-inline-start: 0.5rem;
	/* columns: 2;
	column-rule: 1px solid #444; */

}

._4hflex {
	display: flex;
	gap: 1%;
	align-content: center;
	justify-content: space-evenly;
	flex-wrap: nowrap;
}

._4hflex img.aitem {
	opacity: 50%;
	flex: 30%;
	block-size: 15rem;
	overflow-y: hidden;
	object-fit: cover;
}

._4hflex img:hover {
	opacity: 100%;
}

._4hflex:has(img:hover) img:not(:hover) {
	opacity: 50%;
}

#fadingImage img {
	transition: transform 0.5s ease-in-out;
}

/* For google charts */
#budgetbar,
#budgetpie,
#piechart_diff {
	inline-size: 100%;
	block-size: 400px;
}

/* For Mozilla Google charts  */
@-moz-document url-prefix() {

	#budgetbar,
	#budgetpie,
	#budgetcompare {
		block-size: fit-content;
	}
}

span[data-tool-tip] {
	position: relative;
	cursor: help;
	text-decoration-line: underline;
	text-decoration-style: dashed;
	text-decoration-color: var(--linkColor)
}

span[data-tool-tip]::after {
	min-inline-size: 5rem;
	content: attr(data-tool-tip);
	display: inline-block;
	/* inline-size: 100%; */
	position: absolute;
	background-color: white;
	font-weight: 500;
	font-size: small;
	padding: 0.3rem;
	border-radius: 0.35rem;
	/* border: 2px solid var(--redColor); */
	/* https: //getcssscan.com/css-box-shadow-examples */
	box-shadow: rgba(99, 99, 99, 0.2) 4px 4px 8px 4px;

	color: var(--redColor);
	bottom: 0;
	left: 0;
	transform: scale(0);
	/* transition: 0.5pics bottom ease-out; */
}

span[data-tool-tip]:hover::after {
	transform: scale(1);
	bottom: 100%
}

span[data-info] {
	position: relative;
	display: inline-block;
	text-decoration-line: underline;
	text-decoration-style: dashed;
	text-decoration-color: var(--linkColor);
}

span[data-info]::after {
	content: attr(data-info);
	position: absolute;
	top: -100%;
	padding: 0.2rem;
	left: 0;
	background-color: white;
	border: 1px solid var(--redColor);
	border-radius: 0.2rem;
	color: var(--redColor);
	z-index: 99;
	bottom: 0;
	left: 0;
	transform: scale(0);
	transition: 1s bottom ease-out;
}

span[data-info]:hover::after {
	transform: scale(1);
	bottom: 100%
}


/*
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted var(--redColor);
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: var(--redColor);
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	top: -5px;
	left: 105%;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}
*/


/* Google calendar - setup currently not working*/
.view-cap,
.view-container-border {
	background-color: var(--redColor) !important;
}

object {
	inline-size: 100%;
	block-size: 320px;
}

/* .popup {
  position: absolute;
  display: flex;
  block-size: auto;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  inline-size: clamp(12rem, 60vw, 48rem);
  flex-direction: row;
} */

.footer {
	display: block;
	block-size: 4rem;
	text-align: center;
	font-size: small;
	color: lightgrey;
}

.popup .content {
	z-index: 100;
	flex: 1 1 100%;
}

.popup img {
	inline-size: 20rem;
}

.show {
	visibility: visible;
	animation: fadeIn 1s;
}

select {
	background-color: white;
	border-radius: 0.2rem;
	background: none;
	padding: 0.3rem;
	border: solid 1px #ddd;
	text-decoration: none;
}

details select {
	margin-block-start: 0.2rem;
}

select option {
	/* color: var(--redColor); */
	background-color: white;
	transition: all 300ms ease;
}

/* Tests */

/* select,
::picker(select) {
	appearance: base-select;
}

select::picker-icon {
	display: none;
}

select {
	background: linear-gradient(135deg,
			rgba(40, 40, 50, 0.4) 0%,
			rgba(60, 60, 70, 0.25) 50%,
			rgba(50, 50, 60, 0.35) 100%);
	backdrop-filter: blur(12px) saturate(180%);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.2),
		inset 0 1px 1px rgba(255, 255, 255, 0.15),
		inset 0 -1px 1px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: green;
	min-inline-size: 12rem;
}

::picker(select) {
	background: transparent;
	border: none;
	box-shadow: none;
	overflow: visible;
}

option::checkmark {
	content: "●";
	color: va(--redColor);
} */


option:hover {
	color: white;
	background-color: var(--redColor);
}

details.newsItem p {
	margin-block-start: 0px;
	margin-inline-start: 1rem;
}

/* From https://cssloaders.github.io/ */

#spin.loader {
	inline-size: 48px;
	block-size: 48px;
	border: 5px solid var(--redColor);
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	margin-inline-start: 40%;
	box-sizing: border-box;
	animation: spin-rotation 1s linear infinite;
	z-index: 120;

}

@keyframes spin-rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


/* https://css-loaders.com/?utm_source=CSS-Weekly&utm_campaign=Issue-570&utm_medium=web */
/* HTML: <div class="loader"></div> */
/* .loader {
  color: #000;
  inline-size: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
  transform: translateX(-38px);
  animation: l21 0.5s infinite alternate linear;
}

@keyframes l21 {
  50% {
    box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px;
  }
  100% {
    box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px;
  }
} */

.updated {
	font-size: small;
	color: gray;
	margin: 0;

}

.more2read {
	color: black;
}

.footnote {
	color: grey;
	font-size: smaller;
}

span.footnote::before {
	content: "";
}

p.note {
	background-color: var(--post-it-color);
	padding: 0.4rem;
}

/* details.newsItem:nth-child(even) {
  background-color: whitesmoke;
} */

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

main.whatsnew {
	font-size: 0.8rem;
}

dialog {
	border-radius: 1rem;
	border: 3px solid var(--redColor);
	max-inline-size: 40vw;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

div.dialogWrap {
	position: relative;
	inset-block-start: 1rem;
}

/* dialog::backdrop {
	animation: fadeDialog 0.5s ease forwards;
} */

/* .corner {
	position: absolute;
	inset-block-start: 1rem;
	right: 1rem;
	padding: 0.2rem 0.4rem;
	border-radius: 50%;
} */


@keyframes fadeDialog {
	0% {
		background-color: transparent;
	}

	100% {
		background-color: rgb(0, 57, 37, 0.7);
	}
}

#google_translate_element {
	display: inline;
}

option:checked {
	background-color: var(--redColor);
	color: white;
}

/*
#google_translate_element {
  display: flex;
  align-items: center;
}
#google_translate_element::before,
#google_translate_element::after {
  flex: 1;
  content: "";
  padding: 1px;
  background-color: var(--btnColor);
  margin: 10px;
}
*/
#google_translate_element select {
	font-size: small;
}

.mail {
	color: var(--textColor)
}

a[href^="mailto:"] {
	text-decoration: none;
	color: var(--textColor);
}


a[href^="mailto:"]::after {
	color: var(--redColor);
	content: '✉';
	margin-inline-start: 0.5rem;
}

.printBtn {
	float: right;
	border: none;
	background-color: transparent;
	color: var(--redColor)
}

#links {
	margin-top: 2rem;
	;
}


/* Smart find  */
a.find:hover {
	border: none;
}

li a.find {
	color: var(--redColor);
	background-color: white;
	border-radius: 0.2rem;
	border: 0px
}

span.angleDown {
	transform: rotate(90deg);
	display: inline-block;
}

.dropdown {
	position: relative;
	transition: none;
}

.dropdown-content {
	display: none;
	opacity: 0;
	position: absolute;
	/* background-color: var(--redColor); */
	background-color: #ffc300;
	padding: 0.2rem;
	min-inline-size: var(--dropdowninline-size);
	left: calc(-1/3*var(--dropdowninline-size));
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

div.dropdown-content a {
	display: block;
	color: black;
	/* border: 1px solid var(--redColor); */
	border: 1px solid #ffc300;
}


.dropdown:hover .dropdown-content {
	display: block;
	animation: show 1s forwards;
}

.dropdown:focus-within .dropdown-content {
	display: block;
	animation: show 1s forwards;
}

@keyframes show {
	100% {
		opacity: 1;
		display: block;
	}
}

.dropdown-content a:hover {
	background-color: white;
	/* color: var(--redColor); */
	color: black
}


.colorRed {
	color: var(--colorRed)
}

.highlight {
	display: inline-block;
	background: linear-gradient(100deg,
			#ffffaf00 1%,
			#ffffaf 2.5%,
			#ffffaf80 5.7%,
			#ffffaf1a 93%,
			#ffffafb4 95%,
			#ffffaf00 98%),
		linear-gradient(182deg, #ffffaf00, #ffffaf4d 8%, #ffffaf00 15%);
}

#go2Top {
	display: none;
	position: fixed;
	bottom: 20px;
	width: fit-content;
	right: 20px;
	padding: 0.3rem;
	z-index: 99;
	border: 1px solid #ffcc22;
	background-color: #ffcc22;
	/* color: white; */
	text-align: right;
	cursor: pointer;
	font-weight: 800;
	border-radius: 10%;
}

#go2Top:hover {
	border: 1px solid #ddaa00;
	background-color: #ddaa00;

}

.newowner {
	>.item {
		columns: 2;
		column-rule: 1px solid #444;

		>#headerOfPage,
		>#footerOfPage {
			column-span: all;
			text-align: center;
		}

		>.summary {
			font-size: small;
			border: 1px solid #444;
			padding: 0.3rem;
			display: inline-block;
		}
	}
}


/* ----- Media part ---- */


@media only screen and (max-width: 570px) {

	h1 {
		/* font-size: clamp(1rem, 1vh, 1.5rem);
    */
		--size: clamp(1rem, 5vw, 2rem);
		font-size: round(down, var(--size), var(--round-interval, 2px));
	}


	nav ul {

		--size: clamp(1rem, 1vh, 1.5rem);
		font-size: round(down, var(--size), var(--round-interval, 2px));

		gap: 0.4rem;
		margin-inline-start: 1rem;
		margin-inline-end: 1rem;
	}

	header h1 {
		margin-inline-start: 1rem;
	}

	/* li:has(a):has(.current) {
		background-color: white;
	} */

	/* li:has(a):has(.current) a {
		color: var(--redColor);
		text-decoration: none;
	}  */

	.item {
		margin: auto 2vw;
	}

	dialog {
		max-inline-size: 80vw;
	}

	.current {
		/* font-weight: normal; */
		border-bottom: 0px;
	}

	.current::before {
		content: "\2023  "
	}

	.printBtn {
		display: none;
	}

	/* Remove icon for small screens */
	a[href^="mailto:"]::after {
		content: '';
	}
}

@media only screen and (max-width: 640px) {

	main.contacts .styrelse {
		inline-size: 100%;
		flex-direction: column;
	}

	/* Modified 2025-02 */
	main.contacts .styrelse,
	main.contacts .valberedning,
	main.contacts .styrelseuppdrag {
		display: grid;
		grid-template-columns: 5fr 5fr 0fr;
		row-gap: 0;
	}

	main.contacts .styrelse p.head,
	main.contacts .valberedning p.head,
	main.contacts .styrelseuppdrag p.head {
		margin-block-start: 1rem;
		grid-column-start: 1;
		grid-column-end: span 3;
	}

	/* ----- */

	main.contacts .styrelse .post {
		inline-size: 100%;
	}

	section article:not(:first-child) {
		margin-block-start: 1rem;
	}

}

@media only screen and (max-width: 760px) {

	main.contacts,
	main.about,
	main.docs,
	main.info,
	main.neighborhood,
	main.about,
	main.news,
	main.newowner {
		grid-template-columns: 1fr;
	}

	header {
		padding-inline-start: 0.5rem;
	}
}

@media only screen and (max-width: 850px) {
	header ul {
		display: grid;
		grid-template-columns: 1.2fr 1.5fr;
		row-gap: 0.3rem;
	}
}


@media print {

	#print {
		border: none;
	}

	main.newowner a {
		text-decoration: none;
	}

	main.newowner a::after {
		content: " (" attr(data-link) ") ";
		font-size: small;
	}

	header,
	.printBtn,
	.footer {
		display: none
	}

	main.newowner h2:before {
		display: block;
		content: 'Boplatsens samfällighetsförening';
		font-size: 120%;
		margin-block-end: 1rem;
	}

	a.link {
		font-size: 20px
	}

	p.summary {
		line-height: normal;
	}
}


/* Consider */

/* Extra small devices (phones, 600px and down)
@media only screen and (max-width: 600px) {...}

Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (max-width: 600px) {...}

Medium devices (landscape tablets, 768px and up)
@media only screen and (min-width: 768px) {...}

Large devices (laptops/desktops, 992px and up)
@media only screen and (min-width: 992px) {...}

Extra large devices (large laptops and desktops, 1200px and up)
@media only screen and (min-width: 1200px) {...}
*/