:root {
    --body-bg-color: #f4f4f4;
    --content-box-bg-color: #ffffff;
    --text-color: black;
    --button-color: white;
    --button-text-color: black;
    --border-color: #ccc;
    --input-color: white;
    --input-border: black;
    --border: 1px;
}

.dark-mode {
    --body-bg-color: #1E1E2E;
    --content-box-bg-color: #27293D;
    --text-color: white;
    --button-color: black;
    --button-text-color: white;
    --border-color: black;
    --input-color: none;
    --input-border: black;
    --border: none;
    
}



        
        
        label {

            font-family: 'Montserrat'; font-size: 11px; font-weight: bold; text-transform: uppercase;

        }
        
        .nedrakning-style {

            font-family: 'Montserrat'; font-size: 16px; font-weight: bold; text-transform: uppercase;
        }
        
        

        h2 {
            font-size: 15px;
            
        }

        



        th, td {

            border: none;
            padding: 5px;
            text-align: left;
            

        }



        th {

            background-color: var(--body-bg-color);

        }



        .group-toggle {

            cursor: pointer;

            background-color: var(--body-bg-color);

            padding: 5px;

            margin-bottom: 5px;

            font-weight: bold;
            box-sizing: border-box;

        }



        .group-content {

            display: none; /* Groups are closed by default */
            width: 100%;
            

        }
        
        .product-details {
            width: 100%;
        }
        
        
        .input-300 {

            height: 30px; /* Justera höjden här */
            
            width: 300px;


            font-family: 'Montserrat'; font-size: 14px;
            
            
            
        }   


        .gruppnamn {
    width: 100%; /* 30% av bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 10px;
    background-color: var(--content-box-bg-color);
    display: flex;
    box-sizing: border-box;
    justify-content: space-between; /* Lägg till lite utrymme mellan innehållet */
    
}
        

        

        .form-section {

            margin-bottom: 20px;

            padding: 10px;

           

            

        }
        
        .input-number_e, .button_sku {
    vertical-align: middle;
}

.theme-toggle-container {
    display: flex;
    justify-content: flex-end; /* Högerjustera innehållet */
    align-items: center;
    gap: 10px; /* Mellanrum mellan texten och switchen */
    font-size: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 17px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(13px);
}
        
        @media (min-width: 769px)  {
            
            
            .over {
                
    display: flex;
    box-sizing: border-box;
    width: 100%;
    
}

.main {
            
    width: 100%;
    box-sizing: border-box;
}

.meny {
    width: 10%; /* 30% av bredden */
    box-sizing: border-box;
   border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    margin-right: 20px;
    
   
}



         .vinst {

            font-family: 'Montserrat'; font-size: 40px; font-weight: bold; color: white;

        }       
            
            
            
            body {

            font-family: 'Montserrat'; 
            font-size: 14px;
            margin-left: 20px;
            margin-top: 20px;
            margin-right: 20px;
            background-color: var(--body-bg-color);
            color: var(--text-color);
            
            
        }
        
        table {

            width: 100%;

            border-collapse: collapse;

            border: 0px solid;

            border-color: var(--body-bg-color);
            font-size: 12px;

        }
        
    .redigera-div {
    width: 50%;                      /* Bredden är 80% av sidan */
    margin: 0px;               /* Centrerar horisontellt och lägger till lite utrymme upp och ner */
    background-color: var(--content-box-bg-color);       /* Bakgrundsfärg för visuell effekt */
    padding: 0px;                   /* Lägg till lite padding för innehållet */
    text-align: left;                /* Justera texten till vänster */
    

}

.femtio-v-container {
            
            
            
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    width: 50%;
    margin-right: 10px; /* Lite utrymme mellan kolumnerna */
     box-sizing: border-box;
     background-color: var(--content-box-bg-color);
            
            }
            
.femtio-v-container-g {
            
            
            
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    width: 50%;
    margin-right: 10px; /* Lite utrymme mellan kolumnerna */
     box-sizing: border-box;
     background-color: #e3ffd6;
            
            }
            
    .femtio-h-container {
            
            
            
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    width: 50%;
     box-sizing: border-box;
     background-color: var(--content-box-bg-color);
    
            
            }
            
    .main-container {
            
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    width: 70%;
    margin-right: 10px; /* Lite utrymme mellan kolumnerna */
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
    
    }
    .diagram-forsaljning {
            
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    width: 60%;
    margin-left: 10px; /* Lite utrymme mellan kolumnerna */
    box-sizing: border-box;
    background-color: white;
    color: black;
            
            }
            
    .tabell-forsaljning {
    width: 40%; /* 30% av bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
   
}

.kund-forsaljning {
    width: 100%; 
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
    
}

.nedrakning {
    width: 100%; 
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
    
}

.vinstnu {
    width: 100%; /* 30% av bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
    margin-bottom: 10px;
    
}


    
    .sidebar {
    width: 20%; /* 30% av bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    box-sizing: border-box;
    margin-right: 10px;
    align-items: center; /* Centrerar vertikalt */
    background-color: var(--content-box-bg-color);
   
}


.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 */
    
    
}

