/*-----------------------------------------------------------------------------------

APP CONTAINER

-----------------------------------------------------------------------------------*/

/*
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}*/

body {
    margin: 0;
    color: rgba(0, 0, 0, 0.87);
    font-size: 1rem;
    font-weight: 400;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    line-height: 1.5em;
    background-color: #fff;
    /*-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
    /* position: fixed; */
    width: 100%;
    height: 100%;
}
/*
.appcontainer {
	width: 100%;
    height: 100%;
    position: absolute;
}

.appcontainer > main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    overflow: hidden;
    align-content: start;
}

.appcontainer > main > .app-header {
    flex: 0 0 auto;
}

.appcontainer > main > .pages {
	width: 100%;
    overflow: auto;
	flex: 1 1 auto;
	display: flex;
}

.appcontainer > main > .pages aside:not(.pinned) {
    position: fixed;
    width: 100%;
    height: 100%;
	z-index: 999;
}

.appcontainer > main > .pages aside.pinned {
    flex: 0 0 320px;
    border-left: 1px solid #666;
}

.appcontainer > main > .pages aside:not(.pinned) .aside-content {
	position: absolute;
    right: 0;
	min-width: 320px;
    height: calc(100% - 56px);
    border-left: 1px solid #666;
    box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12);
	opacity: 0;
	transform: translateX(100%);
	animation: slide-in-from-right 0.225s forwards;
	background: #fff;
}
.appcontainer.size-L > main > .pages aside:not(.pinned) .aside-content {
	min-width: 320px;
	max-width: 75%;
}
.appcontainer.size-XL > main > .pages aside:not(.pinned) .aside-content {
    height: calc(100% - 64px);
    min-width: 320px;
	max-width: 950px;
}
.appcontainer > main > .pages aside:not(.pinned) .backdrop {
    background: rgba(0,0,0,0.5);
    width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.appcontainer > main > .pages aside.animated .backdrop {
	animation: fade-in 0.225s forwards;
}

.appcontainer > main > .pages aside.hidden {
	display: none;
}

.appcontainer > main > .botton-navigation {
	flex: 0 0 auto;
	position: relative;
}*/

.menu-dialog-list {
	min-width: 240px; 
}

.menu-dialog-list .MuiListItem-root {
	justify-content: center;
}

.portal {
	display: inline-block;
}


/*
.content-placeholder {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: content-placeholder-animation;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 96px;
    position: relative;
}

@keyframes content-placeholder-animation {
    0%	 { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}*/



/*-----------------------------------------------------------------------------------

KEYFRAME ANIMATIONS

-----------------------------------------------------------------------------------*/

@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-webkit-keyframes fade-in {
	0% { opacity: 0; transform: scale(0.5, 0.5) translatey(200px); }
	100% { opacity: 1; transform: scale(1,1) translatey(0px); }
 }

 @keyframes fade-out {
	0% { opacity: 1; }
	100% { opacity: 0; }
 }
 
 @-webkit-keyframes fade-out {
	0% { opacity: 1; }
	100% { opacity: 0;}
 }

@-webkit-keyframes pulse {
	0% {
	    -webkit-transform: scale(0);
	    transform: scale(0);
	    opacity: 0
	}
	50% {
	    -webkit-transform: scale(.99);
	    transform: scale(.99)
	}
	100% {
	    -webkit-transform: scale(1);
	    transform: scale(1);
	    opacity: 1;
	    visibility: visible
	}
}
@keyframes pulse {
	0% {
	    -webkit-transform: scale(0);
	    transform: scale(0);
	    opacity: 0
	}
	50% {
	    -webkit-transform: scale(.99);
	    transform: scale(.99)
	}
	100% {
	    -webkit-transform: scale(1);
	    transform: scale(1);
	    opacity: 1;
	    visibility: visible
	}
}
@keyframes slide-in-from-right {
	0% { transform: translateX(100%); opacity: 0;}
	1% { transform: translateX(100%); opacity: 1;}
	100% { transform: translateX(0); opacity: 1; }
}

/*-----------------------------------------------------------------------------------

CONTENT PLACEHOLDER

-----------------------------------------------------------------------------------*/

.content-placeholder {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: content-placeholder-animation;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 96px;
    position: relative;
}

