@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap');

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

html, body {
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
    background-color:rgb(249, 249, 249);
    letter-spacing: 0.3px;
    color:rgb(17, 17, 17);
}
body.noScroll {
    overflow: hidden;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
  }
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
  }

h1 {
    font-size:36px; 
    color:#525252; 
    font-family: 'DM Serif Display', serif;
    font-weight: normal;
    margin:0 0 20px 0;
    padding:0;
}

#topMenu {   
    width:100%;
    height:50px;
    white-space: nowrap;
    position: relative;
}
    #logoWrapper {
        display:inline-block;
        margin:0px auto 60px auto ;
        font-family: 'DM Serif Display', serif; 
        color:#525252;
        padding:0;
        cursor:pointer;
        text-align: center;
    }
    .logoTagline {
        text-align: center;
        font-size:22px;
    }
    .logo.page {
        margin:20px 0 0 0;
        height:80px;
    }



    

.darkTextColor {
    color:#525252;
}

.spinner {
    height:36px;
    vertical-align: middle;
}
    .spinnerText {
        margin-right:10px;
        vertical-align: middle;
        color: #7e7e7e;
    }



table {
    border-collapse: collapse;
    border:0;
}

div, img, table, td, *:focus {
    /*
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    */
    outline:none !important;        
    -webkit-tap-highlight-color: transparent;
  }


select {
    font-family: 'Open Sans', sans-serif;
    font-size:14px;   
    border-bottom: 2px solid #cacaca;
    padding: 3px 10px;
}
    select:focus {
        border-bottom: 2px solid #3293e2;
    }

    select.big  {
        padding: 5px 10px;
        text-transform: uppercase;
   
    }
 
    select.big > option {
        color:black;
    }

.left {    text-align:left;   }
.center {    text-align:center;   }
.right {    text-align:right;   }

.gray {    color:rgb(74, 74, 74)   }




.textarea,
textarea {
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
    padding:5px;
    letter-spacing: 0.5px;
    resize: none;
    width:100%;
    max-width:500px;
    height:50px;    
    border-bottom: 2px solid #cacaca;
    border: 1px solid rgb(211, 211, 211);    
}
    .textarea:focus,
    textarea:focus {
        border-bottom: 2px solid #3293e2;
    } 

.buttonWrapper > button {
    margin:5px;
}

button,input[type="button"],input[type="submit"] {
    display:inline-block;
    background-image: linear-gradient(rgb(255, 255, 255), rgb(243, 243, 243));
    border:1px solid rgb(202, 202, 202);
    padding: 8px 12px;
    color:rgb(102, 102, 102);
    border-radius: 3px;
    cursor:pointer;
    font-size:12px;    
    min-width:100px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin:0 5px 5px 0;
}
    button.small,input[type="button"].small,input[type="submit"].small {
        padding: 6px 10px;
        font-size:11px;   
    }
    button.micro,input[type="button"].micro ,input[type="submit"].micro {
        padding: 5px 8px;
        font-size:10px;   
        min-width: auto;
    }
  


    button:hover,input[type="button"]:hover,input[type="submit"]:hover {
        background-image: linear-gradient(rgb(255, 255, 255), rgb(247, 247, 247));    
    }

    button:active,input[type="button"]:active,input[type="submit"]:active {
        background-image: linear-gradient(rgb(243, 243, 243), rgb(255, 255, 255));    

    }
    button.major,input[type="button"].major,input[type="submit"].major {
        border:1px solid #0262b1;
        background-image: linear-gradient(#0166b9, #005da8);
        color:white;
    }       
        button.major:active,
        input[type="button"].major:active,
        input[type="submit"].major:active,
        button.selected,
        input[type="button"].selected 
        input[type="submit"].selected 
        {
            background-image: linear-gradient( #005da8, #0166b9);          
            color:white;
            border:1px solid #3293e2;
        }       



a, .link {
    color:rgb(32, 32, 32);
    text-decoration: none;
    -webkit-transition: color 0.25s;
    -moz-transition: color 0.25s;
    -o-transition: color 0.25s;
    transition: color 0.25s;
}
    a:hover, .link:hover {
        color:rgb(0, 0, 0);
        text-decoration: none;
    }
    a:active, .link:active {
        color:rgb(32, 32, 32);
    }


    a.light, .link.light {
        color:rgb(223, 223, 223);
        text-decoration: none;
        -webkit-transition: color 0.25s;
        -moz-transition: color 0.25s;
        -o-transition: color 0.25s;
        transition: color 0.25s;
        cursor:pointer;
    }
        a.light:hover, .link.light:hover {
            color:rgb(255, 255, 255);
            text-decoration: none;
        }
        a.light:active, .link.light:active {
            color:rgb(223, 223, 223);
        }
    

.link {
    cursor:pointer;
    display: inline-block;
}


    .link.small {
        font-size: 12px;
    }
    #topMenu .link,
    #topRightMenu .link {
        margin-left:20px;
    }

.linkSimple {
    cursor:pointer;
}
    .linkSimple:hover {
        text-decoration: underline;
    }



ul {
    margin:0;
    padding-left:20px;
}




.inlineBlock {
    display:inline-block;
    vertical-align: top;
}
    .marginRight {
        margin-right:10px;
    }
    .marginRightWide {
        margin-right:80px;
    }

.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}

