.color{
     height: .5rem;   
}
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.6rem;
        }
        h4 {
            @include fontsize(18);
        }
    }
    .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;
}
.list-note-preview {
    padding: 0;
    margin: 0;
    list-style-type: none;
    li {
        @include fontsize(13);
        padding: 16px 0 16px 16px;
        min-height: 4.5rem;
        box-shadow: 0 -1px 0 #e7e2ee inset;
        margin: 0;
        &:hover {
            background: #f7f7f7;
        }
        a {
            color: lighten($body_font_color, 5);
            text-decoration: none;
        }
    }
    h4 {
        @include fontsize(18);
        margin: 0;
        padding-bottom: 8px;
        font-weight: normal;
        overflow: hidden;
        white-space: nowrap;
        color: #2a2a2a;
    }
    .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;
}
.dropmenu .color-box {
    margin-right: 5px;
    position: relative;
    top: -1px;
}
.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%;
        }
        a { margin-right: .25rem;}
    }
}
.notebook {
    display: block;
}
.note-container {
    max-width: 70%;
    position: relative;
    flex:1;
    order: 2;
    background: #fff;
    z-index: 4;
    margin: 0 auto;
}
#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, #notebook-drop-menu, #tags-drop-menu {
    display: none;
}
.active {
    display: block !important;
}
.notebook-colored {
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
    border-left: 3px solid rgba(255, 255, 255, .5);
}
.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, .input-color-rgb {
        display: block;
        text-indent: -1000em;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
    }
    .input-color-rgb {
        display: inline;
    }
}
#nb-create-form {
    .color-picker-fieldset {
        width: 30px;
        height: 30px;
        label { 
            top: -25px;   
            width: 140px;
            left: -5px;
        }
    }
    .nb-name {
        margin: 1rem 2rem 1rem 0;
        width: 90%;
    }
}
.small-circle {
    width: 18px;
    height: 18px;
    margin-left: 6px;
}
.small-circle.plus:before {
    width: 2px;
    margin: 5px auto;
}
.small-circle.plus:after{
    margin: auto 5px;
    width: 8px;
}
.small-circle.push-top {
    margin-top: 24px;
}
.note-container .flex-wrapper .hed-small {
    flex-grow: 1;
}
#list-header {
    margin-top: 10px;
}
.choices__list .nb-name {
    @include fontsize(14);
    margin: 0 .25rem;
}

.url-field {
    input {
        @include fontsize(16);
        color: $body_font_color;
    }
}
.note-hed-wrapper {
    margin-bottom: 1.5rem;
}
.note-hed {
    @include fontsize(22);
    margin-bottom: 0;
}
.note-subhed {
    @include fontsize(16);
    margin-top: 0;
}

.nb-list {
}
.nb-list-item {
    @extend %clearfix;
    list-style-type: none;
    padding: .5rem 1rem;
    margin: 1rem 1rem 1rem 0;
    border: 1px #e7e2ee solid;
    border-radius: 4px;
    a {
        text-decoration: none;
        color: $body_font_color;
    }
    p {
        margin: 0;
        @include fontsize(13);
        @include fancy_sans_bold;
        text-transform: uppercase;

    }
    ul {
        list-style-type: none;
        padding: 0;
        margin-left: .25rem;
        margin-top: .5rem;
        position: relative;
        overflow-y: hidden;
        .more { 
            position: absolute; 
            bottom: 0; 
            left: 0;
            width: 100%; 
            margin: 0 ; 
            padding: 15px 0 0 0; 
            /* "transparent" only works here because == rgba(0,0,0,0) */
            background-image: linear-gradient(to bottom, transparent, white);
        }
        li {
            
        }
    }
    .nb-name {
        flex-grow: 1;
        margin: 0;
        a {
            line-height: 2.3;
            @include fontsize(22);
        }
    }
    .tags {
        @include fontsize(13);
        @include fancy_sans;
        text-transform: uppercase;
        margin: 1rem 0 0 .25rem;
        ul {
            @include fancy_sans;
            text-transform: none;
        }

    }
    .trash {
        margin-top: 4px;
        color: #333;
    }
}
.color-picker-inner {
    width: 100%;
    height: 100%;
}

.slideup, .slidedown {
    height: 120px;
    overflow-y: hidden;
    -webkit-transition: height .5s ease-in;
    -moz-transition: height .5s ease-in;
    -o-transition: height .5s ease-in;
    transition: height .5s ease-in;
}
.slidedown {            
    height: 220px;                    
    max-height: 260px;                    
}    
.newnnbslideup, .newnbslidedown {
    height: 0px;
    overflow-y: hidden;
    -webkit-transition: height .5s ease-in;
    -moz-transition: height .5s ease-in;
    -o-transition: height .5s ease-in;
    transition: height .5s ease-in;
}
.newnbslidedown {            
    height: 220px;                    
    max-height: 260px;                    
}    

