/*
  Stylesheet for Wissen

  The Stylesheet is build "Desktop First, Mobile Last",
  you can find Mobile Rules at Section  M o b i l e

*/

* {
    color       : #333;
    font-family : Geneva, Verdana, sans-serif;
    font-size   : 1rem;
    line-height : 1rem;

    box-sizing  : border-box;

    margin      : 0;
    padding     : 0;
    border      : 0;
}

body {
    background : #167ac6;
    width      : 100%;
    height     : 100%;
}

a {
    text-decoration : none;
    background      : transparent;
    color           : #333;
}

a:hover {
    text-decoration : underline;
    color           : #111;
}

li {
    color : #c66;
}
input{
    padding:5px;
}
/* ---------------- A P P - P A G E ------------------- */

div#app {
    position         : absolute;
    display          : flex;
    flex-direction   : column;
    width            : 100%;
    height           : 100%;
    /*background     : rgba(207, 255, 95, 0.49);*/
    background-color : #00b7ff;
    background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='.1'%3E%3Cpolygon fill='%23444' points='90%2C150 0%2C300 180%2C300'/%3E%3Cpolygon points='90%2C150 180%2C0 0%2C0'/%3E%3Cpolygon fill='%23AAA' points='270%2C150 360%2C0 180%2C0'/%3E%3Cpolygon fill='%23DDD' points='450%2C150 360%2C300 540%2C300'/%3E%3Cpolygon fill='%23999' points='450%2C150 540%2C0 360%2C0'/%3E%3Cpolygon points='630%2C150 540%2C300 720%2C300'/%3E%3Cpolygon fill='%23DDD' points='630%2C150 720%2C0 540%2C0'/%3E%3Cpolygon fill='%23444' points='810%2C150 720%2C300 900%2C300'/%3E%3Cpolygon fill='%23FFF' points='810%2C150 900%2C0 720%2C0'/%3E%3Cpolygon fill='%23DDD' points='990%2C150 900%2C300 1080%2C300'/%3E%3Cpolygon fill='%23444' points='990%2C150 1080%2C0 900%2C0'/%3E%3Cpolygon fill='%23DDD' points='90%2C450 0%2C600 180%2C600'/%3E%3Cpolygon points='90%2C450 180%2C300 0%2C300'/%3E%3Cpolygon fill='%23666' points='270%2C450 180%2C600 360%2C600'/%3E%3Cpolygon fill='%23AAA' points='270%2C450 360%2C300 180%2C300'/%3E%3Cpolygon fill='%23DDD' points='450%2C450 360%2C600 540%2C600'/%3E%3Cpolygon fill='%23999' points='450%2C450 540%2C300 360%2C300'/%3E%3Cpolygon fill='%23999' points='630%2C450 540%2C600 720%2C600'/%3E%3Cpolygon fill='%23FFF' points='630%2C450 720%2C300 540%2C300'/%3E%3Cpolygon points='810%2C450 720%2C600 900%2C600'/%3E%3Cpolygon fill='%23DDD' points='810%2C450 900%2C300 720%2C300'/%3E%3Cpolygon fill='%23AAA' points='990%2C450 900%2C600 1080%2C600'/%3E%3Cpolygon fill='%23444' points='990%2C450 1080%2C300 900%2C300'/%3E%3Cpolygon fill='%23222' points='90%2C750 0%2C900 180%2C900'/%3E%3Cpolygon points='270%2C750 180%2C900 360%2C900'/%3E%3Cpolygon fill='%23DDD' points='270%2C750 360%2C600 180%2C600'/%3E%3Cpolygon points='450%2C750 540%2C600 360%2C600'/%3E%3Cpolygon points='630%2C750 540%2C900 720%2C900'/%3E%3Cpolygon fill='%23444' points='630%2C750 720%2C600 540%2C600'/%3E%3Cpolygon fill='%23AAA' points='810%2C750 720%2C900 900%2C900'/%3E%3Cpolygon fill='%23666' points='810%2C750 900%2C600 720%2C600'/%3E%3Cpolygon fill='%23999' points='990%2C750 900%2C900 1080%2C900'/%3E%3Cpolygon fill='%23999' points='180%2C0 90%2C150 270%2C150'/%3E%3Cpolygon fill='%23444' points='360%2C0 270%2C150 450%2C150'/%3E%3Cpolygon fill='%23FFF' points='540%2C0 450%2C150 630%2C150'/%3E%3Cpolygon points='900%2C0 810%2C150 990%2C150'/%3E%3Cpolygon fill='%23222' points='0%2C300 -90%2C450 90%2C450'/%3E%3Cpolygon fill='%23FFF' points='0%2C300 90%2C150 -90%2C150'/%3E%3Cpolygon fill='%23FFF' points='180%2C300 90%2C450 270%2C450'/%3E%3Cpolygon fill='%23666' points='180%2C300 270%2C150 90%2C150'/%3E%3Cpolygon fill='%23222' points='360%2C300 270%2C450 450%2C450'/%3E%3Cpolygon fill='%23FFF' points='360%2C300 450%2C150 270%2C150'/%3E%3Cpolygon fill='%23444' points='540%2C300 450%2C450 630%2C450'/%3E%3Cpolygon fill='%23222' points='540%2C300 630%2C150 450%2C150'/%3E%3Cpolygon fill='%23AAA' points='720%2C300 630%2C450 810%2C450'/%3E%3Cpolygon fill='%23666' points='720%2C300 810%2C150 630%2C150'/%3E%3Cpolygon fill='%23FFF' points='900%2C300 810%2C450 990%2C450'/%3E%3Cpolygon fill='%23999' points='900%2C300 990%2C150 810%2C150'/%3E%3Cpolygon points='0%2C600 -90%2C750 90%2C750'/%3E%3Cpolygon fill='%23666' points='0%2C600 90%2C450 -90%2C450'/%3E%3Cpolygon fill='%23AAA' points='180%2C600 90%2C750 270%2C750'/%3E%3Cpolygon fill='%23444' points='180%2C600 270%2C450 90%2C450'/%3E%3Cpolygon fill='%23444' points='360%2C600 270%2C750 450%2C750'/%3E%3Cpolygon fill='%23999' points='360%2C600 450%2C450 270%2C450'/%3E%3Cpolygon fill='%23666' points='540%2C600 630%2C450 450%2C450'/%3E%3Cpolygon fill='%23222' points='720%2C600 630%2C750 810%2C750'/%3E%3Cpolygon fill='%23FFF' points='900%2C600 810%2C750 990%2C750'/%3E%3Cpolygon fill='%23222' points='900%2C600 990%2C450 810%2C450'/%3E%3Cpolygon fill='%23DDD' points='0%2C900 90%2C750 -90%2C750'/%3E%3Cpolygon fill='%23444' points='180%2C900 270%2C750 90%2C750'/%3E%3Cpolygon fill='%23FFF' points='360%2C900 450%2C750 270%2C750'/%3E%3Cpolygon fill='%23AAA' points='540%2C900 630%2C750 450%2C750'/%3E%3Cpolygon fill='%23FFF' points='720%2C900 810%2C750 630%2C750'/%3E%3Cpolygon fill='%23222' points='900%2C900 990%2C750 810%2C750'/%3E%3Cpolygon fill='%23222' points='1080%2C300 990%2C450 1170%2C450'/%3E%3Cpolygon fill='%23FFF' points='1080%2C300 1170%2C150 990%2C150'/%3E%3Cpolygon points='1080%2C600 990%2C750 1170%2C750'/%3E%3Cpolygon fill='%23666' points='1080%2C600 1170%2C450 990%2C450'/%3E%3Cpolygon fill='%23DDD' points='1080%2C900 1170%2C750 990%2C750'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------- Header ------------------- */

