@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

.inter-light {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}
.lato-thin {
    font-family: "Lato", serif;
    font-weight: 100;
    font-style: normal;
}
.lato-light {
    font-family: "Lato", serif;
    font-weight: 300;
    font-style: normal;
}
.lato-regular {
    font-family: "Lato", serif;
    font-weight: 400;
    font-style: normal;
}
.lato-bold {
    font-family: "Lato", serif;
    font-weight: 700;
    font-style: normal;
}
.lato-black {
    font-family: "Lato", serif;
    font-weight: 900;
    font-style: normal;
}
.lato-thin-italic {
    font-family: "Lato", serif;
    font-weight: 100;
    font-style: italic;
}
.lato-light-italic {
    font-family: "Lato", serif;
    font-weight: 300;
    font-style: italic;
}
.lato-regular-italic {
    font-family: "Lato", serif;
    font-weight: 400;
    font-style: italic;
}
.lato-bold-italic {
    font-family: "Lato", serif;
    font-weight: 700;
    font-style: italic;
}
.lato-black-italic {
    font-family: "Lato", serif;
    font-weight: 900;
    font-style: italic;
}

.login {
    padding: 16px 32px;
    gap: 10px;
    width: 137px;
    height: 56px;
    background: #027953;
    border-radius: 70px;

    color: white;
    font-family: "Lato", serif;
    font-size: 16px;
}

.login-a::after {
    display: none;
}

.login:hover {
    text-decoration: underline;
}

a {
    position: relative; /* Ensures ::after can be positioned relative to the link */
    text-decoration: none; /* Optional: Removes underline */
    padding-right: 20px; /* Adds space between text and the image */
    display: inline-block; /* Ensures proper spacing and alignment */
    color: #20293C
}

a::after {
    content: ''; /* Required to enable the pseudo-element */
    display: inline-block; /* Makes it behave like an image */
    background-image: url('/static/open-in-new-black.png'); /* Path to your image */
    background-size: contain; /* Ensures the image fits properly */
    background-repeat: no-repeat; /* Prevents tiling */
    width: 16px; /* Set the image width */
    height: 16px; /* Set the image height */
    position: absolute; /* Position it relative to the parent */
    right: 0; /* Align to the right edge of the link */
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Adjust for perfect vertical centering */
}
/* Visited */
a:visited {
    color: #2f3d5b;
    text-decoration: none;
}

/* Hovered */
a:hover {
    color: #262c38;
    text-decoration: underline;
}

#header a {
    color: #FCE8D6;
}
#header a:visited {
    color: #c6b8ab;
    text-decoration: none;
}
#header a:hover {
    color: #f7cba5;
    text-decoration: underline;
}
#header a::after {
    background-image: url('/static/open_in_new.png');
}

.calendar::after {
    content: ''; /* Required to enable the pseudo-element */
    display: inline-block; /* Makes it behave like an image */
    background-image: url('/static/Open-in-calendar.png'); /* Path to your image */
    background-size: contain; /* Ensures the image fits properly */
    background-repeat: no-repeat; /* Prevents tiling */
    width: 20px; /* Set the image width */
    height: 20px; /* Set the image height */
    position: absolute; /* Position it relative to the parent */
    right: 0; /* Align to the right edge of the link */
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Adjust for perfect vertical centering */
}

#header {
    /* Frame 14 */
    width: 100%;
    left: 0px;

    background: #00254C;
}
#header-content {
    padding-left: 36px;
}

/* Default header styling */
.header {
    width: 100%;
    justify-content: space-between;
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: relative;
}

/* Small header styling */
.small-header {
    position: fixed;
    top: 0;
    width: 100%;
    padding-bottom: 10px;
    background: #00254C;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.other-header {
    width: 100%;
    height: auto;
    background: #00254C;
    left: 0px;
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: relative;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    color: white;
}

