:root {
    --body-bg-color: #1a1f1e;
    --content-box-bg-color: rgba(0, 0, 0, 0.6);
    --text-color: white;
    --button-color: #1a1f1e;
    --button-text-color: white;
    --border-color: black;
    --input-color: white;
    --input-border: black;
    --border: 1px;
}

      
body { font-family: Montserrat, sans-serif; background:#ffd700; margin:0; padding:24px; }
        h1 { margin:0 0 12px; font-size: 22px; }
 h2 { margin-bottom:40px; font-size: 22px; color: white;}
    .note {font-size: 14px }
    .row { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
    label { display:block; font-weight:600; margin: 12px 0 6px; }
    input[type="text"], input[type="email"], input[type="date"], textarea, select {
      width:100%; padding:10px 12px; border:1px solid #d6d9dd; border-radius:10px; font-size: 15px;
      box-sizing: border-box;
    }
    textarea { min-height: 110px; resize: vertical; }
    .radios { display:flex; gap:14px; align-items:center; padding:8px 0 2px; }
    .radios label { margin:0; font-weight:500; }
    .alert { padding: 12px 14px; border-radius: 10px; margin: 12px 0; }
    .alert.ok { background:#e9fbef; border:1px solid #b9f0c9; }
    .alert.err { background:#fff0f0; border:1px solid #ffc1c1; }
    .actions { margin-top: 18px; }
    button { padding: 11px 16px; border:0; border-radius: 10px; font-weight:700; cursor:pointer; }
    button[type="submit"] { background:#111827; color:#fff; }
    .hidden { display:none; }
.lon {padding: 10px; border-radius: 10px; background:#f6f7f9; margin-bottom:20px; margin-top:20px;}
.ledare {font-size: 14px; padding: 10px; border-radius: 10px; background:lightblue; margin-bottom:20px; margin-top:20px;}
.stad {font-size: 14px; padding: 10px; border-radius: 10px; background:#f49bf4; margin-bottom:20px; margin-top:20px;}
.aktivitet {font-size: 14px; padding: 10px; border-radius: 10px; background:lightgreen; margin-bottom:20px; margin-top:20px;}
.huvudledare {font-size: 14px; padding: 10px; border-radius: 10px; background:lightyellow; margin-bottom:20px; margin-top:20px;}
table {font-size: 14px;}
th {padding-right: 20px; align-items: left;}
td {padding-right: 20px;}
a {color: black;}
 



       
              
        @media (min-width: 769px)  {
.container {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between; /* Lägg till lite utrymme mellan innehållet */
    width: 100%;
    margin-bottom: 10px; /* Lite utrymme under kolumnen */
}
.wrap { width: 60%; margin: 0 auto; background:#fff; border-radius:12px; padding:22px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }        
.meny { width: 30%; margin-right: 20px; background:#fff; border-radius:12px; padding:22px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.info { line-height: 1.5; width: 70%; margin: 0 auto; background:#fff; border-radius:12px; padding:22px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.meny-mobil { display: none; }            
 .desktop-menu {
            display: block;
              line-height: 2;
   font-size: 16px;
        }

        /* Sidomeny och menyikon för mobil */
        #sideMenu, #menuIcon {
            display: none; /* Döljer från början */
            
        }
          }

   
       
       
       
       
        
        @media (max-width: 768px) {
        
      .container {
    box-sizing: border-box;
    width:100%;
   
        }     
 .wrap { max-width: 760px; margin: 0 auto; background:#fff; border-radius:12px; padding:22px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
 .row { grid-template-columns: 1fr; }         
.meny { display: none; }
.info { max-width: 760px; margin: 0 auto; background:#fff; border-radius:12px; padding:22px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.meny-mobil { width: 100%; margin-top: 0px; }
          .desktop-menu {
                display: none; /* Döljer den vanliga menyn på mobil */
            }

            #menuIcon {
            display: block; /* Visas endast på mobil */
            padding: 0px;
            font-size: 30px;
            cursor: pointer;
            background-color: var(--body-bg-color:);
            text-align: left;
            color: var(--text-color);
            display: flex;
            align-items: center;
            margin-left: 0px;
            

        }
        
        #menuIcon {
    position: relative;
}

#menuText {
    font-size: 10px;
    position: absolute;
    top: 51%;
    left: 75px;
    transform: translate(-50%, -50%);
}

          #sideMenu {
    display: none; /* Startar som dold */
    width: 0;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    overflow-x: hidden;
    transition: width 0.5s;
    padding-top: 10px;
    padding-left: 00px;
    z-index: 1000;
    color: var(--text-color);
    
}


            #sideMenu a {
                display: block;
                padding: 10px;
                color: var(--text-color);
                font-size: 18px;
                color: black;
                text-decoration: none;
                color: var(--text-color);
            }

          
}