/* For styling the Joplin app (except the HTML-ized markdown, which is defined in `userstyle.css`) */
/* designed by uxamanda (https://discourse.joplinapp.org/u/uxamanda). latest version https://github.com/amandamcg/joplin-theme */
:root {
    --white: #e3e3e3;
    --dark-white: #EEF0EA;
    --light-grey: #A3A79F;
    --grey: #575856;
    --dark-grey: #272728;
    --darker-grey: #1D2024;
    --black: #131517;
    --base-size-1: 1px;
    --base-size-4: 4px;
    --base-size-8: 8px;
    --base-size-10: 10px;
    --base-size-13: 13px;
    --base-size-18: 18px;
    --base-size-24: 24px;
    --base-size-32: 32px;
    --base-size-40: 40px;
    --base-size-272: 272px;
    --z-toc: 99;
    --font-weight-light: 200;
    --font-weight-base: 400;
    --font-weight-bold: 500;
    --font-sans: "IBM Plex Sans";
    --font-mono: "IBM Plex Mono";
    --primary: #0097DB;
    --secondary: #00dbcc;
    --font-line-height: 1.4em;
    --font-size: var(--base-size-13);
    --icon-size: var(--font-size);
}

* {
    font-family: var(--font-sans) !important;
    font-weight: var(--font-weight-base) !important;
    line-height: var(--font-line-height) !important;
}

.fa, .far, .fas {
    font-weight: 900 !important;
    font-family: "Font Awesome 5 Free" !important;
    font-size: var(--icon-size) !important;
}

body {
    background-color: var(--darker-grey) !important;
}

.noteTextViewer {
    border-left: var(--base-size-1) solid var(--dark-grey) !important;
}

#react-root>div>div>div:last-child {
    background-color: var(--black);
    border-left: none !important;
}

#react-root>div>div>div:last-child>div>div {
    border-bottom: var(--base-size-1) solid var(--dark-grey) !important;
}

#react-root>div>div>div:last-child>div>div>span {
    padding: 0 18px 4px 4px !important;
}

#react-root>div>div>div:last-child>div>div>div .editor-toolbar {
    border-bottom: var(--base-size-1) solid var(--dark-grey) !important;
    margin-bottom: 0 !important;
    border-top: none !important;
}

#react-root>div>div>div:last-child>div>div .editor-toolbar {
    border-bottom: none !important;
}

.editor-toolbar span:last-of-type {
    width: 100% !important;
    /* makes the last set of options in the toolbar aligned-right */
}

#react-root>div>div>div:last-child>div>div>div>div:last-child>div:last-child {
    border: none !important;
}

/* markdown */
.ace_text-layer {
    padding: 3%;
}

.ace_content {
    background-color: var(--black) !important;
}

.ace_editor div, .ace_editor span {
    font-family: var(--font-mono) !important;
    font-weight: --font-weight-base;
    color: var(--light-grey);
}

.ace_heading {
    color: var(--white) !important;
}

.ace_variable {
    color: var(--white) !important;
}

.ace_list {
    color: var(--light-grey) !important;
}

.ace_string {
    color: var(--primary) !important;
}

.ace_cursor {
    border-left: var(--base-size-1) solid var(--primary) !important;
}

/* prevent cursor from blinking */
/* https://discourse.joplinapp.org/t/share-your-css/1730/17 */
.ace_cursor-layer:not(.ace_hidden-cursors) .ace_cursor {
    opacity: 1 !important;
}

/* gui */
.side-bar {
    background-color: var(--darker-grey) !important;
    opacity: 0.8;
}

.side-bar .folders {}

.side-bar .folders .list-item, .side-bar div, .side-bar span {
    color: var(--white) !important;
    font-weight: var(--font-weight-base) !important;
    font-size: var(--font-size) !important;
    margin-bottom: var(--base-size-1);
}

.side-bar div div {
    font-size: var(--font-size) !important;
}

/* making icons the same width so text aligns */
.side-bar .fas:first-of-type {
    width: var(--base-size-18)
}

.list-item div {
    margin-left: auto !important;
    padding-right: var(--base-size-13) !important;
    opacity: 0.3 !important;
}

.synchronize-button {}

.note-list {
    background-color: var(--darker-grey);
    padding: var(--base-size-8) 0;
    opacity: 0.7;
}