div#header {

    flex            : 0 0 72px;
    box-sizing      : border-box;

    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-content   : center;
    width           : 100%;
    height          : 72px;

    padding         : 0;
    /*line-height : 36px;*/
    font-size       : 16px;
}

div#header div.header_row {

    /*border          : 1px solid red;*/
    flex            : 0 0 36px;
    height          : 36px;

    width           : 100%;
    max-width       : 800px;
    margin          : 0 auto;

    display         : flex;
    flex-direction  : row;
    justify-content : center;
    align-content   : center;
}

div#header div#header_row_1 {
    /*border:1px solid blue;*/
}

div#header div#header_row_2 {

    justify-content : space-between;
    /*border:1px solid blue;*/
}

div#header div#header_row_2 form input {
    padding       : 5px;
    border-radius : 4px;
}

div#header div#header_row_2 {
    /*border:1px solid red;*/
    overflow : hidden;
}

div#header:hover {
    /*opacity : 1.0;*/
}

div#header ul#left_header_menu {
    float           : left;
    list-style-type : none;
    display         : flex;
    flex-direction  : row;
    justify-content : flex-start;
}

/**/
div#header ul#left_header_menu li {
    height        : 24px;
    background    : #fff;
    padding       : 2px 5px;
    margin-top    : 5px;
    margin-right  : 5px;
    border        : 1px solid #000066;
    border-radius : 3px;
}