@keyframes content-placeholder-animation {
    0%	 { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}



/*-----------------------------------------------------------------------------------

APPBAR

-----------------------------------------------------------------------------------*/

.app-header {
	background-color: #A5C597;
    width: 100%;
    box-sizing: border-box;
    height: 64px;
}

.app-header-row {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	box-sizing: border-box;
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	align-self: stretch;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	height: 64px;
	margin: 0;
	padding: 0 40px 0 80px;
	background: #000927;
	max-width: 1400px;

}

.app-header-row nav {
	margin-right: -8px;
}

.app-header-title {
	display: block;
	position: relative;
	font-family: "Roboto","Helvetica","Arial",sans-serif;
	font-size: 20px;
	line-height: 1;
	letter-spacing: .02em;
	font-weight: 400;
	box-sizing: border-box;

	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;

	padding-left: 40px;
	margin-right: 100px;
	cursor: pointer;
}

.app-header-logo {
	display: flex;
    align-items: center;
}

.app-header-title::after {
	content: '';
	display: block;
	background: url(./assets/favicons/favicon-144x144.png) no-repeat;
	background-size: contain;
	width: 154px;
	height: 25px;
	position: absolute;
	left: 7px;
	top: -3px;
}

.app-header-spacer {
	-webkit-flex-grow: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

.app-header .name-box {
	background-color: #F2DA8F;
	width: 24px;
	height: 24px;
	display: inline-block;
	border-radius: 4px;
	font-weight: 500;
	line-height: 24px;
	text-align: center;
	margin-right: 10px;
}


@media screen and (max-width: 1023px) {
	.app-header { 
		height: 56px;
	}
	.app-header-row {
		height: 56px;
		padding: 0 16px 0 20px;
	}
}
 
@media (min-width: 500px) {
	.app-header-row {
		padding-left: 20px;
		padding-right: 20px;
		margin: 0 auto;
		width: 100%;
	}
}


/*-----------------------------------------------------------------------------------

CARD

-----------------------------------------------------------------------------------*/

.card {
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 2px 1px -1px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	position: relative;
	margin-bottom: 24px;
}
.card.no-margin {
	margin-bottom: 0;
}

.card header {
	display: flex;
	align-items: center;
	padding: 16px;

	font-size: 0.875rem;
	font-weight: 400;
	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	line-height: 1.46429em;
}
.card header .inner {
	flex: 1 1 auto;
}
.card header .inner h2 {
	color: rgba(0, 0, 0, 0.87);
	font-size: 1.5rem;
	line-height: 1.35417em;
	font-weight: 400;
	margin: 0;
}
.card header .inner h2.small {
	font-size: 16px;
}
.card header .inner .subtitle {
	color: rgba(0, 0, 0, 0.54);
}
.card header .action {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: -8px;
	margin-right: -16px;
}

.card .content {
	padding: 0 16px 16px 16px;
}
.card.content-nopadding .content {
	padding: 0;
}
.card.content-nopadding-bottom .content {
	padding-bottom: 0;
}

.card .actions {
	display: flex;
	padding: 8px 4px;
	box-sizing: border-box;
	align-items: center;
}
.card-help {
	position: absolute;
	top: 12px;
	right: 24px; 
}

.card-help > button {
	width: 12px;
	height: 12px;
	background-color: #939393;
	color: #fff;
	font-size: 10px;
}

@media (min-width: 600px)  {
	.card header {
		padding-left: 24px;
		padding-right: 24px;
	}
	.card .content {
		padding: 0 24px 16px 24px;
	}
	.card .actions {
		padding: 8px 12px;
	}
}

.object-cards {

}

.object-card {
    width: 100%;
    box-sizing: border-box;
    display: block;
    text-align: left;
}

.object-card.selected > .MuiPaper-root {
	background: #eee;
}

.object-cards .object-card {
	margin: 8px 8px 0;
	width: calc(100% - 16px);
}

.object-cards h5 {
	margin: 0;
	padding: 12px 12px 0;
}

.object-card .MuiPaper-root {
	width: 100%;
	color: rgb(95, 99, 104);
}

.object-card .MuiCardHeader-root{
	align-items: flex-start;
}
.object-card .MuiCardActions-root {
	font-size: 13px;
	color: #777;
}

.object-card .MuiCardHeader-content .MuiCardHeader-title {
	color: #202124;
	font-weight: 500;
	font-size: 13px;
	margin-bottom: 8px;
}

.object-card .MuiCardHeader-content .MuiCardHeader-subheader { 
	xcolor: rgb(95, 99, 104);
}


/*-----------------------------------------------------------------------------------

CONTENT CARDS AND CONTENT SHOW

-----------------------------------------------------------------------------------*/

.content-cards .cards {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    margin: 0 -6px;
}


.content-cards .cards .card {
    width: calc(33.333% - 12px);
    margin: 6px;
    display: flex;
    flex-flow: column;
}

.content-cards .cards .card .title {
    display: flex;
    align-items: center;
	align-content: center;
	margin-bottom: 0.35em;
}

.content-cards .cards .card .title .MuiAvatar-root {
	margin-right: 12px;
}

.content-cards .cards .card .title h2 {
	margin: 0;
}

.content-cards .cards .card .sub-title {
    color: #777;
    font-size: 14px;
    margin-bottom: 12px;
}
.content-cards .cards .card .MuiCardActionArea-root {
	display: flex;
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
    vertical-align: top;
    align-content: flex-start;
	flex-flow: row wrap;
	text-align: left;
}
.content-cards .cards .card .MuiCardActions-root {
	flex: 0;
}
.content-cards .cards .card .media {
	height: 140px;
    flex: 1 0 100%;
    width: 100%;
}

.content-cards .cards .card .MuiCardContent-root {
	min-height: 120px; 
}

.icon-stats {
    font-size: 12px;
	color: #777;    
	position: relative;
    top: -2px;
}
.icon-stats .material-icons {
	font-size: 18px;
    margin-right: 4px;
    position: relative;
    top: 4px;
    margin-left: 6px;
}

.content-show-dialog .MuiDialogContent-root {
	min-height: 250px;
}
.content-show-swipe-drawer {
}

.content-show-swipe-drawer .inner {
	width: 400px;
	height:100%;
	display: flex;
	flex-flow: column;
}
.content-show-swipe-drawer .MuiCardContent-root {
	flex: 1;
}
.content-show-swipe-drawer .MuiCardActions-root {
	padding: 12px 16px;
}

.content-show-swipe-drawer .MuiToolbar-root .MuiButtonBase-root {
	left: 12px;
}

.content-show-swipe-drawer .MuiCardMedia-root {
	height: 250px;
}
.content-show-swipe-drawer .MuiToolbar-root {
	padding: 0 16px; 
}

.content-show-fullscreen-dialog header {
	position: relative;
    background: #fff;
    color: #000;
    box-shadow: none;
	border-bottom: 1px solid #777;
}

@media (min-width: 600px) {
	.content-show-swipe-drawer .MuiToolbar-root {
		height: 56px;
		min-height: 56px;
	}
}






/*-----------------------------------------------------------------------------------

DATA TABLE

-----------------------------------------------------------------------------------*/

.data-table {
	width: '100%';
	/*margin-top: 24px;*/
}
.data-table .paper {
	width: '100%';
	margin-bottom: 24px;
}
.data-table.fill { 
	flex: 1 1 100%;
	display: flex;
	flex-flow: column;
	/*max-width: 775px;*/
}
.data-table.fill .paper { 
    margin-bottom: 0;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
	flex: 1 0 100%;
}
.data-table .table-wrapper {
	overflow-x: auto;
}
.data-table .MuiTableRow-root {
	cursor: pointer;
}
.data-table .table {
	/*min-width: 750px;*/
}
.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	top: 20px;
	width: 1px;
}


/*-----------------------------------------------------------------------------------

GRID

-----------------------------------------------------------------------------------*/

.grid {
	width: 100%;
}

.pt-object .grid {
	/*height: calc(100% - 42px);
	overflow: auto;
	margin: 0;
	background: #e7e7e7;*/
}

.pt-object .grid .grid-header {
	/*margin: -10px -10px 15px;*/
}

.grid .grid-inner {
	display: flex;
	flex-flow: row wrap;
	overflow: hidden;
}

.pt-object .grid .grid-inner {
	padding: 5px;
}

.grid-header {

}

/* Dashed */
.grid.dashed {
    padding: 12px;
    position: relative;
	box-sizing: border-box;	
	border: 3px dashed #eee;
	border-radius: 12px;
}
.grid.dashed.have-header {
	margin-top: 50px;
}
.grid.dashed .grid-header {
    position: absolute;
    top: -56px;
    display: inline-block;
    display: flex;
    align-items: center;
}

.grid.dashed .grid-header .button {
	margin-left: auto;
}




.grid-item {
	width: 25%;
	margin: 0;
	position: relative;
	box-sizing: border-box;
	padding: 12px;
	/*box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 2px 1px -1px rgba(0, 0, 0, 0.12);*/
	
}


/* Type: ICONBOX */
.grid.iconbox .grid-item .box {
	background: #eee;
    width: 90px;
    height: 90px;
    display: flex;
    flex-flow: column;
	align-items: center;
	border-radius: 5px;
	margin: auto;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.grid.iconbox .grid-item.clickable {
	cursor: pointer; 
}
.grid.iconbox .grid-item .box .material-icons {
	flex: 0 0 30px;
    margin-top: 20px;
}
.grid.iconbox .grid-item .box h6 {
	margin: 0;
    flex: 1;
}
.grid.iconbox .grid-item .description {
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.3;
    color: #d6d6d6;
}


/*.grid.borders .grid-item {
	border-right: 1px solid rgba(0, 0, 0, 0.117647);
	border-bottom: 1px solid rgba(0, 0, 0, 0.117647);
}*/
.grid.squere .grid-item {
	padding-top: calc(25% - 10px);
}
.grid.margins .grid-item {
	width: calc(25% - 10px);
	margin: 5px;
}

.grid.cols6 .grid-item {
	width: 16.666%;
}
.grid.cols6.squere .grid-item {
	padding-top: calc(16.666% - 10px);
}
.grid.cols6.margins .grid-item {
	width: calc(16.666% - 10px);
}

.grid.cols5 .grid-item {
	width: 20%;
}
.grid.cols5.squere .grid-item {
	padding-top: calc(20% - 10px);
}
.grid.cols5.margins .grid-item {
	width: calc(20% - 10px);
}

.grid.cols3 .grid-item {
	width: 33.333%;
}
.grid.cols3.squere .grid-item {
	padding-top: calc(33.333% - 10px);
}
.grid.cols3.margins .grid-item {
	width: calc(33.333% - 10px);
}

.grid.cols2 .grid-item {
	/*width: 50%*/
	width: calc(50% - 10px);
	margin: 5px;
	background: #fff;
	border-radius: 3px;
}
.grid.cols2.squere .grid-item {
	padding-top: calc(50% - 10px);
}
.grid.cols2.margins .grid-item {
	width: calc(50% - 10px);
}
.grid.borders.cols2 .grid-item:nth-child(2n) {
	border-right: none
}



/*-----------------------------------------------------------------------------------

ERROR BOUNDARY

-----------------------------------------------------------------------------------*/

.error-boundary {
	background: #ffb3a1;
	color: #000;
	font-size: 12px;
	border: 1px solid #ff5847;
	padding: 3px 5px;
	display: inline-block;
	margin: 10px;
}


/*-----------------------------------------------------------------------------------

TOG LEVELS

-----------------------------------------------------------------------------------*/

.tog-levels {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 12px;
}

.tog-levels > .labels {

}

.tog-levels > .labels label {

}

.tog-levels .togs {
	display: flex;
    flex-flow: row wrap;
}

.tog-level {
	width: 100px;
    padding: 12px 12px 4px 12px;
	box-shadow: 0 1px 1px 0 rgba(60,64,67,.1), 0 1px 3px 1px rgba(60,64,67,.1);
	margin: 12px;
	position: relative;
}

.tog-level .tog-area {
	background: #eee;
    height: 80px;
	box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.5);
	padding-top: 18px;
	padding-bottom: 6px;
}

.tog-level h5 {
	margin: 8px 0 5px;
    text-align: center;
    color: #777;
    line-height: 1.2;
}

.tog-level .label-area {
    position: absolute;
    top: 36px;
    left: 11px;
    width: 100px;
    height: 80px;
    pointer-events: none;
}

.tog-level .label-area label {
	position: absolute;
    width: 100%;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
}


/*-----------------------------------------------------------------------------------

PAGES

-----------------------------------------------------------------------------------*/

.pages {
	/* Defined in app-container above */
}

.page {
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	display: block;
	background-color: rgba(255,255,255,1);
	position: absolute;
	/*-webkit-transform-origin: center center;
	transform-origin: center center;*/
	transform: translate3d(0,0,0);  /* fast thru 3d accelerator */
}

.page-aside {
}

.page-dialogLarge {

}

.page-full .close-button {
	position: absolute;
	right: 20px;
	top: 20px; 
}


@media (max-width: 767px) {
	.page-aside {
		height: 500px;
		bottom: 0;
	}
	.aside-open .page.page-full{
		height: 300px; 
	}
	.page-aside .page-transition .list {
		height: 390px;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.open-aside .page-default {
		width: calc(100% - 300px);
	}
}
@media (min-width: 768px) {
	.page-aside {
		width: 300px;
		right: 0;
	}
	.aside-open .page.page-full{
		width: calc(100% - 300px);
	}
	.page-wrapper.hidden {
		display: none;
	}
}

/*-----------------------------------------------------------------------------------

PAGE COLS

-----------------------------------------------------------------------------------*/

.page-cols {
	height: 100%; 
	width: 100%;
    display: flex;
    flex-flow: row;
}

.page-col {
	height: 100%;
	overflow: hidden; 
	display: flex;
    flex-flow: column;
}
.page-col > *:not(.part-head) {
	overflow: auto;
}

.page-col.list {
	border-right: 1px solid #666;
	flex: 0 0 300px;
	background: #fff;
	position: relative;
}
.size-XL .page-col.list {
	flex: 0 0 320px;
}
.page-col.list .MuiListSubheader-root {
	background: #fff;
}

.page-cols.shrink-list .page-col.list,
.size-LARGE .page-cols.has-inspector .page-col.list {
	flex: 0 0 48px;
}
.page-cols.shrink-list .page-col.list > *:not(.part-head), 
.size-LARGE .page-cols.has-inspector .page-col.list > *:not(.part-head),
.page-cols.shrink-list .page-col.list .title > *:not(.tools),
.size-LARGE .page-cols.has-inspector .page-col.list .title > *:not(.tools) {
	display: none;
}
/*.page-cols.shrink-list .page-col.list .page-col.list .MuiList-root,
.size-LARGE .page-cols.has-inspector .page-col.list .MuiList-root {
	display: none;
}*/
.page-cols .close-inspector {
	display: none;
}
.page-cols.shrink-list .page-col.list .close-inspector,
.size-LARGE .page-cols.has-inspector .page-col.list .close-inspector {
	display: block;
}

.page-col.doc {
	flex: 1 1 auto;
	/*display: flex;
    flex-flow: column;*/
}

.page-col.inspector {
	flex: 0 0 320px;
	border-left: 1px solid #666;
	background: #fbfbfb;
	display: flex;
	flex-flow: column;
	box-shadow: 2px 10px 20px rgba(0,0,0,.1);
	position: relative;
	max-width: 320px;
}

.page-col.outer {
	border-left: 1px solid #666;
	flex: 0 0 320px;
	background: #fff;
	position: relative;
}

.part-head {
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	padding: 0 18px; 
	background-color: #e8e8e8;
	display: flex;
	align-items: center;
	position: relative;    
	flex: 0 0 48px;
	border-bottom: 1px solid #cacaca;
}
.inspector-head {
	padding-left: 12px; 
}

.inspector-footer {
    display: flex;
    justify-content: space-between;
	padding: 18px; 
}

.size-LARGE .part-head .pre-head,
.size-XL .part-head .pre-head {
	border-right: 1px solid #666;
	width: 320px;
}

.part-head .title > button[disabled] {
	color: #000;
}

.part-head .tools {
    display: flex;
    margin-left: auto;
}
.page-cols.shrink-list .tools,
.size-LARGE .page-cols.has-inspector .tools {
	right: 2px; 
}


.page-cols-small {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column;
}

.part-head .back-left {
    position: absolute;
    left: -6px;
	height: 48px;
	display: none;
	padding-left: 24px;
}

.part-head .back-left .material-icons {
    position: absolute;
    left: 0px;
}

.part-head .list-title {
	position: absolute;
	left: 0;
	width: 100%;
}

.part-head .list-title button {
	height: 48px;
	padding: 0 18px;
}
.part-head .list-title button.Mui-disabled {
	color: rgba(0, 0, 0, 0.87);
}


.part-head.multiple {

}

.part-head .doc-title {
	display: none;
}
.part-head .doc-tools {
	display: none;
    position: absolute;
    right: 18px;
    height: 48px;
    align-items: center;
}
.part-head .inspector-tools {
	display: none;
}

/* LIST HEAD STATUSES */
/* List */
.part-head.is-list {
}

.part-head .list-tools {
	position: absolute;
    top: 0;
    right: 0;
}

.part-head .list-tools button {
	padding: 12px; 
}


/* Document */
.part-head.is-doc {
}
.part-head.is-doc .back-left {
	display: block;
	animation: back-left-in 0.4s forwards;
}
@keyframes back-left-in {
	0% { transform: translateX(0px); }
	100% { transform: translateX(18px); }
}
.size-SMALL .part-head.is-doc .list-title {
	display: none;
}
.part-head.is-doc .doc-tools {
    display: flex;
}
.page-col .doc-content {
	flex: 1 1 100%;
}
.page-col .doc-content {
	flex: 1 1 100%;
}

.page-col .doc-below {
    flex: 1 1 100%;
	max-height: 300px;
	background: #fff;
}
.page-col .doc-status-bar {
	flex: 1 0 48px;
	background: rgba(0,0,0,0.2);
}

/* Inspector */
.part-head.is-inspector {
}
.size-LARGE .has-inspector .part-head .list-title {
	display: none;
}
.part-head.is-inspector .inspector-tools {
	display: block;
}
.part-head.is-inspector .list-title {
	display: none;
}
.part-head.is-inspector .doc-title {
	display: block;
}
.inspector-message {
	background: #fffcc1;
    padding: 12px 18px;
    font-size: 14px;
}


/* Doc Below */
.doc-below .part-head .tab-button {    
	margin-right: 6px;
	position: relative;
	top: 3px; 
	border-radius: 4px 4px 0 0;
}
.doc-below .part-head .tab-button.active {
	background: #fff;
}
.doc-below .part-head {
	background-color: #f3f3f3;
}


/* List things */
.list-fab {
    position: absolute;
    bottom: 24px;
	right: 24px;
	overflow: visible !important;
}

/* height on larger screens */
.size-LARGE .page-col .toolbar,
.size-LARGE .part-head,
.size-LARGE .part-head .back-left,
.size-LARGE .part-head .list-title button,
.size-LARGE .part-head .doc-tools {
	height: 56px;
	flex-basis: 56px;
}
/* height on extra large screens */
.size-XL .page-col .toolbar,
.size-XL .part-head,
.size-XL .part-head .back-left,
.size-XL .part-head .list-title button,
.size-XL .part-head .doc-tools {
	height: 64px;
	flex-basis: 64px;
}

/* below doc height on larger screens */
.size-LARGE .doc-below .part-head,
.size-LARGE .doc-below .part-head .back-left {
	height: 42px;
	flex-basis: 42px;
}
/* below doc height on extra large screens */
.size-XL .doc-below .part-head,
.size-XL .doc-below .part-head .back-left {
	height: 42px;
	flex-basis: 42px;
}

/* below doc state on large screens */
.size-LARGE .page-col.below-doc-state-expanded .doc-content {
	display: none;
}
.size-LARGE .page-col.below-doc-state-expanded .doc-below {
	max-height: inherit;
}
.size-XL .page-col.below-doc-state-expanded .doc-content {
	display: none;
}
.size-XL .page-col.below-doc-state-expanded .doc-below {
	max-height: inherit;
}
.size-LARGE .page-col.below-doc-state-closed .doc-below,
.size-XL .page-col.below-doc-state-closed .doc-below {
	max-height: 42px;
}



/*-----------------------------------------------------------------------------------
DOCUMENT
-----------------------------------------------------------------------------------*/

.document {
	flex: 1 1 100%;
    width: 100%;
    display: flex;
    flex-flow: column;
    min-height: 0;
}

.document > .content-wrapper {
    flex: 1;
    min-height: 0;
	display: flex;
	max-width: 850px;
	margin: auto;
	/*background: #fff;*/
	width:100%;
}

.page-col doc .document > .content-wrapper {
	box-shadow: rgba(60, 64, 67, 0.298039) 0px 1px 2px 0px, rgba(60, 64, 67, 0.14902) 0px 1px 3px 1px;
}	

.document > .content-wrapper > .overflow-container {
    overflow: auto;
    flex: 1;
    padding: 24px;
}
.document.no-padding > .content-wrapper > .overflow-container {
    padding: 0px;
}

.document > .content-wrapper > .overflow-container > .overflow-content {
    /*padding: 24px;*/
    /*border-radius: 12px;*/
    /*background: #fff;*/
}

.document-action {
    flex: 0 0 56px;
	background: #fffdfd;
	display: flex;
	justify-content: flex-end;    
	padding: 0 12px;
	border-top: 1px solid #eee;
}
.size-SMALL .document-action {
    flex: 0 0 48px;
}
.size-SMALL .document-action > .MuiToolbar-root {
	height: 48px;
	min-height: 48px;
}

.document-action > .action-left {
	margin-right: auto;
	display: inline-flex;
}

.document-action.inside {
    width: calc(100% - 12px);
	display: flex;
	justify-content: flex-end;    
	padding: 24px 0 0;
	border: none;
	background: none;
}
.document-action.inside button {
	background: #f1efef;
	margin-left: 12px;
}
/*
.document-action > .MuiToolbar-root {
	height: 48px;
	min-height: 48px;
}*/

.document .notification {
	font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 6px;
    background: #fafafa;
}

@media (min-width: 900px) {
	.page-col.doc .document > .content-wrapper > .overflow-container {
		padding-top: 24px;
	}
}

/*-----------------------------------------------------------------------------------
ARTICLE
-----------------------------------------------------------------------------------*/

article {
    width: 100%;
    height: 100%;
    background: #fafbf6
}

article .top-image {
	width: 100%;
	padding-top: 55%;
	background-repeat: none;
	background-size: cover;
}

article .content {

}

article .body {
	padding: 18px 24px;
}

/*-----------------------------------------------------------------------------------
Info Screen
-----------------------------------------------------------------------------------*/

.info-screen {
	width: 100%;
    height: 100%;
	background: #eee;
	position: relative;
	overflow: hidden;
}
.info-screen.transparent {
	background: transparent;
}

.info-screen .close-button {
	position: absolute;
	right: 0px;
	top: 0px; 
}

.page-col .info-screen {


}

.info-screen header {
	font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
    background: #e8e8e8;
    height: 48px;
    width: 100%;
	position: relative;    
	display: flex;
    align-self: stretch;
	align-items: center;
	padding: 0 12px;
	box-sizing: border-box;
}

/*.info-screen header .material-icons {
	margin-right: 8px;
}*/

.info-screen header .close-button {
	margin-left: auto;
}

.info-screen .content {
	padding: 24px;
}

.intro-image {
    width: 100%;
    max-width: 300px;
    padding-top: 50%;
    background: #ddd;
    margin: 24px auto 48px;
}


/*-----------------------------------------------------------------------------------
A FORM
-----------------------------------------------------------------------------------*/

.a-form {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	/*padding: 24px;*/
    box-sizing: border-box;
}
.inspector .a-form {
	padding: 0 18px;
}
.inspector .a-form:first-child {
	padding-top: 18px;
}
.inspector .a-form:last-child {
	padding-bottom: 18px;
}
.dialog-content .a-form {
	padding: 0;
	max-width: 500px;
}

.document .a-form {
	background: #fbfbfb;;
}
.a-form .form-field-control {
	flex: 1 1 calc(60% - 1px);
	/*border-left: 1px solid #f7f7f7;*/
}
.a-form .form-field-control.full-width {
	flex: 1 1 calc(100% - 1px);
	width: calc(100% - 1px);
}

.a-form .form-field input,
.a-form .form-field textarea,
.a-form .form-field .MuiSelect-root,
.MuiInputBase-root {
	background: #fff;
}

.a-form .form-field-chips {
	display: 'flex';
	flex-wrap: 'wrap';
}
.a-form .form-field-chip {
	margin: 2px
}

.input-rows {

}

.input-rows .row {
	position: relative;
	border-bottom: 1px solid #ddd;
}
.input-rows.row {
    display: flex;
    align-items: center;
    background-color: #fff;
	border-bottom: 1px solid rgba(224, 224, 224, 1);
}
.input-rows .row:last-child {
	border-bottom: none;
}

.input-rows .material-icons {
    color: #777;
    position: absolute;
	top: 9px;
	left: 4px;
}

.input-rows .row input {
    width: 100%;
    box-sizing: border-box;
    border: none;
	padding: 12px 12px 12px 24px;
	outline: none;
	font-size: 14px;
}

.input-rows .chip-input-container .material-icons {
	position: unset;
}

.input-rows .row .chip-input-container {
	margin-left: 24px;
}
.input-rows .row .chip-input-container input {
    border: none;
	padding: 0;
	padding-left: 2px;
	box-sizing: initial;
	font-size: unset;
}


/*-----------------------------------------------------------------------------------
A FORM INSPECTOR
-----------------------------------------------------------------------------------*/

.inspector-row {
	min-height: 36px;
    display: flex;
    outline: none;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #ddd;
    align-content: center;
    justify-content: center;
	align-items: center;
	flex-flow: row nowrap;
}
.inspector-row.description {
	padding: 12px 18px;
    font-size: 14px;
    line-height: 1.3;
	color: #777;
	box-sizing: border-box;
}

.inspector-row label {
    padding: 6px 56px 6px 18px;
    text-align: left;
    vertical-align: inherit;
    color: rgba(0, 0, 0, 0.54);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
	white-space: nowrap;
	width: 40%;
	box-sizing: border-box;
}
.inspector-row.empty label {
	width: 100%;
}
.inspector-row label + p {
	width: 60%;
	font-size: 12px;
}
.inspector-row label .tooltip-help {
    font-size: 12px;
    position: relative;
    top: 2px;
	left: 4px;
	display: none;
	color: #777;
}
.inspector-row:hover label .tooltip-help {
    display: inline-block;
}
.inspector-row .row-content {
	width: calc(60% - 2px);
}
.inspector-row .row-content .delete-row {
	align-self: center;
	cursor: pointer;
}
.inspector-row .form-field-control:not(.no-fill) {
	flex: 1 1 calc(100% - 1px);
	width:100%;
}
.inspector-row.long-label label {
	width: 60%;
}
.inspector-row.long-label .row-content {
	width: calc(40% - 2px);
}
.inspector-row.margin-dense {
	min-height: 24px;
}
.inspector-row.margin-none {
	min-height: 24px;
	padding: 0px;
}

.inspector-row .form-field, 
.inspector-row .MuiInputBase-root {
	margin: 0;
	padding: 0;
}

.inspector-row .form-field input {
	padding: 2px 6px;
	height: 36px;
	font-size: 14px;
}
.inspector-row .form-field.read-only p {
	padding: 2px 16px;
    height: 36px;
    background: #fff;
    margin: 0;
    line-height: 2.2;
    font-size: 16px;
}

.inspector-row .form-field textarea {
	padding: 6px;
	font-size: 14px;
}

.inspector-row .form-field fieldset {
	display: none;
}
.inspector-row .form-field-control .checkbox span {
	font-size: 14px; 
}

.inspector-row.no-border-top::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #fbfbfb;
    position: absolute;
    top: -1px;
}
.inspector-row.no-border-bottom {
    border-bottom: none;
}
.inspector-row .row-content > .control {
	position: absolute;
    right: 9px;
    top: 6px;
    color: #8a8a8a;
    cursor: pointer;
}

.inspector .a-form:not(.normal) {
	padding: 0;
}

.inspector-folder {
	width: 100%;
}

.inspector-folder .control  {
	margin-left: auto;
}
.inspector-folder > .inspector-row > label {
	width: calc(100% - 80px);
	font-weight: bold;
	color: #5d5c5c;
	position: relative;
	letter-spacing: 1px;
}
.inspector-folder > .inspector-row > label > .folder-icon {
	position: absolute;
	margin-top: -3px;
    margin-left: 8px;
}
.inspector-folder .control .material-icons {
	position: relative;
    top: 4px;
	left: -10px;
	color: #888;
}
.inspector-folder > .inspector-row {
	border-top: 4px solid #f3f1f1;
	border-bottom: 1px solid #efecec;
}

.inspector-folder.can-toggle > .inspector-row {
	cursor: pointer;
}
.inspector-folder .folder-content {
	position: relative;
	padding-left: 8px;
	border-bottom: 2px solid #f3f1f1;
}
.inspector-folder .folder-content::after {
	content: '';
    position: absolute;
    display: block;
    width: 8px;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(243, 241, 241);
}
.inspector-separator-header {
    background: #f5f5f5;
    width: 100%;
    padding: 6px 18px 2px;
    box-sizing: border-box;
    font-size: 12px;
    color: #545454;
	font-weight: 500;
	border-bottom: 1px solid #eaeaea;
}

.inspector-tabs {
	width: 100%;
}
.inspector-tabs > ul {
    background: #eee;
    list-style: none;
    margin: 0;
	padding: 0 8px;
	display: flex;
	height: 40px;
    align-items: center;
}
.inspector-tabs > ul li {
    margin: 4px 8px 0px;
    padding: 0;
    cursor: pointer;
}
.inspector-tabs > ul li .material-icons {
	color: #777;
	transform: scale(0.9);
	transition: 0.2s;
}
.inspector-tabs > ul li.active .material-icons,
.inspector-tabs > ul li:hover .material-icons {
	color: #333;
	transform: scale(1);
}

.inspector-tabs-content {

}


/*-----------------------------------------------------------------------------------

OBJECT SELECT

-----------------------------------------------------------------------------------*/

.object-select {
	width: 100%;
	height: 100%;
    position: relative;
    display: flex;
    flex-flow: column;
}

.object-select > div > .MuiList-root {
	padding: 0;
}

.object-select .header {
	font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 6px;
    background: #fafafa;
	text-transform: uppercase;
	margin-bottom: 0;
}

.object-select.now-level-2 .level-1 > .choices {
	display: none;
}


.object-select .card {
	display: none;
	width: 100%;
	position: absolute;
    flex-flow: column;
	background: #fafafa;
	border: none;
	box-shadow: none;
    border-radius: unset;
    overflow: visible;
}
.object-select.fill .card {
	height: 100%;
}

.object-select .card.animate {
	animation: object-select-card-in 0.4s forwards;
	animation-delay: 1.3ms;
}
@keyframes object-select-card-in {
	100% { transform: translateY(0); margin-bottom: 0 }
}
.object-select .card.animate .child-content {
	animation: object-select-card-children-in 0.7s forwards;
}
@keyframes object-select-card-children-in {
	0% { opacity: 0; }
	20% { opacity: 0; }
	100% { opacity: 1; }
}

.object-select .card.selected {
	display: flex;
}

.object-select-card-head {
    width: 100%;
    height: 72px;
    box-sizing: border-box;
    padding: 0 18px;
    display: flex;
    align-items: center;
    position: relative;
    flex: 0 0 48px;
    border-bottom: 1px solid #ccc;
	font-size: 18px;
	flex: 0 0 48px;    
	background: #fff;
}
.object-select-card-head.dense {
    height: 48px;
}
.object-select .card.level-1 .object-select-card-head  {
    height: 56px;
	cursor: pointer;
}
.object-select-card-head button {
    margin-left: -6px;
    margin-right: 14px;
}

.object-select .card-head h5 {
    font-weight: 400;
}
.object-select-content .card.level-1 .object-select-card-head h5,
.object-select-content .card:last-child .object-select-card-head h5 {
	font-weight: 500;
}
.object-select-card-head .down-arrow {
    position: absolute;
    bottom: -16px;
    width: 100%;
    text-align: center;
	left: 0;
	z-index: 9;
	display: none;
   /* border-bottom: 1px solid #e2e2e2;*/
}

.object-select .card.has-child-content:not(.level-1) .object-select-card-head .down-arrow {
	display: block;
}
.object-select .object-select-card-head .down-arrow .material-icons {
    /* border: 1px solid #eee; */
    border-radius: 50%;
	background: #fff;
	color: #aaa;
    position: relative;
    top: 2px;
}

.object-select .child-content {
	flex: 1 1 100%;
	width: 100%;
	display: none;
}
.object-select-content {
    flex: 1 1 100%;
    width: 100%;
	position: relative;
	overflow: hidden;
}
.object-select-content .card:last-child .down-arrow {
    bottom: -36px;
}
.object-select-content .card:last-child .down-arrow .material-icons {
	background: none;
    color: #777;
}
.object-select-content .card:last-child .child-content {
	margin-top: 35px;
	display: block;
	overflow: auto;
}

.object-select-content .card.level-1 .child-content {
	margin-top: 0;
}

.object-select-card-head .MuiAvatar-root {
	margin-right: 16px; 
}
.object-select .level-1 .object-select-card-head {
	background: #fafafa;
}

.object-select .level-1 .child-content {
	margin-top: 0;
}
.object-select .card.level-2 {
	margin-top: 56px;
}
.object-select.fill card.level-2 {
	height: calc(100% - 56px);
}
.object-select .card.level-3 {
	margin-top: 128px;
}
.object-select.fill card.level-3 {
	height: calc(100% - 128px);
}
.object-select .card.level-4 {
	margin-top: 200px;
}
.object-select.fill card.level-4 {
	height: calc(100% - 200px);
}
.object-select .card.level-5 {
	margin-top: 272px;
}
.object-select.fill card.level-5 {
	height: calc(100% - 272px);
}
.object-select .card:not(.has-child-content) {
	height: 72px; 
}


.object-select .document-action {
	flex: 0 0 48px;
}








/*-----------------------------------------------------------------------------------

PAGE TRANSITION

-----------------------------------------------------------------------------------*/

/* TRANSITIONS */

.page-transition {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex: 1;
}
.pt-slider {
	transition: transform 0.2s;
	height: 100%;
	display: flex;
	flex-flow: row nowrap;
}
.pt-object {
	transition: opacity 0.2s;
	height: 100%;
	width: 100%;
	/*max-height: 0;*/
	overflow: hidden;
	display: flex;
    flex-flow: column;
}
.pt-object.active {

}
.pt-object.visible {
	/*max-height: 9999px;*/
}



/*-----------------------------------------------------------------------------------

TABS

-----------------------------------------------------------------------------------*/


.tabs.type-nav {
	display: flex;
}

.tabs-root {
	border-bottom: '1px solid #e8e8e8';
}

.tabs .nav-root {
	flex: 0 0 300px;
    padding: 24px;
	box-sizing: border-box;
}

.tabs nav {
	margin-bottom: 15px;
    border: 1px solid #d1d5da;
    border-radius: 3px;
}
.tabs nav a {
	position: relative;
    display: block;
    padding: 8px 10px;
	border-bottom: 1px solid #e1e4e8;
	cursor: pointer;
}
.tabs nav a:first-child {
	border-top-left-radius: 2px;
}
.tabs nav a:hover {
	text-decoration: none;
	background-color: #f6f8fa;
}
.tabs nav a.active {
	font-weight: 600;
	color: #24292e;
	cursor: default;
	background-color: #fff;
}
	
.tabs nav a.active:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    content: "";
    background-color: #e36209;
}

