body {
	background: #f0f0f0;
	font-family: 'Roboto Slab', sans-serif;
	overflow-x: hidden;	/* For removing horizontal scroll */
}


/* Bootstrap modal scrollbar bugfix */
body.modal-open {
	overflow-y: auto !important;
	padding-right: 0 !important;
}


/* Scrollbar styles */
::-webkit-scrollbar {
	width: 7px;
	background-color: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.65);
}


/* Angular loading bar styles */
#loading-bar .bar {
	background: rgba(0, 0, 0, 0.39);
}

#loading-bar-spinner .spinner-icon {
	display: none;
}


/* Page and container message styles */
.hidden {
	display: none !important;
	visibility: hidden !important;
}

.page-message {
	position: absolute;
	left: 52%;
	top: 40%;
	font-size: 24px;
	font-family: Roboto, sans-serif;
	color: rgba(51, 51, 51, 0.4);
}

.page-message .page-message-icon {
	display: block;
	text-align: center;
	font-size: 50px;
}

.page-message .page-message-text {
	display: block;
	text-align: center;
}

.container-message {
	display: block;
	margin: 0 auto;
	margin-top: 20vh;
	margin-left: -15%;
	text-align: center;
	font-size: 24px;
	font-family: Roboto, sans-serif;
	color: rgba(51, 51, 51, 0.4);
	border: 0px solid;
}

.container-message .container-message-icon {
	display: block;
	text-align: center;
	font-size: 50px;
}

.container-message .container-message-text {
	display: block;
	text-align: center;
}

/* Page and container message responsive styles */
@media screen and (max-width: 800px) {
	.page-message {
		position: static;
		margin: 0 auto;
		margin-top: 40%;
	}
}


/* Tooltip customization */
.tooltipster-sidetip.tooltipster-borderless.tooltipster-borderless-customized .tooltipster-box {
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-borderless-customized .tooltipster-content {
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 12px;
	padding: 5px 8px;
}


/* Ripple effects for elements 
	(make the element position relative (to bring it above the ripple) 
	and also its parent position relative (to be able to hide the ripple overflow) 
	and set overflow to hidden in parent container) */

/* Ripple (normal) */

/* The element which will create the ripple effect. Its size and position will be set by JS. 
	Initially scaled down to 0% and later animated to large fading circles (on click). */
.ripple-effect {
	display: block;
	position: absolute;
	background: rgba(11, 11, 11, .1);	/* Ripple color */
	border-radius: 100%;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
}

/* Ripple animation effect */
.ripple-effect.animate {
	-webkit-animation: ripple-effect 0.65s linear;
	-moz-animation: ripple-effect 0.65s linear;
	-o-animation: ripple-effect 0.65s linear;
	animation: ripple-effect 0.65s linear;
}

@-webkit-keyframes ripple-effect {

	/* Scale the element to 250% to safely cover the entire area and fade it out */
	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		-moz-transform: scale(2.5);
		-o-transform: scale(2.5);
		transform: scale(2.5);
	}
}

@-moz-keyframes ripple-effect {

	/* Scale the element to 250% to safely cover the entire area and fade it out */
	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		-moz-transform: scale(2.5);
		-o-transform: scale(2.5);
		transform: scale(2.5);
	}
}

@-o-keyframes ripple-effect {

	/* Scale the element to 250% to safely cover the entire area and fade it out */
	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		-moz-transform: scale(2.5);
		-o-transform: scale(2.5);
		transform: scale(2.5);
	}
}

@keyframes ripple-effect {

	/* Scale the element to 250% to safely cover the entire area and fade it out */
	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		-moz-transform: scale(2.5);
		-o-transform: scale(2.5);
		transform: scale(2.5);
	}
}

/* Ripple (light) */

/* The element which will create the ripple effect. Its size and position will be set by JS. 
	Initially scaled down to 0% and later animated to large fading circles (on click). */
.ripple-effect-light {
	display: block;
	position: absolute;
	background: rgba(255, 255, 255, .5);	/* Ripple color */
	border-radius: 100%;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
}

/* Ripple animation effect */
.ripple-effect-light.animate {
	-webkit-animation: ripple-effect 0.65s linear;
	-moz-animation: ripple-effect 0.65s linear;
	-o-animation: ripple-effect 0.65s linear;
	animation: ripple-effect 0.65s linear;
}