.hundra {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 10px; /* Lite utrymme under kolumnen */
    
}

.container-vertikalt {
    box-sizing: border-box;
    width: 30%;
    margin-right: 10px;
    
    /* Flexbox inställningar */
    display: flex;
    flex-direction: column; /* Vertikal layout */
    justify-content: space-between; /* Fördela elementen mellan toppen och botten */
    height: 100%; /* För att elementen ska sprida sig ut hela höjden */
    background-color: none;
}



.tabell-antal {
   display: flex;
    align-items: center; /* Säkerställer att alla element är vertikalt centrerade */
    gap: 10px; /* Mellanrum mellan knappar och fält */

    
}

.kunduppgifter {
   display: flex;
    align-items: top; /* Säkerställer att alla element är vertikalt centrerade */
    gap: 10px; /* Mellanrum mellan knappar och fält */

    
}

.kunduppgifter-detalj {
    background-color: var(--body-bg-color); 
    padding: 20px;

    
}



.container-pris {
    display: flex;
    align-items: center;  /* Gör så att innehållet centreras vertikalt */
    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 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lägger till en subtil skugga för djup */
    border-radius: 8px;              /* Rundade hörn för ett mjukare utseende */
    box-sizing: border-box;
    border: 1px solid var(--border-color);          /* En tunn grå ram runt div */
    padding: 20px;  /* Lägg till lite padding */
    background-color: var(--content-box-bg-color);
}

.redigera-container {
    display: flex;
    align-items: center;  /* Gör så att innehållet centreras vertikalt */
    justify-content: space-between; /* Lägg till lite utrymme mellan innehållet */
    padding: 20px;  /* Lägg till lite padding */
    width: 80%;
    border: 1px solid var(--border-color);          /* En tunn grå ram runt div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lägger till en subtil skugga för djup */
    border-radius: 8px;              /* Rundade hörn för ett mjukare utseende */
    margin: 20px;
    background-color: var(--content-box-bg-color);
}


.redigera-container2 {
    align-items: center;  /* Gör så att innehållet centreras vertikalt */
    justify-content: space-between; /* Lägg till lite utrymme mellan innehållet */
    padding: 20px;  /* Lägg till lite padding */
    width: 80%;
    border: 1px solid var(--border-color);          /* En tunn grå ram runt div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lägger till en subtil skugga för djup */
    border-radius: 8px;              /* Rundade hörn för ett mjukare utseende */
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
}

.container2 {
    align-items: center;  /* Gör så att innehållet centreras vertikalt */
    justify-content: space-between; /* Lägg till lite utrymme mellan innehållet */
    padding: 20px;  /* Lägg till lite padding */
    border: 1px solid var(--border-color);          /* En tunn grå ram runt div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lägger till en subtil skugga för djup */
    border-radius: 8px;              /* Rundade hörn för ett mjukare utseende */
    margin: 0 auto;
    margin-bottom: 10px; /* Lite utrymme under kolumnen */
    width: 100%;
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
}

