body {
  background-color:#3F3E3C;
  color: #ececec;
  overflow: hidden;
}

svg{
  fill:#2F2E2C;
}

.bluesvg svg{
  fill:#05afcd;
}

.greensvg svg{
  fill:#3aca3a;
  float: left;
}

.redsvg svg{
  fill:#cf1b1b;
  float: left;
}


.buttons{
  position: relative;
  display: inline-block;
  height: 16px;
  width: 16px;  
  font-size: 20px;
  background-color:#717171;
  color: #FFFFFF;
  border-style:solid;
  border-radius:4px;
  font-family:monospace;
  font-size:14px;
  border: 1px ridge #C2C2C2;
  padding: 8px 10px;
  margin: 0px 0px 4px 0px;  
  cursor: pointer;
  user-select: none;    
}

.buttons:hover{
  background-color: #8B8B8B;
}

.mainMenu{ 
  position: absolute;
  background-color: #535353;
  user-select: none;  
  top:0px;
  left: 0px;
  width: 40px;
  height: 500px;
}

.panel {
  background:#535353;
  position: absolute;
  top: 100px;
  width: 400px;
  height: 600px;
  border: 1px solid #C2C2C2;
  border-radius: 5px;
  margin-right:10px;  
  left:calc((100% - 400px)/2)
}

.panelbtn {
  position: relative;
  float:left;
  top:0px;
  width: auto;
  height: 24px;
  background: #717171;
  color: #ececec;
  font-size: 15px;
  font-family: monospace;
  margin:0;
  padding: 8px 4px 0px;
  cursor: pointer;
  user-select: none;  
  border: 1px solid;
  border-radius: 10px 10px 0 0;  
}

.panelbtn.down{
  color: #000000;
}

.pcaption{
  font-size: 16px;
  font-family: monospace;  
  color: #ffffff;
  background: #3F3E3C;
  text-align: center;
  width: 100%;
}


ul {
  background: #717171;
  border-radius: 3px;
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  margin: auto;  
  user-select: none;
  height: 500px;
  overflow: auto;  
}

li{
  font-size: 16px;
  font-family: monospace;  
  color: #ececec;
  position: relative;
  display: inline-block;
  width: 100%;
}

li:hover{
  background-color: #8B8B8B;
}

label{
  width: 80px;
  display: inline-block;
  text-align: right;
  color: #ececec;
  font-size: 18px;
  font-family: monospace;  
}

input[type=file] {
  display: none;
}

input[type=text]{
  background: #717171;  
  width: 280px;
  color: #ececec;
  font-size: 18px;
  border: 1px solid #3F3E3C;
  margin: 0px 0px 2px 0px;  
}

input[type=text].number{
  width: 50px;
  text-align: right;
}

input[type=range] {
  width: 300px;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 20px;
  background: #717171;
  border-radius: 16px;
}

output{
  position: absolute;
  left: 50%;
  pointer-events: none;
  color: #ececec;
  font-size: 18px;
}

.status{
  background: #717171;
  color: #ececec;
  font-size: 15px;
  font-family: monospace;
  width: 100%;
  bottom: 0;
  position: absolute;  
}

.filepreview img {
  display: flex;
  margin: 0 auto;
  height: 100px; 
  width: 400px;
  object-fit: scale-down;  
}

.timeline{ 
  position: relative;
  top:auto;
  bottom: 0px;
  height: 200px;
  user-select: none;  
  background-color: #535353;
}

.timeline canvas{
  position: absolute;
  top:auto;
  height: auto;
  bottom: 0px;
  width: 100%;
}

.modal {
  display: none; 
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.7);
}

.modal-content {
  background-color: #3F3E3C;
  margin: auto;
  padding: 20px;
  border: 5px solid #717171;
  width: fit-content;
}

.modal label{
  width: auto;
}


.info{
  width:80%;
  height: auto;  
}

