@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url("/fonts/Open_Sans/OpenSans-Regular.ttf");
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url("/fonts/Raleway/Raleway-Regular.ttf");  }

html,body,div {
    padding: 0;
    margin: 0;
    border: 0;
}

html {
    /* width: 100vw; */
    /* overflow-x: hidden; */
}
body {
    position: relative;
    /* color: #003057; */
    color: #000;
    overflow:hidden;
    font-family: Raleway, sans-serif;
    /* background: pink; */
    min-height: 500px;
}

.test {
    width: 10px;
    width: calc(100% - 100%);
}

#applicationContainer {
    /* width: 100vw; */
    /* height: calc(100vh - 70px); */
    /* height: 100vh; */
    background: #fff;
    overflow-x: hidden;
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.leftList .header {
    width: 100%;
    /* height: 74px; */
    background: #fff;
    position: relative;
    top: 0;
    left: 0;
    font-family: Raleway, sans-serif;
}


.icon {
    display: inline-block;
}
.icon, .icon svg {
    height: 100%;
    /* width: 100%; */
}

.content {
    width: 100%;
    height: -webkit-calc(100% - 74px);
    height: calc(100% - 74px);
    /* background: green; */
    position: absolute;
    top: 74px;
    left: 0;
    overflow: auto;
}

.map {
    width: 65%;
    height: 100%;
    background: lightgrey;
    position: absolute;
    top: 0;
    left: 0;
}
.map.hidden {
    display: none;
}

.list {
    width: 35%;
    height: 100%;
    /* background: pink; */
    position: absolute;
    right:0;
    top: 0;
}

.oss_footer {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    background: #f2f1ef;
    font-size: 0.8em;
    text-align: center;
    height: 25px;
    line-height: 25px;
    color: #000;
}

.oss_footer a:link, .oss_footer a:visited, .oss_footer a:hover, .oss_footer a:active {
    color: #000;
    text-decoration: none;

}

.aboutGuideText, .leftList, .instance_info, .ossinfo, .mapInfobox, input, .number, .subtitle, .listcontent .title {
    font-family: 'Open Sans', sans-serif;
}

.leftList {
    width: 400px;
    /* height: 100%; */
    top: 0;
    bottom: 100px;
    background: #f2f1ef;
    position: absolute;
    display: none;
    left: -400px;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 999;
}
.leftList.active {
    display: block;
}

.leftList_menu {
    width: 400px;
    bottom: 0;
    height: 100px;
    /* background: #8F8F8F; */
    background-color: #fff;
    color: #000;
    position: absolute;
    left: -400px;
    display: none;
}
.leftList_menu.black {
    background-color: #1f1f1f;
    color: #ccd9dd;
}

.list.swapped .leftList_menu {
    display: block;
}

.leftList_menu .gridcontainer {
    display: grid;
    /* grid-template-columns: 16.6% 16.6% auto auto 16.6% 16.6%; */
    grid-template-columns: 20% 20% 20% 20% 20%;
    text-align: center;
    grid-row-gap: 1px;
    font-size: 11px;
    margin: 5px 0 0 0;
}
.leftList_menu .gridcontainer .progressTime, .leftList_menu .gridcontainer .progressTotal {
    font-weight: 700;
}
.leftList_menu .gridcontainer .progressTime.grey, .leftList_menu .gridcontainer .progressTotal.grey {
    color: #c2c2c2;
}
.leftList_menu.black .gridcontainer .progressTime.grey, .leftList_menu.black .gridcontainer .progressTotal.grey {
    color: #525252;
}

