html {
    font-size: 14px;
    /*background-image: url('Phone-om.jpg');*/
    /*background-image: url('../Bilder/Dator.jpg');*/
}

@media (min-width: 768px) {
    html {
        font-size: 17px;
        /*background-image: url('Phone-om.jpg');*/
        /*background-image: url('../Bilder/Dator.jpg');*/
    }
}

/*.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}*/

html {
    position: relative;
    width: 100%;
    /*background-image: url('Phone-om.jpg');*/
    /*background-image: url('../Bilder/Dator.jpg');*/
}

body {
    /*margin-bottom: 60px;*/
    background-image: url('../Bilder/Bakgrund.jpg');
    /*background-image: url('../Bilder/Phone-om.jpg');*/
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /*background-color: black;*/
    /*width: 100%;
    height: 100%;*/
    font-family: Calibri;
    font-weight: 500;
}
#profilPic {
    display: flex;
    justify-self:  center;
    width:50px;
    height:50px;
    border-radius:80px;
    grid-row:1/2;
    grid-column:14/16;
    align-self:center;
 

}
#bild {
    border-radius: 80px;
    grid-column:6/8;
    grid-row:1/3;
    align-self:center;
    justify-self:center;
    

}

#profbild {
    border-radius: 80px;
    grid-row: 1/2;
    grid-column: 14/16;
    width: 100px;
    height: 100px;
}

#hlista {
    grid-row: 3/18;
    grid-column: 5/11;
    /*justify-self:center;
    text-align:center;*/
    text-align: center;
   
}

#wrapper {
    width: 100%;
    height: 100%;
    display: grid;
    top: 0;
    left: 0;
    grid-template-columns: repeat(15, 1fr);
    grid-auto-rows: 100px;

    margin-bottom: 60px;
    /*overflow: hidden;*/
}
#hback {
    grid-row: 3/18;
    grid-column: 5/11;
    background-color: white;
    border-radius: 40px;
    /*width: 50%;
    heigth: 75%;*/
   
}

#hjälprubrik {
    /*align-self:center;*/
   
}
#titel{
    text-align:center;
}

#rut {
    width: 100%;
    height: 100%;
    display: grid;
    top: 0;
    left: 0;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows:100px;
    margin-bottom: 40px;

}

#persinfo{
    grid-row:3/5;
    grid-column:6/8
}

#accnam {
    grid-row: 2/4;
    grid-column: 10/13;
   
    /*display: flex;
    justify-self: center;*/
}

#accbak {
    grid-row: 2/4;
    grid-column: 10/13;
    background-color: white;
    border-radius: 40px;
    margin-right:20px;
}

#AMrub {
    grid-row: 1/2;
    grid-column: 10/12;
    align-self: center;
    text-align: center;
    margin-right: 10px;
}

#dginfo{
    grid-row:5/13;
    grid-column:5/9;
}

#dgback{
    background-color:white;
    grid-row:5/13;
    grid-column:5/9;
    border-radius:40px;
    
}

#förN {
    display: flex;
    justify-content: space-between;
    align-self: center;
    font-family: 'Lexend';
    font-weight: bold;

}

#rutt {
    width: 100%;
    height: 100%;
    display: grid;
    top: 0;
    left: 0;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(7, 150px);
    margin-bottom: 40px;
}

#dgeinfo {
    grid-row: 2/7;
    grid-column: 5/9;
    text-align: center;
}

#dgerub {
    grid-row: 1;
    grid-column: 6/8;
    align-self: center;
    justify-self: center;
    font-family: 'Lexend';
    font-weight: bold;
}

#dgeback {
    background-color:white;
    border-radius:40px;
    grid-row: 2/7;
    grid-column: 5/9;
}

/*#profknapp{
    display:flex;
    justify-content:space-between;
}*/

#eprof {
    grid-row: 3;
    grid-column: 6/8;
    background-color: white;
    width: 110px;
    height: 35px;
    color: black;
    border-radius:10px;
    align-self: center;
    justify-content: center;
    border-color:black;
}

#utprof {
    grid-row: 3;
    grid-column: 2/3;
    background-color: white;
    width: 110px;
    height: 35px;
    color: black;
    border-radius: 10px;
    align-self: center;
    justify-content: center;
    border-color:black;
}

#delprof {
    grid-row: 3;
    grid-column: 7/9;
    background-color: white;
    width: 110px;
    height: 35px;
    color: black;
    border-radius: 10px;
    align-self: center;
    justify-content: center;
    border-color:black;
}

#Dmrub {
    font-family: 'Lexend';
    font-weight:bold;
}

#behjelp {
    grid-row:1/3;
    grid-column:2/5;
    background-color:white;
    width:120px;
    height:35px;
    color:black;
    border-radius:10px;
    margin-top:20px;
    margin-left:80px;
    border-color:black;
   
    
}

