/* Se https://www.w3schools.com/howto/howto_css_fixed_footer.asp för grunderna i att få sidfoten på rätt ställe */
* {
    font-family: arial, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    color: #1b1e23;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Main content wrapper */
.container {
}
/* Relative font sizes for different elements */
p {
    
    font-size: clamp(1.4em, 1.8vw, 1.9em); /* Minimum, preferred, maximum */
}
p a {

    font-size: inherit; /* Inherit font size from parent <p> */
}

h1 {
    font-size: clamp(2em, 3vw, 3em); /* Minimum 2rem, preferred 6vw, maximum 5rem */
}

h2 {
    font-size: clamp(1.65em, 2.5vw, 2.7em); /* Minimum 1.75rem, preferred 5vw, maximum 4rem */
}

h3 {
    font-size: clamp(1.5em, 2vw, 2em); /* Minimum 1.5rem, preferred 4vw, maximum 3rem */
}

body {
    margin: 0;
}
.h1_height  {
    font-size: clamp(2em, 3vw, 3em); /* Minimum 2rem, preferred 6vw, maximum 5rem */
    visibility: hidden; /* tar plats men syns inte */
    pointer-events: none; /* säkerhetsåtgärd, ej interaktiv */
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

/* Style the header */
.header {
    color: #fffffffff;
    margin: 6px;
    padding: 0.1vw;
    text-align: center;
    width: 100% - 12px;
    /*background-color: #116a3e; /* For browsers that do not support gradients */
    /*background-image: linear-gradient(to right, #809ac5, #4e6ca8);*/
}
.header p, .header h1 {
    color: #ffffff;
}
.logo-top-left {
    text-align: left; /* Aligns inline or inline-block content (like images) to the left */
    position: absolute;
    top: 1.8vw;
    left: 1em;
    max-width: 200px;
    width: 15%;
}
.logo-top-left img {
    width: 100%;
    height: auto;
    max-height: 60px; /* Ensures the image's height does not exceed 60px */
    max-width: 100%; /* Scales the width proportionally with the height */
    width: auto; /* Maintains aspect ratio */
    height: auto; /* Ensures the aspect ratio is preserved */
}
.centered-text {
    text-align: center;
}
/* * * * * * * Språkval * * * * * * */
.lang-top-right-nav_old {
    position: absolute;
    top: 2vw;
    right: 20px;
    max-width: 50px;
    width: 9%;
    display: inline-flex;   /* gör att innehållet hamnar på samma rad */
    align-items: center;    /* centrerar text och bild vertikalt */
}
.lang-top-right-nav {
    position: absolute;
    top: 2vw;
    right: 20px;

    /* ta bort de som begränsar bredden */
    max-width: none;
    width: auto;

    display: flex;          /* flex funkar bättre än inline-flex här */
    align-items: center;    /* håller text + bild på samma höjd */
    justify-content: flex-end; /* trycker innehållet åt höger */
}

.lang-top-right-nav_old img {
    width: 70%;
    height: auto;
}
.lang-top-right-nav img {
    width: 16px;   /* lagom liten flagga */
    height: auto;
    margin-left: 4px; /* lite luft mellan text och flagga */
}
/* * * * * * * SLUT Språkval * * * * * * */

/* * * * * * * Style the footer * * * * * * */
.footer {
    /*color: #ffffff;*/
    color: #1b1e23;
    position: fixed;
    bottom: 0.4vw;
    padding: 0.9vw;
    /*text-align: center;*/
    text-align: right;
    width: 99%;
    /*background-color: #116a3e; /* For browsers that do not support gradients */
    /*background-image: linear-gradient(to right, #809ac5, #4e6ca8);*/
    font-size: 1.2vw;
    z-index: -1;  /* 👈 lägg bakom annat innehåll */
}
}
.footer p, .footer h1 {
    color: #ffffff;
}
.people-bottom-right {
    position: absolute;
    bottom: 0.6em;
    right: 1.5em;
    max-width: 280px;
    width: 20%;
}

.people-bottom-right img {
    width: 100%;
    height: auto;
}
/* * * * * * * * SLUT Footer * * * * * * */

/* * * * * * * * Innehållet * * * * * * */
.content {
    width: 100%;
}
.column_middle {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 3vw;
    /*width: 100%;*/
}
/* * * * * * * * SLUT Innehållet * * * * * */

/* * * * * * * * * * * Tooltip * * * * * * * * * * */
.show_tooltip {
  border-radius: 50%;
  position: relative;
}

.show_tooltip::before,
.show_tooltip::after {
  --scale: 0;
  --arrow-size: 10px;
  --tooltip-color: #0321fd;
  position: absolute;
  top: 50%;
  left: -0.25rem;
  transform: translateY(-50%) translateX(var(--translate-x, 0)) scale(var(--scale));
  transition: 150ms transform;
  transform-origin: right center;
}

.show_tooltip::before {
  --translate-x: calc(-100% - var(--arrow-size));
  /*font-size: 1.2vw;*/
  font-size: clamp(0.8em, 1.1vw, 1.2em); /* Minimum, preferred, maximum */ 
  content: attr(title-tooltip);
  color: white;
  padding: .5rem;
  border-radius: .3rem;
  text-align: center;
  width: max-content;
  width: 200px;
  max-width: 130%;
  background: var(--tooltip-color);
}

.show_tooltip:hover::before,
.show_tooltip:hover::after {
  --scale: 1;
}

.show_tooltip::after {
  --translate-x: calc(-1 * var(--arrow-size));

  content: '';
  border: var(--arrow-size) solid transparent;
  border-left-color: var(--tooltip-color);
  transform-origin: left center;
}
/* * * * * * * * * SLUT Tooltip * * * * * * * * */

/* * * * * * * * * Input-box * * * * * * * * */
input[type=text], select {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}
/* * * * * * * * * SLUT Input-box * * * * * * * * */

/* * * * * * * * * Formulär * * * * * * * * */
div.card_border {
  border-radius: 4px;
  border: 1px solid #4e6ca8;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-top: 0px !important;
  width: 80%;
  font-size: 0.8em;
}
.radio_block {
    padding-left: 40px;
    text-indent: -35px;
    padding-bottom: 10px;
}
.radio_block input {
    width: 20px;

}
details>summary {

  list-style: none;
  cursor: help;
  text-indent: 0.01em;
}
summary::-webkit-details-marker {
  display: none
}

summary::after {
  content: ' ↴';
}
details[open] summary:after {
  content: " ↧";
}
.msg_ok {
  color: green;
  /*font-size: 0.7em;*/
  font-family: Arial, Helvetica, sans-serif;
}
/* * * * * * * * * SLUT Formulär * * * * * * * * */


/* * * * * * * * * Bilder som ska skalas * * * * * * */
.scaled_image {
    width: 40vmin;
    height: auto;
    max-width: 300px;
}
/* * * * * * * * * SLUT Bilder som ska skalas * * * * * * */

.stars {
    display: inline-block;
}
.star {
    font-size: 50px;
    color: lightgray;
    cursor: pointer;
    transition: color 0.2s;
}
.star:hover, .star.selected {
    color: gold;
}