@charset "utf-8";
@import url("master.css");
@import url("modal.css");

#wrapper {
  height: 100%;
  border-right: 1px solid #474747;
}

/* header area */
#header {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 0;
  height: 40px;
  background: #3c3c3c;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.header_l {
  display: flex;
}
.logo {
  display: flex;
  margin: 1px 0 0 7px;
}
.logo h4 {
  margin-left: 7px;
  padding-top: 7px;
  color: #ccc;
}
.logo_img {
  cursor: pointer;
}

/* menubar area 재구성 */
#menubar {
  display: inline-flex;
  align-items: center;
  margin-left: 20px;
}
.menubar-button {
  padding: 9px 8px;
  color: #ccc;
  cursor: pointer;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.menubar-button:hover {
  background-color: #121212;
  border-radius: 6px;
}

/* 각 메뉴리스트에 맞는 포지션 주기 */
.menubar-button:nth-child(1) .menubar-list {
  left: 78px;
}
.menubar-button:nth-child(2) .menubar-list {
  left: 124px;
}
.menubar-button:nth-child(3) .menubar-list {
  left: 170px;
}
.menubar-button:nth-child(4) .menubar-list {
  left: 216.5px;
}

/* 메뉴 리스트 area */
.menubar-list {
  position: absolute;
  top: 36px;
  background-color: #121212;
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  border: 1px solid #3c3c3c;
  z-index: 10000;
  padding: 6px 0;
  display: none;
  cursor: default;
}

/* 메뉴 리스트 내용 area */
.menubar-list div {
  color: #ccc;
  cursor: pointer;
  padding: 4px 7em 4px 28px;
}
.menubar-list div[data-active="false"] {
  color: #4e4e4e;
  pointer-events: none;
  cursor: default;
}
.menubar-list div a {
  color: #ccc;
}
.menubar-list div:hover {
  background-color: #474747;
}
.menubar-list div span {
  float: right;
  position: absolute;
  right: 0;
  padding: 0 10px;
}
.menubar-border {
  border-top: 1px solid #3c3c3c;
  margin: 6px 0;
  padding: 0 !important;
}
.link_a:active {
  color: #ccc;
}

/* 메뉴 버튼 클릭 open class가 있는 area*/
.menubar-button.open {
  padding: 8px 7px;
  background-color: #121212;
  box-shadow: 0 2px 4px rgb(0 0 0/ 20%);
  box-sizing: border-box;
  border: 1px solid #3c3c3c;
}
.menubar-button.open:hover {
  box-shadow: 0 2px 4px rgb(0 0 0/ 20%) !important;
  box-sizing: border-box !important;
  border: 1px solid #3c3c3c !important;
  border-radius: 0px !important;
}

/* XML 열기 area */
.get_block_span {
  all: unset !important;
}
.file_open {
  padding: 4px 0px !important;
}
.menubar-list div label {
  padding: 4px 193px 4px 28px;
}
.menubar-list div label:hover {
  background-color: #474747;
}
.input_file {
  text-decoration: none;
  font-size: 17px;
  padding: 0;
  margin: 0;
  display: none;
}

/* top_right_btn area */
.header_r {
  display: flex;
}
.top_right_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.top_right_btn li {
  margin-left: 7px;
}

#menubar-library-add {display: flex; justify-content: center; align-items: center; cursor: pointer;}
#menubar-library-add span {margin: 0 5px 0 0;}

/* theme_btn */
.theme_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  color: #ccc;
}
.theme_btn li:first-child {
  margin-right: 10px;
}
.theme_btn li:first-child::before {
  content: "";
  margin: auto;
  width: 1px;
  height: 20px;
  background-color: #888;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.theme_btn a {
  margin: 0 2px;
  color: #ccc;
}
.theme_btn .dark {
  color: #e6d102;
}

.header_r .close {
  margin: 4px 10px 0 35px;
  color: #ccc;
}