div#header ul#left_header_menu li:hover {
    border : 1px solid red;
}

div#header ul#left_header_menu li a {
    text-decoration : none;
}

div#header form#wissen_suche {
    float      : right;
    margin-top : 2px;
}

div#wissen_content {
    flex       : auto;
    overflow-y : scroll;

}

ul.topnav {
    width:100%;
    display          : flex;
    flex-direction   : row;
    justify-content  : center;
    align-content    : center;

    /*overflow         : hidden;*/
    background-color : transparent;
    list-style-type  : none;
}

ul.topnav li {

    display         : block;

    background      : #fff;
    color           : #d0d0d0;
    padding         : 2px 5px;
    border          : 1px solid #000066;

    text-decoration : none;
    text-align      : center;
}

ul.topnav > li:first-child {
    background : #167ac6;
    display    : none;
}
ul.topnav li:hover {
    background-color : #ddd;
    color            : black;
}
ul.topnav > li:first-child:hover {
    background-color: #1369aa;
}

ul.topnav li a {
    background-color : transparent;
}

li.active {
    background-color : #4CAF50;
    color            : white;
}

div#header ul#new_dialog {
    position        : absolute;
    z-index         : 999;
    clear           : both;
    list-style-type : none;
}

div#header ul#new_dialog li {
    clear : both;
    float : none;
}

/******************************************************************************
 *   M O B I L E
 *****************************************************************************/

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

    div#header {
        flex   : 0 0 96px;
        height : 96px;
    }

    div#header div.header_row {
        /*border : 1px solid orange;*/
        flex   : 0 0 48px;
        height : 48px;
    }

    ul.topnav {
        width           : 100%;
        /*position        : absolute;*/
        /*top             : 0;*/
        /*left            : 0;*/
        display         : flex;
        flex-direction  : column;
        justify-content : flex-start;
        z-index         : 999;
    }

    .topnav.responsive {
        position : relative;
    }

    /*.topnav.responsive li.icon {*/
    /*position: absolute;*/
    /*right: 0;*/
    /*top: 0;*/
    /*}*/
    ul.topnav li {
        display    : none;
        flex       : 1 0 48px;
        min-height : 48px;
        width      : 100%;
        text-align : left;
        /*width:100%;*/
        /*background:yellow;*/
    }

    ul.topnav.responsive li:first-child {
        width : 100%;
    }

    ul.topnav.responsive li {
        display    : block;
        flex       : 1 0 48px;
        min-height : 48px;
        width      : 100%;
        text-align : left;
        /*width:100%;*/

        background : #131313;
        color      : #fcfcfc;

        border-top : 1px solid #d0d0d0;
    }

    ul.topnav.responsive li:hover {
        background-color : #0b5273;
    }

    ul.topnav li a {
        display     : block;
        width       : 100%;
        height      : 42px;
        line-height : 42px;
        color       : #d0d0d0;
        text-decoration: none;
        /*background:magenta;*/
    }

    ul.topnav li a:hover {
        color : yellow;
    }

    ul.topnav li.icon {
        display : block;
        flex    : 0 0 24px;
        height  : 24px;
    }

    div#header ul#new_dialog {
        /*position        : static;*/
        width           : 100%;
        display         : block;
        flex-direction  : column;
        list-style-type : none;
        background      : rebeccapurple;
        margin          : 0;
        padding         : 0;
    }

    div#header ul#new_dialog li {
        height        : 48px;
        width         : 100%;
        border-bottom : white;
    }

}

