/*For alle siderne*/

*   {margin: 0;
    box-sizing: border-box;}

#on-site        {color: #D51B2F;}

.ikke:hover {cursor: none;}
#ikke:hover {cursor: none;}

a   {text-decoration: none;
    color: #2f2418;}

a:link       {color:#2f2418;}
a:visited    {color:#2f2418;} 
a:hover      {color:#D51B2F;}  
a:active     {color:#D51B2F;}

/*Teksttyper*/
/*Inter Extralight*/

.IEH1   {font-family: 'Inter', sans-serif;
        font-weight: 200;
        font-size: 5vw;}

.IEH2   {font-family: 'Inter', sans-serif;
        font-weight: 200;
        font-size: 2.25vw;}

/*Inter Regular*/

.IRH1   {font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 1.1vw;}

.IRH2   {font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 0.8vw;}

.IRH3   {font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 0.5vw;}

/*Playfair Display Italic*/

.PFH1   {font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 3vw;}

.PFH2   {font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 1.5vw;}

.PFH3   {font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 1vw;}

/*Header*/

header  {display:flex;
        position: fixed;
    
        justify-content: space-between;
        align-items: center;

        font-family: 'Inter', sans-serif;
        text-transform: uppercase;
        font-size: 1vw;}

#logo   {width: 7vw;
        margin: 3vw;}

#menu   {margin-right: 40vw;}

#menu a {margin-right: 2vw;}

#login_kurv {display: flex;
            align-items: center;
            margin: 3vw;}

.login  {margin-right: 2vw;}

#kurv   {width: 2.5vw;}

#rødkurv    {width: 2.5vw;
            display: none;}

#profil         {width: 2.5vw;
                margin-right: 2vw;}

#rødprofil      {width: 2.5vw;
                display: none;
                margin-right: 2vw;}


/*Forsidens CSS*/
/*"Første" forside*/

.scroller   {height: 100vh;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;}

.scroll-element {width: 100vw;
                height: 100vh;
                scroll-snap-align: start;
                overflow-y: hidden;
            
                display: flex;}

#scroll1        {display: flex;
                flex-direction: column;
                justify-content: center;
                justify-content: space-around;
                align-items: center;
                padding-top: 10%;}

#scroll2        {display: flex;
                align-items: center;
                padding-top: 5%;
                padding-left: 10%;
                padding-right: 10%;
                justify-content: space-between;
    
                background-color: #F3F1ED;}

#nipponintro    {display: flex;
                align-items: center;
                flex-direction: row;}

.forside-billede        {width: 20vw;
                        margin-left: 1.5vw;
                        margin-right: 1.5vw;}

#forsidetekst1  {text-align: right;
                padding-bottom: 30vh;}

#forsidetekst2  {padding-top: 30vh;}

#linkvidere     {text-align: center;}

/*"Anden" forsideside*/

#måltidskasse-oversigt  {list-style-type: none;
                        line-height: 10vh;}

#læsmere1       {color: #F8AAB8;}
#læsmere1:hover {color: #D51B2F;}

#læsmere2       {color: #2f2418;}
#læsmere2:hover {color: #D51B2F;}

#læsmere3       {color: #005541;}
#læsmere3:hover {color: #D51B2F;}

#læsmere4       {color: #FF9247;}
#læsmere4:hover {color: #D51B2F;}

/*Vælg antal personer og antal dage*/

#vælgknapper    {display: flex;}

.vælgknap       {margin-right: 4vw;
                line-height: 4vh;
                text-transform: uppercase;}

#filterknap1    {border: 0.1vw #2f2418;
                border-style: solid;
                border-radius: 50%; 
                background-color: #F3F1ED;
                color: #2f2418;
                height: 2vw;
                width: 2vw;}

#filterknap1:link        {color:#2f2418;}
#filterknap1:visited     {color:#2f2418;} 
#filterknap1:hover       {color:#F3F1ED;
                        background-color: #2f2418;}  
#filterknap1:active      {color:#F3F1ED;
                        background-color: #2f2418;}

#filterknap2    {border: 0.1vw #2f2418;
                border-style: solid;
                border-radius: 50%; 
                background-color: #F3F1ED;
                color: #2f2418;
                height: 2vw;
                width: 2vw;}