/* container area */
#container {
  display: grid;
  grid-template-columns: 3fr 10px 1fr;
  height: calc(100% - 40px);
}
.cont_l {
  width: 210px;
  border-right: 1px solid #474747;
}
#container_iframe {
  display: none;
  height: calc(100% - 40px);
}
#iframe {
  width: 100%;
  height: 100%;
}

/* block area */
.tab-menu-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 0;
  min-width: 180px;
  border-right: 1px solid #252526;
}
#file-modal-close {
  cursor: pointer;
}
.tab-menu-box a {
  margin-right: 10px;
  color: #ccc;
}
.meun_tit {
  margin-left: 10px;
  padding: 10px 0;
  font-size: 21px;
  font-weight: 400;
}
.tab-menu-box {
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.cont_l {
  position: relative;
  background-color: #252526;
}
.hide {
  z-index: 99;
  display: none;
  position: absolute;
  left: 211px;
  top: 52px;
  padding: 10px;
  width: 500px;
  height: 100%;
  background: #2c2c2c;
  color: #fff;
}
.block1 {
  padding: 10px 0;
  border-top: 1px solid #474747;
  border-bottom: 1px solid #474747;
}
.block2 {
  padding: 10px 0;
}
.block1 li,
.block2 li {
  padding-left: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 30px;
}
.block1 li.block_on,
.block1 li:hover,
.block2 li:hover {
  background: #ccc;
}
.block1 li.block_on a,
.block1 li:hover a,
.block2 li:hover a {
  color: #252526;
}
.meun_tit .b0,
.block1 span,
.block2 span {
  display: inline-block;
  margin-right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.block1 a,
.block2 a {
  color: #ccc;
}
.block1 span.b1 {
  background: #4c97ff;
}
.block1 span.b2 {
  background: #6d5ba5;
}
.block1 span.b3 {
  background: #ffab19;
}
.block1 span.b4 {
  background: #9966ff;
}
.block1 span.b5 {
  background: #d65cd6;
}
.block1 span.b6 {
  background: #4cbfe6;
}
.block1 span.b7 {
  background: #e8754d;
}
.block1 span.b8 {
  background: #41cdcd;
}
.block1 span.b9 {
  background: #55ad15;
}
.block1 span.b10 {
  background: #467cb1;
}
.block1 span.b11 {
  background: #ff8c1a;
}

.block2 span.b12 {
  background: #472bff;
}
.block2 span.b13 {
  background: #ff3d98;
}
.block2 span.b14 {
  background: #e8be38;
}
.block2 span.b15 {
  background: #5ae88a;
}
.block2 span.b16 {
  background: #e85938;
}

/* cont_c tab area */
.tabs_area {
  display: flex;
  justify-content: space-between;
  background-color: #484848;
}
.cont_c {
  position: relative;
  min-width: calc(100% - 590px);
  border-right: 2px solid #3c3c3c;
}
ul.tabs,
ul.tabs_in {
  margin: 0;
  padding: 0;
}
ul.tabs li,
ul.tabs_in li {
  display: inline-block;
  margin-right: -6px;
  padding: 9px 70px 10px 70px;
  background-color: #484848;
  font-size: 18px;
  color: #969696;
  cursor: pointer;
}
ul.tabs li.current,
ul.tabs_in li.current {
  position: relative;
  background-color: #1e1e1e;
  color: #fff;
  border-radius: 15px 15px 0 0;
}
ul.tabs li.tab_link a {
  display: none;
}
.tab_link {
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
ul.tabs li.current a {
  display: block;
  position: absolute;
  right: 8px;
  top: 8px;
}
.tabs_btn {
  display: flex;
}
.tabs_btn li {
  margin: 7px 3px 0 3px;
}
.tabs_btn li:last-child {
  margin-right: 10px;
}
.tabs_btn li .material-icons {
  font-size: 28px;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.tabs_btn li a {
  color: #ccc;
}
.cont_c .tab_content {
  padding: 10px;
}
.tab_content,
.content_link {
  display: none;
  height: 100%;
  background: url(/../img/new_edub_img/dark_bg.png) repeat #1e1e1e;
  color: #ccc;
}
.tab_content.current,
.content_link.current {
  display: block;
}

/* 탭 내용 관련 area */
.content_link {
  display: none;
  background: #212429;
  padding: 12px;
  /*내용 박스 안의 패딩*/
}

.content_link.current {
  display: block;
  margin: 0px;
  padding: 0px;
}

/* cont_r cont_t area */
.cont_r {
  display: grid;
  grid-template-rows: 2fr 10px 1fr;
  /* flex-direction:column; */
  min-height: 100%;
}
.cont_t {
  overflow: hidden;
  position: relative;
}

.code_area {
  display: flex;
  justify-content: space-between;
  background-color: #252526;
}

.code_tit {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.code_tit button {
  margin: 0 1em 0 0;
  padding: 0.1em 0.3em 0.1em 0.3em;
}

.code_cont {
  height: calc(100% - 38px);
}
#asyncCodeEditor {
  position: absolute;
  top: 38px;
  width: 100%;
}
.meun_tit {
  position: relative;
  box-sizing: border-box;
  height: 38px;
  font-size: 17px;
  color: #ccc;
}
#block-on-off {
  width: 80px;
  height: 25px;
  border-radius: 1em;
  /* border: 1px solid black; */
  color: white;
  box-shadow: gray .1em .1em .2em;
}
#block-on-off.off {
  background-color: rgba(255, 99, 71, 0.5);
  border: 1.5px solid rgb(255, 99, 71);
}
#block-on-off.on {
  background-color: rgba(104, 185, 132, 0.5);
  border: 1.5px solid rgb(61, 86, 86);
}
.meun_tit span.material-icons {
  position: absolute;
  left: 0;
  top: 11px;
  color: #519aba;
}
.meun_tit span.name {
  position: absolute;
  left: 30px;
  top: 13px;
  width: 150px;
}

/* cont_r cont_b area */
.cont_b {
  height: 100%;
  position: relative;
}
.console_area {
  display: flex;
  justify-content: space-between;
  background-color: #252526;
}
.console_btn {
  display: flex;
  align-items: center;
}
.console_btn li {
  margin: 8px 3px;
}
.console_btn li:last-child {
  margin-right: 8px;
}
.console_btn li a {
  color: #ccc;
}
.console_btn li .material-icons {
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
#exeArea {
  padding: 8px;
  background: #1e1e1e;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: #ccc;
  border: none;
  height: calc(100% - 42.5px);
}
#exeArea:focus {
  outline: none;
}