.container-sok {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; /* Lägg till utrymme mellan sektionerna */
    align-items: center;  /* Vertikal centrering av innehåll */
    padding: 20px;  /* Lägg till lite padding */
    width: 100%;  /* Den övergripande bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    align-items: center; /* Centrerar vertikalt */
    background-color: var(--content-box-bg-color);
}

.container-tagg {
    box-sizing: border-box;
    align-items: center;  /* Vertikal centrering av innehåll */
    padding: 20px;  /* Lägg till lite padding */
    width: 100%;  /* Den övergripande bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    margin-bottom: 10px; /* Lite utrymme under kolumnen */
    background-color: var(--content-box-bg-color);
}

.container-red {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; /* Lägg till utrymme mellan sektionerna */
    align-items: center;  /* Vertikal centrering av innehåll */
    padding: 20px;  /* Lägg till lite padding */
    width: 100%;  /* Den övergripande bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    background-color: var(--content-box-bg-color);
    
    
}

.sok {
    width: 90%;  /* Sektionen för huvudinnehållet tar upp 90% */
    
}

.knapp {
    width: 10%;
    
   
}

.skuean {
    display: flex;
    
    margin-bottom: 20px;  /* Avstånd mellan de övre input-fälten och det nedre */
    align-items: center;  /* Gör så att innehållet centreras vertikalt */
}

.sku-ean-title {
    padding-right: 10px; /* Lite utrymme till höger */
    align-items: center;  /* Gör så att innehållet centreras vertikalt */

}

.sku {
    

}


.produkt-bild {
    flex-shrink: 0;  /* Förhindra att bilden krymper */
}

.lista {
    padding: 20px;  /* Lägg till lite padding */
    width: 80%;  /* Den övergripande bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    
}

        
        .input-field {

            height: 30px; /* Justera höjden här */

            width:100%; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;
            background-color: #e3ffd6; /* Ljusgrön bakgrund */
            
            border: 1px solid black;
            

        }    
        .input-vit {

            height: 30px; /* Justera höjden här */

            width: 100%; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;
            border: 1px solid black;

        }

        .input-number {

            height: 30px; /* Justera höjden här */

            width: 100px; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;
            border: 1px solid black;

        }
        
        .input-number1 {

            height: 30px; /* Justera höjden här */

            width: 150px; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;
            border: 1px solid black;
            vertical-align: bottom; /* Justerar alla element mot botten */
            
        }
        .input-number-moms {

            height: 30px; /* Justera höjden här */

            width: 50px; 

            font-family: 'Montserrat'; font-size: 14px;
            border: 1px solid black;
            vertical-align: bottom; /* Justerar alla element mot botten */
            
        }
         .input-number_e {

            height: 30px; /* Justera höjden här */

            width: 150px; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;
            background-color: #e3ffd6; /* Ljusgrön bakgrund */
            border: 1px solid black;
            vertical-align: bottom; /* Justerar alla element mot botten */
            

        }
        .input-number_a {

            height: 30px; /* Justera höjden här */

            width: 200px; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;
            background-color: #e3ffd6; /* Ljusgrön bakgrund */
            border: 1px solid black;
            vertical-align: bottom; /* Justerar alla element mot botten */
            

        }

        .input-20 {

            height: 30px; /* Justera höjden här */

            width: 150px; 

            font-family: 'Montserrat'; font-size: 14px;
            
            vertical-align: bottom; /* Justerar alla element mot botten */
            
        }
        
        .input-prefix {

            height: 30px; /* Justera höjden här */

            width: 50px; 

            font-family: 'Montserrat'; font-size: 14px;
            
            vertical-align: bottom; /* Justerar alla element mot botten */
            background-color: #e3ffd6; /* Ljusgrön bakgrund */
            border: 1px solid black;
            
            
        }
            
        .input-sku {

            height: 30px; /* Justera höjden här */

            width: 200px; 
            font-family: 'Montserrat'; font-size: 14px;
            
            vertical-align: bottom; /* Justerar alla element mot botten */
            background-color: #e3ffd6; /* Ljusgrön bakgrund */
            border: 1px solid black;

        }

        .input-25 {

            height: 30px; /* Justera höjden här */

            width: 100%; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;

           

        }
        
         .input-art {

            height: 30px; /* Justera höjden här */
            
            border: 0px solid black;

            font-family: 'Montserrat'; font-size: 14px;
            display: inline-block; 
            
            vertical-align: bottom; /* Justerar alla element mot botten */
            
        }   

        textarea {

            width: 100%; /* Fyller hela bredden */

            margin-bottom: 0px; /* Lägg till lite marginal mellan fälten */

            height: 70px; /* Justera höjden för textarea */

            font-family: 'Montserrat'; font-size: 14px;

        }
       a:link
{
text-decoration: none;
font-size: 12px !important;
color: var(--text-color);
}