.tabs.type-nav .tabs-active-content {
	flex: 1 1 100%;
}

.tab-root {
	text-transform: 'initial';
	min-width: 72px;
	font-weight: normal;
	margin-right: 16px;
	background-color: #eee;
	margin: 0 -24px;
	padding: 0 24px;
}   
.tab-root:hover {
      color: '#40a9ff';
      opacity: 1;
}
.tabs-indicator {
	background-color: '#1890ff';
}

.tab-selected {
	padding: 12px;
}

.page-aside .tabs-active-content {
	background-color: #eee;
}

.tabs-active-content {
	max-width: 800px;
	margin: 0 auto;
}

.tab-content {
	margin: -24px;
	padding: 0 24px 24px;
}

.tabs button.hidden {
	display: none;
}

/*-----------------------------------------------------------------------------------

TREE LIST

-----------------------------------------------------------------------------------*/

.tree-list-item-content {
    padding: 8px 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/*-----------------------------------------------------------------------------------

LOADING INDICATOR

-----------------------------------------------------------------------------------*/

.is-working {
	position: fixed;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
    left: 0;
}

.is-working .center {
	z-index: 10;
	text-align: center;
}
.is-working .progress-circle {
	color: #fff;
}

.is-working p {
	color: #eee;
}



/*-----------------------------------------------------------------------------------

LOGIN DIALOG

-----------------------------------------------------------------------------------*/

.login-dialog > div[role="document"] {
	max-width: 520px;
	box-sizing: border-box;
	margin: auto;
}
.login-dialog .separator {
	position: relative;
	border-bottom: 2px solid rgba(0, 0, 0, 0.5);
	margin-bottom: 20px;
	text-align: center;
}
.login-dialog .separator span {
	position: relative;
	top: 12px;
	background-color: #fff;
	padding: 0 12px;
}

.login-dialog .forgot-password {
	color: rgba(0, 0, 0, 0.5);
	font-size: 0.875rem;
	display: inline-block;
	position: absolute;
	right: 0;
	height: 46px;
	display: inline-flex;
	align-items: center;
}
.login-dialog a[href="#forgot-password"] {
	color: rgba(0, 0, 0, 0.5);
}

.login-dialog .login-action-row {
	margin-top: 20px;
	position: relative;
}
.login-dialog.login .login-action-row {
	margin-bottom: -10px;
}
.login-dialog #login-button{
	position: absolute;
	right: 0;
	padding: 8px 40px;
}