#filterknap2:link        {color:#2f2418;}
#filterknap2:visited     {color:#2f2418;} 
#filterknap2:hover       {color:#F3F1ED;
                        background-color: #2f2418;}  
#filterknap2:active      {color:#F3F1ED;
                        background-color: #2f2418;}

#filterknap3    {border: 0.1vw #2f2418;
                border-style: solid;
                border-radius: 50%; 
                background-color: #F3F1ED;
                color: #2f2418;
                height: 2vw;
                width: 2vw;}

#filterknap3:link        {color:#2f2418;}
#filterknap3:visited     {color:#2f2418;} 
#filterknap3:hover       {color:#F3F1ED;
                        background-color: #2f2418;}  
#filterknap3:active      {color:#F3F1ED;
                        background-color: #2f2418;}

#filterknap4    {border: 0.1vw #2f2418;
                border-style: solid;
                border-radius: 50%; 
                background-color: #F3F1ED;
                color: #2f2418;
                height: 2vw;
                width: 2vw;}

#filterknap4:link        {color:#2f2418;}
#filterknap4:visited     {color:#2f2418;} 
#filterknap4:hover       {color:#F3F1ED;
                        background-color: #2f2418;}  
#filterknap4:active      {color:#F3F1ED;
                        background-color: #2f2418;}

#filterknap5    {border: 0.1vw #2f2418;
                border-style: solid;
                border-radius: 50%; 
                background-color: #F3F1ED;
                color: #2f2418;
                height: 2vw;
                width: 2vw;}

#filterknap5:link        {color:#2f2418;}
#filterknap5:visited     {color:#2f2418;} 
#filterknap5:hover       {color:#F3F1ED;
                        background-color: #2f2418;}  
#filterknap5:active      {color:#F3F1ED;
                        background-color: #2f2418;}

#filterknap6    {border: 0.1vw #2f2418;
                border-style: solid;
                border-radius: 50%; 
                background-color: #F3F1ED;
                color: #2f2418;
                height: 2vw;
                width: 2vw;}

#filterknap6:link        {color:#2f2418;}
#filterknap6:visited     {color:#2f2418;} 
#filterknap6:hover       {color:#F3F1ED;
                        background-color: #2f2418;}  
#filterknap6:active      {color:#F3F1ED;
                        background-color: #2f2418;}

#filterknap7    {border: 0.1vw #2f2418;
                border-style: solid;
                border-radius: 50%; 
                background-color: #F3F1ED;
                color: #2f2418;
                height: 2vw;
                width: 2vw;}

#filterknap7:link        {color:#2f2418;}
#filterknap7:visited     {color:#2f2418;} 
#filterknap7:hover       {color:#F3F1ED;
                        background-color: #2f2418;}  
#filterknap7:active      {color:#F3F1ED;
                        background-color: #2f2418;}

#filterknap8    {border: 0.1vw #2f2418;
                border-style: solid;
                border-radius: 50%; 
                background-color: #F3F1ED;
                color: #2f2418;
                height: 2vw;
                width: 2vw;}

#filterknap8:link        {color:#2f2418;}
#filterknap8:visited     {color:#2f2418;} 
#filterknap8:hover       {color:#F3F1ED;
                        background-color: #2f2418;}  
#filterknap8:active      {color:#F3F1ED;
                        background-color: #2f2418;}

#filterknap9    {border: 0.1vw #2f2418;
                border-style: solid;
                border-radius: 50%; 
                background-color: #F3F1ED;
                color: #2f2418;
                height: 2vw;
                width: 2vw;}

#filterknap9:link        {color:#2f2418;}
#filterknap9:visited     {color:#2f2418;} 
#filterknap9:hover       {color:#F3F1ED;
                        background-color: #2f2418;}  
#filterknap9:active      {color:#F3F1ED;
                        background-color: #2f2418;}

#filterknap2    {border: 0.1vw #2f2418;
                border-style: solid;
                border-radius: 50%; 
                background-color: #F3F1ED;
                color: #2f2418;
                height: 2vw;
                width: 2vw;}

