/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
/*****************************************************************************
 * Styling for Dark Theme                                                    *
 *                                                                           *
 * For styling the entire Joplin app (except the rendered Markdown,          *
 * which is defined in `userstyle.css`)                                      *
 *****************************************************************************/

:root {
	--editor-heading-color:            #569CD6;
	--editor-heading-font-weight:      bold;                     /* not used */
	--editor-heading-font-size:        1.1em;                    /* not used */
	--editor-code-color:               greenyellow;
	--editor-text-in-brackets-color:   #f9ee98;                 /* yellowish */
	--editor-text-in-parens-color:     #dddddd;                 /* lightgrey */
	--editor-strong-color:             #2c78b6;
	--editor-emphasis-color:           #2c78b6;
	--editor-emphasis-font-style:      italic;
	--editor-list-element-color:       deepskyblue;
	--editor-checkbox-color:           lightgrey;
	--editor-checkbox-checked-color:   #FFCB6B;                    /* orange */
	--editor-selected-text-bgcolor:    #0663d3;                      /* blue */
}
/* not used: to take effect the proper section must be uncommented */

/*------ Editor: Headings ---------------------------------------------------*/
.cm-header {
	color: var(--editor-heading-color) !important;
}
/*---------------------------------------------------------------------------*/

/*------ Editor: inline code and codeblocks ---------------------------------*/
pre.CodeMirror-line span[role="presentation"] span.cm-comment {
	color: var(--editor-code-color) !important;
}
/*---------------------------------------------------------------------------*/

/*------ Editor: text in brackets [ ] ---------------------------------------*/
.cm-link-text {
	color: var(--editor-text-in-brackets-color) !important;
}
/*---------------------------------------------------------------------------*/

/*------ Editor: text/link in parens ( ) ------------  ----------------------*/
.cm-string.cm-url  {
	color: var(--editor-text-in-parens-color) !important;
}
/*---------------------------------------------------------------------------*/

/*------ Editor: strong -----------------------------------------------------*/
.cm-strong {
	color: var(--editor-strong-color) !important;
}
/*---------------------------------------------------------------------------*/

/*------ Editor: italics ----------------------------------------------------*/
.cm-em {
	color: var(--editor-emphasis-color) !important;
}
/*---------------------------------------------------------------------------*/

/*------ Editor: list elements and checkbox elements ------------------------*/
.cm-variable-2, .cm-variable-3, .cm-keyword {
	color: var(--editor-list-element-color) !important;
}
/*---------------------------------------------------------------------------*/

/*------ Editor: checkbox [ ] and [x] ---------------------------------------*/
.cm-meta {
	color: var(--editor-checkbox-checked-color) !important;
}
.cm-property {
	color: var(--editor-checkbox-checked-color) !important;
}
/*---------------------------------------------------------------------------*/

/*------ Editor: selected text background color -----------------------------*/
.CodeMirror-selected {
	background: var(--editor-selected-text-bgcolor) !important;
}
/*---------------------------------------------------------------------------*/

/*------ Notebook and note list panes: Dim items ----------------------------*/
/*
a.list-item {
	color: #A3A79F !important;
}

.fas.fa-caret-right, .fas.fa-caret-down {
	color: #575856 !important;
}

.note-list input[type="checkbox"i] {
	opacity: .5;
}
*/
/*---------------------------------------------------------------------------*/

/*------ Notebook pane: use lines for notebook tree -------------------------*/
/*
.folders i.fas.fa-caret-right, .folders i.fas.fa-caret-down {
	padding-right: 3px !important;
}

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

.folders a.list-item {
	border-left: 1px solid #575856 !important;
	padding-left: 9px;
	margin: 0 !important;
}
*/
/*---------------------------------------------------------------------------*/

/*------ Remove New notebook button -----------------------------------------*/
/*
#react-root > div > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-sideBar > div > div > div:nth-child(1) > div:nth-child(1) > button {
	display: none;
}
*/
/*---------------------------------------------------------------------------*/

/*------ Remove New to-do button --------------------------------------------*/
/*
button[title="New to-do"] {
	display: none;
}
*/
/*---------------------------------------------------------------------------*/