.login-dialog .remember-me-label {

}

.login-dialog .third-party {
	margin-bottom: -10px;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	margin: 0 -10px;
}
.login-dialog .third-party button {
	margin: 5px;
	color: #fff;
	padding: 10px;
	flex: 1;
}
#login-with-google {
	background-color: #DD4A38;
}
#login-with-facebook {
	background-color: #32508F;
}
#login-with-twitter {
	background-color: #54ADEF;
}

.legal {
	font-size: 0.7rem;
	line-height: 1.3;
	color: rgba(0, 0, 0, 0.5);
}

.legal a {
	color: rgba(0, 0, 0, 0.5);
}


@media (min-width: 450px) {
	.login-dialog > div[role="document"] {
		padding: 24px 16px 12px;
	}
}


/*-----------------------------------------------------------------------------------

OPTIONS

-----------------------------------------------------------------------------------*/

.big-options {
	margin: 0;
	list-style: none;
	padding: 0;
}

.big-options li {
	padding: 15px;
	border-radius: 4px;
	cursor: pointer;
	opacity: 0.8;
	margin: 15px 0;
	border: 1px solid rgba(0,0,0,0);
}

.big-options li.selected {
	border: 1px solid #aaa;
	opacity: 1;
}

.big-options li figure {
	width: 120px;
	height: 120px;
	background-color: rgba(0,0,0,0.03);
	border: 1px solid rgba(0,0,0,0.1);
	position: absolute;
	margin: 0;
	
}
.big-options li div {
	margin-left: 150px; 
}

