* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100vh;
  font-family: "Nanum Gothic", sans-serif;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

li {
  list-style: none;
}

/* theme set */
.light div#top-nav {
  background-color: #e5e5e5;
  color: #1e1e1e;
}

.dark div#top-nav {
  background-color: #474747;
  color: #cfcfcf;
}

.light .tab-li {
  color: #1e1e1e;
}

.light .tab-li:hover {
  background-color: #e5e5e5;
}

.dark .tab-li {
  color: #cfcfcf;
}

.light .tab-li.current {
  background-color: #e5e5e5;
}

.dark .tab-li:hover {
  background-color: #474747;
}

.dark .tab-li.current {
  background-color: #474747;
}

.light .gutter {
  background-color: #e5e3e3;
}

.dark .gutter {
  background-color: #8f8f8f;
}

div#main-container {
  width: 100%;
  height: 100vh;
}

.light div#content-menu {
  background-color: #f2f2f2;
}

.dark div#content-menu {
  background-color: #707070;
}

.light div#edit-menu {
  background-color: #f2f2f2;
  color: #1e1e1e;
}

.dark div#edit-menu {
  background-color: #707070;
  color: #cfcfcf;
}

.light div#console-menu {
  background-color: #f2f2f2;
  color: #1e1e1e;
}

.dark div#console-menu {
  background-color: #707070;
  color: #cfcfcf;
}

.light div#console-cont {
  background-color: #fff;
}

.dark div#console-cont {
  background-color: #1e1e1e;
}

.light .blocklySvg {
  background-color: #fff;
}

.dark .blocklySvg {
  background-color: #1e1e1e;
}

.light .workspace-div line {
  stroke: #e3e3e3;
}

.dark .workspace-div line {
  stroke: #4f4f4f;
}

.light #stlite-cont {
  background-color: #fff;
}

.dark #stlite-cont {
  background-color: #1e1e1e;
}

.light .blocklyToolboxDiv {
  background-color: #fff;
}

.dark .blocklyToolboxDiv {
  background-color: #1e1e1e;
}

.light .blocklyTreeLabel {
  color: #1e1e1e;
}

.dark .blocklyTreeLabel {
  color: #cfcfcf;
}

.light .blocklyTreeSeparator span {
  color: #e5e5e5;
}

.dark .blocklyTreeSeparator span {
  color: #1e1e1e;
}

.light ul.menu-list {
  background-color: #e5e5e5;
}

.dark ul.menu-list {
  background-color: #474747;
}

.light ul.menu-list li:hover {
  background-color: #c1c1c1;
}

.dark ul.menu-list li:hover {
  background-color: #6c6c6c;
}

.light span.menu-btn:hover {
  background-color: #c1c1c1;
}

.dark span.menu-btn:hover {
  background-color: #6c6c6c;
}

.light #file-tree-modal {
  background-color: #f2f2f2;
  color: #1e1e1e;
}

.dark #file-tree-modal {
  background-color: #707070;
  color: #cfcfcf;
}

.light #file-tree-modal #file-tree-modal-menu {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dark #file-tree-modal #file-tree-modal-menu {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.light #file-tree-modal-list ul li:hover {
  background-color: #dbdbdb;
}

.dark #file-tree-modal-list ul li:hover {
  background-color: #646464;
}

.light #menu-left {
  color: #1e1e1e;
}

.dark #menu-left {
  color: #cfcfcf;
}

.light .tooltip-menu {
  background-color: #f2f2f2;
  color: #1e1e1e;
}

.dark .tooltip-menu {
  background-color: #707070;
  color: #cfcfcf;
}

.light .tooltip-menu p:hover {
  background-color: #dbdbdb;
}

.dark .tooltip-menu p:hover {
  background-color: #646464;
}

div#top-nav {
  width: 100%;
  height: 4.5%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  display: flex;
  user-select: none;
}

div#nav-left {
  width: 8%;
  height: 100%;
  display: flex;
  align-items: center;
}

div#nav-center {
  width: 72%;
  height: 100%;
  display: flex;
  align-items: center;
}

div#nav-center span {
  cursor: pointer;
}

div#nav-right {
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding: 0 .5em 0 .5em;
  user-select: none;
}

span#theme-btn {
  cursor: pointer;
}

img#main-logo {
  height: 60%;
}

div#container {
  width: 100%;
  height: calc(100% - 4.5%);
  box-sizing: border-box;
  display: flex;
}

div#left-container {
  width: 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