#filterknap2:link        {color:#2f2418;}
#filterknap2:visited     {color:#2f2418;} 
#filterknap2:hover       {color:#F3F1ED;
                        background-color: #2f2418;}  
#filterknap2:active      {color:#F3F1ED;
                        background-color: #2f2418;}


/*Hoverkort*/

#hoverlink1     {color: #2f2418;
                display: hidden;}

#hoverlink2     {color: #F3F1ED;
                display: hidden;}

.kortbillede    {width: 20vw;}

.kortikoner     {display: flex;
                justify-content: space-around;
                text-align: center;
                margin-top: 1.5vw;}

.kortikon       {height: 4vh;}

.kortikontekst  {width: 5.5vw;}

.korttekst      {align-content: center;
                justify-content: center;
                justify-content: space-around;
                margin: 2vw;}

#pris   {text-align: right;}

.føjtilkurv     {margin-left: 2vw;
                text-align: center;
                justify-content: center;
                width: 8.5vw;
                height: 3vh;
                text-transform: uppercase;}

#hurtigkurv             {color: #2f2418;
                        border: 0.1vw #2f2418;
                        border-style: solid;}

#hurtigkurv:hover       {background-color:#2f2418;
                        color: #F8AAB8;}  

#klassiskkurv           {color: #F3F1ED;
                        border: 0.1vw #F3F1ED;
                        border-style: solid;}

#klassiskkurv:hover     {background-color:#F3F1ED;
                        color: #2f2418;}  

#økonomiskkurv          {color: #F3F1ED;
                        border: 0.1vw #F3F1ED;
                        border-style: solid;}

#økonomiskkurv:hover    {background-color:#F3F1ED;
                        color: #005541;}  

#eksperimenterendekurv  {color: #2f2418;
                        border: 0.1vw #2f2418;
                        border-style: solid;}

#eksperimenterendekurv:hover    {background-color:#2f2418;
                                color: #FF9247;}  


#hurtig-kort    {background-color: #F8AAB8;
                height: 37vw;
                width: 20vw;
                justify-content: center;
                align-items: center;
                
                display: none;}

#klassisk-kort  {background-color: #2f2418;
                color: #F3F1ED;
                height: 37vw;
                width: 20vw;
                justify-content: center;
                align-items: center;
                
                display: none;}

#økonomisk-kort {background-color: #005541;
                color: #F3F1ED;
                height: 37vw;
                width: 20vw;
                justify-content: center;
                align-items: center;
                
                display: none;}

#eksperimenterende-kort {background-color: #FF9247;
                        height: 37vw;
                        width: 20vw;

                        justify-content: center;
                        align-items: center;
                        
                        display: none;}

/*OM OS CSS*/

#omosside       {display: flex;
                height: 100vh;
                padding-top: 10%;
                text-align: center;
                justify-content: center;
                justify-content: space-evenly;
                background-color: #F3F1ED;}

.kontaktkort    {display: flex;
                width: 21vw;
                height: 70vh;
                flex-direction: column;
                color: #F3F1ED;
                background-color: #2f2418;
                padding: 1.5vw;
                text-align: center;
                justify-content: space-evenly;}

#kontakt1       {background-color: #F3F1ED;
                color: #F3F1ED;}

#omostitel       {color: #2f2418;}

#kontakt2       {display: none;}

#socialeikoner  {display: flex;
                justify-content: space-evenly;
                visibility: hidden;}

#socialeikoner2  {display: flex;
                justify-content: space-evenly;}

#tilhøjre       {text-align: right;} 

.historiekort   {display: flex;
                width: 21vw;
                height: 70vh;
                flex-direction: column;
                color: #F3F1ED;
                background-color: #005541;
                text-align: center;
                justify-content: space-evenly;}

#historietekst  {text-align: left;
                padding: 2vw}

#historie1      {background-color: #F3F1ED;
                color: #F3F1ED;}

#historie2      {display: none;}

#historiekort img       {margin-top: 0;
                        margin-bottom: 1vh;}

#historieimg1   {visibility: hidden;}

.konceptkort   {display: flex;
                width: 21vw;
                height: 70vh;
                flex-direction: column;
                color: #2f2418;
                background-color: #F8AAB8;
                padding: 1.5vw;
                text-align: center;
                justify-content: space-evenly;}

