body {
    background-color: #222831;
    display: grid;
    grid-template-rows: repeat(20,1fr);
    grid-template-columns: repeat(20,1fr);
    width:100vw;
    height:100vh;
    overflow-x:hidden;
   
}

#createknapp{
    grid-column:18/20;
    grid-row:2/3;
    text-decoration:none;
    z-index:2;
}

.button {
    align-items: center;
    background-color: #222831;
    border: 2px solid #a0a8b5;
    border-radius: 25px;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 20px;
    max-width: 480px;
    min-height: 40px;
    min-width: 0px;
    overflow: hidden;
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    touch-action: manipulation;
    transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    transition: 0.2s;
    text-shadow: none;
    font-family: "Archivo Black", sans-serif;
    font-weight: 700;
}

    .button:hover,
    .button:focus {
        background-color: antiquewhite;
       
         color: #222831;
        text-shadow: none;
    }

.button:active {
    background: #09223b;
    color: rgb(255, 255, 255, .7);
}

.button:disabled {
    cursor: not-allowed;
    background: rgba(0, 0, 0, .08);
    color: rgba(0, 0, 0, .3);
}

#LogForm {
    background-color: #31363F;
    grid-row: 4/16;
    grid-column: 8/14;
    border-radius: 50px;
    color: antiquewhite;
    display: grid;
    grid-template-rows: repeat(20,1fr);
    grid-template-columns: repeat(20,1fr);
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
#Lo {
    grid-column: 1/21;
    grid-row: 2/4;
    display: flex;
    justify-content: center;
    justify-items: center;
    font-size: 2vw;
    font-family: "Archivo Black", sans-serif;
    font-weight: 700;
    text-shadow: 0px 4px 5px rgba(0,0,0,0.6);
}
#Usern {
    grid-row: 7/8;
    grid-column: 7/15;
    border-radius: 10px;
    background-color: #a0a8b5;
    border: transparent 1px solid;
    font-weight:600;
}
#Pasw {
    grid-row: 11/12;
    grid-column: 7/15;
    border-radius: 10px;
    background-color: #a0a8b5;
    border: transparent 1px solid;
}
#submit {
    grid-column: 8/14;
    grid-row: 15/17;
   
}
#usrtext {
    grid-row: 6/7;
    grid-column: 7/15;
    display: flex;
    justify-content: center;
    font-family: "Archivo Black", sans-serif;
    font-weight: 700;
    text-shadow: 0px 4px 5px rgba(0,0,0,0.6);
}
#pswtext {
    grid-row: 10/11;
    grid-column: 7/15;
    justify-content: center;
    display: flex;
    font-family: "Archivo Black", sans-serif;
    font-weight: 700;
    text-shadow: 0px 4px 5px rgba(0,0,0,0.6);
}


#boktitel {
    color: #ffffff;
    grid-column: 2/20;
    grid-row: 1/4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Archivo Black", sans-serif;
    font-weight: 700;
}

.bokninggrid {
    grid-column: 2/20;
    grid-row: 4/20;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #272e38;
    border-radius: 20px;
    border: 3px solid #1a1f26;
}

.bokning {
    margin: 2px 2px 2px 0px;
    border: 3px solid #1a1f26;
    border-radius: 10px;
    margin: 0.5vw;
    height: 40vh;
    background-color: #323b49;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(11,1fr);
    font-size:0.8vw;
   
}

.innehåll {
    font-family: "Archivo Black", sans-serif;
    font-weight: 700;
    text-shadow: 0px 4px 5px rgba(0,0,0,0.6);
    color: white;
}


#övrigt{
    grid-column:1/2;
    grid-row:7/10;
}

#radera {
    grid-column: 1/2;
    grid-row: 10/12;
    border-radius: 10px;
    text-decoration: none;
    border: solid 2px #6f819d;
}

#radera:hover {
    border: 2px solid antiquewhite;
}
#hem {
    align-items: center;
    background-color: #222831;
    border: 2px solid #a0a8b5;
    border-radius: 25px;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 20px;
    max-width: 480px;
    min-height: 40px;
    min-width: 0px;
    overflow: hidden;
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    touch-action: manipulation;
    transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    transition: 0.2s;
    text-shadow: none;
    font-family: "Archivo Black", sans-serif;
    font-weight: 700;
    text-decoration:none;
    grid-row:2;
    grid-column:2/4;
    z-index:2;
}
#hem:hover,
#hem:focus {
    background-color: antiquewhite;
    color: #222831;
    text-shadow: none;
}
#meny {
    align-items: center;
    background-color: #222831;
    border: 2px solid #a0a8b5;
    border-radius: 25px;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 20px;
    max-width: 480px;
    min-height: 40px;
    min-width: 0px;
    overflow: hidden;
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    touch-action: manipulation;
    transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    transition: 0.2s;
    text-shadow: none;
    font-family: "Archivo Black", sans-serif;
    font-weight: 700;
    text-decoration: none;
    grid-row: 2;
    grid-column: 17/19;
    z-index: 2;
}

    #meny:hover,
    #meny:focus {
        background-color: antiquewhite;
        color: #222831;
        text-shadow: none;
    }


.Menygrid {
    grid-column: 2/20;
    grid-row: 4/19;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(8,1fr);
   
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #272e38;
    border-radius: 20px;
    border: 3px solid #1a1f26;
   
}
.Varmrätter, .Efterrätter, .Drycker {
    background-color: #323b49;
    height: 20vh;
    margin: 8px;
    padding: 4px;
    border: 2px solid #1a1f26;
    font-size: 0.8vw;
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(10,1fr);
}

