@font-face {
    font-family: 'museo_sans700';
    src: url('fonts/museosans_700-webfont.woff2') format('woff2'),
         url('fonts/museosans_700-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'museo_sans500';
    src: url('fonts/museosans_500-webfont.woff2') format('woff2'),
         url('fonts/museosans_500-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'museo_sans300';
    src: url('fonts/museosans-300-webfont.woff2') format('woff2'),
         url('fonts/museosans-300-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'museo_sans100';
    src: url('fonts/museosans-100-webfont.woff2') format('woff2'),
         url('fonts/museosans-100-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


:root 
{
    --surface-1: #bdbdbd;
    --surface-2: #15171c;
    --surface-3: #17191f;
    --surface-4: #232323;
    --surface-5: #1d1f25d9;
    --surface-6: #ff0f3f;

    --surface-input: #1d1f25d9;

    --surface-highlight-1: #ff2356;
    --surface-highlight-2: #23252c;
    --surface-highlight-3: invert(100%) sepia(0%) saturate(12%) hue-rotate(3deg) brightness(106%) contrast(100%);
    --surface-highlight-4: #2196f3;
    --surface-highlight-5: #ffac08;

    --surface-shadow-1: #00000047;

    --text-color-high: #fafafa;
    --text-color-medium: #ececec;

    --stroke-blue: #31343f;

    --button-fill-positive: #ff0f3f;
    --button-fill-positive-hover: #ff2356;
    --button-fill-positive-glow: rgb(255 15 63 / 36%);
    --button-fill-steam: rgb(68, 195, 27);
    --button-fill-steam-hover: rgb(68 195 27 / 57%);
    --button-fill-info: #1789a0;
    --button-fill-info-hover: #1ba4bf;
    --button-ext-hov: #fff;
}

/* optional */
/* uppercase titles */
.page-content h1{text-transform:uppercase}
h1.break-text{text-transform:uppercase}

.search-box input {
	width: 600px;
	border-radius: 0px !important;
    background-color: var(--surface-input)!important;
    border: 1px solid var(--stroke-blue) !important;  
}
header .search-box button {
    z-index: 1;
    left: 11px;
    color: rgba(255,255,255,.8);
    font-size: 21px;
    top: 6px;
}

html.dark-mode header {
    filter: none;
}
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #1d1f25d9; 
}
::-webkit-scrollbar-thumb {
    background: #ff003c; 
    border-radius: 0px;
    box-shadow: 0px 30px 20px rgb(255 15 63 / 36%);
}
::-webkit-scrollbar-thumb:hover {
  background: #b11238; 
}
.grid-card {
	border: 3px solid var(--surface-2);
	transition: .1s cubic-bezier(.075,.82,.165,1);
    border-radius: 4px;    
	background: var(--surface-2);
}
.grid-card:hover {
	transition: 0.4s cubic-bezier(.075,.82,.165,1);
    border:3px solid var(--surface-6);
}

.grid-card:hover .featured-image-container {
    opacity: 1;
}
.tri-layout-container .tri-layout-middle {
	background: var(--surface-5);
    border: 1px solid var(--stroke-blue);
}

/* background */
:focus{outline-style:none!important}
html {background-color: var(--surface-3) !important;}
body {
	font-family: 'museo_sans500' !important;
	background-color: var(--surface-3); 
	color:#f8f8f2
}
html.shaded {background-color: #282a36;}
.flex.sidebar+.flex.content{background-color: #282a36;}
.flex.sidebar {background-color: #282a36;}
body.shaded {background-color: #282a36;}
.toolbar-container {background-color:#282a36}
.search-box input{background-color:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.3)}
hr{background-color:rgba(0,0,0,.2)}
.faded-small, .primary-background-light {background-color: #282a36;}
.floating-toolbox{background-color:#282a36}
.editor-toolbar{background-color:#282a36;border-bottom:1px solid rgba(0,0,0,.2);}
.title-input.page-title .input{background-color:#282a36;}
#markdown-editor .markdown-editor-wrap {background-color: #282a36;}
.card{  background: transparent;box-shadow:none}
.comment-box {background-color: #333644;}
.suggestion-box {background-color: #5e606a;}
.suggestion-box li.active {background-color: #9b9ca3;}
[notification] {background-color: #1d1f26;}


.entity-selector .entity-list-item {
    background-color: var(--surface-3)!important;
}
.entity-selector {border-color: var(--surface-4) !important;}
.entity-selector input[type=text] {
    border-bottom: 1px solid var(--surface-4) !important;
}
/* text */
.text-page {color: #8be9fd;}
.text-book {color: #50fa7b;}
.text-chapter {color: #ffb86c;}
small, p.small, span.small, .text-small {
    color: var(--surface-highlight-5);
}
.form-group[collapsible] {
    border: 1px solid var(--surface-5);
    background: var(--surface-5);
}
label {
    color: var(--surface-highlight-5);
}
.text-primary, p.primary, p .primary, span.primary:hover, .text-primary:hover, .text-button, .text-button:hover, .text-button:focus {color: #f8f8f2;}
h1, h2, h3, h4, h5, h6 {color: #f8f8f2;}
h1 {font-weight: 900}
h2, h3, h4, h5, h6 {font-weight: 700}
.page-content h4 {
    color: var(--surface-highlight-5) !important;
}
.callout.warning a {
	color: #6a2802 !important;
}
.faded a, .faded button, .faded span, .faded span>div {color: #f8f8f2;}
.entity-list .page.draft .text-page {color: #bd93f9;}
.card .entity-list-item:not(.no-hover):hover, .card .entity-list-item:not(.no-hover):focus {background-color: var(--surface-highlight-2) !important;}
.card .entity-list-item:not(.no-hover):hover .text-muted {color: white !important;}
.entity-list-item:not(.no-hover):hover, .icon-list-item:not(.no-hover):hover {
	background-color: var(--surface-highlight-2);
    color: var(--text-color-medium) !important;
}
.list-sort-container .list-sort-label {
    color: var(--surface-1);
	cursor:default;
}
.text-muted {
    color: var(--surface-1) !important;
	cursor:default;
}
.activity-list-item { cursor:default;}
header .links a:hover { transition: .1s cubic-bezier(.075,.82,.165,1); }
header .links a:hover {
    text-decoration:none;
	color:var(--surface-6) !important;
    font-weight: bold;
}
.setting-list-label {color: #999;}
.tag-item .tag-value {background-color: rgba(255, 255, 255, 0.1);}
.tag-item a {color: #f8f8f2;}
.text-small {color: #777 !important; cursor:default;}
[notification="success"] svg {fill: #0f7d15 !important;}
.entity-list-item:focus, .icon-list-item:focus {background-color:#44475a;}

/* border changes */
header {border-bottom: 0;}
#header{
	background: var(--surface-3) !important;
    border-bottom: 1px solid var(--stroke-blue) !important;
    margin-bottom: 20px;	
	    background-image: url(../hdr.png) !important;
}
.flex.sidebar+.flex.content {border-left: 0;}
.card h3{ border-bottom:0}
.fake-input, .input-base, input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=text], input[type=url], select, textarea{border: 1px solid #44475a;color: #f8f8f2;background-color: rgba(0,0,0,.2);}
.activity-list-item {border-bottom:1px solid rgba(0,0,0,.2)}
.floating-toolbox{border:0}
#markdown-editor .markdown-editor-wrap{border: 1px solid rgba(0,0,0,.2);}

.button, .button.outline { 
background: var(--button-fill-positive);
    border-color: var(--button-fill-positive);
    box-shadow: 0px 2px 20px var(--button-fill-positive-glow);
		color: var(--text-color-medium) !important;
}

.button:hover, .button.outline:hover{
  background: var(--button-fill-positive-hover);
  border-color: var(--button-fill-positive-hover);
      box-shadow: 0px 2px 20px var(--button-fill-positive-glow);
}
.button.outline:active {
	color: var(--text-color-medium) !important;
}
.card.drag-card {
    border: 1px solid #ddd;
    border-color: var(--surface-5);
    background-color: var(--surface-5);
}	
.text-neg, .text-neg:hover, .text-neg-hover:hover {
    color: var(--surface-highlight-1)!important;
    fill: var(--surface-highlight-1) !important;
}
.input-base[readonly], input[readonly][type=text], input[readonly][type=number], input[readonly][type=email], input[readonly][type=date], input[readonly][type=search], input[readonly][type=url], input[readonly][type=color], input[readonly][type=password], select[readonly], textarea[readonly], [readonly].fake-input {
    background-color: var(--surface-highlight-2);
}
.pointer {
    border-color: var(--surface-4);
    background-color: var(--surface-shadow-1);
}
.pointer:before {
    border-block-end: 4px solid red;
    border-inline-end: 4px solid #ccc;
    background-color:transparent;
    border-color: var(--surface-6);
}
.grid-card .grid-card-content, .grid-card .grid-card-footer {
    cursor: pointer;
}
table td,table th{
    border:none !important;
}

table tr:first-child {
    background: var(--surface-shadow-1);
}
td {
    padding: 10px !important;
}
tr:nth-child(odd) {background-color: var(--surface-3);}

.image-picker img {
    background-color: var(--surface-2) !important;
}
/* scrollbar
*********************************/
.scrollbar{margin-left: 30px;float: left;height: 300px;width: 65px;background: #F5F5F5;overflow-y: scroll;margin-bottom: 25px;}
.force-overflow{min-height: 450px;}
#wrapper{text-align: center;width: 500px;margin: auto;}
#style-2::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5;}
#style-2::-webkit-scrollbar{width: 12px;background-color: #F5F5F5;}
#style-2::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #D62929;}

/* sidebar
******************************
pages */
.book-tree .sidebar-page-list .page {color: #8be9fd!important;}
/* chapters */
.book-tree .sidebar-page-list .chapter {color: #ffb86c!important;}
/* books */
.book-tree .sidebar-page-list .book {color: #50fa7b!important;}

.input-base.invalid, .input-base.neg, .invalid.fake-input, .neg.fake-input, input.invalid[type=date], input.invalid[type=email], input.invalid[type=number], input.invalid[type=password], input.invalid[type=search], input.invalid[type=text], input.invalid[type=url], input.neg[type=date], input.neg[type=email], input.neg[type=number], input.neg[type=password], input.neg[type=search], input.neg[type=text], input.neg[type=url], select.invalid, select.neg, textarea.invalid, textarea.neg {border: 1px solid #ff5555;}
.text-neg, p .neg, p.neg, span.neg {color: #ff5555;}

.dropdown-container ul {
    background-color: var(--surface-3);
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 10%);
    border-radius: 1px;
    border: 1px solid var(--surface-4);
    color: #f8f8f2;
}
.dropdown-container ul a, .dropdown-container ul button {color:var(--text-color-medium)!important;    transition: .1s cubic-bezier(.075,.82,.165,1);}
.text-primary, p.primary, p .primary, span.primary:hover, .text-primary:hover, a, a:hover, a:focus, .text-button, .text-button:hover, .text-button:focus {color: var(--text-color-medium)!important;fill:var(--text-color-medium)!important;}
.dropdown-container ul a:hover {
	font-size:18px;
	color: var(--text-color-medium) !important;
}
.dropdown-menu li.active a {
    font-weight: 200;
	background:var(--surface-6);
}
.outline>input:active, .outline>input:focus {border-bottom: 2px solid #8be9fd;}
.card.drag-card>div .outline input {background-color: #282a36;color:#f8f8f2}
.card.drag-card .handle {background-color:#282a36;}
.card.drag-card {border: 1px solid #44475a;}
.card.drag-card .drag-card-action:hover, .card.drag-card .handle:hover {background-color: var(--surface-highlight-2);}

pre {background-color: #44475a;border: 1px solid #ddd;}
pre:after {width: 0px;border-right:0}

.sortable-page-list li {border: 1px solid #6272a4;}
.sortable-page-list, .sortable-page-list ul {background-color: var(--surface-3);}
.well {background-color: #282a36;border:0;}
.button.outline.page {border-color: #8be9fd;color: #8be9fd;}
.button.outline.book {border-color: #50fa7b;color: #50fa7b;}

.list-sort-container .list-sort {
    border: 2px solid transparent !important;
    background: var(--surface-3)!important;
}
.list-sort-container .list-sort-dir {
    border-inline-start: 2px solid var(--surface-5) !important;
	transition: .1s cubic-bezier(.075,.82,.165,0.7) !important;
}
.list-sort-container .list-sort-dir:hover {
    border-inline-start: 2px solid transparent !important;
    background: var(--button-fill-positive)!important;
    color: var(--text-color-medium)!important;
}

.floating-toolbox .tabs {border-right: 1px solid #44475a;}
.scroll-box {border: 1px solid #44475a;}
.scroll-box .scroll-box-item {border-bottom: 1px solid #44475a;}

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #282a36;}
::-webkit-scrollbar-thumb {background: #44475a;}
::-webkit-scrollbar-thumb:hover {background: #50fa7b;}
.floating-toolbox .tabs svg {fill: rgba(248, 248, 242, 1);}

.entity-selector .entity-list > div {background-color:#282a36;}
.entity-selector .entity-list {color:#f8f8f2;background-color: #282a36}

/* WSIWYG editor fixes */
#tinymce {background-color: #282a36!important;}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {background-color: #282a36!important;}
.mce-menubtn button {color: #f8f8f2!important;}
.mce-ico {color:#f8f8f2!important;}
.mce-grid-border a:hover, .mce-grid-border a.mce-active {border-color: #8be9fd;background: #bdd6f2;}
.mce-menu-item.mce-selected .mce-text, .mce-menu-item.mce-selected .mce-ico {color: #f8f8f2!important;}
.mce-widget, .mce-textbox {color: #ffffff!important;}
.mce-label {text-shadow: none!important;}
.popup-body {background-color: #282a36!important;}
th {background-color: #44475a}
.pos .svg-icon {fill:#282a36}

ul > li > a {color: #8be9fd!important}
.page-content > div > a {color: #8be9fd!important}

/* pdf print fixes */
@page{margin:0cm!important;size: A4}
@media print {html, body {width: 210mm;height: 297mm;}

/* one offs */
.entity-list {background-color:#282a36 !important;}
.svg-icon {fill:#f8f8f2!important;}
.breadcrumb-listing .breadcrumb-listing-toggle:hover {fill: #f8f8f2;border-color: transparent;}
.icon-list.text-primary {fill:#f8f8f2!important}
#export-menu {color:#f8f8f2!important;}
.book-tree .sidebar-page-list .entity-list-item.selected {background-color:#44475a;}
/* other changes */
.code-base, code, span.code {border: 1px solid #6272a4;border-radius: 0px;}
.button.pos, input[type=button].pos, input[type=submit].pos {background-color: #50fa7b;color: #282a36;text-transform: uppercase;border: 1px solid #52a256;vertical-align: top;}
table.table tr:hover {background-color: #44475a;}
table.table tr {border-bottom: 1px solid rgba(0,0,0,.2);}
blockquote{border-left: 4px solid #8be9fd;background-color: #282a36!important;}


/* PUT THIS IN YOUR "Custom HTML Head Settings"! 
 * Unless you don't want the Roboto font - then remove the next line.
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
.title-input.page-title input[type=text]{background:#44475a}
.floating-toolbox div[toolbox-tab-content]{background-color:#282a36}
html.dark-mode .card.drag-card{background-color:#44475a}
html.dark-mode .card.drag-card .handle{background-color:#44475a}
.card.drag-card .outline input{background-color:#282a36;color:#f8f8f2}
#header{background-color:#282a36!important}
html.dark-mode .fake-input,html.dark-mode .input-base,html.dark-mode input[type=color],html.dark-mode input[type=date],html.dark-mode input[type=email],html.dark-mode input[type=number],html.dark-mode input[type=password],html.dark-mode input[type=search],html.dark-mode input[type=text],html.dark-mode input[type=url],html.dark-mode select,html.dark-mode textarea{color:#f8f8f2;background-color:#44475a}
html.dark-mode{background-color:#282a36}
html.dark-mode .card{background-color:transparent}
html.dark-mode body{color:#6272a4;background-color:transparent}
.markdown-editor-display{background-color:#282a36!important}
html.markdown-editor-display.dark-mode body{background-color:#282a36}
.logo-text{color:var(--color-primary)!important}
html.dark-mode code{background-color:#44475a}
html.dark-mode pre{background-color:#44475a}
.title-input.page-title input[type=text]{background:#44475a}
html.dark-mode .editor-toolbar{background-color:#282a36}
html.dark-mode .primary-background-light{background:#282a36}
*/