div#right-container {
  width: 50%;
  height: 100%;
}

.gutter-horizontal {
  cursor: col-resize;
}

.gutter-vertical {
  cursor: row-resize;
}

div#content-menu {
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 0 1em 0 1em;
  user-select: none;
}

div#menu-left {
  min-width: 165px;
  box-sizing: border-box;
}

div#menu-center {
  width: 80%;
  height: 100%;
  box-sizing: border-box;;
}

div#menu-right {
  width: 20%;
  display: flex;
  justify-content: flex-end;
}

div#content-menu span {
  cursor: pointer;
}

.workspace-div {
  width: 100%;
  height: calc(100% - 35px);
  box-sizing: border-box;
}

.workspace-div .blocklyMainBackground {
  stroke: none;
}

div#top-cont {
  width: 100%;
  height: 99%;
}

div#bottom-cont {
  width: 100%;
  height: 50%;
}

div#edit-menu {
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5em 0 0.5em;
  user-select: none;
}

div#edit-cont {
  width: 100%;
  height: calc(100% - 35px);
  box-sizing: border-box;
}

div#console-menu {
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5em 0 0.5em;
  user-select: none;
}

div#console-cont {
  width: 100%;
  height: calc(100% - 35px);
  box-sizing: border-box;
}

#edit-menu-btns {
  display: flex;
  height: 100%;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
}

#edit-menu-btns span {
  margin: 0 0 0 0.5em;
}

#edit-menu-btns span.active {
  color: rgb(99, 177, 255);
}

#edit-menu-title {
  margin: 0 0.5em 0 0;
}

#stlite-cont {
  display: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 36px);
  border: none;
}

div#console-menu-btns {
  display: flex;
  align-items: center;
}

span#execute-btn {
  cursor: pointer;
}

div#share {
  width: 40%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

input#stlite-publish-url {
  width: 80%;
  margin: 0 1em 0 0;
}

#publish-btn {
  cursor: pointer;
  margin: 0 0.5em 0 0;
}

ul.menu-list {
  position: absolute;
  top: 4.5%;
  width: max-content;
  height: max-content;
  z-index: 99;
  background-color: #e5e5e5;
  padding: 0.5em 0 0.5em 0;
  box-sizing: border-box;
  display: none;
}

ul.menu-list li {
  cursor: pointer;
  padding: 0.2em 0.5em 0.2em 0.5em;
}

span.menu-btn {
  padding: 1em;
  display: flex;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.input_file {
  display: none;
}

#tab-ul {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

.tab-li {
  min-width: 100px;
  height: 100%;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5em .5em 0 0;
}

#content2, #content3 {
  display: none;
}

.blocklyToolboxDiv {
  overflow: hidden;
}

#setting-menu-list {
  position: absolute;
  top: 4.5%;
  left: 11.9%;
}

#copy-address {
  cursor: pointer;
}

#large-modal {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 70;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}

#large-modal-container {
  width: 80%;
  height: 90%;
  border-radius: 1em;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: whitesmoke;
}

#large-modal-tit {
  width: 100%;
  height: 7%;
  display: flex;
  align-items: center;
  color: white;
  border-radius: 1em 1em 0 0;
  background-color: #0a0a0a;
  user-select: none;
}

#large-modal-cont {
  width: 100%;
  height: calc(100% - 7%);
}

#large-modal-tit h3 {
  width: 95%;
  font-size: 22px;
  text-align: center;
}

#large-modal-tit span {
  width: 5%;
  text-align: center;
  cursor: pointer;
}

#menu-left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#file-tree-icon {
  margin: 0 0.5em 0 0;
  /* display: none; */
}

#menu-dataset {
  display: none;
}

#file-tree-modal {
  width: 240px;
  height: calc(100% - 35px);
  position: absolute;
  top: 35px;
  left: 0;
  z-index: 70;
  background-color: white;
  display: none;
}

#file-tree-modal-menu {
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  cursor: pointer;
  padding: 0 5px 0 5px;
}

#file-tree-modal-list {
  width: 100%;
  height: calc(100% - 35px);
  box-sizing: border-box;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

#file-tree-modal-list ul li {
  cursor: pointer;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 5px 0 5px;
  position: relative;
}

.tooltip-menu {
  width: 100px;
  height: max-content;
  position: absolute;
  right: 10px;
  text-align: center;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  z-index: 100;
}

.tooltip-menu p {
  width: 100%;
  height: 100%;
  cursor: pointer;
  user-select: none;
}