.other-header a {
    color: #FCE8D6;
}
.other-header a:visited {
    color: #c6b8ab;
    text-decoration: none;
}
.other-header a:hover {
    color: #f7cba5;
    text-decoration: underline;
}
.other-header a::after {
    background-image: url('/static/open_in_new.png');
}
/* Smooth fade-out for large header */
.fade-out {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

/* Smooth fade-in for small header */
.fade-in {
    opacity: 1;
    transform: translateY(0);
}

#close-banner {
    top: 5px;
    right: 5px;
    position: absolute;
    color: white;
}

.logo {
    height: 70px;
}

.map-btn {
    position: relative; /* Ensures ::after can be positioned relative to the link */
    text-decoration: none; /* Optional: Removes underline */
    padding-right: 20px; /* Adds space between text and the image */
    display: inline-block; /* Ensures proper spacing and alignment */
}

.map-btn::after {
    content: ''; /* Required to enable the pseudo-element */
    display: inline-block; /* Makes it behave like an image */
    background-image: url('/static/arrow_back_ios_new (1).png'); /* Path to your image */
    background-size: contain; /* Ensures the image fits properly */
    background-repeat: no-repeat; /* Prevents tiling */
    width: 16px; /* Set the image width */
    height: 16px; /* Set the image height */
    position: absolute; /* Position it relative to the parent */
    right: 0; /* Align to the right edge of the link */
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Default state */
    transition: transform 0.3s ease; /* Smooth rotation animation */
}

.map-btn.open::after {
    transform: translateY(-50%) rotate(180deg); /* Rotates the icon */
}

ul {
    padding-inline-start: 20px;
    padding-inline-end: 20px;
}
li {
    font-family: "Inter", serif;
    font-style: normal;
    font-weight: 350;
    list-style-type: none;
    line-height: 1.4rem;
}
body {
    font-family: "Inter", serif;
    font-style: normal;
    font-weight: 200;
    color: #20293C;
}
h1 {
    color: black;
    font-weight: 300;
}
.event-name {
    font-weight: bold;
}
#header h1 {
    color: white;
}
p {
    color: black;
}
#header p {
    color: #FCE8D6;
}
.header h2 {
    color: white;
    font-size: 30px;
}
.gotTime {
    color: green;
}
.noTime {
    color: red;
}
#date {
    font-family: "Lato", serif;
    font-weight: 400;
    margin-top: 1.4rem;
    background-color: none;
    width:50%;
    vertical-align: top;
    line-height: 2rem;

    padding-left: 20px;
}
#dateW {
    font-family: "Lato", serif;
    font-weight: 400;
    vertical-align: top;
    color: #d10000;
    line-height: 2rem;
    width: 50%;

    padding-left: 20px;
}
form {
    padding-inline-start: 20px;
    padding-inline-end: 20px;
}
#eventor {
    background: rgb(0, 106, 255);
    height: 30px;
}
.event {
    min-width: 60%;
    text-align: top;
}
.tavling.hide {
    display: none;
}
.aktivitet.hide {
    display: none;
}
.traning.hide {
    display: none;
}
#main {
    width: auto;
}
#line {
    background-color: black;
    height: 1px;
}
#title {
    margin-left: 25%;
    color: black;
}
.dropdown {
    position: relative;
    display: block;
}
.dropdown-content {
    display: none;
    position: relative;
    min-width: 160px;
    padding: 8px;
}
.dropdown-content.show {
    display: block;
}
.flex-container {
    display: flex;
    flex-direction: row;
}

.visible {
    display: block;
}
.hidden {
    display: none;
}

.delete {
    padding: 10px 25px;
    gap: 10px;
    width: 100px;
    height: 40px;
    background: rgb(171, 0, 0);
    border-radius: 25px;
    position: absolute;

    color: white;
    font-family: "Lato", serif;
    font-size: 13px;
    font-weight: bold;
    right: -8px;
    top: -8px;
}

.admin-button {
    padding: 10px 25px;
    gap: 10px;
    width: 137px;
    height: 56px;
    background: #027953;
    border-radius: 70px;
    position: relative;

    color: white;
    font-family: "Lato", serif;
    font-size: 16px;
    font-weight: bold;
}

#admin-button::after {
    display: none;
}