a:visited
{
text-decoration: none;
font-size: 12px;
color: var(--text-color);
}

a:active
{
text-decoration: none;
font-size: 12px;
font-weight: var(--text-color);
}

a:hover
{
text-decoration: none;
font-weight: bold;
font-size: 12px;
color: var(--text-color);
}
       
        }
        
       
       
       
       
       
       
       
       
       
       
       
       
       
        
        @media (max-width: 768px) {
            
            
            .vinst {

            font-family: 'Montserrat'; font-size: 20px; font-weight: bold; color: white;

        }
            
            body {

            font-family: 'Montserrat'; 
            font-size: 12px;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 15px;
            margin-bottom: 10px;
            background-color: var(--body-bg-color);
            color: var(--text-color);
            
        }
        
          table {

            width: 100%;

            border-collapse: collapse;

            border: none;

            border-color: var(--body-bg-color);
            font-size: 12px;
            box-sizing: border-box;
            background-color: var(--content-box-bg-color);

        }
        
        
        .container-vertikalt {
   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 */
    
}

.nedrakning {
    width: 50%; 
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
    margin-left: 10px;
    align-items: center;
    
}

.vinstnu {
    width: 50%; /* 30% av bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
    
    
}

.kund-forsaljning {
    width: 100%; 
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
    margin-bottom:10px;
    
}
        
       .diagram-forsaljning {
            
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    margin-bottom:10px;
    color: black;
    
            
            }
            
    .tabell-forsaljning {
    width: 100%; /* 30% av bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
    margin-bottom:10px;
   
}
        
        .meny {
    display: none;
    
   
}

.kunduppgifter {
   width: 100%;
   box-sizing: border-box;
   background-color: var(--content-box-bg-color);

    
}

.kunduppgifter-detalj {
    background-color: var(--body-bg-color); 
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 8px;  /* Rundade hörn */
    
    

    
}

        
        .container {
    box-sizing: border-box;
    width:100%;
  
        }
        
        .femtio-v-container-g {
            
            
            
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    background-color: #e3ffd6;
    margin-bottom: 10px; /* Lite utrymme under kolumnen */
    background-color: var(--content-box-bg-color);
            
            }
            
            .femtio-v-container {
            
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    width: 100%;
    margin-bottom: 10px; /* Lite utrymme under kolumnen */
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
            
            }
            
            .femtio-h-container {
            
            
            
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    width: 100%;
     box-sizing: border-box;
     margin-bottom: 10px; /* Lite utrymme under kolumnen */
     background-color: var(--content-box-bg-color);
    
            
            }
    
            
            .input-vit {

            height: 30px; /* Justera höjden här */

            width: 100%; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;
            border: 1px solid black;
            background-color: var(--content-box-bg-color);

        }
        
        .container-tagg {
    box-sizing: border-box;
    align-items: center;  /* Vertikal centrering av innehåll */
    padding: 20px;  /* Lägg till lite padding */
    width: 100%;  /* Den övergripande bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    margin-bottom: 10px; /* Lite utrymme under kolumnen */
    background-color: var(--content-box-bg-color);
}

.container-pris {
    
    align-items: center;  /* Gör så att innehållet centreras vertikalt */
    box-sizing: border-box;
    
    width: 100%;
    margin-bottom: 10px; /* Lite utrymme under kolumnen */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lägger till en subtil skugga för djup */
    border-radius: 8px;              /* Rundade hörn för ett mjukare utseende */
    box-sizing: border-box;
    border: 1px solid var(--border-color);          /* En tunn grå ram runt div */
    padding: 20px;  /* Lägg till lite padding */
    background-color: var(--content-box-bg-color);
}

.container2 {
    align-items: center;  /* Gör så att innehållet centreras vertikalt */
    justify-content: space-between; /* Lägg till lite utrymme mellan innehållet */
    padding: 20px;  /* Lägg till lite padding */
    border: 1px solid var(--border-color);          /* En tunn grå ram runt div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lägger till en subtil skugga för djup */
    border-radius: 8px;              /* Rundade hörn för ett mjukare utseende */
    margin: 0 auto;
    margin-bottom: 10px; /* Lite utrymme under kolumnen */
    width: 100%;
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
}

.main-container {
            
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    width: 100%;
    margin-bottom: 10px; /* Lite utrymme mellan kolumnerna */
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
            
            }
        
        
            
            
            
            
            
            
            
            
         .redigera-div {
    width: 100%;                      /* Bredden är 80% av sidan */
    
    
    padding: 0px;                   /* Lägg till lite padding för innehållet */
    text-align: left;                /* Justera texten till vänster */
    background-color: var(--content-box-bg-color);
    

}


    
    .sidebar {
    width: 100%; 
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    padding: 20px;
    margin-bottom: 10px; /* Lite utrymme mellan kolumnerna */
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);;
}

