.work { width: 70%; margin: 0 auto; }
.cat { display: flex; align-items: center; }
.cat a { margin: 2px 0; padding: 0 3px; display: inline-block; border-radius: 3px; transition: all .3s ease-in-out; border: 1px solid transparent; }
.cat a:hover { border: 1px solid #ccc; }
.cat input { zoom: 0.9; width: auto; }
.cat-folder { background: url(../../img/folder.svg) no-repeat 10px center / 20px !important; padding-left: 40px !important; }
.cat-project { background: url(../../img/project.svg) no-repeat 10px center / 20px !important; padding-left: 40px !important; }

.menu { width: 200px; background: #fff; padding: 10px; position: relative; }
.menu.dark { background: #222e3c; color: #eee; }
.menu a { display: block; padding: 5px; color: var(--text); border: 1px solid transparent; transition: all .3s ease-in-out; }
.menu a.active, .toolbar a.active { border: 1px solid #0792ff; border-radius: 5px; background: #e9f5ff; }
.menu a:hover { background-color: #27384b !important; }
.submenu { height: 100%; overflow-y: auto; }
.submenu a { padding-left: 25px; color: #ddd; }
/*.toolbar { background: #fff; border-bottom: var(--border); }*/
.toolbar { border: none; display: none; }
.toolbar a { display: flex; align-items: center; justify-content: center; color: var(--text); transition: all .3s ease-in-out; height: 25px; width: 25px; line-height: 25px;
             text-align: center; border: 1px solid transparent; border-radius: 5px; padding: 0; margin: 0 2px; }
.toolbar a:hover { background: #eee; }
.toolbar a img { height: 80%; }
.showhide { position: absolute; left: 270px; z-index: 10; bottom: 40px; background: #fff; width: 30px; height: 30px; line-height: 30px; padding: 0 !important; text-align: center; border-radius: 30px; cursor: pointer; }

.color { display: inline-block; width: 20px; height: 20px; border-radius: 5px; cursor: pointer; border: 2px solid #fff; }
.color.active { border: 2px solid #b9f1ff !important; zoom: 1.2; }

.border-v { height: 20px; border-left: 1px solid #ddd; margin: 10px; }
hr { background: rgba(0, 0, 0, 0); border: 0; height: 1px; margin: .5rem 0; background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent); }
select.types { padding: 10px 10px; border: 1px solid #000; font-size: 15px; }

.tabs1 { position: absolute; top: 0; right: -80px; width: 80px; z-index: 10; font-size: 16px; text-align: center; }
.tab1 { padding: 10px; background: #394757; cursor: pointer; }
.tab1.active { background: #222e3c; cursor: default; }

#view3d { position: absolute; left: 0; top: 40px; right: 0; bottom: 0; z-index: 10; display: none; }
#view3d canvas { display: block; width: 100%; height: 100%; }