.text{
  width: 100px;
  text-align: center;
}

.right{
  right: 0;
  left: unset;
}

.left{
  left: 0;
  right: unset;
  margin-left:50px;  
}

.flright{
  float: right;
}

.hide{
  display: none;
}

.down{
  background-color: #FCF374;  
}

.down:hover{
  background-color: #fefac4;
}

.sel{
  color: #FCF374;
}

.drag, li.drag:hover{
  background-color: #5F5E5C;
  color: #ececec;
}

.dragover, .dir.dragover, li.dragover:hover{
  background-color: #3F3E3C;
  color: #ececec;
}
 

.dir{
  color: #2F2E2C;
  background-color: #f4d16e;
}

.dir.sel{
  color: #05b5b3;
}


.dir:hover{
  background-color: #fefac4;
}



.ic-inanim::before{
  padding: 0 10px 0 5px;  
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' viewBox='0 0 320 512'%3E%3Cpath d='M160 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM126.5 199.3c-1 .4-1.9 .8-2.9 1.2l-8 3.5c-16.4 7.3-29 21.2-34.7 38.2l-2.6 7.8c-5.6 16.8-23.7 25.8-40.5 20.2s-25.8-23.7-20.2-40.5l2.6-7.8c11.4-34.1 36.6-61.9 69.4-76.5l8-3.5c20.8-9.2 43.3-14 66.1-14c44.6 0 84.8 26.8 101.9 67.9L281 232.7l21.4 10.7c15.8 7.9 22.2 27.1 14.3 42.9s-27.1 22.2-42.9 14.3L247 287.3c-10.3-5.2-18.4-13.8-22.8-24.5l-9.6-23-19.3 65.5 49.5 54c5.4 5.9 9.2 13 11.2 20.8l23 92.1c4.3 17.1-6.1 34.5-23.3 38.8s-34.5-6.1-38.8-23.3l-22-88.1-70.7-77.1c-14.8-16.1-20.3-38.6-14.7-59.7l16.9-63.5zM68.7 398l25-62.4c2.1 3 4.5 5.8 7 8.6l40.7 44.4-14.5 36.2c-2.4 6-6 11.5-10.6 16.1L54.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L68.7 398z'/%3E%3C/svg%3E");
}
.ic-visible::before{
  padding: 0 10px 0 5px;  
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' viewBox='0 0 576 512'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/svg%3E");
}
.ic-group::before{
  padding: 0 10px 0 5px;  
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' viewBox='0 0 576 512'%3E%3Cpath d='M32 119.4C12.9 108.4 0 87.7 0 64C0 28.7 28.7 0 64 0c23.7 0 44.4 12.9 55.4 32H456.6C467.6 12.9 488.3 0 512 0c35.3 0 64 28.7 64 64c0 23.7-12.9 44.4-32 55.4V392.6c19.1 11.1 32 31.7 32 55.4c0 35.3-28.7 64-64 64c-23.7 0-44.4-12.9-55.4-32H119.4c-11.1 19.1-31.7 32-55.4 32c-35.3 0-64-28.7-64-64c0-23.7 12.9-44.4 32-55.4V119.4zM456.6 96H119.4c-5.6 9.7-13.7 17.8-23.4 23.4V392.6c9.7 5.6 17.8 13.7 23.4 23.4H456.6c5.6-9.7 13.7-17.8 23.4-23.4V119.4c-9.7-5.6-17.8-13.7-23.4-23.4zM128 160c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V160zM256 320h32c35.3 0 64-28.7 64-64V224h64c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H288c-17.7 0-32-14.3-32-32V320z'/%3E%3C/svg%3E");
}
.ic-folder-open::before{
  padding: 0 10px 0 5px;  
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E");
}
.ic-folder-close::before{
  padding: 0 10px 0 5px;  
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 0 256 512'%3E%3Cpath d='M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z'/%3E%3C/svg%3E");
}