.redigera-container {
    
    align-items: center;  /* Gör så att innehållet centreras vertikalt */
    justify-content: space-between; /* Lägg till lite utrymme mellan innehållet */
    padding: 10px;  /* Lägg till lite padding */
    width: 90%;
    border: 1px solid var(--border-color);          /* En tunn grå ram runt div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lägger till en subtil skugga för djup */
    border-radius: 8px;              /* Rundade hörn för ett mjukare utseende */
    margin: 10px auto 0 auto;
    background-color: var(--content-box-bg-color);

   
}


.redigera-container2 {
    align-items: center;  /* Gör så att innehållet centreras vertikalt */
    justify-content: space-between; /* Lägg till lite utrymme mellan innehållet */
    padding: 10px;  /* Lägg till lite padding */
    width: 90%;
    border: 1px solid var(--border-color);          /* En tunn grå ram runt div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lägger till en subtil skugga för djup */
    border-radius: 8px;              /* Rundade hörn för ett mjukare utseende */
    margin: 10px auto 0 auto;
    background-color: var(--content-box-bg-color);
}
        
        
    .container-sok {
    display: flex;
    justify-content: space-between; /* Lägg till utrymme mellan sektionerna */
    align-items: center;  /* Vertikal centrering av innehåll */
    padding: 20px;  /* Lägg till lite padding */
    width: 100%;  /* Den övergripande bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    margin: 5px auto 0 auto;
    box-sizing: border-box;
    background-color: var(--content-box-bg-color);
}


.sok {
    flex: 0 1 90%;  /* Sektionen för huvudinnehållet tar upp 80% */
    padding-right: 10px; /* Lite utrymme till höger */
    background-color: var(--content-box-bg-color);
}

.knapp {
    flex: 0 1 10%;  /* Sidoinnehållet tar upp 20% */
    text-align: center; /* Centrerar innehållet */
    background-color: var(--content-box-bg-color);
    
   
}

.produkt-bild {
    flex-shrink: 50%;  /* Förhindra att bilden krymper */
}
        