#koncept1      {background-color: #F3F1ED;
                color: #F3F1ED;}

#koncept2      {display: none;}

.konceptikoner  {display: flex;
                justify-content: space-around;
                text-align: center;
                margin-top: 1.5vw;}

#konceptikoner1 {visibility: hidden;}

.konceptikon    {height: 5.5vh;}

.konceptikontekst       {width: 5.5vw;}

.konceptknap    {background-color: #2f2418;
                border: 0.1vw #2f2418;
                color: #F3F1ED;
                border-style: solid;
                border-radius: 50%; 
                height: 4vw;
                width: 4vw;
        
                text-align: center;
                text-decoration: none;}

#konceptknap1   {visibility: hidden;}

.totrin {display: flex;
        padding: 0.5vw;}

.trin   {width: 10vw;}

#trinene{align-items: center;
        justify-content: center;
        justify-content: space-evenly;}

/*404 CSS*/

#fejlside       {background-image: url(billeder/beklager.jpg);
                width: 100vw;
                height: 100vh;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;}

#beklager       {padding-top: 20%;
                color: #F3F1ED;
                animation-name: farve;
                animation-duration: 3s;
                animation-iteration-count: infinite;
                text-align: center;}


/*KURV CSS*/

#kurvside       {display: flex;
                flex-direction: column;
                justify-content: center;
                justify-content: space-between;
                background-color: #F3F1ED;}

#kurvinfo       {padding-top: 20vh;
                display: flex;
                justify-content: space-around;}

#kryds  {position: absolute;
        color: #F3F1ED;
        top: 22vh;
        right: 19.5vw;}

#kryds:hover     {color: #D51B2F;}

#kurvoverskrift {line-height: 8vh;}

#baggrundkurv   {display: flex;
                width: 50vw;
                height: 60vh;
                background-color:#ffffff;}

#baggrundkurv-indhold   {padding: 2vw;}

#kurvtekst      {justify-content: center;
                justify-content: space-evenly;}

#valgteoverskrift {color:#F8AAB8;}

.kurvikoner     {display: flex;
                justify-content: space-around;
                width: 25vw;
                text-align: center;}

.kurvikon       {height: 4vh;}

.kurvikontekst  {display: flex;
                justify-content: center;}

.plusogminusknap        {border: none;
                        border-radius: 50%;
                        color: #F3F1ED;
                        background-color: #2f2418;
                        width: 1.5vw;
                        height: 1.5vw;}

#tekstogpris    {display: flex;
                justify-content: space-between;
                bottom: 2vh;}

#kurvbillede    {height: 60vh;
                width: 25vw;}

#tilfoejmaeltidskasse   {margin-top: 45vh;}
    
#tilfoejknap    {background-color: #2f2418;
                color: #F3F1ED;
                font-size: 3.5vw;
                border: none;
                border-radius: 50%;
                width: 5vw;}

#købnu  {text-align: center;
        margin: 6vh;}


/*Opskrift side*/

.konceptikon2    {height: 8vh;}

.konceptikontekst2      {width: 10vw;
                        margin-right: 5vw;
                        margin-left: 5vw;}


#opskriftside   {padding-top: 15vh;}

#to_kort        {display: flex;
                justify-content: center;
                justify-content: space-evenly;
                margin-top: 4vw;}

#pladsholder    {width: 30vw;
                height: 28.25vw;
                background-color:#F3F1ED;}

#billedpladsholder      {width: 50vw;
                        height: 28.25vw;
                        background-color:#F3F1ED;}


#IEH2_opskriftside      {font-family: 'Inter', sans-serif;
                        font-weight: 200;
                        font-size: 3vw;
                        color: #2f2418;
                        text-align: center;
                        margin-left: 13vw;}

#IEH2center     {font-family: 'Inter', sans-serif;
                font-weight: 200;
                text-transform: uppercase;
                font-size: 2.25vw;
                color: #2f2418;
                text-align: center;
                margin-top: 4vw;}


#overskriftogknap       {display: flex;
                        margin-top: 2vw;
                        justify-content: center;
                        justify-content: space-evenly;}

#tilbageknap    {margin-left: 7vw;}