.Varmrätter{
    grid-column:1/2;
}

.Efterrätter {
    grid-column: 2/3;
}
#warm {
    grid-column: 1;
   
}
#cold{
    grid-column:2;
}
#menytitel {
    color: #ffffff;
    grid-column: 2/20;
    grid-row: 1/4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Archivo Black", sans-serif;
    font-weight: 700;
}
#itemname{
    grid-row:1/3;
    grid-column:1/9;
}
#itemprice {
    grid-row: 4/6;
    grid-column: 1/9;
}
#iteminfo {
    grid-row: 7/9;
    grid-column: 1/9;
}
#Editlink, #Deletelink {
    
    background: #222831;
    border: 2px solid #a0a8b5;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    touch-action: manipulation;
    transition: 0.2s;
    margin: 12px 0px 12px 0px;
    
}
    #Editlink:hover {
        background: antiquewhite;
        background-image: url("../Bilder/bluepen.png");
        background-position: center;
        background-size: 70% 62%;
        background-repeat: no-repeat;
    }

    #Deletelink:hover {
        background: antiquewhite;
        background-image: url("../Bilder/blackbin.png");
        background-position: center;
        background-size: 70% 62%;
        background-repeat: no-repeat;
    }
#Editlink {
    background-image: url("../Bilder/filledpen.png");
    background-position: center;
    background-size: 70% 62%;
    background-repeat: no-repeat;
    grid-row: 1/6;
    grid-column: 10/11;
}
#Deletelink {
    background-image: url("../Bilder/whitebin.png");
    background-position: center;
    background-size: 70% 62%;
    background-repeat: no-repeat;
    grid-row: 6/11;
    grid-column: 10/11;
}

#create {
    grid-row: 3/17;
    grid-column: 8/14;
    background-color: #272e38;
    border-radius: 20px;
    border: 3px solid #1a1f26;
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(25,1fr);
}

#createsubmit {
    align-items: center;
    background-color: #222831;
    border: 2px solid #a0a8b5;
    border-radius: 25px;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 20px;
    max-width: 480px;
    min-height: 40px;
    min-width: 0px;
    overflow: hidden;
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    touch-action: manipulation;
    transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    transition: 0.2s;
    text-shadow: none;
    font-family: "Archivo Black", sans-serif;
    font-weight: 700;
    text-decoration: none;
    grid-row: 21/24;
    grid-column: 3/9;
}

#select {
    grid-row: 16/18;
    grid-column: 3/9;
    margin: 10px;
}

#edit {
    grid-row: 3/15;
    grid-column: 8/14;
    background-color: #272e38;
    border-radius: 20px;
    border: 3px solid #1a1f26;
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(20,1fr);
}
#submitedit {
    align-items: center;
    background-color: #222831;
    border: 2px solid #a0a8b5;
    border-radius: 25px;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 20px;
    max-width: 480px;
    min-height: 40px;
    min-width: 0px;
    overflow: hidden;
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    touch-action: manipulation;
    transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    transition: 0.2s;
    text-shadow: none;
    font-family: "Archivo Black", sans-serif;
    font-weight: 700;
    text-decoration: none;
    grid-row: 16/19;
    grid-column: 3/9;
}
    #submitedit:hover,
    #submitedit:focus {
        background-color: antiquewhite;
        color: #222831;
        text-shadow: none;
    }
#namninput {
    grid-column: 3/9;
    grid-row:5/7;
    margin: 10px;
    border-radius:8px;
}
#prisinput {
    grid-column: 3/9;
    margin: 10px;
    border-radius: 8px;
    grid-row: 8/10;
}
#infoinput {
    grid-column: 3/9;
    margin: 10px;
    border-radius: 8px;
    grid-row:11/15;
}
#namnlbl {
    grid-row: 4/6;
    grid-column: 1/21;
    color: white;
    font-family: "Archivo Black", sans-serif;
    font-weight: 600;
    font-size: 0.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
#prislbl {
    grid-row: 7/9;
    grid-column: 1/21;
    color: white;
    font-family: "Archivo Black", sans-serif;
    font-weight: 600;
    font-size: 0.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
#infolbl {
    grid-row: 10/12;
    grid-column: 1/21;
    color: white;
    font-family: "Archivo Black", sans-serif;
    font-weight: 600;
    font-size: 0.8vw;
    display: flex;
    justify-content: center;
    align-items:center;
}
#kategorilbl {
    grid-row: 14/18;
    grid-column: 1/21;
    color: white;
    font-family: "Archivo Black", sans-serif;
    font-weight: 600;
    font-size: 0.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
#header {
    font-family: "Archivo Black", sans-serif;
    font-weight: 600;
    font-size: 1.3vw;
    color:white;
    justify-content:center;
    align-items:center;
    justify-content:center;
    grid-column:1/21;
    grid-row:1/3;
    display:flex;
}
#varmantal, #kallantal, #dryckantal {
    font-family: "Archivo Black", sans-serif;
    font-weight: 600;
    font-size: 1.3vw;
    color: white;
   text-shadow: 0px 4px 5px rgba(0,0,0,0.6);
   margin-left:170px;
}
.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: none;
    touch-action: none;
   
}