/* ---------------- Pfade ------------------- */

div#path_info {

    position         : relative;
    box-sizing       : border-box;

    width            : 100%;
    height           : 36px;

    padding          : 8px;
    line-height      : 36px;
    font-size        : 16px;

    background-color : #fff;
    color            : red;
    border           : 1px solid red;

}

/* ---------------- Pfade ------------------- */

div#wissen_directory {

    position         : relative;
    box-sizing       : border-box;

    width            : 100%;
    height           : 36px;

    padding          : 8px;
    line-height      : 20px;
    font-size        : 12px;

    background-color : #fff;
    color            : red;
    border           : 1px solid red;

}

.green_gradient {
    background : rgb(248, 255, 232); /* Old browsers */
    background : -moz-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%); /* FF3.6+ */
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(248, 255, 232, 1)), color-stop(33%, rgba(227, 245, 171, 1)), color-stop(100%, rgba(183, 223, 45, 1))); /* Chrome,Safari4+ */
    background : -webkit-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%); /* Chrome10+,Safari5.1+ */
    background : -o-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%); /* Opera 11.10+ */
    background : -ms-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%); /* IE10+ */
    background : linear-gradient(to bottom, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%); /* W3C */
    filter     : progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8ffe8', endColorstr='#b7df2d', GradientType=0); /* IE6-9 */
    opacity    : 0.5;

}

.red_gradient {
    background : rgb(248, 255, 232); /* Old browsers */
    background : -moz-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgb(255, 0, 0) 100%); /* FF3.6+ */
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(248, 255, 232, 1)), color-stop(33%, rgba(227, 245, 171, 1)), color-stop(100%, rgba(183, 223, 45, 1))); /* Chrome,Safari4+ */
    background : -webkit-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%); /* Chrome10+,Safari5.1+ */
    background : -o-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%); /* Opera 11.10+ */
    background : -ms-linear-gradient(top, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%); /* IE10+ */
    background : linear-gradient(to bottom, rgba(248, 255, 232, 1) 0%, rgba(227, 245, 171, 1) 33%, rgba(183, 223, 45, 1) 100%); /* W3C */
    filter     : progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8ffe8', endColorstr='#b7df2d', GradientType=0); /* IE6-9 */
    opacity    : 0.5;

}

/* ---------------- Formulare ------------------- */

div#neu_menu {
    float : right;
}

div.wissen_form {

    background : #fff;

}

div.wissen_form * {
}

div#form_new_folder_wrapper {
    display          : flex;
    flex-direction   : column;
    justify-content  : center;
    align-items      : center;

    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100% !important;
    position         : fixed;
    z-index          : 200000;
    background-color : rgba(55, 55, 55, 0.9);

}

div#form_new_folder {
    z-index    : 2;
    width      : 400px;
    background : #fff;
}

div.wbs_dialog {
    border         : 1px solid #d0d0d0;
    border-radius  : 8px;
    background     : #fff;
    margin         : 0;
    padding        : 0;
    display        : flex;
    flex-direction : column;
}

div.wbs_dialog .header {
    height          : 50px;
    border-bottom   : 1px solid #d0d0d0;
    display         : flex;
    flex-direction  : row;
    justify-content : space-between;
    padding         : 10px;
}

div.wbs_dialog .header .icon {
    flex : 0 0 30px;
}

div.wbs_dialog .header .title {
    height      : 30px;
    line-height : 30px;
    flex        : auto;
}

div.wbs_dialog .header .close {
    flex : 0 0 30px;
}

div.wbs_dialog .content {
    padding : 10px;
}

div.wbs_dialog .footer {
    height          : 50px;
    border-top      : 1px solid #d0d0d0;
    display         : flex;
    flex-direction  : row;
    justify-content : space-between;
    padding         : 10px;
}

div#form_new_file {
    position : absolute;

    top      : 10%;
    right    : 10%;
    margin   : 0 auto;
    padding  : 10px;

}

div#footer {
    flex        : 0 0 36px;

    box-sizing  : border-box;

    width       : 100%;
    height      : 36px;
    line-height : 36px;
    font-size   : 16px;

    opacity     : 0.5;
    text-align  : center;
}

div#footer:hover {
    color : #fff;
}