body {
    margin:0;
    padding:0;
    background-color:#eee;
    color:#000;
    min-width:750px;
    font-family: Arial,sans-serif;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 13px;
}
/* #infobtn{
    display: none; 
    width: 35px;
    padding: 10px;
    float:right;
} */
#wrap {
    background:#fff;
    margin: auto;
    margin-top:10px;
    margin-bottom:10px;
    width:750px;
    box-shadow: 5px 5px 50px #aaa;
    display: grid; 
    grid-template-columns: auto auto auto; 
    grid-template-rows: auto auto auto auto; 
    grid-template-areas: 
      "header header langdiv"
      "nav nav nav"
      "main main main"
      "footer footer footer";
}
#header {
    height:90px;
    grid-area: header;
    background-color:#F9B000;
/*     background-color:#f3c525;
    background-image: url(./../img/header.png); */
    
}
#langdiv {
    grid-area: langdiv;
    background-color:#F9B000;
    text-align: right;
    padding-top: 20px;
    padding-right: 5px;
}
.swe-lang {
    margin-right: 10px;
}
.eng-lang{
    margin-left: 10px;
}
#header h1 {
    padding:5px;
    margin:0;
}
#headerimg {
    cursor: pointer;
    margin-top: 30px;
    margin-left: 30px;
/*     height:116px; */
    float:left;
    height: 50px;
}
#headerimg:hover {
    cursor: pointer;
}

#loader {
    text-align: center;
}

#loader-book {
    text-align: center;
    margin-top: 45%;
}

#redirect {
    text-align: center;
    margin-top: 45%;
}

#nav {
    background-color:#F9B000;
/*     background-color:#f3c525; */
    padding:5px;
    height:26px;
    text-align:right;
    border-bottom:2px solid #F9B000;
    grid-area: nav;
}
#nav ul{
    margin:0;
    padding:0;
}
#nav li{
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}
#main {
    background-color:#fff;
    float:right;
    width:495px;
    grid-area: main;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    height:auto;
    min-height:500px;
/*     box-shadow: 1px 1px 2px #dedede;
    border: 1px solid #dedede; */
}

.error {
    margin-top: 40%;
}

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

#main h2, #main h3, #main p {
    padding:0 10px;
}
/* #sidebar {
    padding-left:15px;
    padding-bottom:15px;
    background-color:#fff;
    margin-left:10px;
    margin-top:10px;
    float:left;
    width:200px;
    box-shadow: 1px 1px 2px #dedede;
    border: 1px solid #dedede;
}
#sidebar h3, #sidebar p {
    padding:0 10px;
} */
#footer {
    background-color:#ecf0f1;
    clear:both;
    grid-area: footer;
}
#footer p {
    border-top:2px solid #312D2D;
    padding:5px;
    margin:0;
    text-align:center;
}

button:hover {
    cursor: pointer;
}
.clickable:hover {
    cursor: pointer;
}
a, img {
    border:none;
}
p {
    font-size: 13px;
}
h1 {
    font-size: 18px;
}
h2 {
    font-size: 16px;
}
h3 {
    font-size: 15px;
}
a:link {
    color:#498a2e;
}
a:visited {
    color:#498a2e;
}
a:hover {
    color:#498a2e;
}
a:active {
    color:#498a2e;
}
.statsButton {
-moz-box-shadow:inset 0px 1px 0px 0px #9acc85;
-webkit-box-shadow:inset 0px 1px 0px 0px #9acc85;
box-shadow:inset 0px 1px 0px 0px #9acc85;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
background-color:#74ad5a;
border:1px solid #3b6e22;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:4px 4px;
text-decoration:none;
width:172px;
}
.statsButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
background-color:#68a54b;
}
.statsButton:active {
position:relative;
top:1px;
}

@media screen and (max-width: 760px)  {
    body {
        margin:0;
        padding:0;
        background-color:#ddd;
        color:#000;
        min-width:100%;
        width: 100%;
    /*     font-family: Arial,sans-serif; */
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        font-size: 16px;
    }
    #wrap {
        background:#fff;
        margin: auto;
        width:100%;
        grid-template-columns: auto auto;  
        grid-template-rows: auto auto auto auto auto; 
        grid-template-areas: 
          "header langdiv"
          "nav nav"
          "main main"
          "footer footer";
    }
/*     #infobtn{
        display: true; 
        width: 35px;
        padding: 10px;
        float:right;
        right:0px;
    } */
    #header {
        height:70px;
        background-color:#F9B000;
    /*     background-color:#f3c525;
        background-image: url(./../img/header.png); */
    }
    #headerimg {
    /*     z-index:999; */
        cursor: pointer;
    /*     height:70px; */
        margin-top:10px;
        margin-left:10px;
        float:left;
        height: 50px;
    }
    #headerimg:hover {
        cursor: pointer;
    }
    #nav {
        background-color:#F9B000;
    /*     background-color:#f3c525; */
        padding:5px;
        height:20px;
        text-align:left;
        border-bottom:2px solid #F9B000;
    }
    #nav > ul{
        margin:0;
        padding:0;
        float:right;
    }
    #nav li{
        display:inline;
        list-style:none;
        margin:0;
        padding:0;
    }
    
    #main {
        background-color:#fff;
        float:right;
        height:auto;
        padding: 0px 20px;
    }
    
    #main h2, #main h3, #main p {
        padding:0 10px;
    }
/*     #sidebar {
        padding-left:15px;
        padding-bottom:15px;
        background-color:#fff;
        margin:10px;
        margin-top: -5px;
        float:left;
        width:90%;
        box-shadow: 1px 1px 5px #ddd;
        border: 1px solid #ddd;
    }
    #sidebar h3, #sidebar p {
        padding:0 10px;
    } */
    #footer {
        background-color:#ecf0f1;
        clear:both;
    }
    #footer p {
        border-top:2px solid #312D2D;
        padding:5px;
        margin:0;
        text-align:center;
    }
    ul{
        list-style-type: none;
    }
    .statsButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #9acc85;
    -webkit-box-shadow:inset 0px 1px 0px 0px #9acc85;
    box-shadow:inset 0px 1px 0px 0px #9acc85;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
    background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
    background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
    background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
    background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
    background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
    background-color:#74ad5a;
    border:1px solid #3b6e22;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:13px;
    font-weight:bold;
    padding:6px 12px;
    text-decoration:none;
    width:172px;
    }
    .statsButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
    background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
    background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
    background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
    background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
    background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
    background-color:#68a54b;
    }
    .statsButton:active {
    position:relative;
    top:1px;
    }
}

@media screen and (max-width: 545px)  {
    #langdiv > a {
        margin: 0px 10px;
    }
    #main {
        width: auto;
    }
}

@media screen and (max-width: 440px)  {
    #headerimg {
        height: 40px;
    }
    #langdiv {
        padding-top: 15px;
    }
}

@media screen and (max-width: 385px)  {
    #wrap {
        display: grid; 
        grid-template-columns: auto; 
        grid-template-rows: auto auto auto auto auto; 
        grid-template-areas: 
          "header"
          "langdiv"
          "nav"
          "main"
          "footer";
    }
    #headerimg{
    margin-left: auto;
    margin-right: auto;
    float: none;
    display: block;
    width: auto;
    } 
    #langdiv {
    display: flex;
    justify-content: center;
    padding-top: 0px;
    padding-right: 0px;
    }
    #nav{
        height: auto;
    }
    #nav > ul {
        float: none;
        text-align: center;
        margin-top: 10px;
    }
    #main {
        margin: 0px;
        padding: 0px;
        font-size: 14px;
    }
}