archwhite
11/29/2017 - 11:23 PM

Workflowy Stylish css

main content css

/* site specific for when you are logged out or whatever */
.header-bar {
    border-bottom: none;
    background: #383D40;
    padding: 0;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 800px;
    z-index: 100;
    white-space: nowrap;
}
img.logo--top {
    content: url(https://rawgit.com/incace/matFlow/master/assets/logo.svg);
    background-color: #4a88b3;
    margin: 0;
    padding: 8px;
    width: 24px;
    height: 24px;
    border-radius: 0;
}
.button--top-right {
    margin: 0;
    padding: 8px 12px;
    width: auto;
    height: 24px;
    border: 0;
    border-radius: 0;
    line-height: 24px;
    text-transform: uppercase;
    font-size: 13px;
    text-shadow: none !important;
    background: #495157 !important;
    font-weight: 700;
}
.button--top-right:hover {
    color: #27AE60 !important;
}
.top-section {
	padding-top: 40px;
}
.headline {
    font-size: 48px;
    color: #27ae60;
    font-weight: 300;
}
.button--large {
    color: #fff !important;
    border: none;
    border-radius: 0;
    background: #495157;
    text-transform: uppercase;
    text-shadow: none !important;
    font-weight: 700;
}
.button--large:hover {
    background: #27ae60;
}
.story__text {
    color: #696e73;
}
/*=============================================
=         matFlow.dark - [WorkFlowy]          =
=============================================*/
/*
		matFlow.dark is a dark theme for the WorkFlowy web app. It started initially as a few tweaks locally and ended up turning into a full-blown theme. It has a flat clean design that enables your eyes to relax and focus on what is important; sex, drugs and EDM. There are a ton of bugs.
*/

@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local('Open Sans Light'),local('OpenSans-Light'),url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'),local('OpenSans'),url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'),local('OpenSans-Semibold'),url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2')}

@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'),local('Roboto-Light'),url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2')}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2')}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2')}

