body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: 14px;
    font-weight: 100;
    line-height: 16px;
    overflow: scroll;

    padding: 0px;
    margin: 0px;


}

.body-theme-dark {
    background-color: #1e1e1e;
    color:#e6e6e6;
}
.body-theme-light {
    background-color: #fff;
    color:#000;
}


textarea {
    padding: 0px;
    margin: 0px;

    border: none;
    resize: none;
    overflow: auto;
    outline: none;

    background-color: transparent;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    width: 100%;
    height: 500px;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 100;
    line-height: 16px;
}

h1 {
    padding: 0px;
    margin: 0px;
    font-size: 24px;
    font-weight: 500;
    line-height: 50px;
}

h2 {
    font-size: 18px;
    font-weight: 200;
    line-height: 26px;

    height: 26px;
}

a {
    text-decoration: none;
    cursor: pointer;
}

#app {
    width: 100%;
}

#header {
    height: 40px;
    padding: 10px;

    position: fixed;

    width: 100%;
}

#intro {
    text-align: center;
    width: 100%;
    padding-top: 70px;
}


#logo {
    display: inline-block;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxLjQxNDIxOyI+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjMwNjYwMywwLDAsMC4zMDY2MDMsLTE0LjQ3NSwtMTUuNzI1MikiPgogICAgICAgIDxwYXRoIGQ9Ik02OC41LDI1Ni43NjlDNjguNSwzNzAuNDY5IDE1Mi42LDQ0My40IDI1Niw0NDMuNEMzNTkuNCw0NDMuNCA0NDMuNSwzNzAuNTY5IDQ0My41LDI1Ni43NjlMNDQzLjUsMjM4LjA2OUw2OC41LDIzOC4wNjlMNjguNSwyNTYuNzY5WiIgc3R5bGU9ImZpbGw6cmdiKDcyLDEzMywyMzcpO2ZpbGwtcnVsZTpub256ZXJvOyIvPgogICAgPC9nPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMC4zMDY2MDMsMCwwLDAuMzA2NjAzLC0xNC40NzUsLTguNzI1MjMpIj4KICAgICAgICA8cGF0aCBkPSJNNDM4LDEwMC41QzQ0NS4zLDkzLjIgNDQ1LjMsODEuMyA0MzgsNzRDNDMwLjcsNjYuNyA0MTguOCw2Ni43IDQxMS41LDc0TDMxMi4zLDE4MUwzNjguNSwxODFMNDM4LDEwMC41WiIgc3R5bGU9ImZpbGw6cmdiKDcyLDEzMywyMzcpO2ZpbGwtcnVsZTpub256ZXJvOyIvPgogICAgPC9nPgo8L3N2Zz4K');
    height: 28px;
    width: 28px;
    background-repeat: no-repeat;
}

#menu {
    font-size: 13px;
    font-weight: 100;
    line-height: 16px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 20px;
}

#menu a {
    padding-left: 5px;
}

a {
    color: #4885ed;
}


#status {
    display: none;
}



#grid-container {
    /*display: grid;*/
    /*grid-template-columns: repeat(32, 520px);*/
    /*grid-template-rows: repeat(32, 570px);*/
}

.grid-item {
    width: 100%;
    height: 560px;
    padding-right: 10px;
    padding-left: 10px;
    overflow: hidden;
    border-bottom: 1px solid rgba(204, 204, 204, 0.6);
    box-sizing: border-box;
}

.color {
    color: #4885ed;
}

.hidden {
    display: none;
}

.note {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 100;
    line-height: 16px;
    overflow: hidden;
}


.btn {
    display: block;
    cursor: pointer;
    height: 20px;
    width: 20px;
    color: #4885ed;
}
.btn-menu-light {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iMTAwcHQiIGhlaWdodD0iMTAwcHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMTYgMTVjLTMuMzEyNSAwLTYgMi42ODc1LTYgNnMyLjY4NzUgNiA2IDZoNjhjMy4zMTI1IDAgNi0yLjY4NzUgNi02cy0yLjY4NzUtNi02LTZ6bTAgMjljLTMuMzEyNSAwLTYgMi42ODc1LTYgNnMyLjY4NzUgNiA2IDZoNjhjMy4zMTI1IDAgNi0yLjY4NzUgNi02cy0yLjY4NzUtNi02LTZ6bTAgMjljLTMuMzEyNSAwLTYgMi42ODc1LTYgNnMyLjY4NzUgNiA2IDZoNjhjMy4zMTI1IDAgNi0yLjY4NzUgNi02cy0yLjY4NzUtNi02LTZ6Ii8+Cjwvc3ZnPgo=');
}
.btn-menu-dark {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iMTAwcHQiIGhlaWdodD0iMTAwcHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMTYgMTVjLTMuMzEyNSAwLTYgMi42ODc1LTYgNnMyLjY4NzUgNiA2IDZoNjhjMy4zMTI1IDAgNi0yLjY4NzUgNi02cy0yLjY4NzUtNi02LTZ6bTAgMjljLTMuMzEyNSAwLTYgMi42ODc1LTYgNnMyLjY4NzUgNiA2IDZoNjhjMy4zMTI1IDAgNi0yLjY4NzUgNi02cy0yLjY4NzUtNi02LTZ6bTAgMjljLTMuMzEyNSAwLTYgMi42ODc1LTYgNnMyLjY4NzUgNiA2IDZoNjhjMy4zMTI1IDAgNi0yLjY4NzUgNi02cy0yLjY4NzUtNi02LTZ6Ii8+Cjwvc3ZnPgo=');
}



.book-header {
    height: 30px;
}
.book-summary {
    position: fixed;
    top: 100px;
    width: 300px;
    height: calc(100% - 100px);
    overflow-y: scroll;
    overflow-x: hidden;
}
.summary {
    list-style-type: none;
}
.book-body {
    float: right;
    width: 100%;
}







/* Scroll Bars */
html {
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
        display: none;
}
    




























@media only screen and (min-width: 813px) {
    /* For desktop: */
    .grid-item {
        float: left;
        width: 33.33333%;
        border-right: 1px solid rgba(204, 204, 204, 0.6);
    }

    .grid-item:nth-child(3n) {
        border-right: 0px;
    }

    #status {
        font-size: 13px;
        font-weight: 100;
        line-height: 16px;

        position: fixed;
        bottom: 15px;
        right: 15px;
        text-align: right;

        display: block;
    }


}