#ingrediens_liste       {font-family: 'Inter', sans-serif;
                        font-weight: 400;
                        font-size: 1.1vw;
                        color: #2f2418;
                        text-align: center;}

.liste  {display: inline-block;
        text-align: left;}


#baggrundsfirkant       {display: flex;
                        flex-direction: column;
                        background-color:#F3F1ED;
                        width: 100vw;
                        height: 100vh;
                        margin-top: 8vw;
                        align-items: center;}

#fremgangsmaede_firkant {background-color: white;
                        width: 75%;
                        margin-top: 6vw;
                        padding: 2vw;}

#vaerdiikoner   {width: 100%;
                height: 50vh;
                padding: 2vw;}

#ikonerhoejre   {display: flex;
                margin-left: auto; 
                margin-right: 7vw;
                text-align: center;
                width: 10vw;
                justify-content: space-between;}

.ikoner{width: 2vw;}


.filterknap     {background-color: #F3F1ED;
                border: 0.1vw #2f2418;
                color: #2f2418;
                border-style: solid;
                border-radius: 50%;
                height: 2vw;
                width: 2vw;
                text-align: center;
                text-decoration: none;}

#talogtekst     {display: flex;
                justify-content: space-around;
                flex-direction: column;
                margin-top: 2vw;
                margin-bottom: 2vw;}

#madtallerkenbillede    {z-index: 1;
                        width: 20vw;
                        position: fixed;
                        right: 3vw;
                        top: 13vw;}

/*Styles til måltidskassesiderne*/
#maaltidskassebaggrund  {background-color: #f3f1ed;
                        padding: 0 3vw 0 3vw;
                        height: 100vh; /*Så baggrunden kan ses bag headeren*/
                        padding-top: 15vh; /*så content fylder ned under headeren*/}

#hurtigh1       {color: #F8AAB8;
                text-align: right;}

#klaasiskeh1            {color: #2f2418;
                        text-align: right;}

#økonomiskeh1           {color: #005541;
                        text-align: right;}

#eksperimenterendeh1            {color: #FF9247;
                                text-align: right;}

#ugensmenu      {text-align: right;}

.artikelmaaltidskasse   {display: flex;
                        flex-direction: row;
                        justify-content: space-between; /*de to "kolonner"*/}

#venstre   {width: 32vw; /*bredden af den beskrivelsessiden*/}



/*Almas styles til filterknapperne*/
.filterknap     {background-color: #F3F1ED;
                border: 0.1vw #2f2418;
                color: #2f2418;
                border-style: solid;
                border-radius: 50%;
                height: 2vw;
                width: 2vw;

                text-align: center;
                text-decoration: none;
                display: inline-block;}

#vælgperson     {line-height: 4vh;
                text-transform: uppercase;
                margin-top:3%;}
   

#vælgdage       {line-height: 4vh;
                text-transform: uppercase;
                margin-top:3%;}

button:link       {color:#2f2418;}
button:visited    {color:#2f2418;}
button:hover      {color:#D51B2F;}  
button:active     {color:#D51B2F;}

.maaltidskassebeskrivelse       {background-color: #ffffff;
                                padding: 10% 10% 5% 10%;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;}

.treikoner      {display: flex; /*så de også står på række*/
                justify-content: space-around;
                margin: 12% 10% 0% 10%;}

.ikonmtekst     {text-align: center;}

.ikonmtekst img {height: 6vh;}

/*Ugens menu*/

.menubaggrund   {background-color: #ffffff;
                width: 57.5vw;
                height: 45vh; /*højden på billedebaggrund*/}

#hurtigmenubaggrund     {background-image: url(billeder/hurtigbaggrund.jpg);
                        background-size: fill;
                        background-position: right 0vh;}

#klassiskmenubaggrund           {background-image: url(billeder/klassiskbaggrund.jpg);
                                background-size: fill;
                                background-position: right 0vh;}

#økonomiskmenubaggrund          {background-image: url(billeder/økonomiskbaggrund.jpg);
                                background-size: fill;
                                background-position: right 0vh;}

#eksperimenterendemenubaggrund          {background-image: url(billeder/eksperimenterendebaggrund.jpg);
                                        background-size: fill;
                                        background-position: right 0vh;}