.hide {
    display:none;
}
.center {
    text-align: center;
}
.nowrap {
    white-space: nowrap;
}



.tableEconomic > tbody > tr > td {
    padding:3px;
}
    .tableEconomic > tbody > tr > td:nth-child(2) {
        text-align: right;
        padding-left:20px;
    }


.tableStd {
    width:100%;
}
    .tableStd > thead > tr > td
    {
        padding: 0 8px 8px 0;
        vertical-align: bottom;
    }
  
    .tableStd > tbody > tr > td 
    {
        padding: 8px 8px 8px 0;
        vertical-align: top;
    }
    .tableStd > thead > tr > td {
        font-weight: bold;    
    }


        .tableStd.markOddRows > tbody > tr:nth-child(odd)
        {
            background-color: rgba(209, 209, 209, 0.281);
        }
        .tableStd.markOddRows > thead > tr > td,
        .tableStd.markOddRows > tbody > tr > td
        {
            padding: 8px 40px 8px 8px;
        }
        .tableStd.nowrap > thead > tr > td,
        .tableStd.nowrap > tbody > tr > td
        {
            white-space: nowrap;
        }
    
        
        .tableStd > tbody > tr.removed
        {
            opacity: 0.5;
        }
    
    .tableStd.withHover > tbody > tr:hover
    {
        background-color:#e4eff8;
    }
    .tableStd.widthCursor > tbody > tr
    {
        cursor: pointer;
    }


.part {
 position: relative;
}
#listItems {    
    padding:10px;
    background-color: #fffceb;
    border:1px solid #f7f3de;
    /* box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4); 
    border-top:none;*/
}

#selectItem {
    margin-top:30px;
}

#order {
    margin-top:20px;
}




.siteNavigationBar {
    max-width:1060px;
    margin: 0 auto 5px auto;
    font-size:14px;
    color:gray;    
    padding:0 10px;
}
    .siteNavigationBar a {
        text-decoration:none;
        color:gray; 
    }
        .siteNavigationBar a:hover {
            text-decoration:underline;
        }
    .siteNavigationBar span.arrow {        
        margin: 0 10px;

    }
    

