/*
 Stylesheet for the Module Wissen of the wbsSuite
*/
div#main_X {
    width:100%;
    display:flex;
    flex-direction: row;

    border:1px solid #fff;

}
div#wissen_content {
    background     : rgba(64, 105, 57, 0.15);

    display        : flex;
    flex-direction : column;

}

/**
 Fancy Index, Verzeichnisbaum
 */

div#wissen_content table {

    width      : 100%;
    max-width  : 800px;
    margin     : 20px auto 0;
    background : white;
    box-shadow : 3px 3px 3px rgba(0, 0, 255, 0.5);
}

div#wissen_content table tr {
    background  : white;
    height      : 24px;
    line-height : 24px;
    font-size   : 18px;
}

div#wissen_content table tr td {
    background    : white;
    position      : relative;
    border-bottom : 1px solid #eee;
    border-right  : 1px solid #eee;
    padding       : 2px;
}

span.file,
div#wissen_content table tr td span.file {
    display      : inline-block;
    width        : 16px;
    height       : 16px;
    margin-right : 5px;
    background   : #faf2cc;
}

div#wissen_content table tr td span.file.text {
    background : #d4facc;
}

div#wissen_content table tr td span.file.markdown {
    background : #c4d8fa;
}

div#wissen_content table tr td span.file.desktop {
    background : #efc0fa;
}

div#wissen_content table tr td span.file_menu {
    display : inline-block;
    float   : right;
    /*width        : 16px;*/
    height  : 16px;
    /*margin-right : 5px;*/
    /*border   : 1px solid #faf2cc;*/
}

div#wissen_content table tr td span.file_menu {
    display : none;
}

div#wissen_content table tr:hover span.file_menu {
    display  : inline-block;
    position : absolute;
    right    : 0;
}

div#wissen_content table tr td span.file_menu a {
    width        : 16px;
    border       : 1px solid #faf2cc;
    background   : #faf2cc;
    margin-right : 2px;
}

div#wissen_content table tr td span.file_menu a:hover {
    border          : 1px solid #676454;
    background      : #676454;
    color           : #fff;
    text-decoration : none;
}
span.dir,
div#wissen_content table tr td span.folder {
    display      : inline-block;
    width        : 16px;
    height       : 16px;
    margin-right : 5px;
    background   : rgba(255, 0, 0, 0.35);
}

div#wissen_content table tr td.name {
    text-align : left;
}

div#wissen_content table tr td:hover {
    background    : #f9f9f9;
    /*text-shadow: 1px 1px 2px navy;*/
    border-bottom : 1px solid #fcc;
    border-right  : 1px solid #fcc;
}
div.flex{
    display:flex;
}
div.flex.horizontal{
    flex-direction: row;
}
div.flex.horizontal.right{
    justify-content: flex-end;
}

/******************************************************************************
 * S E A R C H - S N I P P E T S
 *****************************************************************************/
ul.search_results{
    display:flex;
    flex-direction: column;

    margin:10px auto;

    max-width:600px;

    /*border:1px solid red;*/
    list-style-type: none;
}
ul.search_results li{
    background:#fff;

    padding:5px;
    margin-bottom: 5px;
    border : 1px solid #0A246A;
    border-radius: 5px;

    min-height:24px;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
}
ul.search_results li:hover {
    box-shadow: 3px 3px #0A246A;
}
ul.search_results li a{
    width:100%;
    height:24px;
    display:block;
    text-align:left;
    line-height:24px;
    overflow:hidden;
}

div#browser_bar {
    flex           : 0 0 36px;

    display        : flex;
    flex-direction : row;

    box-sizing     : border-box;
    /*width          : 100%;*/
    padding        : 8px;
    margin         : 0 auto;

    line-height    : 36px;
    font-size      : 16px;
}

div#browser_bar label {
    flex       : 0 0 10%;
    display    : inline-blocK;
    box-sizing : border-box;
}

