main {
    width: 100%;
    display: flex ;
    align-items: stretch ;
    flex-flow: row wrap ;
    margin: 0;
}
.svg-icon-arrow {
    display: block;
    z-index: 2;
    width: 18px;
    height: 18px;
    &:hover {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
        transition: 0.5s;
    }
}
.note-list-container, .balance-container {
    position: relative;
    order: 1;
    z-index: 1;
    visibility: hidden;
    //background: #fbfafa;
    padding: 4px;
    border-left: 1px #f9f9f9 solid;
    max-width: 320px;
    .list-note-preview {
        li {
            height: 4.5rem;
        }
        h4 {
            @include fontsize(15);
        }
    }
    .note-preview {
        overflow: hidden;
        white-space: nowrap;
    }
}
.balance-container {
    order: 3;
    min-width: 320px;
}
.balance-container-left {
    order: 1;
    min-width: 320px;
}
.list-notebook {

}
.icon-notebook {
    display: inline-block;
    content: " ";
    width: 24px;
    height: 24px;
    background: url('/media/moleskine.svg'); 
}
.list-note-preview {
    padding: 0;
    margin: 0;
    list-style-type: none;
    li {
        @include fontsize(13);
        padding: 8px 0 12px;
        min-height: 4.5rem;
        box-shadow: 0 -1px 0 #e7e2ee inset;
        margin: 0;
        padding: 6px 12px;
        &:hover {
            background: #f7f7f7;
        }
        a {
            color: lighten($body_font_color, 5);
            text-decoration: none;
        }
    }
    h4 {
        @include fontsize(16);
        margin: 0;
        padding-bottom: 8px;
        font-weight: normal;
        overflow: hidden;
        white-space: nowrap;
        color: $body_font_color;
    }
    .notebook {
        padding-right: 8px;
        &:after {
            display: inline-block;
            position: relative;
            top: 3px;
            left: 3px;
            content: " ";
            height: 14px;
            width: 1px;
            background-color: $body_font_light;
        }
    }
    .note-preview {
        margin-bottom: 16px;
        margin-right: 6px;
    }
}

.color-box {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 4px;
}
.note-title {
    @include fontsize(26);
}
.note-header {
    @extend %clearfix;
}
.note-header-right {
    text-align: right;
    float: right;
    width: 50%;
}
.note-time, .note-url {
    text-align: right;
    @include fancy-sans;
    @include fontsize(12);
    margin-bottom: 0;
    margin-top: 0;
    text-transform: uppercase;
}
.note-url {
    margin-top: 0;
}
.note-header {
    margin-top: 1rem;
    margin-bottom: 3rem;
}
.edit-btn-wrapper{
    text-align: right;
}
.note-header-left {
    @include fancy-sans;
    @include fontsize(13);
    float: left;
    width: 50%;
    .label {
        color: $body_font_light;
        margin-right: 4px;
    }
    ul {
        display: inline-block;
        padding: 0;
        margin-bottom: 0;
    }
    li { 
        margin-right: 4px;
        display: inline-block;
    }
    a {
        text-decoration: none;
        color: darken($body_font_light, 5);;
        &:hover {
            color: darken($body_font_light, 25);
        }
    }
    .notebook {
        width: auto; 
        display: inline;
        margin-right: 1rem;
    }
    .tags {
        display: flex;
        input {
            width: 200%;
        }
    }
}
.notebook {
    display: block;
}
.note-container {
    max-width: 60%;
    position: relative;
    flex:1;
    order: 2;
    background: #fff;
    z-index: 4;
}
#note-body {
    @include fancy-sans;
    @include fontsize(14);
}
.inactive {
    .ql-editor {
        padding:0;
        line-height:inherit;
        p {
            padding:inherit;
            margin-bottom:10px;
        }
    }
    .ql-toolbar {
        display:none;
    }
    .ql-container.ql-snow {
        border:none;
        font-family:inherit;
        font-size:inherit;
    }
}
#user-menu, #notebooks-menu {
    display: none;
}
.active {
    display: block !important;
}
.notebook-colored {
    border-left: 3px solid #fff;
}
.notebook-title {
    @include fontsize(24);
    @include fancy-sans;
}
.flex-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    @extend %clearfix;
}
#nb-edit-form {
    width: 100%;
}
.color-picker-fieldset {
    display: block;
    margin-right: .5rem;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid $body_font_light;
    #id_color_rgb {
        display: block;
        text-indent: -1000em;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
    }
}
/*

Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>

*/

.hljs, pre.ql-syntax {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #002b36 !important;
  color: #839496;
}

.hljs-comment,
.hljs-quote {
  color: #586e75;
}

/* Solarized Green */
.hljs-keyword,
.hljs-selector-tag,
.hljs-addition {
  color: #859900;
}

/* Solarized Cyan */
.hljs-number,
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-literal,
.hljs-doctag,
.hljs-regexp {
  color: #2aa198;
}

/* Solarized Blue */
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: #268bd2;
}

/* Solarized Yellow */
.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-class .hljs-title,
.hljs-type {
  color: #b58900;
}

/* Solarized Orange */
.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-link {
  color: #cb4b16;
}

/* Solarized Red */
.hljs-built_in,
.hljs-deletion {
  color: #dc322f;
}

.hljs-formula {
  background: #073642;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}