.big-options li h3 {

}

.big-options li p {

}



/*-----------------------------------------------------------------------------------

TREE

-----------------------------------------------------------------------------------*/


.tree {
	background: #fff;
    /*width: 100%;*/
    height: 100%;
	/*position: absolute;*/
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	line-height: 17px;
	color: #000;
	padding: 8px; 
	outline: none;
}

.tree ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.tree ul li {
	display: flex;
	flex-flow: row nowrap;
	position: relative;
	padding-bottom: 3px; 
}

.tree ul ul {
	position: relative;
}
/*
.tree ul ul:before {
    content: '';
    display: block;
    height: 100%;
    width: 1px;
    background: #bbb;
    position: absolute;
    left: 0px;
    top: 11px;
}*/
.tree ul ul li::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: #bbb;
    position: absolute;
    top: 10px;
    left: 0px;
}
.tree ul ul li:nth-last-child(2)::before {
    height: calc(100% - 4px);
}
.tree ul ul li:last-child::before {
	display: none;
}
/*
.tree ul ul li:first-child::before {
	display: block;
}*/
.tree ul ul li .node::before {
    content: '';
    display: block;
    width: 7px;
    height: 1px;
    background: #bbb;
    position: absolute;
    top: 10px;
    left: 0px;
}
.tree ul ul li:last-child .node::before {
	left: 5px;
    width: 4px;
}
.tree ul ul li:first-child .node::before {
	left: -5px;
    width: 12px;
}
.tree ul ul li:last-child::after {
	content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    border: 1px solid #bbb;
    border-radius: 0 0 0 50%;
    top: 6px;
    left: 0px;
    border-top: none;
    border-right: none;
}
.tree ul ul li:first-child::after,
.tree ul li .node.display-p >ul >li::before,
.tree ul li .node.display-p >ul >li >.node::before,
.tree ul li .node.display-p >ul >li:last-child::after {
	display: none;
}
.tree ul li .node.display-p >ul {
	margin-left: 12px;
	margin-top: 3px;
}
.tree ul li .node.display-p >ul >li >.node {
	flex: 0 0 148px;
}