/*------ Remove New note button ---------------------------------------------*/
/*
button[title="New note"] {
	display: none;
}
*/
/*---------------------------------------------------------------------------*/

/*------ Remove Code View button --------------------------------------------*/
/*
div.editor-toolbar div button {
	display: none !important;
}
*/
/*---------------------------------------------------------------------------*/

/*------ Remove Spellcheck button -------------------------------------------*/
/*
a[title="Spell checker"] {
	display: none;
}
*/
/*---------------------------------------------------------------------------*/

/*------ Input fields: Search (global, local), Note Title -------------------*/
/* .header input { */
input {
	border-radius: 14px !important;
	border: 1px solid rgb(85, 85, 85);
	outline: none;
	/*
	background-color: #888888 !important;
	*/
}
/*---------------------------------------------------------------------------*/

/*------ Attachment pane: make first 2 columns easier to read ---------------*/
#react-root > div > div > div:nth-child(1) > div:nth-child(2) > table > tbody > tr > td.titleCell,
#react-root > div > div > div:nth-child(1) > div:nth-child(2) > table > tbody > tr > td:nth-child(2) {
	font-size: unset !important;
}
/*---------------------------------------------------------------------------*/

/*------ Sync button --------------------------------------------------------*/
/* Add button background, add rounded corners */
div.side-bar > div > button {
	background-color: #25282E !important;
	border-radius: 16px !important;
}

/* Outline colour change on hover */
div.side-bar > div > button:hover {
	border: 1px solid #3B74DF !important;
	border-radius: 16px !important;
}

/* Prevent button text color changing on hover */
	div.side-bar > div > button > span {
	color: #FFFFFF !important;
}
/*---------------------------------------------------------------------------*/

/*------ Toolbar buttons ----------------------------------------------------*/
.icon-code:before {
	display: block;
	content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='16' height='16'><path fill-rule='evenodd' d='M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z' fill='white'></path></svg>");
	background-size: 18px 18px;
	height: 18px;
	width: 18px;
	padding-left: 3px;
}

.icon-numbered-list:before {
	display: block;
	content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16' width='16'><path d='M2.003 2.5a.5.5 0 00-.723-.447l-1.003.5a.5.5 0 00.446.895l.28-.14V6H.5a.5.5 0 000 1h2.006a.5.5 0 100-1h-.503V2.5zM5 3.25a.75.75 0 01.75-.75h8.5a.75.75 0 010 1.5h-8.5A.75.75 0 015 3.25zm0 5a.75.75 0 01.75-.75h8.5a.75.75 0 010 1.5h-8.5A.75.75 0 015 8.25zm0 5a.75.75 0 01.75-.75h8.5a.75.75 0 010 1.5h-8.5a.75.75 0 01-.75-.75zM.924 10.32l.003-.004a.851.851 0 01.144-.153A.66.66 0 011.5 10c.195 0 .306.068.374.146a.57.57 0 01.128.376c0 .453-.269.682-.8 1.078l-.035.025C.692 11.98 0 12.495 0 13.5a.5.5 0 00.5.5h2.003a.5.5 0 000-1H1.146c.132-.197.351-.372.654-.597l.047-.035c.47-.35 1.156-.858 1.156-1.845 0-.365-.118-.744-.377-1.038-.268-.303-.658-.484-1.126-.484-.48 0-.84.202-1.068.392a1.858 1.858 0 00-.348.384l-.007.011-.002.004-.001.002-.001.001a.5.5 0 00.851.525zM.5 10.055l-.427-.26.427.26z' fill='white'></path></svg>");
	background-size: 18px 18px;
	height: 18px;
	width: 18px;
	padding-left: 3px;
}

.icon-to-do-list:before {
	display: block;
	content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='16' height='16'><path fill-rule='evenodd' d='M2.5 2.75a.25.25 0 01.25-.25h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75zM2.75 1A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1H2.75zm9.03 5.28a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z' fill='white'></path></svg>");
	background-size: 18px 18px;
	height: 18px;
	width: 18px;
	padding-left: 2px;
}
/*---------------------------------------------------------------------------*/