@-webkit-keyframes ripple-effect-light {

	/* Scale the element to 250% to safely cover the entire area and fade it out */
	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		-moz-transform: scale(2.5);
		-o-transform: scale(2.5);
		transform: scale(2.5);
	}
}

@-moz-keyframes ripple-effect-light {

	/* Scale the element to 250% to safely cover the entire area and fade it out */
	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		-moz-transform: scale(2.5);
		-o-transform: scale(2.5);
		transform: scale(2.5);
	}
}

@-o-keyframes ripple-effect-light {

	/* Scale the element to 250% to safely cover the entire area and fade it out */
	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		-moz-transform: scale(2.5);
		-o-transform: scale(2.5);
		transform: scale(2.5);
	}
}

@keyframes ripple-effect-light {

	/* Scale the element to 250% to safely cover the entire area and fade it out */
	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
		-moz-transform: scale(2.5);
		-o-transform: scale(2.5);
		transform: scale(2.5);
	}
}


/* Swipe listener */
.swipe-listener {
	display: none;	/* Not shown normally, only available on small devices */
}


/* Header, brand, search etc. styles */

/* Header */
.header {
	width: 100%;
/*	background: #ffb83d;	*/
	background: #ffb924;
	padding: 10px 0;
	position: fixed;
	top: 0;
	z-index: 999;
	transition: .5s;
}

.header-scrolled {
	box-shadow: 0px 3px 15px -4px rgba(0, 0, 0, 0.75);
}

/* Menu toggle button */
.menu-toggle {
	display: inline-block;
	float: left;
	height: 44px;
	width: 44px;
	padding: 11px;
	margin: 0 0 0 15px;
	border-radius: 50%;
	overflow: hidden;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
}

.menu-toggle-icon {
	display: block;
	height: 22px;
	width: 22px;
	background: url('../icons/nav.svg');
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid transparent;
	vertical-align: middle;
	opacity: .5;
}

.menu-toggle:active {
	background: rgba(0, 0, 0, 0.1);
}

/* Brand logo */
.brand {
	float: left;
	padding: 0;
	margin-left: 35px;
	line-height: 165%;
	font-size: 1.9em;
	font-weight: bold;
	font-family: 'Noto Sans', Roboto, sans-serif;
	color: #111;
}

.brand a {
	text-decoration: none;
	outline: 0;
	color: #111;
	transition: .3s;
}

/* Search bar */
.search {
	position: relative;
	margin: 0 auto;
	text-align: center;
	width: 50%;
}

.search .search-icon {
	left: 30px;
	top: 1px;
	color: #5a5a5a;
}

.search input {
	text-indent: 32px;
	font-size: 1em;
	width: 90%;
	margin: 0 auto;
	padding: 12px;
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0);
	border-radius: 4px;
	position: relative;
	transition: background 100ms ease-in, width 100ms ease-out;
}

