@charset "UTF-8";

#scroll-to-top-btn {
  /* place it at the bottom-right corner */
  position: fixed;
  bottom: 90px;
  left: 195px;

  /* keep it at the top of everything else */
  z-index: 100;

  /* hide with opacity */
  opacity: 0;

  /* also add a translate effect */
  transform: translateY(100px);

  /* and a transition */
  transition: all 5s ease
}

#inplace-editor-wrapper{

	border-color: #004270;
	border-radius: 9px;
	border-style: solid;
	border-width: 13px;
  border-bottom-width: 30px;

}

.show-scroll-btn {
  opacity: 1;
  transform: translateY(0);
	z-index: 100;
}

.sty-main-panel {
   /* the main box (body) occupies all the visible area */
   position: absolute;
   left: 0px;
   right: 0px;
   top: 0px;
   bottom: 0px;

   /* eliminate margins etc. */
   margin: 0px;
   padding: 0px;
   border-width: 0px;

   display: flex;
   flex-direction: column;

   overflow: hidden;
}

.sty-control-panel {
   flex: 48px;
   max-height: 48px;
   display: flex;
   flex-direction: row;
}

.sty-message-space {
	position: absolute;
	font-size: 30pt;
	font-weight: bold;
	color: #c5c5ca;
	height: 100vh;
	width: 100vw;
	background-color: #040404ab;
	z-index: 3000;
	vertical-align: middle;
}

.sty-work-panel {
   width: 100%;
   height: 90%;
   max-height: 90%;
   flex: 90%;
   display: flex;
}



.showBtn {
  opacity: 1;
  transform: translateY(0)
}

@media (orientation: landscape) {
   .work-panel {
      flex-direction: row;
   }
}

@media (orientation: portrait) {
   .work-panel {
      flex-direction: column;
   }
}

.sty-navigation-block {
   flex: 15%;
   max-width: 100%;
   height: 100%;
   display: flex;
   flex-direction: row;
}

.sty-navigation-panel {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: scroll;
}

.sty-navigation-set {
   width: .700rem;
   height: 1.925rem;
}

.sty-tree-button {
   width: 48px;
   height: 48px;
   margin-left: auto;
   margin-right: auto;
}

.sty-navigation-knot {
   border-style: solid;
   border-color: rgb(180,180,180);
   border-radius: 7px;
   background-color: white;
   position: relative;
   width: 100%;
   height: 100%;
}

.sty-navigation-label {
   position: relative;
   font-size: 10pt;
   text-align: center;
   vertical-align: middle;
   line-height: 1em;
}

.sty-selected-knot {
   border: 5px dashed blue;
   border-radius: 5px;
}

.sty-menu-floating {
   position: absolute;
   background-color: white;
   border-radius: 1px;
   box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.5);
   margin: 5px;
}

.sty-editable-asset:hover {
   border: 5px;
   border-color: black;
   cursor: pointer;
}

.sty-navigation-knot-cover {
   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
}

.sty-navigation-knot-cover:hover {
   background: rgba(0, 0, 0, 0.3);
}

.sty-knot-panel {
   /* flex: 55%;
   min-width: 20%; */
   overflow: scroll;
   height: 100%;
}

.sty-editor {
   width: 100%;
   height: 100%;
}

.sty-lock {
   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
}

.sty-lock:hover {
   background: rgba(0, 0, 0, 0.3);
}

/* Properties */

.sty-elements-block {
   flex: 20%;
   min-width: 20%;
   max-width: 100%;
   height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.sty-properties-block {
   flex: 95%;
   width: auto;
   height: 95%;
   overflow: hidden;
   display: flex;
   flex-direction: column;


	 z-index: 2;
	 position: relative;

}