LUI.css

* {
    font-family: Ubuntu;
    box-sizing: border-box;
}

/***** GENERAL LAYOUT ITEMS **********/

[class*="lui-col-"]{
    float: left;
    padding:15px;
}

.lui-col-1 {width: 8.33%;}
.lui-col-2 {width: 16.66%;}
.lui-col-3 {width: 25%;}
.lui-col-4 {width: 33.33%;}
.lui-col-5 {width: 41.66%;}
.lui-col-6 {width: 50%;}
.lui-col-7 {width: 58.33%;}
.lui-col-8 {width: 66.66%;}
.lui-col-9 {width: 75%;}
.lui-col-10 {width: 83.33%;}
.lui-col-11 {width: 91.66%;}
.lui-col-12 {width: 100%;}

.lui-row::after {
    content: "";
    clear: both;
    display: table;
  }

.lui-hidden{
    display: none;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="lui-col-"] {
        width: 100%;
    }
}

input {
    background-color: #fafafa9d;
    color: #273445;
    border: 1px solid #333333;
}

input:focus{
    box-shadow: 0 0 6px #0d52bf;
}

/***** MAIN LAYOUT ITEMS **********/

html, body{
    height:100%;
    width: 100%;
    margin: 0;
}

body{
    background-color: #d4d4d4;
}

.lui-history-stack{
    position: relative;
    height:100%;  
}

.lui-content{
    height:calc(100% - 3em); /* The height of the navbar is subtracted*/
}

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

    [class*="lui-sidebar-"]{
        display:none;
    }

}

/********** NAV BAR ***************/