.search input:focus {
	background: #fff;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

.search input::-webkit-input-placeholder {
	color: #5a5a5a;
}

.search input::-moz-placeholder {
	color: #5a5a5a;
}

.search input::input-placeholder {
	color: #5a5a5a;
}

/* Header, brand, search etc. responsive styles */
@media screen and (max-width: 900px) {

	.brand {
		margin-left: 10px;
	}

	.search {
		float: right;
	}
}

@media screen and (max-width: 450px) {

	.brand {
		font-size: 1.8em;
		margin-left: 25px;
	}

	.search {
		width: 100%;
		text-align: center;
		margin-top: 5px;
	}

	.search-icon {
		display: none;
	}

	.search input {
		text-indent: 0;
		font-size: .9em;
		padding: 7px;
	}

	/* Notes container must be padded downwards some more, 
	because the header height doubles when search bar gains 100% width */
	.notes-container {
		padding-top: 125px !important;
	}
}

@media screen and (max-width: 250px) {

	.brand {
		font-size: 1.1em;
		margin-top: 10px;
	}
}


/* Sidebar layout (sidebar is inside the header element) */
.sidebar-container {
	position: absolute;
	left: 0px;
	top: 100%;
	bottom: 0;
	height: -webkit-calc(100vh - 100%);
	height: calc(100vh - 100%);
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 999;
	width: 275px;
	margin-top: 1px;
	background: transparent;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.sidebar-container:hover {
	overflow-y: auto;
}

/* Used on menu toggle */
.sidebar-container.sidebar-toggled {
	left: -275px !important;	/* Hide the sidebar to the left on menu toggle */
}

/* Sidebar nav styles */
.sidebar-nav {
	display: block;
	padding: 0;
	list-style: none;
	padding: 8px 0;
}

.sidebar-nav:not(:last-child) {
	border-bottom: 1px solid #ddd;
}

.sidebar-nav li {
	display: block;
	font-family: Roboto, sans-serif;
	font-size: 0.9em;
	line-height: 40px;

	/* For ripple effect */
	position: relative;
	overflow: hidden;
}

.sidebar-nav li a {
	display: block;
	text-decoration: none;
	padding: 5px 10px 5px 20px;
	color: #666;

	/* For ripple effect */
	position: relative;
}

.sidebar-nav li a:hover, .sidebar-nav li a:active {
	background: rgba(0, 0, 0, 0.09);
}

.side-icon {
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: 24px 24px;
	background-size: 24px 24px;
	border: 1px solid transparent;
	height: 24px;
	width: 24px;
	opacity: .6;
	transition: .2s;
	float: left;
	vertical-align: middle;
	margin: 8px 35px 0 2px;
}

.sidebar-nav .list-header {
	display: block;
	padding: 0 10px 0 20px;
	margin-bottom: 10px;
	font-family: Roboto, sans-serif;
}

.sidebar-nav .list-header .list-title {
	display: inline;
	font-size: 0.9em;
	font-weight: 500;
}

.sidebar-nav .list-header .list-edit-btn {
	position: absolute;
	left: 200px;
	right: auto;
	border: 0;
	outline: 0;
	color: inherit;
	text-decoration: none;
	border-radius: 3px;
	margin-top: -1px;
	background: transparent;
	font-family: Roboto, sans-serif;
	font-size: 0.9em;
	letter-spacing: 1px;
	font-weight: 500;
}

.sidebar-nav .list-header .list-edit-btn span {
	display: inline-block;
	padding: 4px 12px 3px 12px;
}

.sidebar-nav .list-header .list-edit-btn:hover {
	background: rgba(0, 0, 0, 0.1);
	cursor: pointer;
}


/* Notes container, note tiles styles */
.notes-container {
	display: block;
	padding-top: 100px;
	padding-left: 200px;	/* To center the notes, because note-tiles are left floated in the Packery layout */
	padding-right: 0;
	left: 100px;	/* Shift away notes-container from left when sidebar is being shown */
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

/* Used on menu toggle */
.notes-container.notes-toggled {
	margin-left: auto !important;
	margin-right: auto !important;
	left: 0;	/* Remove the distance from left to move notes-container to its usual position when when sidebar is not being shown */
}

/* Sidebar + notes container combined responsive styles */
@media screen and (max-width: 800px) {

	.sidebar-container {
		background: #fdfdfd;
		box-shadow: 0px 10px 15px -4px rgba(0, 0, 0, 0.75);
		margin-top: 0;
		overflow-y: auto;	/* Always show the scrollbar */
		left: -275px;	/* By default, hide the sidebar to the left on small devices */
	}

	.sidebar-container.sidebar-toggled {
		left: 0px !important;	/* Make the sidebar become visible */
	}

	.notes-container {
		left: 0 !important;	/* The notes-container is not shifted away from left on small devices */
	}

	.notes-container.notes-toggled {
		left: 0 !important;	/* Don't bring any changes to notes-container position on menu toggle */
	}

	.swipe-listener {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 7%;
		z-index: 9;
		background: transparent;
		-webkit-transition: left 0.5s ease;
		-moz-transition: left 0.5s ease;
		-o-transition: left 0.5s ease;
		transition: left 0.5s ease;
		background: transparent;
	}

	.swipe-listener.swipe-toggled {
		left: 275px !important;
		width: 100% !important;
	/*	background: rgba(0, 0, 0, .25) !important;	*/
	}
}


/* Note tiles */
.note {
	padding: 0;
	background: #fdfdfd;	/* Default note color */
	border-radius: 2px;
	word-wrap: break-word;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 
				0 3px 1px -2px rgba(0, 0, 0, 0.2), 
				0 1px 5px 0 rgba(0, 0, 0, 0.12);
	transition: .3s !important;
	width: 21.5%;
}

.note:hover {
	-webkit-box-shadow: rgba(0, 0, 0, .35) 0 4px 10px, 
						inset 1px 1px 0 rgba(0, 0, 0, .1), 
						inset -1px -1px 0 rgba(0, 0, 0, .07);
	-moz-box-shadow: rgba(0, 0, 0, .35) 0 4px 10px, 
						inset 1px 1px 0 rgba(0, 0, 0, .1), 
						inset -1px -1px 0 rgba(0, 0, 0, .07);
	box-shadow: rgba(0, 0, 0, .35) 0 4px 10px, 
				inset 1px 1px 0 rgba(0, 0, 0, .1), 
				inset -1px -1px 0 rgba(0, 0, 0, .07);
}

/* Note tiles + notes container combined responsive styles */
@media screen and (max-width: 1080px) {

	.notes-container {
		padding-left: 17%;
	}

	.note {
		width: 30%;
	}
}

@media screen and (max-width: 850px) {

	.notes-container {
		padding-left: 20%;
	}
}

@media screen and (max-width: 800px) {

	.notes-container {
		padding-left: 10%;
	}

	.note {
		width: 40%;
	}
}

@media screen and (max-width: 450px) {

	.notes-container {
		padding-left: 2.5%;
	}

	.note {
		width: 45%;
	}

	.note .note-main {
		padding: 0 .7em .5em .8em !important;
	}

	.note-opt a.opt-icon {
		margin-left: 0 !important;
	}
}

/*@media screen and (max-width: 450px) {

	.notes-container {
		padding-left: 5%;
	}

	.note {
		width: 90%;
	}
}
*/

/* To maintain images in note tiles */
.note img {
	display: block;
	max-width: 100%;
	height: auto !important;
	margin: 10px auto;
}

/* Note tile main section (has note title and note content) */
.note .note-main {
	padding: 0.75em 1.5em 0.85em 1.5em;

	/* To moderate the height of a note tile if it grows too large even after the prettifying filter */
	max-height: 550px;
	overflow-y: hidden;
}

.note-title {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 22px;
	font-weight: bold;
}

.note-content {
	font-family: 'Roboto Slab', sans-serif;
	font-size: 14px;
	white-space: pre-wrap;
	overflow-x: hidden;
}

/* Note tile labels section */
.note .note-labels {
	display: block;
	margin-left: 12px;
	margin-right: 12px;
	margin-top: 3px;
	margin-bottom: 3px;
	font-family: Roboto, sans-serif;
	font-size: 11px;
	text-align: left;
}

.note-labels ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.note-labels ul li {
	display: inline-block;
	margin: 0 2px 2px;
	padding: 2px 5px;
	background: rgba(0, 0, 0, 0.125);
	border-radius: 2px;
	cursor: pointer;
}

.note-labels ul li:hover {
	background: rgba(0, 0, 0, 0.195);
}

/* Note tile options section */
.note .note-opt {
	text-align: right;
	padding: 0 0.8em 0.2em 1.2em;
	visibility: hidden;	/* Not visible initially */
	opacity: 0;
}

.note:hover .note-opt {
	visibility: visible;	/* Make note options become visible when a note is hovered */
	opacity: 1;
	transition: opacity .5s;
}

.note-opt::after {	/* Clearfix */
	clear: both;
	content: ' ';
	display: block;
	height: 0;
}

.note-opt a.opt-icon {
	display: inline-block;
	text-decoration: none;
	margin: 0;
	margin-left: 0.5em;
	padding: 0.2em 0.35em 0 0.35em;
	border: 0;
	outline: 0;
	color: #2c2c2c;
}

.note-opt a.opt-icon:hover {
	text-decoration: none;
	cursor: pointer;
	color: #050505;
}

.opt-icon {
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: 18px 18px;
	background-size: 18px 18px;
	border: 1px solid transparent;
	height: 24px;
	width: 24px;
	opacity: .7;
	transition: .2s;
}

.opt-icon:hover {
	opacity: 1;
}

/* Don't hide note options in note tiles on small devices (always visible) */
@media screen and (max-width: 650px) {

	.note .note-opt {
		visibility: visible;
		opacity: 1;
	}
}


/* Note modals (view mode and edit mode) */
.note-modal {
	word-wrap: break-word;
	overflow-y: scroll;
}

/* Modal animation effect */
.fade-pop {
	opacity: 0;
	-webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-o-transition: opacity .3s linear;
	transition: opacity .3s linear;
}

.fade-pop.in {
	opacity: 1;
}

.note-modal .modal-content {
	border: 0;
	border-radius: 5px;
}

.note-modal .modal-header, 
.note-modal .modal-footer {
	border: 0;
}

.note-modal .modal-header {
	background: rgba(0, 0, 0, 0.1);
	padding-left: 25px;
}

/* To maintain images in note modals */
.note-modal img {
	display: block;
	max-width: 100%;
	margin: 10px auto;
}

/* Note modal labels section */
.note-modal-labels {
	display: block;
	margin-left: 7px;
	margin-right: 7px;
	margin-bottom: 3px;
	font-family: Roboto, sans-serif;
	font-size: 12px;
	text-align: left;
}

.note-modal-labels ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.note-modal-labels ul li {
	display: inline-block;
	margin: 0 2px 2px;
	padding: 2px 5px;
	background: rgba(0, 0, 0, 0.125);
	border-radius: 2px;
}

/* Note modal date section */
.note-modal-date {
	display: inline-block;
	float: left;
	margin-top: 3px;
	margin-left: 7px;
	font-family: Roboto, sans-serif;
	font-style: italic;
	font-size: 12px;
	color: #303030;
}

/* Note modal options section */
.note-modal-opt {
	display: inline-block;
	text-align: right;
	margin-right: 15px;
}

.note-modal-opt::after {	/* Clearfix */
	clear: both;
	content: ' ';
	display: block;
	height: 0;
}

.note-modal-opt a.opt-icon-lg {
	display: inline-block;
	text-decoration: none;
	margin: 0;
	margin-left: 1em;
	padding: 0.2em 0.35em 0 0.35em;
	border: 0;
	outline: 0;
	color: #2c2c2c;
}

.note-modal-opt a.opt-icon-lg:hover {
	text-decoration: none;
	cursor: pointer;
	color: #050505;
}

.note-modal-opt a.opt-icon-lg-disabled:hover {
	cursor: default !important;
	opacity: .7 !important;
}

.opt-icon-lg {
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: 24px 24px;
	background-size: 24px 24px;
	border: 1px solid transparent;
	height: 28px;
	width: 28px;
	opacity: .7;
	transition: .2s;
}

.opt-icon-lg:hover {
	opacity: 1;
}


/* Note edit modals */
.note-edit-modal button.close {
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 3px;
}

.edit-note-form .form-group {
	margin-bottom: 0;
}

.edit-note-form .form-control {
	border-radius: 0;
	border: 0;
	outline: 0;
	resize: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	color: inherit;
	background: transparent;
}

.edit-note-form .input-title {
	margin-top: 13px;
	padding: 7px 0 0px;
	min-height: 50px;
	max-height: 150px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #252525;
}

/*
.edit-note-form .input-content {
	min-height: 200px;
	max-height: 300px;
	transition: .2s ease-in;
}

.edit-note-form .input-content:hover, 
.edit-note-form .input-content:focus {
	box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.65);
}

.edit-note-form .input-content:focus {
	background: rgba(255, 255, 255, 0.4);
	transition: .3s ease-out;
}
*/

.edit-note-form input::-webkit-input-placeholder, 
.edit-note-form textarea::-webkit-input-placeholder {
	font-weight: 300;
	color: #444;
}

.edit-note-form input::-moz-placeholder, 
.edit-note-form textarea::-moz-placeholder {
	font-weight: 300;
	color: #444;
}

.edit-note-form input::input-placeholder, 
.edit-note-form textarea::input-placeholder {
	font-weight: 300;
	color: #444;
}

/* Froala notice in Froala editor */
.fr-box div > a[href*='froala.com/wysiwyg-editor'] {
	display: none !important;
}


/* Note view modals */
.note-view-modal .note-content {
	min-height: 300px;
	max-height: 450px;
}


/* Note colors popup */
.colors-popup {
	position: relative;
}

.colors-popup ul {
	list-style-type: none;
	position: absolute;
	width: 120px;
	bottom: 110%;
	left: -50px;
	margin: 0px;
	padding: 2px 2px 4px 7px;
	border-radius: 2px;
	box-sizing: border-box;
	background: #fff;
	text-align: center;
	cursor: auto;
	visibility: hidden;
	opacity: 0;
	transition: .7s;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
	z-index: 99999;
}

.colors-popup:hover ul {
	visibility: visible;
	opacity: 1;
	transition: .6s;
}

.colors-popup ul li {
	display: inline-block;
	margin: 5px 5px 0 0;
}

.colors-popup ul li:hover {
	cursor: pointer;
}

.color-btn {
	height: 17px;
	width: 17px;
	margin: 2px;
	border: 0;
	outline: 0;
	border-radius: 100px;
	-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .1);
	-moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .1);
	-o-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .1);
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .1);
}