#logwrapper {
    width: 100%;
    height: 100%;
    display: grid;
    top: 0;
    left: 0;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(10, 100px);
}

#logback {
    background-color: white;
    border-radius: 40px;
    grid-row: 4/7;
    grid-column: 5/9;

}

#logIn {
    grid-row: 4/7;
    grid-column: 6/10;
    align-self:center;
    font-size:18px;

}

#logrub {
    grid-row: 2/4;
    grid-column: 5/9;
    align-self: center;
    text-align: center;
    font-weight: bolder;
    font-family: 'Judson';
    font-size: 65px;
}
#crerut {
    width: 100%;
    height: 100%;
    display: grid;
    top: 0;
    left: 0;
    grid-template-columns: repeat(19, 100px);
    grid-template-rows: repeat(11, 100px);
}



#lös {
    display:flex;
    justify-content:space-between;
}

#hemrub {
    grid-row: 1/3;
    grid-column: 6/10;
    align-self: center;
    text-align: center;
    font-weight: bolder;
    font-family: 'Judson';
    font-size: 65px;
}

#hcrerut {
    width: 100%;
    height: 100%;
    display: grid;
    top: 0;
    left: 0;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 90px);
}

#create {
    grid-column:9/14;
    grid-row:4/9;
    font-size:18px;

}

#hcreate{
    grid-row:5/8;
    grid-column:5/9;
}

#hcrub {
    grid-row: 2/4;
    grid-column: 4/10;
    align-self: center;
    text-align: center;
    font-weight: bolder;
    font-family: 'Judson';
    font-size: 65px;
}




#hcback {
    background-color: white;
    border-radius: 40px;
    /*width:494px;
    height:350px;*/
    grid-row: 4/8;
    grid-column: 5/9;
}

#skarub {
    grid-column: 8/13;
    grid-row: 2;
    text-align:center;
    font-weight:bolder;
    font-family:'Judson';
    font-size:65px;
}

#knapp {
    background-color: white;
    width: 110px;
    height: 35px;
    color: black;
    border-radius: 10px;
    border-color:black;
    /*align-self: center;
    justify-content: center;*/
}

#hemknapp {
    grid-row: 1;
    grid-column: 2;
    background-color: white;
    width: 110px;
    height: 35px;
    color: black;
    border-radius: 10px;
    align-self: center;
    justify-content: center;
}

#skback {
    background-color: white;
    border-radius: 40px;
    grid-row: 3/10;
    grid-column: 8/13;
}

#omoss {
    grid-row: 10/12;
    grid-column: 8/13;
    background-color: white;
    /*width: 110px;
    height: 35px;*/
    color: black;
    border-radius: 10px;
    align-self: center;
    justify-content: center;
}

#loggain {
    grid-row: 8;
    grid-column: 8/13;
    background-color: white;
    width: 110px;
    height: 35px;
    color: black;
    border-radius: 10px;
    align-self: center;
    justify-content: center;
}

#omossrut {
    width: 100%;
    height: 100%;
    display: grid;
    top: 0;
    left: 0;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 90px);
}

#omosstext {
    grid-column: 4/11;
    grid-row: 6/10;
}

#omossrub{
    grid-row:3/5;
    grid-column:5/10;
    align-self:center;
    text-align:center;
    font-size:65px;
}

#omossback{
    background-color:white;
    border-radius:40px;
    grid-row:5/9;
    grid-column:3/12;
}

#skapahem {
    grid-row: 10;
    grid-column: 6/9;
    background-color: white;
    /*width: 110px;
    height: 35px;*/
    color: black;
    border-radius: 10px;
    align-self: center;
    
}

#logo {
    grid-row: 1/3;
    grid-column: 9/12;
    align-self: center;
    /*text-align: center;
    font-weight: bolder;
    font-family: 'Judson';
    font-size: 65px;*/
}

#arm {
    grid-row: 1/3;
    grid-column: 9/11;
    align-self: center;
    justify-self:center;
}

#beskgrid{
    display:grid;
    grid-template-rows:repeat(5);
    grid-template-columns:repeat(3);
}

#Aa{
    display:flex;
    justify-content:space-between;
    text-align:center;
    font-weight:bold;
    justify-content:center;
}

#Giljotin {
    width: 100%;
    height: 100%;
    display: grid;
    top: 0;
    left: 0;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 90px);
}

#edinfo {
    grid-row: 3/10;
    grid-column: 5/9;
    align-self:center;
    text-align:center;
}

#edback {
    background-color: white;
    grid-row: 3/10;
    grid-column: 5/9;
    border-radius: 40px;
}

#spamol {
    background-color: white;
    width: 75px;
    height: 35px;
    color: black;
    border-radius: 10px;
    border-color:black;
}

#nej {
    background-color: white;
    width: 95px;
    height: 35px;
    color: black;
    border-radius: 10px;
    border-color: black;
    
}