.ugensmenukort  {display: flex; /*så dagkortene står på række*/
                justify-content: space-between;
                align-items: end; /*kortene står mere i bunden*/
                padding: 4%;
                height: 45vh; /*samme højde som billedet, så dagkortene kan blive skubbet ned i bunden af "billedet"*/}

.dagkort        {background-color: #f3f1ed;
                width: 17%;
                height: 90%;
                padding: 1%;
                display: flex; /*så dagkort content kan få space between*/
                flex-direction: column;
                justify-content: space-between; /*Så dagkort content starter og slutter på samme række*/
                text-align: center;}

.tidogvis       {display: flex; /*så tid og "vis opskrift" står på samme række*/
                justify-content: space-around;
                align-items: end;}

.ikonmtekstkort img     {height: 3.5vh;}

.tidogvis a     {font-style: italic;
                line-height: 2vh;}

.prisogkurv     {display: flex;
                text-align: right;
                justify-content: right;
                margin-top: 2%; /*afstand mellem ugensmenu billede og prisen*/}

.tilføjkurv     {height: 8.5vh;
                color: #2f2418;
                width: 11.5vw;
                font-size: 1.1vw;
                border-style: none;}

.totalogprpris  {margin-right: 3.5%;}

#tilføjkurvhurtig1       {background-color: #F8AAB8;
                        text-transform: uppercase;}

#tilføjkurvhurtig1:link         {color:#2f2418;}
#tilføjkurvhurtig1:visited      {color:#2f2418;} 
#tilføjkurvhurtig1:hover        {color:#F8AAB8;
                                background-color: #2f2418;}  
#tilføjkurvhurtig1:active       {color:#F8AAB8;
                                background-color: #2f2418;}

#tilføjkurvhurtig2              {background-color: #2f2418;
                                color: #F3F1ED;
                                text-transform: uppercase;}

#tilføjkurvhurtig2:link         {color:#F3F1ED;}
#tilføjkurvhurtig2:visited      {color:#F3F1ED;} 
#tilføjkurvhurtig2:hover        {color:#2f2418;
                                background-color: #ffffff;}  
#tilføjkurvhurtig2:active       {color:#2f2418;
                                background-color: #ffffff;}

#tilføjkurvhurtig3              {background-color: #005541;
                                color: #F3F1ED;
                                text-transform: uppercase;}

#tilføjkurvhurtig3:link          {color:#F3F1ED;}
#tilføjkurvhurtig3:visited       {color:#F3F1ED;} 
#tilføjkurvhurtig3:hover         {color:#005541;
                                background-color: #ffffff;}  
#tilføjkurvhurtig3:active        {color:#005541;
                                background-color: #ffffff;}

#tilføjkurvhurtig4       {background-color: #FF9247;
                        text-transform: uppercase;}

#tilføjkurvhurtig4:link          {color:#2f2418;}
#tilføjkurvhurtig4:visited       {color:#2f2418;} 
#tilføjkurvhurtig4:hover         {color:#FF9247;
                                background-color: #2f2418;}  
#tilføjkurvhurtig4:active        {color:#FF9247;
                                background-color: #2f2418;}


/*Styles til den klassiske måltidskasse*/ /*baggrundsbillede og retterne mangler*/
#tilføjkurvklassiske    {background-color: #2f2418;
                        color: #ffffff;}

.retpladsholder {width: 6vw;}


/*Styles til login siden*/

.formbaggrund   {background-color: #f3f1ed;
                display: flex;
                height: 100vh; /*så baggrunden kommer op bag headeren*/
                /*padding-top: 20vh; så content bliver ned under headeren*/}

#loginopretbruger       {width: 30vw; /*bredden for opret og login tekst i venstre side*/
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        gap: 10%;
                        margin-left: 8.5vw;}

#login:hover    {color: #2f2418;}

#opretbruger    {opacity: 0.3;}

#opretbruger:hover      {opacity: 100%;}

.formhøjreside  {display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: end; /*Styre "formstyles" til højre*/
                width: 51vw; /*Styre at formlinjerne + login knappen stopper ud fra login i headeren (på nikos computer:))*/
                height: 100%;
                padding: 28vh 0 10vh 15vw;}