.lista {
    padding: 20px;  /* Lägg till lite padding */
    width: 80%;  /* Den övergripande bredden */
    border: 1px solid var(--border-color);  /* En tunn grå ram */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
    border-radius: 8px;  /* Rundade hörn */
    text-align: left;
    
}

    
        .input-field {

            height: 30px; /* Justera höjden här */

            width:100%; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;
            background-color: #e3ffd6; /* Ljusgrön bakgrund */
            border: 1px solid black;
            

        }    
        
         .input-art {

            height: 30px; /* Justera höjden här */
            
            border: 0px solid black;
            
            width: 10px; 

            font-family: 'Montserrat'; font-size: 14px;
            display: inline-block; 
            
            vertical-align: bottom; /* Justerar alla element mot botten */
            
        }   

        .input-number1 {

            height: 30px; /* Justera höjden här */

            width: 100%; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;
            border: 1px solid black;
            vertical-align: bottom; /* Justerar alla element mot botten */

        }
        
         .input-number-moms {

            height: 30px; /* Justera höjden här */

            width: 5%; 

            font-family: 'Montserrat'; font-size: 14px;
            border: 1px solid black;
            vertical-align: bottom; /* Justerar alla element mot botten */
         }
        
        .input-number {

            height: 30px; /* Justera höjden här */

            width: 100%; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;

        }
        
        .input-number_e {

            height: 30px; /* Justera höjden här */

            width:  100%; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;
            background-color: #e3ffd6; /* Ljusgrön bakgrund */
            
            border: 1px solid black;
            vertical-align: bottom; /* Justerar alla element mot botten */
            

}
.input-number_a {

            height: 30px; /* Justera höjden här */

            width: 48.3%; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;
            background-color: #e3ffd6; /* Ljusgrön bakgrund */
            
            border: 1px solid black;
            vertical-align: bottom; /* Justerar alla element mot botten */
            

}

        .input-20 {

            height: 30px; /* Justera höjden här */
            
            width: 100px;


            font-family: 'Montserrat'; font-size: 14px;
            
            vertical-align: bottom; /* Justerar alla element mot botten */
            
        }   
        
        .input-prefix {

            height: 30px; /* Justera höjden här */

            width: 50px; 

            font-family: 'Montserrat'; font-size: 14px;
            
            vertical-align: bottom; /* Justerar alla element mot botten */
            background-color: #e3ffd6; /* Ljusgrön bakgrund */
            border: 1px solid black;
            
        }
        .input-sku {

            height: 30px; /* Justera höjden här */
            width: 50%;
      
            font-family: 'Montserrat'; font-size: 14px;
            
            vertical-align: bottom; /* Justerar alla element mot botten */
            background-color: #e3ffd6; /* Ljusgrön bakgrund */
            border: 1px solid black;

        }
        
        a:link
{
text-decoration: none;
font-size: 12px;
color: var(--text-color);
}

a:visited
{
text-decoration: none;
font-size: 12px;
color: var(--text-color);
}

a:active
{
text-decoration: none;
font-size: 12px;
font-weight: bold;
}

a:hover
{
text-decoration: none;
font-weight: bold;
font-size: 12px;
color: black;
}

        

        }

        .input-25 {

            height: 30px; /* Justera höjden här */

            width: 100%; /* Fyller hela bredden */

            font-family: 'Montserrat'; font-size: 14px;

           

        }

        textarea {

            width: 98%; /* Fyller hela bredden */

            margin-bottom: 0px; /* Lägg till lite marginal mellan fälten */

            height: 70px; /* Justera höjden för textarea */

            font-family: 'Montserrat'; font-size: 14px;

        }
            
        
    

    .remove-row {

            background-color: #ff4d4d; /* Röd bakgrund */

            color: white; /* Vit textfärg */

            border: none; /* Ingen kant */

            padding: 10px 10px; /* Lite padding */

            border-radius: 5px;

            cursor: pointer; /* Ändra muspekaren till en hand */

            font-size: 14px; /* Justera textstorleken */

        }

        

   .button {
    background-color: #62d44f; 
    color: white; /* Vit textfärg */
    border: none; /* Ingen kant */
    padding: 10px; /* Justera padding för att göra knappen större */
    border-radius: 5px;
    cursor: pointer; /* Ändra muspekaren till en hand */
    font-size: 12px; /* Justera textstorleken */
    width: 100%;
    text-align: center;
    display: flex; /* Använd flexbox */
    justify-content: center; /* Centrerar horisontellt */
    align-items: center; /* Centrerar vertikalt */
}

