﻿body, html {
    height: 100%;
    margin: 0px;
    /*margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;*/
}

.sidebar, .main {
    -webkit-transition: margin 200ms ease-out;
    -moz-transition: margin 200ms ease-out;
    -o-transition: margin 200ms ease-out;
    transition: margin 200ms ease-out;
}

body {
    /*  background-color: #F8FBFC;  */
    background-color: #FFFFFF;
}

.main {
    width: 100%;
}

/* -------------- Generell styling--------------------- */
.paddingTop {
    padding-top: 20px;
}

.title {
    color: grey;
    font-size: 18px;
}

.maxWidth {
    max-width: 400px;
}

.maxWidthCard {
    max-width: 350px;
}

.profilBilde img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    z-index: 1;
}

.topPadding {
    padding-top: 60px;
}

.topMargin {
    margin-top: 160px;
}

.topMargin2 {
    margin-top: 80px;
}

.topMarginSM {
    margin-top: 40px;
}

.profile {
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
    max-width: 400px;
    margin: auto;
    text-align: center;
}

.webAppImage {
    border-radius: 6px;
    max-width: 100%;
    height: auto;
}

.cardBorder {
    box-shadow: 0px 2px 4px rgba(0,0,0,0.18);
}

.bordercolourTop {
    border-top: solid;
    border-top-width: 15px;
    /*  border-top-color: #2962ff;
     border-top-color: #6ab7ff; */
    border-top-color: #4A90E2;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.nav-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
.greenContent {
    color: green;
}
.redContent {
    color: red;
}
/* -------------- Farger --------------------- */
.generalColour {
    background-color: #1A94D1;
    /*background-color: #2196f3;*/
    /*background-color: #2492EB;
    background-color: #8F62DD;*/
}
.nnlMainColour {
    background-color: rgb(0,64,112);
}

.nnlTextColour {
    color: rgb(0,64,112);
    font-weight: 600;
}

.textHover:hover {
    border: 1px solid #095484;
    color: #095484;
}

.boxHover:hover {
    border: 1px solid transparent;
    box-shadow: 0 0 8px 0 #095484;
    color: #095484;
}

.orangeBg {
    background-color: #F6927A;
}

.text-orange {
    color: #F6927A;
}

.greenLightBg {
    background-color: #E4E7B2;
}

.text-greenLight {
    color: #E4E7B2;
}

.greenBg {
    background-color: #C6C774;
}

.text-green {
    color: #C6C774;
}
.friskGronnBg {
    background-color: #E4E7B2;
}
.fagbehagBlaaBg {
    background-color: #7E80BE;
}
.himmelblaaBg {
    background-color: #99ABD8;
}
.deepBlue {
    background: rgb(2, 128, 231);
}

.blueFirst {
    background-color: #1e88e5;
}

.blueSecond {
    background-color: #6ab7ff;
}
.secondBlue {
    background-color: #498CBF;
}
.blueThird {
    background-color: #005cb2;
}

.styreIkon {
    color: #FF3B30;
}

.white {
    background-color: #fff;
}

.whiteLink {
    color: #fff;
}

.purpleBackground {
    background-color: #9368E9;
}

.greyBlue {
    background-color: #F8FBFC;
}

.lightGreenBG {
    background-color: #CCFFD2;
}
.lightRedBG {
    background-color: #FFCCCC;
}
.font14 {
    font-size: 14px;
}
/*----------------------BUTTONS, navs and links ---------------------*/
.aktiv {
    color: #005bb2 !important;
}
/*.nav-link {
    color: #fff;
}*/
.linkstyle {
    color: #fff;
}
/*.linkstyle:hover {
        color: blue !important;
    }*/

.testLink {
    display: none;
}

.blueLink {
    text-decoration: none;
    font-size: 22px;
    color: #6ab7ff;
}

.button {
    /*background-color: #1A94D1;*/ /* general blue */
    background-color: #03a9f4;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(48,167,241,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    cursor: pointer;
}

.newButton {
    font-size: 12px;
    font-weight: bold;
    color: #4A90E2;
    line-height: 1.5;
    padding: .5em 2em;
    border: solid;
    border-width: 2px 2px 2px 2px;
    background: #FFFFFF;
    /* background: #2962ff;*/
    border-radius: 20px;
    cursor: pointer;
}

    .newButton:hover {
        box-shadow: 0 12px 16px 0 rgba(48,167,241,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
        text-decoration: none;
        color: #FFFFFF;
        background: #2979ff;
        border: none;
    }

.nnlButton {
    background-color: rgb(0,64,112);
    border: none;
    color: white;
    padding: 10px 21px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

    .nnlButton:hover {
        /*box-shadow: 0 12px 16px 0 rgba(48,167,241,0.24),0 17px 50px 0 rgba(0,0,0,0.19);*/
        background-color: #233F7B;
        color: beige;
        text-decoration: none;
    }
.nnlButton2 {
    background-color: rgb(0,64,112);
    border: none;
    color: white;
    padding: 12px 21px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    -webkit-transition-duration: 0.4s; /* Safari */
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

    .nnlButton2:hover {
        box-shadow: 0 12px 16px 0 rgba(48,167,241,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
        background-color: #233F7B;
        color: beige;
        text-decoration: none;
    }
.nnlButton3 {
    background-color: #283179;
    border: none;
    color: white;
    padding: 12px 21px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-weight:700;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    -webkit-transition-duration: 0.4s; /* Safari */
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

    .nnlButton3:hover {
        box-shadow: 0 12px 16px 0 rgba(48,167,241,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
        background-color: #233F7B;
        color: beige;
        text-decoration: none;
    }

.loginButton {
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1.5;
    padding: .5em 2em;
    border: none;
    /*background: #4A90E2;
     background: #2962ff;*/
    background: #498CBF;
    border-radius: 20px;
    cursor: pointer;
}

    .loginButton:hover {
        box-shadow: 0 12px 16px 0 rgba(48,167,241,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
        text-decoration: none;
        background: #4A90E2;
    }


.elegantButton {
    font-size: 16px;
    color: #FFFFFF;
    line-height: 1.5;
    padding: .5em 2em;
    background-image: linear-gradient(-180deg, #1D8AFF 0%, #0C5AAE 100%);
    border: 1px solid #3F84E1;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20), inset 0 3px 2px 0 rgba(255,255,255,0.16);
    border-radius: 5px;
}

    .elegantButton:hover {
        box-shadow: 0 12px 16px 0 rgba(48,167,241,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
        text-decoration: none;
        color: white;
        background: #1D8AFF;
    }

.nnlButton4 {
    background-color: rgb(40,49,121);
    border: none;
    color: white;
    padding: 12px 21px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    -webkit-transition-duration: 0.4s; /* Safari */
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

    .nnlButton4:hover {
        box-shadow: 0 12px 16px 0 rgba(48,167,241,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
        background-color: #233F7B;
        color: beige;
        text-decoration: none;
    }
.buttonFinal {
    background-color: rgb(40,49,121);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    font-family: Raleway;
    cursor: pointer;
}

    .buttonFinal:hover {
        opacity: 0.9;
    }

.box {
    max-width: 650px;
    max-height: 830px;
    overflow: hidden;
    margin: 10px auto 0;
    font-family: 'Open Sans', sans-serif;
}

.timeline ul {
    padding: 1em 0 0 2em;
    margin: 0;
    list-style: none;
    position: relative;
}


.timeline li div {
    display: inline-block;
    /*margin: 1em 0;*/
    margin: 0.50em 0;
    vertical-align: top;
}

.bullet {
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    border-radius: 50%;
    background: white;
    z-index: 1;
    margin-right: 1em;
    border: 2px solid deepskyblue;
    /*color: royalblue*/
}

.time {
    width: 20%;
    font-size: 0.75em;
    padding-top: 0.10em;
}

.desc {
    width: 70%;
}

.timeline h3 {
    font-size: 0.9em;
    font-weight: 400;
    margin: 0;
}

.timeline h4 {
    margin: 0;
    font-size: 0.7em;
    font-weight: 400;
    color: #808080;
}
/* -----------------------------------TestLayout -----------------------------*/

/*.questionBox {
    width: 100px;
    padding: 1px;
    margin: 1px;
}

.anotherQuestionBox {
    width: 340px;   
    padding: 1px;
    margin: 1px;
}

.smallBox {
    margin: 0px 5px 0px 3px;
    padding-left: 2px;
    padding-top: 0px;
    display: inline-block;
}*/
.margin12 {
    margin-left: 12px;
}
.margin13 {
    margin-left: 13px;
}

.margin14 {
    margin-left: 14px;
}

.margin15 {
    margin-left: 15px;
}


/*--------------------------------Javascripthandlers for kalender ---------------*/
.filterDiv {
    display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

.lsiQuestionBox {
    width: 310px;
}
    .lsiQuestionBox .custom-radio {
        display: block;
    }
.logoRight {
    display: none;
}
.logoRight2 {
    display: none;
}
/* -------------- Media queries --------------------- */

@media (max-width: 575px) {
    .hideMenuOnXS {
        width: auto;
        display: none;
    }
   
    
}

@media (min-width: 770px) {
    .lsiQuestionBox {
        width: 640px;
    }

        .lsiQuestionBox .custom-radio {
            display: inline-block;
        }
    .logoRight {
        display: inline-block;
    }
    
}

@media (min-width: 763px) {
     .mobileQuestion {
        display: none;
    }
    
}

@media (max-width: 764px) {
    .sidebar {
        float: none;
        width: auto;
        display: none;
    }

    .hideMenuOnSM {
        width: auto;
        display: none;
    }

    .maxWidthCard {
        max-width: none;
    }
    .webQuestion {
        display:none;
    }    
    
}

@media (max-width: 990px) {
    .hideItemOnMD {
        width: auto;
        display: none;
    }
}

@media (min-width: 765px) {

    .sidebar {
        width: 310px;
        height: 100%;
        float: left;
        margin-bottom: 0px;
        position: fixed;
        /*background: rgb(2, 128, 231); */
        background: rgb(0,64,112);
    }

    .maxLG {
        max-width: 992px;
    }

    .main {
        position: absolute;
        float: right;
        width: calc(100% - 310px);
        margin-left: 310px;
    }

    .logo {
        display: none;
    }

    .hidden {
        display: none;
    }
    
}
.questionOptionLeft {
    padding-top: 5px;
    margin-left: 1px;
    padding-left: 1px;
    /*float: right;*/
    text-align: right;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.questionOptionRight {
    padding-top: 1px;
}



@media (max-width: 821px) {
    .questionBox {
        display: none;
    }
    
   
    .anotherQuestionBox {
        width: 420px;
        padding: 1px;
        margin: 1px;
    }

        .anotherQuestionBox .custom-radio {
            display: block;
        }

        .anotherQuestionBox .smallBox {
            display: none;
        }

    .mobileText1 {
        display: inline-block;
        padding-left:5px;
    }

    .questionLeftSM {
        display: inline;
        margin-left: 15px;
    }

    .questionRightSM {
        display: inline;
        margin-left: 15px;
    }
}

@media (min-width: 822px) {
    .questionBox {
        width: 170px;
        padding: 1px;
        margin: 1px;
    }
    
    .anotherQuestionBox {
        width: 340px;
        padding: 5px;
        margin: 1px;
    }

    .leftMarginSM {
        margin-left: 15px;
    }

    .questionOptionLeft {
        padding-top: 16px;
        margin-right: 15px;
        /*float: right;*/
        text-align: right;
    }

    .questionOptionRight {
        padding-top: 16px;
    }

    .smallBox {
        margin: 0px 15px 0px 15px;
        padding-left: 2px;
        padding-top: 0px;
        display: inline-block;
    }

    .mobileText1 {
        display: none;
    }

    .questionLeftSM {
        display: none;
    }

    .questionRightSM {
        display: none;
    }
}

@media (min-width: 1200px) {
    .questionBox {
        width: 270px;
        padding: 15px;
        margin: 1px;
    }
    
    .anotherQuestionBox {
        width: 360px;
        padding: 15px;
        margin: 1px;
    }

    .smallBox {
        margin: 0px 15px 0px 15px;
        padding-left: 2px;
        padding-top: 0px;
        display: inline-block;
    }

    .questionOptionLeft {
        padding-top: 16px;
        margin-right: 15px;
        /*float: right;*/
        text-align:right;
    }

    .questionOptionRight {
        padding-top: 16px;
    }
}