div#browser_bar input {
    /*flex       : 0 0 60%;*/
    flex       : 1 1 auto;
    display    : inline-block;
    box-sizing : border-box;
}

a.wissen_button,
div#browser_bar a {
    flex             : 1 0 10%;
    height           : 36px;
    display          : inline-blocK;
    box-sizing       : border-box;
    padding          : 5px 10px;
    margin-right     : 10px;
    color            : #fff;
    background-color : #0E658E;
    border           : 1px solid #0E658E;
}
a.wissen_button.red,
div#browser_bar a.red {
    color            : #FF0000;
    background-color : #fff;
    border           : 1px solid #f00;
}
div#browser_bar a:hover {
    text-decoration : none;
    border-color    : #fff;

}

/*
 Text Editor
*/
div#text_content {
    flex          : auto;
    box-sizing    : border-box;
    width         : 98%;
    max-width     : 800px;

    margin        : 1% auto;
    padding       : 2% 3%;

    overflow      : auto;

    background    : #fcfcfc;
    border        : 1px solid navy;
    border-radius : 5px;
    text-align    : left;

    box-shadow    : 3px 3px 3px rgba(0, 0, 255, 0.5);

}

/* Markdown Part*/

div#markdown_content {
    flex          : auto;
    box-sizing    : border-box;
    width         : 98%;
    max-width     : 800px;

    margin        : 1% auto;
    padding       : 2% 3%;

    overflow      : auto;

    background    : #fcfcfc;
    /*border        : 1px solid navy;*/
    border-radius : 5px;
    text-align    : left;

    box-shadow    : 3px 3px 3px rgba(0, 0, 255, 0.5);
}

/******************************************************************************
 *  L O G I N _ P A G E
 *****************************************************************************/
body.wissen_login {
    /*background-color : rgba(255, 181, 71, 0.40);*/
    background-color : #fff;
    padding          : 0;
    margin           : 0;
    border           : 0;
    height           : 100vh;
    width            : 100%;
    display          : flex;
    flex-direction   : column;
}

body.wissen_login div#headline {
    flex             : 0 0 50px;
    line-height      : 50px;
    text-align       : center;
    font-size        : large;
    font-weight      : 700;
    text-decoration  : underline;
    border           : 3px solid #def;
    color            : #7a838d;
    /*background-color : #fff;*/
}

body.wissen_login div#content {
    /*background-color    : #def;*/
    /*background-image    : radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, .3) 99%),*/
    /*radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, .3) 99%);*/
    /*background-size     : 80px 80px;*/
    /*background-position : 0 0, 40px 40px;*/
    flex                : auto;
    width               : 100%;
    text-align          : center;
}

body.wissen_login div#info {
    margin : 10px auto;
    /*border: 3px solid #def;*/
    /*border-radius: 10px;*/
    /*background: rgba(255, 255, 255, 0.8);*/
}

body.wissen_login div#content form#login {
    min-width     : 260px;
    width         : 75%;
    max-width     : 500px;

    margin        : 20px auto;
    border        : 3px solid #def;
    border-radius : 10px;

    background    : #d3ffcc;
    /*background    : rgba(255, 255, 255, 0.8);*/
}

body.wissen_login div#footer {
    flex             : 00 0 50px;
    line-height      : 50px;
    width            : 100%;
    text-align       : center;
    font-weight      : 700;
    /*text-decoration: underline;*/
    border           : 3px solid #def;
    color            : #7a838d;
    background-color : #fff;

}

body.wissen_login div#footer a {
    color : #333;
}

form#bookmark {
    border : 1px solid navy;
}

form#bookmark .row {
    width          : 100%;
    display        : flex;
    flex-direction : row;
    align-items    : center;
    margin-bottom  : 10px;
}

form#bookmark .row label {
    flex       : 0 0 21%;
    padding    : 2px;
    text-align : left;
}

form#bookmark .row textarea,
form#bookmark .row input {
    flex       : 0 0 69%;
    padding    : 2%;
    text-align : left;
}

form#bookmark .row::after {
    clear : both;
}