/* Note menu popup */
.menu-popup {
	position: relative;
	opacity: 1 !important;
}

.menu-popup ul {
	list-style-type: none;
	position: absolute;
	width: 120px;
	top: 110%;
	left: -80px;
	margin:0px;
	padding: 5px 0;
	border-radius: 2px;
	box-sizing: border-box;
	background: #fff;
	text-align: left;
	cursor: auto;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
	-webkit-transform: translateY(-1em);
	-moz-transform: translateY(-1em);
	-o-transform: translateY(-1em);
	transform: translateY(-1em);
	-webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
	z-index: 99999;
}

.menu-popup:hover ul {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition-delay: .3s, 0s, 0.3s;	/* This removes the transition delay so the menu will be visible while the other styles transition */
	-moz-transition-delay: .3s, 0s, 0.3s;	/* This removes the transition delay so the menu will be visible while the other styles transition */
	-o-transition-delay: .3s, 0s, 0.3s;	/* This removes the transition delay so the menu will be visible while the other styles transition */
	transition-delay: .3s, 0s, 0.3s;	/* This removes the transition delay so the menu will be visible while the other styles transition */
}

.menu-popup ul li {
	display: block;
	margin: 0;
	padding: 5px 5px 5px 10px;
	width: 100%;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

.menu-popup ul li:hover {
	cursor: pointer;
	background: #f5f5f5;
}


/* Note labels popup */
.labels-popup {
	position: relative;
}

.labels-popup ul {
	list-style-type: none;
	position: absolute;
	width: 150px;
	bottom: 110%;
	left: -50px;
	margin: 0px;
	padding: 5px 2px 4px 7px;
	border-radius: 2px;
	box-sizing: border-box;
	background: #fff;
	text-align: left;
	cursor: auto;
	visibility: hidden;
	opacity: 0;
	transition: .7s;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
	z-index: 99999;
}

.labels-popup:hover ul {
	visibility: visible;
	opacity: 1;
	transition: .6s;
}

.labels-popup ul li {
	display: block;
	margin: 0;
	padding: 1px 5px 1px 10px;
	width: 100%;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 13px;
}

.labels-popup ul li label {
	font-weight: normal;
}

.labels-popup ul li label:hover {
	cursor: pointer;
}


/* Add a new note */
.add-note-btn {
	display: block;
	height: 50px;
	width: 50px;
	position: fixed;
	bottom: 4%;
	right: 2%;
}

.add-note-btn .add-div {
	display: block;
	height: 50px;
	width: 50px;
	background: #d02f21;
	border-radius: 100px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .35);

	/* For ripple effect */
	position: relative;
	overflow: hidden;
}