.leftList_menu .gridcontainer .progressBar {
    grid-column: 2 / span 3;
}
.leftList_menu .progressBar progress {
    width: 100%;
    height: 5px;
    margin: 0 0 3px 0;
}
/* Vit menyruta, progress bakgrund */
.leftList_menu .progressBar progress::-webkit-progress-bar {background-color: #000; width: 100%;}
.leftList_menu .progressBar progress {background-color: #000;}
/* Svart menyruta, progress bakgrund */
.leftList_menu.black .progressBar progress::-webkit-progress-bar {background-color: #ccd9dd; width: 100%;}
.leftList_menu.black .progressBar progress {background-color: #ccd9dd;}
/* Inaktiv style */
.leftList_menu.black .progressBar.grey progress::-webkit-progress-bar {background-color: #525252; width: 100%;}
.leftList_menu.black .progressBar.grey progress {background-color: #525252;}



/* Vit menyruta, progress-färgen */
.leftList_menu .progressBar progress[value] {color:#c2c2c2;}
.leftList_menu .progressBar progress::-webkit-progress-bar-value {background:#c2c2c2;}
.leftList_menu .progressBar progress::-webkit-progress-value {background:#c2c2c2;}
.leftList_menu .progressBar progress::-moz-progress-bar {background:#c2c2c2;}
/* Svart menyruta, progress-färgen */
.leftList_menu.black .progressBar progress[value] {color:#63808b;}
.leftList_menu.black .progressBar progress::-webkit-progress-bar-value {background:#63808b;}
.leftList_menu.black .progressBar progress::-webkit-progress-value {background:#63808b;}
.leftList_menu.black .progressBar progress::-moz-progress-bar {background:#63808b;}

.leftList_menu .gridcontainer .progressTotal {
    /* grid-column: 5 / span 2; */
}
.leftList_menu .gridcontainer .title {
    grid-column: 1 / span 6;
    /* line-height: 11px; */
    padding: 0 20px 2px 20px;
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* width: 274px; */
    overflow: hidden;
}
.leftList_menu .ico {
    height: 40px;
}
.leftList_menu .rewind.grey path, .leftList_menu .audioIcon.grey path, .leftList_menu .wind.grey path, .leftList_menu .back.grey path, .leftList_menu .next.grey path {
    fill: #c2c2c2;
    stroke: #c2c2c2;
}
.leftList_menu.black .rewind.grey path, .leftList_menu.black .audioIcon.grey path, .leftList_menu.black .wind.grey path, .leftList_menu.black .back.grey path, .leftList_menu.black .next.grey path {
    fill: #525252;
    stroke: #525252;
}

.leftList_menu .audioIcon.grey path {
    fill: #c2c2c2; !important;
}

.leftList_menu .close {
    border-left: 1px solid #727272;
}
.leftList_menu .close.staffan {
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 6;
    height: auto;
    margin-top: 14px;
}
.leftList_menu .close path {
    /* display: none; */
}

.leftList_menu .ico.small .icon {
    height: 24px;
    margin: 8px 0 0 0;
}
.leftList_menu .close.small .icon {
    height: 35px;
    margin-top: 12px;
}


.leftList_menu .gridcontainer .griddyhtml,body,div {
    padding: 0;
    margin: 0;
    border: 0;
}

.oss_footer {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    background: #f2f1ef;
    font-size: 0.8em;
    text-align: center;
    height: 25px;
    line-height: 25px;
    color: #000;
}

.leftList.locked {
    bottom: 0;
}

.leftList_menu .container {
    width: 230px;
    margin: 0 auto;
    height: 100%;
}

.leftList_menu .arrow {
    float: left;
    height: 55px;
    width: 55px;
    padding: 5px;
    box-sizing: border-box;
}

.leftList_menu .mar20 {
    width: 20px;
    height: 100%;
    float: left;
}

.leftList_menu path, .leftList_menu polygon {
    fill: #000;
}
.leftList_menu.black path, .leftList_menu.black polygon {
    fill: #ccd9dd;
}

.leftList_menu .timeline {
    width: 70%;
    height: 25px;
    /* background: red; */
    bottom: 5px;
    left: 15%;
    position: absolute;
    color: #ccd9dd;
}

.leftList_menu .timeline .currentTime {
    position: absolute;
    top: 0;
    left: 0;
}

.leftList_menu .timeline .maxTime {
    position: absolute;
    top: 0;
    right: 0;
}

.leftList_menu .timeline progress {
    background: blue;
    width: 100%;
    height: 5px;
    position: relative;
    top: 7px;
}

.leftList_menu .audioIcon .audioplayicon {
    /* position: absolute; */
    /* left: 50%; */
    /* top: 50%; */
    /* top: 5px; */
    /* -webkit-transform: translate(-50%); */
    /* transform: translate(-50%); */
    /* background: rgba(0,0,0,0,0.4); */
    /* border-radius: 50%; */
    width: 30px;
    height: 30px;
    display: inline-block;
    margin: 6px 0 0 0;
}

.leftList_menu .audioIcon .audioplayicon svg g path{
    /* fill: #8F8F8F !important; */
}

.leftList .close {
    position: absolute;
    /* background: grey; */
    right: 20px;
    top: 20px;
    /*-webkit-transform: translate(0,-50%); */
    /* transform: translate(0,-50%); */
    height: 30px;
    /* width: 72px; */
    width: 22px;
    /* font-size: 1.8em; */
    /* text-align: center; */
    /* line-height: 48px; */
    cursor: pointer;
}

.leftList .closeText {
    line-height: 32px;
    float: left;
    padding-right: 5px;
}
.leftList .closeX {
    /* font-size: 1.8em; */
    height: 100%;
    float: left;
    padding: 20px;
    transform: translate(-20px,-20px);
}

.leftList .media {
    position: absolute;
    width: 100%;
    left: 0;
    /* top: 50px; */
    /* height: 300px; */
}

.leftList .media .header {
    background: #1f1f1f;
    /* height: 80px; */
    color: #fff;
    min-height: 70px;
}

/*.leftList .media .images {
    width: 100%;
    height: 258px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}*/

.leftList .media .text {
    padding: 0 20px 0 20px;
}

.leftList .title {
    /* font-size: 1.5em; */
    /* width: 100%; */
    /* box-sizing: border-box; */
    /* line-height: 1.3em; */
    /* font-weight: bold; */
}
.leftList .header .title {
    padding: 46px 20px 10px 27px;
    /* box-sizing: border-box; */

    /* position: absolute; */
    /* padding: 0 50px 0 15px; */
    /* top: 50%; */
    /* -webkit-transform: translate(0,-50%); */
    /* transform: translate(0,-50%); */
    /* max-height: 100%; */
    /* overflow: hidden; */
    /* margin: 30px 0 0 0; */
    font-weight: 100;
    font-size: 1.2em;
}

.leftList .media>.title {
    padding: 20px 20px 0 20px;
}

.leftList.locked {
    background: #737373;
}
.leftList.locked.wrongcode {
    background: red;
}
.leftList.locked.wrongcode .accessBtn {
    background: #981010;
}
.leftList.locked .lock {
    width: 250px;
    left: 50%;
    position: relative;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    margin: 20px 0 0 0;
}

.leftList.locked .lock svg {
    width: 250px;
    height: 170px;
}

.leftList.locked .lock svg path {
    fill: #fff;
}

.leftList.locked .text {
    position: relative;
    width: 100%;
    padding: 0 40px 0 40px;
    text-align: center;
    font-size: 1.5em;
    color: #fff;
    box-sizing: border-box;
    margin: 10px 0 0 0;
}

.leftList.locked .access {
    border: 2px solid #fff;
    width: 80%;
    position: relative;
    font-size: 1.8em;
    /* top: 400px; */
    text-align: center;
    padding: 20px 10px 20px 10px;
    box-sizing: border-box;
    color: #fff;
    /* height: 77px; */
    overflow: hidden;
    margin: 20px 10% 0 10%;
}

.leftList.locked .access input {
    width: 100%;
    /* height: 100%; */
    box-sizing: border-box;
    border: 0;
    margin: 0;
    font-size: 1em;
    background: transparent;
    outline: none;
    color: inherit;
    text-align: center;
    line-height: 30px;
}

.leftList.locked .result {
    text-align: center;
    color: red;
    font-size: 2.2em;
    /* background: #fff; */
    /* text-shadow: 1px 1px white; */
    /* -webkit-text-fill-color: red; */
    /* -webkit-text-stroke-width: 1px; */
    /* -webkit-text-stroke-color: white; */
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    margin: 5px 0 0 0;
    display: none;
}

.leftList.locked .access input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #fff;
}
.leftList.locked .access input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff;
    opacity:  1;
}
.leftList.locked .access input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff;
    opacity:  1;
}
.leftList.locked .access input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #fff;
}

.leftList.locked .accessBtn {
    position: relative;
    /* top: 500px; */
    width: 120px;
    background: #444;
    text-align: center;
    height: 60px;
    line-height: 60px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    color: #fff;
    font-size: 1.4em;
    border-radius: 25px;
    margin: 15px 0 0 0;
}

.mediaplayer {
    width: 100%;
    height: 42px;
    background: url("/images/mediaplayer.png");
    background-position: center;
    background-size: cover;
}

.audioplayer {
    background: #1f1f1f;
    height: 200px;
    width: 100%;
    position: relative;
    margin: 1px 0 0 0;
    display: none;
}

.someIcons {
    width: 100%;
    height: 60px;
    /* background: red; */
    /* padding: 30px 0 0 0; */
    position: absolute;
    top: 48px;
}

.audioplayer path{
    fill: #fff;
}
.audioplayer .rewindPil {
    height: 35px;
    position: absolute;
    top: 14px;
    left: 50px;
}
/*.audioplayer .audioIcon {
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translate(-50%);
    background: #fff;
    border-radius: 40px;
    padding: 10px;
    height: 60px;
}*/

.audioplayer .audioIcon .audioplayicon {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    width: 70px;
    height: 70px;
}

.audioplayer .audioIcon .icon {
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
}
.audioplayer .audioIcon .icon svg > path{
    -webkit-transform: translate(4px);
    transform: translate(4px);
}


.audioplayer .audioIcon path {
    fill: #262626;
}
.audioplayer .forwardPil {
    height: 35px;
    position: absolute;
    top: 14px;
    right: 50px;
}
.audioplayer .ljudIcon {
    height: 20px;
    position: absolute;
    left: 10px;
    bottom: 27px;
}
.audioplayer .repeatIcon {
    height: 20px;
    position: absolute;
    right: 10px;
    bottom: 27px;
}

.audioplayer .timeline {
    width: 70%;
    height: 40px;
    /* background: red; */
    bottom: 15px;
    left: 15%;
    position: absolute;
    color: #fff;
}

.audioplayer .timeline progress {
    background: blue;
    width: 100%;
    height: 5px;
}

.audioplayer .timeline progress[value] {color:red}
.audioplayer .timeline progress::-webkit-progress-bar-value {background:red}
.audioplayer .timeline progress::-webkit-progress-value {background:red}
.audioplayer .timeline progress::-moz-progress-bar {background:red}

/*.audioplayer .timeline progress::-webkit-progress-bar {
    background: red;
}*/

.audioplayer .timeline .currentTime {
    position: absolute;
    top: 22px;
    left: 0;
    font-size: 0.7em;
}

.audioplayer .timeline .maxTime {
    position: absolute;
    top: 22px;
    right: 0;
    font-size: 0.7em;
}

.videoPlayer {
    width: 100%;
    height: 165px;
    background: #000;
    margin: 2px 0 0 0;
    position: relative;
}

.videoPlayer .videoIcon {
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.videoPlayer .videoIcon .icon {
    position: absolute;
    left: 50%;
    top: 40%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    width: 70px;
    height: 70px;
}
.videoPlayer .videoIcon .icon svg {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    height: 50px;
}

.videoPlayer video {
    width: 100%;
    height: 100%;
}

.imagePlayer {
    width: 100%;
    /* height: 50vh; */
    margin: 1px 0 0 0;
    position: relative;
    background-color: #1f1f1f;
    /* padding: 0 0 28px 0; */

}

.imagePlayer .scrollthingi {
    overflow: hidden;
    /* height: 100%; */
    height: 50vh;
}

.imagePlayer .images {
    height: 100%;
    width: 100%;
    position: relative;
    /* background-color: #1f1f1f; */
}

.imagePlayer .images .img {
    float: left;
    height: 100%;
    width: 100%;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* background-color: #1f1f1f; */
    background-clip: content-box;
    position: absolute;
}

.imagePlayer .dotnodes {
    position: absolute;
    left: 50%;
    bottom: 34px;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    padding: 5px;
    background: rgba(250,250,250,0.4);
    border-radius: 10px;
    display: none;
}
.imagePlayer .dotnodes.active {
    display: block;
}

.imagePlayer .dotnodes .dotnode {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background: #000;
    float: left;
    margin: 3px;
}

.imagePlayer .dotnodes .dotnode.current {
    background: #fff;
}

.imagePlayer .Left {
    position:absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    height: 64px;
}
.imagePlayer .Right {
    position:absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    height: 64px;
}

.imagePlayer .Right polygon, .imagePlayer .Left polygon {
    fill: #bfbfbf;
}

.imagePlayer .right polygon, .imagePlayer .left polygon {
    fill: rgba(128, 128, 128,0.5);
    stroke: rgba(0,0,0,0.6);
}

.imagePlayer .caption {
    color: #fff;
    background: rgba(255,255,255,0.5);
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 0; */
    width: 100%;
    overflow: hidden;
    /* height: 18px; */
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 4px 20px 6px 20px;
    font-size: 0.9em;
    box-sizing: border-box;
}

.imagePlayer .fullscreen_button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
}

.imagePlayer .fullscreen_button path {
    fill: none;
}
.imagePlayer .fullscreen_button polygon {
    fill: #bfbfbf;
}

.fullscreen_button .icon {
    width: 100%;
}

.fullscreen {
    position: fixed;
    top: 5vh;
    left: 5vw;
    right: 5vw;
    bottom: 5vh;
    background-color: #1f1f1f;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    z-index: 5;
}
.fullscreen.active {
    display: block;
}

.fullscreen .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(128, 128, 128,0.7);
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
}

.fullscreen .tinyscreen {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 10px;
}
.fullscreen .tinyscreen path {
    fill: #bfbfbf;
}

.imagePlayer .img_nodraw img {
    width: 0;
    height: 0;
}

.instanceList {
    height: 100%;
}

.titlebar {
    /* background: #FA8228; */
    background: linear-gradient(to bottom, #f99827 , #fce67e);
    width: 100%;
    height: 140px;
    position: absolute;
    left: 0;
    top: 0;
}

.backBtn {
    position: absolute;
    top: 12px;
    left: 26px;
    font-weight: lighter;
    font-size: 1.0em;
    opacity: 0.4;
    cursor: pointer;
    overflow: hidden;
    /* height: 20px; */
    text-overflow: ellipsis;
    white-space: nowrap;
}

.titlebar .title {
    position: absolute;
    top: 46px;
    left: 27px;
    font-weight: 100;
    font-size: 1.2em;
}

.titlebar .tabs {
    position: absolute;
    bottom: 0;
    height: 38px;
    width: 100%;
}

.titlebar .tabs .tab {
    float: left;
    padding: 10px;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    height: 19px;
}

.titlebar .tabs .tab.active {
    background: #f2f1ef;
    cursor: default;
}

.listcontent {
    width: 100%;
    /* height: calc(100% - 130px); */
    background: #f2f1ef;
    position: absolute;
    top: 140px;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.listcontent .tab {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    /* padding: 0 5px 0 5px; */
    box-sizing: border-box;
    /* padding: 0 5px 30px 0; */
    padding: 0 0 30px 0;
}
.listcontent .tab.active {
    display: block;
}

.listcontent .aboutGuide {
    padding: 20px 20px 0 20px;
    /* text-align: center; */
    width: 100%;
    box-sizing: border-box;
}
.listcontent .aboutGuide .aboutImage {
    width: 100%;
    /* height: 300px; */
    /* text-align: center; */
}
.listcontent .aboutGuide img {
    /* display: inline-block; */
    width: 100%;
    /* height: 100%; */
    /* padding: 0 10px 0 10px; */
    box-sizing: border-box;
}

.aboutGuideText {
    /* padding: 0 10px 0 10px; */
    /* width: 90%; */
    /* display: inline-block; */
    text-align: left;
}

.listcontent .creator .creatorImage {
    width: 100%;
    height: 300px;
    text-align: center;
}
.listcontent .creator .creatorImage img {
    display: inline-block;
    width: auto%;
    max-width: 450px;
    height: 100%;
}

.mapSwapBtn {
    position: absolute;
    right: 0;
    height: 100%;
    width: 100%;
    top: 0;
    background: #d9d9d9;
    /* background: #BAD9E8; */
    display: none;
}

.mapSwapBtnText {
    color: #000;
    position: absolute;
    top: 40px;
    left: calc(100% - 24px);
    z-index: 1;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: bottom left;
    transform: rotate(90deg);
    transform-origin: bottom left;
    /* font-weight: bold; */
    /* font-size: 0.9em; */
}
.mapSwapBtn.swapped .mapSwapBtnText {
    color: #000;
}
.mapSwapBtnArrow {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    width: 25px;
    height: 20px;
}
.googlemapsicon {
    position: relative;
    left: calc(100% - 23px);
    top: 9px;
    height: 17px;
}
.krumeluricon {
    position: relative;
    left: calc(100% - 23px);
    top: 9px;
    height: 40px;
    width: 17px;
    background-image: url("../images/krumilur.png");
    background-position: center;
    background-size: contain;
    /* background-color: white; */
    background-repeat: no-repeat;
    display: none;
}

.listSwapBtnText {
    color: #000;
    position: absolute;
    top: 55px;
    right: -12px;
    z-index: 1;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    font-weight: bold;
}
.listSwapBtnArrow {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    width: 25px;
    height: 20px;
}

.listSwapBtn {
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    top: 0;
    /* background: #FA8228; */
    /* background: linear-gradient(to bottom, #f99827 , #fce67e); */
    /* background: #5d6163; */
    background: #aeaeae;
    display: none;
}

.listSwapBtn .boxtext {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

#applicationContainer > .header {
    width: 100%;
    height: 74px;
    /*overflow: hidden; */

    display: grid;
    grid-template-columns: [icon] min-content [search] auto[language] 70px [menu] 55px;
    grid-template-rows: 74px;
}

.header.hidden {
    display: none;
}

.header .oss_icon {
    height: 100%;
    width: 250px;
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */
    cursor: pointer;
    background-image: url("/images/OSMS_logga_utanmost.png");
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    /* display: inline-block; */
}

.header .search {
    /* display: inline-block; */
    height: 100%;
    /* line-height: 74px; */
    /* vertical-align:top; */
    /* width: calc(100% - 280px - 40px); */
    /* width: auto; */
    /* margin: 0 0 0 10px; */
}

.header .searchicon {
    /* position: absolute; */
    /* height: 55px; */
    /* width: 140px; */
    /* top: 20px; */
    /* left: 92px; */
    /* background: lightgrey; */
    /* border-radius: 50%; */
    /* background-image: url("/images/1474042189_icon-111-search.svg"); */
    /* background-position: center; */
    /* background-size: cover; */
    display: none;
    margin: 17px 0 17px 0;
    height: 40px;
}
.header .searchicon .icon {
    /* float: left; */
    width: 40px;
    height: 40px;
    vertical-align: middle;
}
.header .searchicon #Layer1 {
    transform: translate(0, 2px);
}
.header .searchicon path {
    fill: rgb(160, 168, 171) !important;
}
.header .closeIcon {
    /* height: 70%; */
}
.header .searchicon .searchtext {
    /* float: left; */
    display: inline-block;
    /* line-height: 36px; */
    font-size: 1.2em;
    color: rgb(160, 168, 171);
    vertical-align: middle;
}

.header .closeIcon line {
    stroke: rgb(160, 168, 171) !important;
}

.header .closeSearch {
    font-size: 40px;
    text-align: center;
}

.header .languageIcon {
    width: 55px;
    padding: 19px 0 0 0;
    box-sizing: border-box;
    cursor: pointer;
    /* position: absolute; */
    /* right: 10px; */
    /* top: 10px; */
    /* display: inline-block; */
    /* vertical-align: top; */
    /* margin: 10px 0 0 0; */
}

.header .languageIcon path, .header .languageIcon polyline {
    fill: rgb(160, 168, 171)!important;
}

.header .languageIcon .icon {
    width: 100%;
}

.header .languageIcon svg {
    height: auto;
}

.header .searchbox {
    /* position: absolute; */
    /* left: 250px; */
    /* top: 16px; */
    /* height: 40px; */
    /* width: calc(100% - 280px - 40px); */
    /* width: 100%; */
    /* background: #fff; */
    /* padding: 0 10px 0 10px; */
    /* box-sizing: border-box; */
    height: 100%;
}

.header .searchbox input {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    font-size: 26px;
    border: 0;
    -webkit-appearance: none;
}

.header .searchbox input:focus{
    outline: none;
}

.header .searchbox input::-webkit-input-placeholder {
    color: #a0a8ab;
}

.header .searchbox input:-moz-placeholder { /* Firefox 18- */
    color: #a0a8ab;
}

.header .searchbox input::-moz-placeholder {  /* Firefox 19+ */
    color: #a0a8ab;
}

.header .searchbox input:-ms-input-placeholder {
    color: #a0a8ab;
}

.header .menu_icon {
    height: 34px;
    /* position: absolute; */
    /* right: 5px; */
    /* top: 22px; */
    /* background: lightgrey; */
    /* background: url("/images/1474042066_menu-alt.svg"); */
    cursor: pointer;
    padding: 15px 0 15px 0;
    /* background-position: center; */
    /* background-size: contain; */
}
.header .menu_icon .icon path {
    fill: rgb(160, 168, 171)!important;
}

.menu {
    display: none;
    width: 500px;
    height: 100vh;
    position: absolute;
    right: 0;
    -webkit-transform: translate(-100%);
    transform: translate(-100%);
    background: yellow;
    z-index: 2;
    border-left: 5px solid black;
}

.menuItem {
    width: 100%;
    background: #fff;
    height: 50px;
    line-height: 32px;
    border-bottom: 1px solid grey;
    padding: 10px;
    box-sizing: border-box;
}

.menu.active {
    display: block;
    -webkit-transform: translate(0);
    transform: translate(0);
}

#gmap_container {
    width: 100%;
    height: 100%;
    /* top: 1px; */
}

.listitem {
    position: relative;
    height: 80px;
    width: 100%;
    /* margin: 0 10px 0 10px; */
    cursor: pointer;
    box-sizing: content-box;
    /* border-bottom: 1px solid #e6e6e6; */
    /* padding: 10px 10px 10px 10px; */
    margin: 3px 0 0 3px;
    background: #fff;
    text-align: initial;
}
.listitem .otherStuff {
    width: calc(100% - 100px);
    height: 100%;
    margin-left: 100px;
    position: relative;
}

.listitem.marked .otherStuff{
    /* border: 2px solid blue; */
    background: #404040;
    color: #e3e3e3;
}
.listitem.old .otherStuff{
    /* background: #f2f2f2; */
}

.listitem .image {
    width: 100px;
    height: 80px;
    position: absolute;
    left: 0;
    top: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.listitem .title {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    line-height: 20px;
    font-size: 1em;
    overflow: hidden;
    height: 44px;
}

.listitem .subtitle {
    position: absolute;
    top: 54px;
    left: 15px;
    font-size: 0.9em;
    color: #b3b3b3;
}

.listitem .icons {
    height: 14px;
    width: 100%;
    position: absolute;
    bottom: 10px;
    /* left: 10px; */
    padding: 0 0 0 15px;
    box-sizing: border-box;
}

.listitem .icons > div {
    /* position: absolute; */
}
.listitem .icons .audio {
    float:left;
    height: 100%;
    margin: 0 5px 0 0;
}
.listitem .icons .video {
    float:left;
    margin: 0 5px 0 0;
}
.listitem .icons .video svg {
    height: 20px;
    position: relative;
    top: -2px;
}
.listitem .icons .time {
    float:left;
    height: 100%;
    margin: 0 5px 0 0;
}
.listitem .icons .time div {
    float: left;
}
.listitem .icons .time .icon {
    width: 16px;
}
.listitem .icons .time .number {
    font-size: 9px;
    line-height: 20px;
}

.listitem .icons svg path {
    fill: #404040;
}
.listitem .icons #visare {
    fill: #fff;
}
.listitem.locked .icons svg path {
    fill: #999;
}
.listitem.locked .icons .lock svg path {
    fill: #404040;
}
.listitem.marked .icons svg path,.listitem.marked .icons svg circle {
    fill: #fff;
}
.listitem.marked .icons #visare {
    fill: #404040;
}
.listitem.locked.marked .icons .lock svg path {
    fill: #fff;
}

.listitem .icons .lock {
    right: 6px;
    position: absolute;
    display: none;
    bottom: 0;
    height: 100%;
    /* width: 15px; */
}

.listitem.locked .icons .lock {
    display: inline-block;
}

.searchbg {
    display: none;
    position: fixed;
    top: 74px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(217, 217, 217,0.6);
}
.searchbg.active {
    display: block;
}

.searchResults {
    position: absolute;
    top: 74px;
    z-index: 1;
    background: #fff;
    width: 65%;
    /* margin-left: 80px; */
    display: none;
    /* height: calc(100vh - 80px); */
    padding: 0 0 20px 0;
    overflow-y:scroll;
    border-top: 2px solid #bfbfbf;
}
.searchResults.active {
    display: block;
}

.resultitem {
    cursor: pointer;
    padding: 5px 5px 5px 0;
    border-bottom: 2px solid #bfbfbf;
    height: 50px;
    box-sizing: border-box;
}
.resultitem:last-child {
    border-bottom: none;
}
.resultitem>div {
    float: left;
    line-height: 40px;
    margin:0 5px 0 5px;
}

.resultitem .picture {
    height: 40px;
    width: 40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.resultitem .typetext {
    color: grey;
    font-size:0.9em;
}

.search_result_language {
    color: grey;
    font-size:0.9em;
}

.mapInfobox {
    cursor: pointer;
}

.mapinfoPicture {
    width: 68px;
    height: 59px;
    background: #000;
    /* float: left; */
    background-size: cover;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    top: -4px;
    left: -4px;
}

.mapinfoTitle {
    float: left;
    line-height: 18px;
    margin-left: 75px;
    height: 39px;
    margin-top: 3px;
}

.mapinfoTitle .title {
    font-weight: bold;
}

.mapinfoTitle .merspace {
    margin: 3px 0 0 0;
}

.mapinfoSubtitle {
    position: absolute;
    top: 28px;
    left: 65px;
    font-size: 0.9em;
    height: 14px;
    width: 116px;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes swoshLeft {
    /*from {left: 100%;}
    to {left: 0%;}*/
    from {transform: translate(100%);}
    to {transform: translate(0%);}
    from {-webkit-transform: translate(100%);}
    to {-webkit-transform: translate(0%);}
}
.swoshLeft {
    animation-name: swoshLeft;
    animation-duration: 1s;
}
@keyframes swoshRight {
    from {transform: translate(-100%);}
    to {transform: translate(0%);}
    from {-webkit-transform: translate(-100%);}
    to {-webkit-transform: translate(0%);}
}
.swoshRight {
    animation-name: swoshRight;
    animation-duration: 1s;
}

.languageselect {
    width: 100%;
    /*  height: 100%; */
    /* background: #FA8228; */
    /*background: linear-gradient(to bottom, #f99827 , #fce67e);*/
    background: #fff;
    position: absolute;
    padding: 100px 0 0 0;
    box-sizing: border-box;
    z-index: 2;
    top: -2px;
    bottom: 0;
    overflow: auto;
}


.languageselect .langoption {
    width: 170px;
    margin: 0 auto;
    text-align: left;
    font-size: 1.4em;
    padding: 0 0 5px 0;
    font-weight:100;
    cursor: pointer;
}
.languageselect .langoption.default {
    background-color: grey;
}
.languageselect .langoption:last-child {
    margin-bottom: 100px;
}

.languageselect .welcome {
    width: 100%;
    text-align: center;
    /* margin: 30px 0 0 0; */
    font-size: 1.4em;
    font-weight: 100;
    margin: 0 0 10px 0;
    text-decoration: underline;
}

.languageselect select {
    width: 80%;
    margin: 1px 10% 0 10%;
    font-size: 1.5em;
}

.mobilesearch {
    background: #f2f1ef;
    height:100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    left: 0;
    z-index:2;
    display: none;
}

.mobilesearch .searchInput {
    width: 100%;
    height: 100px;
}
.mobilesearch .searchInput input {
    width: 90%;
    margin: 32px 5% 0 5%;
    font-size: 1.5em;
    box-sizing: border-box;
}

.mobilesearch .results {
    padding: 0 5px 0 5px;
    text-align: center;
}

.NoResults {
    font-size: 1.5em;
}

.instance_info {
    width: 100%;
    padding: 20px 20px;
    box-sizing: border-box;
}

.instance_info img {
    max-width: 100%;
}

.loadingspinner {
    /* background-image: url("/images/rolling.gif"); */
    position: fixed;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 40%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    display: none;
    z-index: 2;
}
.loadingspinner.active {
    display: block;
}

.yourposition_container {
    width:60px;
}

.yourposition_container > div {
    position: absolute;
    top: 4px;
}

.gm-style-iw {
    left:5px !important;
    top: 5px !important;
}

.gm-style .gm-style-iw {
    overflow: initial;
}

.instancelist_tab_ossinfo {
    padding: 20px;
}
.instancelist_tab_ossinfo_header {
    font-weight: bold;
    padding: 20px 0 0 20px;
}

.backarrow {
    height: 20px;
    position: relative;
    bottom: -3px;
    display: inline-block;
    margin: 0 5px 0 0;
}

/* UGLY TEST */
.titlebar {
    /* background-image: url("../images/forest.png"); */
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    color: #fff;
    font-family: 'Raleway', sans-serif;

}
.titlebar .tabs .tab {
    color: #000;
}
.backBtn {
    opacity: 0.7;
}

/* END UGLY TEST */

.leaflet-container {
    width: 100%;
    height: 100%;
}