@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600&display=swap");
#btn-debug-code {
  position: fixed;
  right: 0;
  top: 45%;
  z-index: 999999;
  width: 35px;
  height: 40px;
  border: 0;
  opacity: 0.5;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: all 0.2s;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#btn-debug-code:hover {
  opacity: 0.9;
}

#debug-code-modal {
  font-family: "Sarabun", sans-serif;
  opacity: 0;
  display: none;
  transition: all 0.2s;
  width: 500px;
  min-width: 300px;
  min-height: 200px;
  height: 500px;
  position: fixed;
  left: calc(50% - 150px);
  top: 5%;
  border-radius: 10px;
  background-color: #3A4248;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  overflow: hidden;
}
#debug-code-modal.is_show {
  opacity: 1;
  display: block;
}
#debug-code-modal:before {
  cursor: nw-resize;
  content: url(../../../.framework/module_main/detiw/icon/icon-resize.svg);
  position: absolute;
  right: 7px;
  bottom: 2px;
}
#debug-code-modal .debug-code-header {
  cursor: move;
  padding: 10px 15px 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #3A4248;
  font-family: "Sarabun", sans-serif;
}
#debug-code-modal .debug-code-header .debug-code-title {
  font-weight: 500;
  font-size: 21px;
  margin: 0;
}
#debug-code-modal .debug-code-header .debug-code-close {
  background: none;
  border: none;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}
#debug-code-modal .debug-code-header .debug-code-close:hover {
  transform: rotate(90deg);
  opacity: 0.75;
}
#debug-code-modal .debug-code-header .debug-code-close:focus {
  outline: none;
}
#debug-code-modal .debug-code-sub-header {
  display: flex;
  align-items: center;
  color: #FFF;
  padding: 10px 15px;
}
#debug-code-modal .debug-code-sub-header .expand {
  padding: 0 7px;
  background-color: #8bc34a;
  border-radius: 5px;
  color: #fff;
  margin-right: 10px;
  font-family: "Sarabun", sans-serif;
  cursor: pointer;
  font-size: 14px;
}
#debug-code-modal .debug-code-sub-header .expand:hover {
  background-color: #7bad41;
}
#debug-code-modal .debug-code-sub-header .unexpand {
  padding: 0 12px;
  background-color: #ff9800;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-family: "Sarabun", sans-serif;
  font-size: 14px;
}
#debug-code-modal .debug-code-sub-header .unexpand:hover {
  background-color: #e98d02;
}
#debug-code-modal .debug-code-body {
  width: 100%;
  height: calc(100% - 98px);
  padding: 0 15px 0 15px;
  overflow: hidden;
  overflow-y: auto;
}
#debug-code-modal .debug-code-body .code-group {
  font-family: "Sarabun", sans-serif;
  cursor: pointer;
  margin-bottom: 10px;
}
#debug-code-modal .debug-code-body .code-group .code-icon {
  padding-right: 7px;
}
#debug-code-modal .debug-code-body .code-group .code-icon svg {
  transition: all 0.3s;
  margin-top: -4px;
}
#debug-code-modal .debug-code-body .code-group.active .code-icon svg {
  transform: rotate(90deg);
}
#debug-code-modal .debug-code-body .code-group .code-class {
  color: #E91E63;
}
#debug-code-modal .debug-code-body .code-group .code-function {
  color: #FF9800;
}
#debug-code-modal .debug-code-body .code-group .code-bracket {
  color: #E91E63;
}
#debug-code-modal .debug-code-body .code-group .params-group .code-params {
  color: #FFF;
}
#debug-code-modal .debug-code-body .code-group .params-group .code-params:after {
  content: ", ";
}
#debug-code-modal .debug-code-body .code-group .params-group .code-params:last-child:after {
  content: "";
}
#debug-code-modal .debug-code-body .code-group .params-group .code-params .debug-code-param-key {
  cursor: pointer;
}
#debug-code-modal .debug-code-body .code-group .params-group .code-params .debug-code-param-key:hover {
  color: #3e88fb;
}
#debug-code-modal .debug-code-body .code-response {
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 10px;
  height: 0;
  opacity: 0;
  transition: all 0.3s;
}
#debug-code-modal .debug-code-body .code-response pre {
  background-color: #272822;
  margin-bottom: 0;
}
#debug-code-modal .debug-code-body .code-response.active {
  height: auto;
  opacity: 1;
}

.white-theme #btn-debug-code {
  background-color: #000;
}
.white-theme #debug-code-modal {
  background-color: #3a4248;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
}
.white-theme #debug-code-modal .debug-code-header .debug-code-title {
  color: #FFF;
}
.white-theme #debug-code-modal .debug-code-header .debug-code-close path {
  fill: #c1c1c1;
}
.white-theme #debug-code-modal .debug-code-body .code-group .params-group .code-params {
  color: #FFF;
}
.white-theme #debug-code-modal .debug-code-body .code-response pre {
  background-color: #272822;
}/*# sourceMappingURL=detiw.css.map */