.tree ul .textarea-r,
.tree ul textarea {
    resize: none;
    outline: none;
    box-sizing: border-box;
    border: none;
    resize: none;
    overflow: auto;
    height: auto;
    padding: 1px 0;
    position: relative;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
	line-height: 1.4;
	display: block;
	overflow: hidden;
}
.tree ul textarea[disabled] {
	background: transparent;
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
	pointer-events: none;
	color: #000;
}

.node.active > .content > div > textarea {
	pointer-events: all;
}


.tree ul textarea::placeholder {
	color: gainsboro;
}
.tree ul textarea:focus {
	outline: none;
}

.tree .node {
	width: 160px;
	position: relative;
	flex: 0 0 160px;
}

.tree .node.active {
}
.tree .node > .content {
	border: 1px solid transparent;
	display: inline-block;
	width: calc(100% - 4px);
}
.tree .node.active > .content {
	background: #f3f3f3;
	border: 1px solid #bbb;
	margin-bottom: -1px;
}
.tree .node.active.show-note > .content {
	margin-bottom: -4px;
}
.tree .node.has-children > .content::before {
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	left: 20px;
	width: calc(100% - 34px);
	height: 1px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='6' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 1h1M3 1h1' stroke='%23B6B6B6'/%3E%3Cpath d='M1 1h1.581M4 1h1.581' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.tree .node.has-note > .content::before {
	width: calc(100% - 47px);
}
.node .content.is-dragged {
	opacity: 0.5;
}
.node .content.is-dragged-over.body::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border: 2px solid #4c4faf;
	pointer-events: none;
}