body,
#pageContainer {
	font-weight: normal;
	overflow-y: initial;
	overflow-x: hidden;
}
body {
	color: #EEE;
	background: #2B2E2F;
}
body,
#documentView,
#searchBox,
.saveButton,
.showCompletedButton,
#buttonBar,
#helpButton,
#savedViewHUD,
#controlsLeft,
#itemSelectionControls,
.ui-widget,
.button--top-right,
.headline,
*, h1, h2, h3, h4, h5, h6, p, li,
.entry-title,
.hentry div.sharedaddy h3.sd-title,
.hentry h3.sd-title,
#keyboardShortcutHelper,
#site_message {
    font-family: 'Roboto', sans-serif;
}
a:link,
a:active,
#logo,
#searchBox,
#searchCancel>svg>line,
.parent> .name> .content,
.saveButton,
.showCompletedButton,
#buttonBar,
.menu-icon,
.menu-options,
#helpButton,
.undo-button,
.redo-button,
.menu-options>.button,
#savedViewHUDButton,
#controlsLeft,
#itemSelectionControls,
#controlsLeft a,
#itemSelectionControls a,
.content .contentTag,
.nameAnimated .contentTag,
.fancyButton,
#font-gallery .option-thumb,
.ui-button,
.header-image img,
.header-image a::after,
#keyboardShortcutHelper,
.ui-dialog .ui-dialog-titlebar-close span,
.bigSquareButton,
.content .contentTag::before,
.nameAnimated .contentTag::before,
#message .close {
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
}
#loadingScreen {
	background: #2B2E2F !important;
}
#loadingScreenSpinner {
	background: none !important;
	width: 80px !important;
	height: 80px !important;
	border-radius: 80px;
	border: 2px solid #667079;
	top: 28%;
	top: -webkit-calc(50% - 43px);
	top: calc(50% - 43px);
	left: 35%;
	left: -webkit-calc(50% - 43px);
	left: calc(50% - 43px);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-animation: spinner 2s linear infinite;
	animation: spinner 2s linear infinite;
	box-shadow: inset 0 0 0 10px rgba(73, 81, 87, 0.75),
							inset 0 0 0 20px rgba(73, 81, 87, 0.4),
							inset 0 0 0 30px rgba(73, 81, 87, 0.25);
}
#loadingScreenSpinner:after {
	content: "";
	position: absolute;
	top: -5px;
	left: 10px;
	width: 12px;
	height: 12px;
	border-radius: 12px;
	background-color: #27ae60;
	border: 3px solid #2b2e2f;
	-webkit-animation: orbit 1s linear infinite;
	animation: orbit 1s linear infinite;
	box-shadow: 0 0 24px 0 rgba(39, 174, 96, 0.75);
}
#loadingScreenMessage {
	display: block !important;
	margin-top: 20px !important;
	text-transform: uppercase;
	font-size: 20px !important;
	color: #667079;
	-webkit-animation: loading 2s linear infinite;
	animation: loading 2s linear infinite;
}
@-webkit-keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
        transform: rotate(0deg);
		box-shadow: none;
		border-color: #667079;
	}
	50% {
		box-shadow: inset 0 0 0 10px rgba(73, 81, 87, 0.75),
								inset 0 0 0 20px rgba(73, 81, 87, 0.4),
								inset 0 0 0 30px rgba(73, 81, 87, 0.25);
		border-color: #a5b6c3;
	}
	100% {
		-webkit-transform: rotate(360deg);
        transform: rotate(360deg);
		box-shadow: none;
		border-color: #667079;
	}
}
@keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
        transform: rotate(0deg);
		box-shadow: none;
		border-color: #667079;
	}
	50% {
		box-shadow: inset 0 0 0 10px rgba(73, 81, 87, 0.75),
								inset 0 0 0 20px rgba(73, 81, 87, 0.4),
								inset 0 0 0 30px rgba(73, 81, 87, 0.25);
		border-color: #a5b6c3;
	}
	100% {
		-webkit-transform: rotate(360deg);
        transform: rotate(360deg);
		box-shadow: none;
		border-color: #667079;
	}
}
@-webkit-keyframes orbit {
	0% { box-shadow: none; }
	25% { box-shadow: 0 0 24px 0 rgba(39, 174, 96, 0.75); }
	50% { box-shadow: none; }
	75% { box-shadow: 0 0 24px 0 rgba(39, 174, 96, 0.75); }
	100% { box-shadow: none; }
}
@keyframes orbit {
	0% { box-shadow: none; }
	25% { box-shadow: 0 0 24px 0 rgba(39, 174, 96, 0.75); }
	50% { box-shadow: none; }
	75% { box-shadow: 0 0 24px 0 rgba(39, 174, 96, 0.75); }
	100% { box-shadow: none; }
}
@-webkit-keyframes loading {
	0% { color: transparent; }
	50% { color: #667079; }
	100% { color: transparent; }
}
@keyframes loading {
	0% { color: transparent; }
	50% { color: #667079; }
	100% { color: transparent; }
}
#documentView {
	padding-top: 39px;
	color: #EEE;
	width: 100%;
	height: auto;
	margin: 0px;
	overflow: hidden;
}
#pageContainer {
	margin-top: 18px;
}
#header {
	border-bottom: none;
	background: #383D40;
	padding: 0;
	height: 40px;
}
#logo {
	background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/logo.svg');
	background-position: center center;
	background-size: 24px;
	background-color: #4a88b3;
	margin: 0;
	padding: 8px;
	width: 24px;
	height: 24px;
}
#searchForm {
	top: 0;
    margin-left: 0;
}
/* #searchBox {
	color: #A5B6C3;
	background-color: #4F595F;
	border: none;
	width: 200px;
	height: 20px;
	padding: 10px 12px;
	font-size: 14px;
	opacity: .75;
	margin: -5px 0 0 0;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
} */
#searchBox {
    position: absolute;
    top: 0;
    left: 40px;
    width: 40px;
    height: 40px;
    padding: 0 0 0 40px;
    font-size: 14px;
    line-height: 1;
    color: #8d9398;
    border: 0;
    background-color: transparent;
    background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/searching-grey.svg');
    background-repeat: no-repeat;
    background-position: 8px 9px;
    background-size: auto 24px;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 1;
}
#searchBox:focus,
#searchBox:hover {
    outline: none;
    width: 200px;
    background-color: #495157;
    background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/searching.svg');
    background-repeat: no-repeat;
    background-position: 8px 9px;
    background-size: auto 24px;
    cursor: default;
}
#searchBox::-webkit-input-placeholder {
    color: #8d9398;
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
    text-transform: uppercase;
    font-weight: 700;
}
#searchBox:-moz-placeholder {
    color: #8d9398;
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
    text-transform: uppercase;
    font-weight: 700;
}
#searchBox::-moz-placeholder {
    color: #8d9398;
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
    text-transform: uppercase;
    font-weight: 700;
}
#searchBox:-ms-input-placeholder {
    color: #8d9398;
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
    text-transform: uppercase;
    font-weight: 700;
}
#searchBox:focus::-webkit-input-placeholder {
    color: transparent;
}
#searchBox:focus:-moz-placeholder {
    color: transparent;
}
#searchBox:focus::-moz-placeholder {
    color: transparent;
}
#searchBox:focus:-ms-input-placeholder {
    color: transparent;
}
#searchCancel {
    top: 14px !important;
    right: 14px !important;
    width: 14px !important;
    height: 14px !important;
    display: none !important;
}
#searchCancel>svg>line {
	stroke: #8d9398;
	stroke-width: 2;
}
#searchCancel:hover>svg>line {
	stroke: #c55044 !important;
}
#savedViewHUDButton {
	width: 40px;
	height: 40px;
	margin: 0;
	background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/star.svg');
	background-size: 26px;
	background-position: center center;
	background-repeat: no-repeat;
    background-color: #495157;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
    opacity: .5;
}
#savedViewHUDButton:hover,
#savedViewHUDButton:active {
    opacity: 1;
	background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/star.svg');
	background-size: 26px;
	background-position: center center;
	background-repeat: no-repeat;
    background-color: #495157;
}
#buttonBar {
	margin: 0;
	background: #495157 !important;
}
#buttonBar .menu-button {
	padding: 0;
	height: 40px;
	width: 40px;
}
#buttonBar .menu-icon {
	background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/menu.svg');
	margin: 0;
	padding: 8px;
	width: 24px;
	height: 24px;
}
#buttonBar:hover .menu-icon {
	background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/menu-h.svg');
}
#buttonBar.open .menu-icon {
	background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/menu-h.svg');
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
#buttonBar .menu-icon,
#buttonBar:hover .menu-icon,
#buttonBar.open .menu-icon {
	background-size: 24px;
	background-position: center center;
	background-repeat: no-repeat;
}
.menu-options {
	top: 40px;
	right: -200px;
	background: #495157;
	border: none;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	display: block;
	padding: 0;
    max-width: 200px;
}
#buttonBar.open .menu-options {
	/* opacity: 1; */
	right: 0;
}
.menu-options .topBarButtonTextContainer {
	line-height: initial !important;
}
.menu-options>.button {
	padding: 10px 20px;
	font-size: 13px;
	text-transform: uppercase;
}
.menu-options>.button:first-child {
	margin-top: 10px;
}
.menu-options>div:hover,
.menu-options>div>a:hover {
	background: none;
	color: #27AE60;
}
.menu-options>#userEmail {
	padding: 7px 10px;
	margin: 10px 0 0;
	font-size: 11px;
	font-weight: 600;
	color: #939da7;
	background: #383d40;
	overflow: hidden;
    text-overflow: ellipsis;
}
.saveButton,
.showCompletedButton,
#buttonBar,
#helpButton {
	border: none !important;
	background: none;
}
.saveButton,
.showCompletedButton,
#helpButton {
	font-weight: 500;
}
.showCompletedButton:hover,
#helpButton:hover {
	background-color: transparent !important;
	color: #27AE60 !important;
}
.saveButton .topBarButtonTextContainer {
	color: inherit !important;
}
.undo-button,
.redo-button {
	margin: 0;
	padding: 0;
}
.undo-icon,
.redo-icon {
	margin: 0;
	padding: 8px;
	width: 24px;
	height: 24px;
}
.undo-icon {
	background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/undo.svg');
	background-size: 24px;
	background-position: center center;
	background-repeat: no-repeat;
}
.redo-icon {
	background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/redo.svg');
	background-size: 24px;
	background-position: center center;
	background-repeat: no-repeat;
}
.undo-button.enabled:hover,
.redo-button.enabled:hover {
	opacity: 1 !important;
	background: none !important;
}
.undo-button.enabled:hover {
	-webkit-transform: rotate(-360deg);
	transform: rotate(-360deg);
}
.redo-button.enabled:hover {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
.topBarButtonTextContainer {
	line-height: 24px !important;
}
#backgroundImage {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 1;
	background-image: none !important;
	background-color: #2B2E2F;
}
@media screen and (min-device-width:1501px) {
	#backgroundImage {
		background-image: none !important;
		background-color: #2B2E2F;
	}
}
.contentBold {
    font-weight: 700;
    color: yellow;
}
.highlight {
	height: 100%;
	left: -5px;
	padding: 2px 5px 1px;
	position: absolute;
	top: 2px;
	width: 100%;
}
.moving>.highlight,
.highlighted>.highlight {
	background: #1e1e1e !important;
}
.moving>.highlight,
.highlighted.moveHovered>.highlight {
	background: #1e1e1e !important;
}
.notes> .content {
	color: #8d9398 !important;
	/*font-style: italic;*/
}
.page {
	background: #2B2E2F !important;
	max-width: 100% !important;
	-webkit-border-radius: 0px !important;
	border: none !important;
	margin-bottom: 0px !important;
	padding: 0 60px !important;
	width: auto !important;
	transform: none !important;
}
.pageStar {
	position: absolute;
	top: 24px;
	right: 48px;
	height: 24px;
	width: 24px;
	background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/star.svg');
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 7px 6px;
	opacity: 1.0 !important;
	background-color: #383D40;
	padding: 5px;
	border-radius: 100%;
	z-index: 999;
	box-shadow: none;
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.pageStar:hover {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
}
.pageStar.starred {
	position: absolute;
	top: 24px;
	right: 48px;
	height: 24px;
	width: 24px;
	background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/star.svg');
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 7px 6px;
	opacity: 1.0 !important;
	background-color: #C55044;
	padding: 5px;
	border-radius: 100%;
	z-index: 999;
	box-shadow: none;
}
.parent>.name {
	line-height: .8em !important;
	margin: 0;
}
.parent> .name> .content {
	color: #667079 !important;
	font-size: 13px !important;
	line-height: 16px !important;
}
.parent> .name> .content:hover {
	color: #A7B4BF !important;
	text-decoration: none !important;
}
.parent> .name> .parentArrow {
	color: #495157 !important;
	line-height: 16px !important;
	font-size: 16px !important;
}
.parent> .name> .parentArrow:before {
	content: "»" !important;
}
.mainTreeRoot.selected {
	border-top: none !important;
}
.mainTreeRoot> .children> .project {
	font-size: 18px !important;
}
.parent.project>.children {
	padding: 0;
}
.selected {
	border-top: none !important;
}
.selected .project>.name {
	margin-bottom: 7px;
}
.selected.project>.children {
	padding: 20px 0 0 0;
}
.selected .project.noted>.name,
.selected .project.open>.name {
	margin-bottom: 0;
}
#expandButton > svg > line {
    stroke: #495157;
}
.selected > .name > #controls > #controlsLeft {
	top: 76px;
	left: 60px !important;
	background: #242627 !important;
}
.selected > .name > #controls > #controlsLeft a {
	font-size: 13px !important;
	font-weight: 700 !important;
	padding: 8px 20px !important;
    text-transform: uppercase;
}
.selected > .name > #controls > #controlsLeft a span {
	margin-right: 0 !important;
}
/* .selected.project > .name,
.selected.project > .notes {
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 100px;
}
.selected.project > .notes {
    top: 168px;
} */
.selected.project > .name {
    color: #FFFFFF !important;
    padding: 32px 60px !important;
    background-color: #242627 !important;
    margin: 10px 0 0 0 !important;
    margin-left: -60px !important;
    margin-right: -60px !important;
    font-size: 28px;
    border-top: 2px solid #383d40;
    border-bottom: 2px solid #383d40;
}
.selected.project.noted > .name {
    padding: 32px 60px 24px !important;
    border-bottom: none !important;
}
div.project.selected > div.name > div > a > span {
    margin-right: 0 !important;
    vertical-align: inherit;
}
.selected.project > .name a.contentLink {
    color: #51d087 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    vertical-align: top;
    background: #33754f;
}
.selected.project > .name a.contentLink:hover {
    color: #FFFFFF !important;
    border-color: #667079 !important;
}
.selected.project > .notes {
    background-color: #242627 !important;
    padding: 0 60px 16px !important;
    margin: 0 !important;
    margin-left: -60px !important;
    margin-right: -60px !important;
    border-bottom: 2px solid #383d40;
}
.selected.project > .name > .content,
.selected.project.addedShared > .name > .content {
    display: initial;
    padding: 10px 20px;
}
.selected.project > .name > .content {
    background: #27ae60;
}
.selected.project.addedShared > .name > .content {
    background: #d2be2d;
    color: #242627;
}
.selected.project.done > .name > .content:before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    width: 18px !important;
    height: 18px !important;
    background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/check-circle.svg') !important;
    background-position: center center;
    background-size: 18px;
    background-repeat: no-repeat;
    background-color: #242627;
    margin: 0 10px 0 0;
    padding: 4px;
    border-radius: 100%;
}
.selected > .notes > .content {
	color: #667079 !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
    line-height: 22px !important;
}
.selected.project > .notes a.contentLink {
	font-weight: 600 !important;
}
.selected.project > .children > .project {
    margin-bottom: 15px !important;
}
.selected.project > .children > .project > .children {
    border-bottom: 1px dashed #383D40;
}
.children {
	border-left: 1px dashed #383D40;
	/*padding: 15px 0 0 15px;*/
	margin-bottom: 10px;
}
.selected .children .project.open,
.selected .children .project.noted.open {
	margin-bottom: 15px !important;
}
.selected > .children > .project > .children > .project {
	padding: 0;
	border-bottom: none !important;
	margin-bottom: 5px !important;
}
.selected > .children > .project > .children > .project > .children {
	border-bottom: 1px dashed #383D40;
    padding-bottom: 10px;
}
.selected > .children > .project > .children > .project > .children > .project.open {
	border-bottom: none !important;
	margin-bottom: 0 !important;
}
.selected > .children > .project > .children > .project > .children > .project > .children {
	margin-bottom: 0;
}
.selected > .children > .project > .children > .project > .children > .project > .children > .project {
	border-bottom: none !important;
	margin-bottom: 0 !important;
}
.selected > .children > .project > .children > .project > .children > .project > .children > .project > .children {
	margin-bottom: 0 !important;
}
.selected>.children>.project .project {
	padding: 0 !important;
}
.selected>.children > .project > .children .project > .name {
	margin-bottom: 0;
}
.selected>.children > .project > .children .project > .name > .content {
	padding: 5px 0;
	line-height: 1.3em;
	min-height: inherit !important;
}
.project.noted .notes > .content {
	margin-bottom: 5px;
}
.project.noted.open .notes > .content {
	margin-bottom: 0px;
}
.project > .name > .bullet {
	margin-top: 9px !important;
	margin-left: 5px;
	padding: 0;
	width: 10px;
	height: 10px;
	-webkit-border-radius: 100% !important;
	-moz-border-radius: 100% !important;
	border-radius: 100% !important;
	background-color: #495157;
	background-image: none;
	border: none;
}
.project.task > .name > .bullet {
    margin-top: 9px !important;
	width: 7px;
	height: 7px;
	background-color: transparent;
	background-image: none;
	border: 2px solid #495157;
}
.project.open > .name > .bullet {
	margin-top: 7px !important;
	margin-left: 3px;
	width: 12px;
	height: 12px;
	background-color: transparent;
	background-image: none;
	border: 1px dashed #495157;
}
.project.addedShared > .name > .bullet {
	margin-top: 8px !important;
	margin-left: 4px;
	width: 8px;
	height: 8px;
	background-color: #d2be2d;
	-webkit-box-shadow: 0 0 0px 2px rgba(210, 190, 45, 0.35);
	-moz-box-shadow: 0 0 0px 2px rgba(210, 190, 45, 0.35);
	box-shadow: 0 0 0px 2px rgba(210, 190, 45, 0.35);
	border: 2px solid #2b2e2f;
}
.page.showCompleted .project.halfOpenSearchMatchAncestorWhenCompletedVisible:not(.shared):not(.addedShared) > .name > .bullet,
.bullet:hover,
.project.task > .name > .bullet:hover,
.project.open > .name > .bullet:hover,
.project.addedShared > .name > .bullet:hover,
.page.showCompleted .project.halfOpenSearchMatchAncestorWhenCompletedVisible:not(.shared):not(.addedShared) > .name > .bullet:hover,
.page:not(.showCompleted) .project.halfOpenSearchMatchAncestorWhenCompletedHidden:not(.shared):not(.addedShared) > .name > .bullet:hover {
	background-color: transparent;
}
.project>.name > .bullet:hover {
	background-color: #27AE60;
}
.project.task > .name > .bullet:hover {
	background-color: transparent;
	border-color: #27AE60;
}
.project.open > .name > .bullet:hover {
	background-color: transparent;
	border-color: #27AE60;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.project.addedShared > .name > .bullet:hover {
	background-color: rgba(210, 190, 45, 0.35);
	-webkit-box-shadow: 0 0 0px 2px #d2be2d;
	-moz-box-shadow: 0 0 0px 2px #d2be2d;
	box-shadow: 0 0 0px 2px #d2be2d;
	border-color: #2b2e2f;
}
.selected.project.addedShared:before {
    content: 'S';
    position: absolute;
    top: 28px;
    left: -12px;
    width: 24px;
    height: 24px;
    line-height: 25px;
    text-align: center;
    padding: 0;
    background: #2b2e2f;
    color: #d2be2d;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    z-index: 10;
    border-radius: 100%;
}
.project.done > .name > a.bullet {
	margin-top: 6px !important;
	margin-left: 3px !important;
	width: 16px !important;
	height: 16px !important;
	background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/check-circle.svg') !important;
	background-position: center center;
	background-size: 14px;
	background-repeat: no-repeat;
	border: none !important;
    background-color: transparent !important;
}
.project.done > .name > .bullet:hover {
    -webkit-transform: none;
    transform: none;
}
.project.done > .notes > .content {
	color: rgba(39, 174, 96, 0.35);
}
.project.done > .name,
.project.doneAppearance > .name {
    color: rgba(39, 174, 96, 0.75);
}
.content .contentLink,
.nameAnimated .contentLink {
	text-decoration: none;
	color: #27AE60 !important;
}
.content .contentLink:hover,
.nameAnimated .contentLink:hover {
	color: #ADF7B4 !important;
}
.name> .content {
	min-height: 24px !important;
}
.noted > .notes > .content {
	height: auto !important;
	min-height: 20px !important;
	overflow: visible !important;
	line-height: 20px;
	display: block !important;
}
.content .contentTag,
.nameAnimated .contentTag {
	position: relative;
    text-decoration: none !important;
    color: #ff8936 !important;
    background: #495157 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 4px 6px 5px !important;
    margin: 0 0 0 15px !important;
    vertical-align: text-bottom;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.content .contentTag::before,
.nameAnimated .contentTag::before {
    content: '';
    position: absolute;
    top: 0px;
    left: -12px;
    width: 0;
    height: 0;
    border-color: transparent #495157 transparent transparent;
    border-style: solid;
    border-width: 12px 12px 12px 0;
}
.content .contentTag::after,
.nameAnimated .contentTag::after {
    content: "";
    position: absolute;
    top: 9px;
    left: -4px;
    width: 6px;
    height: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #2b2e2f;
}
.content .contentTag:hover,
.nameAnimated .contentTag:hover {
	background: #ff8936 !important;
    color: #242627 !important;
}
.content .contentTag:hover::before,
.nameAnimated .contentTag:hover::before {
	border-color: transparent #ff8936 transparent transparent !important;
}
.content .contentTagText,
.nameAnimated .contentTagText {
	text-decoration: none !important;
}
.content .contentMatch {
    background-color: #e03b69 !important;
    color: #ffffff !important;
    padding: 0px 2px;
}
body.windowBlurred .project.addedToSelection,
.project.addedToSelection {
	background: #383d40;
}
.project.highlighted::before,
.project.moving::before,
.project.tapped::before,
.draggableNameClone::before {
    background: transparent !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
}
#dropdownMessages {
    width: calc(100vw - 59px);
    /* margin: auto; */
}
#message {
	background-color: #5D8A25;
	border: none !important;
	color: #FFF !important;
	top: 0 !important;
	padding: 0 !important;
}
#message > .messageContent a {
	color: #DDFF96 !important;
}
#message > .close {
	color: #FFF !important;
}
.messageContent {
	font-size: 16px;
	position: relative;
	padding: 18px 20px 17px;
	text-align: center;
	background-color: #C14438;
}
#message .close {
	font-size: 24px;
    line-height: 51px;
    top: 0;
    left: 100%;
    width: 51px;
    height: 51px;
    margin-left: 0;
    -webkit-animation: slide .5s forwards;
    animation: slide .5s forwards;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    text-align: center;
    opacity: 1;
    color: #fff;
    background-color: #2b2e2f;
}
#site_message {
	border: none !important;
    padding: 15px 20px;
    background: #4780a6;
    font-size: 14px;
}
#site_message .closeButton {
    top: 8px;
    margin-left: -32px;
    width: 30px;
	-webkit-transition: all 250ms ease;
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	transition: all 250ms ease;
}
@-webkit-keyframes slide {
	100% {
		left: 100%;
	}
}
@keyframes slide {
	100% {
		left: 100%;
	}
}
#message .close:hover {
	color: #c14438 !important;
}
#message > .messageContent a {
	font-size: 14px;
	font-weight: 600;
	padding: 3px 5px;
	text-decoration: none;
	text-transform: uppercase;
	color: rgb(255, 255, 255) !important;
	border: 2px solid rgba(255, 255, 255, .5) !important;
}
#message > .messageContent a:hover {
	color: #fff !important;
	border-color: #a23a30 !important;
	background: #a23a30 !important;
}
#getMoreSpaceButtonTopLeft,
#upgradeToProButtonTopLeft {
	display: none !important;
}
#bottomLinks {
	display: none !important;
}
.footer {
	display: none !important;
}
.proPitch {
	display: none !important;
}
span.plus {
	color: #cfcfcf !important;
}
span.text {
	color: #cfcfcf !important;
}
div.top.edge {
	display: none;
}
div.bottom.edge {
	display: none;
}
div.left.edge {
	display: none;
}
div.right.edge {
	display: none;
}
DIV.top.right.corner {
	display: none;
}
DIV.top.left.corner {
	display: none;
}
DIV.bottom.right.corner {
	display: none;
}
DIV.bottom.left.corner {
	display: none;
}
#savedViewHUD {
	position: fixed;
	width: 100%;
	height: calc(100% - 39px);
	background-color: rgba(56, 61, 64, 0.9) !important;
	z-index: 1000 !important;
	text-align: center !important;
}
#savedViewHUDPageContainer {
    padding: 60px 60px 30px !important;
    white-space: normal !important;
    overflow: auto;
    height: calc(92vh - 40px);
}
#savedViewHUDPageContainer:before {
    content: 'Starred Pages';
    position: fixed;
    top: 39px;
    left: 0;
    width: 100%;
    padding: 10px 0;
    background: #c55044;
    font-size: 18px;
    color: #ffb2aa;
    font-weight: 700;
    z-index: 2;
}
.savedViewPage {
    margin: 0;
    padding: 12px;
    width: 65%;
    height: auto;
    text-align: center;
    background: transparent;
    border: none;
    color: #696e73;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    -moz-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    box-shadow: none !important;
}
.savedViewPageFader,
.savedViewPageSearchStringContainer {
	display: none !important;
}
.savedViewPage.selectedSavedViewPage {
    top: 0;
    color: #27ae60;
    background-color: transparent;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.savedViewPage:hover {
    color: #FFF;
    border: none;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.savedViewPage.selectedSavedViewPage:hover {
    color: #27ae60;
    border: none;
}
.savedViewPageInnerContainer {
    opacity: 1;
}
.savedViewPageName {
    font-size: 18px;
    line-height: 1.3em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#controlsLeft,
#itemSelectionControls {
	padding: 10px 0 !important;
	width: auto !important;
	background: #495157 !important;
	border: none !important;
	box-shadow: none !important;
	-moz-border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
	border-radius: 0px !important;
}
.selected .project #controlsLeft>.mouse-helper:before {
	border-bottom: 15px solid #495157 !important;
}
#controlsLeft a,
#itemSelectionControls a {
	color: #FFFFFF !important;
	font-size: 13px !important;
	margin-right: 0px !important;
	padding: 7px 17px !important;
	margin-bottom: 0px !important;
	font-weight: 700 !important;
    text-transform: uppercase;
}
#controlsLeft a:hover,
#itemSelectionControls a:hover {
	color: #27AE60 !important;
	text-decoration: none !important;
	background-color: #383D40 !important;
}
#controlsLeft hr,
#itemSelectionControls hr {
	border-top: 1px solid transparent !important;
	margin: 0 !important;
}
.project.shared>.name #controlsLeft a.share,
.project.addedShared>.name #controlsLeft a.share {
	/* font-weight: bold !important; */
	font-size: 11px !important;
	line-height: 1 !important;
	text-shadow: none;
	background: #383d40;
	color: #d2be2d !important;
	margin: 0 4px 10px 4px !important;
	padding: 6px 10px 4px 10px !important;
	text-transform: uppercase;
}
#itemSelectionControls > .numSelectedItems {
	font-size: 0;
    line-height: 24px;
    position: absolute;
    top: -14px;
    right: 112px;
    overflow: hidden;
    width: auto;
    height: 24px;
    min-width: 24px;
    margin: 0;
    padding: 4px;
    color: #fff;
    border-radius: 100%;
    background: #C14438;
}
span.numSelectedItemsValue {
	font-size: 18px;
	font-weight: 600;
}
#controls #move {
	background: url(https://workflowy.com/media/i/move_icon_white.png) no-repeat !important;
}
#getMoreSpaceButtonTopRight {
	font-size: 10px;
	line-height: 10px;
	position: relative;
	top: initial;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	margin: auto;
	padding: 5px 5px;
	-webkit-transition: all 250ms ease;
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	transition: all 250ms ease;
	text-align: center;
	text-decoration: none;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5) !important;
}
#getMoreSpaceButtonTopRight:hover {
	color: rgba(255, 255, 255, .75) !important;
	border-color: #1a1c1d !important;
	background: #1a1c1d !important;
}
.ui-dialog {
	-webkit-box-shadow: 0 0 20px 5px #000000;
	-moz-box-shadow: 0 0 20px 5px #000000;
	box-shadow: 0 0 20px 5px #000000;
	outline: 10000px solid rgba(56, 61, 64, 0.8) !important;

}
.ui-corner-all {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.ui-widget-content {
	border: none;
	background: #383d40;
	color: #EEE;
}
.ui-widget-header {
    background: #242627;
    color: #FFF;
    border: none !important;
    border-bottom: 2px solid #495157 !important;
}
.ui-dialog .ui-dialog-title {
    text-shadow: none;
    margin: 0;
    padding: 10px 12px 9px;
    font-size: 18px;
    font-weight: 700;
    background: #27ae60;
    text-transform: uppercase;
}
.ui-dialog .ui-dialog-titlebar-close span {
	margin: 0;
	background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/close.svg');
	background-size: 16px;
	background-position: center center;
	background-repeat: no-repeat;
    opacity: .5;
}
.ui-dialog .ui-dialog-titlebar-close span:hover {
	background-size: 16px;
	background-position: center center;
	background-repeat: no-repeat;
    opacity: 1;
}
#settingsRight {
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}
#settingsPopup .setting {
	padding: 15px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.fancyButton,
