@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
div {
    display:normal;
}
.data-handler-container {
    font-family: 'Noto Sans' !important;
    margin: 0px !important;
    padding: 0 !important;
    min-width: 100vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    transform-origin: top left;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: #0D4538 !important;
    background-color: #C3E6A7!important;
}

.data-handler-container .main {
    max-height:90vh;
}
.data-handler-container .bottom-holder {
    max-height: 70px;
    height: 70px;
    position: absolute;
    bottom: 80px;
    width: 100%;
   padding-left:10px;
}
.data-handler-container a, .data-handler-container a:hover, .data-handler-container a:active {
    color: #0D4538 !important;
    font-size: 3vw;        
    /*text-transform:capitalize!important;*/
    font-weight:bold;
}
.data-handler-container .header-01 {
    width: 75% !important;
    margin-top: 3vw !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /*text-transform: capitalize;*/
    font-size: 5vw !important;
    font-weight: normal !important;
    font-weight:bold!important;
}
.data-handler-container .gridHolder{
    display:grid;
     grid-template-columns: 1fr 1fr!important;
    gap: 2em;
    width: 100vw;    
    align-items: start;
     place-items: center;
    text-align: left;
    place-items: left;     
}

.data-handler-container .gridHolder .grdContainerItem {    
    display: flex; /* gjør det mulig å styre vertikal plassering */
    align-items: flex-start;
    text-align:left;
    /*text-transform:lowercase;
    text-transform:capitalize;*/
    font-weight:bold;    
    justify-self: center;
     text-align: left;
    
}

.data-handler-container .bottom {
    width: 100%;
    max-height: 100vh;
    height: 100vh;
}
.data-handler-container .bottom table {
    width: 100%;
    border-collapse: collapse;
    height: 90px;
}
.data-handler-container .bottom table tr td:nth-child(1){
    text-align:center;           
    position: relative;
}
.data-handler-container .bottom table tr td  a{
    padding-left:5px;
}
.data-handler-container .bottom table tr .logo {
    width: 70px;
    height: 70px;
    background-image: url('/WidgetImages/777/logo/logo.png?p=2');
    background-repeat: no-repeat;    
    background-size: contain;
    background-position: right top; 
    text-align: left;    
}


.data-handler-container .tilbake {
    padding: 0;
    font-size: 2em;
    cursor: pointer;
    padding-left: 5px;
}
.data-handler-container .bottom table tr .infoText {
    font-size: 1.5vh !important;
    vertical-align: top;
    padding-top:5px;
    height:100%;
}
@media screen and (min-width: 3840px) and (orientation: landscape ) {

}
@media screen and (min-width: 300px) and (max-width: 750px) and (orientation: landscape ) {

    
}
@media screen and (max-height: 380px) {

    .data-handler-container {
        max-height: 380px;        
        overflow-y: auto;
    }

}
@media screen and (min-height: 300px) and (max-width:1050px) and (orientation: landscape ) {

    .data-handler-container .gridHolder {
        max-height: 55vh !important;
        overflow-y: auto !important;
    }
}
@media screen and (min-height: 300px) and (max-width:1440px) and (orientation: landscape ) {

    .data-handler-container .gridHolder {
        max-height: 45vh !important;
        overflow-y: auto !important;
    }
    .data-handler-container a, .data-handler-container a:hover, .data-handler-container a:active {
        color: #0D4538 !important;
        font-size:2vw!important;
        text-transform: capitalize !important;
        font-weight: bold;
    }
}
@media screen and (min-width: 300px) and (min-height:600px) and (orientation: portrait ) {
    
    .data-handler-container .gridHolder {
        max-height: 80vh !important;        
        overflow-y: auto !important;        
    }

   
}
@media (min-width: 1280px) and (max-width: 8024px) {
    .data-handler-container .bottom-holder {
        bottom: 10px;
    }

    .data-handler-container .bottom .home-image {
        width: 70px;
        height: 70px;
    }

    .data-handler-container .bottom table tr td:nth-child(2) {
        width: 90px;
        height: 90px;
    }
    .data-handler-container .bottom table tr .infoText {
        font-size: 2vh!important;        
    }
}
@media (min-width: 1080px) and (max-width: 1920px) and (orientation:portrait) {
    .data-handler-container .header-01 {
        margin-top: 4vh;
        margin-bottom: 6vh;
    }

    .data-handler-container .bottom-holder {
        bottom: 10px;
                max-height: 5vh;
        height: 5vh;
    }

    .data-handler-container .bottom .home-image {
        width: 70px;
        height: 70px;
    }

    .data-handler-container .bottom table tr td:nth-child(2) {
        width: 90px;
        height: 90px;
    }

    .data-handler-container .grdContainer .grdContainerItem .sub-grid .sub-grid-item h1 {
        font-size: 2.5vw !important;
    }

    .data-handler-container .grdContainer .grdContainerItem .price-item {
        font-size: 2.5vw !important;
    }
}