@media (prefers-color-scheme: light) {

	* {color: black;}

	:root {--input-color: white; --sidebar-color: white; --sidebar-active-color: rgb(106, 106, 106, 0.1); --active-view-color: #F4F4F4; --toolbar-color: white; --toolbar-active-color: #dadce2; --border-color: #d5d7db; --button-color: #ebebeb; --button-hover-color: #e3e3e3; --button-press-color: #dedede; --file-drop-shadow: #a3a3a3; --context-box-color: #dadce2; --block-shadow: #dadce2;}

	/*.toolbar, .sidebar-header {border-bottom: solid 1px var(--border-color);} .active-view {border-left: solid 1px var(--border-color);}*/

	.toolbar-btn img {filter: invert(100%);}
	
	.context-menu-item img {filter: invert(100%);}

	.sidebar-library img {filter: invert(100%);}
	
	.block-btn img { filter: invert(100%);}

	.sidebar-header.large, .header-img {background-image: url('https://s3-ap-southeast-2.amazonaws.com/maloufio/header-light.png');}}

@media (prefers-color-scheme: dark) {

	* {color: white;}

	/*.toolbar, .sidebar-header {border-bottom: solid 1px var(--border-color);} .active-view {border-left: solid 1px var(--border-color);}*/

	:root {--input-color: #1c1c1c; --sidebar-color: #232323; --sidebar-active-color: #3E3E3E; --active-view-color: #313131; --toolbar-color: #232323; --toolbar-active-color: #3e3e3e; --border-color: #1c1c1c; --button-color: #525252; --button-hover-color: #4a4a4a; --button-press-color: #404040; --file-drop-shadow: black; --context-box-color: #232323; --block-shadow: #141414;}

	.sidebar-header.large, .header-img  {background-image: url('https://s3-ap-southeast-2.amazonaws.com/maloufio/header-dark.png');}

}

body > *::-webkit-scrollbar {display: none;}

.sidebar-header.small {background-size: 36px; background-image: url('https://s3-ap-southeast-2.amazonaws.com/maloufio/header-small.png');} 

.no-select {-khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;-webkit-user-select: none;}

.disabled {pointer-events: none; opacity: 0.5;}

body, html {background-color: var(--toolbar-color); margin: 0; padding: 0; width: 100%; height: 100%; overscroll-behavior-x: none; -webkit-overflow-scrolling: touch; font-family: 'Open Sans', sans-serif; overflow-x: hidden; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none;}

.hidden {display: none !important;}

.active-2view.empty {background-image: url('https://s3-ap-southeast-2.amazonaws.com/maloufio/libraries/app/malouf-empty.png'); background-position: center center; background-size: 500px; background-repeat: no-repeat;}

.no-appearance {-moz-appearance: none; -webkit-appearance: none; appearance: none;}

.no-select {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}

.content {display: flex; justify-content: flex-start; box-sizing: border-box; width: 100%; flex: 1;}

.sidebar {width: var(--sidebar-width); height: 100%; background-color: var(--sidebar-color); position: fixed; box-sizing: border-box; display: flex; flex-direction: column;}

.sidebar-header { height: 56px; display: flex; padding: 10px; justify-content: center; align-items: center; box-sizing: border-box; background-size: 115px; background-repeat: no-repeat; background-position: center center; background-color: var(--toolbar-color);}

.sidebar-library {display: flex; border-left: solid 3.5px transparent; opacity: .5; align-items: center; font-size: 1rem; font-weight: 400; padding-top: 7.5px; padding-bottom: 7.5px; box-sizing: border-box; transition: background-color .2s, opacity .5s;}

.sidebar-library.active-library {border-left: solid 3.5px #F89C1A; background-color: var(--active-view-color); opacity: 1;}

.sidebar-library:hover {background-color: var(--sidebar-active-color); cursor: pointer; opacity: 1;}

.sidebar-library img {height: 24px; margin-right: 20px; margin-left: 20px;}

.toolbar {width: calc(100% - var(--sidebar-width)); height: var(--toolbar-height); position: fixed; z-index: 2; right: 0; padding-right: 5px; background-color: var(--toolbar-color); display: flex; box-sizing: border-box;}

.inline-toolbar {width: 100%; height: var(--toolbar-height);  position: relative; display: flex; box-sizing: border-box; } 

.toolbar-left {display: flex;align-items: center;}

.toolbar-center {flex: 1; display: flex; align-items: center; justify-content: flex-end; padding-left: 10px; padding-right: 10px;}

.toolbar-right {display: flex; align-items: center;}

.toolbar-btn {height: 40px; width: 40px; opacity: 0.5; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; border-radius: 5px; box-sizing: border-box; position: relative; margin-left: 2.5px; margin-right: 2.5px; transition: opacity 0.2s;}

.user-btn {height: 56px; width: 56px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; border-radius: 5px; box-sizing: border-box; position: relative; margin-left: 2.5px; margin-right: 2.5px; transition: opacity 0.2s;}

.user-btn img {width: 32px; height: 32px; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.toolbar-btn.active-hover {animation: toolbtnactivehover 1s infinite;}

@keyframes toolbtnactivehover {0%{background-color: var(--toolbar-active-color);} 25% {background-color: transparent;} 50% {background-color: var(--toolbar-active-color);} 75% {background-color: transparent;} 100% {background-color: var(--toolbar-active-color);}}

.toolbar-btn:hover {opacity: 1; cursor: pointer;}

.toolbar-btn img {width: 22px; height: 22px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.toolbar-spacer {width: 1px; background-color: #525252; height: 50%;}

.active-view {display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; box-sizing: border-box; min-height: calc(100% - var(--toolbar-height)); overflow: visible; width: calc(100% - var(--sidebar-width)); background-color: var(--active-view-color); right: 0; top: var(--toolbar-height);  position: absolute;}

.library-container { height: 100%; width: 100%; padding-bottom: 35px !important; box-sizing: border-box;}

.content-margin {width: 100%; max-width: 1370px; padding-top: 25px; padding-left: 25px; padding-bottom: 25px;padding-right: 25px; box-sizing: border-box;}

.library-block-header {width: 100%; display: flex; align-items: center;}

.library-content-block {display: flex; justify-content: center;}

.library-block-title {width: 100%; font-size: 2rem; font-weight: 900; padding-bottom: 15px;}

.overlay {position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 20;}

#app-loading {display: flex; justify-content: center; align-items: center;}

input[type=text], input[type=password], input[type=email], textarea{ background-color: var(--input-color); padding: 10px; border: solid 1px var(--border-color); font-size: 1rem; border-radius: 5px;}

.toolbar input[type=text]{padding: 6.5px; width: 200px;}

input[type=submit], button { outline: none; margin-top: 5px; font-size: 1rem;  padding: 10px; padding-left: 15px; padding-right: 15px; background-color: var(--button-color); border: none; border-radius: 5px; }

input[type=submit]:hover, button:hover {cursor: pointer; background-color: var(--button-hover-color); }

input[type=submit]:active, button:active {background-color: var(--button-press-color);}

textarea {resize: none;}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0 30px white inset !important;}

.context-menu-item {padding: 10px; padding-left: 15px; padding-right: 15px; width: auto; background-color: transparent; box-sizing: border-box; display: flex; align-items: center;}

.context-menu-item:hover {background-color: var(--toolbar-active-color); cursor: pointer;}

.context-menu-item img {height: 18px !important; margin-right: 15px;}

.context-menu { position: absolute; padding-top: 5px; padding-bottom: 5px; background-color: var(--toolbar-color); min-width: 160px; overflow: auto; box-shadow: 1px 1px 2px var(--context-box-color); z-index: 1;}

.infinite-loader {position: absolute; left: 50%; top: 50%; margin-top: 15px; margin-bottom: 15px; transform: translate(-50%, -50%);}

.tooltip::before {content: ''; width: 25px; height: 25px; position: absolute; top: -7.5px; left: calc(50% - 15px); width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid var(--input-color);}

.tooltip {position: absolute; z-index: 100; border-radius: 5px; background-color: var(--input-color); padding: 5px; font-size: .85rem; font-weight: 500; padding-left: 10px; padding-right: 10px; box-shadow: 1px 1px 5px var(--context-box-color); }


/* ##Device = Laptops, Desktops */
@media (min-width: 1175px) {

:root {--sidebar-width: 240px; --toolbar-height: 56px;}

}


/* ##Device = Tablets, Ipads (portrait) */
@media (min-width: 768px) and (max-width: 1175px) {

:root {--sidebar-width: 66px; --toolbar-height: 56px;}


/* ##Device = Tablets, Ipads (landscape) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {


}


/* ##Device = Low Resolution Tablets, Mobiles (Landscape) */
@media (min-width: 481px) and (max-width: 767px) {



}


/* ##Device = Most of the Smartphones Mobiles (Portrait) */
@media (min-width: 320px) and (max-width: 480px) {



}