*{ font-family: "Segoe UI Symbol","Segoe MDL2 Assets", sans-serif; }
html, body{width:100%;height:100%;margin:0;padding:0;border:0; overflow:hidden;}
body{background: #000000;}

#leftPanelDiv{ position:fixed; height:calc(100% - 50px); width:50px; border-right:#aaa 1px solid; top:0px; left:0px; background: rgba(89,89,89,1); padding:0; }
#leftPanelDiv p{ display: block; width: 44px; height: 44px; border:#ccc 1px solid; margin:0 auto; margin-top:5px; cursor:pointer; color:#fff; text-align:center; line-height:44px; }

#leftPanelSpaces{ 
	position:fixed; height:50px; width:50px; border-right:#aaa 1px solid; 
	bottom:0px; left:0px; background: rgba(89,89,89,1); padding:0;
}
#leftPanelSpaces table{ display: block; width: 43px; height: 43px; border:#ccc 1px solid; margin:0 auto; margin-top:5px; cursor:pointer; color:#fff; text-align:center; }
#leftPanelSpaces sup, #leftPanelSpaces sub, #leftPanelSpaces span { font-size: 10px; }
#leftPanelSpaces sub{ border-top:#fff 1px solid; }

@media{ /* mainDiv block */
.mainDiv { width:calc(100% - 51px);height:100%; margin: 0; padding: 0; border: 0; display: block; position:fixed; top:0px; left:51px; }
.mainDiv div.resizable {
	z-index:2;position: absolute;
	display:inline-block; width:200px; height:200px; margin:0; padding:0; resize:none; overflow:hidden;
	background:#777777; border:1px solid #000000; min-width:200px; min-height:200px;
}
.mainDiv.unlocked div.resizable {resize:both; }
.mainDiv div.resizable.fixed { resize:none; }
.mainDiv div.resizable > iframe { flex-grow:1; margin:0; padding:0; border:0; width:calc(100%);height:calc(100% - 22px);overflow:hidden; margin-top: 22px; background: #fff; }
.mainDiv div.resizable.note > div { flex-grow:1; margin:0; padding:5px; border:0; overflow-wrap: anywhere; height:calc(100% - 22px);overflow:hidden; margin-top: 22px; background: #fff; }
.mainDiv div.resizable.note > trix-toolbar { margin-top: 22px; }
.mainDiv div.resizable.note trix-toolbar .trix-button-group{ margin-bottom: 0px; }

.mainDiv div.resizable.note > trix-editor { overflow-y:scroll; padding-bottom:17px; height:calc(100% - 59px); }
.mainDiv div.resizable.note > trix-editor[wide="true"] { height:calc(100% - 45px); }

.mainDiv div.resizable > div { width:100%;height:100%; background-repeat:no-repeat; }
.mainDiv div.resizable > div.downloader { margin-top: 22px; background: #fff; padding:5px; }
.mainDiv div.resizable > div.downloader > h3{ padding-left:1px; margin:0; margin-bottom:5px; }
.mainDiv div.resizable > div.downloader > h4{ margin:0; margin-bottom:15px; }
.mainDiv div.resizable > div.downloader > h4:before{ content:"> "; }
.mainDiv div.resizable > div.downloader > a{
	display:block; padding:5px; width:160px; line-height:47px; margin-left:calc(50% - 90px); text-align:center;
	background: url('./button_green.png'); background-size: 100% auto; background-repeat: no-repeat;
	color: #fff; font-size:25px;
}
.mainDiv div.resizable > div.downloader a:hover, div.downloader a:focus{
	background: url('./button_blue.png'); background-size: 100% auto;
}
.mainDiv div.resizable[dm="0"] > div { background-size: auto 100%; } /* vertical */
.mainDiv div.resizable[dm="1"] > div { background-size: 100% auto; } /* horizontal */
.mainDiv div.resizable[pos="0"] > div { background-position: left top; }
.mainDiv div.resizable[pos="1"] > div { background-position: center top; }
.mainDiv div.resizable[pos="2"] > div { background-position: right top; }
.mainDiv div.resizable[pos="3"] > div { background-position: left center; }
.mainDiv div.resizable[pos="4"] > div { background-position: center center; }
.mainDiv div.resizable[pos="5"] > div { background-position: right center; }
.mainDiv div.resizable[pos="6"] > div { background-position: left bottom; }
.mainDiv div.resizable[pos="7"] > div { background-position: center bottom; }
.mainDiv div.resizable[pos="8"] > div { background-position: right bottom; }
.mainDiv div.resizable > span {
	cursor:move;width:100%; height: 22px; 
	color:#fff;text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); 
	z-index:2; position: absolute; left: 0; top: 0;
	margin:0;padding:0; 
	font-family: "Segoe UI Symbol"; 
	background: rgba(0,0,0,0.5); overflow: hidden;
}
.mainDiv div.resizable.fixed > span > span, #mainDiv div.resizable.iframe > span > span { display:none; }
.mainDiv.locked div.resizable > span > span { display:none;}
.mainDiv div.resizable > span > span { 
	background:#444;
	cursor:pointer; width:18px; height: 18px; color:#fff;
	z-index:2; position: absolute; right: 4px; top:0; margin:0;padding:0;  font-family: "Segoe UI Symbol";
	border:#fff 1px solid; text-align:center; font-size: 22px; line-height: 16px;
}
.mainDiv div.resizable > span > span.dm { 
	right: 26px; 
}

.mainDiv div.resizable p {
	background:#444;
	cursor:pointer; width:18px; height: 18px; color:#fff; z-index:3; display: inline-block;
	/* position: absolute; left: 4px; top:0; */
	margin:0;padding:0;  
	margin-left:2px;
	font-family: "Segoe UI Symbol";
}
.mainDiv.locked div.resizable p:not(.download):not(.unlock) { display:none;}
.mainDiv div.resizable p:after { content:"⛝"; }
.mainDiv div.resizable p.edit { text-align:center; font-size: 16px; line-height: 21px; }
.mainDiv div.resizable p.edit:after { content:""; }
.mainDiv div.resizable p.download { text-align:center; font-size: 16px; line-height: 21px; }
.mainDiv div.resizable p.download:after { content:""; }

.mainDiv div.resizable p.unlock { text-align:center; font-size: 16px; line-height: 21px; }
.mainDiv div.resizable p.unlock:after { content:""; }
.mainDiv div.resizable p.lock { text-align:center; font-size: 16px; line-height: 21px; }
.mainDiv div.resizable p.lock:after { content:""; }

.mainDiv div.resizable b {
	cursor:pointer; height: 18px; color:rgba(255, 255, 255, 0.6); z-index:2;
	/* position: absolute; left: 4px; top:0; */ padding-right:5px;
	text-align:left; line-break: anywhere; word-break:break-all;
	margin-left:2px; line-height:18px; font-size:13px;
	font-family: "Segoe UI Symbol";
	margin-top:-18px;
}
.mainDiv.locked  div.resizable b { margin-top:0px; }

.mainDiv iframe * {
	display:auto;
	height:auto;width:auto;
	margin: auto; padding: auto; border: auto;
}
}

#toolDiv{ position:fixed; top:0px; right:0px; font-family: "Segoe UI Symbol";z-index:9999; }
#toolDiv *{ font-family: "Segoe UI Symbol"; }
#toolDiv button{ opacity:0.7; cursor:pointer; }
#toolDiv button:hover{ opacity:1; }

@media{ /* block for modal windows new file or note */
/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 9; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.35); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	background-color: #989898;
	margin: auto;
	padding: 10px;
	border: 1px solid #000000;
	width: 80%;
}
.modal-content.symbol {width:140px;}
.modal-content table{
	margin: 0 auto; background-color: #cbcbcb; border-collapse:collapse;
}
.modal-content table tr, .modal-content table td{
	border-collapse:collapse;
}
.modal-content table td{ border:#000 1px solid; padding:5px; }
.modal-content.symbol table td{cursor:pointer; border:#000 1px solid; padding:5px; font-family: "Segoe UI Symbol";text-align:center;width:30px;height:30px;padding:0;line-height:30px; }
#frameImgInnerPositionModal[pos="0"] table tr:nth-child(1) td:nth-child(1){ background:#009ad0; }
#frameImgInnerPositionModal[pos="1"] table tr:nth-child(1) td:nth-child(2){ background:#009ad0; }
#frameImgInnerPositionModal[pos="2"] table tr:nth-child(1) td:nth-child(3){ background:#009ad0; }
#frameImgInnerPositionModal[pos="3"] table tr:nth-child(2) td:nth-child(1){ background:#009ad0; }
#frameImgInnerPositionModal[pos="4"] table tr:nth-child(2) td:nth-child(2){ background:#009ad0; }
#frameImgInnerPositionModal[pos="5"] table tr:nth-child(2) td:nth-child(3){ background:#009ad0; }
#frameImgInnerPositionModal[pos="6"] table tr:nth-child(3) td:nth-child(1){ background:#009ad0; }
#frameImgInnerPositionModal[pos="7"] table tr:nth-child(3) td:nth-child(2){ background:#009ad0; }
#frameImgInnerPositionModal[pos="8"] table tr:nth-child(3) td:nth-child(3){ background:#009ad0; }

/* The Close Button */
.modal-content .close { color: #dddddd; position:relative; float:right; font-size: 28px; font-weight: bold; margin-top: -8px; }
.modal-content.symbol .close { position:absolute; left: calc(50% + 55px); float:none;}
.modal-content .close:hover, .modal-content .close:focus { color: #000; text-decoration: none; cursor: pointer; }

#filedrag
{
	font-weight: bold;
	text-align: center;
	padding: 1em 0;
	margin: 1em 0;
	color: #555;
	border: 2px dashed #555;
	border-radius: 7px;
	cursor: default;
}

#filedrag.hover
{
	color: #f00;
	border-color: #f00;
	border-style: solid;
	box-shadow: inset 0 3px 4px #888;
}
}

@media{ /* note display block */
trix-toolbar{ background: #fff; font-size:13px; }
trix-toolbar .trix-button-group--history-tools{ display:none; }
trix-editor{ background: #fff; }

blockquote {
	border: 1px solid #ccc;
	background:#ddd;
	padding: 3px;
	margin: 0;
}
blockquote:before {
	color: #000;
	content: '‟';
	font-size: 35px;
	line-height: 0.1em;
	margin-right: 0.25em;
	vertical-align: -0.4em;
}

pre {
	border: 1px solid #ccc;
	background:#ddd;
	padding: 3px;
}
pre:before {
	content:"<> CODE";
	font-weight:800;
	display:block;
	background:#919191;
	color:#ffffff; 
	padding: 3px;
}
}

.spaceModalBack {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 9; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.01); /* Black w/ opacity */
}
.spaceModalWindow {
	position: fixed; /* Stay in place */
	z-index: 9; /* Sit on top */
	padding: 5px;
	left: 51px;
	bottom: 0px;
	width: 300px;
	height: 200px;
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(66,66,66); /* Fallback color */
	color:#fff;
}
/* The Close Button */
.spaceModalWindow .close { color: #dddddd; position:relative; float:right; font-size: 28px; font-weight: bold; margin-top: -8px; }
.spaceModalWindow .close:hover, .spaceModalWindow .close:focus { color: #000; text-decoration: none; cursor: pointer; }
.spaceModalWindow h2 { margin:0; }
.spaceModalWindow #spaceModalWindowList { margin-top:5px;; }

.spaceModalItem{
	height:45px; width:45px;
	border:#aaa 1px solid; 
	background: rgba(89,89,89,1);
	display: inline-block;
	margin:2.5px; cursor:pointer;
}
.spaceModalItem p{
	display: block; width: 44px; height: 44px; margin:0 auto;
	text-align:center; line-height:44px;
	}
	
	
/* CONTEXT MENU */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.context-menu {
  display: none;
  position: absolute;
  z-index: 10;
  padding: 12px 0;
  width: 240px;
  background-color: #fff;
  border: solid 1px #dfdfdf;
  box-shadow: 1px 1px 2px #cfcfcf;
}

.context-menu--active {
  display: block;
}

.context-menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-menu__item {
  display: block;
  margin-bottom: 4px;
}

.context-menu__item:last-child {
  margin-bottom: 0;
}

.context-menu__link {
  display: block;
  padding: 4px 12px;
  color: #0066aa;
  text-decoration: none;
}

.context-menu__link:hover {
  color: #fff;
  background-color: #0066aa;
}