.siteWrapper {
    position: relative;
    margin: 0 auto 40px auto;
    max-width:930px;
    padding:30px 30px 30px 30px;
    background-color:white;
    border:1px solid rgb(228, 228, 228);
   
}
    .siteWrapper.big {
        max-width:1000px;
    }
    .siteWrapper.ready {
        border: 2px solid rgb(69, 161, 69);    
    }
    .siteWrapper.notReady {
        border: 2px solid rgb(241, 137, 0);    
    }

    .group {
        margin-bottom:20px;
        position: relative;
    }
    .groupDoub {
        margin-bottom:40px;        
    }
    .groupUp {
        margin-top:20px;
    }
    .groupHalf {
        margin-bottom:10px;
    }
    .groupUpHalf {
        margin-top:10px;
    }

    .groupAbove {
        margin:0;
        padding:0;
        margin-top:20px;
    }
    .group.wide {
        margin-bottom:30px;
    }

    .desc {
        font-size:11px;
        color:rgb(146, 146, 146);
        margin-bottom: 1px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    
    .text {
        font-size:14px;
    }
        .text.micro {
            font-size:10px;
        }
        .text.small {
            font-size:12px;
        }
        .text.medium {
            font-size:14px;
        }
        .text.big {
            font-size:20px;
        }
        .text.header {
            font-size:20px;
            margin-bottom:15px;
        }
        .text.headerBig {
            font-size:28px;
            font-weight: bold;
            letter-spacing: 1px;
        }
        .textError {
            font-size:12px;
            letter-spacing:0;
            color:#b91414;
        }
        .text.information {
            font-size: 16px;
            line-height: 180%;
            max-width: 960px;
            margin: 0 auto;
        }
            #itemSiteContent > div.group,
            .itemStartBtnWrapper 
            {
                max-width: 960px;
                margin: 0 auto;
            }
        
            
            .text.information .header {
                font-size:16px;
                font-weight: bold;
                margin-bottom:5px;                
                letter-spacing: 0.5px;
            }
            .itemSiteContent .group:first-child {
                max-width:600px;
                width:100vw;
            }


        




        .stdBtn {
            display: inline-block;
            vertical-align: top;
            text-align: center;
            margin:5px 10px 5px 0;
            background-image: linear-gradient(rgb(255, 255, 255), rgb(243, 243, 243));
            border:1px solid rgb(202, 202, 202);
            padding: 8px 18px;
            color:rgb(102, 102, 102);
            border-radius: 2px;
            font-size:14px;    
            min-width:100px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            cursor: pointer;


            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Safari */
             -khtml-user-select: none; /* Konqueror HTML */
               -moz-user-select: none; /* Firefox */
                -ms-user-select: none; /* Internet Explorer/Edge */
                    user-select: none; /* Non-prefixed version, currently
                                          supported by Chrome and Opera */
        }
            .stdBtn:active {
                background-image: linear-gradient(rgb(243, 243, 243), rgb(255, 255, 255));
            }
        .stdBtn.selected {
            border:1px solid #0262b1;
            background-image: linear-gradient(#0166b9, #005da8);
            color:white;
        }
            .stdBtn.selected:hover {
                background-image: linear-gradient(#0069be, #0262b1);
            }
            .stdBtn.selected:active {
                background-image: linear-gradient(#005da8, #0166b9);
            }

            

    .smallLinks > div {
        display:inline-block;
        vertical-align: top;
        font-size: 11px;
        color:gray;        
    }



.itemStartBtnWrapper {
    margin:20px auto;
}



.itemFormSeparator {
    border-bottom:1px solid rgb(228, 228, 228);
    margin:10px 0 20px 0;
}





#topRightMenu {
    margin-right:20px;
    position:absolute;
    right:0px;
    top:0px;
}
    #topRightMenu > div {
        display: inline-block;
        line-height: 50px;
        color:rgb(165, 165, 165);
        font-size: 14px;
        padding: 0 10px;

    }





    /* Inputs */
    input[type="password"],
    input[type="text"]
    {
        padding:5px 10px;
        border: 1px solid rgb(211, 211, 211);
        font-family: 'Open Sans', sans-serif;    
        letter-spacing: 0.5px;
        font-size:14px;
        border-bottom: 2px solid #cacaca;
    }
        input[type="text"] {
            width:250px;
        }
        input[type="text"].mediumShort {
            width:80px;
        }
        input[type="text"].datePicker {
            width:80px;
        }
        input[type="text"].personalNumber {
            width:110px;
        }
        input[type="text"].organisationNumber {
            width:110px;
        }
        input[type="text"].postNumber {
            width:50px;
        }
        input[type="text"].postCity {
            width:170px;
        }
        input[type="text"]:focus {
            border-bottom: 2px solid #3293e2;
        }
        input[type="text"].wrong {
            border-bottom: 2px solid #b91414;
        }    
        input[type="text"].money {
            text-align: right;
            width:80px;
        }
        input[type="text"].percent {
            text-align: right;
            width:30px;
        }
        input[type="text"].share {
            text-align: center;
            width:20px;
        }


        /* Labels and radio/checkboxes */                
        label {
            display: flex;
            margin-top:10px;
        }
        input[type=radio] {
        /* one way to help with spacing */
        margin-right: 12px;

        transform: scale(1,1); 
        -moz-transform: scale(1,1); 
        -ms-transform: scale(1,1); 
        -webkit-transform: scale(1,1); 
        -o-transform: scale(1,1); 
          
        }
        /* Indicate wrong answer in radio group*/
        label.notAnsweredRadioGroup {
            color:red;
        }
        /* Information belonging to label placed under the label*/
        .divUnderLabel {
            margin-left:30px;
            margin-top:5px;
        }





        /* Grid */
        .stdGrid {
            width:100%;        
            display: grid;
            box-sizing: border-box;
            grid-gap:1px;  
        }
            .stdGrid input[type="text"]:not(.money) {
                width:100%;
            }
            .stdGrid.fourColumn {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
            .stdGrid.threeColumn {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            }
            .stdGrid.twoColumn {
                grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            }
                .stdGridBox {     
                    padding:10px 40px 10px 0;
                    word-break: break-word;
                }
        
        
        





/* Tooltip */
#tooltip {
    position:absolute;
    padding:15px;
    background-color:rgb(255, 240, 190);
    z-index:99999;
    border-bottom: 0 none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.46);
    font-size:14px;
    line-height: 20px;
    max-width:350px;    
}

    #tooltip ul {margin-top:10px;}
    #tooltip li {padding:0 0 5px 0;min-height:0}


    /* Modal */        
    #modalBackground {
        position:fixed;
        display:flex;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.5);
        z-index:9999;
        overflow-y: auto;
    }    
        #modalOuterWrapper {
            margin: auto;
        }
        #modalWrapper {
            margin:0 20px 20vh 20px;
            max-width:600px;
            background-color:white;
            border-radius:3px;
            box-shadow: 1px 1px 15px 0px rgba(37, 37, 37, 0.404);
        }
            #modalContent {
                padding:20px;         
            }
            #modalText {
                padding:10px;
                max-height:60vh;
                overflow: auto;
            }
            .modalMessage {
                color:red;
            }
            .modalBottonBtn {
                margin-top:20px;
                text-align: right;
                white-space: nowrap;
            }
                .modalBottonBtn > input[type="button"]:not(:first-child) {
                    margin:0;
                    margin-left:10px;
                    margin-top:5px;
                }
    




    