.tree .node > .content > .drop-bottom,
.tree .node > .content > .drop-top {
    width: calc(100% + 6px);
	height: 10px;
    background-color: transparent;
    position: absolute;
    top: -3px;
    left: -3px;
}

.tree .node > .content > .drop-bottom {
	top: inherit;
	bottom: -3px;
	background-color: transparent;
	display: none;
}
.tree li:last-child > .node > .content > .drop-bottom {
	display: block;
}

.tree .node > .content.is-dragged-over.top > .drop-top::after,
.tree .node > .content.is-dragged-over.bottom > .drop-bottom::after {
    width: calc(100% + 6px);
    height: 2px;
    background-color: #4c4faf;
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    left: 0px;
}
.tree .node > .content.is-dragged-over.top > .drop-top::before,
.tree .node > .content.is-dragged-over.bottom > .drop-bottom::before {
	content: '';
	display: block;
	background-color: #4c4faf;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	left: 0;
	top: 5px; 
}


.tree .node .label {
    margin: 1px 20px 1px 16px;
    background: #fff;
    z-index: 2;
    line-height: 1.4;
    position: relative;
    display: inline-block;
    padding-right: 4px;
}
.tree .node.active .label {
	background: #f3f3f3;
}
.tree .node .label-edit {
	margin: 0 24px 0 16px;
	width: calc(100% - 40px);
	overflow: hidden;
}