input[type="submit"].submit.fancyButton {
    color: #EEE;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0;
    border: 2px solid #696e73;
    padding: 8px 10px 6px;
    text-decoration: none;
    background: transparent;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
}
.fancyButton:hover {
	box-shadow: none !important;
	background: #27AE60;
	border: 2px solid #27AE60;
}
#theme-gallery {
    background: none;
    background-color: #ddd;
    width: auto;
    height: 400px;
    top: -64px;
    left: 142px;
    padding: 15px 8px 15px 15px;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
}
.gallery>.closeMeButton {
    top: 0;
    right: 0;
}
.closeMeButton {
    display: block;
    margin: 0;
    padding: 4px;
    background: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/close.svg');
    background-size: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #383d40;
    width: 16px;
    height: 16px;
}
.closeMeButton:hover {
    background-position: center center;
    background-color: #495157;
}
#theme-gallery .galleryScroller {
    padding: 0 10px;
}
#theme-gallery .option-thumb {
    border: none !important;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35) !important;
    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35) !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35) !important;
}
#theme-gallery .option-thumb>.option-pretty-name {
    padding: 9px 12px;
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
}
#theme-gallery .option-thumb.current .option-pretty-name {
    background: #27ae60;
    opacity: 1;
}
.moreInfo {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    color: #383d40;
    font-weight: 700;
}
#font-gallery {
	border: none;
	background: #696e73;
	left: 37px;
}
#font-gallery .option-thumb.current {
	background: #495157;
}
#font-gallery .option-thumb:not(.current):hover {
	background: #818589;
}
#accountInfo {
	background: transparent;
	padding: 15px 10px;
	border: none;
	color: #e2e438;
}
#premium-features-more-button,
.smallSettingsButton {
	text-decoration: none;
}
.progressBarContainer {
	padding: 15px 10px;
	margin-bottom: 0;
}
.progressBar {
	width: 100% !important;
	height: 10px;
	margin-top: 10px;
	border: 2px solid #696e73;
	border-radius: 0;
	background: #383d40;
}
.currentProgress {
	background: #C55044;
}
.free_items {
	color: #696e73;
}
.quotaDetailedInformation {
	background: #c55044;
	border: none;
	padding: 10px;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.quotaDetailedInformation>.link {
	color: #e2e438;
}
#proSettingsBox {
	background: transparent;
	border: none;
	padding: 10px;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em 0;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	box-shadow: none;
	background: transparent;
	border: 2px solid #696e73;
	color: #eee;
}
.ui-button .ui-button-text {
	padding: 10px 15px;
	line-height: 1;
	text-shadow: none;
	text-transform: uppercase;
}
.ui-button:hover {
	background: #696e73;
	color: #fff;
}
#exportPopup .previewWindow,
#cutAndCopyBucket {
	color: #fff;
	background: #383d40;
}
.formattedExport,
#cutAndCopyBucket {
	color: #fff;
	font-size: 13px;
	line-height: 16px;
}
#exportPopup .previewWindow {
	border: 1px solid #667079;
	overflow-x: auto;
	overflow-y: scroll;
}
#exportPopup form {
	background: transparent;
	border: none;
	padding: 10px 0;
}
.formatOptionContainer label {
	vertical-align: text-top;
}
#exportPopup .instructions {
	color: #ccc;
	font-size: 14px;
	line-height: 1.4;
}
.ui-dialog a {
	color: #ffffff;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .5em .5em 0;
}
.ui-dialog .ui-dialog-buttonpane button:last-child {
	margin-right: 0 !important;
}
#keyboardShortcutHelper {
    outline: none !important;
    bottom: 0;
    right: 10px;
    background: #c55044;
    border: none;
    color: #ffd6d1;
    border-radius: 0;
    width: 200px;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