.button-spara {
    background-color: #62d44f; 
    color: white; /* Vit textfärg */
    border: none; /* Ingen kant */
    padding: 0px; /* Justera padding för att göra knappen större */
    border-radius: 5px;
    cursor: pointer; /* Ändra muspekaren till en hand */
    width: 20px;
    height: 20px;
    text-align: center;
    justify-content: center; /* Centrerar horisontellt */
    align-items: center; /* Centrerar vertikalt */

}

.button img {
    max-width: 100%; /* Se till att bilden anpassar sig efter knappen */
    height: auto; /* Behåll proportioner */
    text-align: center;
    justify-content: center; /* Centrerar horisontellt */
    align-items: center; /* Centrerar vertikalt */
}


        .button2 {

            background-color: white; 

            color: black; /* Vit textfärg */

            border: 1px solid black; 

            border-radius: 5px;

            padding: 10px 10px; /* Lite padding */

            cursor: pointer; /* Ändra muspekaren till en hand */

            font-size: 12px; /* Justera textstorleken */

        }
        
         .button3 {

            background-color: white; 

            color: black; /* Vit textfärg */

            border: 1px solid black; /* Ingen kant */

            border-radius: 5px;

            padding: 5px 5px; /* Lite padding */

            cursor: pointer; /* Ändra muspekaren till en hand */

            font-size: 14px; /* Justera textstorleken */
            font-weight: bold;

        }
        
        .button_sku {

            background-color: white; 

            color: black; 

            border: 1px solid black; 

            border-radius: 5px;

            padding: 0px 0px; 
            
            width: 30px;
            
            height: 30px;

            cursor: pointer; /* Ändra muspekaren till en hand */

            font-size: 20px; /* Justera textstorleken */
        }
        
        .button4 {

            background-color: #62d44f; 

            color: white; /* Vit textfärg */

            border: none; /* Ingen kant */

            padding: 5px 5px; /* Lite padding */

            border-radius: 5px;

            cursor: pointer; /* Ändra muspekaren till en hand */

            font-size: 12px; /* Justera textstorleken */
            
            text-align: center;
            
            

        }
            
            img {
            display: block;
            
            
        }
        
        
    
        
        

/* Popup-container (gömd från början) */
.popup {
    display: none; /* Dold som standard */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Halvtransparent svart bakgrund */
}

/* Innehållet i popup-fönstret */
.popup-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
    text-align: center;
}

/* Stängningsknapp (X) */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    cursor: pointer;
}

 /* Dölj den ursprungliga filuppladdningsknappen */
        #fileToUpload {
            display: none;
        }

        /* Stil för den anpassade bildknappen */
        .upload-btn {
            cursor: pointer;
            display: inline-block;
        }

        .upload-btn img {
            width: 30px; /* Ange storlek på bilden */
            height: auto;
        }
        
        #preview img {
    border: 0px solid var(--border-color);
    padding: 5px;
     
}

    .image-preview {
        position: relative;
        display: inline-block;
        margin: 10px;
    }

    .image-preview img {
        width: 80px;
        height: auto;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .image-preview input[type="radio"] {
        position: absolute;
        top: 10px;   /* Placera radio-knappen ovanpå bilden */
        right: 10px; /* Justera placeringen om nödvändigt */
        transform: scale(1.5); /* Gör knappen större om du vill */
        cursor: pointer;
    }