.add-div:hover {
	background: #d23f31;
}

.add-note-btn button {
	display: block;
	height: 50px;
	width: 50px;
	border-radius: 100px;
	border: 0;
	outline: 0;
	color: #fff;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 32px;
	line-height: 155%;
	background: transparent;

	/* For ripple effect */
	position: relative;	/* Relatively positioned to bring it above the ripple (static positioned elements appear behind absolutely positioned siblings, i.e. the ripple element added via JS) */
}


/* Labels edit modal */
#labels-edit-modal {
	word-wrap: break-word;
	overflow-y: scroll;
}

#labels-edit-modal .modal-dialog {
	max-width: 400px;
}

#labels-edit-modal .modal-header {
	border: 0;
	padding-left: 30px;
}

#labels-edit-modal .modal-header .modal-header-title {
	font-family: Roboto, sans-serif;
	font-size: 18px;
	font-weight: 500;
}

#labels-edit-modal .modal-body {
	padding: 3px 30px 25px;
}

#labels-edit-modal #add-label-form {
	margin-bottom: 20px;
	width: 100%;
}

#labels-edit-modal #add-label-form span {
	margin-left: -3px;
	margin-right: 3px;
	font-family: Roboto, sans-serif;
	font-size: 18px;
	color: #aaa;
}

