body{
    color:white;
    font-family:sans-serif;
    user-select: none;
    scrollbar-color: rgba(255,255,255,0.2) rgba(0,0,0,0.3);
}

.n_toggle_sidebar_button
{
    display:none!important;
}

[type=checkbox] {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

[type=checkbox] {
  margin:0px;
  width: 18px;
  height: 18px;
  border: solid 1px rgba(255,255,255,0.8);
  margin-right: 4px;
  position: relative;
  border-radius: 2px;    
  transform: translate(3px, 3px);
  background:rgba(0,0,0,0.3);
}

[type=checkbox]:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #b1c15e;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 2px;
}

button
{
    border:1px solid rgba(0,0,0,0.6);
    color:white;
    height:36px;
    border-radius:4px;
    font-size:16px;
    background:rgba(255,255,255,0.3);    
    padding-bottom:2px;
}

button:hover
{
     box-shadow: inset 0 0 0px 4px rgba(255,255,255,0.2);   
}

.n_bg{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background:  url('functions/noise.gif'), linear-gradient(120deg, rgb(87, 69, 60) 0%, rgb(17, 13, 10) 100%);    
    background-blend-mode:overlay;
}

.n_bg_dither{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background: 
    mix-blend-mode:overlay;
}

.n_container{
    display:block;
    position:absolute;
    left:48px;    
    right:48px;
    top:48px;
    bottom:48px;
    margin:auto;
    max-width:1500px;
    box-shadow: 0px 15px 40px -10px rgba(0,0,0,0.5);
    border-radius:10px;
    border:1px solid rgba(0,0,0,0);
    background:black;
}

.n_sidebar{
    display:block;
    height:100%;
    width:600px;
}

.n_list_panel{
    float:left;
    display:block;
    height:100%;
    width:50%;
    position:relative;
    
}

.n_list_header{
    position:absolute;
    width:100%;
    background:red;
    height:48px;
    line-height:48px;
    top:0px;
    background:#8c9755;

    box-sizing:border-box;
    border-top:1px solid rgba(255,255,255,0.5);
    border-bottom:1px solid black;
}

.n_list_header_round{
    border-radius:8px 0px 0px 0px;
}

.n_list_buttons_round{
       border-radius:0px 0px 0px 8px;
}

.n_list_body{
    background:purple;
    display:block;
    position:absolute;
    top:48px;
    width:100%;
    bottom:48px;
    box-sizing:border-box;
    border-right:1px solid rgba(0,0,0,0.5);
    
}

.n_list_categories
{
    background:#2f2d2d;
}

.n_list_notes
{
    background:#343231;
}

.n_list_buttons
{
    position:absolute;
    width:100%;
    height:48px;
    line-height:48px;
    bottom:0px;
    text-align:right;
    border-right:1px solid black;
    box-sizing:border-box;
}

.n_list_buttons button
{
    width:36px;
    margin-right:6px;
}

.n_items
{
    display:block;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    list-style:none;
    overflow-y:auto;
}

.n_items li
{
    display:block;
    width:100%;
    box-sizing: border-box;
    padding:10px 20px;
    cursor: default;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}


.n_items li:hover
{
    background:rgba(255,255,255,0.3);
}

.n_item_selected
{
    background:rgba(255,255,255,0.2);
}

.n_body
{
    display:block;
    position:absolute;
    left:600px;
    right:0px;
    top:0px;
    bottom:0px;
}

.n_body_header
{
    display:block;
    position:absolute;    
    height:48px;
    background:rgb(111, 123, 79);
    width:100%;
    padding-right:260px;
    padding-left:20px;
    box-sizing:border-box;
    line-height:48px;
    border-radius:0px 8px 0px 0px;
    border-top:1px solid rgba(255,255,255,0.5);
    border-bottom:1px solid black;
}

.n_body_footer
{
    display:block;
    position:absolute;    
    height:48px;
    background:rgb(55, 53, 53);
    width:100%;
    padding-left:20px;
    box-sizing:border-box;
    line-height:48px;
    bottom:0px;
    text-align:right;
    padding-right:6px;
    border-radius:0px 0px 8px 0px;
}

.n_logout
{
        position:absolute;
        left: 20px;
        bottom:-20px;
        display:block;
        font-size:12px;
}

.n_logout a
{
    color:rgba(255,255,255,0.3);
}

.n_inactive{
    opacity:50%;   
    pointer-events: none;
    user-select: none;
}

.toaster
{
    float:right;
    pointer-events: none;
    display:block;
    max-width:400px;
    width:100%;
    top:48px;
    bottom:48px;
    position:absolute;
    right:0px;
}

.toast_wrapper
{
    position:absolute;
    bottom:0px;
    width:100%;
}