.tree .node .note {
	font-size: 10px;
	line-height: 14px;
	color: #929292;
	margin: 0 0 0 28px;
	width: calc(100% - 52px);
}
.tree .node div.note {
	margin-top: 1px;
	margin-bottom: 1px; 
}

.tree .node .arrow,
.tree .node .circle-closed,
.tree .node .circle-open,
.tree .node .note-open,
.tree .node .note-closed,
.tree .node .end-node {
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
}
.tree .node .arrow {
	width: 7px;
	height: 9px;
	top: 6px;
	left: 6px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient x1='0%25' y1='0%25' x2='0%25' y2='100%25' id='a'%3E%3Cstop stop-color='%23D5D5D5' offset='0%25'/%3E%3Cstop stop-color='%23B9B9B9' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath stroke='%23B1B1B1' fill='url(%23a)' d='M1 1v7.408l5.472-3.704z' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.tree .node.display-p >.content >.arrow {
	transform: rotate(90deg);
}
.tree .node .circle-open,
.tree .node .circle-closed  {	
	width: 10px;
    height: 10px;
    top: 6px;
	right: 4px;
	cursor: pointer;
}
.tree .node .circle-open {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23CCC' cx='4' cy='4' r='4'/%3E%3Cpath d='M1.475 4.001h4.964' stroke='%23B3B3B3'/%3E%3C/g%3E%3C/svg%3E");
}
.tree .node .circle-closed {  
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23CCC' cx='4' cy='4' r='4'/%3E%3Cpath fill='%23B3B3B3' d='M2.7 6.248V1.5l3.31 2.374z'/%3E%3C/g%3E%3C/svg%3E");
}
.tree .node .note-open, 
.tree .node .note-closed {
	width: 10px;
    height: 9px;
    right: 15px;
	top: 6px;
	cursor: pointer;
}
.tree .node .note-open {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='10' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23B3B3B3' d='M5 .86h4.748L7.374 4.17z'/%3E%3Cpath d='M0 1.86h4.664M0 3.86h5.514M0 5.86h7.646M0 7.86h4.68' stroke='%23BABABA'/%3E%3C/g%3E%3C/svg%3E");
}
.tree .node .note-closed {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='10' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23B3B3B3' d='M9.748 4.17H5L7.374.86z'/%3E%3Cpath d='M0 1.86h5.512M0 3.86h4.514M0 5.86h7.646M0 7.86h4.68' stroke='%23BABABA'/%3E%3C/g%3E%3C/svg%3E");
}
.tree .node .end-node {
	width: 7px;
	height: 7px;
	top: 7px;
    left: 6px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='7' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='a'%3E%3Cstop stop-color='%23E4E4E4' offset='0%25'/%3E%3Cstop stop-color='%23D3D3D3' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle stroke='%23BFBFBF' fill='url(%23a)' cx='3.5' cy='3.5' r='2.5' fill-rule='evenodd'/%3E%3C/svg%3E");
}