#labels-edit-modal #add-label-form input {
	width: 90%;
	border: 0;
	outline: 0;
	border-bottom: 1px solid transparent;
	font-family: Roboto, sans-serif;
}

#labels-edit-modal #add-label-form input:focus {
	border-bottom: 1px solid #aaa;
}

#labels-edit-modal ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#labels-edit-modal ul li {
	margin-bottom: 10px;
	font-family: Roboto, sans-serif;
}

#labels-edit-modal a.opt-icon {
	float: right;
}

#labels-edit-modal a.opt-icon:hover {
	opacity: 1;
	cursor: pointer;
}


/* About modal */
#about-modal {
	word-wrap: break-word;
	overflow-y: scroll;
	margin-top: 7%;
}

#about-modal .modal-dialog {
	max-width: 500px;
}

#about-modal .modal-content {
	border-radius: 0;
	background: #f4c832;
}

#about-modal .modal-header {
	border: 0;
	padding-left: 30px;
}

#about-modal .modal-header .modal-header-title {
	font-family: 'Noto Sans', Roboto, sans-serif;
	font-size: 24px;
	font-weight: bold;
}

#about-modal .modal-body {
	padding: 3px 30px 25px;
}

#about-modal .modal-body p {
	font-family: Roboto, sans-serif;
}