#keyboardShortcutHelper.closed {
    bottom: -627px;
}
#keyboardShortcutHelper.closed table {
    display: block;
}
#keyboardShortcutHelper .ui-widget-header {
    background: #2b2e2f;
    border: 2px solid #c55044 !important;
    color: #c55044;
}
#keyboardShortcutHelper td.commandName {
    background: #383d40;
    color: #ccc;
}
#keyboardShortcutHelper td {
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#shared_notice {
	width: auto;
	color: #eee;
	font-size: 13px;
	background: #495157;
	padding: 20px;
	text-align: center;
	border: none;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	box-shadow:
		0 3px 6px rgba(0, 0, 0, 0.15),
		0 3px 6px rgba(0, 0, 0, 0.20);
}
#shared_notice strong {
	border-bottom: 2px solid #27ae60;
}
#pro-thank-you-paragraph {
    color: #ffffff;
    border: 2px solid #27ae60;
    border-radius: 0;
}
#plan-upgrade-dialog h3 {
    color: #8d9398;
}
#about-wf-pro {
    width: 310px;
}
#premium-features-description {
    border: none;
    padding: 0 10px;
    margin: 20px 0;
    background: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
#choose-your-plan {
    border: none;
    margin-bottom: 10px;
    padding: 20px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    background: #495157;
}
.payment-form {
    border: 2px solid #27ae60;
    padding: 15px;
    background: #383d40;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#purchase-info table label {
    color: #8d9398;
}
img.padlock {
    display:none !important;
}
.bigSquareButton {
    padding: 20px;
    margin: 10px 0;
    border: 2px solid #27ae60;
    background: rgba(39, 174, 96, 0.75);
    box-shadow: none;
    border-radius: 0;
    opacity: .5;
}
.bigSquareButton:hover {
    opacity: 1;
}
#helpRadio {
    border-bottom: 2px solid #667079;
}
#helpRadio>span {
    top: 4px;
    border: 2px solid transparent;
    color: #667079;
}
#helpRadio>span.current {
    top: 4px;
    border-radius: 0 !important;
    border: 2px solid #667079;
    border-bottom: none;
    background: #383d40;
    color: #FFF;
}
#libraryContainer .book {
    color: #fff;
}
#libraryContainer .book.done {
    color: #667079;
}
#libraryContainer .fancyButton {
    padding: 4px 5px 2px;
}
#libraryContainer .book.done:before {
    content: "";
    display: inline-block;
    margin-right: 3px;
    background-image: url('https://cdn.rawgit.com/incace/matFlow/8b045097/assets/check-circle.svg') !important;
    background-position: center center;
    background-size: 12px;
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
}
#libraryContainer .fancyButton.active {
    box-shadow: none;
    text-shadow: none;
    color: #FFF;
    border: none !important;
    background: #167ac6;
    padding: 7px 7px 4px;
}
#nextVideoButton.fancyButton {
    margin-left: -100px;
    margin-top: -20px;
    border-radius: 0;
}
#afterLibraryVideoCompleteBox .fancyButton {
    color: #fff;
}
.darkPaddedContainer {
    background: transparent;
    border: 2px solid #27ae60;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
#howTo table td.commandName {
    background-color: #495157;
}
#howTo td {
    border: 1px solid #667079;
}

::-moz-selection {
    background: #5d6163;
    color: #bcec85;
}
::selection {
    background: #5d6163;
    color: #bcec85;
}
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: #383d40 !important;
	border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
	background: #495157 !important;
}
::-webkit-scrollbar-thumb:active {
	background: #495157 !important;
}