.formstyles {width: 100%;/*background-color: yellowgreen;*/}

#formlogin      {padding-top: 14%; /*Padding er anderledes for login, fordi der står mindre i form*/}

.formstyles input       {border: none;
                        border-bottom: 2px solid #2f2418;
                        background-color: #f3f1ed;
                        line-height: 24pt;
                        font-family: 'Inter', sans-serif; /*Samme styles fra .IRH1*/
                        font-weight: 400;
                        font-size: 1.1vw;
                        color: #2f2418;
                        margin-bottom: 4%;
                        width: 100%;}

.formstyles input:focus {outline: none;}

.formstyles .PFH3       {margin-top: 5%;}


/*Styles til personlig information*/

.opretbaggrund  {background-color: #ffffff;
                height: 100vh;}

.formmedcirkel  {/*den samme som .formhøjreside men har flex-direction row*/
                display: flex;
                align-items: end; /*Styre "formstyles" til højre*/
                width: 51vw; /*Styre at formlinjerne + login knappen stopper ud fra login i headeren (på nikos computer:))*/
                margin-top: 25vh}

.formstyles .IEH2       {text-align: center;
                        margin-bottom: 5%; /*afstand under Personling info ned til inputfelterne*/}

.formudencirkel {height: 100%;
                display: flex; /*så videre knappen kan rykkes for sig*/
                flex-direction: column;
                justify-content: space-between; /*Så længe content ikke fylder ud over 100vh med padding, vil videre knappen altid være på samme plads nederest */
                margin-left: 6vw;}

.formudencirkel a       {text-align: right;/*rykker kun vider knappen*/}

#gentagkodeord  {display: flex;
                justify-content: space-between;
                margin-top: 7%; /*afstand op til de andre inputfelter*/}

#gentagkodeord div      {width: 47%; /*bredden på kodeordsstregerne*/}

#stortlogin  {opacity: 0.3;}

#stortlogin:hover       {opacity: 100%;
                        color: #D51B2F;}

#stortopretbruger:hover       {color: #2f2418;}

.cirkelsteps    {height: 65vh;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                z-index: 30;
                position: relative; /*position for cirklerne*/
                right: 4vw;
                bottom: 14vh;}

.cirkelfigur    {background-color: #f3f1ed;
                color: #2f2418;
                text-align: center;
                border: solid #2f2418 2px;
                border-radius: 50%;
                height: 15vh; /*Skal være det samme som width, så cirklerne bliver kvadratiske runde*/
                width: 15vh;
                display: flex; /*så kan man rykke tal og tekst i ciklerne*/
                flex-direction: column; /*så tal og tekst står underhinanden*/
                justify-content: center;}

#orangecirkel   {background-color: #FF9247;
                border: none;}

/*Styles til forsendelse*/


#grøncirkel     {background-color: #005541;
                border: none;}

#grøncirkel h2  {color: #F3F1ED;}

#grøncirkel h3  {color: #F3F1ED;}

.tokolonnerinput        {display: flex;
                        justify-content: space-between;}

.tokolonnerinput div    {width: 47%; /*bredden på kodeordsstregerne*/}

.tilbageogvidere        {display: flex; /*Så tilbage og videre kommer ned på række*/
                        justify-content: space-between;}

#knap     {margin-bottom: 7vh;}

#nytnavn        {display: none; /*så default er "samme leveringsadresse" uden navn*/}

.checkbokse     {padding: 5% 0;}

.vmcheckbokse   {text-align: left;
                color: #2f2418;
                font-family: 'Inter', sans-serif;
                display: flex;
                flex-direction: row;}

.vmcheckbokse input     {width: 15%;}



.tilbageogvidere:hover  {color: #D51B2F;}

/*Styles til betaling*/

#pinkcirkel     {background-color: #F8AAB8;
                border: none;}

#mobilepayinfo  {width: 33.6vw;
                display: none;}

/*Styles til bekræftelse*/

#bruncirkel     {background-color: #2f2418;
                border: none;}

#bruncirkel h2  {color: #ffffff;}

#bruncirkel h3  {color: #ffffff;}