.note-list input[type="checkbox"i] {
    opacity: 0.5 !important;
}

.note-list div {
    border-bottom: 0 !important;
}

.note-list input[type="checkbox"i] {
    margin-right: 1em !important;
}

.note-list a.list-item span, .tags .list-item {
    /* font-family: "IBM Plex Mono" !important; */
    /* font-size: 12px !important; */
    color: var(--light-grey) !important;
}

.tag-list {
    order: 4;
}

/* icons */
.fa, .far, .fas {
    color: var(--grey) !important;
    padding-right: var(--base-size-4);
}

#react-root>div {
    background-color: var(--dark-grey) !important;
}

#react-root div div div:last-child div input {
    margin: 0 !important;
    margin-right: var(--base-size-18) !important;
    margin-bottom: 4px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: var(--font-size) !important;
    font-family: var(--font-mono);
    font-weight: var(--font-weight-light);
    background-color: var(--darker-grey) !important
}

.editor-toolbar {
    order: 2
}

.editor-toolbar .button {
    height: var(--base-size-40)
}

.editor-toolbar .button, .header .button {
    border: 0 !important;
}

.editor-toolbar .button i {
    font-size: var(--icon-size) !important;
}

.editor-toolbar .fa, .editor-toolbar .fas {
    padding-right: 0;
}

.header {
    border-bottom: var(--base-size-1) solid var(--dark-grey) !important;
}

.header .title {
    color: var(--grey);
}

/* toggle sidebar */
.header>*:nth-child(1) {
    order: 1
}

/* toggle notebooks */
.header>*:nth-child(2) {
    order: 2
}

/* new note */
.header>*:nth-child(3) {
    order: 5
}

/* new todo */
.header>*:nth-child(4) {
    order: 6
}

/* new notebook */
.header>*:nth-child(5) {
    order: 4;
    margin-left: var(--base-size-24);
}

/* layout */
.header>*:nth-child(6) {
    order: 6;
    background-color: transparent !important;
    padding: 1px 6px !important;
    margin-left: var(--base-size-24);
}

/* layout */
.header>*:nth-child(7) {
    order: 7
}

/* search */
.header>*:nth-child(8) {
    margin-left: auto;
    order: 8
}

.header>*:nth-child(7) input, .header>*:nth-child(8) input {
    margin-right: var(--base-size-4) !important;
    margin-left: auto !important;
    width: var(--base-size-272);
}

.header>*:nth-child(7) a, .header>*:nth-child(8) a {
    display: none
}

input {
    border-radius: var(--base-size-4) !important;
    border: 0px !important;
    background-color: var(--dark-grey) !important;
    border: var(--base-size-1) solid var(--darker-grey) !important;
    opacity: 0.8;
}

input:focus {
    outline: none;
    border: var(--base-size-1) solid var(--primary) !important;
}

.header *:nth-child(7) a {
    display: none;
}

.header .title {
    display: none !important;
}

.folders i.fa.fa-minus-square, .folders i.fa.fa-plus-square {
    padding-right: 3px !important;
}

.folders .list-item-container {
    margin: 0 !important;
}

.note-list .list-item-container:hover, .folders .list-item-container:hover {
    background-color: var(--grey) !important;
}

.folders a.list-item {
    padding-left: var(--base-size-8);
    margin: 0 !important;
}

.side-bar>div:last-child div {
    font-family: var(--font-mono) !important;
    font-size: calc(var(--font-size)/1.3) !important;
    padding: 2px;
}

.side-bar>div:last-child {
    padding: var(--base-size-4) !important;
    font-family: var(--font-mono) !important;
    border-top: var(--base-size-1) solid var(--black);
}

.synchronize-button {
    border: none !important;
    background: var(--dark-grey);
    border-radius: var(--base-size-4) !important;
    padding: var(--base-size-13) !important;
    color: var(--light-grey) !important;
    text-transform: uppercase;
    font-family: var(--font-mono) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 1px;
}

/* code mirror */
.cm-s-material-darker.CodeMirror {
    background-color: var(--black) !important;
    color: var(--light-grey) !important
}

.cm-s-material-darker .cm-variable-2 {
    color: var(--light-grey) !important
}

.cm-s-material-darker .cm-string {
    color: var(--primary) !important
}

.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4 {
    color: var(--dark-white) !important
}