.toast_wrapper div
{
    margin:10px 30px;
    padding:20px;
    border-radius:6px;
    border:1px solid black;
    transition-property:opacity;
    transition-duration: 0.3s;
    opacity:100%;
}

.toast_good
{
    background:#425e3a;
    box-shadow: inset 0 0 0px 6px rgba(0,255,0,0.2);   
}

.toast_bad
{
    background:#5e3a3a;
    box-shadow: inset 0 0 0px 6px rgba(255,0,0,0.2);   
}

.toast_hidden
{
    opacity:0%!important;
}

/*EasyMDE related stuff*/

.editor-preview-active pre
{
    background: #3e3a3a!important;
    padding: 2px;
    border-radius: 3px;   
}

.editor-preview-active code
{
    background: #3e3a3a!important;
    padding: 2px;
    border-radius: 3px;   
}

.cm-comment
{
    background: #3e3a3a!important;
    padding: 2px;
    border-radius: 3px;   
}


.editor-preview-active img
{
    max-width:100%;
}

.CodeMirror-cursor{
    border-left: 2px solid rgba(255,255,255,0.5);
    border-right: none;
    width: 0;
    
}

.CodeMirror-selected {
    background:#545353!important;
}



.CodeMirror
{
    background-color:#292828;
    color:#e6e3de;
}

.editor-preview a[href] 
{
    color:#5f93c1;
}

.CodeMirror div
{
    background-color:#292828;
    color:#e6e3de;
}

.EasyMDEContainer
{
    position:absolute;
    display:block;
    width:100%;
    bottom:48px;
    top:48px;
    user-select:text;
}

.CodeMirror
{
    position:absolute;
    display:block;
    width:100%;
    top:0px;
    bottom:0px;
    padding:20px!important;
    border:none!important;
    border-radius:0px!important;
}

.editor-preview
{
    padding:20px!important;
}

.editor-toolbar
{
    text-align:right;
    background:none;
    border:none;
    width:300px;
    right:0px;
    top:-48px;
    position:absolute;
}

.editor-statusbar
{
    position:absolute;
    height:48px;
    line-height:48px;
    box-sizing:border-box;
    padding:0px 8px;
    text-align:left;
    bottom:-48px;
    pointer-events: none;
}

.editor-toolbar button
{
    border:none;
    width:36px;
    height:36px;
}

.editor-toolbar button:hover
{
    background:rgba(255,255,255,0.4);
}

.editor-toolbar button.active
{
    background:rgba(255,255,255,0.6);
}

.editor-toolbar::before
{
    margin-bottom:6px;
}

.upload-image
{
    display:none!important;
}
.autosave
{
    display:none!important;
}

.disabled-for-preview button:not(.no-disable)
{
    opacity:10%!important;
}

.editor-preview table
{
     border-collapse: collapse;   
}



.editor-preview table th
{
    border:0.5px solid rgba(255,255,255,0.5);
    margin:0px;
    background:rgba(255,255,255, 0.2);
    font-weight:normal;
}

.editor-preview table th
{
    padding:5px 10px;
}

.editor-preview table td
{
    padding:5px 10px;
}

.editor-preview table td
{
    border:0.5px solid rgba(255,255,255,0.2);
    margin:0px;
    background:rgba(0,0,0,0.2);
}

.editor-preview table tr:nth-child(odd)
{
    background:rgba(0,0,0,0.2);
}

@media (max-width: 1200px)
{
    .n_body
    {
        left:400px;
    }
    
    .n_sidebar
    {
        width:400px;
    }
    
}

@media (max-width: 1000px)
{
    .n_container{
        left:0px;
        right:0px;
        top:0px;
        bottom:0px;
        border:none;
        border-radius:0px;
    }
    .n_list_buttons_round
    {
        border-radius:0px;
    }
    
    .n_body_header
    {
        height:96px;
        padding-right:20px;
        text-align:right;
        border-radius:0px;
    }
    .n_body_footer
    {
        border-radius:0px;
    }
    .EasyMDEContainer
    {
        top:96px;
        bottom:48px;
        height:auto;
    }
    .n_body
    {
        left:0px;
    }
    .n_sidebar
    {
        width:100%;
        max-width:600px;
        transition-property:margin-left;
        transition-duration: 0.3s;
    }
    
    .foldaway
    {
        margin-left:-620px;
    }
    
    .n_toggle_sidebar_button
    {
        display:block!important;
        position:absolute;
        top:0px;
        background:rgba(255,255,255,0.3);
        width:34px;
        height:34px;
        border-radius:4px;
        text-align:center;
        margin:6px;
    }
    
    .n_list_header_round
    {
        border-radius:0px;
    }
    
    .editor-statusbar
    {
        display:none!important;
    }
    
    .n_logout{
        bottom:16px;
    }
}