/*************************************************/
/*              V A R I A B L E S                */
/*************************************************/
:root {
    /* DIMENSIONS */
    --navbar-height: 70px;
    --sidebar-width: 320px;
    --border-bottom-height-fx: 8px;

    /* POSITIONS */
    --sidebar-hided-pos-left: -350px;

    /* COLORS */
    --navbar-bg-color: #343a40;
    --white-text-color: #ced4da;
    --active-color: #2297f3;
    --hover-color: #77bbff;
    --separator-on-sidebar-color: #e6e6e6;
    --separator-on-navbar-color:  #222;

    /* DEPTHS */
    --z-index-sidebar: 1000;
    --z-index-close-sidebar-panel: 100;
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/roboto-regular.ttf);
}

/*************************************************/
/*               G E N E R A L                   */
/*************************************************/
*{
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
}

body{
    font-size: 15px;
    margin: 0;
}

/*************************************************/
/*         N A V I G A T I O N  B A R            */
/*************************************************/
#navbar{
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--navbar-height);
    background-color: var(--navbar-bg-color);
    border-bottom: var(--border-bottom-height-fx) solid #212529;
}

#navbarFloatRight{
    display: flex;
    margin-left: auto;
}

.navbar-link{
    color: var(--white-text-color);
    padding: 18px 16px;
    font-size: 18px;
}

.navbar-link:hover{
    color: white;
    border-bottom: var(--border-bottom-height-fx) solid var(--hover-color);
    margin-bottom: -8px;
}

.navbar-link-active{
    color: #fff;
    background-color: #40474e;
    font-weight: bold;
    outline-width: 10px;
    border-bottom: var(--border-bottom-height-fx) solid var(--active-color);
    margin-bottom: -8px;
}

.navbar-separator{
    border-right: 1px solid var(--separator-on-navbar-color);
}

.logo{
    max-width: 128px;
    max-height: 128px;
    margin: 5px 0px 0px 16px;
}

.navbar-title{
    align-self: center;
    font-size: 28px;
    color: white;
}

.navbar-link-icon{
    /*display: none;*/
    float: left;
    margin-right: 8px;
    margin-top: 2px; /* a small offset to center it */
}

.navbar-link-name{
    float: left;
}

/*************************************************/
/*                S I D E B A R                  */
/*************************************************/
.sidebar-wrapper{
    z-index: var(--z-index-sidebar);
    display: block;
    width: var(--sidebar-width);
    height: 100%;
    padding: 0px 16px;
    background: white;
    border-right: 1px solid var(--separator-on-sidebar-color);
    overflow-x: hidden;
    overflow-y: auto;

    position: fixed;
    top: var(--navbar-height);
    left: 0;
}

.sidebar-title{
    /*background: yellow;*/
    font-size: 1.8em;
    font-weight: bold;
    margin: 10px 0 5px 0;
    text-align: center;
    padding-bottom: 5px;
    /*border-bottom: 1px solid var(--separator-on-sidebar-color);*/
}

#txtSidebarSearch{
    outline: none;
    width: 100%;
    padding: 5px 15px;
    border-radius: 50px;    
    border: 1px solid var(--separator-on-sidebar-color);
    margin-bottom: 10px;

    -webkit-transition: border 0.2s; /* For Safari 3.1 to 6.0 */
    transition: border 0.2s;
}

#txtSidebarSearch:focus{
    border: 2px solid var(--active-color);
}

#btnClearSidebarSearch{
    display: none; /* hided at start */
    position: absolute;
    color: #444;
    cursor: pointer;
    padding: 6px;
    top: 2px;
    right: 5px;
}

#btnClearSidebarSearch:hover{
    color: black;
}

#labelNoSearchResults{
    display: none; /* hided at start */
    font-size: 20px;
    color: gray;
    text-align: center;
}

#loadingIndicator{
    text-align: center;
}

.sidebar ul{
    list-style-type:none;
    position: relative;
    left: -20px;
    line-height: 1.5em;
}

#sidebarUl{
    margin: 0;
    padding-left: 20px;
}

.sidebar li{
    display: grid;
    grid-template-columns: 20px 250px;
    justify-content: start;
    grid-gap: 3px;
}