/* Demo notice */
#demo-notice {
	z-index: 10;
	background: #f8f800;
	width: 100%;
	text-align: center;
	padding: 2px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	font-family: 'Roboto Condensed', sans-serif;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 51%;
	-webkit-box-shadow: 1px 0px 26px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 1px 0px 26px 0px rgba(0, 0, 0, 0.75);
	box-shadow: 1px 0px 26px 0px rgba(0, 0, 0, 0.75);
}

#close-demo-notice {
	background: transparent;
	float: right;
	border: 0;
	outline: 0;
}


/* Icons */
.icon-archive {
	background-image: url('../icons/archive.svg');
}

.icon-unarchive {
	background-image: url('../icons/unarchive.svg');
}

.icon-trash {
	background-image: url('../icons/trash.svg');
}

.icon-tag {
	background-image: url('../icons/tag.svg');
}

.icon-delete {
	background-image: url('../icons/delete.svg');
}

.icon-restore {
	background-image: url('../icons/restore.svg');
}

.icon-palette {
	background-image: url('../icons/palette.svg');
}

.icon-pencil {
	background-image: url('../icons/pencil.svg');
}

.icon-mic {
	background-image: url('../icons/mic.svg');
}

.icon-mic-active {
	background-image: url('../icons/mic-active.svg');
}

.icon-mic-slash {
	background-image: url('../icons/mic-slash.svg');
}

.icon-speaker {
	background-image: url('../icons/speaker.svg');
}

.icon-check {
	background-image: url('../icons/check.svg');
}

.icon-paperclip {
	background-image: url('../icons/paperclip.svg');
}

.icon-dots {
	background-image: url('../icons/dots.svg');
}

.icon-cog {
	background-image: url('../icons/cog.svg');
}

.icon-info {
	background-image: url('../icons/info.svg');
}

.icon-github {
	background-image: url('../icons/github.svg');
}

.icon-terminal {
	background-image: url('../icons/terminal.svg');
}