/* chart open */
/* #chart { width: 100%; position: relative; overflow: hidden; }
#chart_mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); zoom: 1; opacity: 0.5; z-index: 9998; display: none; }
.chart_menu_open { background: none; border: 0; font-size: 15px; color: #fff; cursor: pointer; }

.slide_menu {width: 800px; height: 100%; background: #fff; position: fixed; top: 0; right: 0; overflow-y: scroll; z-index: 9999; display: none; }
.slide_menu_in{display:flex; justify-content:space-between; padding:5px 8px; background: #1890ff;}
.slide_menu_btn ul{display:flex;}
.slide_menu_btn ul a, .slide_menu .menu_close a{display:inline-block;margin:3px 0;padding:7px 10px;min-width:80px;border-radius:5px;border:1px solid #0c80ec;background:#fff;color:#333;text-align:center;}
.slide_menu .menu_close a{min-width:50px;margin-top:10px;border:1px solid #0c80ec;background:#2c2c2c;color:#fff;} */

/* light_mode area */
#wrapper.light_mode {
  border-right: 1px solid #d7d7d7;
}

.light_mode #header {
  background: #ddd;
}

/* 메뉴 글자색 */
.light_mode .header_r .close,
.light_mode .theme_btn,
.light_mode .theme_btn .dark,
.light_mode #gnb ul li a,
.light_mode .meun_tit span.name,
.light_mode .get_block_span {
  color: #333;
}
.light_mode .logo h4 {
  color: #333;
}