/* Custom tables */
.tableStd.basket > thead > tr > td:nth-child(1),
.tableStd.basket > tbody > tr > td:nth-child(1)
{
    width:70px;    
    padding-left:10px;
    padding-right:40px;
    font-size:11px;
    vertical-align: middle;
}
.tableStd.basket > thead > tr > td:nth-child(2),
.tableStd.basket > tbody > tr > td:nth-child(2)
{
    /* width:250px; */
}
.tableStd.basket > thead > tr > td:last-child,
.tableStd.basket > tbody > tr > td:last-child
{
    text-align: right;
    width:30px;
}
.tableStd.basket > thead > tr > td:nth-child(3),
.tableStd.basket > tbody > tr > td:nth-child(3) 
{
    text-align:right;
    width:50px;
    white-space: nowrap;
}
    .tableStd.basket > thead > tr > td:nth-child(3)
    {
        padding-right:25px
    }



    /* Referensnummer */
.tableStd.basket .reference
{
    white-space: nowrap;
    padding-left:100px;
    width:100px;
    text-align: center;
    font-size:12px;
    font-weight: normal;
    color:gray
}    




    .tableStd.basket > tbody > tr:not(:last-child) > td {
        border-bottom:1px solid #e2dec7;
    }
    .tableStd.basket.order > tbody > tr:not(:last-child) > td {
        border-bottom:1px solid rgb(228, 228, 228);
    }




    .benefitList {
        max-width: 400px;
    }
        .benefitList > div {
            padding:5px;
        }
        .benefitList > div:nth-child(odd) {
            background-color: #f1f4f7
        }
            .benefitList .checkmark { 
                background-image: none;
                content: "✓";
                font-size:18px;
                font-weight: bold;
                color:green;
                margin: -2px 7px 0 3px;

            }