.node{
    cursor: pointer;
    color: var(--active-color);

    font-family: "Font Awesome";
    font-weight: 900;
    font-size: 17px;
}

.leaf-icon:before{
    cursor: context-menu;
    font-size: 10px;
    content: "\f111";
    margin-left: 3px;
}

.sidebar-link{
    color: black;
    text-decoration: none;
}

.sidebar-no-link-but-has-children{
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.sidebar-link:hover{
    text-decoration: underline;
}

.sidebar-link-active{
    padding-left: 5px;
    color: white;
    background: var(--navbar-bg-color);
    text-decoration: none;
    border-radius: 3px;
}

.close-sidebar-panel{
    display: none; /* hided at start */
    z-index: var(--z-index-close-sidebar-panel);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
}

/*************************************************/
/*                C O N T E N T                  */
/*************************************************/
.content{
    margin-left: var(--sidebar-width);
    margin-top: var(--navbar-height);
    padding: 2em;
    /*border: 1px solid gray;*/
}

/*************************************************/
/*                   C A R D S                   */
/*************************************************/
.cards{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.card{
    max-width: 400px;
    margin: 1em 2em 1em 0;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 2px 2px 25px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.card img{
    width: 100%;
    height: auto;
}

.card h3{
    margin-bottom: .4em;
}

.card-content{
    /*background: red;*/
    margin: 0em 1em 1em 1em;
}

/*************************************************/
/*                   N O T E S                   */
/*************************************************/
[class*="note-"]{
    margin-bottom: 15px;
    padding: 4px 12px;
    max-width: 600px;
}

.note-caution:before{
    content: "Caution:";
    font-weight:bold;    
}

.note-caution{
    background-color: #ffdddd;
    border-left: 6px solid #f44336;
}

.note-tip:before{
    content: "Tip:";
    font-weight:bold;    
}

.note-tip{
    background-color: #ddffdd;
    border-left: 6px solid #4CAF50;
}

.note-info:before{
    content: "Note:";
    font-weight:bold;    
}

.note-info{
    background-color: #e7f3fe;
    border-left: 6px solid #2196F3;
}

.note-warning:before{
    content: "Warning:";
    font-weight:bold;    
}

.note-warning{
    background-color: #ffffcc;
    border-left: 6px solid #ffeb3b;
}

/*************************************************/
/*                  T A B L E S                  */
/*************************************************/
table {
    border-collapse: collapse;
    width: auto;
    border: 1px solid #f8f8f8;
}

th, td{
    text-align: left;
    padding: 10px;
}

th{
    background: var(--active-color);
    color: white;
}

td.indent1{
    text-indent: 20px;
}

tr:nth-child(even) {
    background-color: #f8f8f8
}

/*************************************************/
/*                  I M A G E S                  */
/*************************************************/
.img-flexible{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

/*************************************************/
/*                     C O D E                   */
/*************************************************/
pre code{
    background-color: #1e1e1e;
    color: #d4d4d4;
    border: 1px solid #999;
    display: block;
    padding: 20px;
    padding-top: 0px;
    width: auto;
    max-height: 600px;
    overflow: auto;
    border-radius: 3px;
    font-size: 14px;
}

[class*="color-"]{
    font-family: Consolas, monospace;
}

.color-class{color: #43c9b0;}
.color-method{color: #dcdcaa;}
.color-field{color: #8cdcfe;}
.color-reserved-word{color: #499cd6;}
.color-reserved-word-pink{color: #c586c0;}
.color-string{color: #ce9178;}
.color-comment{color: #5e9955;}

.color-class-lt{color: #267f99;}
.color-method-lt{color: #795e26;}
.color-field-lt{color: #001080;}
.color-reserved-word-lt{color: #0000ff;}
.color-reserved-word-pink-lt{color: #c100db;}
.color-string-lt{color: #a31515;}
.color-comment-lt{color: #008000;}

[class*="changelog-"]
{
    background-color: #1e1e1e;
    color: #d4d4d4;
    border-radius: 3px;
    padding-left: 4px;
    padding-right: 4px;
}

.changelog-fixed{color: #a5c53c;}
.changelog-added{color: #2fcc71;}
.changelog-changed{color: #ece05a;}
.changelog-deprecated{color: #e67f23;}
.changelog-removed{color: #e64d3d;}