.search-container {
    margin-bottom: 20px;
}

#searchBar {
    width: 50%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.event-list {
    display: none;
    list-style: none;
    padding: 0;
}
.event-list.show {
    display: block;
}

.event-item {
    background: #f4f4f4;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}

.event-item.hide {
    display: none;
}

input {
    height: 25px;
    border-radius: 4%;
    border-width: 1.5px;
    background-color: white;
}

label {
    font-family: Arial, Helvetica, sans-serif;
}

form {
    display: flex;
    gap: 12px; /* Adds spacing between checkboxes */
    align-items: center; /* Aligns items properly */
    flex-wrap: wrap; /* Ensures responsiveness */
    margin-top: 5px;
}
.form-container input {
    display: none;
}

.form-container {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.form-container .checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid #00254C;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    margin-left: 8px;
    transition: 0.3s;
}

/* Create a checkmark inside the box */
.form-container input:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
  
/* Change background color when checked */
.form-container input:checked + .checkmark {
background-color: #027953;
border-color: #027953;
}

.container {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.content {
    width: 600px;
}

.dropdown-arrow {
    position: absolute; /* Position the arrow absolutely */
    top: 50%; /* Center vertically relative to the parent container */
    right: 20px; /* Distance from the right edge */
    transform: translateY(-50%); /* Ensure perfect vertical centering */
    width: 20px; /* Adjust the arrow size */
    height: 20px;
    cursor: pointer; /* Add a pointer cursor for interactivity */
    transition: transform 0.3s ease; /* Smooth rotation for dropdown toggle */
}

.dropdown-arrow img{
    width: 100%;
    height: 100%;
}

/* Rotate the arrow when dropdown is open */
.dropdown-arrow.open {
    transform: translateY(-50%) rotate(180deg); /* Rotate arrow downward */
}
/* Container class for anmälda */
.anmälda-container {
    display: flex; /* Enable flexbox */
    align-items: center; /* Align items vertically in the center */
    gap: 10px; /* Add some space between the image and the text */
}

/* Image styling */
.anmälda-bild img {
    display: inline-block;
    vertical-align: middle; /* Ensures image aligns with text */
}

/* Text styling */
.anmälda-container h2 {
    font-size: 16px; /* Adjust text size as needed */
    margin: 0; /* Remove default margin on <h2> */
}
.box-20 {
    /* Frame 20 */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
    gap: 6px;
    isolation: isolate;

    position: relative;

    width: 364px;
   /* height: 75px; */

    border: 2px solid #5D7288;
    border-radius: 12px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Frame 19 */
.box-19 {
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 16px 8px;
    gap: 6px;
    isolation: isolate;

    width: 100%;

    position: relative;

    border: 2px solid #014286;
    border-radius: 12px;

    /* Inside auto layout */
    flex: none;
    order: 3;
    align-self: stretch;
    flex-grow: 0;
}

.tavling-textbox {
    /* Frame 21 */

    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */

    padding: 2px 6px;
    position: absolute;
    width: auto;
    height: 26px;
    left: -8px;
    top: -8px;

    background: #1D4485;
    border-radius: 8px;

    z-index: 2;
}

.aktivitet-textbox {
    /* Frame 21 */

    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */

    padding: 2px 6px;
    position: absolute;
    width: auto;
    height: 26px;
    left: -8px;
    top: -8px;

    background: #027953;
    border-radius: 8px;

    z-index: 2;
}

.traning-textbox {
    /* Frame 21 */

    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */

    padding: 2px 6px;
    position: absolute;
    width: auto;
    height: 26px;
    left: -8px;
    top: -8px;

    background: #E33861;
    border-radius: 8px;

    z-index: 2;
}

.group-textbox {
    /* Frame 21 */

    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */

    padding: 8px;
    position: absolute;
    width: auto;
    height: 26px;
    right: 0px;
    top: -8px;

    z-index: 2;
}

.tavling-text {
    font-family: "Lato", serif;
    font-style: normal;
    font-weight: 800;
    font-size: 14px; /* Adjusted to ensure it fits within the blue box */
    line-height: 1; /* Ensures the text stays vertically aligned */
    text-transform: uppercase;
    text-align: center;
    color: #FFFFFF;
    margin: 0; /* Prevent any margin from affecting alignment */
    padding: 0; /* Prevent padding from affecting alignment */
}

.group-text {
    font-family: "Lato", serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px; /* Adjusted to ensure it fits within the blue box */
    line-height: 1; /* Ensures the text stays vertically aligned */
    text-transform: uppercase;
    text-align: center;
    margin: 0; /* Prevent any margin from affecting alignment */
    padding: 0; /* Prevent padding from affecting alignment */
}

/* For the PWA installation */
#install-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #00254C;
    color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1000;
    text-align: center;
    font-size: 16px;
    min-width: 280px;
}

#install-p {
    color: white;
    font-weight: 200;
}

#install-banner.fade-in {
    opacity: 1;
}

