/**
 * @author Daniel Steszewski <daniel.steszewski@gmail.com>
 * @copyright ©2018 Daniel Steszewski. All Rights Reserved.
 */

@CHARSET "UTF-8";

Structure--------------
html { width: 100%; height: 100%; padding: 0; margin:0; }
body { width: 100%; height: 100%; padding: 0; margin:0; }

.table { display: table; }
.tr { display: table-row; }
.th { display: table-cell; }
.td { display:table-cell; }


div#content-wrapper { display: flex; flex-direction: column; position: absolute; width: 100%; height: 100%; padding: 0; margin:0; top: 0; overflow: auto; }
    div.info-output { width: 100%; }
        div.output-green { width: 100%; }
        div.output-green-yellow { width: 100%; }
        div.output-yellow { width: 100%; }
        div.output-red { width: 100%; }
            div.output-green > div { margin: auto; display:inline-flex; }
            div.output-green-yellow > div { margin: auto; display:inline-flex; }
            div.output-yellow > div { margin: auto; display:inline-flex; }
            div.output-red > div { margin: auto; display:inline-flex; }
    div#header-wrapper { }
        div.header { position: relative; width: 100%; min-height: 65px; padding: 0; margin: 0; top: 0; }
            div#header-content-wrapper { position: relative; display: flex; }
                div#hamburger { position: relative; padding: 0; z-index: 2; left: 0; }
                img#hamburger-image { padding: 10px; }
            div#header-navigation { padding: 0; margin: 0; display: block; position: absolute; z-index: 20; top:70px; right: 40px; }
    div#body-wrapper { width: 100%; padding: 0; margin: 0; }
        div.leftbox { width: 295px; padding: 20px; margin: 0; left: 0; float:left; }
        div.leftbox.float { height: 100%; }
        div#content-container { display: flex; width: 100%; overflow: hidden; }
            div.content { padding: 0; margin: auto; }
            div.content #input { padding: 20px; }
            #list { width:170px; padding: 20px; }
            .element { display: flex; }
            .element > input{ background: none; border: none; }
                .element > input.EAN{ width: 110px; }
                .element > input.No{ width: 25px; }
            div.content.float { width: 100%;  padding: 20px; }
            div.content.float>div { width: 400px; margin: auto; padding: 20px; }
    div.footer { width: 99%; padding: 0.5%; margin: 0; bottom: 0; }
        div#debug { max-height: 50px; z-index: 20; }
            pre{ padding: 0; margin: 0; white-space: unset; }

    div.float  { position: fixed; z-index: 10 !important;}
    form { margin: 0; }
div.close { float: right; }
div.close a { font-size: 16px; font-weight: bold; }

Style------------------
html { }
body { font-family: 'Raleway', sans-serif; font-size: 12px; color: #333333; background: #ccc; }
iframe { border: none; }

h1{ margin: 20px 0 10px 0; font-size: 36px; font-weight: bold; line-height: 40px; color: white; }
h2{ margin: 0; padding: 12px 10px; text-align: center; font-size: 16px; font-weight: bold; line-height: 18px; color: black; }
p{ line-height: 1.231; color: black;}
.desc{ font-weight: 700; }

a{ color: inherit; text-decoration: none; cursor:pointer; outline: none; }
a:hover { text-decoration: none; outline: black; }

button, button:hover { border: none; }
input[type=submit], button { padding: 10px 20px; margin: 2px; }
a.submit { padding: 10px 50px 8px 20px; }
input[type=submit], a.submit, button { border: solid 1px transparent; background: black; color: white; line-height: 15px; cursor: pointer; font-weight: bold; font-size: 14px; text-transform: uppercase; }
input[type=submit]:hover, a:hover.submit, button:hover { border: solid 1px white; }
input[type=submit].clear, a.submit.clear, button.clear { padding: 0; border: none; background: none; color: black; }


div#content-wrapper { display: flex; flex-direction: column; position: absolute; width: 100%; height: 100%; padding: 0; margin:0; top: 0; overflow: auto; }
    div.output {  z-index: 20; }
        div.output-red { padding: 10px; background: #c00; color: white; text-align: center; line-height: 26px; font-weight: bold; }
        div.output-yellow { padding: 10px; background: yellow; color: black; text-align: center; line-height: 26px; font-weight: bold; }
        div.output-green-yellow { padding: 10px; background: repeating-linear-gradient(45deg, yellow, yellow 10px, #187d18 10px, #187d18 20px); color: black; text-align: center; line-height: 26px; font-weight: bold; }
        div.output-green { padding: 10px; background: #187d18; color: white; text-align: center; line-height: 26px; font-weight: bold; }
            div.loading { height: 25px; width: 25px; background: url("../images/loading.gif") center/25px 25px  no-repeat; }
    div#header-wrapper { }
        div.header { background: url("../images/bg.jpg") center no-repeat; }
            div#header-content-wrapper { padding-top: 18px; }
                div#hamburger { }
                img#hamburger-image { }
                div#logo { position: absolute; left: 50px; height: 100px; background: url("../images/logo.jpeg") center/200px 100px  no-repeat; }
                div#logout { vertical-align: middle; font-size: 14px !important; font-weight: bold; text-transform: uppercase; }
                    div#logout a { font-weight: bold; font-size: 18px; }
                    div#logout a img { position: absolute; margin: -3px 0 0 -40px; }
            div#header-navigation { list-style-type: none; }
                div#header-navigation li { padding: 0 0 0 10px; display: inline; line-height: 12px; text-align: right;  color: #000; list-style-type: none; }
                div#header-navigation select { padding: 0; }
    div#body-wrapper { }
        div.leftbox { }
        div.leftbox.float { z-index: 20 !important; }
        div#content-container { }
            div#content { }
            div#content span.paginator { display: block; text-align: center; margin: 10px auto; }
                .element { line-height: 20px; }
            div#content-float { display: none; overflow: hidden; background: none; }
            div#content-float > div{ background: #ffff7e; }
    div.footer { vertical-align: middle;}
    div.footer.float { background: black; color: white;}
        div#debug { overflow: auto; border: solid red 1px; background: white; color: black; }

.tooltip-body { background: black; background: rgba(0, 0, 0, .8); color: yellow; border: 1px solid yellow }

div.search { float: right; text-align: right; }
div.search input { position: relative; right: -27px; width: 175px; height: 17px; }
div.search button { position: relative; padding: 0; top: -5px;; right: 5px; height: 25px; width: 25px; }

/* extern */
.nicEdit-main { background: #fff; }