.lui-nav-bar{
    background-image: linear-gradient(#ffc27d, #ffa154);
    height: 3em;
    width:100%;
}


.lui-nav-bar *:last-child{
    margin-right: 0.5em;
}

.lui-nav-bar-mobile-left{
    display:none;
}

.lui-nav-bar-title{
    display: inline-block;
    width:30%;
    vertical-align: middle;
}

.lui-nav-header{
    vertical-align: middle;
    margin-top: 0.7em;
    margin-left: 1em;
    margin-right: 1em;
}

.lui-nav-bar-navigation{
    display: inline-block;
    width: 65%;
}

.lui-nav-bar-menu{
    display: inline-block;
}

.lui-nav-bar-link-area{
    width: 100%;
    height: 100%;
}

.lui-nav-bar-menu a{
    display:inline-block;
    color: #4d4d4d;
    height: 1.5em;
    margin-left: 1em;
    vertical-align: middle;
    user-select: none;
}

.lui-nav-bar-menu a:link{
    text-decoration: none;
}

.lui-nav-bar-menu a:visited{
    text-decoration: none;
}

.lui-nav-bar-menu a:hover{
    text-shadow: 1px 1px 6px #666666;
}

.lui-nav-bar-menu a.active{
    font-size: 1.3em;
    color: #333333;
}

.lui-nav-bar-menu a.inactive{
    font-size: 1.1em;
    color: #666666;
}

@media only screen and (max-width:768px){
    .lui-nav-bar-mobile-left{
        display:inline-block;
        width: 20%;
    }

    .lui-nav-bar-title{
        width:60%;
        text-align: center;
    }

    .lui-nav-bar-navigation{
        width: 20%;
    }

    .lui-nav-bar-menu:before{
        content: "≡";
        color:#333333;
        position: absolute;
        font-size: 2em;
        border: 1px solid gray;
        border-radius: 0.2em 0.2em;
        text-align: center;
        height: 1.3em;
        width: 1.5em;
        user-select: none;
        cursor: pointer;
        top:-1.45em;
        right:0.2em;
    }

    .lui-nav-bar-menu:after{
        content: '';
        background-color: transparent;
        position: absolute;
        right:0;
        top:0em;
        bottom:0;
    }


    .lui-nav-bar-menu a{
        display: none;
        font-size: 1.2em;
        height: 1.5em;
        vertical-align: middle;
    }

    .lui-nav-bar-menu.active:before{
        background-color: #f37329;
        transition: background-color 0.3s;
    }

    .lui-nav-bar-menu{
        position: absolute;
        background-color: #ffa154;
        width: 0%;
        right:-0.5em;
        top:3em;
        bottom:0em;
        z-index: 999;
        transition: width 0.4s;        
    }

    .lui-nav-bar-menu.active{
        width: 50%;
    }

    .lui-nav-bar-menu.active a{
        display: block;
    }

    .lui-nav-bar-menu-shadow{
        position: relative;
        background-color: gray;
        height:calc(100% - 3em);
        width:100%;
        z-index: 997;
    }

}



.lui-nav-burger{
    position: absolute;
    font-size: 2em;
    border: 1px solid gray;
    border-radius: 0.2em 0.2em;
    text-align: center;
    height: 1.3em;
    width: 1.5em;
    user-select: none;
    cursor: pointer;
    top:0.1em;
    right:0em;
}


.lui-nav-back {
    display: inline-block;
    position: absolute;
    z-index: 1;
    padding: 0 10px 0 30px;
    left: 0.5em;
    top: 0.3em;
    
    line-height: 44px;
    
   
    text-decoration: none;
    font-family: sans-serif;
    font-size: 12px;

    user-select: none;
    color: #333333;
}


.lui-nav-back:before {
    content: '';
    
    position: absolute;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    left: 20px;
    right: 0;
    height: 34px;
    margin-top: 5px;
    z-index: -1;
    
    border: 1px solid #808080;
    border-bottom-color: #808080;
    border-top-color: #4d4d4d;
    border-left-width: 0;
    border-radius: 5px;
    
    background: #808080;
    background-image: -webkit-linear-gradient(top, #ffc27d, #ffa154);
    background-image: -moz-linear-gradient(top, #ffc27d, #ffa154);
    background-image: -ms-linear-gradient(top, #ffc27d, #ffa154);
    background-image: -o-linear-gradient(top,#ffc27d, #ffa154);
    background-image: linear-gradient(top, #ffc27d, #ffa154);
    
}

.lui-nav-back:after {
    content: '';
    
    position: absolute;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    left: 11px;
    height: 27px;
    width: 26px;
    top: 8px;
    z-index: -2;
    
    border: 1px solid #FFF;
    border-top: 0 transparent;
    border-right: 0 transparent;
    border-bottom-color: #808080;
    border-left-color: #4d4d4d;
    border-radius: 7px 5px 5px 7px;
    
    background: #808080;
    background-image: -webkit-linear-gradient(135deg, #ffc27d, #ffa154);
    background-image: -moz-linear-gradient(135deg, #ffc27d, #ffa154);
    background-image: -ms-linear-gradient(135deg, #ffc27d, #ffa154);
    background-image: -o-linear-gradient(135deg, #ffc27d, #ffa154);
    background-image: linear-gradient(135deg, #ffc27d, #ffa154);
    
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}


/*.lui-nav-back:hover:before {
    background-image: -webkit-linear-gradient(top, #b3b3b3 -25%, #4d4d4d 75%);
    background-image: -moz-linear-gradient(top, #b3b3b3 -25%, #4d4d4d 75%);
    background-image: -ms-linear-gradient(top, #b3b3b3 -25%, #4d4d4d 75%);
    background-image: -o-linear-gradient(top, #b3b3b3 -25%, #4d4d4d 75%);
    background-image: linear-gradient(top, #b3b3b3 -25%, #4d4d4d 75%);
}
.lui-nav-back:hover:after {
    background-image: -webkit-linear-gradient(135deg,#b3b3b3 -25%, #4D4D4D 75%);
    background-image: -moz-linear-gradient(135deg,#b3b3b3 -25%, #4D4D4D 75%);
    background-image: -ms-linear-gradient(135deg,#b3b3b3 -25%, #4D4D4D 75%);
    background-image: -o-linear-gradient(135deg,#b3b3b3 -25%, #4D4D4D 75%);
    background-image: linear-gradient(135deg,#b3b3b3 -25%, #4D4D4D 75%);
}*/


.lui-nav-back:active:before,
.lui-nav-back:active:after {
    background: #ffa154;
    box-shadow: inset 0px 1px 0px #f37329;
}
.lui-nav-back:active:after {
    box-shadow: inset 1px 1px 0px #f37329;
}

.lui-nav-back.inactive{
    visibility: hidden;
}

/***** CONTENT SHADOWING **********/

.lui-content-shadowed{
    position: absolute;
    background-color: transparent;
    z-index: 900;
    top: 3em;
    left: 0em;
    right: 0em;
    bottom: 0em;
    visibility: hidden;
    transition: background-color 0.3s;
    transition-delay: visibility 0.3s;
}

.lui-content-shadowed.active{
    visibility: visible;
    background-color: rgba(128, 128, 128, 0.548);

}

.lui-focused-shadow{
    position: absolute;
    background-color: rgba(128, 128, 128, 0.548);
    z-index: 4;
    top: 3em;
    left: 0em;
    right: 0em;
    bottom: 0em;
    visibility: hidden;
}

.lui-focused-shadow.active{
    visibility: visible;
    opacity: 1;
    transition: opacity 200ms;
}

.lui-focused-shadow.fade{
    opacity: 0;
}

@media only screen and (max-width:768px){
    .lui-focused-shadow{
        display:none;
    }
}

/***** FORM RELATED ITEMS *********/

.lui-emphasized{
    right: 2em;
    left: 2em;
    position: absolute;
    margin:auto;
    opacity: 1;
    transition: opacity 0.2s;
    background-color: whitesmoke;
    z-index: 3;
}

.lui-emphasized:last-child{
    right:0;
    left:0;
    z-index: 5;
}

.lui-emphasized.fadeout{
    opacity: 0;
    transition: opacity 0.2s;
}



body .lui-emphasized{
    margin-top: 30px;
    border-radius: 0.5em 0.5em;
}

.lui-form {
    border: solid 1px gray;
    border-radius: 0.5em 0.5em;
    overflow: auto;
}

.lui-form .lui-header{
    border: 1px gray solid;
    border-radius: 0.5em;
    padding-top: 0.50em;
    padding-bottom: 0.50em;
    padding:0.5em;
    text-align: center;
    position: absolute;
    top: -2.5em;
    left: 1em;
    background-color: white;
}

.lui-form .lui-row:first-of-type {
    margin-top: 2em;
}

.lui-form .lui-row:last-of-type {
    margin-bottom: 2.5em;
}

.lui-form .lui-apply{
    position: absolute;
    right:6vw;
    margin-top: -0.8em;
}

.lui-entry{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.lui-entry *{
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.lui-button{
    height: 2.3em;
    font-size: medium;
    border-radius: 0.2em;
    border: solid 1px #abacae;
    border-top: #d4d4d4;
    border-left: #d4d4d4;
    background-image: linear-gradient(#fafafa, #d4d4d4);

}

.lui-button.lui-apply{
    background-image: linear-gradient( #3689e6, #0d52bf);
    color: whitesmoke;
    border: solid 1px rgb(71, 122, 146);
    border-top: rgb(88, 157, 189);
    border-left: rgb(88, 157, 189);
}

.lui-button.lui-apply:active{
    background-image: linear-gradient( #0d52bf, #0d52bf);
}

@media only screen and (max-width: 768px){
    .lui-emphasized{
        max-width: 766px;
        position: relative;
        margin:auto;
        opacity: 1;
        transition: opacity 0.2s;
    }
    
    .lui-emphasized:not(:last-child){
        display: none;
    }

    .lui-emphasized.fadeIn{
        opacity: 0;
        transition: opacity 0s;
    }
}

/****** TABLE LAYOUT **********/

.lui-emphasized.lui-table{
    position: relative;
    height:calc(100% - 3em);
    background-color: transparent;
    margin-top: 0;
}

.lui-table-controls{
    border-radius: 0.5em 0.5em 0 0;
    background-image: linear-gradient(#fafafa, #dddddd);
    border-bottom: 1px solid #667885;
}

.lui-table-nav{
    display: flex;
    flex-flow: row;
    height: 3em;
    align-items: center;
    justify-content: space-evenly;
}

.lui-table-nav .lui-table-title{
    height: 100%;
    font-size: 1em;
    vertical-align: middle;
    text-align: center;
    margin:0;
    padding-top: 0.8em;
}

.lui-table-header{
    height: 2em;
    width: calc(100% - 1em);
}

.lui-table-body{
    display:block;
    height: calc(100% - 5em);
    overflow-y: scroll;
    width: 100%;
}

.lui-filter input{
    height: 2.2em;
    float:left;
    padding: 0;
    border-radius: 0 0.3em 0.3em 0;
    padding-left: 0.5em;
}

.lui-filter div{
    float:left;
    background-image: linear-gradient(#ffc27d, #ffa154);
    height: 1.7em;
    width: 1.7em;
    border-radius: 0.3em 0 0 0.3em;
    border: 1px #333333 solid;
    margin-right: -1px;
    cursor: pointer;
}

.lui-filter div:before{
    position: absolute;
    top:0.8em;
    content: '►';
    padding-left:0.4em;
    font-family: Arial, Helvetica, sans-serif;
}

.lui-table-row{
    background-color: #fafafa;
    border-radius: 0.5em;
    border: 1px solid #667885;
    height: 2.5em;
    vertical-align: middle;
    cursor: pointer;
    transition: height 200ms;
}

.lui-table-row div{
    transition: height 200ms;
}

.lui-table-row:hover{
    background-color: #ffc27d;
    transition: 150ms;
}

.lui-table-row:active{
    background-color: #ffa154;
}

.lui-table-row.collapse{
    height: 0px;
    transition: height 200ms;
}

.lui-table-row.collapse div{
    height: 0px;
    transition: height 200ms;
}

.lui-table-body .lui-table-row:first-of-type{
    border-top-width: 0px;
}

.lui-table-body .lui-table-row:not(:last-of-type){
    border-bottom-width: 0px;
}

[class*="lui-table-col-"].lui-col-header{
    font-weight: 600;
    color: #0e141f;
    cursor: pointer;
}

[class*="lui-table-col-"].lui-col-header:after{
    content: ': ';
}

[class*="lui-table-col-"].lui-col-header.sort-desc:before{
    content: '↓';
    font-weight: bold;
}

[class*="lui-table-col-"].lui-col-header.sort-asc:before{
    content: '↑';
    font-weight: bold;
}

[class*="lui-table-col-"]{
    padding:0.5em;
    color: #273445;
}

.lui-table-col-1{ width:5%; float:left; }
.lui-table-col-2{ width:10%; float:left; }
.lui-table-col-3{ width:15%; float:left; }
.lui-table-col-4{ width:20%; float:left; }
.lui-table-col-5{ width:25%; float:left; }
.lui-table-col-6{ width:30%; float:left; }

ul.lui-filter-suggestions{
    position: absolute;
    min-height: 2em;
    width: 13em;
    background-color: whitesmoke;
    top: 1.3em;
    border-radius: 0 0 0.3em 0.3em;
    border: #485a6c solid 1px;
    transition: max-height 150ms;
    max-height: 50em;
    list-style-type: none;
}

ul.lui-filter-suggestions:empty:before{
    content: 'Ingen Match';
    width:13em;
    top: 0;
    bottom:0;
    width:100%;
}

ul.lui-filter-suggestions.inactive{
    max-height: 0;
    min-height: 0;
    transition: min-height 150ms;
    transition-delay: border 150ms;
}

ul.lui-filter-suggestions.inactive li{
    display: none;
}

ul.lui-filter-suggestions li{
    width: 100%;
    cursor: pointer;
}

ul.lui-filter-suggestions li.marked{
    background-color: #ffa154;
}

ul.lui-filter-suggestions li:hover{
    background-color: #ffc27d;
}

div.lui-table-active-filters{
    display: flex;
    flex-flow: row;
    justify-content: center;
    min-height: 14px;
}

div.lui-table-active-filters div{
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-style: italic;
    color: #555761;
}

div.lui-table-active-filters div:before{
    content: '✕';
    height: 1em;
    padding-left: 0.2em;
    padding-right: 0.1em;
    border-radius: 1em 1em 1em 1em;
    border: 0px solid;
    background-color: #273445;
    color: #fafafa;
    margin-right: 0.2em;
    margin-left: 0.5em;
}