#install-button {
    background: #027953;
    color: white;
    border: none;
    padding: 8px 15px;
    margin-right: 10px;
    border-radius: 25px;
    cursor: pointer;
}

#install-button:hover {
    background: #e0e0e0;
}

.close-banner {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
}

#install-instructions-ios {
    display: none;
    background-color: white;
    position: absolute;
    z-index: 1001;
    width: 90%;
    height: 675px;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Soft shadow */
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#install-instructions-ios.show {
    display: block;
}

#install-instructions-ios span {
    display: flex;
    align-items: center;
}

#install-instructions-ios img {
    margin: 20px;
}

#install-instructions-ios h2 {
    margin: 0px;
}

#close-instructions {
    position: absolute;
    right: 10px;
    top: 10px;
}

.hide {
    display: none;
}

.document-loader {
    width: 100%;
    /*max-width: 320px; */
}

.news-summary {
    width: 100%;
    /*max-width: 320px;*/
}

.news {
    display: none;
}
.news.show {
    display: block;
}

.events {
    display: none;
}
.events.show {
    display: block;
}

.NoE-button {
    border-radius: 0px;
    border-width: 0px;
    background-color: #00254C;
    color: white;
    width: 50%;
    height: 100%;
}

.NoE-button:hover {
    background-color: #253b52;
    border: #00254C;
    border-width: 2px;
    text-decoration: underline;
}

.NoE-button.used {
    background-color: white;
    color: #00254C;
}

.SV-lag-content {
    padding: 20px;
}

.SV-lag-content p {
    margin: 0px;
}

/* Hamburger menu */
:root {
    --accent: #3b82f6;
}

/* Fixed top-right hamburger */
.hamburger {
    position: relative; 
    right: 12px;
    width: 44px; 
    height: 44px; 
    border: 0; 
    background: transparent; 
    cursor: pointer;
    border-radius: 8px; 
    z-index: 1000; /* above header */
}
.hamburger:focus-visible { 
    outline: 2px solid var(--accent); 
    outline-offset: 2px; 
}

.hamburger-box { 
    position: relative; 
    display: inline-block; 
    width: 26px; 
    height: 18px; }