.dropmenu-search {
    margin: 0;
    padding: 0;
    .dropmenu-search-wrapper {
        border-top: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
        padding: 5px;
    }
    input {
        @include fontsize(16);
        padding: 4px;
        width: auto;
        border: none;
    }
    .dropmenu-list {
        padding: 3px;
        margin-top: 0;
        max-height: 300px;
        overflow-x: auto;
    }
    a {
        display: block;
        text-decoration: none;
        padding: 4px 6px;
        &:hover {
            background: $link_color;
        }
    }
}

.messages {
    @include fancy-sans-bold;
    @include fontsize(16);
    list-style-type: none;
    color: $link_color;
    font-weight: 600;
}
.trash {
    text-indent: -9999em;
    width: 30px;
    color: $link_color;
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' viewBox='0 -256 1792 1792' id='svg3741' version='1.1' inkscape:version='0.48.3.1 r9886' width='100%25' height='100%25' sodipodi:docname='trash_font_awesome.svg'%3E%3Cmetadata id='metadata3751'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs3749' /%3E%3Csodipodi:namedview pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='640' inkscape:window-height='480' id='namedview3747' showgrid='false' inkscape:zoom='0.13169643' inkscape:cx='896' inkscape:cy='896' inkscape:window-x='0' inkscape:window-y='25' inkscape:window-maximized='0' inkscape:current-layer='svg3741' /%3E%3Cg transform='matrix(1,0,0,-1,197.42373,1255.0508)' id='g3743'%3E%3Cpath d='M 512,800 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 256,0 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 256,0 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z M 1152,76 v 948 H 256 V 76 Q 256,54 263,35.5 270,17 277.5,8.5 285,0 288,0 h 832 q 3,0 10.5,8.5 7.5,8.5 14.5,27 7,18.5 7,40.5 z M 480,1152 h 448 l -48,117 q -7,9 -17,11 H 546 q -10,-2 -17,-11 z m 928,-32 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 h -96 V 76 q 0,-83 -47,-143.5 -47,-60.5 -113,-60.5 H 288 q -66,0 -113,58.5 Q 128,-11 128,72 v 952 H 32 q -14,0 -23,9 -9,9 -9,23 v 64 q 0,14 9,23 9,9 23,9 h 309 l 70,167 q 15,37 54,63 39,26 79,26 h 320 q 40,0 79,-26 39,-26 54,-63 l 70,-167 h 309 q 14,0 23,-9 9,-9 9,-23 z' id='path3745' inkscape:connector-curvature='0' style='fill:%23FC5D2B' /%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
    &:hover {
    background: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' viewBox='0 -256 1792 1792' id='svg3741' version='1.1' inkscape:version='0.48.3.1 r9886' width='100%25' height='100%25' sodipodi:docname='trash_font_awesome.svg'%3E%3Cmetadata id='metadata3751'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs3749' /%3E%3Csodipodi:namedview pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='640' inkscape:window-height='480' id='namedview3747' showgrid='false' inkscape:zoom='0.13169643' inkscape:cx='896' inkscape:cy='896' inkscape:window-x='0' inkscape:window-y='25' inkscape:window-maximized='0' inkscape:current-layer='svg3741' /%3E%3Cg transform='matrix(1,0,0,-1,197.42373,1255.0508)' id='g3743'%3E%3Cpath d='M 512,800 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 256,0 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 256,0 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z M 1152,76 v 948 H 256 V 76 Q 256,54 263,35.5 270,17 277.5,8.5 285,0 288,0 h 832 q 3,0 10.5,8.5 7.5,8.5 14.5,27 7,18.5 7,40.5 z M 480,1152 h 448 l -48,117 q -7,9 -17,11 H 546 q -10,-2 -17,-11 z m 928,-32 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 h -96 V 76 q 0,-83 -47,-143.5 -47,-60.5 -113,-60.5 H 288 q -66,0 -113,58.5 Q 128,-11 128,72 v 952 H 32 q -14,0 -23,9 -9,9 -9,23 v 64 q 0,14 9,23 9,9 23,9 h 309 l 70,167 q 15,37 54,63 39,26 79,26 h 320 q 40,0 79,-26 39,-26 54,-63 l 70,-167 h 309 q 14,0 23,-9 9,-9 9,-23 z' id='path3745' inkscape:connector-curvature='0' style='fill:%23FC5D2B' /%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
    }
}

.loading {
    #close-btn {
        display: none;
    }
}
.ql-snow .ql-editor blockquote {
    border-left: none !important;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: none !important;
    padding: 1rem .5rem;
}
.ql-container {
    min-height: 300px;
}

/*

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;
}