/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 9-feb-2017, 22:53:22
    Author     : Johan van Leur <info@into-motion.com>
*/

html, body {
    background-color: white;
    font-size: 16px;
}


* {
    box-sizing: border-box;
}

.hidden {
    display: none;
}

div.main-wrapper {

    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;

}

div.header {

    position: absolute;
    left:0px;
    top:0px;
    right:0px;
    height:5rem;

    background-color: #444;

}

div.header ul.topmenu {
    position:absolute;
    right:1rem;
    top:0.75rem;
    bottom:0px;
    width:auto;
    list-style: none;
    padding:0;
    margin:0;
    margin-right:5px;
}
div.header ul.topmenu li {
    float:left;
    display: inline-block;
    border-left:1px solid #555;
    margin-top:5px;
    padding-left:5px;
    padding-right:5px;
}


div.header div.info {
    position:relative;
    
    width:auto;
    color: white;
      
}

div.header div.info span {
    display: block;
    text-align: right;
    font-size:10px;
    line-height:15px;
}

div.header div.info span.username {
    color: white;
}
div.header div.info span.domain {
    color: #999;
}

div.header div.info span.language {
    width:30px;    
    height:30px;
}

div.header div.info span.language span.flaticon {
    position:absolute;
    top:8px;
    left:0px;
    width:30px!important;
    height:30px!important;    
    color: #999;
    cursor: pointer;
}
div.header div.info span.language span.flaticon:hover {
    color: white;
}
div.header div.info span.language span.flaticon:before {
    font-size:29px;
}



div.body {
    position:absolute;
    left:0px;
    top:5rem;
    right:0px;
    bottom:0px;
}

div.menu-wrapper {

    position:absolute;
    left:0px;
    top:0px;
    width:280px;
    bottom:0px;
    background-color: #333;
    color: white;
    font-size:16px;
}



div.content-wrapper {
    position:absolute;
    top:0px;
    left:280px;
    bottom:0px;
    right:0px;
    background-color: white;
    overflow-y: scroll;
    padding:5px;
    padding-top:8px;
    padding-left:10px;
    padding-right:10px;
}

@media print {
    
    div.header {
        float:left;
        position:relative;
        display: block;
        width:100%;
    }
    
    div.menu-wrapper {
        display: none;
    }
    div.content-wrapper {
        position:relative;
        left:0px;
        float:left;
        width:100%;
        overflow-y: visible;
    }
    div.header div.logo img {
        display :none;        
    }
    div.header div.logo {
        padding-left:5px;
    }
    div.header div.logo:after {
        content: url(../assets/print-logo.png);
    }
        
}


div.body.menu-collapsed div.menu-wrapper {
    width:42px;
}
div.body.menu-collapsed div.content-wrapper {
    left:42px;
}

div.menu-wrapper ul {
    padding:0;
    margin:0;
}
div.menu-wrapper ul li {
    display: block;
    line-height:3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.menu-wrapper ul li a span.flaticon {    

}
div.menu-wrapper ul li a span.flaticon:before {    

}
div.menu-wrapper ul ul.sub-menu {
    padding-left: 30px;    
}
div.menu-wrapper ul ul.sub-menu li {
    line-height:16px;
    font-size:14px;
    font-weight: normal;
}

div.menu-wrapper ul li span.menu-caption{
    margin-left:5px;    
    vertical-align: bottom;    
}
div.menu-wrapper ul li a {
    text-decoration: none;
    color: white;
    display: block;
    padding:1rem;
}
div.menu-wrapper ul li:hover {
    background-color: #EEEEEE;
}
div.menu-wrapper ul li:hover a{
    color: black;
}


.dialog-box-shadow {
    -webkit-box-shadow: 0px 2px 20px 0px rgba(50, 50, 50, 0.4);
    -moz-box-shadow:    0px 2px 20px 0px rgba(50, 50, 50, 0.4);
    box-shadow:         0px 2px 20px 0px rgba(50, 50, 50, 0.4)
}

div.logo {    
    background:transparent;    
    margin-top: 1rem;
    margin-left: 1rem;
}
div.logo img {
    height:3rem;
    
}


div.language-select {
    z-index:1;
    width:auto;
}


div.language-select ul {
    list-style:none;
    margin:0;
    padding:0;
    min-width:200px;
    
}
div.language-select ul li {
    
    padding:0px 0px;
}
div.language-select ul li:hover {
    background-color: #DDD;
}

div.language-select ul li a{
    display: block;
    text-decoration: none;
    color: black;
    padding:10px 10px;
}
div.language-select ul li a div.language {
    display: block;
    height:24px;
}
div.language-select ul li a div.language span.name {
    display: inline-block;
    height:24px;
    line-height:24px;
}

div.language-select ul li a div.language span.flag {
    float:left;
    width:24px;
    height:24px;
    display: inline-block;
    line-height:24px;
    margin-right:10px;
    opacity:0.5;
}
div.language-select ul li:hover a div.language span.flag {
    opacity:1.0;
}
div.language-select ul li a div.language span.flag img {
    width:24px;
    height:24px;
}