.hamburger-line {
    position: absolute; 
    left: 0; 
    right: 0; 
    height: 2px; 
    background: white; 
    border-radius: 2px;
    transform-origin: center; 
    transition: transform .22s ease, opacity .18s ease, top .22s ease;
}
.hamburger .line1 { top: 0; }
.hamburger .line2 { top: 8px; }
.hamburger .line3 { top: 16px; }
/* Morph to X when open */
.hamburger[aria-expanded="true"] .line1 { top: 8px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .line2 { opacity: 0; }
.hamburger[aria-expanded="true"] .line3 { top: 8px; transform: rotate(-45deg); }

/* Slide-in panel */
.menu-panel {
    position: fixed; top: 0; right: 0; height: 100vh;
    width: min(90vw, 300px); background: #00254C; box-shadow: 0 12px 40px rgba(0,0,0,.25);
    transform: translateX(110%); transition: transform .25s cubic-bezier(.2,.8,.2,1);
    padding: 12px; z-index: 999; /* just under the button */
    overflow-y: auto;
}
.menu-panel.show { transform: translateX(0); }

.menu-list { 
    list-style: none; 
    margin: 0; 
    padding: 8px; 
}
.menu-list a {
    display: block; 
    padding: 12px 14px; 
    border-radius: 10px; 
    text-decoration: none; 
    color: #FCE8D6; 
    font-weight: 600;
}
.menu-list a:hover { background: #00356c; }
.menu-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* prevent background scroll when menu open */
body.no-scroll { overflow: hidden; }

/* A-tags to the same site */
a.native::after {
    display: none;
}

.menu-list-small {
    display: none;
}
.menu-list-small.show {
    display: block;
}

a.dropdown-toggle::after {
    background-image: url('/static/arrow_back_ios_new\ \(1\).png');
    filter: invert(100%);
}
a.dropdown-toggle.open::after {
    transform: rotate(180deg);
}

#header a.dropdown-toggle::after {
    background-image: url('/static/arrow_back_ios_new\ \(1\).png');
    filter: invert(100%);
}
#header a.dropdown-toggle.open::after {
    transform: rotate(180deg);
}

#reload {
    margin-top: 10px;
    margin-left: 20px;
    width: 100px;
    height: 35px;
    background: #027953;
    border-radius: 70px;

    color: white;
    font-family: "Lato", serif;
    font-size: 16px;
}

/* Styles for mobile devices (e.g., screens with a max width of 767px) */
@media (max-width: 767px) {
    body {
      font-size: 16px; /* Larger font-size for mobile */
      width: 100%; /* Adjust width for mobile */
      margin: 0px;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .dropdown-content {
        font-size: 16px;
        min-width: 60%;
    }
    .event {
        min-width: 60%;
    }
    h2 {
        font-size: 16px;
        font-weight: normal;
        font-family: Arial, Helvetica, sans-serif;
    }
    #date{
        vertical-align: top;
        line-height: 1.4rem;
    }
    #dateW {
        vertical-align: top;
        line-height: 1.4rem;
    }
    #eventor {
        height: 18px;
    }
    #header {
        height: 350px;
        width: 100%;
        padding: 0%;
        font-size: 16px;
    }
    h1 {
        font-size: 42px;
        line-height: 120%;
        margin-block-start: 0.4em;
        margin-block-end: 0.4em;
    }
    .content {
        width: 100%;
        padding: 0px;
    }
    .logo-img {
        width: 150px
    }
    .NoE-button {
        font-size: 16px;
    }
}
  
/* Styles for tablets and small laptops (e.g., screens with a min width of 768px and max width of 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        font-size: 22px; /* Adjusted font-size for tablets */
        width: 95%; /* Adjusted width for tablets */
    }
    .dropdown-content {
        font-size: 18px;
    }
    .dropbtn {
        font-size: 20px;
    }
    h2 {
        font-size: 21px;
        font-weight: normal;
        font-family: Arial, Helvetica, sans-serif;
    }
    #header {
        height: 400px;
    }
    .logo-img {
        width: 140px
    }
}
  
/* Styles for computers (e.g., screens with a min width of 1025px) */
@media (min-width: 1025px) {
    body {
        font-size: 18px; /* Smaller font-size for computers */
        width: 100%; /* Adjust width for computers */
    }
    .dropdown-content {
        font-size: 15px;
    }
    .dropbtn {
        font-size: 16px;
    }
    h2 {
        font-size: 17px;
        font-weight: normal;
        font-family: Arial, Helvetica, sans-serif;
    }
    h1 {
        font-size: 42px;
        line-height: 120%;
        margin-block-start: 0.4em;
        margin-block-end: 0.4em;
    }
    #header {
        height: 350px;
    }
    .logo-img {
        width: 120px
    }
}

/*@media (prefers-color-scheme: dark) {
    html {
      filter: invert(100%);
      background-color: white;
    }
    .anmälda-bild {
        filter: invert(100%);
    }
  }*/