.indicator {
    display: inline-block;
    vertical-align: middle;
    margin: -2px 5px 0 0;
    width:14px;
    height:14px;
    border-radius: 50%;
}




/* General */
.backgroundColor.orange {
    background-color:rgb(255, 153, 0);
}
.backgroundColor.red {
    background-color:rgb(175, 39, 39);
}
.backgroundColor.green {
    background-color:rgb(19, 146, 57);
}
.backgroundColor.gray {
    background-color:rgb(148, 148, 148);
}


.gray {
    color:rgb(148, 148, 148);
}




.tableStd.assignmentList {
    width:100%;
}
    .tableStd.assignmentList > thead > tr > td,
    .tableStd.assignmentList > tbody > tr > td {
        font-size:12px;
        padding:10px 20px;
    }
        .tableStd.assignmentList > thead > tr > td:first-child,
        .tableStd.assignmentList > tbody > tr > td:first-child {        
            padding-left:5px;
        }

    .tableStd.assignmentList > thead > tr > td {
        font-size:14px;
    }
    .tableStd.assignmentList.withHover > tbody > tr:hover {
        background-color: rgb(243, 242, 242);
        /*cursor:pointer; */
    }
    .tableStd.assignmentList > tbody > tr.selected {
        background-color:#0262b13b;
    }
    .tableStd.assignmentList > tbody > tr:not(:last-child) > td {
        border-bottom: 1px solid rgb(228, 228, 228);

    }    

    
    .tableStd.orderHistory td {
        cursor: auto;
        padding:8px 8px;
        font-size:12px;
    }



.linkIcon {
    height:25px;
    vertical-align: middle;
    margin-right:5px;
}






.warningBox {
    white-space: normal;
    position: relative;
    background-color: #ffe0d6;
    width: calc(100% - 42px);
    color: #da4600;
    padding: 10px 22px;
    font-size: 14px;
    text-align: left;
}
    .warningBox .closeBtn,
    .approvedBox .closeBtn 
    {
        width: 10px;
        position: absolute;
        right: 15px;
        top: 15px;
        cursor: pointer;
    }
.approvedBox {
    position: relative;
    background-color: #e2f5e9;
    width: calc(100% - 42px);
    color: #779c8e;
    padding: 10px 22px;
    font-size: 14px;
    text-align: left;
}




.lexlineDirektLogo {
    font-family: 'DM Serif Display', serif;
    font-size:26px;
    background-color: #319b76;
    color: white;
    font-weight: normal;
    display:inline-block;
    padding: 10px 20px;
    border-radius: 20px;
}
    .lexlineDirektLogo.small {            
        font-size: 11px;
        padding: 1px 5px;
        border-radius: 5px;
    }

    .lexlineDirektBox {        
        border:2px solid #319b76;
    }

    .lexlineDirekt tr.finished {
        background-color:#dfefdf !important;
    }
    .lexlineDirekt tr.progress {
        background-color:#ffe7be !important;
    }

   

.hideInMobile {display:block}
.showInMobile {display:none}
    @media only screen and (max-width: 520px) {    
        .hideInMobile {display:none}
        .showInMobile {display:block}
    }


        

@media only screen and (max-width: 850px) {

    .logo.page {
        height:50px;
    }
    h1 {
        font-size: 24px;
    }
    .logoTagline {
        padding:0 0 0 45px;
        font-size:18px;
    }
}