.light_mode .menubar-button {
  color: #333;
}
.light_mode .menubar-button:hover {
  background-color: #f7f7f7;
}
.light_mode .menubar-list {
  background-color: #f7f7f7;
  border: 1px solid #c1c1c1;
}
.light_mode .menubar-list div {
  color: #333;
}
.light_mode .menubar-list div[data-active="false"] {
  color: #bdbdbd;
}
.light_mode .menubar-list div a {
  color: #333;
}
.light_mode .menubar-list div:hover,
.light_mode .menubar-list div label:hover {
  background-color: #c1c1c1;
}
.light_mode .menubar-border {
  border-top: 1px solid #c1c1c1;
}
.light_mode .menubar-button.open {
  background-color: #f7f7f7;
  border: 1px solid #c1c1c1;
}
.light_mode .menubar-button.open:hover {
  box-shadow: 0 2px 4px rgb(0 0 0/ 20%) !important;
  box-sizing: border-box !important;
  border: 1px solid #c1c1c1 !important;
  border-radius: 0px !important;
}
.light_mode .link_a:active {
  color: #333;
}

/* 블럭창 */
.light_mode .cont_l {
  border-right: 1px solid #d7d7d7;
  background-color: #f3f3f3;
}
.light_mode .block1 {
  border-top: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
}
.light_mode .tab-menu-box {
  border-right: 1px solid #d7d7d7;
}
.light_mode .meun_tit,
.light_mode .tab-menu-box a,
.light_mode .block1 a,
.light_mode .block2 a {
  color: #616161;
}
.light_mode .block1 li.block_on,
.light_mode .block1 li:hover,
.light_mode .block2 li:hover {
  background: #616161;
}
.light_mode .block1 li.block_on a,
.light_mode .block1 li:hover a,
.light_mode .block2 li:hover a {
  color: #fff;
}

/* 탭 배경,글자색 */
.light_mode .tabs_area {
  background-color: #ececec;
}
.light_mode .tabs_btn li a,
.light_mode .console_btn li a {
  color: #636363;
  cursor: pointer;
}
.light_mode ul.tabs li,
.light_mode ul.tabs_in li {
  background-color: #ececec;
  color: #6a6a6a;
}
.light_mode ul.tabs li.current,
.light_mode ul.tabs_in li.current {
  background-color: #fff;
  color: #333;
  border-radius: 15px 15px 0 0;
}
.light_mode .tab_content,
.light_mode .content_link {
  background: url(/../img/new_edub_img/light_bg.png) repeat #fff;
  color: #333;
}
.light_mode .tab-menu {
  background-color: #ececec;
  border-right: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
}
.light_mode .workspace {
  border-right: 1px solid #d7d7d7;
}
.light_mode ul.tabs li.current a {
  color: #505050;
}

/* 컨텐츠 영역 테두리 */
.light_mode .cont_c {
  border-right: 2px solid #e7e7e7;
}
/* .light_mode .cont_b{} */

/* 라이트모드 버튼 */
.light_mode .theme_btn .light {
  color: #25e36e;
}

/* 코드/콘솔제목 배경,글자색 */
.light_mode .code_area,
.light_mode .console_area {
  background-color: #ececec;
}
.light_mode #exeArea,
.light_mode #exeArea {
  background: #fff;
  color: #333;
}

/* cont_l */
.cont_l {
  min-width: 100%;
  min-height: 100%;
}

.tab-menu {
  width: 100%;
  height: 38px;
  background-color: #484848;
  border-right: 1px solid #3c3c3c;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #474747;
}

.workspace {
  width: 100%;
  height: 100%;
  border-right: 1px solid #3c3c3c;
}

.tab-menu-l {
  display: flex;
}

.tab-menu-r {
  display: flex;
}

/* 스플릿 css */
.main-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  /* height:100%; */
}

.code-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

.content_area {
  width: 100%;
  height: calc(100vh - 78px);
}

/* 텍스트 에디터 */
.txt-mode-editor {
  width: 100%;
  height: calc(100vh - 78px);
  visibility: hidden;
}

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

#runButton1-loading {
  width: 20px;
  height: 20px;
  display: none;
}