/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

@charset "UTF-8";
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/NotoSansKr/NotoSansKR-Light.woff2") format("woff2"), url("/assets/fonts/NotoSansKr/NotoSansKR-Light.woff") format("woff"), url("/assets/fonts/NotoSansKr/NotoSansKR-Light.otf") format("opentype");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/NotoSansKr/NotoSansKR-Regular.woff2") format("woff2"), url("/assets/fonts/NotoSansKr/NotoSansKR-Regular.woff") format("woff"), url("/assets/fonts/NotoSansKr/NotoSansKR-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/NotoSansKr/NotoSansKR-Bold.woff2") format("woff2"), url("/assets/fonts/NotoSansKr/NotoSansKR-Bold.woff") format("woff"), url("/assets/fonts/NotoSansKr/NotoSansKR-Bold.otf") format("opentype");
}
@font-face {
  font-family: "codropsicons";
  src: url("/assets/fonts/codropsicons/codropsicons.eot");
  src: url("/assets/fonts/codropsicons/codropsicons.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/codropsicons/codropsicons.woff") format("woff"), url("/assets/fonts/codropsicons/codropsicons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "icomoon";
  src: url("/assets/fonts/menuicons/icomoon.eot");
  src: url("/assets/fonts/menuicons/icomoon.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/menuicons/icomoon.woff") format("woff"), url("/assets/fonts/menuicons/icomoon.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.layer-popup {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 20000;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
  padding: 21px 30px 30px;
  border-radius: 10px;
  background: #fff;
}
.layer-popup > .tp {
  padding-bottom: 9px;
  border-bottom: 2px solid #EFEFEF;
  font-weight: 700;
  font-size: 22px;
  color: #676767;
}
.layer-popup > .by {
  overflow-y: auto;
  max-height: calc(100vh - 330px);
  padding-top: 30px;
}
.layer-popup .btn-popup {
  font-size: 0;
  margin-top: 25px;
  text-align: center;
}
.layer-popup .btn-popup > a:not(:first-child) {
  margin-left: 18px;
}
.layer-popup.w480 {
  width: 481px;
}
.layer-popup.w830 {
  width: 830px;
}

.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 0.5s;
  animation-direction: normal;
  animation-fill-mode: both;
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 0.4s;
  animation-direction: normal;
  animation-fill-mode: both;
}

.alert-popup {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 100000;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
  padding: 0 35px 25px;
  border-radius: 5px;
  background: #fff;
}
.alert-popup > .alert-msg {
  display: table-cell;
  width: 250px;
  height: 120px;
  vertical-align: middle;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #5A5A5A;
}
.alert-popup > .btn-popup {
  text-align: center;
}
.alert-popup > .btn-popup > a:not(:first-child) {
  margin-left: 10px;
}

@keyframes fadeInUp {
  0% {
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50%, -60%, 0);
    opacity: 0;
  }
}
@keyframes fadeInDown {
  0% {
    transform: translate3d(-50%, -60%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
}
.alert-popup .btn {
  display: inline;
}

.btn.w200 {
  min-width: 200px;
  height: 45px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
  line-height: 45px;
  font-size: 16px;
}

.btn.w200.type1 {
  border: 1px solid #fff;
  color: #FAFAFA;
}

.btn.w200.type1:hover {
  border-color: rgba(255, 255, 255, 0);
  background: rgba(241, 241, 241, 0.7);
  color: #fff;
}

.btn.w200.type1:active {
  background: #fff;
  color: #92C2CE;
}

.btn.w200.type2 {
  border: 1px solid #F17C91;
  color: #F17C91;
}

.btn.w200.type2:hover {
  border-color: rgba(241, 124, 145, 0);
  background: rgba(241, 124, 145, 0.6);
  color: #fff;
}

.btn.w200.type2:active {
  background: #E56980;
}

.btn.w200.type3 {
  background: #F17C91;
  color: #fff;
}

.btn.w200.type3:hover {
  border-color: rgba(241, 124, 145, 0);
  background: rgba(241, 124, 145, 0.6);
  color: #fff;
}

.btn.w200.type3:active {
  background: #E56980;
}

.btn.w125 {
  min-width: 125px;
  height: 35px;
  line-height: 35px;
  font-size: 15px;
}

.btn.w125.type1 {
  border: 1px solid #92C2CE;
  color: #92C2CE;
}

.btn.w125.type1:hover {
  border-color: rgba(146, 194, 206, 0);
  background: rgba(146, 194, 206, 0.5);
  color: #fff;
}

.btn.w125.type1:active {
  background: #86B6C2;
  color: #fff;
}

.btn.w125.type2 {
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid #fff;
  color: #92C2CE;
}

.btn.w125.type2:hover {
  border-color: rgba(146, 194, 206, 0);
  background: rgba(146, 194, 206, 0.5);
  color: #fff;
}

.btn.w125.type2:active {
  background: #86B6C2;
  color: #fff;
}

.btn.w120 {
  min-width: 120px;
  height: 35px;
  line-height: 35px;
  font-size: 15px;
}

.btn.w120.type1 {
  border: 1px solid #92C2CE;
  background: #92C2CE;
  color: #fff;
}

.btn.w120.type1:hover {
  border-color: rgba(146, 194, 206, 0);
  background: rgba(146, 194, 206, 0.5);
  color: #fff;
}

.btn.w120.type1:active {
  background: #86B6C2;
  color: #fff;
}

.btn.w120.type2 {
  border: 1px solid #92C2CE;
  color: #92C2CE;
}

.btn.w120.type2:hover {
  border-color: rgba(146, 194, 206, 0);
  background: rgba(146, 194, 206, 0.5);
  color: #fff;
}

.btn.w120.type2:active {
  background: #86B6C2;
  color: #fff;
}

.btn.w105 {
  min-width: 120px;
  height: 22px;
  line-height: 22px;
  font-size: 13px;
}

.btn.w105.type1 {
  border: 1px solid #92C2CE;
  background: #92C2CE;
  color: #fff;
}

.btn.w105.type1:hover {
  border-color: #688E9B;
  background: #688E9B;
  color: #fff;
}

.btn.w105.type1:active {
  border-color: #86B6C2;
  background: #86B6C2;
  color: #fff;
}

.btn.w105.type2 {
  border: 1px solid #92C2CE;
  color: #92C2CE;
}

.btn.w105.type2:hover {
  border-color: rgba(146, 194, 206, 0);
  background: rgba(146, 194, 206, 0.5);
  color: #fff;
}

.btn.w105.type2:active {
  background: #86B6C2;
  color: #fff;
}

.btn.w85 {
  min-width: 85px;
  height: 28px;
  line-height: 30px;
  font-weight: 400;
  font-size: 12px;
}

.btn.w85.type1 {
  background: #EBEBEB;
  color: #707070;
}

.btn.w85.type1:hover {
  background: rgba(235, 235, 235, 0.3);
  color: #707070;
}

.btn.w85.type1:active {
  background: #92C2CE;
  font-weight: 700;
  color: #fff;
}

.btn.w55 {
  min-width: 55px;
  height: 22px;
  line-height: 23px;
  font-size: 13px;
}

.btn.w55.type1 {
  background: #909090;
  color: #fff;
}

.btn.w55.type2 {
  background: #92C2CE;
  color: #fff;
}

.btn.w55.tab {
  font-weight: 400;
  font-size: 12px;
}

.btn.w55.tab.type1 {
  background: #D6D6D6;
  color: #909090;
}

.btn.w55.tab.type1:active {
  background: #92C2CE;
  font-weight: 700;
  color: #fff;
}

.btn.w55.tab.active {
  background: #92C2CE;
  color: #fff;
}

.btn.w55.txt {
  box-shadow: none;
  font-weight: 400;
  font-size: 12px;
}

.btn.w55.txt.type1 {
  background: #FAFAFA;
  color: #92C2CE;
}

.btn.w55.txt.type1:hover {
  background: rgba(146, 194, 206, 0.5);
  color: #fff;
}

.btn.w55.txt.type1:active {
  background: #92C2CE;
  color: #fff;
}

.btn-pos {
  display: inline-block;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
  padding: 0 4px;
  border-radius: 20px;
  background: #F2F2F2;
  font-size: 0;
}

.btn-pos > a {
  display: inline-block;
  position: relative;
  width: 26px;
  height: 35px;
  text-align: center;
  vertical-align: top;
}

.btn-pos > a::before,
.btn-pos > a::after {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 35px;
  transition: 0.2s ease;
  opacity: 0;
  margin-left: -5px;
  background-repeat: no-repeat;
  background-position: 0 50%;
}

.btn-pos > a:hover > span {
  opacity: 0;
}

.btn-pos > a:hover::before {
  opacity: 1;
}

.btn-pos > a:active::after {
  opacity: 1;
}

.btn-pos > a > span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 35px;
  transition: 0.2s ease;
  opacity: 1;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  font-size: 0;
}

.btn-pos > a:not(:last-child) > span::after {
  display: block;
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 8px;
  margin-top: -4px;
  background: #D6D6D6;
}

.btn-box {
  font-size: 0;
}

.btn-box::after {
  display: block;
  content: "";
  clear: both;
}

.btn-box > .l {
  float: left;
}

.btn-box > .r {
  float: right;
}

.btn-box > .c {
  text-align: center;
}

.btn-box.sp3 a:not(:last-child) {
  margin-right: 3px;
}

.btn-box.sp5 a:not(:last-child) {
  margin-right: 5px;
}

.btn-box.sp10 a:not(:last-child) {
  margin-right: 10px;
}

.btn.page-per {
  padding: 0 10px;
}

.btn-wrapper {
  position: absolute;
  right: 40px;
  top: 20px;
  display: flex;
}

.btn-group a {
  color: #fff;
}

.btn.list-type {
  padding: 3px 8px;
}

.btn i.grid-icon,
.btn i.list-icon {
  position: relative;
  top: 4px;
  font-size: 0;
}

.btn .mdi:before {
  line-height: 0;
}

.btn-group .btn.btn-success {
  padding: 5px 18px;
}

.btn-group .btn.btn-success:first-child {
  border-top-left-radius: 0;
}

.btn-group .btn.btn-success:last-child {
  border-top-right-radius: 0;
}

.modal-container .btn.btn-warning {
  color: white;
  font-weight: 600;
}

.check-single, .btn-radio {
  display: inline-block;
  vertical-align: top;
}
.check-single > input[type=checkbox]:checked + label::before, .check-single input[type=radio]:checked + label::before, .btn-radio > input[type=checkbox]:checked + label::before, .btn-radio input[type=radio]:checked + label::before {
  opacity: 1;
}
.check-single > label, .btn-radio > label {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #EBEBEB;
  cursor: pointer;
}
.check-single > label::before, .btn-radio > label::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: 0.2s ease;
  width: 16px;
  height: 16px;
  background: url(/assets/images/input_arrow.png) no-repeat 50% 50%;
}

.check {
  display: inline-block;
  font-size: 13px;
}
.check > input[type=radio]:checked + label::after, .check > input[type=checkbox]:checked + label::after {
  opacity: 1;
}
.check > label {
  display: inline-block;
  position: relative;
  padding-left: 22px;
}
.check > label::before, .check > label::after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
}
.check > label::before {
  border-radius: 50%;
  background: #EBEBEB;
}
.check > label::after {
  transition: 0.2s ease;
  opacity: 0;
  border-radius: 50%;
  background: url(/assets/images//input_arrow.png) no-repeat 50% 50%;
}

.inline-check {
  display: inline-block;
  vertical-align: top;
  font-size: 0;
}
.inline-check > .check:not(:first-child) {
  margin-left: 22px;
}

.search-form {
  margin-bottom: 28px;
}

.calendar-box {
  display: inline-block;
  vertical-align: top;
}
.calendar-box > span {
  display: inline-block;
}
.calendar-box > .date-field {
  position: relative;
}
.calendar-box > .date-field > .ui-datepicker-trigger {
  width: 14px;
  height: 14px;
  background: url(/assets/images//btn_datepicker.png) no-repeat 0 0;
  vertical-align: 3px;
  font-size: 0;
}
.calendar-box > .sym {
  margin: 0 3px;
}
.calendar-box .datepicker {
  border-bottom: 0;
}

.search-field > .f {
  float: left;
  position: relative;
  width: calc(100% - 70px);
}
.search-field > .f::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 1px;
  height: 13px;
  background: #646464;
}
.search-field > .f > input[type=text] {
  width: 100%;
  padding-left: 20px;
  border-bottom: 0;
}
.search-field > .s {
  float: right;
}

.input-box {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid #707070;
  vertical-align: top;
}
.input-box > .inner {
  display: table;
  table-layout: auto;
  width: 100%;
}
.input-box > .inner > div {
  display: table-cell;
}
.input-box > .inner > div input[type=text] {
  width: 100%;
  height: auto;
  border: 0;
  vertical-align: baseline;
  text-align: right;
  letter-spacing: inherit;
  color: inherit;
}
.input-box > .inner > .l {
  width: 1%;
}
.input-box > .inner > .inp-txt {
  width: 98%;
  padding-right: 3px;
  text-align: right;
  letter-spacing: 0;
  color: #959595;
}
.input-box > .inner > .unit {
  width: 1%;
  padding-right: 3px;
}
.input-box.w80 {
  width: 80px;
}
.input-box.w90 {
  width: 90px;
}
.input-box.w120 {
  width: 120px;
}

.search-wrapper {
  position: absolute;
  top: 20px;
  width: 320px;
}

input.form-control.keyword {
  max-width: 140px;
  max-height: 31px;
}

.search-wrapper .search-field {
  height: 29px;
  position: relative;
  top: 1px;
  right: 1px;
  padding: 2px 8px;
  flex: 1;
}

input.form-control.editable {
  padding: 2px;
  width: 100%;
}

.modal-container .form-group {
  margin-bottom: 0;
}
.modal-container .form-group .file-select {
  min-width: 220px;
  display: flex;
  justify-content: flex-end;
}
.modal-container .form-group .file-select label {
  max-width: calc(100% - 80px);
}
.modal-container .col-form-label {
  padding: 11px;
  text-align: right;
}
.modal-container input[type=radio] {
  opacity: 1;
  top: 3px;
}
.modal-container input::-moz-placeholder {
  color: #fff;
}
.modal-container input::placeholder {
  color: #fff;
}
.modal-container .form-check {
  margin-top: 10px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 34px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #04c9b7;
}

input:focus + .slider {
  box-shadow: 0 0 1px #04c9b7;
}

input:checked + .slider:before {
  transform: translateX(-26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

div.tagsinput {
  border: 1px solid #CCC;
  background: #FFF;
  padding: 5px;
  width: 300px;
  height: 100px;
  overflow-y: auto;
}

div.tagsinput span.tag {
  border: 1px solid #a5d24a;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  display: block;
  float: left;
  padding: 5px;
  text-decoration: none;
  background: #cde69c;
  color: #638421;
  margin-right: 5px;
  margin-bottom: 5px;
  font-family: helvetica;
  font-size: 13px;
  cursor: pointer;
}
div.tagsinput span.tag.inactive {
  border: 1px solid #c2c2c2;
  background: #efefef;
  color: #999;
}

div.tagsinput span.tag a {
  font-weight: 700;
  color: #82ad2b;
  text-decoration: none;
  font-size: 11px;
}

div.tagsinput input {
  width: 80px;
  margin: 0 5px 5px 0;
  font-family: helvetica;
  font-size: 13px;
  border: 1px solid transparent;
  padding: 5px;
  background: 0 0;
  color: #000;
  outline: 0;
}

div.tagsinput div {
  display: block;
  float: left;
}

.tags_clear {
  clear: both;
  width: 100%;
  height: 0;
}

.not_valid {
  background: #FBD8DB !important;
  color: #90111A !important;
}

.table td {
  font-size: 14px;
  color: #666;
}

.table thead th.ck {
  padding-left: 20px !important;
}

.table thead th i {
  margin-left: 0;
}

td span.item {
  display: flex;
  min-height: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.table td {
  padding: 10px 20px;
}

table.table {
  table-layout: fixed;
}

/* move from / to  */
.blink {
  /* Firefox */
  /* Webkit */
  /* IE */
  animation: blinkeffect normal 1.5s infinite ease-in-out;
  /* Opera */
}

.pt-perspective {
  position: relative;
  width: 100vw;
  height: 100vh;
  perspective: 1200px;
  overflow: hidden;
}

.pt-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}

.pt-page-current,
.no-js .pt-page {
  visibility: visible;
  z-index: 1;
}

.no-js body {
  overflow: auto;
}

.pt-page-ontop {
  z-index: 999;
}

.pt-page-moveToLeft {
  animation: moveToLeft 0.6s ease both;
}

.pt-page-moveFromLeft {
  animation: moveFromLeft 0.6s ease both;
}

.pt-page-moveToRight {
  animation: moveToRight 0.6s ease both;
}

.pt-page-moveFromRight {
  animation: moveFromRight 0.6s ease both;
}

.pt-page-moveToTop {
  animation: moveToTop 0.6s ease both;
}

.pt-page-moveFromTop {
  animation: moveFromTop 0.6s ease both;
}

.pt-page-moveToBottom {
  animation: moveToBottom 0.6s ease both;
}

.pt-page-moveFromBottom {
  animation: moveFromBottom 0.6s ease both;
}

/* fade */
.pt-page-fade {
  animation: fade 0.7s ease both;
}

/* move from / to and fade */
.pt-page-moveToLeftFade {
  animation: moveToLeftFade 0.7s ease both;
}

.pt-page-moveFromLeftFade {
  animation: moveFromLeftFade 0.7s ease both;
}

.pt-page-moveToRightFade {
  animation: moveToRightFade 0.7s ease both;
}

.pt-page-moveFromRightFade {
  animation: moveFromRightFade 0.7s ease both;
}

.pt-page-moveToTopFade {
  animation: moveToTopFade 0.7s ease both;
}

.pt-page-moveFromTopFade {
  animation: moveFromTopFade 0.7s ease both;
}

.pt-page-moveToBottomFade {
  animation: moveToBottomFade 0.7s ease both;
}

.pt-page-moveFromBottomFade {
  animation: moveFromBottomFade 0.7s ease both;
}

/* move to with different easing */
.pt-page-moveToLeftEasing {
  animation: moveToLeft 0.7s ease-in-out both;
}

.pt-page-moveToRightEasing {
  animation: moveToRight 0.7s ease-in-out both;
}

.pt-page-moveToTopEasing {
  animation: moveToTop 0.7s ease-in-out both;
}

.pt-page-moveToBottomEasing {
  animation: moveToBottom 0.7s ease-in-out both;
}

/********************************* keyframes **************************************/
/* move from / to  */
@keyframes moveToLeft {
  to {
    transform: translateX(-100%);
  }
}
@keyframes moveFromLeft {
  from {
    transform: translateX(-100%);
  }
}
@keyframes moveToRight {
  to {
    transform: translateX(100%);
  }
}
@keyframes moveFromRight {
  from {
    transform: translateX(100%);
  }
}
@keyframes moveToTop {
  to {
    transform: translateY(-100%);
  }
}
@keyframes moveFromTop {
  from {
    transform: translateY(-100%);
  }
}
@keyframes moveToBottom {
  to {
    transform: translateY(100%);
  }
}
@keyframes moveFromBottom {
  from {
    transform: translateY(100%);
  }
}
/* fade */
@keyframes fade {
  to {
    opacity: 0.3;
  }
}
/* move from / to and fade */
@keyframes moveToLeftFade {
  to {
    opacity: 0.3;
    transform: translateX(-100%);
  }
}
@keyframes moveFromLeftFade {
  from {
    opacity: 0.3;
    transform: translateX(-100%);
  }
}
@keyframes moveToRightFade {
  to {
    opacity: 0.3;
    transform: translateX(100%);
  }
}
@keyframes moveFromRightFade {
  from {
    opacity: 0.3;
    transform: translateX(100%);
  }
}
@keyframes moveToTopFade {
  to {
    opacity: 0.3;
    transform: translateY(-100%);
  }
}
@keyframes moveFromTopFade {
  from {
    opacity: 0.3;
    transform: translateY(-100%);
  }
}
@keyframes moveToBottomFade {
  to {
    opacity: 0.3;
    transform: translateY(100%);
  }
}
@keyframes moveFromBottomFade {
  from {
    opacity: 0.3;
    transform: translateY(100%);
  }
}
/* scale and fade */
.pt-page-scaleDown {
  animation: scaleDown 0.7s ease both;
}

.pt-page-scaleUp {
  animation: scaleUp 0.7s ease both;
}

.pt-page-scaleUpDown {
  animation: scaleUpDown 0.5s ease both;
}

.pt-page-scaleDownUp {
  animation: scaleDownUp 0.5s ease both;
}

.pt-page-scaleDownCenter {
  animation: scaleDownCenter 0.4s ease-in both;
}

.pt-page-scaleUpCenter {
  animation: scaleUpCenter 0.4s ease-out both;
}

/********************************* keyframes **************************************/
/* scale and fade */
@keyframes scaleDown {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes scaleUpDown {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes scaleDownUp {
  to {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes scaleDownCenter {
  to {
    opacity: 0;
    transform: scale(0.7);
  }
}
@keyframes scaleUpCenter {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}
/* rotate sides first and scale */
.pt-page-rotateRightSideFirst {
  transform-origin: 0% 50%;
  animation: rotateRightSideFirst 0.8s both ease-in;
}

.pt-page-rotateLeftSideFirst {
  transform-origin: 100% 50%;
  animation: rotateLeftSideFirst 0.8s both ease-in;
}

.pt-page-rotateTopSideFirst {
  transform-origin: 50% 100%;
  animation: rotateTopSideFirst 0.8s both ease-in;
}

.pt-page-rotateBottomSideFirst {
  transform-origin: 50% 0%;
  animation: rotateBottomSideFirst 0.8s both ease-in;
}

/* flip */
.pt-page-flipOutRight {
  transform-origin: 50% 50%;
  animation: flipOutRight 0.5s both ease-in;
}

.pt-page-flipInLeft {
  transform-origin: 50% 50%;
  animation: flipInLeft 0.5s both ease-out;
}

.pt-page-flipOutLeft {
  transform-origin: 50% 50%;
  animation: flipOutLeft 0.5s both ease-in;
}

.pt-page-flipInRight {
  transform-origin: 50% 50%;
  animation: flipInRight 0.5s both ease-out;
}

.pt-page-flipOutTop {
  transform-origin: 50% 50%;
  animation: flipOutTop 0.5s both ease-in;
}

.pt-page-flipInBottom {
  transform-origin: 50% 50%;
  animation: flipInBottom 0.5s both ease-out;
}

.pt-page-flipOutBottom {
  transform-origin: 50% 50%;
  animation: flipOutBottom 0.5s both ease-in;
}

.pt-page-flipInTop {
  transform-origin: 50% 50%;
  animation: flipInTop 0.5s both ease-out;
}

/* rotate fall */
.pt-page-rotateFall {
  transform-origin: 0% 0%;
  animation: rotateFall 1s both ease-in;
}

/* rotate newspaper */
.pt-page-rotateOutNewspaper {
  transform-origin: 50% 50%;
  animation: rotateOutNewspaper 0.5s both ease-in;
}

.pt-page-rotateInNewspaper {
  transform-origin: 50% 50%;
  animation: rotateInNewspaper 0.5s both ease-out;
}

/* push */
.pt-page-rotatePushLeft {
  transform-origin: 0% 50%;
  animation: rotatePushLeft 0.8s both ease;
}

.pt-page-rotatePushRight {
  transform-origin: 100% 50%;
  animation: rotatePushRight 0.8s both ease;
}

.pt-page-rotatePushTop {
  transform-origin: 50% 0%;
  animation: rotatePushTop 0.8s both ease;
}

.pt-page-rotatePushBottom {
  transform-origin: 50% 100%;
  animation: rotatePushBottom 0.8s both ease;
}

/* pull */
.pt-page-rotatePullRight {
  transform-origin: 100% 50%;
  animation: rotatePullRight 0.5s both ease;
}

.pt-page-rotatePullLeft {
  transform-origin: 0% 50%;
  animation: rotatePullLeft 0.5s both ease;
}

.pt-page-rotatePullTop {
  transform-origin: 50% 0%;
  animation: rotatePullTop 0.5s both ease;
}

.pt-page-rotatePullBottom {
  transform-origin: 50% 100%;
  animation: rotatePullBottom 0.5s both ease;
}

/* fold */
.pt-page-rotateFoldRight {
  transform-origin: 0% 50%;
  animation: rotateFoldRight 0.7s both ease;
}

.pt-page-rotateFoldLeft {
  transform-origin: 100% 50%;
  animation: rotateFoldLeft 0.7s both ease;
}

.pt-page-rotateFoldTop {
  transform-origin: 50% 100%;
  animation: rotateFoldTop 0.7s both ease;
}

.pt-page-rotateFoldBottom {
  transform-origin: 50% 0%;
  animation: rotateFoldBottom 0.7s both ease;
}

/* unfold */
.pt-page-rotateUnfoldLeft {
  transform-origin: 100% 50%;
  animation: rotateUnfoldLeft 0.7s both ease;
}

.pt-page-rotateUnfoldRight {
  transform-origin: 0% 50%;
  animation: rotateUnfoldRight 0.7s both ease;
}

.pt-page-rotateUnfoldTop {
  transform-origin: 50% 100%;
  animation: rotateUnfoldTop 0.7s both ease;
}

.pt-page-rotateUnfoldBottom {
  transform-origin: 50% 0%;
  animation: rotateUnfoldBottom 0.7s both ease;
}

/* room walls */
.pt-page-rotateRoomLeftOut {
  transform-origin: 100% 50%;
  animation: rotateRoomLeftOut 0.8s both ease;
}

.pt-page-rotateRoomLeftIn {
  transform-origin: 0% 50%;
  animation: rotateRoomLeftIn 0.8s both ease;
}

.pt-page-rotateRoomRightOut {
  transform-origin: 0% 50%;
  animation: rotateRoomRightOut 0.8s both ease;
}

.pt-page-rotateRoomRightIn {
  transform-origin: 100% 50%;
  animation: rotateRoomRightIn 0.8s both ease;
}

.pt-page-rotateRoomTopOut {
  transform-origin: 50% 100%;
  animation: rotateRoomTopOut 0.8s both ease;
}

.pt-page-rotateRoomTopIn {
  transform-origin: 50% 0%;
  animation: rotateRoomTopIn 0.8s both ease;
}

.pt-page-rotateRoomBottomOut {
  transform-origin: 50% 0%;
  animation: rotateRoomBottomOut 0.8s both ease;
}

.pt-page-rotateRoomBottomIn {
  transform-origin: 50% 100%;
  animation: rotateRoomBottomIn 0.8s both ease;
}

/* cube */
.pt-page-rotateCubeLeftOut {
  transform-origin: 100% 50%;
  animation: rotateCubeLeftOut 0.6s both ease-in;
}

.pt-page-rotateCubeLeftIn {
  transform-origin: 0% 50%;
  animation: rotateCubeLeftIn 0.6s both ease-in;
}

.pt-page-rotateCubeRightOut {
  transform-origin: 0% 50%;
  animation: rotateCubeRightOut 0.6s both ease-in;
}

.pt-page-rotateCubeRightIn {
  transform-origin: 100% 50%;
  animation: rotateCubeRightIn 0.6s both ease-in;
}

.pt-page-rotateCubeTopOut {
  transform-origin: 50% 100%;
  animation: rotateCubeTopOut 0.6s both ease-in;
}

.pt-page-rotateCubeTopIn {
  transform-origin: 50% 0%;
  animation: rotateCubeTopIn 0.6s both ease-in;
}

.pt-page-rotateCubeBottomOut {
  transform-origin: 50% 0%;
  animation: rotateCubeBottomOut 0.6s both ease-in;
}

.pt-page-rotateCubeBottomIn {
  transform-origin: 50% 100%;
  animation: rotateCubeBottomIn 0.6s both ease-in;
}

/* carousel */
.pt-page-rotateCarouselLeftOut {
  transform-origin: 100% 50%;
  animation: rotateCarouselLeftOut 0.8s both ease;
}

.pt-page-rotateCarouselLeftIn {
  transform-origin: 0% 50%;
  animation: rotateCarouselLeftIn 0.8s both ease;
}

.pt-page-rotateCarouselRightOut {
  transform-origin: 0% 50%;
  animation: rotateCarouselRightOut 0.8s both ease;
}

.pt-page-rotateCarouselRightIn {
  transform-origin: 100% 50%;
  animation: rotateCarouselRightIn 0.8s both ease;
}

.pt-page-rotateCarouselTopOut {
  transform-origin: 50% 100%;
  animation: rotateCarouselTopOut 0.8s both ease;
}

.pt-page-rotateCarouselTopIn {
  transform-origin: 50% 0%;
  animation: rotateCarouselTopIn 0.8s both ease;
}

.pt-page-rotateCarouselBottomOut {
  transform-origin: 50% 0%;
  animation: rotateCarouselBottomOut 0.8s both ease;
}

.pt-page-rotateCarouselBottomIn {
  transform-origin: 50% 100%;
  animation: rotateCarouselBottomIn 0.8s both ease;
}

/* sides */
.pt-page-rotateSidesOut {
  transform-origin: -50% 50%;
  animation: rotateSidesOut 0.5s both ease-in;
}

.pt-page-rotateSidesIn {
  transform-origin: 150% 50%;
  animation: rotateSidesIn 0.5s both ease-out;
}

/* slide */
.pt-page-rotateSlideOut {
  animation: rotateSlideOut 1s both ease;
}

.pt-page-rotateSlideIn {
  animation: rotateSlideIn 1s both ease;
}

/********************************* keyframes **************************************/
/* rotate sides first and scale */
@keyframes blinkeffect {
  0% {
    background-color: #fff;
  }
  50% {
    background-color: rgb(202, 250, 245);
  }
  100% {
    background-color: #fff;
  }
}
@keyframes rotateRightSideFirst {
  40% {
    transform: rotateY(15deg);
    opacity: 0.8;
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
  }
}
@keyframes rotateLeftSideFirst {
  40% {
    transform: rotateY(-15deg);
    opacity: 0.8;
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
  }
}
@keyframes rotateTopSideFirst {
  40% {
    transform: rotateX(15deg);
    opacity: 0.8;
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
  }
}
@keyframes rotateBottomSideFirst {
  40% {
    transform: rotateX(-15deg);
    opacity: 0.8;
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
  }
}
/* flip */
@keyframes flipOutRight {
  to {
    transform: translateZ(-1000px) rotateY(90deg);
    opacity: 0.2;
  }
}
@keyframes flipInLeft {
  from {
    transform: translateZ(-1000px) rotateY(-90deg);
    opacity: 0.2;
  }
}
@keyframes flipOutLeft {
  to {
    transform: translateZ(-1000px) rotateY(-90deg);
    opacity: 0.2;
  }
}
@keyframes flipInRight {
  from {
    transform: translateZ(-1000px) rotateY(90deg);
    opacity: 0.2;
  }
}
@keyframes flipOutTop {
  to {
    transform: translateZ(-1000px) rotateX(90deg);
    opacity: 0.2;
  }
}
@keyframes flipInBottom {
  from {
    transform: translateZ(-1000px) rotateX(-90deg);
    opacity: 0.2;
  }
}
@keyframes flipOutBottom {
  to {
    transform: translateZ(-1000px) rotateX(-90deg);
    opacity: 0.2;
  }
}
@keyframes flipInTop {
  from {
    transform: translateZ(-1000px) rotateX(90deg);
    opacity: 0.2;
  }
}
/* fall */
@keyframes rotateFall {
  0% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(10deg);
    animation-timing-function: ease-out;
  }
  40% {
    transform: rotateZ(17deg);
  }
  60% {
    transform: rotateZ(16deg);
  }
  100% {
    transform: translateY(100%) rotateZ(17deg);
  }
}
/* newspaper */
@keyframes rotateOutNewspaper {
  to {
    transform: translateZ(-3000px) rotateZ(360deg);
    opacity: 0;
  }
}
@keyframes rotateInNewspaper {
  from {
    transform: translateZ(-3000px) rotateZ(-360deg);
    opacity: 0;
  }
}
/* push */
@keyframes rotatePushLeft {
  to {
    opacity: 0;
    transform: rotateY(90deg);
  }
}
@keyframes rotatePushRight {
  to {
    opacity: 0;
    transform: rotateY(-90deg);
  }
}
@keyframes rotatePushTop {
  to {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}
@keyframes rotatePushBottom {
  to {
    opacity: 0;
    transform: rotateX(90deg);
  }
}
/* pull */
@keyframes rotatePullRight {
  from {
    opacity: 0;
    transform: rotateY(-90deg);
  }
}
@keyframes rotatePullLeft {
  from {
    opacity: 0;
    transform: rotateY(90deg);
  }
}
@keyframes rotatePullTop {
  from {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}
@keyframes rotatePullBottom {
  from {
    opacity: 0;
    transform: rotateX(90deg);
  }
}
/* fold */
@keyframes rotateFoldRight {
  to {
    opacity: 0;
    transform: translateX(100%) rotateY(90deg);
  }
}
@keyframes rotateFoldLeft {
  to {
    opacity: 0;
    transform: translateX(-100%) rotateY(-90deg);
  }
}
@keyframes rotateFoldTop {
  to {
    opacity: 0;
    transform: translateY(-100%) rotateX(90deg);
  }
}
@keyframes rotateFoldBottom {
  to {
    opacity: 0;
    transform: translateY(100%) rotateX(-90deg);
  }
}
/* unfold */
@keyframes rotateUnfoldLeft {
  from {
    opacity: 0;
    transform: translateX(-100%) rotateY(-90deg);
  }
}
@keyframes rotateUnfoldRight {
  from {
    opacity: 0;
    transform: translateX(100%) rotateY(90deg);
  }
}
@keyframes rotateUnfoldTop {
  from {
    opacity: 0;
    transform: translateY(-100%) rotateX(90deg);
  }
}
@keyframes rotateUnfoldBottom {
  from {
    opacity: 0;
    transform: translateY(100%) rotateX(-90deg);
  }
}
/* room walls */
@keyframes rotateRoomLeftOut {
  to {
    opacity: 0.3;
    transform: translateX(-100%) rotateY(90deg);
  }
}
@keyframes rotateRoomLeftIn {
  from {
    opacity: 0.3;
    transform: translateX(100%) rotateY(-90deg);
  }
}
@keyframes rotateRoomRightOut {
  to {
    opacity: 0.3;
    transform: translateX(100%) rotateY(-90deg);
  }
}
@keyframes rotateRoomRightIn {
  from {
    opacity: 0.3;
    transform: translateX(-100%) rotateY(90deg);
  }
}
@keyframes rotateRoomTopOut {
  to {
    opacity: 0.3;
    transform: translateY(-100%) rotateX(-90deg);
  }
}
@keyframes rotateRoomTopIn {
  from {
    opacity: 0.3;
    transform: translateY(100%) rotateX(90deg);
  }
}
@keyframes rotateRoomBottomOut {
  to {
    opacity: 0.3;
    transform: translateY(100%) rotateX(90deg);
  }
}
@keyframes rotateRoomBottomIn {
  from {
    opacity: 0.3;
    transform: translateY(-100%) rotateX(-90deg);
  }
}
/* cube */
@keyframes rotateCubeLeftOut {
  50% {
    animation-timing-function: ease-out;
    transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);
  }
  100% {
    opacity: 0.3;
    transform: translateX(-100%) rotateY(-90deg);
  }
}
@keyframes rotateCubeLeftIn {
  0% {
    opacity: 0.3;
    transform: translateX(100%) rotateY(90deg);
  }
  50% {
    animation-timing-function: ease-out;
    transform: translateX(50%) translateZ(-200px) rotateY(45deg);
  }
}
@keyframes rotateCubeRightOut {
  50% {
    animation-timing-function: ease-out;
    transform: translateX(50%) translateZ(-200px) rotateY(45deg);
  }
  100% {
    opacity: 0.3;
    transform: translateX(100%) rotateY(90deg);
  }
}
@keyframes rotateCubeRightIn {
  0% {
    opacity: 0.3;
    transform: translateX(-100%) rotateY(-90deg);
  }
  50% {
    animation-timing-function: ease-out;
    transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);
  }
}
@keyframes rotateCubeTopOut {
  50% {
    animation-timing-function: ease-out;
    transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
  }
  100% {
    opacity: 0.3;
    transform: translateY(-100%) rotateX(90deg);
  }
}
@keyframes rotateCubeTopIn {
  0% {
    opacity: 0.3;
    transform: translateY(100%) rotateX(-90deg);
  }
  50% {
    animation-timing-function: ease-out;
    transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
  }
}
@keyframes rotateCubeBottomOut {
  50% {
    animation-timing-function: ease-out;
    transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
  }
  100% {
    opacity: 0.3;
    transform: translateY(100%) rotateX(-90deg);
  }
}
@keyframes rotateCubeBottomIn {
  0% {
    opacity: 0.3;
    transform: translateY(-100%) rotateX(90deg);
  }
  50% {
    animation-timing-function: ease-out;
    transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
  }
}
/* carousel */
@keyframes rotateCarouselLeftOut {
  to {
    opacity: 0.3;
    transform: translateX(-150%) scale(0.4) rotateY(-65deg);
  }
}
@keyframes rotateCarouselLeftIn {
  from {
    opacity: 0.3;
    transform: translateX(200%) scale(0.4) rotateY(65deg);
  }
}
@keyframes rotateCarouselRightOut {
  to {
    opacity: 0.3;
    transform: translateX(200%) scale(0.4) rotateY(65deg);
  }
}
@keyframes rotateCarouselRightIn {
  from {
    opacity: 0.3;
    transform: translateX(-200%) scale(0.4) rotateY(-65deg);
  }
}
@keyframes rotateCarouselTopOut {
  to {
    opacity: 0.3;
    transform: translateY(-200%) scale(0.4) rotateX(65deg);
  }
}
@keyframes rotateCarouselTopIn {
  from {
    opacity: 0.3;
    transform: translateY(200%) scale(0.4) rotateX(-65deg);
  }
}
@keyframes rotateCarouselBottomOut {
  to {
    opacity: 0.3;
    transform: translateY(200%) scale(0.4) rotateX(-65deg);
  }
}
@keyframes rotateCarouselBottomIn {
  from {
    opacity: 0.3;
    transform: translateY(-200%) scale(0.4) rotateX(65deg);
  }
}
/* sides */
@keyframes rotateSidesOut {
  to {
    opacity: 0;
    transform: translateZ(-500px) rotateY(90deg);
  }
}
@keyframes rotateSidesIn {
  from {
    opacity: 0;
    transform: translateZ(-500px) rotateY(-90deg);
  }
}
/* slide */
@keyframes rotateSlideOut {
  25% {
    opacity: 0.5;
    transform: translateZ(-500px);
  }
  75% {
    opacity: 0.5;
    transform: translateZ(-500px) translateX(-200%);
  }
  100% {
    opacity: 0.5;
    transform: translateZ(-500px) translateX(-200%);
  }
}
@keyframes rotateSlideIn {
  0%, 25% {
    opacity: 0.5;
    transform: translateZ(-500px) translateX(200%);
  }
  75% {
    opacity: 0.5;
    transform: translateZ(-500px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) translateX(0);
  }
}
/* animation delay classes */
.pt-page-delay100 {
  animation-delay: 0.1s;
}

.pt-page-delay180 {
  animation-delay: 0.18s;
}

.pt-page-delay200 {
  animation-delay: 0.2s;
}

.pt-page-delay300 {
  animation-delay: 0.3s;
}

.pt-page-delay400 {
  animation-delay: 0.4s;
}

.pt-page-delay500 {
  animation-delay: 0.5s;
}

.pt-page-delay700 {
  animation-delay: 0.7s;
}

.pt-page-delay1000 {
  animation-delay: 1s;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

body.login .dark-theme .btn {
  color: #eef;
}
body.login .auth-form {
  background: #fff;
  box-shadow: 5px 5px 2px 1px rgba(0, 75, 255, 0.3);
}
@media (min-width: 576px) {
  body.login .auth-form-dark {
    width: 75%;
  }
}
@media (max-width: 576px) {
  body.login .content-wrapper {
    padding: 0;
  }
}
body.login #app {
  height: 100%;
  left: 0;
  width: 100%;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-animation-name: background;
  -webkit-animation-duration: 5s;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-name: background;
  animation-duration: 5s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  background: #1C2841;
  background: linear-gradient(to bottom, #1C2841 0%, #0D1932 100%);
  background: -ms-linear-gradient(top, #1C2841 0%, #0D1932 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1C2841", endColorstr="#0D1932", GradientType=0);
  border: 1px solid #000A23;
  box-shadow: inset 0 1px 0 #2B3750;
  -webkit-box-shadow: inset 0 1px 0 #2B3750;
  -moz-box-shadow: inset 0 1px 0 #2B3750;
}

body.dashboard .content-wrapper {
  max-width: 2000px;
  padding: 0;
}
body.dashboard ul#servers {
  padding: 0;
}
body.dashboard ul#servers li.item {
  display: inline-block;
  margin: 10px;
}
body.dashboard #app {
  min-height: 1000px;
  background: #f7f7f7;
}
@media (max-width: 576px) {
  body.dashboard ul#servers li.item {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}
body.dashboard div.features {
  width: 1200px;
  height: 906.7px;
  flex-grow: 0;
  padding: 100px 0 0px;
  display: flex;
  margin: 0 auto;
  justify-content: center;
}
body.dashboard .bg1 {
  width: 66.7px;
  height: 66.7px;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='67' height='67' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100Z' fill='%23FFBC99'/%3E%3Cpath d='M68.25 36.6667H38C37.2707 36.6667 36.5712 36.3857 36.0555 35.8856C35.5397 35.3855 35.25 34.7072 35.25 34C35.25 33.2928 35.5397 32.6145 36.0555 32.1144C36.5712 31.6143 37.2707 31.3333 38 31.3333H68.25C68.9793 31.3333 69.6788 31.6143 70.1945 32.1144C70.7103 32.6145 71 33.2928 71 34C71 34.7072 70.7103 35.3855 70.1945 35.8856C69.6788 36.3857 68.9793 36.6667 68.25 36.6667Z' fill='%23333333'/%3E%3Cpath d='M68.25 47.3333H38C37.2707 47.3333 36.5712 47.0524 36.0555 46.5523C35.5397 46.0522 35.25 45.3739 35.25 44.6667C35.25 43.9594 35.5397 43.2811 36.0555 42.781C36.5712 42.281 37.2707 42 38 42H68.25C68.9793 42 69.6788 42.281 70.1945 42.781C70.7103 43.2811 71 43.9594 71 44.6667C71 45.3739 70.7103 46.0522 70.1945 46.5523C69.6788 47.0524 68.9793 47.3333 68.25 47.3333Z' fill='%23333333'/%3E%3Cpath d='M51.75 58H38C37.2707 58 36.5712 57.7191 36.0555 57.219C35.5397 56.7189 35.25 56.0406 35.25 55.3333C35.25 54.6261 35.5397 53.9478 36.0555 53.4477C36.5712 52.9476 37.2707 52.6667 38 52.6667H51.75C52.4793 52.6667 53.1788 52.9476 53.6945 53.4477C54.2103 53.9478 54.5 54.6261 54.5 55.3333C54.5 56.0406 54.2103 56.7189 53.6945 57.219C53.1788 57.7191 52.4793 58 51.75 58Z' fill='%23333333'/%3E%3Cpath d='M27 36.6667C28.5188 36.6667 29.75 35.4728 29.75 34C29.75 32.5272 28.5188 31.3333 27 31.3333C25.4812 31.3333 24.25 32.5272 24.25 34C24.25 35.4728 25.4812 36.6667 27 36.6667Z' fill='%23333333'/%3E%3Cpath d='M27 47.3333C28.5188 47.3333 29.75 46.1394 29.75 44.6667C29.75 43.1939 28.5188 42 27 42C25.4812 42 24.25 43.1939 24.25 44.6667C24.25 46.1394 25.4812 47.3333 27 47.3333Z' fill='%23333333'/%3E%3Cpath d='M27 58C28.5188 58 29.75 56.8061 29.75 55.3333C29.75 53.8606 28.5188 52.6667 27 52.6667C25.4812 52.6667 24.25 53.8606 24.25 55.3333C24.25 56.8061 25.4812 58 27 58Z' fill='%23333333'/%3E%3Cpath d='M51.75 68.6667H38C37.2707 68.6667 36.5712 68.3857 36.0555 67.8856C35.5397 67.3855 35.25 66.7072 35.25 66C35.25 65.2928 35.5397 64.6145 36.0555 64.1144C36.5712 63.6143 37.2707 63.3333 38 63.3333H51.75C52.4793 63.3333 53.1788 63.6143 53.6945 64.1144C54.2103 64.6145 54.5 65.2928 54.5 66C54.5 66.7072 54.2103 67.3855 53.6945 67.8856C53.1788 68.3857 52.4793 68.6667 51.75 68.6667Z' fill='%23333333'/%3E%3Cpath d='M27 68.6667C28.5188 68.6667 29.75 67.4728 29.75 66C29.75 64.5272 28.5188 63.3333 27 63.3333C25.4812 63.3333 24.25 64.5272 24.25 66C24.25 67.4728 25.4812 68.6667 27 68.6667Z' fill='%23333333'/%3E%3Cpath d='M73.75 58H71V55.3333C71 54.6261 70.7103 53.9478 70.1945 53.4477C69.6788 52.9476 68.9793 52.6667 68.25 52.6667C67.5207 52.6667 66.8212 52.9476 66.3055 53.4477C65.7897 53.9478 65.5 54.6261 65.5 55.3333V58H62.75C62.0207 58 61.3212 58.281 60.8055 58.7811C60.2897 59.2811 60 59.9594 60 60.6667C60 61.3739 60.2897 62.0522 60.8055 62.5523C61.3212 63.0524 62.0207 63.3333 62.75 63.3333H65.5V66C65.5 66.7072 65.7897 67.3855 66.3055 67.8856C66.8212 68.3857 67.5207 68.6667 68.25 68.6667C68.9793 68.6667 69.6788 68.3857 70.1945 67.8856C70.7103 67.3855 71 66.7072 71 66V63.3333H73.75C74.4793 63.3333 75.1788 63.0524 75.6945 62.5523C76.2103 62.0522 76.5 61.3739 76.5 60.6667C76.5 59.9594 76.2103 59.2811 75.6945 58.7811C75.1788 58.281 74.4793 58 73.75 58Z' fill='%23333333'/%3E%3C/svg%3E%0A");
}
body.dashboard .bg2 {
  /*        cadbff*/
  width: 66.7px;
  height: 66.7px;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='67' height='67' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100Z' fill='%23CABDFF'/%3E%3Cpath d='M43.1411 30.1774H26.3569C24.5022 30.1774 23 31.3548 23 32.8085V45.9637C23 47.416 24.5022 48.5948 26.3569 48.5948H43.1411C44.9958 48.5948 46.498 47.416 46.498 45.9637V32.8085C46.498 31.3548 44.9958 30.1774 43.1411 30.1774ZM43.1411 45.9637H26.3569V32.8085H43.1411V45.9637Z' fill='%23121313'/%3E%3Cpath d='M73.3528 30.1774H56.5686C54.7139 30.1774 53.2117 31.3548 53.2117 32.8085V45.9637C53.2117 47.416 54.7139 48.5947 56.5686 48.5947H73.3528C75.2058 48.5947 76.7097 47.416 76.7097 45.9637V32.8085C76.7097 31.3548 75.2058 30.1774 73.3528 30.1774ZM73.3528 45.9637H56.5686V32.8085H73.3528V45.9637Z' fill='%23121313'/%3E%3Cpath d='M73.3528 53.8568H56.5686C54.7139 53.8568 53.2117 55.0356 53.2117 56.4879V69.6431C53.2117 71.0968 54.7139 72.2742 56.5686 72.2742H73.3528C75.2058 72.2742 76.7097 71.0968 76.7097 69.6431V56.4879C76.7097 55.0342 75.2058 53.8568 73.3528 53.8568ZM73.3528 69.6431H56.5686V56.4879H73.3528V69.6431Z' fill='%23121313'/%3E%3Cpath d='M43.1411 53.8568H26.3569C24.5022 53.8568 23 55.0356 23 56.4879V69.6431C23 71.0968 24.5022 72.2742 26.3569 72.2742H43.1411C44.9958 72.2742 46.498 71.0968 46.498 69.6431V56.4879C46.498 55.0342 44.9958 53.8568 43.1411 53.8568ZM43.1411 69.6431H26.3569V56.4879H43.1411V69.6431Z' fill='%23121313'/%3E%3C/svg%3E%0A");
}
body.dashboard .bg3 {
  width: 66.7px;
  height: 66.7px;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='67' height='67' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100Z' fill='%23F8B0ED'/%3E%3Cpath d='M67.88 51.2H31.88C31.16 51.2 30.68 50.72 30.68 50C30.68 49.28 31.16 48.8 31.88 48.8H67.88C68.6 48.8 69.08 49.28 69.08 50C69.08 50.72 68.48 51.2 67.88 51.2Z' fill='%23123123'/%3E%3Cpath d='M67.52 26H32.24C28.76 26 25.88 28.88 25.88 32.36V67.52C25.88 71 28.76 73.88 32.24 73.88H67.4C70.88 73.88 73.76 71 73.76 67.52V32.36C73.88 28.88 71 26 67.52 26ZM71.48 67.64C71.48 69.8 69.68 71.6 67.52 71.6H51.08V63.2H67.88C68.48 63.2 69.08 62.72 69.08 62C69.08 61.28 68.48 60.8 67.88 60.8H51.08V55.64C51.08 54.92 50.48 54.44 49.88 54.44C49.28 54.44 48.68 54.92 48.68 55.64V60.8H31.88C31.28 60.8 30.68 61.28 30.68 62C30.68 62.72 31.28 63.2 31.88 63.2H48.68V71.6H32.24C30.08 71.6 28.28 69.8 28.28 67.64V32.36C28.28 30.2 30.08 28.4 32.24 28.4H48.68V36.8H31.88C31.28 36.8 30.68 37.28 30.68 38C30.68 38.72 31.28 39.2 31.88 39.2H48.68V44.36C48.68 45.08 49.28 45.56 49.88 45.56C50.48 45.56 51.08 45.08 51.08 44.36V39.2H67.88C68.48 39.2 69.08 38.72 69.08 38C69.08 37.28 68.48 36.8 67.88 36.8H51.08V28.4H67.52C69.68 28.4 71.48 30.2 71.48 32.36V67.64Z' fill='%23123123'/%3E%3C/svg%3E%0A");
}
body.dashboard .bg4 {
  width: 66.7px;
  height: 66.7px;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='67' height='67' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100Z' fill='%23B5EBCD'/%3E%3Cpath d='M58.6667 59.5833V57.6667H52.1667V51.9167H58.6667V55.75H63V59.5833H60.8333V63.4167H56.5V67.25H52.1667V61.5H56.5V59.5833H58.6667ZM69.5 67.25H60.8333V63.4167H65.1667V59.5833H69.5V67.25ZM30.5 32.75H47.8333V48.0833H30.5V32.75ZM52.1667 32.75H69.5V48.0833H52.1667V32.75ZM30.5 51.9167H47.8333V67.25H30.5V51.9167ZM63 51.9167H69.5V55.75H63V51.9167ZM37 38.5V42.3333H41.3333V38.5H37ZM37 57.6667V61.5H41.3333V57.6667H37ZM58.6667 38.5V42.3333H63V38.5H58.6667Z' fill='black'/%3E%3C/svg%3E%0A");
}
body.dashboard .bg5 {
  width: 66.7px;
  height: 66.7px;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='67' height='67' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100Z' fill='%23B1E5FC'/%3E%3Cpath d='M69.1644 38.9969C68.7045 37.0299 67.3491 35.4811 65.628 34.9554C62.5083 34 50 34 50 34C50 34 37.4917 34 34.372 34.9554C32.6512 35.4811 31.2956 37.0299 30.8357 38.9969C30 42.5619 30 50.0003 30 50.0003C30 50.0003 30 57.4385 30.8357 61.0031C31.2956 62.9701 32.6512 64.5194 34.372 65.045C37.4917 66 50 66 50 66C50 66 62.5083 66 65.628 65.045C67.3491 64.5194 68.7045 62.9701 69.1644 61.0031C70 57.4385 70 50.0003 70 50.0003C70 50.0003 70 42.5619 69.1644 38.9969ZM45.9998 56.8575V43.1429L56.3919 50.0003L45.9998 56.8575Z' fill='%23222222'/%3E%3C/svg%3E%0A");
}
body.dashboard .bg6 {
  width: 66.7px;
  height: 66.7px;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='67' height='67' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100Z' fill='%23CABDFF'/%3E%3Cpath d='M70 20H30C24.4772 20 20 24.4772 20 30V70C20 75.5228 24.4772 80 30 80H70C75.5228 80 80 75.5228 80 70V30C80 24.4772 75.5228 20 70 20Z' fill='%23FFEEFF'/%3E%3Cpath d='M68 30H32C29.7909 30 28 31.7909 28 34C28 36.2091 29.7909 38 32 38H68C70.2091 38 72 36.2091 72 34C72 31.7909 70.2091 30 68 30Z' fill='%23C1F7FD'/%3E%3Cpath d='M68 39.5H32C30.5413 39.5 29.1424 38.9205 28.1109 37.8891C27.0795 36.8576 26.5 35.4587 26.5 34C26.5 32.5413 27.0795 31.1424 28.1109 30.1109C29.1424 29.0795 30.5413 28.5 32 28.5H68C69.4587 28.5 70.8576 29.0795 71.8891 30.1109C72.9205 31.1424 73.5 32.5413 73.5 34C73.5 35.4587 72.9205 36.8576 71.8891 37.8891C70.8576 38.9205 69.4587 39.5 68 39.5ZM32 31.5C31.337 31.5 30.7011 31.7634 30.2322 32.2322C29.7634 32.7011 29.5 33.337 29.5 34C29.5 34.663 29.7634 35.2989 30.2322 35.7678C30.7011 36.2366 31.337 36.5 32 36.5H68C68.663 36.5 69.2989 36.2366 69.7678 35.7678C70.2366 35.2989 70.5 34.663 70.5 34C70.5 33.337 70.2366 32.7011 69.7678 32.2322C69.2989 31.7634 68.663 31.5 68 31.5H32Z' fill='%23828282'/%3E%3Cpath d='M68 46H32C29.7909 46 28 47.7909 28 50C28 52.2091 29.7909 54 32 54H68C70.2091 54 72 52.2091 72 50C72 47.7909 70.2091 46 68 46Z' fill='%23C1F7FD'/%3E%3Cpath d='M68 55.5H32C30.5413 55.5 29.1424 54.9205 28.1109 53.8891C27.0795 52.8576 26.5 51.4587 26.5 50C26.5 48.5413 27.0795 47.1424 28.1109 46.1109C29.1424 45.0795 30.5413 44.5 32 44.5H68C69.4587 44.5 70.8576 45.0795 71.8891 46.1109C72.9205 47.1424 73.5 48.5413 73.5 50C73.5 51.4587 72.9205 52.8576 71.8891 53.8891C70.8576 54.9205 69.4587 55.5 68 55.5ZM32 47.5C31.337 47.5 30.7011 47.7634 30.2322 48.2322C29.7634 48.7011 29.5 49.337 29.5 50C29.5 50.663 29.7634 51.2989 30.2322 51.7678C30.7011 52.2366 31.337 52.5 32 52.5H68C68.663 52.5 69.2989 52.2366 69.7678 51.7678C70.2366 51.2989 70.5 50.663 70.5 50C70.5 49.337 70.2366 48.7011 69.7678 48.2322C69.2989 47.7634 68.663 47.5 68 47.5H32Z' fill='%23828282'/%3E%3Cpath d='M68 62H32C29.7909 62 28 63.7909 28 66C28 68.2091 29.7909 70 32 70H68C70.2091 70 72 68.2091 72 66C72 63.7909 70.2091 62 68 62Z' fill='%23C1F7FD'/%3E%3Cpath d='M68 71.5H32C30.5413 71.5 29.1424 70.9205 28.1109 69.8891C27.0795 68.8576 26.5 67.4587 26.5 66C26.5 64.5413 27.0795 63.1424 28.1109 62.1109C29.1424 61.0795 30.5413 60.5 32 60.5H68C69.4587 60.5 70.8576 61.0795 71.8891 62.1109C72.9205 63.1424 73.5 64.5413 73.5 66C73.5 67.4587 72.9205 68.8576 71.8891 69.8891C70.8576 70.9205 69.4587 71.5 68 71.5ZM32 63.5C31.337 63.5 30.7011 63.7634 30.2322 64.2322C29.7634 64.7011 29.5 65.337 29.5 66C29.5 66.663 29.7634 67.2989 30.2322 67.7678C30.7011 68.2366 31.337 68.5 32 68.5H68C68.663 68.5 69.2989 68.2366 69.7678 67.7678C70.2366 67.2989 70.5 66.663 70.5 66C70.5 65.337 70.2366 64.7011 69.7678 64.2322C69.2989 63.7634 68.663 63.5 68 63.5H32Z' fill='%23828282'/%3E%3Cpath d='M60 40C63.3137 40 66 37.3137 66 34C66 30.6863 63.3137 28 60 28C56.6863 28 54 30.6863 54 34C54 37.3137 56.6863 40 60 40Z' fill='%23FFE1A0'/%3E%3Cpath d='M60 41.5C58.5166 41.5 57.0666 41.0601 55.8332 40.236C54.5999 39.4119 53.6386 38.2406 53.0709 36.8701C52.5032 35.4997 52.3547 33.9917 52.6441 32.5368C52.9335 31.082 53.6478 29.7456 54.6967 28.6967C55.7456 27.6478 57.082 26.9335 58.5368 26.6441C59.9917 26.3547 61.4997 26.5032 62.8701 27.0709C64.2406 27.6386 65.4119 28.5999 66.236 29.8332C67.0601 31.0666 67.5 32.5166 67.5 34C67.4979 35.9885 66.707 37.8949 65.301 39.301C63.8949 40.707 61.9885 41.4979 60 41.5ZM60 29.5C59.11 29.5 58.24 29.7639 57.4999 30.2584C56.7599 30.7529 56.1831 31.4557 55.8425 32.2779C55.5019 33.1002 55.4128 34.005 55.5865 34.8779C55.7601 35.7508 56.1887 36.5526 56.818 37.182C57.4474 37.8113 58.2492 38.2399 59.1221 38.4135C59.995 38.5872 60.8998 38.4981 61.7221 38.1575C62.5443 37.8169 63.2471 37.2401 63.7416 36.5001C64.2361 35.76 64.5 34.89 64.5 34C64.4987 32.8069 64.0241 31.6631 63.1805 30.8195C62.3369 29.9759 61.1931 29.5013 60 29.5Z' fill='%23F29580'/%3E%3Cpath d='M40 56C43.3137 56 46 53.3137 46 50C46 46.6863 43.3137 44 40 44C36.6863 44 34 46.6863 34 50C34 53.3137 36.6863 56 40 56Z' fill='%23FFE1A0'/%3E%3Cpath d='M40 57.5C38.5166 57.5 37.0666 57.0601 35.8332 56.236C34.5999 55.4119 33.6386 54.2406 33.0709 52.8701C32.5032 51.4997 32.3547 49.9917 32.6441 48.5368C32.9335 47.082 33.6478 45.7456 34.6967 44.6967C35.7456 43.6478 37.082 42.9335 38.5368 42.6441C39.9917 42.3547 41.4997 42.5032 42.8701 43.0709C44.2406 43.6386 45.4119 44.5999 46.236 45.8332C47.0601 47.0666 47.5 48.5166 47.5 50C47.4979 51.9885 46.707 53.8949 45.301 55.301C43.8949 56.707 41.9885 57.4979 40 57.5ZM40 45.5C39.11 45.5 38.24 45.7639 37.4999 46.2584C36.7599 46.7529 36.1831 47.4557 35.8425 48.2779C35.5019 49.1002 35.4128 50.005 35.5865 50.8779C35.7601 51.7508 36.1887 52.5526 36.818 53.182C37.4474 53.8113 38.2492 54.2399 39.1221 54.4135C39.995 54.5872 40.8998 54.4981 41.7221 54.1575C42.5443 53.8169 43.2471 53.2401 43.7416 52.5001C44.2361 51.76 44.5 50.89 44.5 50C44.4987 48.8069 44.0241 47.6631 43.1805 46.8195C42.3369 45.9759 41.1931 45.5013 40 45.5Z' fill='%23F29580'/%3E%3Cpath d='M60 72C63.3137 72 66 69.3137 66 66C66 62.6863 63.3137 60 60 60C56.6863 60 54 62.6863 54 66C54 69.3137 56.6863 72 60 72Z' fill='%23FFE1A0'/%3E%3Cpath d='M60 73.5C58.5166 73.5 57.0666 73.0601 55.8332 72.236C54.5999 71.4119 53.6386 70.2406 53.0709 68.8701C52.5032 67.4997 52.3547 65.9917 52.6441 64.5368C52.9335 63.082 53.6478 61.7456 54.6967 60.6967C55.7456 59.6478 57.082 58.9335 58.5368 58.6441C59.9917 58.3547 61.4997 58.5032 62.8701 59.0709C64.2406 59.6386 65.4119 60.5998 66.236 61.8332C67.0601 63.0666 67.5 64.5166 67.5 66C67.4979 67.9885 66.707 69.8949 65.301 71.301C63.8949 72.707 61.9885 73.4979 60 73.5ZM60 61.5C59.11 61.5 58.24 61.7639 57.4999 62.2584C56.7599 62.7529 56.1831 63.4557 55.8425 64.2779C55.5019 65.1002 55.4128 66.005 55.5865 66.8779C55.7601 67.7508 56.1887 68.5526 56.818 69.182C57.4474 69.8113 58.2492 70.2399 59.1221 70.4135C59.995 70.5872 60.8998 70.4981 61.7221 70.1575C62.5443 69.8169 63.2471 69.2401 63.7416 68.5001C64.2361 67.76 64.5 66.89 64.5 66C64.4987 64.8069 64.0241 63.6631 63.1805 62.8195C62.3369 61.9759 61.1931 61.5013 60 61.5Z' fill='%23F29580'/%3E%3Cpath d='M54 35.5C53.6022 35.5 53.2206 35.342 52.9393 35.0607C52.658 34.7794 52.5 34.3978 52.5 34C52.5021 32.0115 53.293 30.1051 54.699 28.699C56.1051 27.293 58.0115 26.5021 60 26.5C60.3978 26.5 60.7794 26.658 61.0607 26.9393C61.342 27.2206 61.5 27.6022 61.5 28C61.5 28.3978 61.342 28.7794 61.0607 29.0607C60.7794 29.342 60.3978 29.5 60 29.5C58.8069 29.5013 57.6631 29.9759 56.8195 30.8195C55.9759 31.6631 55.5013 32.8069 55.5 34C55.5 34.3978 55.342 34.7794 55.0607 35.0607C54.7794 35.342 54.3978 35.5 54 35.5Z' fill='%23F2BF80'/%3E%3Cpath d='M54 67.5C53.6022 67.5 53.2206 67.342 52.9393 67.0607C52.658 66.7794 52.5 66.3978 52.5 66C52.5021 64.0115 53.293 62.1051 54.699 60.699C56.1051 59.293 58.0115 58.5021 60 58.5C60.3978 58.5 60.7794 58.658 61.0607 58.9393C61.342 59.2206 61.5 59.6022 61.5 60C61.5 60.3978 61.342 60.7794 61.0607 61.0607C60.7794 61.342 60.3978 61.5 60 61.5C58.8069 61.5013 57.6631 61.9759 56.8195 62.8195C55.9759 63.6631 55.5013 64.8069 55.5 66C55.5 66.3978 55.342 66.7794 55.0607 67.0607C54.7794 67.342 54.3978 67.5 54 67.5Z' fill='%23F2BF80'/%3E%3Cpath d='M34 51.5C33.6022 51.5 33.2206 51.342 32.9393 51.0607C32.658 50.7794 32.5 50.3978 32.5 50C32.5021 48.0115 33.293 46.1051 34.699 44.699C36.1051 43.293 38.0115 42.5021 40 42.5C40.3978 42.5 40.7794 42.658 41.0607 42.9393C41.342 43.2206 41.5 43.6022 41.5 44C41.5 44.3978 41.342 44.7794 41.0607 45.0607C40.7794 45.342 40.3978 45.5 40 45.5C38.8069 45.5013 37.6631 45.9759 36.8195 46.8195C35.9759 47.6631 35.5013 48.8069 35.5 50C35.5 50.3978 35.342 50.7794 35.0607 51.0607C34.7794 51.342 34.3978 51.5 34 51.5Z' fill='%23F2BF80'/%3E%3C/svg%3E%0A");
}
body.dashboard .title {
  height: 36px;
  margin: 19px 0 0;
  color: #333;
  text-align: center;
  font-weight: 600;
}
body.dashboard .desc {
  height: 51px;
  font-size: 0.8rem;
  color: #666;
  text-align: center;
}
body.dashboard .part1 {
  width: 253px;
  height: 735px;
  margin: 0 59px 0 0;
  padding: 156px 0 148px;
}
body.dashboard .part2 {
  width: 233px;
  height: 735px;
  margin: 0 66px 0 59;
}
body.dashboard .part3 {
  width: 253px;
  height: 735px;
  margin: 0 0 0 66px;
  padding: 156px 0 148px;
}
body.dashboard .feature1 {
  width: 253px;
  height: 177px;
  margin: 0 0 76px;
  padding: 0;
}
body.dashboard .feature2 {
  width: 253px;
  height: 177px;
  margin: 0;
  padding: 0;
}
body.dashboard .feature3 {
  width: 233px;
  height: 177px;
  margin: 0 0 71px;
  padding: 0;
}
body.dashboard img.feature-main {
  width: 233px;
  height: 233px;
  margin: 0;
  -o-object-fit: contain;
     object-fit: contain;
}
body.dashboard .feature4 {
  width: 233px;
  height: 177px;
  margin: 82px 0 0 0;
  padding: 0;
}
body.dashboard .feature5 {
  width: 253px;
  height: 177px;
  margin: 0 0 76px;
  padding: 0;
}
body.dashboard .feature6 {
  width: 253px;
  height: 177px;
  margin: 0;
  padding: 0;
}
body.dashboard .feature {
  cursor: pointer;
}
body.dashboard .feature:hover, body.dashboard .feature:active {
  transform: scale(1.125);
}
body.dashboard .helper {
  position: absolute;
  margin-left: 40px;
  display: flex;
}
body.dashboard .helper .smile {
  background-image: url("data:image/svg+xml,%3Csvg width='34' height='44' viewBox='0 0 34 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.6 21.39C30.25 22.3 29.28 23.19 29.86 24.64C30.38 25.94 31.47 25.98 31.85 27.41C31.99 27.94 32.03 28.64 31.85 29.1C30.9 31.54 21.78 32.32 20.24 29.06C18.94 26.31 23.09 20.85 26.87 20.57C27.19 20.54 28.91 20.42 29.6 21.39Z' fill='black'/%3E%3Cpath d='M12.88 21.39C13.53 22.3 12.56 23.19 13.14 24.64C13.66 25.94 14.75 25.98 15.13 27.41C15.27 27.94 15.31 28.64 15.13 29.1C14.18 31.54 5.06 32.32 3.52 29.06C2.22 26.31 6.37 20.85 10.15 20.57C10.47 20.54 12.19 20.42 12.88 21.39Z' fill='black'/%3E%3Cpath d='M28.73 22.22H5.35C4.06 22.22 3.01 21.17 3.01 19.88V19.33C3.01 18.04 4.06 16.99 5.35 16.99H28.73C30.02 16.99 31.07 18.04 31.07 19.33V19.88C31.07 21.17 30.02 22.22 28.73 22.22Z' fill='%23FFE6D3'/%3E%3Cpath d='M20.12 29.68H14.18V35.07H20.12V29.68Z' fill='%23F9AE7B'/%3E%3Cpath d='M17.71 25.12C17.61 25.09 17.51 25.06 17.41 25.04C16.76 25.02 16.11 25.04 15.46 25.09C15.03 25.17 14.6 25.26 14.18 25.35V31.93C15.06 32.19 15.78 32.29 16.18 32.34C16.56 32.39 16.99 32.42 17.48 32.4C17.9 32.39 18.29 32.35 18.62 32.29C18.92 32.25 19.47 32.16 20.15 31.95C20.15 31.91 20.15 31.87 20.15 31.83V25.5C19.31 25.47 18.48 25.35 17.71 25.12Z' fill='%23D5855B'/%3E%3Cpath d='M18.58 30.84C18.24 30.89 17.84 30.94 17.41 30.95C16.91 30.96 16.47 30.93 16.08 30.89C15.04 30.78 11.86 30.3 9.36 27.72C8.88 27.23 7.62 25.9 6.95 23.74C6.67 22.83 6.51 21.86 6.51 20.85V13.38C6.51 8.02 10.86 3.67 16.22 3.67H17.84C23.2 3.67 27.55 8.02 27.55 13.38V20.85C27.53 21.65 27.34 24.94 24.71 27.72C22.33 30.22 19.44 30.72 18.58 30.84Z' fill='%23FFE6D3'/%3E%3Cpath d='M17.67 24.06C17.65 24.06 17.64 24.06 17.62 24.06C15.93 23.71 15.16 23.32 15.14 22.8C15.12 22.45 15.43 22.25 15.76 22.03C16.05 21.84 16.4 21.61 16.66 21.23C17.06 20.61 17.11 19.75 16.8 18.65C16.76 18.52 16.84 18.39 16.96 18.36C17.09 18.32 17.22 18.4 17.25 18.52C17.6 19.75 17.53 20.75 17.05 21.49C16.74 21.95 16.33 22.23 16.02 22.43C15.84 22.55 15.61 22.7 15.62 22.78C15.62 22.82 15.7 23.18 17.73 23.6C17.86 23.63 17.94 23.75 17.91 23.88C17.88 23.98 17.78 24.06 17.67 24.06Z' fill='%238A5D3B'/%3E%3Cpath d='M22.78 21.35C23.3765 21.35 23.86 20.5934 23.86 19.66C23.86 18.7266 23.3765 17.97 22.78 17.97C22.1835 17.97 21.7 18.7266 21.7 19.66C21.7 20.5934 22.1835 21.35 22.78 21.35Z' fill='%23321B0F'/%3E%3Cpath d='M11.91 21.35C12.5065 21.35 12.99 20.5934 12.99 19.66C12.99 18.7266 12.5065 17.97 11.91 17.97C11.3135 17.97 10.83 18.7266 10.83 19.66C10.83 20.5934 11.3135 21.35 11.91 21.35Z' fill='%23321B0F'/%3E%3Cpath d='M18.55 25.97C18.29 26 17.5 26.07 16.49 25.97C15.97 25.92 15.32 25.81 14.59 25.6C14.7 25.75 15.73 27.02 17.49 27C19.18 26.98 20.17 25.77 20.29 25.61C19.85 25.75 19.26 25.89 18.55 25.97Z' fill='white'/%3E%3Cpath d='M29.8 9.97C29.36 7.96 28.34 6.55 27.86 5.89C27.57 5.5 26.54 4.15 24.74 2.94C21.05 0.470003 17.07 0.600004 14.98 0.660004C13.64 0.700004 11.74 0.780003 9.52 1.7C9.22 1.82 7.81 2.42 6.21 3.65C5.28 4.36 4.13 5.24 3.29 6.57C1.8 8.92 1.97 11.52 2.15 12.78C2.17 13.49 2.37 14.94 3.33 16.35C4.81 18.53 7.11 19.56 8.45 18.65C9.23 18.12 9.52 17.06 9.34 15.84C9.77 15.92 10.22 15.96 10.69 15.96C13.69 15.96 16.13 14.17 16.13 11.96C16.13 11.94 16.13 11.93 16.13 11.91C16.48 12.17 16.89 12.36 17.33 12.46C17.33 12.46 17.68 12.54 18.05 12.54C18.84 12.54 20.02 11.86 21.05 10.63C21.14 10.61 21.29 10.59 21.46 10.57C22.06 10.52 22.52 10.64 24.04 11.05C24.27 11.11 24.45 11.16 24.58 11.2C24.66 12.32 25.03 15.26 27.14 17C27.64 17.42 27.9 17.48 28.11 17.45C29.45 17.33 30.54 13.33 29.8 9.97Z' fill='black'/%3E%3Cpath d='M20.87 16.16C21.22 16.44 21.85 16.23 23.21 16.45C24.49 16.66 25.2 17.05 25.39 16.92C25.57 16.8 25.09 16.38 25.02 16.32C24.44 15.83 23.59 15.62 22.83 15.45C21.95 15.25 21.45 15.14 21.08 15.29C20.68 15.47 20.56 15.92 20.87 16.16Z' fill='black'/%3E%3Cpath d='M23.61 19.11C23.34 19.11 23.13 19.04 23.05 19.01C22.93 18.96 22.87 18.82 22.92 18.7C22.97 18.58 23.11 18.52 23.23 18.57C23.32 18.61 23.66 18.72 24.02 18.55C24.37 18.39 24.51 18.08 24.55 17.99C24.6 17.87 24.73 17.81 24.85 17.85C24.97 17.9 25.03 18.03 24.99 18.15C24.92 18.32 24.72 18.75 24.22 18.97C24 19.08 23.79 19.11 23.61 19.11Z' fill='%233B2314'/%3E%3Cpath d='M10.95 19.21C10.77 19.21 10.56 19.18 10.35 19.08C9.85 18.85 9.64 18.43 9.58 18.26C9.53 18.14 9.6 18 9.72 17.96C9.84 17.91 9.98 17.97 10.02 18.1C10.05 18.19 10.2 18.5 10.55 18.66C10.91 18.82 11.25 18.71 11.34 18.68C11.46 18.63 11.6 18.69 11.65 18.81C11.7 18.93 11.64 19.07 11.52 19.12C11.42 19.14 11.22 19.21 10.95 19.21Z' fill='%233B2314'/%3E%3Cpath d='M28.5 35.98C26.26 35.02 22.55 33.75 17.8 33.58C13.11 33.41 9.36 34.37 7.06 35.16C6.32 35.38 4.85 35.94 3.48 37.3C2.96 37.82 1.92 38.99 1.35 40.81C1.1 41.62 0.959999 42.47 0.959999 43.36H33.01C33 42.53 32.84 39.47 30.5 37.3C29.83 36.67 29.12 36.25 28.5 35.98Z' fill='%23FFE6D3'/%3E%3Cpath d='M2.68 38.09C2.21 38.72 1.7 39.58 1.36 40.68C1.11 41.49 0.969999 42.34 0.969999 43.23H33.02C33.01 42.51 32.89 40.13 31.35 38.09H2.68Z' fill='black'/%3E%3Cpath d='M27.65 22.51C27.9648 22.51 28.22 22.2548 28.22 21.94C28.22 21.6252 27.9648 21.37 27.65 21.37C27.3352 21.37 27.08 21.6252 27.08 21.94C27.08 22.2548 27.3352 22.51 27.65 22.51Z' fill='%23FDED16'/%3E%3Cpath d='M6.41 22.57C6.74137 22.57 7.01 22.3014 7.01 21.97C7.01 21.6386 6.74137 21.37 6.41 21.37C6.07863 21.37 5.81 21.6386 5.81 21.97C5.81 22.3014 6.07863 22.57 6.41 22.57Z' fill='%23FDED16'/%3E%3C/svg%3E%0A");
  width: 34px;
  height: 44px;
  display: inline-block;
}
body.dashboard .helper span.label {
  display: flex;
  align-items: center;
  margin-left: 12px;
  font-weight: 600;
  font-size: 0.8rem;
  color: crimson;
}

body.app-add .form-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
body.app-add .form-wrapper .default-input {
  margin: 0;
}
body.app-add .form-wrapper > div:first-child .title-header {
  margin-top: 1rem;
}
body.app-add .form-wrapper > div:not(:first-child) .title-header {
  margin-top: 2rem;
}
body.app-add .form-wrapper > div:last-child {
  margin-bottom: 3rem;
}
body.app-add .form-wrapper > div .title-header {
  margin-bottom: 2rem;
  font-weight: 600;
  color: #333;
  width: 100%;
}
body.app-add .form-wrapper > div .title-header span {
  margin-left: 4rem;
}
body.app-add .form-wrapper .form-check {
  position: relative;
  display: block;
  padding-left: 0;
}
body.app-add .form-wrapper label.form-check-label {
  margin: 0 30px;
}
body.app-add .form-wrapper select.form-control {
  display: inline;
  color: #333;
}
body.app-add .form-wrapper select.form-control.http-method {
  width: 79px;
}
body.app-add .form-wrapper select.form-control.post_type {
  width: 120px;
}
body.app-add .form-wrapper select.form-control.encoding {
  width: 80px;
}
body.app-add .form-wrapper .form-group {
  margin-bottom: 0;
}
body.app-add .form-wrapper .form-group label {
  padding-top: calc(0.64rem + 1px);
  padding-bottom: calc(0.64rem + 1px);
  display: inline-flex;
  justify-content: flex-end;
  font-size: 13px;
}
body.app-add .form-wrapper .form-group .form-check .form-check-label input[type=checkbox] + .input-helper:before {
  margin-top: 12px;
}
body.app-add .form-wrapper .form-group .form-check .form-check-label input[type=checkbox] + .input-helper:after {
  margin-top: 12px;
}
body.app-add .form-wrapper .form-group .form-check {
  margin: 0;
}
body.app-add .form-wrapper .form-group.item-container {
  min-height: 250px;
}
body.app-add .form-wrapper .form-group ul.item-header, body.app-add .form-wrapper .form-group ul.item-list {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 0;
}
body.app-add .form-wrapper .form-group ul.item-header li.label, body.app-add .form-wrapper .form-group ul.item-header li.entity, body.app-add .form-wrapper .form-group ul.item-list li.label, body.app-add .form-wrapper .form-group ul.item-list li.entity {
  min-width: 40px;
}
body.app-add .form-wrapper .form-group ul.item-header li.label.w, body.app-add .form-wrapper .form-group ul.item-header li.entity.w, body.app-add .form-wrapper .form-group ul.item-list li.label.w, body.app-add .form-wrapper .form-group ul.item-list li.entity.w {
  width: 250px;
  text-align: center;
}
body.app-add .form-wrapper .form-group ul.item-header li.entity, body.app-add .form-wrapper .form-group ul.item-list li.entity {
  display: inline-flex;
  justify-content: center;
  height: 30px;
}
body.app-add .form-wrapper .form-group ul.item-header li.entity .btn-del i.mdi.mdi-close, body.app-add .form-wrapper .form-group ul.item-list li.entity .btn-del i.mdi.mdi-close {
  position: relative;
  top: -7px;
  right: 7px;
}
body.app-add .form-wrapper .form-group .button-wrapper {
  position: absolute;
  top: -40px;
}
body.app-add .form-wrapper .form-group .page-loop > * {
  min-width: 10%;
  margin-left: 1rem;
}
body.app-add .form-wrapper .form-group .page-loop > input {
  height: 35px;
  width: 20%;
}
body.app-add .form-wrapper .form-group input#param_selector {
  height: 35px;
}
body.app-add .form-wrapper .form-group .btn-page-loop {
  max-height: 32px;
}
body.app-add .form-wrapper .form-group.page-order .form-check-label {
  padding: 0 !important;
}
body.app-add .form-wrapper .form-group .extract-test, body.app-add .form-wrapper .form-group .loop-split-test {
  position: absolute;
  right: 16px;
  top: 4px;
}
body.app-add .form-wrapper .form-group .extract-test > button, body.app-add .form-wrapper .form-group .loop-split-test > button {
  padding: 1px 8px;
}
body.app-add .form-wrapper .form-group textarea#uri {
  width: calc(100% - 42px);
  margin-top: 4px;
}
body.app-add .form-wrapper .form-group input#spliter {
  width: calc(100% - 42px);
}
body.app-add .form-wrapper .save-btn {
  position: absolute;
  right: 23px;
  top: 32px;
}
body.app-add .form-wrapper .ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
body.app-add .form-wrapper .error-msg {
  font-size: 13px;
  position: relative;
  top: 10px;
  left: 10px;
  color: #000;
}
body.app-add .form-wrapper .not-draggable {
  cursor: no-drop;
}
body.app-add .form-wrapper select.form-control {
  color: unset !important;
}
body.app-add .form-wrapper .list-group-item {
  padding: 0;
  border: 0;
}
body.app-add .form-wrapper .tab-wrapper i:before {
  width: 20px;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}
body.app-add .form-wrapper .tab-wrapper {
  display: flex;
  position: relative;
  top: 5px;
}
body.app-add .form-wrapper .tab-wrapper i.active {
  opacity: 1;
}
body.app-add .form-wrapper .tab-wrapper i:not(.active) {
  opacity: 0.5;
  cursor: pointer;
}
body.app-add .form-wrapper .code-opt {
  position: absolute;
  top: 32px;
}
body.app-add .form-wrapper .code-opt i.mdi {
  cursor: pointer;
}

body.app-list .modal-container a.modal-close {
  position: absolute;
  right: 23px;
  top: 0;
  font-size: 1rem;
  color: #000;
}
body.app-list .modal-container a.modal-close.d {
  color: white !important;
  margin-top: -23px;
  margin-right: -10px;
}
body.app-list .modal-container label {
  font-size: 14px;
}
body.app-list .modal-container .result-wrap {
  margin-top: 2rem;
}
body.app-list .modal-container .btn-warning {
  background-color: #e63f5d;
}
body.app-list .modal-container .btn-warning:hover, body.app-list .modal-container .btn-warning:focus {
  background-color: #e01f42;
  border-color: #B24592;
}
body.app-list .modal-container .form-control {
  background-color: #fff;
  opacity: 0.7;
}
body.app-list .modal-container .form-controlfocus, body.app-list .modal-container .form-controlhover {
  background-color: #fff;
}
body.app-list .modal-container table.dataTable {
  width: 100% !important;
}
body.app-list .modal-container div.dataTables_length {
  display: inline-flex;
  justify-content: flex-end;
  width: 175px;
}
body.app-list .modal-container div.dataTables_filter {
  width: calc(100% - 200px);
  display: inline-flex;
  justify-content: flex-start;
}
body.app-list .modal-container div.dataTables_paginate {
  text-align: center;
  padding-bottom: 1rem;
}
body.app-list .modal-container .dataTables_wrapper .dataTable thead .sorting:before, body.app-list .modal-container .dataTables_wrapper .dataTable thead .sorting:after, body.app-list .modal-container .dataTables_wrapper .dataTable thead .sorting_asc:before, body.app-list .modal-container .dataTables_wrapper .dataTable thead .sorting_asc:after, body.app-list .modal-container .dataTables_wrapper .dataTable thead .sorting_desc:before, body.app-list .modal-container .dataTables_wrapper .dataTable thead .sorting_desc:after, body.app-list .modal-container .dataTables_wrapper .dataTable thead .sorting_asc_disabled:before, body.app-list .modal-container .dataTables_wrapper .dataTable thead .sorting_asc_disabled:after, body.app-list .modal-container .dataTables_wrapper .dataTable thead .sorting_desc_disabled:before, body.app-list .modal-container .dataTables_wrapper .dataTable thead .sorting_desc_disabled:after {
  font-size: 1rem;
  line-height: 0;
}
body.app-list .modal-container td.label.sorting:first-child:before, body.app-list .modal-container td.label.sorting:first-child:after, body.app-list .modal-container td.label.sorting:last-child:before, body.app-list .modal-container td.label.sorting:last-child:after {
  display: none;
}
body.app-list .modal-container td.label.sorting:before, body.app-list .modal-container td.label.sorting:after {
  top: 18px;
}
body.app-list .modal-container td.label.sorting:before {
  right: calc(50% - 46px);
}
body.app-list .modal-container td.label.sorting:after {
  right: calc(50% - 60px);
}
body.app-list .modal-container input.form-control::-moz-placeholder {
  color: #999;
}
body.app-list .modal-container input.form-control::placeholder {
  color: #999;
}
body.app-list .modal-container .page-param input.form-control::-moz-placeholder {
  font-size: 10.7px;
}
body.app-list .modal-container .page-param input.form-control::placeholder {
  font-size: 10.7px;
}
body.app-list .modal-container .dataTables_wrapper select {
  padding: 0.5rem;
}
body.app-list .modal-container .dataTables_wrapper {
  height: 620px;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.app-list .modal-container tr.item-header {
  height: 40px;
}
body.app-list .modal-container tr.item-header .show-btn {
  margin-left: 18px;
  cursor: pointer;
}
body.app-list .modal-container tr.item-header, body.app-list .modal-container tr.item-list {
  padding: 0 1px;
  margin-top: 1rem;
  margin-bottom: 0;
  width: 100%;
}
body.app-list .modal-container tr.item-header.lock td, body.app-list .modal-container tr.item-list.lock td {
  padding: 6.7px 1px;
}
body.app-list .modal-container tr.item-header.unlock td, body.app-list .modal-container tr.item-list.unlock td {
  padding: 0 1px;
}
body.app-list .modal-container tr.item-header td.label:first-child, body.app-list .modal-container tr.item-header td.label:last-child, body.app-list .modal-container tr.item-header td.entity:first-child, body.app-list .modal-container tr.item-header td.entity:last-child, body.app-list .modal-container tr.item-list td.label:first-child, body.app-list .modal-container tr.item-list td.label:last-child, body.app-list .modal-container tr.item-list td.entity:first-child, body.app-list .modal-container tr.item-list td.entity:last-child {
  width: 40px;
}
body.app-list .modal-container tr.item-header td.label:first-child, body.app-list .modal-container tr.item-header td.entity:first-child, body.app-list .modal-container tr.item-list td.label:first-child, body.app-list .modal-container tr.item-list td.entity:first-child {
  text-align: right;
}
body.app-list .modal-container tr.item-header td.label.w, body.app-list .modal-container tr.item-header td.entity.w, body.app-list .modal-container tr.item-list td.label.w, body.app-list .modal-container tr.item-list td.entity.w {
  text-align: center;
}
body.app-list .modal-container tr.item-header li.entity, body.app-list .modal-container tr.item-list li.entity {
  height: 30px;
}
body.app-list .modal-container tr.item-header li.entity .btn-del i.mdi.mdi-close, body.app-list .modal-container tr.item-list li.entity .btn-del i.mdi.mdi-close {
  position: relative;
  top: -7px;
  right: 7px;
}
body.app-list .modal-container tr.item-header {
  background: rgba(125, 255, 155, 0.1);
}
body.app-list .modal-container tr.item-list td.w {
  overflow: hidden;
}
body.app-list .modal-container tr.item-list.even {
  background: rgba(255, 255, 255, 0.1);
}
body.app-list .modal-container .button-group {
  position: absolute;
  right: 40px;
}
body.app-list .modal-container a.paginate_button {
  display: inline-flex;
  background: #04c9b7;
  width: 24px;
  height: 24px;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  margin-right: 0.65rem;
  font-size: 15px;
  cursor: pointer;
}
body.app-list .modal-container .lock-btn.lock i.mdi-lock-open {
  display: none;
}
body.app-list .modal-container .lock-btn.unlock i.mdi-lock {
  display: none;
}
body.app-list .modal-container textarea {
  overflow: hidden;
}
body.app-list .modal-container .preset-selector {
  position: absolute;
  top: 0.2rem;
  left: 1.2rem;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: calc(100% - 4rem);
}
body.app-list .modal-container .preset-selector ul {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.app-list .modal-container .preset-selector ul li {
  white-space: nowrap;
  padding: 0.5rem;
  font-size: smaller;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  flex-shrink: 0;
}
body.app-list .modal-container .preset-selector ul li:hover, body.app-list .modal-container .preset-selector ul li.active {
  background-color: #e6f7ff;
  border-color: #60b7cc;
  cursor: pointer;
}
body.app-list .modal-container .run .l {
  text-align: left;
}
body.app-list .modal-container .run .run-wrap {
  width: 660px;
  margin: 70px 100px 40px 60px;
  height: 552px;
  font-size: 14px;
}
body.app-list .modal-container .run .run-wrap span.plus-btn {
  position: absolute;
  right: -20px;
  top: 10px;
}
body.app-list .modal-container .run .run-wrap .cl {
  height: 360px;
  overflow-y: auto;
}
body.app-list .modal-container .run .run-wrap .cl .clc {
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  min-height: 80%;
  overflow: auto;
}
body.app-list .modal-container .run .run_history {
  position: absolute;
  top: -5px;
  cursor: pointer;
}
body.app-list .modal-container .run .run-wrap div.h {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}
body.app-list .modal-container .run .row.h select {
  position: relative;
  top: 1px;
  padding: 8px;
}
body.app-list .modal-container .run .col-9 div {
  padding: 0;
}
body.app-list .modal-container .run .col-9 div:first-child, body.app-list .modal-container .run .col-9 div:last-child {
  padding: 0;
}
body.app-list .modal-container .run .param-wrap {
  height: 100px;
  align-items: start !important;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.app-list .modal-container .run .btns > i {
  cursor: pointer;
  margin: 8.5px 0;
  position: relative;
  top: -5px;
}
body.app-list .modal-container .run .page-opt, body.app-list .modal-container .run .page-opt * {
  font-size: 12px !important;
  margin-top: 12px;
  display: block;
}
body.app-list .modal-container .run .rule-info {
  padding: 0;
}
body.app-list .modal-container .run .rule-info ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
}
body.app-list .modal-container .run .rule-info ul li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
body.app-list .modal-container .run .rule-info ul li.rule_name {
  width: 60%;
}
body.app-list .modal-container .run .rule-info ul li.http_method {
  width: 20%;
}
body.app-list .modal-container .run .rule-info ul li.av_param {
  justify-content: flex-end;
  width: 20%;
}
body.app-list .modal-container .run .rule-info ul li .btn-parsing-object {
  cursor: pointer;
}
body.app-list .modal-container .run textarea.form-control {
  min-height: 35px;
}
body.app-list .modal-container .run .page-param {
  min-width: 500px;
}
body.app-list .modal-container .run .save_type_label {
  position: relative;
  top: 5px;
  left: 20px;
  font-size: 12px;
  color: #999;
}
body.app-list .modal-container .run .paging-preview {
  position: absolute;
  left: calc(50% - 932px);
  top: 0px;
}
body.app-list .modal-container .run .paging-preview .paging-list {
  width: 540px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: paleturquoise;
  height: 760px;
}
body.app-list .modal-container .run .paging-preview .paging-list ul {
  list-style: none;
  padding-top: 10px;
}
body.app-list .modal-container .run .paging-preview .paging-list ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.app-list .modal-container .run .paging-preview .paging-list ul li span {
  margin-right: 0.5rem;
}
body.app-list .modal-container .run .paging-preview .paging-list ul li span.header {
  font-weight: 600;
}
body.app-list .modal-container .run .paging-preview .close-btn {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 4px;
}
body.app-list .modal-container .run .output-window {
  position: absolute;
  left: calc(50% + 410px);
  top: 0px;
}
body.app-list .modal-container .run .output-window .close-btn {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 4px;
}
body.app-list .modal-container .run .output-window .output {
  width: 540px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background: paleturquoise;
  height: 760px;
}
body.app-list .modal-container .run .output-window .output ul {
  list-style: none;
  padding-top: 10px;
}
body.app-list .modal-container .run .output-window .output ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.app-list .modal-container .run .output-window .log-window {
  height: 60%;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.app-list .modal-container .run .output-window .log-window li {
  display: flex;
}
body.app-list .modal-container .run .output-window .log-window li > span.time {
  width: 13%;
}
body.app-list .modal-container .run .output-window .log-window li > span.url {
  width: 77%;
}
body.app-list .modal-container .run .output-window .log-window li > span.cnt {
  width: 10%;
}
body.app-list .modal-container .run .output-window .result-window {
  height: 40%;
  font-size: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.app-list .modal-container .run .output-window .result-window textarea {
  height: calc(100% - 35px);
  overflow-y: scroll;
}
body.app-list .modal-container .run .output-window .result-window button.btn {
  border-radius: 0;
}
body.app-list .modal-container .run .output-window .result-window .v-output {
  width: 100%;
  height: calc(100% - 35px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
}
body.app-list .modal-container .run .output-window .result-button-wrapper {
  height: 35px;
}
body.app-list .modal-container .run .progress-bar {
  position: absolute;
  width: calc(100% - 60px);
  left: 30px;
  bottom: -42px;
}
body.app-list .modal-container .run .progress-bar .progress {
  border-radius: 0;
  justify-content: flex-end;
}
body.app-list .modal-container .run .progress-bar .progress span.progress-label {
  color: navy;
  font-weight: 600;
  font-size: 13px;
}
body.app-list .modal-container .history .run_play, body.app-list .modal-container .api .run_play {
  position: absolute;
  top: -5px;
  cursor: pointer;
}
body.app-list .modal-container .history .rule-info ul, body.app-list .modal-container .api .rule-info ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
  justify-content: flex-end;
}
body.app-list .modal-container .history .rule-info ul li, body.app-list .modal-container .api .rule-info ul li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
body.app-list .modal-container .history .rule-info ul li.rule_name, body.app-list .modal-container .api .rule-info ul li.rule_name {
  width: 60%;
}
body.app-list .modal-container .history .rule-info ul li.http_method, body.app-list .modal-container .api .rule-info ul li.http_method {
  width: 20%;
  justify-content: flex-end;
}
body.app-list .modal-container .history .history-wrap, body.app-list .modal-container .history .api-wrap, body.app-list .modal-container .api .history-wrap, body.app-list .modal-container .api .api-wrap {
  width: 700px;
  margin: 70px 60px 40px 60px;
  height: 432px;
  font-size: 14px;
}
body.app-list .modal-container .history .history-wrap span.plus-btn, body.app-list .modal-container .history .api-wrap span.plus-btn, body.app-list .modal-container .api .history-wrap span.plus-btn, body.app-list .modal-container .api .api-wrap span.plus-btn {
  position: absolute;
  right: -20px;
  top: 10px;
}
body.app-list .modal-container .history .history-wrap div.h, body.app-list .modal-container .history .api-wrap div.h, body.app-list .modal-container .api .history-wrap div.h, body.app-list .modal-container .api .api-wrap div.h {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}
body.app-list .modal-container .history .history-wrap > .row:nth-child(1), body.app-list .modal-container .history .api-wrap > .row:nth-child(1), body.app-list .modal-container .api .history-wrap > .row:nth-child(1), body.app-list .modal-container .api .api-wrap > .row:nth-child(1) {
  border-bottom: 1px solid #666;
  padding-bottom: 8px;
}
body.app-list .modal-container .history .history-results, body.app-list .modal-container .api .history-results {
  width: 100%;
}
body.app-list .modal-container .history .history-results .btn-replay, body.app-list .modal-container .api .history-results .btn-replay {
  position: absolute;
  left: 4px;
  padding: 1px 10px;
}
body.app-list .modal-container .history .history-results .row, body.app-list .modal-container .api .history-results .row {
  margin-bottom: 0.5rem;
}
body.app-list .modal-container .history .history-results .row div, body.app-list .modal-container .api .history-results .row div {
  display: inline-flex;
  align-items: center;
}
body.app-list .modal-container .history .history-results .row .col-3.r, body.app-list .modal-container .api .history-results .row .col-3.r {
  justify-content: flex-end;
  font-style: italic;
  font-size: 13px;
}
body.app-list .modal-container .history .history-results .run-info, body.app-list .modal-container .api .history-results .run-info {
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
}
body.app-list .modal-container .history .history-results .run-info .r_urls > span, body.app-list .modal-container .api .history-results .run-info .r_urls > span {
  width: 80px;
  cursor: pointer;
}
body.app-list .modal-container .history .history-results .run-info .uri, body.app-list .modal-container .api .history-results .run-info .uri {
  width: 60%;
}
body.app-list .modal-container .history .history-results .run-info .uri .uri textarea.form-control, body.app-list .modal-container .api .history-results .run-info .uri .uri textarea.form-control {
  width: 100%;
  min-width: 280px;
}
body.app-list .modal-container .history .history-results .run-info .run_data > span:nth-child(2), body.app-list .modal-container .api .history-results .run-info .run_data > span:nth-child(2) {
  width: 72px;
  margin-left: 10px;
}
body.app-list .modal-container .history .history-results .run-info .seq, body.app-list .modal-container .history .history-results .run-info .save_type, body.app-list .modal-container .api .history-results .run-info .seq, body.app-list .modal-container .api .history-results .run-info .save_type {
  width: 100px;
  cursor: pointer;
}
body.app-list .modal-container .history .history-results .run-info i.history-del, body.app-list .modal-container .api .history-results .run-info i.history-del {
  cursor: pointer;
  margin-left: 12px;
}
body.app-list .modal-container .history .paging-preview, body.app-list .modal-container .api .paging-preview {
  position: absolute;
  left: calc(50% - 932px);
  top: 0px;
}
body.app-list .modal-container .history .paging-preview .paging-list, body.app-list .modal-container .api .paging-preview .paging-list {
  width: 550px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: paleturquoise;
  height: 550px;
}
body.app-list .modal-container .history .paging-preview .paging-list ul, body.app-list .modal-container .api .paging-preview .paging-list ul {
  list-style: none;
  padding-top: 10px;
}
body.app-list .modal-container .history .paging-preview .paging-list ul li, body.app-list .modal-container .api .paging-preview .paging-list ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.app-list .modal-container .history .output-window, body.app-list .modal-container .api .output-window {
  position: absolute;
  left: calc(50% + 410px);
  top: 0px;
}
body.app-list .modal-container .history .output-window .output, body.app-list .modal-container .api .output-window .output {
  width: 540px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background: paleturquoise;
  height: 550px;
}
body.app-list .modal-container .history .output-window .output ul, body.app-list .modal-container .api .output-window .output ul {
  list-style: none;
  padding-top: 10px;
}
body.app-list .modal-container .history .output-window .output ul li, body.app-list .modal-container .api .output-window .output ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.app-list .modal-container .history .output-window .result-window, body.app-list .modal-container .api .output-window .result-window {
  height: 100%;
  font-size: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.app-list .modal-container .history .output-window .result-window textarea, body.app-list .modal-container .api .output-window .result-window textarea {
  height: calc(100% - 35px);
  overflow-y: scroll;
}
body.app-list .modal-container .history .output-window .result-window button.btn, body.app-list .modal-container .api .output-window .result-window button.btn {
  border-radius: 0;
}
body.app-list .modal-container .history .output-window .result-button-wrapper, body.app-list .modal-container .api .output-window .result-button-wrapper {
  height: 35px;
}
body.app-list .modal-container .code-editor {
  width: 1090px !important;
  height: 760px;
  background: #282c34;
  overflow-y: auto;
}
body.app-list .modal-container .code-editor a.btn-save-code {
  position: absolute;
  right: 0;
  color: white !important;
  margin-top: -23px;
  margin-right: 85px;
  cursor: pointer;
}
body.app-list .modal-container .code-editor a.btn-save-code:hover {
  color: yellowgreen;
}
body.app-list .modal-container .code-editor a.btn-auto-code {
  position: absolute;
  right: 0;
  color: white !important;
  margin-top: -23px;
  margin-right: 58px;
  cursor: pointer;
}
body.app-list .modal-container .code-editor a.btn-auto-code:hover {
  color: yellowgreen;
}
body.app-list .modal-container .code-editor a.btn-expand {
  position: absolute;
  right: 0;
  color: white !important;
  margin-top: -23px;
  margin-right: 32px;
  cursor: pointer;
}
body.app-list .modal-container .code-editor a.btn-expand:hover {
  color: yellowgreen;
}
body.app-list .modal-container .code-editor.expand {
  width: 100vw !important;
  height: calc(100vh - 10px) !important;
}
body.app-list .modal-container .editor-wrap {
  width: 100%;
  height: 100%;
}

.app-modal .modal-container {
  width: 1060px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.app-modal.play .modal-container {
  width: 820px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.app-modal.code-editor .modal-container {
  width: 1060px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.app-modal.code-editor.expand .modal-container {
  width: calc(100vw - 20px) !important;
  height: calc(100vh - 10px) !important;
}

body.dataset ul {
  list-style: none;
}
body.dataset .shared {
  position: absolute;
  margin-left: -20px;
}
body.dataset .form-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
body.dataset .form-wrapper .default-input {
  margin: 0;
}
body.dataset .form-wrapper > div:first-child .title-header {
  margin-top: 1rem;
}
body.dataset .form-wrapper > div:not(:first-child) .title-header {
  margin-top: 2rem;
}
body.dataset .form-wrapper > div:last-child {
  margin-bottom: 3rem;
}
body.dataset .form-wrapper > div .title-header {
  margin-bottom: 2rem;
  font-weight: 600;
  color: #333;
  width: 100%;
}
body.dataset .form-wrapper > div .title-header span {
  margin-left: 4rem;
}
body.dataset .form-wrapper .form-check {
  position: relative;
  display: block;
  padding-left: 0;
}
body.dataset .form-wrapper label.form-check-label {
  margin: 0 30px;
}
body.dataset .form-wrapper select.form-control {
  display: inline;
  color: #333;
}
body.dataset .form-wrapper select.form-control.http-method {
  width: 79px;
}
body.dataset .form-wrapper select.form-control.post_type {
  width: 120px;
}
body.dataset .form-wrapper select.form-control.encoding {
  width: 80px;
}
body.dataset .form-wrapper .form-group {
  margin-bottom: 0;
}
body.dataset .form-wrapper .form-group label {
  padding-top: calc(0.64rem + 1px);
  padding-bottom: calc(0.64rem + 1px);
  display: inline-flex;
  justify-content: flex-end;
  font-size: 13px;
}
body.dataset .form-wrapper .form-group .form-check .form-check-label input[type=checkbox] + .input-helper:before {
  margin-top: 12px;
}
body.dataset .form-wrapper .form-group .form-check .form-check-label input[type=checkbox] + .input-helper:after {
  margin-top: 12px;
}
body.dataset .form-wrapper .form-group .form-check {
  margin: 0;
}
body.dataset .form-wrapper .form-group.item-container {
  min-height: 250px;
}
body.dataset .form-wrapper .form-group ul.item-header, body.dataset .form-wrapper .form-group ul.item-list {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 0;
}
body.dataset .form-wrapper .form-group ul.item-header li.label, body.dataset .form-wrapper .form-group ul.item-header li.entity, body.dataset .form-wrapper .form-group ul.item-list li.label, body.dataset .form-wrapper .form-group ul.item-list li.entity {
  min-width: 40px;
}
body.dataset .form-wrapper .form-group ul.item-header li.label.w, body.dataset .form-wrapper .form-group ul.item-header li.entity.w, body.dataset .form-wrapper .form-group ul.item-list li.label.w, body.dataset .form-wrapper .form-group ul.item-list li.entity.w {
  width: 132px;
  text-align: center;
}
body.dataset .form-wrapper .form-group ul.item-header li.entity, body.dataset .form-wrapper .form-group ul.item-list li.entity {
  display: inline-flex;
  justify-content: center;
  height: 30px;
}
body.dataset .form-wrapper .form-group ul.item-header li.entity .btn-del i.mdi.mdi-close, body.dataset .form-wrapper .form-group ul.item-list li.entity .btn-del i.mdi.mdi-close {
  position: relative;
  top: -7px;
  right: 7px;
}
body.dataset .form-wrapper .form-group .button-wrapper {
  position: absolute;
  top: -40px;
}
body.dataset .form-wrapper .form-group .page-loop > * {
  min-width: 10%;
  margin-left: 1rem;
}
body.dataset .form-wrapper .form-group .page-loop > input {
  height: 35px;
  width: 20%;
}
body.dataset .form-wrapper .form-group input#param_selector {
  height: 35px;
}
body.dataset .form-wrapper .form-group .btn-page-loop {
  max-height: 32px;
}
body.dataset .form-wrapper .form-group.page-order .form-check-label {
  padding: 0 !important;
}
body.dataset .form-wrapper .form-group .extract-test, body.dataset .form-wrapper .form-group .loop-split-test {
  position: absolute;
  right: 16px;
  top: 4px;
}
body.dataset .form-wrapper .form-group .extract-test > button, body.dataset .form-wrapper .form-group .loop-split-test > button {
  padding: 1px 8px;
}
body.dataset .form-wrapper .form-group textarea#uri {
  width: calc(100% - 42px);
  margin-top: 4px;
}
body.dataset .form-wrapper .form-group input#spliter {
  width: calc(100% - 42px);
}
body.dataset .form-wrapper .save-btn {
  position: absolute;
  right: 23px;
  top: 32px;
}
body.dataset .form-wrapper .ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
body.dataset .form-wrapper .error-msg {
  font-size: 13px;
  position: relative;
  top: 10px;
  left: 10px;
  color: #000;
}
body.dataset .form-wrapper .not-draggable {
  cursor: no-drop;
}
body.dataset .form-wrapper select.form-control {
  color: unset !important;
}
body.dataset .form-wrapper .list-group-item {
  padding: 0;
  border: 0;
}
body.dataset .form-wrapper .tab-wrapper i:before {
  width: 20px;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}
body.dataset .form-wrapper .tab-wrapper {
  display: flex;
  position: relative;
  top: 5px;
}
body.dataset .form-wrapper .tab-wrapper i.active {
  opacity: 1;
}
body.dataset .form-wrapper .tab-wrapper i:not(.active) {
  opacity: 0.5;
  cursor: pointer;
}
body.dataset .form-wrapper .code-opt {
  position: absolute;
  top: 32px;
}
body.dataset .form-wrapper .code-opt i.mdi {
  cursor: pointer;
}
body.dataset .modal-container a.modal-close {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 1rem;
  color: #000;
}
body.dataset .modal-container a.btn-expand {
  position: absolute;
  right: 30px;
  top: 0;
  font-size: 1rem;
  color: #000;
  cursor: pointer;
}
body.dataset .modal-container label {
  font-size: 14px;
}
body.dataset .modal-container .result-wrap {
  margin-top: 2rem;
}
body.dataset .modal-container .btn-warning {
  background-color: #e63f5d;
}
body.dataset .modal-container .btn-warning:hover, body.dataset .modal-container .btn-warning:focus {
  background-color: #e01f42;
  border-color: #B24592;
}
body.dataset .modal-container .result-toggle-wrap {
  margin-top: 30px;
  height: 540px;
  overflow-y: auto;
  overflow-x: hidden;
}
body.dataset .modal-container .form-control {
  background-color: #fff;
  opacity: 0.7;
}
body.dataset .modal-container .form-controlfocus, body.dataset .modal-container .form-controlhover {
  background-color: #fff;
}
body.dataset .modal-container table.dataTable {
  width: 100% !important;
}
body.dataset .modal-container div.dataTables_length {
  display: inline-flex;
  justify-content: flex-end;
  width: 175px;
}
body.dataset .modal-container div.dataTables_filter {
  width: calc(100% - 200px);
  display: inline-flex;
  justify-content: flex-start;
}
body.dataset .modal-container div.dataTables_paginate {
  text-align: center;
  padding-bottom: 1rem;
}
body.dataset .modal-container .dataTables_wrapper .dataTable thead .sorting:before, body.dataset .modal-container .dataTables_wrapper .dataTable thead .sorting:after, body.dataset .modal-container .dataTables_wrapper .dataTable thead .sorting_asc:before, body.dataset .modal-container .dataTables_wrapper .dataTable thead .sorting_asc:after, body.dataset .modal-container .dataTables_wrapper .dataTable thead .sorting_desc:before, body.dataset .modal-container .dataTables_wrapper .dataTable thead .sorting_desc:after, body.dataset .modal-container .dataTables_wrapper .dataTable thead .sorting_asc_disabled:before, body.dataset .modal-container .dataTables_wrapper .dataTable thead .sorting_asc_disabled:after, body.dataset .modal-container .dataTables_wrapper .dataTable thead .sorting_desc_disabled:before, body.dataset .modal-container .dataTables_wrapper .dataTable thead .sorting_desc_disabled:after {
  font-size: 1rem;
  line-height: 0;
}
body.dataset .modal-container td.label.sorting:first-child:before, body.dataset .modal-container td.label.sorting:first-child:after, body.dataset .modal-container td.label.sorting:last-child:before, body.dataset .modal-container td.label.sorting:last-child:after {
  display: none;
}
body.dataset .modal-container td.label.sorting:before, body.dataset .modal-container td.label.sorting:after {
  top: 18px;
}
body.dataset .modal-container td.label.sorting:before {
  right: calc(50% - 46px);
}
body.dataset .modal-container td.label.sorting:after {
  right: calc(50% - 60px);
}
body.dataset .modal-container input.form-control::-moz-placeholder {
  color: #999;
}
body.dataset .modal-container input.form-control::placeholder {
  color: #999;
}
body.dataset .modal-container .item-header input[type=checkbox] {
  position: relative;
  top: 2px;
  left: -4px;
}
body.dataset .modal-container .item-header input[type=checkbox].ab:after {
  line-height: 1.2em;
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: rgb(235, 235, 235);
}
body.dataset .modal-container .item-header input[type=checkbox].ab:checked:after {
  content: "✔";
  text-align: center;
  font-weight: 600;
}
body.dataset .modal-container .item-header input[type=checkbox]#all2 {
  left: 0px;
}
body.dataset .modal-container .item-header input[type=checkbox]#all3 {
  position: relative;
  left: -4px;
}
body.dataset .modal-container .modal-btn-wrapper {
  left: -16px;
  position: relative;
  width: 53px;
  background: #fff;
}
body.dataset .modal-container .modal-btn-wrapper i.mdi-plus.fa-lg {
  position: relative;
  left: 2px;
  top: 1px;
  font-size: 1.2rem;
}
body.dataset .modal-container input[type=checkbox].cd:after {
  line-height: 1.2em;
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: rgb(235, 235, 235);
}
body.dataset .modal-container input[type=checkbox].cd:checked:after {
  content: "✔";
  text-align: center;
  font-weight: 600;
}
body.dataset .modal-container .page-param input.form-control::-moz-placeholder {
  font-size: 10.7px;
}
body.dataset .modal-container .page-param input.form-control::placeholder {
  font-size: 10.7px;
}
body.dataset .modal-container .dataTables_wrapper select {
  padding: 0.5rem;
}
body.dataset .modal-container .dataTables_wrapper {
  margin-top: 25px;
  height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
}
body.dataset .modal-container tr.item-header {
  height: 40px;
}
body.dataset .modal-container tr.item-header .show-btn {
  margin-left: 18px;
  cursor: pointer;
}
body.dataset .modal-container tr.item-header, body.dataset .modal-container tr.item-list {
  padding: 0 1px;
  height: 30px;
  margin-top: 1rem;
  margin-bottom: 0;
  width: 100%;
}
body.dataset .modal-container tr.item-header .label.t label, body.dataset .modal-container tr.item-list .label.t label {
  margin-left: 0 !important;
}
body.dataset .modal-container tr.item-header.lock td, body.dataset .modal-container tr.item-list.lock td {
  padding: 2px 1px;
}
body.dataset .modal-container tr.item-header.unlock td, body.dataset .modal-container tr.item-list.unlock td {
  padding: 0 1px;
}
body.dataset .modal-container tr.item-header td.entity button, body.dataset .modal-container tr.item-list td.entity button {
  padding: 0;
}
body.dataset .modal-container tr.item-header td.label, body.dataset .modal-container tr.item-header td.entity, body.dataset .modal-container tr.item-list td.label, body.dataset .modal-container tr.item-list td.entity {
  font-size: 12px;
}
body.dataset .modal-container tr.item-header td.label:first-child, body.dataset .modal-container tr.item-header td.label:last-child, body.dataset .modal-container tr.item-header td.entity:first-child, body.dataset .modal-container tr.item-header td.entity:last-child, body.dataset .modal-container tr.item-list td.label:first-child, body.dataset .modal-container tr.item-list td.label:last-child, body.dataset .modal-container tr.item-list td.entity:first-child, body.dataset .modal-container tr.item-list td.entity:last-child {
  width: 40px;
}
body.dataset .modal-container tr.item-header td.label:first-child, body.dataset .modal-container tr.item-header td.entity:first-child, body.dataset .modal-container tr.item-list td.label:first-child, body.dataset .modal-container tr.item-list td.entity:first-child {
  text-align: right;
}
body.dataset .modal-container tr.item-header td.label.w, body.dataset .modal-container tr.item-header td.entity.w, body.dataset .modal-container tr.item-list td.label.w, body.dataset .modal-container tr.item-list td.entity.w {
  text-align: center;
}
body.dataset .modal-container tr.item-header li.entity, body.dataset .modal-container tr.item-list li.entity {
  height: 30px;
}
body.dataset .modal-container tr.item-header li.entity .btn-del i.mdi.mdi-close, body.dataset .modal-container tr.item-list li.entity .btn-del i.mdi.mdi-close {
  position: relative;
  top: -7px;
  right: 7px;
}
body.dataset .modal-container tr.item-header {
  background: linear-gradient(to bottom, #fff, #eff 25%, #efe 75%, #fff);
}
body.dataset .modal-container tr.item-list td.w {
  overflow: hidden;
}
body.dataset .modal-container tr.item-list.even {
  background: rgba(255, 255, 255, 0.1);
}
body.dataset .modal-container .test-result .button-group {
  position: absolute;
  right: 40px;
  top: 0px;
}
body.dataset .modal-container .test-result .button-group button {
  height: 22px;
  width: 26px;
  padding: 3px;
}
body.dataset .modal-container .test-result .button-group button i {
  position: relative;
  top: -6px;
}
body.dataset .modal-container a.paginate_button {
  display: inline-flex;
  background: #04c9b7;
  width: 24px;
  height: 24px;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  margin-right: 0.65rem;
  font-size: 15px;
  cursor: pointer;
}
body.dataset .modal-container .lock-btn.lock i.mdi-lock-open {
  display: none;
}
body.dataset .modal-container .lock-btn.unlock i.mdi-lock {
  display: none;
}
body.dataset .modal-container textarea {
  overflow: hidden;
}
body.dataset .modal-container .add {
  background: #f7f7f7;
}
body.dataset .modal-container .add .add-wrap {
  width: 740px;
  margin: 40px;
  height: 820px;
  font-size: 14px;
}
body.dataset .modal-container .add .add-wrap span.plus-btn {
  position: absolute;
  right: -20px;
  top: 10px;
}
body.dataset .modal-container .add .add-wrap .dataset-id {
  position: absolute;
  top: -30px;
}
body.dataset .modal-container .add .add-wrap div.h {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}
body.dataset .modal-container .add .add-wrap .label-wrap {
  display: flex;
}
body.dataset .modal-container .add .add-wrap textarea.form-control {
  min-height: 35px;
  width: calc(100% - 16px);
}
body.dataset .modal-container .add .add-wrap label {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
}
body.dataset .modal-container .add .add-wrap .r {
  justify-content: flex-end;
  display: inline-flex;
}
body.dataset .modal-container .add .add-wrap .l {
  justify-content: flex-start;
  display: inline-flex;
}
body.dataset .modal-container .add .add-wrap .l > span {
  margin-right: 6px;
}
body.dataset .modal-container .add .add-wrap .db-sel-wrap {
  width: 100%;
}
body.dataset .modal-container .add .add-wrap .db-sel-wrap input.form-control {
  width: calc(100% - 60px);
}
body.dataset .modal-container .add .add-wrap .conn-string {
  display: inline-flex;
}
body.dataset .modal-container .add .add-wrap .conn-string .btn-conn {
  margin-left: 6px;
  width: 32px;
  height: 32px;
  position: relative;
  top: 1px;
}
body.dataset .modal-container .add .add-wrap .conn-string .btn-conn i {
  position: relative;
  left: -11px;
  font-size: 1.5rem;
  top: -8px;
}
body.dataset .modal-container .add .add-wrap .additional-wrap {
  width: 100%;
  display: flex;
}
body.dataset .modal-container .add .add-wrap .additional-wrap .item {
  width: 100%;
  display: flex;
}
body.dataset .modal-container .add .add-wrap .additional-wrap .item > div {
  font-size: 12px;
  font-style: italic;
}
body.dataset .modal-container .add .add-wrap .additional-wrap > div {
  align-items: center;
}
body.dataset .modal-container .add .add-wrap .btn-db_type {
  cursor: pointer;
}
body.dataset .modal-container .add .add-wrap .divider {
  position: relative;
  z-index: 1;
}
body.dataset .modal-container .add .add-wrap .divider:before {
  border-top: 2px solid #dfdfdf;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}
body.dataset .modal-container .add .add-wrap .divider .locate {
  position: relative;
  left: calc(50% - 100px);
  background: #f7f7f7;
  display: inline;
  padding: 0px 20px;
}
body.dataset .modal-container .add .add-wrap .divider .locate > span {
  cursor: pointer;
}
body.dataset .modal-container .add .run_history {
  position: absolute;
  top: -5px;
  cursor: pointer;
}
body.dataset .modal-container .add .row.h select {
  position: relative;
  top: 1px;
  padding: 8px;
  margin-left: 1px;
  width: calc(100% - 2px);
  height: 32px;
}
body.dataset .modal-container .add .col-9 div {
  padding: 0;
}
body.dataset .modal-container .add .col-9 div:first-child, body.dataset .modal-container .add .col-9 div:last-child {
  padding: 0;
}
body.dataset .modal-container .add .param-wrap {
  height: 100px;
  align-items: start !important;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.dataset .modal-container .add .btns > i {
  cursor: pointer;
  margin: 8.5px 0;
  position: relative;
  top: -5px;
}
body.dataset .modal-container .add .page-opt, body.dataset .modal-container .add .page-opt * {
  font-size: 12px !important;
  margin-top: 12px;
  display: block;
}
body.dataset .modal-container .add .rule-info {
  padding: 0;
}
body.dataset .modal-container .add .rule-info ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
}
body.dataset .modal-container .add .rule-info ul li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
body.dataset .modal-container .add .rule-info ul li.rule_name {
  width: 60%;
}
body.dataset .modal-container .add .rule-info ul li.http_method {
  width: 20%;
}
body.dataset .modal-container .add .rule-info ul li.av_param {
  justify-content: flex-end;
  width: 20%;
}
body.dataset .modal-container .add .rule-info ul li .btn-parsing-object {
  cursor: pointer;
}
body.dataset .modal-container .add textarea.form-control {
  min-height: 35px;
}
body.dataset .modal-container .add .page-param {
  min-width: 500px;
}
body.dataset .modal-container .add .save_type_label {
  position: relative;
  top: 5px;
  left: 20px;
  font-size: 12px;
  color: #999;
}
body.dataset .modal-container .add .paging-preview {
  position: absolute;
  left: calc(50% - 932px);
  top: 0px;
}
body.dataset .modal-container .add .paging-preview .paging-list {
  width: 550px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: paleturquoise;
  height: 550px;
}
body.dataset .modal-container .add .paging-preview .paging-list ul {
  list-style: none;
  padding-top: 10px;
}
body.dataset .modal-container .add .paging-preview .paging-list ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.dataset .modal-container .add .output-window {
  position: absolute;
  left: calc(50% + 410px);
  top: 0px;
}
body.dataset .modal-container .add .output-window .output {
  width: 540px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background: paleturquoise;
  height: 550px;
}
body.dataset .modal-container .add .output-window .output ul {
  list-style: none;
  padding-top: 10px;
}
body.dataset .modal-container .add .output-window .output ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.dataset .modal-container .add .output-window .log-window {
  height: 60%;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.dataset .modal-container .add .output-window .log-window li {
  display: flex;
}
body.dataset .modal-container .add .output-window .log-window li > span.time {
  width: 13%;
}
body.dataset .modal-container .add .output-window .log-window li > span.url {
  width: 77%;
}
body.dataset .modal-container .add .output-window .log-window li > span.cnt {
  width: 10%;
}
body.dataset .modal-container .add .output-window .result-window {
  height: 40%;
  font-size: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.dataset .modal-container .add .output-window .result-window textarea {
  height: calc(100% - 35px);
  overflow-y: scroll;
}
body.dataset .modal-container .add .output-window .result-window button.btn {
  border-radius: 0;
}
body.dataset .modal-container .add .output-window .result-button-wrapper {
  height: 35px;
}
body.dataset .modal-container .add .progress-bar {
  position: absolute;
  width: calc(100% - 60px);
  left: 30px;
  bottom: -42px;
}
body.dataset .modal-container .add .progress-bar .progress {
  border-radius: 0;
  justify-content: flex-end;
}
body.dataset .modal-container .add .progress-bar .progress span.progress-label {
  color: navy;
  font-weight: 600;
  font-size: 13px;
}
body.dataset .modal-container .add.expand .add-wrap {
  width: calc(100vw - 9rem);
  height: calc(100vh - 7rem);
  margin: 2rem;
}
body.dataset .modal-container .history .run_play, body.dataset .modal-container .api .run_play {
  position: absolute;
  top: -5px;
  cursor: pointer;
}
body.dataset .modal-container .history .rule-info ul, body.dataset .modal-container .api .rule-info ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
  justify-content: flex-end;
}
body.dataset .modal-container .history .rule-info ul li, body.dataset .modal-container .api .rule-info ul li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
body.dataset .modal-container .history .rule-info ul li.rule_name, body.dataset .modal-container .api .rule-info ul li.rule_name {
  width: 60%;
}
body.dataset .modal-container .history .rule-info ul li.http_method, body.dataset .modal-container .api .rule-info ul li.http_method {
  width: 20%;
  justify-content: flex-end;
}
body.dataset .modal-container .history .history-wrap, body.dataset .modal-container .history .api-wrap, body.dataset .modal-container .api .history-wrap, body.dataset .modal-container .api .api-wrap {
  width: 700px;
  margin: 70px 60px 40px 60px;
  height: 352px;
  font-size: 14px;
}
body.dataset .modal-container .history .history-wrap .hot-link, body.dataset .modal-container .history .api-wrap .hot-link, body.dataset .modal-container .api .history-wrap .hot-link, body.dataset .modal-container .api .api-wrap .hot-link {
  position: absolute;
  margin-top: -2.5rem;
}
body.dataset .modal-container .history .history-wrap span.plus-btn, body.dataset .modal-container .history .api-wrap span.plus-btn, body.dataset .modal-container .api .history-wrap span.plus-btn, body.dataset .modal-container .api .api-wrap span.plus-btn {
  position: absolute;
  right: -20px;
  top: 10px;
}
body.dataset .modal-container .history .history-wrap div.h, body.dataset .modal-container .history .api-wrap div.h, body.dataset .modal-container .api .history-wrap div.h, body.dataset .modal-container .api .api-wrap div.h {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}
body.dataset .modal-container .history .history-wrap > .row:nth-child(1), body.dataset .modal-container .history .api-wrap > .row:nth-child(1), body.dataset .modal-container .api .history-wrap > .row:nth-child(1), body.dataset .modal-container .api .api-wrap > .row:nth-child(1) {
  border-bottom: 1px solid #666;
  padding-bottom: 8px;
}
body.dataset .modal-container .history .history-results, body.dataset .modal-container .api .history-results {
  width: 100%;
}
body.dataset .modal-container .history .history-results .btn-replay, body.dataset .modal-container .api .history-results .btn-replay {
  position: absolute;
  left: 4px;
  padding: 1px 10px;
}
body.dataset .modal-container .history .history-results .row, body.dataset .modal-container .api .history-results .row {
  margin-bottom: 0.5rem;
}
body.dataset .modal-container .history .history-results .row div, body.dataset .modal-container .api .history-results .row div {
  display: inline-flex;
  align-items: center;
}
body.dataset .modal-container .history .history-results .row .col-3.r, body.dataset .modal-container .api .history-results .row .col-3.r {
  justify-content: flex-end;
  font-style: italic;
  font-size: 13px;
}
body.dataset .modal-container .history .history-results .run-info, body.dataset .modal-container .api .history-results .run-info {
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
}
body.dataset .modal-container .history .history-results .run-info .r_urls > span, body.dataset .modal-container .api .history-results .run-info .r_urls > span {
  width: 80px;
  cursor: pointer;
}
body.dataset .modal-container .history .history-results .run-info .uri, body.dataset .modal-container .api .history-results .run-info .uri {
  width: 60%;
}
body.dataset .modal-container .history .history-results .run-info .uri .uri textarea.form-control, body.dataset .modal-container .api .history-results .run-info .uri .uri textarea.form-control {
  width: 100%;
  min-width: 280px;
}
body.dataset .modal-container .history .history-results .run-info .run_data > span:nth-child(2), body.dataset .modal-container .api .history-results .run-info .run_data > span:nth-child(2) {
  width: 72px;
  margin-left: 10px;
}
body.dataset .modal-container .history .history-results .run-info .seq, body.dataset .modal-container .history .history-results .run-info .save_type, body.dataset .modal-container .api .history-results .run-info .seq, body.dataset .modal-container .api .history-results .run-info .save_type {
  width: 100px;
  cursor: pointer;
}
body.dataset .modal-container .history .history-results .run-info i.history-del, body.dataset .modal-container .api .history-results .run-info i.history-del {
  cursor: pointer;
  margin-left: 12px;
}
body.dataset .modal-container .history .paging-preview, body.dataset .modal-container .api .paging-preview {
  position: absolute;
  left: calc(50% - 932px);
  top: 0px;
}
body.dataset .modal-container .history .paging-preview .paging-list, body.dataset .modal-container .api .paging-preview .paging-list {
  width: 550px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: paleturquoise;
  height: 550px;
}
body.dataset .modal-container .history .paging-preview .paging-list ul, body.dataset .modal-container .api .paging-preview .paging-list ul {
  list-style: none;
  padding-top: 10px;
}
body.dataset .modal-container .history .paging-preview .paging-list ul li, body.dataset .modal-container .api .paging-preview .paging-list ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.dataset .modal-container .history .output-window, body.dataset .modal-container .api .output-window {
  position: absolute;
  left: calc(50% + 410px);
  top: 0px;
}
body.dataset .modal-container .history .output-window .output, body.dataset .modal-container .api .output-window .output {
  width: 540px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background: paleturquoise;
  height: 550px;
}
body.dataset .modal-container .history .output-window .output ul, body.dataset .modal-container .api .output-window .output ul {
  list-style: none;
  padding-top: 10px;
}
body.dataset .modal-container .history .output-window .output ul li, body.dataset .modal-container .api .output-window .output ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.dataset .modal-container .history .output-window .result-window, body.dataset .modal-container .api .output-window .result-window {
  height: 100%;
  font-size: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.dataset .modal-container .history .output-window .result-window textarea, body.dataset .modal-container .api .output-window .result-window textarea {
  height: calc(100% - 35px);
  overflow-y: scroll;
}
body.dataset .modal-container .history .output-window .result-window button.btn, body.dataset .modal-container .api .output-window .result-window button.btn {
  border-radius: 0;
}
body.dataset .modal-container .history .output-window .result-button-wrapper, body.dataset .modal-container .api .output-window .result-button-wrapper {
  height: 35px;
}
body.dataset .modal-container .api .rule-info ul li.rule_name {
  width: 40% !important;
}
body.dataset .modal-container .api .rule-info ul li.namespace input {
  height: 33px;
}
body.dataset .modal-container .api .rule-info ul li.page-range input {
  height: 33px;
  width: 40px;
}
body.dataset .modal-container .api .btn-auto {
  width: 30%;
  justify-content: flex-end !important;
}
body.dataset .modal-container .api .api-results {
  width: 100%;
  height: 620px;
  overflow-y: auto;
  overflow-x: hidden;
}
body.dataset .modal-container .api .api-results .lv1 > span:last-child::after {
  content: "\f60d";
  font-family: Material Design Icons !important;
  position: absolute;
  top: 30px;
  font-size: 2rem;
  right: -2px;
  color: lightgray;
}
body.dataset .modal-container .api .api-results .lv2 > span:last-child::after {
  content: "\f60d";
  font-family: Material Design Icons !important;
  position: absolute;
  font-size: 2rem;
  right: -2px;
  color: lightgray;
  margin-bottom: -72px;
}
body.dataset .modal-container .api .api-results .var_name {
  width: 100%;
  min-height: 30px;
  display: inline-flex;
  border-left: 3px solid lightgray;
  align-items: center;
  padding-left: 8px;
  margin-bottom: 4px;
  padding: 0 8px;
  background: #fff;
}
body.dataset .modal-container .api .api-results .var_name.empty {
  border-left: 0;
  background: unset;
}
body.dataset .modal-container .api .api-results .var_name input.form-control {
  border: 0;
  height: 28px;
}
body.dataset .modal-container .api .api-results .tm0 {
  margin-top: 0px;
}
body.dataset .modal-container .api .api-results .tm1 {
  margin-top: 34px;
}
body.dataset .modal-container .api .api-results .tm2 {
  margin-top: 68px;
}
body.dataset .modal-container .api .api-results .tm3 {
  margin-top: 102px;
}
body.dataset .modal-container .api .api-results .tm4 {
  margin-top: 136px;
}
body.dataset .modal-container .api .api-results .tm5 {
  margin-top: 170px;
}
body.dataset .modal-container .api .api-results .tm6 {
  margin-top: 204px;
}
body.dataset .modal-container .api .api-results .tm7 {
  margin-top: 238px;
}
body.dataset .modal-container .api .api-results .tm8 {
  margin-top: 272px;
}
body.dataset .modal-container .api .api-results .tm9 {
  margin-top: 306px;
}
body.dataset .modal-container .api .api-results .tm10 {
  margin-top: 340px;
}
body.dataset .modal-container .api .api-results .tm11 {
  margin-top: 374px;
}
body.dataset .modal-container .api .api-results .tm12 {
  margin-top: 408px;
}
body.dataset .modal-container .api .api-results .tm13 {
  margin-top: 442px;
}
body.dataset .modal-container .api .api-results .tm14 {
  margin-top: 476px;
}
body.dataset .modal-container .api .api-results .tm15 {
  margin-top: 510px;
}
body.dataset .modal-container .api .api-results .tm16 {
  margin-top: 544px;
}
body.dataset .modal-container .api .api-results .tm17 {
  margin-top: 578px;
}
body.dataset .modal-container .api .api-results .tm18 {
  margin-top: 612px;
}
body.dataset .modal-container .api .api-results .tm19 {
  margin-top: 646px;
}
body.dataset .modal-container .api .api-results .tm20 {
  margin-top: 680px;
}
body.dataset .modal-container .api .api-results .tm21 {
  margin-top: 714px;
}
body.dataset .modal-container .api .api-results .tm22 {
  margin-top: 748px;
}
body.dataset .modal-container .api .api-results .tm23 {
  margin-top: 782px;
}
body.dataset .modal-container .api .api-results .tm24 {
  margin-top: 816px;
}
body.dataset .modal-container .api .api-results .tm25 {
  margin-top: 850px;
}
body.dataset .modal-container .api .api-results .tm26 {
  margin-top: 884px;
}
body.dataset .modal-container .api .api-results .tm27 {
  margin-top: 918px;
}
body.dataset .modal-container .api .api-results .tm28 {
  margin-top: 952px;
}
body.dataset .modal-container .api .api-results .tm29 {
  margin-top: 986px;
}
body.dataset .modal-container .api .api-results .tm30 {
  margin-top: 1020px;
}
body.dataset .modal-container .api .api-results .tm31 {
  margin-top: 1054px;
}
body.dataset .modal-container .api .api-results .tm32 {
  margin-top: 1088px;
}
body.dataset .modal-container .api .api-results .tm33 {
  margin-top: 1122px;
}
body.dataset .modal-container .api .api-results .tm34 {
  margin-top: 1156px;
}
body.dataset .modal-container .api .api-results .tm35 {
  margin-top: 1190px;
}
body.dataset .modal-container .api .api-results .tm36 {
  margin-top: 1224px;
}
body.dataset .modal-container .api .api-results .tm37 {
  margin-top: 1258px;
}
body.dataset .modal-container .api .api-results .tm38 {
  margin-top: 1292px;
}
body.dataset .modal-container .api .api-results .tm39 {
  margin-top: 1326px;
}
body.dataset .modal-container .api .api-results .tm40 {
  margin-top: 1360px;
}
body.dataset .modal-container .api .api-results .tm41 {
  margin-top: 1394px;
}
body.dataset .modal-container .api .api-results .tm42 {
  margin-top: 1428px;
}
body.dataset .modal-container .api .api-results .tm43 {
  margin-top: 1462px;
}
body.dataset .modal-container .api .api-results .tm44 {
  margin-top: 1496px;
}
body.dataset .modal-container .api .api-results .tm45 {
  margin-top: 1530px;
}
body.dataset .modal-container .api .api-results .tm46 {
  margin-top: 1564px;
}
body.dataset .modal-container .api .api-results .tm47 {
  margin-top: 1598px;
}
body.dataset .modal-container .api .api-results .tm48 {
  margin-top: 1632px;
}
body.dataset .modal-container .api .api-results .tm49 {
  margin-top: 1666px;
}
body.dataset .modal-container .api .api-results .tm50 {
  margin-top: 1700px;
}
body.dataset .modal-container .api .api-results .tm51 {
  margin-top: 1734px;
}
body.dataset .modal-container .api .api-results .tm52 {
  margin-top: 1768px;
}
body.dataset .modal-container .api .api-results .tm53 {
  margin-top: 1802px;
}
body.dataset .modal-container .api .api-results .tm54 {
  margin-top: 1836px;
}
body.dataset .modal-container .api .api-results .tm55 {
  margin-top: 1870px;
}
body.dataset .modal-container .api .api-results .tm56 {
  margin-top: 1904px;
}
body.dataset .modal-container .api .api-results .tm57 {
  margin-top: 1938px;
}
body.dataset .modal-container .api .api-results .tm58 {
  margin-top: 1972px;
}
body.dataset .modal-container .api .api-results .tm59 {
  margin-top: 2006px;
}
body.dataset .modal-container .api .api-results .tm60 {
  margin-top: 2040px;
}
body.dataset .modal-container .api .api-results .modifier {
  position: relative;
  top: -8px;
}
body.dataset .modal-container .api .api-results .modifier .var_name {
  border-left: 3px solid #04c9a6;
}
body.dataset .modal-container .api .api-results .modifier .var_name.empty {
  border-left: 0;
  background: unset;
}
body.dataset .modal-container .api .api-results .add-btn, body.dataset .modal-container .api .api-results .add-detail, body.dataset .modal-container .api .api-results .add-comment {
  position: absolute;
  font-size: 1.2rem;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding-left: 1px;
  cursor: pointer;
  z-index: 9;
}
body.dataset .modal-container .api .api-results .add-btn {
  right: -10px;
  margin-top: -13px;
  background: #14dbb7;
}
body.dataset .modal-container .api .api-results .add-detail {
  right: -10px;
  margin-top: 12px;
  background: mediumturquoise;
}
body.dataset .modal-container .api .api-results .add-comment {
  right: -36px;
  margin-top: -13px;
  background: dodgerblue;
}
body.dataset .modal-container .api .api-results .remove-btn {
  position: absolute;
  left: 20px;
  font-size: 1.2rem;
  background: #14dbb7;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding-left: 1px;
  cursor: pointer;
  z-index: 9;
}
body.dataset .modal-container .api .api-results .btn-save {
  position: absolute;
  right: 60px;
  margin-top: -5px;
  cursor: pointer;
  z-index: 10;
}
body.dataset .modal-container .api .api-results .btn-save button {
  font-weight: 600;
  color: steelblue;
}
body.dataset .modal-container .api .api-results .row.variable {
  height: 60px;
}
body.dataset .modal-container .api .api-results span.tt {
  text-align: right;
  width: 100%;
  display: inline-block;
  font-size: 12px;
  margin-top: 3px;
}
body.dataset .modal-container .mts {
  width: 100%;
  padding-left: 2rem;
}
body.dataset .modal-container .mts .mts-wrap form {
  margin-top: 3rem;
  display: flex;
}
body.dataset .modal-container .mts .mts-wrap input[type=checkbox] {
  margin-right: 1rem;
}
body.dataset .modal-container .mts .mts-wrap .left, body.dataset .modal-container .mts .mts-wrap .right {
  width: 50%;
}
body.dataset .modal-container .mts .mts-wrap .dataset-id {
  position: absolute;
  top: 0;
  margin-top: 1rem;
  margin-left: 1rem;
}
body.dataset .modal-container .mts .mts-wrap ul.tables {
  height: 35vh;
  overflow-y: scroll;
}
body.dataset .modal-container .mts .mts-wrap ul.fields {
  height: 25vh;
  overflow-y: scroll;
  margin-bottom: 0;
}
body.dataset .modal-container .mts .mts-wrap .left .label {
  padding: 1rem 0.5rem 1rem 1rem;
}
body.dataset .modal-container .mts .mts-wrap .field-wrap .field > span {
  margin-left: 0.25rem;
  cursor: pointer;
}
body.dataset .modal-container .mts .mts-wrap .field-wrap .field > span.active {
  background: #03a092;
}
body.dataset .modal-container .mts .mts-wrap .condition-wrap {
  padding: 0 1rem;
  margin-top: 0.5rem;
}
body.dataset .modal-container .mts .mts-wrap .condition-wrap textarea {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
body.dataset .modal-container .mts .mts-wrap ul.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
body.dataset .modal-container .mts .mts-wrap .btn-wrap {
  width: 100%;
}
body.dataset .modal-container .mts .mts-wrap .btn-wrap button {
  padding: 4px 8px;
}
body.dataset .modal-container .mts .mts-wrap .target-info {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
}
body.dataset .modal-container .mts .mts-wrap .target-info .value {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
body.dataset .modal-container .mts .mts-wrap .target-info span.label {
  padding: 0;
}
body.dataset .modal-container .mts .mts-wrap button.conn_test {
  position: absolute;
  right: 1rem;
  margin-top: -2.5rem;
}
body.dataset .modal-container .mts .mts-wrap .target-wrap {
  margin-top: 1rem;
}
body.dataset .modal-container .mts .mts-wrap .right .label {
  padding-left: 2rem;
  margin-bottom: 1rem;
}
body.dataset .modal-container .mts .mts-wrap .logs {
  padding: 0 2rem;
  height: 100%;
  position: relative;
}
body.dataset .modal-container .mts .mts-wrap .logs textarea.logs {
  height: 100%;
}
body.dataset div.close-btn {
  position: absolute;
  top: 4px;
  right: 25px;
  z-index: 1;
  cursor: pointer;
}
body.dataset .search-field {
  max-width: 120px;
}
body.dataset .search-wrapper {
  position: absolute;
  top: 20px;
  width: 420px;
}
body.dataset .table thead th {
  vertical-align: top;
}
body.dataset .api-url-wrap {
  display: inline-flex;
  align-items: center;
}
body.dataset button.btn-sync {
  padding: 5px;
  height: 23px;
  margin-left: 6px;
}
body.dataset .sortable {
  font-size: 0.8rem;
  line-height: 0;
  font-family: Material Design Icons !important;
  cursor: pointer;
}
body.dataset .sortable.asc:before {
  opacity: 1;
}
body.dataset .sortable:not(.asc):before {
  opacity: 0.5;
}
body.dataset .sortable.desc:after {
  opacity: 1;
}
body.dataset .sortable:not(.desc):after {
  opacity: 0.5;
}
body.dataset .sortable:before {
  content: "\f05d";
  position: relative;
  margin-left: -6px;
  top: -2px;
}
body.dataset .sortable:after {
  content: "\f045";
  position: relative;
  top: -2px;
}
body.dataset.snapshot div.detail-wrap, body.dataset.export div.detail-wrap {
  height: 760px;
  overflow-y: auto;
}
body.dataset.snapshot div.detail-wrap textarea.json-data, body.dataset.export div.detail-wrap textarea.json-data {
  margin: 0 auto;
  height: 680px;
  position: relative;
  top: 40px;
  width: 90%;
}
body.dataset.snapshot table.detail-table, body.dataset.export table.detail-table {
  width: 720px;
  margin: 35px auto;
  table-layout: fixed;
}
body.dataset.snapshot table.detail-table tr td:first-child, body.dataset.snapshot table.detail-table th:first-child, body.dataset.export table.detail-table tr td:first-child, body.dataset.export table.detail-table th:first-child {
  padding-left: 20px !important;
}
body.dataset.snapshot table.detail-table tr.header th, body.dataset.export table.detail-table tr.header th {
  height: 40px;
  padding: 12px 10px 12px 0px;
  color: white;
  background: #039789;
}
body.dataset.snapshot table.detail-table td, body.dataset.export table.detail-table td {
  overflow: hidden;
  background: #f0f1f2;
  color: #9a9a9a;
  padding: 12px 10px 0px 0px;
}
body.dataset.snapshot table.detail-table tr:last-child td, body.dataset.export table.detail-table tr:last-child td {
  padding-bottom: 12px;
}
body.dataset.import .import-wrap {
  height: 600px;
  width: 100%;
}
body.dataset.import .import-wrap > .row {
  flex-direction: row;
}
body.dataset.import .import-wrap .label {
  width: 20%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
body.dataset.import .import-wrap .input {
  width: 60%;
}
body.dataset.import .import-wrap .btn-wrap {
  width: 20%;
  display: inline-flex;
  align-items: center;
}
body.dataset .db_editor {
  width: 100%;
  padding: 0;
}
body.dataset .db_editor .modal-close {
  right: 20px !important;
}
body.dataset .db_editor .useful-tools {
  position: relative;
}
body.dataset .db_editor ul.commands {
  margin: 0;
  margin: 0vmin 1vmin 0.4vmin 1vmin;
  padding: 0;
  background: #6998AB;
}
body.dataset .db_editor ul.commands li.command i {
  width: 2.5vmin;
  height: 2.5vmin;
  display: inline-block;
  color: white;
  font-size: 2vmin;
  margin-left: 1vmin;
  cursor: pointer;
}
body.dataset .db_editor ul.commands li.command i:hover {
  color: #FFFF2D;
}
body.dataset .db_editor ul.commands li.command i.r {
  position: relative;
  left: calc(100% - 32vmin);
}
body.dataset .db_editor ul.commands .word-count {
  position: absolute;
  right: 0;
  font-family: tahoma;
  font-size: 0.72rem;
  bottom: -1rem;
  color: #999;
}
body.dataset .db_editor .results-pane ul.commands li.command i.r {
  left: calc(100% - 41vmin);
}
body.dataset .db_editor .editor-wrap {
  display: flex;
  flex-direction: row;
  background: #F0F5F9;
}
body.dataset .db_editor .editor-wrap .object_panel {
  width: var(--width);
  height: 100vh;
}
body.dataset .db_editor .editor-wrap .object_panel .object-tab-wrap {
  overflow-x: hidden;
  margin-right: 1vmin;
}
body.dataset .db_editor .editor-wrap .object_panel .object-command-wrap li {
  padding-left: 1vmin;
  padding-right: 1vmin;
  padding-bottom: 0.8vmin;
  display: inline-flex;
  justify-content: flex-start;
  width: 100%;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_tab {
  display: flex;
  list-style: none;
  margin: 1vmin 0vmin 0.2vmin 1vmin;
  padding: 0;
  justify-content: flex-start;
  background: #C9D6DF;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_tab li {
  background: #C9D6DF;
  color: #000;
  width: auto;
  padding: 0 0.7vmin;
  text-transform: capitalize;
  font-size: 1.3vmin;
  border-top: 2px solid #CBC4CA;
  margin-top: -2px;
  cursor: pointer;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_tab li.active {
  border-top: 4px solid;
  margin-top: -4px;
}
body.dataset .db_editor .editor-wrap .object_panel .shortcut-info {
  position: absolute;
  font-size: 12px !important;
  color: #6998AA;
  margin-left: calc(18% - 110px);
  letter-spacing: -0.5px;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_items {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  height: 60vh;
  background: #fff;
  margin-left: 1vmin;
  padding-left: 1vmin;
  margin-bottom: 0.5vmin;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_items li.object_item {
  height: 15px;
  font-weight: 100;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_items li.object_item span.item {
  white-space: nowrap;
  position: relative;
  top: -2px;
  cursor: pointer;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_items li.object_item span.item:hover {
  text-decoration: underline;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_items li.object_item span.item.active {
  background: #6998AB;
  padding: 0 0.5vw;
  color: #ffffff;
  font-weight: 600;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_items li.object_item span.item .item-symbol {
  color: #52616B;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_items li.object_item.ref-on span.item {
  background: #00ADB5;
  color: #fff;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_items li.object_item.ref-on .join-group {
  background: white;
  padding: 0;
  display: flex;
  margin: 0;
  position: relative;
  top: -6px;
  border: 1px solid darkgray;
  font-size: 12px;
  z-index: 2;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  opacity: 0.84;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_items li.object_item.ref-on .join-group select {
  max-width: 56px;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_items li.object_item.ref-on .join-group .o:hover {
  color: #04c9b7;
}
body.dataset .db_editor .editor-wrap .object_panel ul.object_items li.object_item.ref-on .join-group .x:hover {
  color: #f5375c;
}
body.dataset .db_editor .editor-wrap .object_panel .object_inspector-wrap {
  margin-left: 1vmin;
  background: #fff;
  height: 31.6vh;
  overflow-y: scroll;
}
body.dataset .db_editor .editor-wrap .object_panel .object_inspector-wrap ul.object_property {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
}
body.dataset .db_editor .editor-wrap .object_panel .object_inspector-wrap ul.object_property li {
  width: 100%;
  height: 15px;
  font-weight: 100;
  font-size: 1.3vmin;
  padding-left: 0.5vmin;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dataset .db_editor .editor-wrap .object_panel .object_inspector-wrap ul.object_property.header {
  height: 27px;
  align-items: center;
  background: #6998AB;
  color: white;
  border-bottom: 3px solid #F0F5F9;
}
body.dataset .db_editor .editor-wrap .object_panel .object_inspector-wrap ul.object_property.header li {
  font-weight: 600;
}
body.dataset .db_editor .editor-wrap .main_panel {
  width: var(--width);
  height: 100vh;
}
body.dataset .db_editor .editor-wrap .main_panel .code-tab ul.tabs {
  display: flex;
  margin-top: 0.8vmin;
  padding: 0;
  margin-bottom: 0.2vmin;
}
body.dataset .db_editor .editor-wrap .main_panel .code-tab ul.tabs li {
  min-width: 6vmin;
  padding-left: 1vmin;
  padding-right: 0.5vmin;
  background: #52616B;
  opacity: 0.6;
  cursor: pointer;
  color: white;
}
body.dataset .db_editor .editor-wrap .main_panel .code-tab ul.tabs li.new {
  opacity: 0.2;
}
body.dataset .db_editor .editor-wrap .main_panel .code-tab ul.tabs li.active {
  background: #1E2022;
  opacity: 1;
}
body.dataset .db_editor .editor-wrap .main_panel .code-tab ul.tabs li i {
  cursor: pointer;
}
body.dataset .db_editor .editor-wrap .main_panel .code-tab ul.tabs li span {
  padding: 0 4px;
}
body.dataset .db_editor .editor-wrap .main_panel .code-pane {
  height: var(--height);
  width: 100%;
  padding: 2vmin;
  background: #C9D6DF;
}
body.dataset .db_editor .editor-wrap .main_panel .code-pane label.shortcut-info {
  position: absolute;
  margin-top: -1.7vmin;
  font-size: 12px !important;
  color: #6998AA;
}
body.dataset .db_editor .editor-wrap .main_panel .code-pane .code-text {
  width: 100%;
  height: 100%;
  background: #fff;
  line-height: 31px;
  background-image: -webkit-linear-gradient(left, white 0, transparent 0), -webkit-linear-gradient(right, white 0, transparent 0), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-repeat: repeat-y;
  background-size: 100% 100%, 100% 100%, 100% 31px;
  background-attachment: local;
  overflow: auto;
}
body.dataset .db_editor .editor-wrap .main_panel .results-pane span.btn-run-app {
  color: white;
  position: relative;
  top: -0.2vmin;
  padding-left: 0.5vmin;
  cursor: pointer;
  font-weight: 600;
}
body.dataset .db_editor .editor-wrap .main_panel .results-pane span.btn-run-app:hover {
  color: #FFFF2D;
}
body.dataset .db_editor .editor-wrap .main_panel .results-pane .app-list {
  position: absolute;
  margin-left: 21vmin;
  margin-top: 1px;
  display: flex;
  z-index: 9;
}
body.dataset .db_editor .editor-wrap .main_panel .results-pane .app-list select.form-control {
  color: #000 !important;
  opacity: 1 !important;
}
body.dataset .db_editor .editor-wrap .main_panel .results-pane .app-list button.btn {
  padding: 0.5vmin;
  font-size: smaller;
  width: 8vmin;
  color: white;
  font-weight: 600;
  background: #0F4C75;
  opacity: 0.88;
}
body.dataset .db_editor .editor-wrap .main_panel .results-pane .latest-table {
  position: absolute;
  margin-top: -1.8vmin;
  font-size: 1.4vmin;
  margin-left: 0.4vmin;
  color: #6998AA;
}
body.dataset .db_editor .editor-wrap .main_panel .results-pane ul.commands {
  margin: 0 !important;
}
body.dataset .db_editor .editor-wrap .main_panel .result-wrap {
  height: var(--height);
  margin-top: 0;
}
body.dataset .db_editor .editor-wrap .main_panel .result-wrap .result-header {
  width: calc(100% - 1.7vmin);
}
body.dataset .db_editor .editor-wrap .main_panel .result-wrap .result-header .row {
  margin: 0;
  padding: 0;
}
body.dataset .db_editor .editor-wrap .main_panel .result-wrap .result-header li {
  overflow: hidden;
}
body.dataset .db_editor .editor-wrap .main_panel .csveditor-wrap {
  height: calc(100% - 2.2vmin);
  overflow-y: auto !important;
}
body.dataset .db_editor .editor-wrap .right_panel {
  width: var(--width);
}
body.dataset .db_editor .editor-wrap .right_panel .field-selector div.tagsinput {
  border: 1px solid #CCC;
  margin-left: 2px;
  margin-top: 3.6vmin;
  width: calc(100% - 2.2vmin);
  height: 10.3vmin;
  overflow-y: auto;
}
body.dataset .db_editor .editor-wrap .right_panel .field-selector div.tagsinput span.tag {
  border: 1px solid #52616B;
  color: #000;
  background: #C9D6DF;
}
body.dataset .db_editor .editor-wrap .right_panel .field-selector div.tagsinput span.tag.inactive {
  opacity: 0.5;
}
body.dataset .db_editor .editor-wrap .right_panel .query-option, body.dataset .db_editor .editor-wrap .right_panel .sort-option {
  width: 100%;
  margin-top: 2px;
  margin-left: 4px;
}
body.dataset .db_editor .editor-wrap .right_panel .sort-option {
  margin-top: 0 !important;
}
body.dataset .db_editor .editor-wrap .right_panel .query_item, body.dataset .db_editor .editor-wrap .right_panel .sort_item {
  width: calc(100% - 2.2vmin);
  display: flex;
}
body.dataset .db_editor .editor-wrap .right_panel .query_item input[type=text], body.dataset .db_editor .editor-wrap .right_panel .sort_item input[type=text] {
  height: 33px;
  position: relative;
  top: -1px;
}
body.dataset .db_editor .editor-wrap .right_panel .query_item .plus-btn, body.dataset .db_editor .editor-wrap .right_panel .sort_item .plus-btn {
  position: absolute;
  right: -17px;
  top: 6px;
  cursor: pointer;
}
body.dataset .db_editor .editor-wrap .right_panel .useful-tools {
  width: calc(100% - 2.2vmin);
}
body.dataset .db_editor .editor-wrap .right_panel .useful-tools .commands {
  margin: 4px 0px 0px 4px !important;
  padding: 0.5vmin !important;
}
body.dataset .db_editor .editor-wrap .right_panel .useful-tools .commands span.square {
  font-size: 1vmin;
  margin-left: 2px;
  margin-bottom: 2px;
  cursor: pointer;
  background: #0F4C75;
}
body.dataset .db_editor .editor-wrap .right_panel .useful-tools textarea.content {
  margin-left: 4px;
  height: 9.2vw;
}
body.dataset .db_editor .editor-wrap .right_panel .logs {
  margin-top: 1vmin;
}
body.dataset .db_editor .editor-wrap .right_panel .logs ul.log.header {
  height: 3.6vmin;
  align-items: center;
  background: #6998AB;
  color: white;
  border-bottom: 3px solid #F0F5F9;
}
body.dataset .db_editor .editor-wrap .right_panel .logs ul.log.header li {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
body.dataset .db_editor .editor-wrap .right_panel .logs ul.log.item {
  height: 49.4vh;
  overflow-y: scroll;
}
body.dataset .db_editor .editor-wrap .right_panel .logs ul.log span.time {
  font-size: smaller;
}
body.dataset .db_editor .editor-wrap .right_panel .logs ul.log span.query {
  font-size: small;
  cursor: pointer;
}
body.dataset .db_editor .editor-wrap .right_panel .logs ul.log span.query:hover {
  color: teal;
  text-decoration: underline;
}
body.dataset .db_editor .editor-wrap .right_panel .logs .ai_answer {
  position: absolute;
  width: var(--width);
  margin-top: 2rem;
  background: #fff;
  height: 100%;
  z-index: 999;
}
body.dataset .db_editor .editor-wrap .right_panel .logs .ai_answer textarea.form-control {
  opacity: 1;
  height: 100%;
  max-height: 30rem;
}
body.dataset .db_editor .editor-wrap .right_panel .logs .ai_answer i.mdi.mdi-close {
  position: absolute;
  right: 0.4rem;
  margin-top: -1.2rem;
  cursor: pointer;
}

.dataset-modal .modal-container {
  width: 1060px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.dataset-modal.detail .modal-container {
  width: 1600px !important;
  height: 900px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.dataset-modal.add .modal-container {
  width: 820px !important;
  height: 900px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.dataset-modal.add.expand .modal-container {
  height: calc(100vh - 1rem) !important;
  width: calc(100vw - 2rem) !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.dataset-modal.add.expand .modal-container div#modal.row {
  margin: 0;
}
.dataset-modal.history .modal-container {
  width: 820px !important;
  height: 550px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.dataset-modal.output .modal-container {
  width: 820px !important;
  height: 550px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.dataset-modal.api .modal-container {
  width: 820px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.dataset-modal.db_editor .modal-container {
  width: calc(100vw - 10px) !important;
  height: calc(100vh - 10px) !important;
}
.detail-modal .modal-container {
  width: 820px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}

.onsave {
  background: linear-gradient(45deg, #f7f7f7, #f7f7f7, #f7f7f7, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 1s ease infinite;
}

.dataset-modal.detail .dataTables_wrapper {
  height: 740px !important;
}

.nav-tabs {
  border-bottom: unset;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
:root {
  --wx1: 5%;
  --wx2: 10%;
  --wx3: 15%;
  --wx4: 20%;
  --wx5: 25%;
  --wx6: 30%;
  --wx7: 35%;
  --wx8: 40%;
  --wx9: 45%;
  --wx10: 50%;
  --wx11: 55%;
  --wx12: 60%;
  --wx13: 65%;
  --wx14: 70%;
  --wx15: 75%;
  --wx16: 80%;
  --wx17: 85%;
  --wx18: 90%;
  --wx19: 95%;
  --hx1: 5%;
  --hx2: 10%;
  --hx3: 15%;
  --hx4: 20%;
  --hx5: 25%;
  --hx6: 30%;
  --hx7: 35%;
  --hx8: 40%;
  --hx9: 45%;
  --hx10: 50%;
  --hx11: 55%;
  --hx12: 60%;
  --hx13: 65%;
  --hx14: 70%;
  --hx15: 75%;
  --hx16: 80%;
  --hx17: 85%;
  --hx18: 90%;
  --hx19: 95%;
  --ppx0: 0%;
  --ppx1: 0.5%;
  --ppx2: 1%;
  --ppx3: 1.5%;
  --ppx4: 2%;
  --ppx5: 2.5%;
  --ppx6: 3%;
  --ppx7: 3.5%;
  --ppx8: 4%;
  --ppx9: 4.5%;
  --ppx10: 5%;
  --ppx11: 7.5%;
  --ppx12: 10%;
  --ppx13: 12.5%;
  --ppx14: 15%;
  --ppx15: 17.5%;
  --ppx16: 20%;
  --ppx17: 22.5%;
  --ppx18: 25%;
  --ppx19: 27.5%;
}

body.layout.page.front {
  transform-origin: top;
  /*********** Baseline, reset styles ***********/
  /* Removes default focus */
  /******** Chrome, Safari, Opera and Edge Chromium styles ********/
  /* slider track */
  /* slider thumb */
  /*********** Firefox styles ***********/
  /* slider track */
  /* slider thumb */
}
body.layout.page.front .buttons-wrap {
  position: absolute;
  left: calc(50% - 1rem);
  width: 2rem;
  display: flex;
}
body.layout.page.front .eye_icon {
  cursor: pointer;
  opacity: 0.2;
  z-index: 999;
  text-align: center;
}
body.layout.page.front .eye_icon.active {
  opacity: 1;
}
body.layout.page.front .grid_icon {
  cursor: pointer;
  opacity: 0.2;
  z-index: 999;
  text-align: center;
}
body.layout.page.front .grid_icon.active {
  opacity: 1;
}
body.layout.page.front .zoom-control {
  position: fixed;
  left: calc(50% - 20rem);
  top: 0.75rem;
  z-index: 999;
}
body.layout.page.front #app.grid {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: repeating-linear-gradient(to right, silver, silver 1px, transparent 1px, transparent 5rem) 0 0, repeating-linear-gradient(to bottom, silver, silver 1px, transparent 1px, transparent 5rem) 0 0;
  background-size: 5rem 5rem;
}
body.layout.page.front input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: transparent;
  cursor: pointer;
  width: 40rem;
}
body.layout.page.front input[type=range]:focus {
  outline: none;
}
body.layout.page.front input[type=range]::-webkit-slider-runnable-track {
  background-color: #add8e6;
  border-radius: 0.5rem;
  height: 0.5rem;
}
body.layout.page.front input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  margin-top: -4px;
  /* Centers thumb on the track */
  background-color: #d6ebff;
  border-radius: 0.25rem;
  height: 1rem;
  width: 1rem;
}
body.layout.page.front input[type=range]:focus::-webkit-slider-thumb {
  outline: 3px solid #d6ebff;
  outline-offset: 0.125rem;
}
body.layout.page.front input[type=range]::-moz-range-track {
  background-color: #add8e6;
  border-radius: 0.5rem;
  height: 0.5rem;
}
body.layout.page.front input[type=range]::-moz-range-thumb {
  background-color: #d6ebff;
  border: none;
  /*Removes extra border that FF applies*/
  border-radius: 0.25rem;
  height: 1rem;
  width: 1rem;
}
body.layout.page.front input[type=range]:focus::-moz-range-thumb {
  outline: 3px solid #d6ebff;
  outline-offset: 0.125rem;
}
body.layout .block-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}
body.layout .api-url-wrap {
  display: inline-flex;
  align-items: center;
}
body.layout button.btn-sync {
  padding: 5px;
  height: 23px;
  margin-left: 6px;
}
body.layout .modal-container a.modal-close {
  position: absolute;
  right: 23px;
  top: 0;
  font-size: 1rem;
  color: #000;
}
body.layout .modal-container label {
  font-size: 14px;
}
body.layout .modal-container .code-editor {
  width: 100%;
  background: #282c34;
}
body.layout .modal-container .code-editor .input-wrap {
  display: flex;
  margin: 0.5rem 2rem;
  justify-content: center;
  align-items: center;
}
body.layout .modal-container .code-editor .input-wrap > div {
  width: 50%;
  margin-right: 1rem;
  display: inline-flex;
  color: #fff;
  align-items: center;
}
body.layout .modal-container .code-editor .input-wrap > div .label {
  margin: 0 2rem;
}
body.layout .modal-container .code-editor .input-wrap > div .value {
  width: 20rem;
}
body.layout .modal-container .code-editor .input-wrap > div .value input {
  border-radius: 0.2rem;
}
body.layout .modal-container .code-editor .panel-mode-wrap {
  display: inline;
  position: absolute;
  top: 0;
  margin-top: -34px;
  left: unset;
  right: 0;
  margin-right: 90px;
}
body.layout .modal-container .code-editor .panel-mode-wrap > div {
  display: inline-flex;
  cursor: pointer;
  z-index: 5;
}
body.layout .modal-container .code-editor .panel-mode-wrap > div i {
  opacity: 0.2;
}
body.layout .modal-container .code-editor .panel-mode-wrap > div i.l-overlay {
  width: 14px;
  overflow: hidden;
  position: absolute;
  opacity: 0.4;
}
body.layout .modal-container .code-editor .panel-mode-wrap > div i.r-overlay {
  width: 14px;
  overflow: hidden;
  position: absolute;
  margin-left: 14px;
  opacity: 0.4;
}
body.layout .modal-container .code-editor .panel-mode-wrap > div i.active {
  opacity: 1;
}
body.layout .modal-container .code-editor a.btn-save-code {
  position: absolute;
  right: 0;
  color: white !important;
  margin-top: -26px;
  margin-right: 63px;
  cursor: pointer;
}
body.layout .modal-container .code-editor a.btn-save-code:hover {
  color: yellowgreen;
}
body.layout .modal-container .code-editor a.btn-expand {
  position: absolute;
  right: 0;
  color: white !important;
  margin-top: -26px;
  margin-right: 39px;
  cursor: pointer;
}
body.layout .modal-container .code-editor a.btn-expand:hover {
  color: yellowgreen;
}
body.layout .modal-container .code-editor a.modal-close {
  margin-top: -26px;
  margin-right: 23px;
  color: #fff;
  top: unset;
  right: 0;
}
body.layout .modal-container .editors-wrap {
  display: flex;
}
body.layout .modal-container .editors-wrap .editor-wrap {
  width: 50%;
  height: 100%;
}
body.layout .modal-container .editors-wrap.left .editor-wrap.html {
  width: calc(100% - 20px);
}
body.layout .modal-container .editors-wrap.left .editor-wrap.css {
  width: 20px;
}
body.layout .modal-container .editors-wrap.right .editor-wrap.css {
  width: calc(100% - 20px);
}
body.layout .modal-container .editors-wrap.right .editor-wrap.html {
  width: 20px;
}
body.layout .modal-container .result-wrap {
  margin-top: 2rem;
}
body.layout .modal-container .btn-warning {
  background-color: #e63f5d;
}
body.layout .modal-container .btn-warning:hover, body.layout .modal-container .btn-warning:focus {
  background-color: #e01f42;
  border-color: #B24592;
}
body.layout .modal-container .result-toggle-wrap {
  margin-top: 10px;
  height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
}
body.layout .modal-container .form-control {
  background-color: #fff;
  opacity: 0.7;
}
body.layout .modal-container .form-controlfocus, body.layout .modal-container .form-controlhover {
  background-color: #fff;
}
body.layout .modal-container table.dataTable {
  width: 100% !important;
}
body.layout .modal-container div.dataTables_length {
  display: inline-flex;
  justify-content: flex-end;
  width: 175px;
}
body.layout .modal-container div.dataTables_filter {
  width: calc(100% - 200px);
  display: inline-flex;
  justify-content: flex-start;
}
body.layout .modal-container div.dataTables_paginate {
  text-align: center;
  padding-bottom: 1rem;
}
body.layout .modal-container .dataTables_wrapper .dataTable thead .sorting:before, body.layout .modal-container .dataTables_wrapper .dataTable thead .sorting:after, body.layout .modal-container .dataTables_wrapper .dataTable thead .sorting_asc:before, body.layout .modal-container .dataTables_wrapper .dataTable thead .sorting_asc:after, body.layout .modal-container .dataTables_wrapper .dataTable thead .sorting_desc:before, body.layout .modal-container .dataTables_wrapper .dataTable thead .sorting_desc:after, body.layout .modal-container .dataTables_wrapper .dataTable thead .sorting_asc_disabled:before, body.layout .modal-container .dataTables_wrapper .dataTable thead .sorting_asc_disabled:after, body.layout .modal-container .dataTables_wrapper .dataTable thead .sorting_desc_disabled:before, body.layout .modal-container .dataTables_wrapper .dataTable thead .sorting_desc_disabled:after {
  font-size: 1rem;
  line-height: 0;
}
body.layout .modal-container td.label.sorting:first-child:before, body.layout .modal-container td.label.sorting:first-child:after, body.layout .modal-container td.label.sorting:last-child:before, body.layout .modal-container td.label.sorting:last-child:after {
  display: none;
}
body.layout .modal-container td.label.sorting:before, body.layout .modal-container td.label.sorting:after {
  top: 18px;
}
body.layout .modal-container td.label.sorting:before {
  right: calc(50% - 46px);
}
body.layout .modal-container td.label.sorting:after {
  right: calc(50% - 60px);
}
body.layout .modal-container input.form-control::-moz-placeholder {
  color: #999;
}
body.layout .modal-container input.form-control::placeholder {
  color: #999;
}
body.layout .modal-container .item-header input[type=checkbox] {
  position: relative;
  top: 2px;
  left: -4px;
}
body.layout .modal-container .item-header input[type=checkbox].ab:after {
  line-height: 1.2em;
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: rgb(235, 235, 235);
}
body.layout .modal-container .item-header input[type=checkbox].ab:checked:after {
  content: "✔";
  text-align: center;
  font-weight: 600;
}
body.layout .modal-container .item-header input[type=checkbox]#all2 {
  left: 0px;
}
body.layout .modal-container .item-header input[type=checkbox]#all3 {
  position: relative;
  left: -4px;
}
body.layout .modal-container input[type=checkbox].cd:after {
  line-height: 1.2em;
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: rgb(235, 235, 235);
}
body.layout .modal-container input[type=checkbox].cd:checked:after {
  content: "✔";
  text-align: center;
  font-weight: 600;
}
body.layout .modal-container .page-param input.form-control::-moz-placeholder {
  font-size: 10.7px;
}
body.layout .modal-container .page-param input.form-control::placeholder {
  font-size: 10.7px;
}
body.layout .modal-container .dataTables_wrapper select {
  padding: 0.5rem;
}
body.layout .modal-container .dataTables_wrapper {
  height: 620px;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.layout .modal-container tr.item-header {
  height: 40px;
}
body.layout .modal-container tr.item-header .show-btn {
  margin-left: 18px;
  cursor: pointer;
}
body.layout .modal-container tr.item-header, body.layout .modal-container tr.item-list {
  padding: 0 1px;
  margin-top: 1rem;
  margin-bottom: 0;
  width: 100%;
}
body.layout .modal-container tr.item-header.lock td, body.layout .modal-container tr.item-list.lock td {
  padding: 1px;
}
body.layout .modal-container tr.item-header.unlock td, body.layout .modal-container tr.item-list.unlock td {
  padding: 0 1px;
}
body.layout .modal-container tr.item-header td, body.layout .modal-container tr.item-list td {
  font-size: 12px;
}
body.layout .modal-container tr.item-header td.label:first-child, body.layout .modal-container tr.item-header td.label:last-child, body.layout .modal-container tr.item-header td.entity:first-child, body.layout .modal-container tr.item-header td.entity:last-child, body.layout .modal-container tr.item-list td.label:first-child, body.layout .modal-container tr.item-list td.label:last-child, body.layout .modal-container tr.item-list td.entity:first-child, body.layout .modal-container tr.item-list td.entity:last-child {
  width: 60px;
}
body.layout .modal-container tr.item-header td.label:first-child, body.layout .modal-container tr.item-header td.entity:first-child, body.layout .modal-container tr.item-list td.label:first-child, body.layout .modal-container tr.item-list td.entity:first-child {
  text-align: right;
}
body.layout .modal-container tr.item-header td.label.w, body.layout .modal-container tr.item-header td.entity.w, body.layout .modal-container tr.item-list td.label.w, body.layout .modal-container tr.item-list td.entity.w {
  text-align: center;
}
body.layout .modal-container tr.item-header li.entity, body.layout .modal-container tr.item-list li.entity {
  height: 30px;
}
body.layout .modal-container tr.item-header li.entity .btn-del i.mdi.mdi-close, body.layout .modal-container tr.item-list li.entity .btn-del i.mdi.mdi-close {
  position: relative;
  top: -7px;
  right: 7px;
}
body.layout .modal-container tr.item-header .btn-del, body.layout .modal-container tr.item-list .btn-del {
  padding: 0;
}
body.layout .modal-container tr.item-header {
  background: rgba(125, 255, 155, 0.1);
}
body.layout .modal-container tr.item-list td.w {
  overflow: hidden;
}
body.layout .modal-container tr.item-list.even {
  background: rgba(255, 255, 255, 0.1);
}
body.layout .modal-container .button-group {
  position: absolute;
  right: -25px;
  top: -10px;
}
body.layout .modal-container .button-group button.btn.btn-sm.btn-success {
  padding: 1px 8px;
  margin: 0;
}
body.layout .modal-container a.paginate_button {
  display: inline-flex;
  background: #04c9b7;
  width: 24px;
  height: 24px;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  margin-right: 0.65rem;
  font-size: 15px;
  cursor: pointer;
}
body.layout .modal-container .lock-btn.lock i.mdi-lock-open {
  display: none;
}
body.layout .modal-container .lock-btn.unlock i.mdi-lock {
  display: none;
}
body.layout .modal-container textarea {
  overflow: hidden;
}
body.layout .modal-container .add-wrap {
  width: 740px;
  margin: 40px;
  height: 820px;
  font-size: 14px;
}
body.layout .modal-container .add-wrap span.plus-btn {
  position: absolute;
  right: -20px;
  top: 10px;
}
body.layout .modal-container .add-wrap .layout-id {
  position: absolute;
  top: -30px;
}
body.layout .modal-container .add-wrap div.h {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}
body.layout .modal-container .add-wrap .label-wrap {
  display: flex;
}
body.layout .modal-container .add-wrap textarea.form-control {
  min-height: 35px;
  width: calc(100% - 16px);
}
body.layout .modal-container .add-wrap label {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
}
body.layout .modal-container .add-wrap .r {
  justify-content: flex-end;
  display: inline-flex;
}
body.layout .modal-container .add-wrap .l {
  justify-content: flex-start;
  display: inline-flex;
}
body.layout .modal-container .add-wrap .l > span {
  margin-right: 6px;
}
body.layout .modal-container .add-wrap .db-sel-wrap {
  width: 100%;
}
body.layout .modal-container .add-wrap .db-sel-wrap input.form-control {
  width: calc(100% - 60px);
}
body.layout .modal-container .add-wrap .block-wrap {
  width: 100%;
}
body.layout .modal-container .add-wrap .block-wrap select {
  width: calc(100% - 50px);
}
body.layout .modal-container .add-wrap .add-btn {
  cursor: pointer;
}
body.layout .modal-container .add-wrap .dataset-link span.badge {
  cursor: pointer;
}
body.layout .modal-container .add-wrap .dataset-link .pairing-mode {
  position: absolute;
  margin-top: 1.65rem;
}
body.layout .modal-container .add-wrap .btn-wrap.col-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0px;
  z-index: 2;
  width: 40px;
}
body.layout .modal-container .add-wrap .btn-up-down {
  display: flex;
  flex-direction: column;
}
body.layout .modal-container .add-wrap .btn-up-down i {
  cursor: pointer;
}
body.layout .modal-container .add-wrap .btn-up-down.less i {
  position: relative;
}
body.layout .modal-container .add-wrap .btn-up-down.less i.mdi-menu-up {
  top: 2px;
}
body.layout .modal-container .add-wrap .btn-up-down.less i.mdi-menu-down {
  top: -2px;
}
body.layout .modal-container .add-wrap .where, body.layout .modal-container .add-wrap .off-limit {
  height: 33px;
  position: relative;
  top: -1px;
}
body.layout .modal-container .add-wrap .conn-string {
  display: inline-flex;
}
body.layout .modal-container .add-wrap .conn-string .btn-conn {
  margin-left: 6px;
  width: 32px;
  height: 32px;
  position: relative;
  top: 1px;
}
body.layout .modal-container .add-wrap .conn-string .btn-conn i {
  position: relative;
  left: -11px;
  font-size: 1.5rem;
  top: -8px;
}
body.layout .modal-container .add-wrap .additional-wrap {
  width: 100%;
  display: flex;
}
body.layout .modal-container .add-wrap .additional-wrap .item {
  width: 100%;
  display: flex;
}
body.layout .modal-container .add-wrap .additional-wrap .item > div {
  font-size: 12px;
  font-style: italic;
}
body.layout .modal-container .add-wrap .additional-wrap > div {
  align-items: center;
}
body.layout .modal-container .add-wrap .btn-layout_type, body.layout .modal-container .add-wrap .btn-render_option {
  cursor: pointer;
}
body.layout .modal-container .add-wrap .divider {
  position: relative;
  z-index: 1;
}
body.layout .modal-container .add-wrap .divider:before {
  border-top: 2px solid #dfdfdf;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}
body.layout .modal-container .add-wrap .divider .locate {
  position: relative;
  left: calc(50% - 80px);
  background: #f7f7f7;
  display: inline;
  padding: 0px 20px;
}
body.layout .modal-container .add-wrap .divider .locate > span {
  cursor: pointer;
}
body.layout .modal-container .rev_popup .add-wrap {
  width: calc(100% - 5rem);
}
body.layout .modal-container .rev_popup .add-wrap .row {
  align-items: flex-start;
}
body.layout .modal-container .output-window {
  position: absolute;
  left: calc(50% + 410px);
  top: 0px;
}
body.layout .modal-container .output-window .close-btn {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 4px;
}
body.layout .modal-container .output-window .output {
  width: 540px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background: paleturquoise;
  height: 900px;
}
body.layout .modal-container .output-window .output ul {
  list-style: none;
  padding-top: 40px;
}
body.layout .modal-container .output-window .output ul.varients {
  padding: 2rem 1rem;
}
body.layout .modal-container .output-window .output ul.varients .r-var {
  margin-top: 4px;
  margin-left: 28px;
}
body.layout .modal-container .output-window .output ul span.btn-del, body.layout .modal-container .output-window .output ul span.btn-save {
  cursor: pointer;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}
body.layout .modal-container .output-window .output ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.layout .modal-container .output-window .output ul li.var {
  padding: 10px;
  border: 1px dashed;
}
body.layout .modal-container .output-window .output ul li .db-opt {
  width: calc(100% - 80px);
  display: flex;
}
body.layout .modal-container .output-window .output ul li .db-opt input {
  padding: 6px 8px;
}
body.layout .modal-container .output-window .result-button-wrapper {
  height: 35px;
}
body.layout .modal-container .run .l {
  text-align: left;
}
body.layout .modal-container .run .run-wrap {
  width: 660px;
  margin: 70px 100px 40px 60px;
  height: 552px;
  font-size: 14px;
}
body.layout .modal-container .run .run-wrap span.plus-btn {
  position: absolute;
  right: -20px;
  top: 10px;
}
body.layout .modal-container .run .run-wrap .cl {
  height: 360px;
  overflow-y: auto;
}
body.layout .modal-container .run .run-wrap .cl .clc {
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  min-height: 80%;
  overflow: auto;
}
body.layout .modal-container .run .run_history {
  position: absolute;
  top: -5px;
  cursor: pointer;
}
body.layout .modal-container .run .run-wrap div.h {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}
body.layout .modal-container .run .row.h select {
  position: relative;
  top: 1px;
  padding: 8px;
}
body.layout .modal-container .run .col-9 div {
  padding: 0;
}
body.layout .modal-container .run .col-9 div:first-child, body.layout .modal-container .run .col-9 div:last-child {
  padding: 0;
}
body.layout .modal-container .run .param-wrap {
  height: 100px;
  align-items: start !important;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.layout .modal-container .run .btns > i {
  cursor: pointer;
  margin: 8.5px 0;
  position: relative;
  top: -5px;
}
body.layout .modal-container .run .page-opt, body.layout .modal-container .run .page-opt * {
  font-size: 12px !important;
  margin-top: 12px;
  display: block;
}
body.layout .modal-container .run .rule-info {
  padding: 0;
}
body.layout .modal-container .run .rule-info ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
}
body.layout .modal-container .run .rule-info ul li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
body.layout .modal-container .run .rule-info ul li.rule_name {
  width: 60%;
}
body.layout .modal-container .run .rule-info ul li.http_method {
  width: 20%;
}
body.layout .modal-container .run .rule-info ul li.av_param {
  justify-content: flex-end;
  width: 20%;
}
body.layout .modal-container .run .rule-info ul li .btn-parsing-object {
  cursor: pointer;
}
body.layout .modal-container .run textarea.form-control {
  min-height: 35px;
}
body.layout .modal-container .run .page-param {
  min-width: 500px;
}
body.layout .modal-container .run .save_type_label {
  position: relative;
  top: 5px;
  left: 20px;
  font-size: 12px;
  color: #999;
}
body.layout .modal-container .run .paging-preview {
  position: absolute;
  left: calc(50% - 932px);
  top: 0px;
}
body.layout .modal-container .run .paging-preview .paging-list {
  width: 550px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: paleturquoise;
  height: 550px;
}
body.layout .modal-container .run .paging-preview .paging-list ul {
  list-style: none;
  padding-top: 10px;
}
body.layout .modal-container .run .paging-preview .paging-list ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.layout .modal-container .run .progress-bar {
  position: absolute;
  width: calc(100% - 60px);
  left: 30px;
  bottom: -42px;
}
body.layout .modal-container .run .progress-bar .progress {
  border-radius: 0;
  justify-content: flex-end;
}
body.layout .modal-container .run .progress-bar .progress span.progress-label {
  color: navy;
  font-weight: 600;
  font-size: 13px;
}
body.layout .modal-container .ref_setup .mdi-close {
  cursor: pointer;
  margin-left: 0.5rem;
}
body.layout .modal-container .ref_setup .project-wrap {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
}
body.layout .modal-container .ui-wizard {
  width: 100%;
}
body.layout .modal-container .ui-wizard div.selected {
  border: 1px solid #000 !important;
}
body.layout .modal-container .ui-wizard .code-text {
  height: 100%;
  width: 100%;
  line-height: 31px;
  background-image: -webkit-linear-gradient(left, white 0, transparent 0), -webkit-linear-gradient(right, white 0, transparent 0), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-repeat: repeat-y;
  background-size: 100% 100%, 100% 100%, 100% 31px;
  background-attachment: local;
  font-size: 16px;
  padding: 0 8px;
}
body.layout .modal-container .ui-wizard a.modal-close {
  cursor: pointer;
  margin-left: 0.5rem;
  z-index: 99;
  right: -0.5rem;
}
body.layout .modal-container .ui-wizard .wizard-wrap.initial .canvas::before {
  content: "";
  position: absolute;
  background-color: #ccc;
  width: 10%;
  height: 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body.layout .modal-container .ui-wizard .wizard-wrap.initial .canvas::after {
  content: "";
  position: absolute;
  background-color: #ccc;
  width: 8px;
  height: 10%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body.layout .modal-container .ui-wizard .wizard-wrap iframe {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  background-color: #f0f0f0;
  cursor: crosshair;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: absolute;
  padding-bottom: calc(100% - 3.6rem);
  background-color: #f0f0f0;
  cursor: crosshair;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas > * {
  position: relative;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas > div {
  position: absolute;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .left {
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #ffcc00;
  /* Adjust color as needed */
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .right {
  border-left: 1px dashed #fff;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #ff6699;
  /* Adjust color as needed */
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .top {
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #3399ff;
  /* Adjust color as needed */
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .bottom {
  border-top: 1px dashed #fff;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #66cc66;
  /* Adjust color as needed */
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .center {
  top: 2%;
  left: 2%;
  width: 96%;
  height: 96%;
  background-color: #cccccc;
  /* Adjust color as needed */
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas > .wrap.dp-1.box {
  top: 2%;
  left: 2%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas.left, body.layout .modal-container .ui-wizard .wizard-wrap .canvas.right, body.layout .modal-container .ui-wizard .wizard-wrap .canvas.center, body.layout .modal-container .ui-wizard .wizard-wrap .canvas.top, body.layout .modal-container .ui-wizard .wizard-wrap .canvas.bottom, body.layout .modal-container .ui-wizard .wizard-wrap .canvas.box {
  background-color: transparent;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.box {
  padding: 2%;
  width: 96%;
  height: 96%;
  border: 1px dashed #fff;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx1 {
  width: 5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx2 {
  width: 10%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx3 {
  width: 15%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx4 {
  width: 20%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx5 {
  width: 25%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx6 {
  width: 30%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx7 {
  width: 35%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx8 {
  width: 40%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx9 {
  width: 45%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx10 {
  width: 50%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx11 {
  width: 55%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx12 {
  width: 60%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx13 {
  width: 65%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx14 {
  width: 70%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx15 {
  width: 75%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx16 {
  width: 80%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx17 {
  width: 85%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx18 {
  width: 90%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.wx19 {
  width: 95%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx1 {
  height: 5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx2 {
  height: 10%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx3 {
  height: 15%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx4 {
  height: 20%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx5 {
  height: 25%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx6 {
  height: 30%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx7 {
  height: 35%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx8 {
  height: 40%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx9 {
  height: 45%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx10 {
  height: 50%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx11 {
  height: 55%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx12 {
  height: 60%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx13 {
  height: 65%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx14 {
  height: 70%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx15 {
  height: 75%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx16 {
  height: 80%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx17 {
  height: 85%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx18 {
  height: 90%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.hx19 {
  height: 95%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx0 {
  padding: 0%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx1 {
  padding: 0.5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx2 {
  padding: 1%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx3 {
  padding: 1.5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx4 {
  padding: 2%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx5 {
  padding: 2.5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx6 {
  padding: 3%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx7 {
  padding: 3.5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx8 {
  padding: 4%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx9 {
  padding: 4.5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx10 {
  padding: 5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx11 {
  padding: 7.5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx12 {
  padding: 10%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx13 {
  padding: 12.5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx14 {
  padding: 15%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx15 {
  padding: 17.5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx16 {
  padding: 20%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx17 {
  padding: 22.5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx18 {
  padding: 25%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .wrap.ppx19 {
  padding: 27.5%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .box {
  border: 1px dashed #fff;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .dp-1.box {
  padding: 0;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas [class^=dp-] {
  width: 100%;
  height: 100%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .dp-1 {
  /*                        opacity:0.8;    */
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .dp-1 .box {
  width: 100%;
  height: 100%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .dp-2 {
  opacity: 0.86;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .pseudo {
  opacity: 0.25;
  position: absolute;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .ui {
  width: 100%;
  height: 100%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .has-vtc {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .has-hzt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .has-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body.layout .modal-container .ui-wizard .wizard-wrap .canvas .has-hmode {
  flex-direction: row;
}
body.layout .modal-container .ui-wizard .wizard-wrap .wizard-btns {
  padding-top: calc(100% - 1.7rem);
  margin-right: -1.9rem;
}
body.layout .modal-container .ui-wizard .wizard-wrap .wizard-btns .input-group {
  justify-content: space-between;
}
body.layout .modal-container .ui-wizard .wizard-wrap .wizard-btns .btns button {
  height: 100%;
  border-radius: 0;
}
body.layout .modal-container .ui-wizard .wizard-wrap .wizard-btns .btns button:first-child {
  border-bottom-left-radius: 0.25rem;
}
body.layout .modal-container .ui-wizard .wizard-wrap .wizard-btns .btns button:last-child {
  border-bottom-right-radius: 0.25rem;
}
body.layout .modal-container .ui-wizard .wizard-wrap .wizard-btns .btns button i.mdi-eye {
  opacity: 0.5;
}
body.layout .modal-container .ui-wizard .wizard-wrap .wizard-btns .btns button i.mdi-eye.active {
  opacity: 1;
}
body.layout .modal-container .ui-wizard .wizard-wrap .code-gen-options {
  display: flex;
  flex: 1;
  background: #f0f0f0;
  align-items: center;
  height: 2.25rem;
  padding: 1rem;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  max-width: 25vw;
  overflow: hidden;
}
body.layout .modal-container .ui-wizard .wizard-wrap .code-gen-options .preset, body.layout .modal-container .ui-wizard .wizard-wrap .code-gen-options .indicate {
  padding: 0 1rem;
}
body.layout .modal-container .ui-wizard .wizard-wrap .code-gen-options .form-select[multiple] {
  height: auto;
  min-height: 30px;
  white-space: nowrap;
  overflow-x: auto;
  width: 100%;
}
body.layout .modal-container .ui-wizard .wizard-wrap .code-gen-options .form-select[multiple] option:checked {
  background-color: #60b7cc;
  color: white;
}
body.layout .modal-container .ui-wizard .wizard-wrap .code-gen-options .label .txt {
  font-size: 0.8rem;
  position: relative;
  left: -1rem;
}
body.layout .modal-container .ui-wizard .wizard-wrap .code-gen-options button.btn.add-input-keyword {
  position: absolute;
  border-radius: 50%;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  background: skyblue;
  margin-left: -0.4rem;
}
body.layout .modal-container .ui-wizard .wizard-wrap .code-gen-options button.btn.add-input-keyword span {
  position: relative;
  top: -5px;
  color: white;
}
body.layout .modal-container .ui-wizard .left-popup {
  width: 28vw;
  left: 0.25rem;
  position: absolute;
  height: 90vh;
  background: white;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
body.layout .modal-container .ui-wizard .left-popup .add-template {
  padding: 1rem 1.5rem;
}
body.layout .modal-container .ui-wizard .left-popup .add-template .thumb img {
  width: 12rem;
}
body.layout .modal-container .ui-wizard .left-popup .add-template .title {
  padding: 1rem 0;
}
body.layout .modal-container .ui-wizard .left-popup .add-template .template_info {
  padding: 2rem 0;
}
body.layout .modal-container .ui-wizard .left-popup .add-template .btn-tpl-add {
  position: absolute;
  right: 1rem;
}
body.layout .modal-container .ui-wizard .left-popup .btn-sample-add, body.layout .modal-container .ui-wizard .left-popup .btn-mixin-add, body.layout .modal-container .ui-wizard .left-popup .btn-load-add {
  position: absolute;
  right: 1rem;
}
body.layout .modal-container .ui-wizard .left-popup .btn-extract {
  right: 1rem;
  position: absolute;
  height: 2rem;
  padding: 0 0.6rem;
  top: -0.4rem;
}
body.layout .modal-container .ui-wizard .left-popup .btn-revision {
  position: absolute;
  right: 1rem;
  bottom: 0;
}
body.layout .modal-container .ui-wizard .left-popup .sample-data-wrap, body.layout .modal-container .ui-wizard .left-popup .mixin-wrap {
  height: 70vh;
}
body.layout .modal-container .ui-wizard .left-popup .list-template .title {
  padding: 2rem 1.5rem 0 1.5rem;
}
body.layout .modal-container .ui-wizard .left-popup .list-template ul {
  list-style: none;
  display: flex;
  padding: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}
body.layout .modal-container .ui-wizard .left-popup .list-template ul li {
  width: calc(33% - 0.7rem);
}
body.layout .modal-container .ui-wizard .left-popup .list-template ul li .thumb img {
  width: 100%;
}
body.layout .modal-container .ui-wizard .left-popup .var_name {
  position: absolute;
  width: 15rem;
  margin-top: 1.25rem;
  margin-left: 1.25rem;
}
body.layout .modal-container .ui-wizard .right-popup {
  width: 26.4vw;
  right: 0.25rem;
  position: absolute;
  height: 90vh;
  background: white;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap {
  height: 22%;
  overflow-y: scroll;
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap .code {
  height: calc(100% - 2rem);
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap button.btn-sm {
  border-color: inherit;
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap .btn-wrap {
  gap: 2px;
  display: inline-flex;
  position: relative;
  width: 100%;
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap .btn-wrap .layer-input-keywords {
  position: absolute;
  bottom: 2rem;
  background: #fff;
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap .btn-wrap .layer-input-keywords ul {
  margin-bottom: 0;
  list-style: none;
  padding: 0.5rem 1rem;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap .btn-wrap .layer-input-keywords ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap .btn-wrap .layer-input-keywords ul li i.mdi.mdi-close {
  cursor: pointer;
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap .btn-wrap .layer-prompt {
  position: absolute;
  bottom: 2rem;
  background: #fff;
  right: 0;
  width: calc(100% - 12.5rem);
  height: 8rem;
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap .btn-wrap .layer-prompt textarea.form-control {
  height: 100%;
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap .btn-wrap .layer-prompt i.mdi.mdi-close {
  position: absolute;
  right: 0;
  margin-top: -1rem;
  cursor: pointer;
}
body.layout .modal-container .ui-wizard .right-popup .code-wrap .btn-wrap .btn-send {
  position: absolute;
  right: 0;
}
body.layout .modal-container .ui-wizard .right-popup .custom-css {
  height: 60%;
  overflow-y: scroll;
}
body.layout .modal-container .ui-wizard .right-popup .css-wrap {
  height: 18%;
  overflow-y: scroll;
}
body.layout .modal-container .rev-list-wrap {
  width: 25%;
  width: 350px !important;
}
body.layout .modal-container .rev-list-wrap span.rev-ver {
  min-width: 84px;
}
body.layout .modal-container .rev-list-wrap .rev-play {
  position: absolute;
  margin-top: -40px;
  cursor: pointer;
}
body.layout .modal-container .is_expand .change-log {
  height: unset !important;
}
body.layout .modal-container .change-log {
  width: calc(100% - 350px) !important;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 820px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
body.layout .modal-container .change-log div {
  flex: 1;
}
body.layout .modal-container .change-log div .d2h-wrapper {
  max-height: 660px;
  overflow-y: auto;
  overflow-x: hidden;
}
body.layout .modal-container .rev-play-wrap {
  width: calc(100% - 350px);
  display: flex;
  height: 820px;
}
body.layout .modal-container .tab-caption {
  position: absolute;
  margin-top: -30px;
}
body.layout .modal-container .tab-caption span {
  display: inline-block;
}
body.layout .modal-container ul.rev-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
body.layout .modal-container ul.rev-list li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #bcd;
  /*        width: 88%;*/
}
body.layout .modal-container ul.rev-list li label.ver-num {
  margin-left: 6px;
}
body.layout .modal-container ul.rev-list li span.save-time {
  font-size: 0.85em;
  font-style: italic;
  margin-left: 1em;
  margin-right: 1em;
}
body.layout .modal-container ul.rev-list li span.badge.badge-success {
  margin-right: 4px;
  width: 24px;
  cursor: pointer;
}
body.layout .modal-container ul.rev-list li span.badge.badge-success i {
  position: relative;
  left: -3px;
}
body.layout .modal-container ul.page {
  display: flex;
  list-style: none;
  flex-direction: row;
  justify-content: center;
  padding: 0;
  width: 88%;
  margin-top: 0.5rem;
}
body.layout .modal-container ul.page li {
  text-decoration: underline;
  margin: 0 6px;
}
body.layout .context-menu {
  position: var(--position);
  left: var(--left);
  top: var(--top);
  z-index: 9999;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  display: var(--display);
  flex-direction: column;
}
body.layout .context-menu.active ul.button-actions {
  display: flex;
}
body.layout .context-menu ul.button-actions {
  padding: 0 0.8rem;
  margin: 0;
  flex-direction: row;
  display: none;
}
body.layout .context-menu ul.button-actions li.button-action {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  list-style: none;
}
body.layout .context-menu ul.button-actions li.button-action:hover {
  background: #f0f0f0;
}
body.layout .context-menu ul.button-actions li.button-action.save {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  gap: 0.5rem;
}
body.layout .context-menu ul.button-actions li.button-action.save label {
  position: absolute;
  overflow: hidden;
  width: 15vw;
  height: 1.2vw;
}
body.layout .context-menu ul.button-actions li.button-action.save .btn {
  height: 100%;
}
body.layout .context-menu ul.button-actions li.button-action.save .input-group {
  justify-content: flex-end;
}
body.layout .context-menu ul.button-actions li.button-action.active {
  background: aliceblue;
}
body.layout .context-menu ul.button-actions.extra {
  border-left: 1px solid #ccc;
}
body.layout .context-menu ul.button-actions.extra.define-snippet, body.layout .context-menu ul.button-actions.extra.load-snippet {
  width: 16vw;
}
body.layout .context-menu ul.button-actions.extra .btn-wrap {
  text-align: right;
  margin-right: 1rem;
}
body.layout .context-menu ul.button-actions.extra .btn-wrap .btn-close {
  color: #f5375c !important;
  cursor: pointer;
}
body.layout .context-menu input[type=range] {
  width: 90%;
  margin-left: 5%;
}
body.layout .context-menu .range-bar datalist {
  display: flex;
  font-size: small;
  justify-content: space-evenly;
}
body.layout .context-menu .range-bar option {
  padding: 0;
}
body.layout .context-menu .button-wrap {
  display: flex;
}
body.layout .context-menu .button-wrap .input-group {
  justify-content: space-evenly;
}
body.layout .context-menu .button-wrap .input-group button {
  padding: 0 0.2rem;
  font-size: small;
}
body.layout .context-menu .edit-wrap {
  gap: 0.5rem;
  padding: 0.25rem;
  max-width: 100%;
}
body.layout .context-menu .edit-wrap input.form-control {
  flex: 1;
  width: 4rem;
}
body.layout .context-menu .edit-wrap button.btn {
  padding: 0.2rem 0.6rem;
  margin-left: 0.2rem;
}
body.layout .context-menu .edit-wrap .parent-wrap {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.1rem;
}

.app-modal.code-editor .modal-container {
  width: 1090px !important;
  height: 760px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 2rem;
  background: #000;
}
.app-modal.code-editor.expand .modal-container {
  width: calc(100vw - 20px) !important;
  height: calc(100vh - 10px) !important;
}
.ui-wizard .modal-container {
  margin-top: -5rem;
}
.layout-modal .modal-container {
  width: 1060px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.layout-modal.add .modal-container {
  width: 820px !important;
  height: 900px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.layout-modal.play .modal-container {
  width: 820px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.rev_popup .modal-container {
  width: 1440px !important;
  height: 900px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}

body.display .modal-container a.modal-close {
  position: absolute;
  right: 8px;
  top: 0;
  font-size: 1rem;
  color: #000;
}
body.display .modal-container label {
  font-size: 14px;
}
body.display .modal-container .result-wrap {
  margin-top: 2rem;
}
body.display .modal-container .btn-warning {
  background-color: #e63f5d;
}
body.display .modal-container .btn-warning:hover, body.display .modal-container .btn-warning:focus {
  background-color: #e01f42;
  border-color: #B24592;
}
body.display .modal-container .result-toggle-wrap {
  margin-top: 10px;
  height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
}
body.display .modal-container .form-control {
  background-color: #fff;
  opacity: 0.7;
}
body.display .modal-container .form-controlfocus, body.display .modal-container .form-controlhover {
  background-color: #fff;
}
body.display .modal-container .content-type-label {
  width: 80px;
  height: 65px;
  padding-top: 25px;
  opacity: 0.8;
}
body.display .modal-container table.dataTable {
  width: 100% !important;
}
body.display .modal-container div.dataTables_length {
  display: inline-flex;
  justify-content: flex-end;
  width: 175px;
}
body.display .modal-container div.dataTables_filter {
  width: calc(100% - 200px);
  display: inline-flex;
  justify-content: flex-start;
}
body.display .modal-container div.dataTables_paginate {
  text-align: center;
  padding-bottom: 1rem;
}
body.display .modal-container .dataTables_wrapper .dataTable thead .sorting:before, body.display .modal-container .dataTables_wrapper .dataTable thead .sorting:after, body.display .modal-container .dataTables_wrapper .dataTable thead .sorting_asc:before, body.display .modal-container .dataTables_wrapper .dataTable thead .sorting_asc:after, body.display .modal-container .dataTables_wrapper .dataTable thead .sorting_desc:before, body.display .modal-container .dataTables_wrapper .dataTable thead .sorting_desc:after, body.display .modal-container .dataTables_wrapper .dataTable thead .sorting_asc_disabled:before, body.display .modal-container .dataTables_wrapper .dataTable thead .sorting_asc_disabled:after, body.display .modal-container .dataTables_wrapper .dataTable thead .sorting_desc_disabled:before, body.display .modal-container .dataTables_wrapper .dataTable thead .sorting_desc_disabled:after {
  font-size: 1rem;
  line-height: 0;
}
body.display .modal-container td.label.sorting:first-child:before, body.display .modal-container td.label.sorting:first-child:after, body.display .modal-container td.label.sorting:last-child:before, body.display .modal-container td.label.sorting:last-child:after {
  display: none;
}
body.display .modal-container td.label.sorting:before, body.display .modal-container td.label.sorting:after {
  top: 18px;
}
body.display .modal-container td.label.sorting:before {
  right: calc(50% - 46px);
}
body.display .modal-container td.label.sorting:after {
  right: calc(50% - 60px);
}
body.display .modal-container input.form-control::-moz-placeholder {
  color: #999;
}
body.display .modal-container input.form-control::placeholder {
  color: #999;
}
body.display .modal-container .item-header input[type=checkbox] {
  position: relative;
  top: 2px;
  left: -4px;
}
body.display .modal-container .item-header input[type=checkbox].ab:after {
  line-height: 1.2em;
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: rgb(235, 235, 235);
}
body.display .modal-container .item-header input[type=checkbox].ab:checked:after {
  content: "✔";
  text-align: center;
  font-weight: 600;
}
body.display .modal-container .item-header input[type=checkbox]#all2 {
  left: 0px;
}
body.display .modal-container .item-header input[type=checkbox]#all3 {
  position: relative;
  left: -4px;
}
body.display .modal-container input[type=checkbox].cd:after {
  line-height: 1.2em;
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: rgb(235, 235, 235);
}
body.display .modal-container input[type=checkbox].cd:checked:after {
  content: "✔";
  text-align: center;
  font-weight: 600;
}
body.display .modal-container .page-param input.form-control::-moz-placeholder {
  font-size: 10.7px;
}
body.display .modal-container .page-param input.form-control::placeholder {
  font-size: 10.7px;
}
body.display .modal-container .dataTables_wrapper select {
  padding: 0.5rem;
}
body.display .modal-container .dataTables_wrapper {
  height: 620px;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.display .modal-container tr.item-header {
  height: 40px;
}
body.display .modal-container tr.item-header .show-btn {
  margin-left: 18px;
  cursor: pointer;
}
body.display .modal-container tr.item-header, body.display .modal-container tr.item-list {
  padding: 0 1px;
  margin-top: 1rem;
  margin-bottom: 0;
  width: 100%;
}
body.display .modal-container tr.item-header.lock td, body.display .modal-container tr.item-list.lock td {
  padding: 1px;
}
body.display .modal-container tr.item-header.unlock td, body.display .modal-container tr.item-list.unlock td {
  padding: 0 1px;
}
body.display .modal-container tr.item-header td, body.display .modal-container tr.item-list td {
  font-size: 12px;
}
body.display .modal-container tr.item-header td.label:first-child, body.display .modal-container tr.item-header td.label:last-child, body.display .modal-container tr.item-header td.entity:first-child, body.display .modal-container tr.item-header td.entity:last-child, body.display .modal-container tr.item-list td.label:first-child, body.display .modal-container tr.item-list td.label:last-child, body.display .modal-container tr.item-list td.entity:first-child, body.display .modal-container tr.item-list td.entity:last-child {
  width: 60px;
}
body.display .modal-container tr.item-header td.label:first-child, body.display .modal-container tr.item-header td.entity:first-child, body.display .modal-container tr.item-list td.label:first-child, body.display .modal-container tr.item-list td.entity:first-child {
  text-align: right;
}
body.display .modal-container tr.item-header td.label.w, body.display .modal-container tr.item-header td.entity.w, body.display .modal-container tr.item-list td.label.w, body.display .modal-container tr.item-list td.entity.w {
  text-align: center;
}
body.display .modal-container tr.item-header li.entity, body.display .modal-container tr.item-list li.entity {
  height: 30px;
}
body.display .modal-container tr.item-header li.entity .btn-del i.mdi.mdi-close, body.display .modal-container tr.item-list li.entity .btn-del i.mdi.mdi-close {
  position: relative;
  top: -7px;
  right: 7px;
}
body.display .modal-container tr.item-header .btn-del, body.display .modal-container tr.item-list .btn-del {
  padding: 0;
}
body.display .modal-container tr.item-header {
  background: rgba(125, 255, 155, 0.1);
}
body.display .modal-container tr.item-list td.w {
  overflow: hidden;
}
body.display .modal-container tr.item-list.even {
  background: rgba(255, 255, 255, 0.1);
}
body.display .modal-container .button-group {
  position: absolute;
  right: -25px;
  top: -10px;
}
body.display .modal-container .button-group button.btn.btn-sm.btn-success {
  padding: 1px 8px;
  margin: 0;
}
body.display .modal-container a.paginate_button {
  display: inline-flex;
  background: #04c9b7;
  width: 24px;
  height: 24px;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  margin-right: 0.65rem;
  font-size: 15px;
  cursor: pointer;
}
body.display .modal-container .lock-btn.lock i.mdi-lock-open {
  display: none;
}
body.display .modal-container .lock-btn.unlock i.mdi-lock {
  display: none;
}
body.display .modal-container textarea {
  overflow: hidden;
}
body.display .modal-container .add-wrap {
  width: 740px;
  margin: 40px;
  height: 820px;
  font-size: 14px;
}
body.display .modal-container .add-wrap span.plus-btn {
  position: absolute;
  right: -20px;
  top: 10px;
}
body.display .modal-container .add-wrap .display-id {
  position: absolute;
  top: -30px;
}
body.display .modal-container .add-wrap div.h {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}
body.display .modal-container .add-wrap .label-wrap {
  display: flex;
}
body.display .modal-container .add-wrap textarea.form-control {
  min-height: 35px;
  width: calc(100% - 16px);
}
body.display .modal-container .add-wrap label {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
}
body.display .modal-container .add-wrap .r {
  justify-content: flex-end;
  display: inline-flex;
}
body.display .modal-container .add-wrap .l {
  justify-content: flex-start;
  display: inline-flex;
}
body.display .modal-container .add-wrap .l > span {
  margin-right: 6px;
}
body.display .modal-container .add-wrap .db-sel-wrap {
  width: 100%;
}
body.display .modal-container .add-wrap .db-sel-wrap input.form-control {
  width: calc(100% - 60px);
}
body.display .modal-container .add-wrap .block-wrap {
  width: 100%;
}
body.display .modal-container .add-wrap .block-wrap select {
  width: calc(100% - 50px);
}
body.display .modal-container .add-wrap .add-btn {
  cursor: pointer;
}
body.display .modal-container .add-wrap .dataset-link span.badge {
  cursor: pointer;
}
body.display .modal-container .add-wrap .btn-wrap.col-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0px;
  z-index: 2;
  width: 40px;
}
body.display .modal-container .add-wrap .btn-up-down {
  display: flex;
  flex-direction: column;
}
body.display .modal-container .add-wrap .btn-up-down i {
  cursor: pointer;
}
body.display .modal-container .add-wrap .btn-up-down.less i {
  position: relative;
}
body.display .modal-container .add-wrap .btn-up-down.less i.mdi-menu-up {
  top: 2px;
}
body.display .modal-container .add-wrap .btn-up-down.less i.mdi-menu-down {
  top: -2px;
}
body.display .modal-container .add-wrap .where, body.display .modal-container .add-wrap .off-limit {
  height: 33px;
  position: relative;
  top: -1px;
}
body.display .modal-container .add-wrap .conn-string {
  display: inline-flex;
}
body.display .modal-container .add-wrap .conn-string .btn-conn {
  margin-left: 6px;
  width: 32px;
  height: 32px;
  position: relative;
  top: 1px;
}
body.display .modal-container .add-wrap .conn-string .btn-conn i {
  position: relative;
  left: -11px;
  font-size: 1.5rem;
  top: -8px;
}
body.display .modal-container .add-wrap .additional-wrap {
  width: 100%;
  display: flex;
}
body.display .modal-container .add-wrap .additional-wrap .item {
  width: 100%;
  display: flex;
}
body.display .modal-container .add-wrap .additional-wrap .item > div {
  font-size: 12px;
  font-style: italic;
}
body.display .modal-container .add-wrap .additional-wrap > div {
  align-items: center;
}
body.display .modal-container .add-wrap .btn-layout_type {
  cursor: pointer;
}
body.display .modal-container .add-wrap .divider {
  position: relative;
  z-index: 1;
}
body.display .modal-container .add-wrap .divider:before {
  border-top: 2px solid #dfdfdf;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}
body.display .modal-container .add-wrap .divider .locate {
  position: relative;
  left: calc(50% - 80px);
  background: #f7f7f7;
  display: inline;
  padding: 0px 20px;
}
body.display .modal-container .add-wrap .divider .locate > span {
  cursor: pointer;
}
body.display .modal-container .output-window {
  position: absolute;
  left: calc(50% + 410px);
  top: 0px;
}
body.display .modal-container .output-window .close-btn {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 4px;
}
body.display .modal-container .output-window .output {
  width: 540px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background: paleturquoise;
  height: 450px;
}
body.display .modal-container .output-window .output ul {
  list-style: none;
  padding-top: 40px;
}
body.display .modal-container .output-window .output ul.varients {
  padding: 2rem 1rem;
}
body.display .modal-container .output-window .output ul span.btn-del, body.display .modal-container .output-window .output ul span.btn-save {
  cursor: pointer;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}
body.display .modal-container .output-window .output ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.display .modal-container .output-window .output ul li.var {
  padding: 10px;
  border: 1px dashed;
}
body.display .modal-container .output-window .output ul li .db-opt {
  width: calc(100% - 80px);
  display: flex;
}
body.display .modal-container .output-window .output ul li .db-opt input {
  padding: 6px 8px;
}
body.display .modal-container .output-window .result-button-wrapper {
  height: 35px;
}
body.display .modal-container .run .l {
  text-align: left;
}
body.display .modal-container .run .run-wrap {
  width: 660px;
  margin: 70px 100px 40px 60px;
  height: 552px;
  font-size: 14px;
}
body.display .modal-container .run .run-wrap span.plus-btn {
  position: absolute;
  right: -20px;
  top: 10px;
}
body.display .modal-container .run .run-wrap .cl {
  height: 360px;
  overflow-y: auto;
}
body.display .modal-container .run .run-wrap .cl .clc {
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  min-height: 80%;
  overflow: auto;
}
body.display .modal-container .run .run_history {
  position: absolute;
  top: -5px;
  cursor: pointer;
}
body.display .modal-container .run .run-wrap div.h {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}
body.display .modal-container .run .row.h select {
  position: relative;
  top: 1px;
  padding: 8px;
}
body.display .modal-container .run .col-9 div {
  padding: 0;
}
body.display .modal-container .run .col-9 div:first-child, body.display .modal-container .run .col-9 div:last-child {
  padding: 0;
}
body.display .modal-container .run .param-wrap {
  height: 100px;
  align-items: start !important;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.display .modal-container .run .btns > i {
  cursor: pointer;
  margin: 8.5px 0;
  position: relative;
  top: -5px;
}
body.display .modal-container .run .page-opt, body.display .modal-container .run .page-opt * {
  font-size: 12px !important;
  margin-top: 12px;
  display: block;
}
body.display .modal-container .run .rule-info {
  padding: 0;
}
body.display .modal-container .run .rule-info ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
}
body.display .modal-container .run .rule-info ul li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
body.display .modal-container .run .rule-info ul li.rule_name {
  width: 60%;
}
body.display .modal-container .run .rule-info ul li.http_method {
  width: 20%;
}
body.display .modal-container .run .rule-info ul li.av_param {
  justify-content: flex-end;
  width: 20%;
}
body.display .modal-container .run .rule-info ul li .btn-parsing-object {
  cursor: pointer;
}
body.display .modal-container .run textarea.form-control {
  min-height: 35px;
}
body.display .modal-container .run .page-param {
  min-width: 500px;
}
body.display .modal-container .run .save_type_label {
  position: relative;
  top: 5px;
  left: 20px;
  font-size: 12px;
  color: #999;
}
body.display .modal-container .run .paging-preview {
  position: absolute;
  left: calc(50% - 932px);
  top: 0px;
}
body.display .modal-container .run .paging-preview .paging-list {
  width: 550px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: paleturquoise;
  height: 550px;
}
body.display .modal-container .run .paging-preview .paging-list ul {
  list-style: none;
  padding-top: 10px;
}
body.display .modal-container .run .paging-preview .paging-list ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.display .modal-container .run .progress-bar {
  position: absolute;
  width: calc(100% - 60px);
  left: 30px;
  bottom: -42px;
}
body.display .modal-container .run .progress-bar .progress {
  border-radius: 0;
  justify-content: flex-end;
}
body.display .modal-container .run .progress-bar .progress span.progress-label {
  color: navy;
  font-weight: 600;
  font-size: 13px;
}
body.display.scene .use_effect-wrap {
  position: relative;
  margin-top: 1rem;
  margin-left: -2rem;
}
body.display.scene .form-check-input {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
  vertical-align: top;
  background-color: var(--vz-input-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid var(--vz-input-check-border);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  print-color-adjust: exact;
}
body.display.scene .form-switch-lg {
  padding-left: 2.75rem;
  min-height: 28px;
  line-height: 28px;
}
body.display.scene .form-check {
  margin-top: 0.2em;
  position: relative;
  text-align: left;
}
body.display.scene .form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
body.display.scene .form-switch .form-check-input {
  width: 2em;
  margin-left: -2.5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
body.display.scene .form-check-input:checked {
  background-color: #25a0e2;
  border-color: #25a0e2;
}
body.display.scene .form-switch-lg .form-check-input {
  width: 48px;
  height: 24px;
  left: -0.75rem;
  position: relative;
}
body.display.scene.playlist .modal-container .table-header .th {
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 600;
}
body.display.scene.playlist .modal-container .table-header .th:nth-child(1) {
  width: 100px;
}
body.display.scene.playlist .modal-container .table-header .th:nth-child(2) {
  flex-grow: 1;
}
body.display.scene.playlist .modal-container .table-header .th:nth-child(3) {
  width: 80px;
}
body.display.scene.playlist .modal-container .table-header .th:nth-child(4) {
  width: 60px;
}
body.display.scene.playlist .modal-container .list-group-item {
  display: flex;
  background: unset;
  border: unset;
  border-top: 1px solid #fff;
  margin-bottom: unset;
  padding: 0;
}
body.display.scene.playlist .modal-container .list-group-item:last-child {
  border-bottom: 1px solid #fff;
}
body.display.scene.playlist .modal-container .list-group-item img.thumb {
  border-radius: 2px;
}
body.display.scene.playlist .modal-container .list-group-item span.content_type {
  background-color: mediumvioletred;
  height: 43px;
  width: 80px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
body.display.scene.playlist .modal-container .pt-page-2 .list-group-item span.content_type {
  background-color: navy;
}

body.display.scene.playlist .modal-container .list-group-item .td {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 400;
  font-size: 13px;
}
body.display.scene.playlist .modal-container .list-group-item .td a > i {
  font-size: 16px;
}
body.display.scene.playlist .modal-container .list-group-item .td:nth-child(1) {
  width: 126px;
}
body.display.scene.playlist .modal-container .list-group-item .td:nth-child(2) {
  flex-grow: 1;
}
body.display.scene.playlist .modal-container .list-group-item .td:nth-child(3) {
  width: 80px;
}
body.display.scene.playlist .modal-container .list-group-item .td:nth-child(4) {
  width: 60px;
}
body.display.scene.playlist .modal-container .btn-purple {
  background-color: #b7abd1;
  color: #fff;
}
body.display.scene.playlist .modal-container .paging-preview {
  position: absolute;
  left: calc(50% - 950px);
  top: 0px;
}
body.display.scene.playlist .modal-container .paging-preview .close-btn {
  position: absolute;
  z-index: 2;
  right: 24px;
  cursor: pointer;
}
body.display.scene.playlist .modal-container .paging-preview .paging-list {
  width: 470px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: paleturquoise;
  height: 780px;
}
body.display.scene.playlist .modal-container .paging-preview .paging-list ul {
  list-style: none;
  padding-top: 10px;
}
body.display.scene.playlist .modal-container .paging-preview .paging-list ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.display.scene.playlist .modal-container .settings-window {
  position: absolute;
  left: calc(50% + 480px);
  top: 0px;
  width: 470px;
  height: 780px;
  background: lavender;
  font-size: 0.8em;
}
body.display.scene.playlist .modal-container .settings-window .close-btn {
  position: absolute;
  z-index: 2;
  right: 8px;
  top: 4px;
}
body.display.scene.playlist .modal-container .settings-window .param-wrap {
  overflow-y: auto;
  height: 140px;
}
body.display.scene.playlist .modal-container .settings-window .param-wrap .abs.toggle-paging {
  position: absolute;
  top: 96px;
  left: 20px;
}
body.display.scene.playlist .modal-container .settings-window .param-wrap .abs.toggle-paging i {
  cursor: pointer;
}
body.display.scene.playlist .modal-container .settings-window .param-wrap .abs.btn-save {
  position: absolute;
  top: 96px;
  left: 48px;
}
body.display.scene.playlist .modal-container .settings-window .param-wrap .abs.btn-save i {
  cursor: pointer;
}
body.display.scene.playlist .modal-container .settings-window .page-opt, body.display.scene.playlist .modal-container .settings-window .page-opt * {
  font-size: 12px !important;
  margin-top: 12px;
  display: block;
}
body.display.scene.playlist .modal-container .settings-window .page-param div {
  padding: 0;
}
body.display.scene.playlist .modal-container .settings-window .row.varient {
  overflow-y: auto;
  height: 320px;
}
body.display.scene.playlist .modal-container .settings-window .var-name {
  left: 20px;
  margin-top: 8px;
}
body.display.scene.playlist .modal-container .settings-window div.cc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.display.scene.playlist .modal-container .settings-window .btns > i {
  cursor: pointer;
  margin: 9.9px 0;
  position: relative;
  top: -5px;
}
body.display.scene.playlist .modal-container select.form-control {
  position: relative;
  top: 1px;
  height: 33px;
}
body.display.scene.playlist .modal-container textarea.r1 {
  height: 35px;
}
body.display.scene.playlist .modal-container ul {
  list-style-type: none;
}
body.display.scene .content-type {
  height: 60px;
}
body.display.scene .content-type > div {
  flex-wrap: wrap;
}
body.display.scene .content-type > div > button {
  width: 25%;
  padding: 5px 0;
  font-size: 0.7em;
}
body.display.run {
  margin: 0;
}
body.display.run .device_list_wrap {
  position: absolute;
  right: 0;
  cursor: pointer;
  z-index: 999;
}
body.display.run ul.device_list {
  display: flex;
  list-style-type: none;
  margin: 0;
  z-index: 999;
}
body.display.run .device_id {
  position: absolute;
  right: 0;
  cursor: pointer;
  z-index: 999;
}
body.display.run .btn-back {
  cursor: pointer;
  opacity: 0.3;
}
body.display.run .btn-device {
  background-color: palegreen;
  width: 25px;
  height: 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #00A;
  border: 2px dashed #099;
}
body.display.run .device_list li .btn-device {
  border-left: 0;
}
body.display.run .device_list li:first-child {
  border-left: 2px dashed #099;
}
body.display.run .eye_icon {
  position: absolute;
  right: 0.5em;
  cursor: pointer;
  opacity: 0.2;
  z-index: 999;
}
body.display.run .slot-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#scene-modal.playlist-modal .modal-container {
  width: 960px !important;
  height: 780px !important;
  padding: 0;
  background: #D3CCE3;
  background: linear-gradient(to right, #E9E4F0, #D3CCE3);
}
.device-modal .modal-container {
  width: 1060px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.device-modal.add .modal-container {
  width: 820px !important;
  height: 900px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.device-modal.play .modal-container {
  width: 820px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}

body .quick-view-wrap {
  display: none;
  position: fixed;
  height: 20vh;
  width: 100vw;
  top: 80vh;
  left: 0;
  z-index: 9999;
  background: #1e1e1e;
}
body .quick-view-wrap.active {
  display: block;
}
body .quick-view-wrap .quick-view-tabs {
  width: calc(100% - 440px);
  margin: 0 auto;
}
body .quick-view-wrap .quick-view-tabs li.nav-item a {
  background: #1e1e1e;
  border-color: #383838;
  color: #fff8e8;
  border: unset;
  border-bottom: 1px solid #383838;
}
body .quick-view-wrap .quick-view-tabs li.nav-item a.active {
  border-left: 1px solid #383838;
  border-right: 1px solid #383838;
  color: #79b9e2;
  background: rgba(255, 255, 255, 0.05);
}
body .quick-view-wrap .quick-view-tabs li:first-child a {
  border-left: 1px solid #383838 !important;
}
body .quick-view-wrap .quick-view-tabs li:last-child a {
  border-right: 1px solid #383838 !important;
}
body .quick-view-wrap .quick-view {
  width: calc(100% - 440px);
  margin: 0 auto;
  height: calc(100% - 52px);
}
body .quick-view-wrap .quick-view ul.quick-view-items {
  display: flex;
  height: 90%;
  -moz-column-gap: 10px;
       column-gap: 10px;
  list-style: none;
  padding: 0;
  align-items: flex-start;
  flex-wrap: wrap;
  transform: scale(0.84);
}
body .quick-view-wrap .quick-view ul.quick-view-items li.quick-view-item {
  display: inline-flex;
  width: 220px;
  color: #fff;
  margin-top: 0.25rem;
  overflow: hidden;
}
body .quick-view-wrap .quick-view ul.quick-view-items li.quick-view-item:hover {
  background-color: #33a;
  border-radius: 2px;
  cursor: pointer;
}
body .quick-view-wrap .quick-view ul.quick-view-items li.quick-view-item div.left-qv {
  width: 40px;
}
body .quick-view-wrap .quick-view ul.quick-view-items li.quick-view-item div.left-qv span.number {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border: 1px solid;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
}
body .quick-view-wrap .quick-view ul.quick-view-items li.quick-view-item a {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (min-width: 1200px) {
  body.interactive .container-scroller .content-wrapper {
    max-width: 100% !important;
  }
}
body.interactive .editor {
  overflow: hidden;
}
body.interactive .highlighted .cm-editor {
  border: 2px solid #FEB868;
}
body.interactive .px1 {
  width: 1px;
  height: 1px;
  border: 0 !important;
}
body.interactive .content {
  display: flex;
  flex-direction: row;
}
body.interactive .content.left .a-deck.pane {
  width: calc(100% - 285px) !important;
}
body.interactive .content.left .b-deck.pane {
  width: 200px !important;
}
body.interactive .content.right .a-deck.pane {
  width: 200px !important;
}
body.interactive .content.right .b-deck.pane {
  width: calc(100% - 285px) !important;
}
body.interactive .content.top .pane.bottom {
  height: 40px !important;
}
body.interactive .content.top .pane.top {
  height: calc(100% - 50px) !important;
}
body.interactive .content.bottom .pane.top {
  height: 40px !important;
}
body.interactive .content.bottom .pane.bottom {
  height: calc(100% - 50px) !important;
}
body.interactive .content-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}
body.interactive .history .r {
  text-align: right;
}
body.interactive .history span[class*=btn-] {
  cursor: pointer;
}
body.interactive .history .icon-wrapper {
  display: flex;
  justify-content: space-evenly;
}
body.interactive .history .icon-wrapper i {
  cursor: pointer;
}
body.interactive .history .icon-wrapper .adj-font-size.active:before {
  background: black;
  color: white;
  border-radius: 3px;
}
body.interactive .history .btn-new {
  position: absolute;
  right: 10px;
  top: -4px;
  cursor: pointer;
}
body.interactive .history .btn-sync-font {
  position: absolute;
  right: -14px;
  top: 6px;
  padding: 4px;
  border-radius: 50%;
  height: 26px;
  width: 26px;
  color: white;
  cursor: pointer;
}
body.interactive .history .btn-sync-font:before {
  position: relative;
  top: -6px;
}
body.interactive .history .fus {
  justify-content: space-between;
}
body.interactive .history .toggle-panel-wrap {
  width: 80px;
}
body.interactive .history .toggle-panel-wrap span.toggle-panel-for-upload, body.interactive .history .toggle-panel-wrap span.toggle-find-mode {
  min-width: 23px;
  display: inline-block;
  text-align: right;
  font-size: 10px;
  justify-content: space-evenly;
  cursor: pointer;
}
body.interactive .history .toggle-panel-wrap span.toggle-panel-for-upload.active, body.interactive .history .toggle-panel-wrap span.toggle-find-mode.active {
  font-weight: bold;
  text-decoration: underline;
}
body.interactive .history div {
  font-size: 12px;
}
body.interactive .history .sel-table-info {
  position: absolute;
  margin-top: -24px;
  left: 50px;
  color: deeppink;
  font-weight: 600;
}
body.interactive .history .tab-wrapper > i {
  font-size: 18px;
}
body.interactive .history .tab-wrapper > i.active {
  opacity: 1;
}
body.interactive .history .tab-wrapper > i:not(.active) {
  opacity: 0.5;
  cursor: pointer;
}
body.interactive .history .tab-wrapper span.active {
  opacity: 1;
}
body.interactive .history .tab-wrapper span:not(.active) {
  opacity: 0.5;
  cursor: pointer;
}
body.interactive .history .tab-wrapper span.comma {
  font-size: 3rem;
  line-height: 0;
  letter-spacing: 0;
  display: inline-flex;
  margin: 0;
  padding: 0;
  font-family: fantasy !important;
  position: relative;
  top: -10px;
  left: 3px;
}
body.interactive .history .tab-wrapper span.tab {
  font-size: 1rem;
  line-height: 0;
  letter-spacing: -2.4px;
  display: inline-flex;
  margin: 0;
  padding: 0;
  position: relative;
  top: -5px;
  left: 10px;
}
body.interactive .history .btn-search {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  display: flex;
  align-items: center;
  color: white;
}
body.interactive .b-deck {
  padding: 0;
}
body.interactive .b-deck .row {
  align-items: center;
}
body.interactive .b-deck.right {
  position: relative;
}
body.interactive .b-deck .gutter {
  width: 8px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: col-resize;
  background: gainsboro;
  z-index: 1;
}
body.interactive .b-deck .icon-wrapper {
  position: relative;
  top: -12px;
  cursor: pointer;
}
body.interactive .b-deck .icon-wrapper > i {
  margin-right: 6px;
}
body.interactive .b-deck .icon-sub-wrapper {
  position: absolute;
  top: 45px;
  left: 20px;
}
body.interactive .b-deck .icon-sub-wrapper span {
  cursor: pointer;
  font-size: 10px;
  padding: 2px 5px;
}
body.interactive .b-deck .icon-sub-wrapper span:hover {
  color: #fff;
  background-color: #03a395;
  border-color: #039789;
}
body.interactive .b-deck .icon-sub-wrapper span:not(:first-child) {
  margin-left: 4px;
}
body.interactive .b-deck .icon-sub-wrapper .grid-option-wrapper {
  display: flex;
  position: relative;
  left: 50px;
  top: 3px;
}
body.interactive .b-deck .icon-sub-wrapper .grid-option-wrapper input.form-control {
  padding: 0;
  height: 24px;
}
body.interactive .b-deck .icon-sub-wrapper .grid-option-wrapper span.x {
  font-size: 1.2rem;
  line-height: 15px;
  margin-left: 0;
}
body.interactive .b-deck .icon-sub-wrapper .grid-option-wrapper button {
  padding: 0 8px !important;
  margin-left: 8px;
  height: 24px;
}
body.interactive .b-deck .icon-sub-wrapper .grid-option-wrapper i {
  position: relative;
  top: -3px;
}
body.interactive .b-deck .db-type span {
  margin-left: 6px;
  cursor: pointer;
}
body.interactive .b-deck .dataset-item-wrap ul.dataset-item {
  display: flex;
  list-style: none;
  align-items: center;
  margin-bottom: 5px;
  padding: 0;
  width: 340px;
}
body.interactive .b-deck .dataset-item-wrap ul.dataset-item li {
  padding: 0;
}
body.interactive .b-deck .dataset-item-wrap ul.dataset-item li input.form-control {
  padding: 6px;
}
body.interactive .b-deck .dataset-item-wrap ul.dataset-item li:not(:first-child) {
  margin-left: 5px;
}
body.interactive .b-deck .dataset-item-wrap .save-btn button {
  height: 32px;
  width: 50px;
  padding: 0 6px;
  font-size: 14px;
}
body.interactive .b-deck .btn-wrap.col-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10px;
  z-index: 2;
}
body.interactive .b-deck .btn-up-down {
  display: flex;
  flex-direction: column;
}
body.interactive .b-deck .btn-up-down i {
  cursor: pointer;
}
body.interactive .b-deck .btn-up-down.less i {
  position: relative;
}
body.interactive .b-deck .btn-up-down.less i.mdi-menu-up {
  top: 2px;
}
body.interactive .b-deck .btn-up-down.less i.mdi-menu-down {
  top: -2px;
}
body.interactive .b-deck .where, body.interactive .b-deck .off-limit {
  height: 37px;
}
body.interactive .b-deck .divider.more {
  position: relative;
  z-index: 1;
  width: 100%;
}
body.interactive .b-deck .divider.more:before {
  border-top: 1px solid #d9e2ef;
  content: "";
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}
body.interactive .b-deck .divider.more .locate {
  position: absolute;
  left: calc(50% - 35px);
  top: -13px;
}
body.interactive .b-deck .divider.more .locate.start {
  left: 0;
}
body.interactive .b-deck .divider.more .locate.start .mdi-lock {
  color: #999;
}
body.interactive .b-deck .divider.more .locate.end {
  left: calc(100% - 40px);
}
body.interactive .b-deck .divider.more .locate.end .mdi {
  color: #999;
}
body.interactive .b-deck .tagsinput {
  margin-left: 15px;
  margin-right: 15px;
  width: 100%;
  min-height: 75%;
  height: 75%;
}
body.interactive .b-deck .ref_board {
  overflow-y: auto;
}
body.interactive .b-deck .ref_board .csveditor {
  border-top: 1px solid #eee;
}
body.interactive .b-deck .ref_board li {
  height: 30px !important;
  font-size: 0.8rem;
}
body.interactive .b-deck .tools-upper textarea {
  position: absolute;
  top: 0;
  left: calc(100% - 20px);
  width: 20px;
  height: 20px;
  overflow: hidden;
}
body.interactive .toggle-expander {
  height: 34px;
  position: absolute;
  top: 0;
  width: calc(100% - 183px);
  background: white;
  z-index: 1;
  left: 47px;
}
body.interactive .pos-rel {
  position: relative;
}
body.interactive .toggle-wrap {
  z-index: 1;
  position: absolute;
  background: white;
  color: #000;
  height: 36px;
  border: 1px solid #fff;
  cursor: pointer;
  display: flex;
}
body.interactive .toggle-wrap .invert {
  background: #000;
  color: white;
}
body.interactive .toggle-wrap .lock-toggle {
  margin-left: 6px;
  border-left: 3px solid #ccc;
}
body.interactive .toggle-wrap .lock-toggle i.btn-lock {
  border-left: 1px solid #fff;
}
body.interactive .toggle-wrap .lock-toggle.active {
  background: #000;
  color: white;
}
body.interactive .toggle-wrap.render-toggle {
  right: 0;
}
body.interactive .toggle-wrap.view-mode-toggle {
  right: 4px;
}
body.interactive .toggle-wrap .panel-mode-wrap {
  display: inline;
  position: relative;
  left: 0;
  top: 2px;
}
body.interactive .toggle-wrap .panel-mode-wrap > div {
  display: inline-flex;
  cursor: pointer;
  z-index: 5;
}
body.interactive .toggle-wrap .panel-mode-wrap > div i {
  font-size: 24px;
  opacity: 0.2;
}
body.interactive .toggle-wrap .panel-mode-wrap > div i.l-overlay {
  width: 12px;
  overflow: hidden;
  position: absolute;
  opacity: 0.4;
}
body.interactive .toggle-wrap .panel-mode-wrap > div i.r-overlay {
  width: 12px;
  overflow: hidden;
  position: absolute;
  margin-left: 10px;
  opacity: 0.4;
}
body.interactive .toggle-wrap .panel-mode-wrap > div i.active {
  opacity: 1;
}
body.interactive .toggle-wrap .panel-top-mode-wrap {
  display: inline;
  position: relative;
  left: 0;
  top: 2px;
}
body.interactive .toggle-wrap .panel-top-mode-wrap > div {
  display: inline-flex;
  cursor: pointer;
  z-index: 5;
}
body.interactive .toggle-wrap .panel-top-mode-wrap > div i {
  font-size: 24px;
  opacity: 0.2;
}
body.interactive .toggle-wrap .panel-top-mode-wrap > div i.t-overlay {
  height: 20px;
  overflow: hidden;
  position: absolute;
  opacity: 0.4;
}
body.interactive .toggle-wrap .panel-top-mode-wrap > div i.b-overlay {
  height: 20px;
  overflow: hidden;
  position: absolute;
  margin-top: 10px;
  opacity: 0.4;
}
body.interactive .toggle-wrap .panel-top-mode-wrap > div i.active {
  opacity: 1;
}
body.interactive .toggle-wrap i.font-bolder:before {
  font-weight: 600;
}
.d-deck body.interactive .toggle-wrap {
  right: 0;
}
body.interactive .size-wrap {
  position: absolute;
  left: calc(100% - 222px);
  top: 36px;
  display: flex;
  z-index: 2;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: #000;
}
body.interactive .size-wrap ul {
  display: inline-flex;
  justify-content: space-evenly;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  list-style: none;
  width: 300px;
}
body.interactive .size-wrap ul > * {
  color: white;
}
body.interactive .size-wrap ul li {
  cursor: pointer;
}
body.interactive .size-wrap ul li:hover {
  text-decoration: underline;
}
body.interactive .size-wrap ul li.active {
  background: yellowgreen;
  padding: 0 2px;
}
body.interactive .grid-wrap, body.interactive .device-wrap {
  position: absolute;
  left: calc(100% - 162px);
  top: 36px;
  display: flex;
  z-index: 2;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
body.interactive .grid-wrap table.grid-layout, body.interactive .device-wrap table.grid-layout {
  width: 20px;
  height: 20px;
  border-collapse: collapse;
  color: white;
  border: 1px solid white;
  table-layout: fixed;
  background: #000;
}
body.interactive .grid-wrap table.grid-layout td, body.interactive .device-wrap table.grid-layout td {
  border: 1px solid white;
  text-align: center;
  height: 20px;
  width: 20px;
  cursor: pointer;
}
body.interactive .grid-wrap table.grid-layout td span.vs, body.interactive .device-wrap table.grid-layout td span.vs {
  font-size: 12px;
  position: absolute;
  top: 2px;
  left: 4px;
}
body.interactive .grid-wrap table.grid-layout td span.rs, body.interactive .device-wrap table.grid-layout td span.rs {
  position: absolute;
  font-size: 12px;
  margin-top: -10px;
  margin-left: -6px;
}
body.interactive .grid-wrap .apply-btn-wrap, body.interactive .device-wrap .apply-btn-wrap {
  width: calc(100% - var(--remain-width));
  display: inline-flex;
  justify-content: flex-end;
  min-width: 120px;
}
body.interactive .grid-wrap .apply-btn-wrap select.form-control.vs, body.interactive .device-wrap .apply-btn-wrap select.form-control.vs {
  padding: 0;
  font-size: 12px;
  height: 21px;
  max-width: 60px;
}
body.interactive .grid-wrap .apply-btn-wrap span, body.interactive .device-wrap .apply-btn-wrap span {
  font-size: 14px;
  color: white;
  font-weight: bold;
  border: 1px solid white;
  border-top: 0;
}
body.interactive .grid-wrap .btn-apply, body.interactive .grid-wrap .btn-clear, body.interactive .device-wrap .btn-apply, body.interactive .device-wrap .btn-clear {
  border-radius: 0;
  padding: 0;
  display: inline-block;
  width: 40px;
  min-width: 40px;
  background: white;
  color: white;
  height: 22px;
  font-size: 12px;
}
body.interactive .grid-wrap.active .btn-apply, body.interactive .grid-wrap.active .btn-clear, body.interactive .device-wrap.active .btn-apply, body.interactive .device-wrap.active .btn-clear {
  color: #000;
}
body.interactive .device-wrap {
  left: calc(100% - 192px);
}
body.interactive .device-wrap td {
  cursor: pointer;
}
body.interactive .device-wrap td.disable {
  background: silver;
}
body.interactive .device-wrap td:hover {
  background: silver;
}
body.interactive .device-wrap .apply-btn-wrap select.form-control.vs {
  max-width: 72px;
}
body.interactive .pane {
  display: block;
}
body.interactive .pane.left {
  width: var(--width);
  padding: 0;
}
body.interactive .pane.center {
  width: var(--width);
  left: 228px;
}
body.interactive .pane.bottom {
  height: var(--height);
}
body.interactive .pane.right {
  height: var(--height);
  width: var(--width);
  left: var(--left);
}
body.interactive .pane.right:before {
  display: block;
  content: "";
  width: 10px;
  height: calc(100% - 2px);
  position: absolute;
  top: 1px;
  left: 2px;
  margin-left: -1.5px;
  border-left: 3px solid #ddd;
  border-right: 3px solid #ddd;
  z-index: 1;
}
body.interactive .pane.right:hover:before {
  border-color: #aaa;
}
body.interactive .pane.bottom:before {
  display: block;
  content: "";
  height: 10px;
  position: relative;
  top: 1px;
  left: 2px;
  margin-top: -1.5px;
  border-top: 3px solid #ddd;
  border-bottom: 3px solid #ddd;
  z-index: 1;
}
body.interactive .pane.bottom:hover:before {
  border-color: #aaa;
}
body.interactive .pane .full-height {
  height: var(--height);
}
body.interactive .v-wrap {
  height: var(--height);
}
body.interactive .a-v {
  height: var(--height);
  overflow: hidden;
}
body.interactive .b-v {
  overflow: hidden;
}
body.interactive footer.footer {
  display: none;
}
body.interactive .content-wrapper {
  margin: 0 !important;
  padding: 30px 0 0 0 !important;
}
body.interactive .content-wrapper.py-0 {
  padding: 0 0 0 0 !important;
}
@media (min-width: 1920px) {
  body.interactive .container-scroller .content-wrapper {
    max-width: 100%;
  }
}
body.interactive .menubar {
  margin-bottom: 1rem;
  transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
}
body.interactive .menubar.is-hidden {
  visibility: hidden;
  opacity: 0;
}
body.interactive .menubar.is-focused {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.2s, opacity 0.2s;
}
body.interactive .menubar__button {
  vertical-align: middle;
  width: 1.8rem;
  font-weight: bold;
  display: inline-flex;
  background: transparent;
  border: 0;
  color: #000;
  padding: 0.2rem 0.5rem;
  margin-right: 0.2rem;
  border-radius: 3px;
  cursor: pointer;
}
body.interactive .menubar__button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
body.interactive .menubar__button.is-active {
  background-color: rgba(0, 0, 0, 0.1);
}
body.interactive .menubar spanbody.interactive .menubar__button {
  font-size: 13.3333px;
}
body.interactive .menububble {
  position: absolute;
  display: flex;
  z-index: 20;
  background: #000;
  border-radius: 5px;
  padding: 0.3rem;
  margin-bottom: 0.5rem;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
}
body.interactive .menububble.is-active {
  opacity: 1;
  visibility: visible;
}
body.interactive .menububble__button {
  display: inline-flex;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 0.2rem 0.5rem;
  margin-right: 0.2rem;
  border-radius: 3px;
  cursor: pointer;
}
body.interactive .menububble__button:last-child {
  margin-right: 0;
}
body.interactive .menububble__button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
body.interactive .menububble__button.is-active {
  background-color: rgba(255, 255, 255, 0.2);
}
body.interactive .menububble__form {
  display: flex;
  align-items: center;
}
body.interactive .menububble__input {
  font: inherit;
  border: none;
  background: transparent;
  color: #fff;
}
body.interactive .tiptap-wrapper, body.interactive .editor {
  height: 100%;
}
body.interactive .tiptap-wrapper .btn-cmd-wrapper, body.interactive .editor .btn-cmd-wrapper {
  width: calc(100% - 130px);
  margin-left: 130px;
}
body.interactive .button {
  font-weight: bold;
  display: inline-flex;
  background: transparent;
  border: 0;
  color: #000;
  padding: 0.2rem 0.5rem;
  margin-right: 0.2rem;
  border-radius: 3px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
}
body.interactive .button:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
body.interactive .message {
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  font-style: italic;
}
body.interactive .icon {
  position: relative;
  width: 100%;
  height: 100%;
}
body.interactive .icon.has-align-fix {
  top: -0.1rem;
}
body.interactive .gjs-cv-canvas {
  top: 40px;
  width: 100%;
  height: 100%;
}
body.interactive .modal-container .id-label {
  position: absolute;
  margin-top: -28px;
  margin-left: -28px;
  font-size: 0.8em;
}
body.interactive .modal-container a.modal-close, body.interactive .modal-container a.modal-expand {
  position: absolute;
  right: 23px;
  top: 0;
  font-size: 1rem;
  color: #000;
}
body.interactive .modal-container a.modal-expand {
  right: 43px;
}
body.interactive .modal-container .frame-list .add-wrap {
  height: 760px;
}
body.interactive .modal-container .add-wrap {
  padding: 40px;
  overflow: auto;
}
body.interactive .modal-container .add-wrap .plus i {
  cursor: pointer;
}
body.interactive .modal-container .add-wrap .btn-del {
  position: absolute;
  left: -10px;
  top: 7px;
}
body.interactive .modal-container .add-wrap .btn-del i {
  cursor: pointer;
}
body.interactive .modal-container .add-wrap .row {
  flex-grow: 1;
}
body.interactive .modal-container .result-toggle-wrap .item-header {
  height: 40px;
}
body.interactive .modal-container .result-toggle-wrap .table td {
  padding: 6px 8px;
  height: 34px;
  overflow: hidden;
}
body.interactive .modal-container .result-toggle-wrap .item-list .entity.f {
  display: inline-flex;
  width: 100%;
}
body.interactive .modal-container .result-toggle-wrap .item-list .entity.f span {
  margin: 0 auto;
}
body.interactive .modal-container .result-toggle-wrap .item-list .entity.f span.btn-load {
  cursor: pointer;
}
body.interactive .modal-container .result-toggle-wrap .item-list i {
  cursor: pointer;
}
body.interactive .modal-container .result-toggle-wrap .item-list.backend .entity {
  color: #CA5B86;
}
body.interactive .modal-container .rev-list-wrap {
  width: 25%;
  width: 350px;
}
body.interactive .modal-container .rev-list-wrap span.rev-ver {
  min-width: 84px;
}
body.interactive .modal-container .rev-list-wrap .rev-play {
  position: absolute;
  margin-top: -40px;
  cursor: pointer;
}
body.interactive .modal-container .is_expand .change-log {
  height: unset !important;
}
body.interactive .modal-container .change-log {
  width: calc(100% - 350px);
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 820px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
body.interactive .modal-container .change-log div {
  flex: 1;
}
body.interactive .modal-container .change-log div .d2h-wrapper {
  max-height: 660px;
  overflow-y: auto;
  overflow-x: hidden;
}
body.interactive .modal-container .rev-play-wrap {
  width: calc(100% - 350px);
  display: flex;
  height: 820px;
}
body.interactive .modal-container .tab-caption {
  position: absolute;
  margin-top: -30px;
  display: inline-flex;
}
body.interactive .modal-container .tab-caption span {
  display: inline-block;
}
body.interactive .modal-container .tab-caption .search-box {
  display: flex;
  position: relative;
  top: -6px;
  margin-left: 2rem;
}
body.interactive .modal-container .tab-caption .search-box input {
  width: 200px;
  background: #fff;
  height: 32px;
}
body.interactive .modal-container .tab-caption .search-box button {
  width: 96px;
  padding: 2px;
  margin-left: 6px;
  height: 31px;
}
body.interactive .modal-container .code-search-result {
  height: 800px;
  z-index: 5;
  width: 840px;
  position: absolute;
  background: #fff;
  opacity: 0.85;
  overflow-y: scroll;
}
body.interactive .modal-container .code-search-result ul {
  list-style: none;
  display: flex;
  margin: 0;
}
body.interactive .modal-container .code-search-result ul.head {
  border-bottom: 4px solid #f2f0a2;
  box-sizing: border-box;
  margin: 10px auto 0 auto;
  width: calc(100% - 16px);
}
body.interactive .modal-container .code-search-result ul:not(:first-child) {
  border-top: 1px dashed #f2f0a2;
  box-sizing: border-box;
  margin: 0 auto 0 auto;
  width: calc(100% - 16px);
}
body.interactive .modal-container .code-search-result ul:nth-child(2) {
  border-top: 0;
}
body.interactive .modal-container .code-search-result ul.foot {
  border-bottom: 4px solid #f2f0a2;
  box-sizing: border-box;
  margin: 0 auto 10px auto;
  width: calc(100% - 16px);
  border-top: 0 !important;
}
body.interactive .modal-container .code-search-result ul.body li:not(:first-child) {
  border-left: 1px dashed #f2f0a2;
}
body.interactive .modal-container .code-search-result ul li {
  width: 20%;
  height: 30px;
  align-items: center;
  display: inline-flex;
  justify-content: center;
}
body.interactive .modal-container .code-wrap {
  position: absolute;
  left: 550px;
  width: calc(100% - 550px);
  height: 730px;
  margin-top: 40px;
  z-index: 10;
}
body.interactive .modal-container .code-wrap .ext-tabs {
  position: absolute;
  background: #fff;
  height: 46px;
  margin-left: 35px;
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  border: 1px solid #767676;
}
body.interactive .modal-container .code-wrap .ext-tabs .ext-tab {
  width: 140px;
  text-align: center;
}
body.interactive .modal-container .code-wrap .ext-tabs .ext-tab.active {
  background: #f2f0a2;
  font-weight: 600;
}
body.interactive .modal-container .code-wrap .ext-tabs .btn-close {
  cursor: pointer;
  width: 20px;
  padding-top: 4px;
  margin-right: 6px;
}
body.interactive .modal-container .code-wrap textarea {
  position: relative;
  top: 35px;
  left: 35px;
  width: calc(100% - 50px);
  height: 100% !important;
  border-top: 10px solid #f2f0a2 !important;
}
body.interactive .modal-container .code-wrap textarea.code-text {
  line-height: 31px;
  background-image: -webkit-linear-gradient(left, white 0, transparent 0), -webkit-linear-gradient(right, white 0, transparent 0), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-repeat: repeat-y;
  background-size: 100% 100%, 100% 100%, 100% 31px;
  background-attachment: local;
  padding-left: 16px;
}
body.interactive .modal-container .coding_pattern_popup .row {
  font-size: 0.9rem;
}
body.interactive .modal-container ul.rev-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
body.interactive .modal-container ul.rev-list li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #bcd;
  width: 95%;
}
body.interactive .modal-container ul.rev-list li label.ver-num {
  margin-left: 6px;
}
body.interactive .modal-container ul.rev-list li span.save-time {
  font-size: 0.85em;
  font-style: italic;
  margin-left: 1em;
  margin-right: 1em;
}
body.interactive .modal-container ul.rev-list li span.badge.badge-success {
  margin-right: 4px;
  width: 24px;
  cursor: pointer;
}
body.interactive .modal-container ul.rev-list li span.badge.badge-success i {
  position: relative;
  left: -3px;
}
body.interactive .modal-container ul.rev-list li span.badge.badge-warning {
  cursor: pointer;
}
body.interactive .modal-container ul.page {
  display: flex;
  list-style: none;
  flex-direction: row;
  justify-content: center;
  padding: 0;
  width: 88%;
  margin-top: 0.5rem;
}
body.interactive .modal-container ul.page li {
  margin: 0 6px;
}
body.interactive .modal-container input.form-control::-moz-placeholder {
  color: #999;
}
body.interactive .modal-container input.form-control::placeholder {
  color: #999;
}
body.interactive .modal-container .btn-apply {
  position: relative;
  top: -2px;
  cursor: pointer;
}
body.interactive .modal-container .search-td {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
body.interactive .modal-container .btn-td {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
body.interactive .modal-container .find-snippet {
  height: 760px;
  overflow-y: scroll;
}
body.interactive .modal-container .find-result {
  position: relative;
}
body.interactive .modal-container .find-result .add-wrap {
  max-height: 760px;
  overflow: auto;
}
body.interactive .modal-container .find-result .tab-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.interactive .modal-container .find-result .tab-header .replace-wrap {
  display: inline-flex;
  align-items: center;
}
body.interactive .modal-container .find-result .tab-header .replace-wrap .btn-replace {
  cursor: pointer;
}
body.interactive .modal-container .find-result .nav-link {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}
body.interactive .modal-container .find-result .output-window {
  position: absolute;
  left: calc(50% + 360px);
  top: 0px;
}
body.interactive .modal-container .find-result .output-window .close-btn {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 4px;
}
body.interactive .modal-container .find-result .output-window .output {
  width: 600px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background: paleturquoise;
  height: 760px;
}
body.interactive .modal-container .find-result .output-window .output ul {
  list-style: none;
  padding-top: 10px;
}
body.interactive .modal-container .find-result .output-window .output ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.interactive .modal-container .find-result .output-window .log-window {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.interactive .modal-container .find-result .output-window .log-window li {
  display: flex;
}
body.interactive .modal-container .find-result .output-window .log-window li .txt {
  cursor: pointer;
}
body.interactive .modal-container .find-result .output-window .log-window li .txt:hover {
  text-decoration: underline;
}
body.interactive .modal-container .code-preview {
  position: absolute;
  left: calc(50% - 960px);
  height: 760px;
  width: 600px;
  background: paleturquoise;
}
body.interactive .modal-container .code-preview .close-btn {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 4px;
}
body.interactive .modal-container .code-preview .code-area {
  position: absolute;
  height: 760px;
  width: 600px;
}
body.interactive .modal-container .code-preview .code-area textarea.code-text {
  height: 100%;
  width: 100%;
  line-height: 31px;
  background-image: -webkit-linear-gradient(left, white 0, transparent 0), -webkit-linear-gradient(right, white 0, transparent 0), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-repeat: repeat-y;
  background-size: 100% 100%, 100% 100%, 100% 31px;
  background-attachment: local;
  padding-left: 16px;
}
body.interactive .modal-container .export_settings .config-wrap {
  display: flex;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #bcd;
  border-radius: 4px;
}
body.interactive .modal-container .export_settings .config-wrap .backup-wrap {
  position: absolute;
  right: calc(1rem - 1px);
  margin-top: -4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-right: 1px solid;
  border: 1px solid #bcd;
  border-bottom: 0;
  border-radius: 4px;
}
body.interactive .modal-container .export_settings .config-wrap .backup-wrap .backup-option {
  display: flex;
}
body.interactive .modal-container .export_settings .config-wrap .backup-wrap .backup-option .wrap {
  justify-content: space-between;
  display: flex;
  width: 100%;
  flex: 1;
}
body.interactive .modal-container .export_settings .config-wrap .backup-wrap .backup-option span.label {
  margin-right: 0.5rem;
  align-items: center;
  display: inline-flex;
}
body.interactive .modal-container .export_settings .db-wrap, body.interactive .modal-container .export_settings .file-wrap {
  display: flex;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #bcd;
  border-radius: 4px;
}
body.interactive .modal-container .export_settings textarea.npm, body.interactive .modal-container .export_settings textarea.composer {
  position: relative;
  top: 10px;
  left: 40px;
  width: 37%;
}
body.interactive .modal-container .export_settings .file-wrap input {
  width: 20%;
}
body.interactive .modal-container .export_settings .minus-btn {
  position: absolute;
  left: -12px;
  top: 86px;
  cursor: pointer;
}
body.interactive .modal-container .export_settings .plus-btn {
  position: absolute;
  left: -12px;
  top: 60px;
  cursor: pointer;
}
body.interactive .modal-container .export_settings select#dbs {
  height: 120px;
}
body.interactive .modal-container .export_settings span.insert-check {
  position: absolute;
  left: -17px;
}
body.interactive .modal-container .export_settings span.xs {
  font-size: 12px;
}
body.interactive .modal-container .export_settings textarea.form-control.webscript {
  width: 33%;
  display: inline-flex;
  position: relative;
  top: 10px;
  left: 10px;
}
body.interactive .modal-container .export_settings p span {
  cursor: pointer;
}
body.interactive .modal-container .backup_settings .backup-wrap {
  height: 140px;
  margin-bottom: 1re;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 2px solid lightseagreen;
  display: flex;
}
body.interactive .modal-container .backup_settings .backup-wrap .row.server-info {
  background-color: #F5EDDC;
  border-radius: 8px;
}
body.interactive .modal-container .backup_settings .backup-wrap .row.server-info .col-6 {
  gap: 6px;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  padding-top: 10px;
}
body.interactive .modal-container .backup_settings .backup-wrap .row.server-info .col-6 span {
  font-size: 0.9em;
  color: #333;
}
body.interactive .modal-container .backup_settings .backup-wrap .row.server-info .col-6.r {
  border-left: 2px solid #fff;
}
body.interactive .modal-container .backup_settings .backup-wrap .row.server-info label {
  min-width: 100px;
  text-align: right;
}
body.interactive .modal-container .backup_settings .backup-wrap .btn-run {
  position: relative;
  top: 30%;
  left: 35%;
  transform: scale(2);
}
body.interactive .modal-container .backup_settings .bottom-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
body.interactive .modal-container .backup_settings .bottom-container .history-wrap {
  width: 350px;
}
body.interactive .modal-container .backup_settings .bottom-container .history-wrap span.rev-ver {
  min-width: 100px;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector {
  width: calc(100% - 380px);
  height: 100%;
  padding-left: 50px;
  border-left: 2px solid lightseagreen;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .r {
  text-align: right;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .btn-close {
  cursor: pointer;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid {
  display: flex;
  height: 140px;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .source_browser {
  position: absolute;
  height: calc(100% - 388px);
  width: 700px;
  top: 200px;
  margin-left: -20px;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .source_browser textarea.source_textarea {
  height: calc(100% - 20px);
  width: 100%;
  line-height: 31px;
  background-image: -webkit-linear-gradient(left, white 0, transparent 0), -webkit-linear-gradient(right, white 0, transparent 0), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-repeat: repeat-y;
  background-size: 100% 100%, 100% 100%, 100% 31px;
  background-attachment: local;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .symbol {
  width: 100px;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .symbol i {
  transform: scale(2.8);
  position: relative;
  top: 38%;
  left: 15%;
  color: #EB1D36 !important;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc {
  width: calc(100% - 120px);
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul {
  flex-direction: row;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  margin: 0;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li {
  display: inline-flex;
  width: calc(25% - 18px);
  flex-direction: column;
  background: #DEA696;
  border-radius: 5px;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li.full {
  background: #F5A6A2;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li.full .info {
  background: #CA5B86 !important;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li .box {
  height: 4rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li .info {
  text-align: center;
  height: 30px;
  padding-top: 2px;
  background: #BD7586;
  border-radius: 5px;
  color: white;
  font-weight: bold;
}
body.interactive .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li .info a {
  color: white;
  text-decoration: underline;
}

.app-modal.vars_popup .modal-container .add-wrap {
  height: 500px;
  overflow-y: auto;
}
.app-modal .modal-container {
  width: 820px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.app-modal.find_result .modal-container {
  width: 720px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.app-modal.save_popup .modal-container {
  width: 500px !important;
  height: 300px !important;
}
.app-modal.vars_popup .modal-container {
  width: 600px !important;
  height: 600px !important;
}
.app-modal.rev_popup .modal-container {
  width: 1440px !important;
  height: 900px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.app-modal.backup_settings .modal-container {
  width: 1200px !important;
  height: 800px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.app-modal.rev_popup.expand .modal-container {
  width: calc(100vw - 20px) !important;
  height: calc(100vh - 10px) !important;
}
.app-modal.coding_pattern_popup .modal-container {
  width: 660px !important;
  height: 440px !important;
}

body.service .px1 {
  width: 1px;
  height: 1px;
  border: 0 !important;
}
body.service.project .content-wrapper, body.service.preset .content-wrapper {
  max-width: 1380px;
}
body.service.project .btn-edit-router,
body.service.project .btn-edit-program, body.service.preset .btn-edit-router,
body.service.preset .btn-edit-program {
  cursor: pointer;
  opacity: 0.5;
}
body.service.project .btn-edit-router:hover,
body.service.project .btn-edit-program:hover, body.service.preset .btn-edit-router:hover,
body.service.preset .btn-edit-program:hover {
  opacity: 1;
}
body.service.project .mdi-table-column-plus-after:before, body.service.preset .mdi-table-column-plus-after:before {
  transform: rotate(270deg);
}
body.service.project span.color_code, body.service.preset span.color_code {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}
body.service.project .setup-design .onsave, body.service.preset .setup-design .onsave {
  background: linear-gradient(45deg, #f7f7f7, #f7f7f7, #f7f7f7, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 1s ease infinite;
}
body.service.project .setup-design i.mdi.mdi-plus, body.service.preset .setup-design i.mdi.mdi-plus {
  position: relative;
  left: 0.5rem;
  cursor: pointer;
}
body.service.project .setup-design ul.color-codes, body.service.preset .setup-design ul.color-codes {
  gap: 0.5rem !important;
}
body.service.project .setup-design ul.color-codes li, body.service.preset .setup-design ul.color-codes li {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
body.service.project .setup-design ul.color-codes li i.mdi.mdi-minus, body.service.preset .setup-design ul.color-codes li i.mdi.mdi-minus {
  cursor: pointer;
}
body.service.project .setup-design ul.color-codes button.btn-palette, body.service.preset .setup-design ul.color-codes button.btn-palette {
  padding: 0.25rem 0.6rem;
}
body.service.project .setup-design .thumb-wrap .screenshot, body.service.preset .setup-design .thumb-wrap .screenshot {
  max-width: 100%;
}
body.service.project .setup-design .output > div, body.service.preset .setup-design .output > div {
  height: 100%;
}
body.service.project .setup-design ul.palette-list, body.service.preset .setup-design ul.palette-list {
  padding: 0 !important;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: 100%;
  height: 100%;
  gap: 0.25rem;
  background: #fff;
  cursor: pointer;
}
body.service.project .setup-design ul.colors, body.service.preset .setup-design ul.colors {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 0 !important;
  width: 100%;
  height: 100%;
}
body.service.project .setup-design .btn-wrap, body.service.preset .setup-design .btn-wrap {
  display: flex;
  gap: 0.5rem;
}
body.service.project .setup-design .btn-wrap button, body.service.preset .setup-design .btn-wrap button {
  padding: 0.35rem 0.75rem;
}
body.service.project .btn-group .number, body.service.preset .btn-group .number {
  position: absolute;
  right: 1px;
  bottom: -2px;
  font-size: 11px;
}
body.service .redis-label {
  position: relative;
  top: 3px;
  margin-right: 5px;
}
body.service .redis-switch {
  position: relative;
  margin-top: 0.5rem;
}
body.service .hook-name-wrap {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
body.service .hook-name-wrap > span {
  cursor: pointer;
}
body.service.single .modal-container .export_settings .config-wrap {
  flex-direction: row;
}
body.service .modal-container .id-label {
  position: absolute;
  margin-top: -28px;
  margin-left: -28px;
  font-size: 0.8em;
}
body.service .modal-container a.modal-close,
body.service .modal-container a.modal-expand {
  position: absolute;
  right: 23px;
  top: 0;
  font-size: 1rem;
  color: #000;
}
body.service .modal-container a.modal-expand {
  right: 43px;
}
body.service .modal-container .cm {
  display: inline-flex;
  align-items: center;
}
body.service .modal-container .btn-toggle-domain {
  padding: 0.1rem 0.45rem;
  position: absolute;
  right: 1rem;
}
body.service .modal-container .add-wrap {
  overflow: auto;
  padding: 40px;
  padding-bottom: 0;
}
body.service .modal-container .add-wrap .plus i {
  cursor: pointer;
}
body.service .modal-container .add-wrap .btn-del {
  position: absolute;
  left: -10px;
  top: 7px;
}
body.service .modal-container .add-wrap .btn-del i {
  cursor: pointer;
}
body.service .modal-container .add-wrap .btn-toggle-addi {
  margin: 0 0.5rem;
  opacity: 0.5;
  cursor: pointer;
}
body.service .modal-container .add-wrap .btn-toggle-addi.active {
  opacity: 1;
}
body.service .modal-container .add-wrap .row {
  flex-grow: 1;
  display: flex;
  align-items: center;
}
body.service .modal-container .add-wrap ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
  justify-content: flex-end;
  -moz-column-gap: 3px;
       column-gap: 3px;
}
body.service .modal-container .add-wrap ul.recommended-themes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
body.service .modal-container .add-wrap ul .theme_name {
  display: flex;
  justify-content: space-around;
}
body.service .modal-container .add-wrap ul .theme_name i {
  cursor: pointer;
}
body.service .modal-container .add-wrap ul li.btns {
  -moz-column-gap: 2px;
       column-gap: 2px;
}
body.service .modal-container .add-wrap select {
  height: 33px;
  position: relative;
  margin-top: 1px;
}
body.service .modal-container .add-wrap .btn-add,
body.service .modal-container .add-wrap .btn-save {
  width: 36px;
  justify-content: center;
  display: inline-flex;
}
body.service .modal-container .add-wrap button.btn.btn-success.btn-sm.db-transfer {
  position: absolute;
  left: 1rem;
  top: 2rem;
  opacity: 0.5;
}
body.service .modal-container .add-wrap button.btn.btn-success.btn-sm.db-transfer.active {
  opacity: 1;
}
body.service .modal-container .rev_popup .add-wrap .row {
  align-items: flex-start;
}
body.service .modal-container .save_popup i.mdi.mdi-close {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 2rem;
  z-index: 999;
  cursor: pointer;
}
body.service .modal-container .save_popup .db-transfer-window {
  position: absolute;
  left: calc(50% - 960px);
  top: 0;
  height: 760px;
  width: 600px;
  background: paleturquoise;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
body.service .modal-container .save_popup .db-transfer-window .tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
body.service .modal-container .save_popup .db-transfer-window .export-wrap {
  background: white;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
body.service .modal-container .save_popup .db-transfer-window .export-wrap .label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}
body.service .modal-container .save_popup .db-transfer-window .export-wrap .range {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
body.service .modal-container .save_popup .db-transfer-window .export-wrap .range > div {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
body.service .modal-container .save_popup .db-transfer-window .export-wrap .range input {
  width: 4rem;
  padding: 0.35rem;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}
body.service .modal-container .save_popup .db-transfer-window .export-wrap .range .btn-submit {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  border-radius: 4px;
  background: #5bc0de;
  color: white;
  transition: background 0.2s;
}
body.service .modal-container .save_popup .db-transfer-window .export-wrap .range .btn-submit:hover {
  background: #31b0d5;
}
body.service .modal-container .save_popup .db-transfer-window button.btn-export-all {
  position: absolute;
  right: 2rem;
  padding: 0.35rem 0.65rem;
}
body.service .modal-container .save_popup .db-transfer-window .close-btn {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 4px;
}
body.service .modal-container .save_popup .db-transfer-window .btn-add {
  padding: 0 0.35rem !important;
  position: absolute;
  right: 2rem;
  opacity: 0.5;
}
body.service .modal-container .save_popup .db-transfer-window .btn-add.active {
  opacity: 1;
}
body.service .modal-container .save_popup .db-transfer-window input.form-control {
  background: #fff;
  opacity: 0.88;
}
body.service .modal-container .save_popup .db-transfer-window select.form-control {
  background: #fff;
  opacity: 0.88;
}
body.service .modal-container .list-wrap {
  padding: 40px;
  padding-top: 20px;
  overflow-y: auto;
  max-height: 667px;
}
body.service .modal-container .list-wrap .router-list {
  width: 100%;
  table-layout: fixed;
}
body.service .modal-container .list-wrap .list-group {
  width: 100%;
  table-layout: fixed;
  display: table;
}
body.service .modal-container .list-wrap .list-group-item {
  padding: 0.3rem;
}
body.service .modal-container .list-wrap .list-group-item td:nth-child(1) {
  width: 90px;
}
body.service .modal-container .list-wrap .list-group-item td:nth-child(2) {
  width: 30%;
}
body.service .modal-container .list-wrap .list-group-item td:nth-child(3) {
  width: 20%;
}
body.service .modal-container .list-wrap .list-group-item td:nth-child(4) {
  width: 25%;
}
body.service .modal-container .list-wrap .list-group-item td:nth-child(5) {
  width: 20px;
}
body.service .modal-container .list-wrap .btn-del {
  cursor: pointer;
}
body.service .modal-container .list-wrap .btn-code,
body.service .modal-container .list-wrap .btn-copy,
body.service .modal-container .list-wrap .btn-admin {
  opacity: 0.5;
  cursor: pointer;
}
body.service .modal-container .list-wrap .btn-code:hover,
body.service .modal-container .list-wrap .btn-copy:hover,
body.service .modal-container .list-wrap .btn-admin:hover {
  opacity: 1;
}
body.service .modal-container .result-toggle-wrap .item-header {
  height: 40px;
}
body.service .modal-container .result-toggle-wrap .table td {
  padding: 6px 8px;
  height: 34px;
}
body.service .modal-container .result-toggle-wrap .item-list .entity.f {
  display: inline-flex;
  width: 100%;
}
body.service .modal-container .result-toggle-wrap .item-list .entity.f span {
  margin: 0 auto;
}
body.service .modal-container .result-toggle-wrap .item-list .entity.f span.btn-load {
  cursor: pointer;
}
body.service .modal-container .result-toggle-wrap .item-list i {
  cursor: pointer;
}
body.service .modal-container .rev-list-wrap {
  width: 25%;
  width: 350px !important;
}
body.service .modal-container .rev-list-wrap span.rev-ver {
  min-width: 84px;
}
body.service .modal-container .rev-list-wrap .rev-play {
  position: absolute;
  margin-top: -40px;
  cursor: pointer;
}
body.service .modal-container .is_expand .change-log {
  height: unset !important;
}
body.service .modal-container .change-log {
  width: calc(100% - 350px) !important;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 820px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
body.service .modal-container .change-log div {
  flex: 1;
}
body.service .modal-container .change-log div .d2h-wrapper {
  max-height: 660px;
  overflow-y: auto;
  overflow-x: hidden;
}
body.service .modal-container .rev-play-wrap {
  width: calc(100% - 350px);
  display: flex;
  height: 820px;
}
body.service .modal-container .tab-caption {
  position: absolute;
  margin-top: -30px;
}
body.service .modal-container .tab-caption span {
  display: inline-block;
}
body.service .modal-container .code-editor {
  height: 760px;
  background: #282c34;
}
body.service .modal-container .code-editor a.btn-delete-code {
  position: absolute;
  right: 5.5rem;
  color: white !important;
  cursor: pointer;
}
body.service .modal-container .code-editor a.btn-delete-code:hover {
  color: yellowgreen;
}
body.service .modal-container .code-editor a.btn-save-code {
  position: absolute;
  right: 4rem;
  color: white !important;
  cursor: pointer;
}
body.service .modal-container .code-editor a.btn-save-code:hover {
  color: yellowgreen;
}
body.service .modal-container .code-editor a.modal-close {
  position: absolute;
  right: 1.5rem;
  color: white !important;
  cursor: pointer;
}
body.service .modal-container .code-editor a.modal-close:hover {
  color: yellowgreen;
}
body.service .modal-container .code-editor a.btn-expand {
  position: absolute;
  right: 2.5rem;
  color: white !important;
  cursor: pointer;
}
body.service .modal-container .code-editor a.btn-expand:hover {
  color: yellowgreen;
}
body.service .modal-container .code-editor.expand {
  width: 100vw !important;
  height: calc(100vh - 10px) !important;
}
body.service .modal-container .editor-wrap {
  width: 100%;
  height: 100%;
}
body.service .modal-container .coding_pattern_popup .row {
  font-size: 0.9rem;
}
body.service .modal-container .preview-window, body.service .modal-container .docker-patch-wrap {
  position: absolute;
  left: calc(50% - 950px);
  top: 0;
  height: 760px;
  width: 540px;
  background: paleturquoise;
}
body.service .modal-container .preview-window .close-btn, body.service .modal-container .docker-patch-wrap .close-btn {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 4px;
}
body.service .modal-container .preview-window img.screenshot, body.service .modal-container .docker-patch-wrap img.screenshot {
  max-width: 100%;
  width: 100%;
}
body.service .modal-container .preview-window .theme-list ul, body.service .modal-container .docker-patch-wrap .theme-list ul {
  padding: 0;
  display: grid;
  max-width: 100%;
  width: 100%;
  gap: 1rem;
}
body.service .modal-container .preview-window .theme-list ul li.theme, body.service .modal-container .docker-patch-wrap .theme-list ul li.theme {
  display: grid;
  grid-template-columns: 45% auto;
  gap: 2%;
  align-items: center;
}
body.service .modal-container .preview-window .theme-list ul li.theme .screenshot, body.service .modal-container .docker-patch-wrap .theme-list ul li.theme .screenshot {
  grid-row: 1/3;
}
body.service .modal-container .preview-window .theme-list, body.service .modal-container .docker-patch-wrap .theme-list {
  padding-top: 2rem;
}
body.service .modal-container .docker-patch-wrap {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
body.service .modal-container .docker-patch-wrap .patch-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
body.service .modal-container .docker-patch-wrap .patch-info .top-part {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid #fff;
  padding-bottom: 0.75rem;
}
body.service .modal-container .docker-patch-wrap .patch-info .top-part .selected-id {
  display: flex;
  gap: 0.5rem;
  font-weight: bold;
}
body.service .modal-container .docker-patch-wrap .patch-info .top-part .selected-id .label {
  color: #444;
}
body.service .modal-container .docker-patch-wrap .patch-info .top-part .selected-id .txt {
  color: #CB7A6B;
  font-size: 1.1rem;
}
body.service .modal-container .docker-patch-wrap .patch-info .top-part .ic-wrap {
  display: flex;
  gap: 0.75rem;
}
body.service .modal-container .docker-patch-wrap .patch-info .top-part .ic-wrap i {
  font-size: 1.2rem;
  color: #777;
  cursor: pointer;
  transition: color 0.2s;
}
body.service .modal-container .docker-patch-wrap .patch-info .top-part .ic-wrap i.active {
  color: #000;
}
body.service .modal-container .docker-patch-wrap .patch-info .top-part .ic-wrap i:hover {
  color: #CB7A6B;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.info .ic-list ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 0.5rem;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.info .ic-list ul i {
  font-size: 1rem;
  color: #4aa7c7;
  cursor: pointer;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.info > div {
  display: flex;
  align-items: center;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.info > div .col-3 {
  flex: 0 0 25%;
  max-width: 25%;
  font-weight: bold;
  color: #444;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.info > div .col-9 {
  flex: 1;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.info > div .col-9 .text textarea {
  width: 100%;
  height: 5rem;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 0.5rem;
  font-size: 1rem;
  transition: border 0.2s;
  background: #fff;
  opacity: 0.5;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.info > div .col-9 .text textarea.context {
  height: 16rem;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.info > div .col-9 .text textarea:focus {
  border-color: #5bc0de;
  outline: none;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.history {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.history .docker-header,
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.history .docker-history {
  display: grid;
  grid-template-columns: 80px 150px 120px 1fr;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #fff;
  list-style: none;
  margin-bottom: 0;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.history .docker-header {
  font-weight: bold;
  color: #333;
}
body.service .modal-container .docker-patch-wrap .patch-info .view_mode.history .docker-history {
  color: #555;
  transition: background 0.2s;
}
body.service .modal-container .docker-patch-wrap .patch-info div.bottom-part {
  justify-content: flex-end;
  gap: 1rem;
  padding-right: 1rem;
}
body.service .modal-container .docker-patch-wrap .patch-info button.btn-success {
  background: #5bc0de;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  color: #fff;
  border-radius: 5px;
  transition: background 0.2s;
}
body.service .modal-container .docker-patch-wrap .patch-info button.btn-success:hover {
  background: #4aa7c7;
}
body.service .modal-container .output-window,
body.service .modal-container .docker-list-wrap {
  position: absolute;
  left: calc(50% + 410px);
  top: 0px;
}
body.service .modal-container .output-window .docker-id span.txt.active,
body.service .modal-container .docker-list-wrap .docker-id span.txt.active {
  color: var(--vz-danger);
}
body.service .modal-container .output-window .docker-id i.mdi,
body.service .modal-container .docker-list-wrap .docker-id i.mdi {
  font-size: 1rem;
  position: absolute;
  margin-top: -0.4rem;
  margin-left: 0.7rem;
}
body.service .modal-container .output-window .docker-id i.mdi::before,
body.service .modal-container .docker-list-wrap .docker-id i.mdi::before {
  transform: rotate(180deg);
}
body.service .modal-container .output-window .close-btn,
body.service .modal-container .docker-list-wrap .close-btn {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 4px;
}
body.service .modal-container .output-window .docker-list li,
body.service .modal-container .docker-list-wrap .docker-list li {
  display: grid;
  grid-template-columns: 5% 10% 5% 15% 19% 6% 30% 5% 5%;
}
body.service .modal-container .output-window .docker-list li.header,
body.service .modal-container .docker-list-wrap .docker-list li.header {
  margin: 1.2rem 0;
}
body.service .modal-container .output-window .docker-list li > span,
body.service .modal-container .docker-list-wrap .docker-list li > span {
  overflow: hidden;
  white-space: nowrap;
}
body.service .modal-container .output-window .docker-list li .need-sync,
body.service .modal-container .docker-list-wrap .docker-list li .need-sync {
  display: flex;
  width: 0.9rem;
  align-items: flex-start;
  padding-top: 0.15rem;
}
body.service .modal-container .output-window .docker-list li button.btn.btn-docker-sync,
body.service .modal-container .docker-list-wrap .docker-list li button.btn.btn-docker-sync {
  position: absolute;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  margin-top: 1rem;
  color: #fff;
  background: navy;
  left: 2.2rem;
}
body.service .modal-container .output-window .docker-list li i,
body.service .modal-container .docker-list-wrap .docker-list li i {
  cursor: pointer;
  font-weight: 600;
}
body.service .modal-container .output-window .docker-list li .status-ball,
body.service .modal-container .docker-list-wrap .docker-list li .status-ball {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: inline-block;
}
body.service .modal-container .output-window .docker-list li .status-ball.need_to_build,
body.service .modal-container .docker-list-wrap .docker-list li .status-ball.need_to_build {
  background-color: #ff5733;
}
body.service .modal-container .output-window .docker-list li .status-ball.on_building,
body.service .modal-container .docker-list-wrap .docker-list li .status-ball.on_building {
  background-color: #ffc107;
}
body.service .modal-container .output-window .docker-list li .status-ball.prepared_at_host,
body.service .modal-container .docker-list-wrap .docker-list li .status-ball.prepared_at_host {
  background-color: #17a2b8;
}
body.service .modal-container .output-window .docker-list li .status-ball.ready_to_start,
body.service .modal-container .docker-list-wrap .docker-list li .status-ball.ready_to_start {
  background-color: #28a745;
}
body.service .modal-container .output-window .docker-list li .status-ball.on_deploy,
body.service .modal-container .docker-list-wrap .docker-list li .status-ball.on_deploy {
  background-color: #32ccff;
}
body.service .modal-container .output-window .docker-list li .status-ball.started,
body.service .modal-container .docker-list-wrap .docker-list li .status-ball.started {
  background-color: #007bff;
}
body.service .modal-container .output-window .docker-list li .status-ball.pause,
body.service .modal-container .docker-list-wrap .docker-list li .status-ball.pause {
  background-color: #999;
}
body.service .modal-container .output-window .output,
body.service .modal-container .output-window .docker-list,
body.service .modal-container .docker-list-wrap .output,
body.service .modal-container .docker-list-wrap .docker-list {
  width: 540px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background: paleturquoise;
  height: 760px;
}
body.service .modal-container .output-window .output ul,
body.service .modal-container .output-window .docker-list ul,
body.service .modal-container .docker-list-wrap .output ul,
body.service .modal-container .docker-list-wrap .docker-list ul {
  list-style: none;
  padding-top: 10px;
}
body.service .modal-container .output-window .output li,
body.service .modal-container .output-window .docker-list li,
body.service .modal-container .docker-list-wrap .output li,
body.service .modal-container .docker-list-wrap .docker-list li {
  list-style: none;
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.service .modal-container .output-window .log-window,
body.service .modal-container .docker-list-wrap .log-window {
  height: 60%;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.service .modal-container .output-window .log-window li,
body.service .modal-container .docker-list-wrap .log-window li {
  display: flex;
}
body.service .modal-container .output-window .log-window li > span.time,
body.service .modal-container .docker-list-wrap .log-window li > span.time {
  width: 13%;
}
body.service .modal-container .output-window .log-window li > span.url,
body.service .modal-container .docker-list-wrap .log-window li > span.url {
  width: 77%;
}
body.service .modal-container .output-window .log-window li > span.cnt,
body.service .modal-container .docker-list-wrap .log-window li > span.cnt {
  width: 10%;
}
body.service .modal-container .output-window .result-window,
body.service .modal-container .docker-list-wrap .result-window {
  height: 40%;
  font-size: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.service .modal-container .output-window .result-window textarea,
body.service .modal-container .docker-list-wrap .result-window textarea {
  height: calc(100% - 35px);
  overflow-y: scroll;
}
body.service .modal-container .output-window .result-window button.btn,
body.service .modal-container .docker-list-wrap .result-window button.btn {
  border-radius: 0;
}
body.service .modal-container .output-window .result-window .v-output,
body.service .modal-container .docker-list-wrap .result-window .v-output {
  width: 100%;
  height: calc(100% - 35px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
}
body.service .modal-container .output-window .result-window .btn-add,
body.service .modal-container .docker-list-wrap .result-window .btn-add {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
body.service .modal-container .output-window .result-window .btn-wrap,
body.service .modal-container .docker-list-wrap .result-window .btn-wrap {
  position: absolute;
  right: 2rem;
  margin-top: 0.25rem;
  display: flex;
  gap: 0.1rem;
}
body.service .modal-container .output-window .result-window .btn-wrap a.active,
body.service .modal-container .docker-list-wrap .result-window .btn-wrap a.active {
  border: 1px solid #fff;
}
body.service .modal-container .output-window .result-window li.domain-item,
body.service .modal-container .docker-list-wrap .result-window li.domain-item {
  margin-left: 2rem;
  height: 2rem;
}
body.service .modal-container .output-window .result-window li.domain-item span.domain-name,
body.service .modal-container .docker-list-wrap .result-window li.domain-item span.domain-name {
  position: relative;
  top: 0.3rem;
  font-size: 0.8rem;
}
body.service .modal-container .output-window .result-window li.domain-item div.input-group,
body.service .modal-container .docker-list-wrap .result-window li.domain-item div.input-group {
  padding: 0;
  display: inline-flex;
  gap: 0.25rem;
}
body.service .modal-container .output-window .result-window li.domain-item div.input-group input,
body.service .modal-container .docker-list-wrap .result-window li.domain-item div.input-group input {
  border-radius: 0.25rem;
}
body.service .modal-container .output-window .result-window .exports-status,
body.service .modal-container .docker-list-wrap .result-window .exports-status {
  margin-left: 2rem;
}
body.service .modal-container ul.rev-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
body.service .modal-container ul.rev-list li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #bcd;
  /*        width: 88%;*/
}
body.service .modal-container ul.rev-list li label.ver-num {
  margin-left: 6px;
}
body.service .modal-container ul.rev-list li span.save-time {
  font-size: 0.85em;
  font-style: italic;
  margin-left: 1em;
  margin-right: 1em;
}
body.service .modal-container ul.rev-list li span.badge.badge-success {
  margin-right: 4px;
  width: 24px;
  cursor: pointer;
}
body.service .modal-container ul.rev-list li span.badge.badge-success i {
  position: relative;
  left: -3px;
}
body.service .modal-container ul.page {
  display: flex;
  list-style: none;
  flex-direction: row;
  justify-content: center;
  padding: 0;
  width: 88%;
  margin-top: 0.5rem;
}
body.service .modal-container ul.page li {
  text-decoration: underline;
  margin: 0 6px;
}
body.service .modal-container input.form-control::-moz-placeholder {
  color: #999;
}
body.service .modal-container input.form-control::placeholder {
  color: #999;
}
body.service .modal-container .btn-apply {
  position: relative;
  top: -2px;
  cursor: pointer;
}
body.service .modal-container .btn-sync {
  position: absolute;
  right: -0.5rem;
  top: 0.75rem;
  font-size: 1.2rem;
  cursor: pointer;
}
body.service .modal-container .files-popup .file-upload-wrap {
  padding: 40px 0 32px 40px;
  margin-bottom: 8px;
  background: #fff;
}
body.service .modal-container .files-popup .file-upload-wrap .asset-option {
  justify-content: center;
  align-items: center;
}
body.service .modal-container .files-popup .file-upload-wrap label {
  font-size: 0.8rem;
}
body.service .modal-container .files-popup .file-list {
  padding: 0 1rem;
  display: flex;
}
body.service .modal-container .files-popup .file-list i {
  cursor: pointer;
}
body.service .modal-container .files-popup .file-list i.mdi.mdi-close {
  color: rgba(33, 37, 41, 0.4);
}
body.service .modal-container .files-popup .file-list ul {
  list-style: none;
}
body.service .modal-container .files-popup .file-list .selected {
  font-weight: 600;
  text-decoration: underline;
}
body.service .modal-container .files-popup .left-panel {
  width: 40%;
  height: 600px;
  overflow-y: auto;
  background: #fff;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
body.service .modal-container .files-popup .left-panel span > a {
  text-decoration: none;
  color: #000;
}
body.service .modal-container .files-popup .left-panel .asset-label {
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
  font-weight: 600;
}
body.service .modal-container .files-popup .right-panel {
  width: 60%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
body.service .modal-container .files-popup .right-panel > div {
  margin: 0;
  padding: 0;
  height: 600px;
}
body.service .modal-container .files-popup .right-panel img {
  max-width: 550px;
  max-height: 600px;
}
body.service .modal-container .files-popup .right-panel .btn-wrap {
  display: inline-flex;
  justify-content: flex-end;
  position: absolute;
  right: 3.3rem;
  margin-top: -36px;
}
body.service .modal-container .files-popup .right-panel .code-text {
  line-height: 31px;
  background-image: -webkit-linear-gradient(left, white 0, transparent 0), -webkit-linear-gradient(right, white 0, transparent 0), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-repeat: repeat-y;
  background-size: 100% 100%, 100% 100%, 100% 31px;
  background-attachment: local;
  padding-left: 16px;
  width: 550px;
  height: 600px;
}
body.service .modal-container .export_settings .ex-toggle-wrap {
  position: absolute;
  display: flex;
  right: 0;
  height: 2rem;
  top: 2rem;
  gap: 0.5rem;
  align-items: center;
}
body.service .modal-container .export_settings .ex-toggle-wrap span.label {
  width: 9rem;
  color: #666;
}
body.service .modal-container .export_settings .config-wrap {
  display: flex;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #bcd;
  border-radius: 4px;
  flex-direction: column;
}
body.service .modal-container .export_settings .config-wrap .flex-row {
  flex-direction: row;
  display: flex;
  gap: 5px;
}
body.service .modal-container .export_settings .db-wrap,
body.service .modal-container .export_settings .file-wrap {
  display: flex;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #bcd;
  border-radius: 4px;
}
body.service .modal-container .export_settings textarea.npm,
body.service .modal-container .export_settings textarea.composer {
  position: relative;
  top: 10px;
  left: 40px;
  width: 37%;
}
body.service .modal-container .export_settings .file-wrap input {
  width: 20%;
}
body.service .modal-container .export_settings .minus-btn {
  position: absolute;
  left: -12px;
  top: 86px;
  cursor: pointer;
}
body.service .modal-container .export_settings .plus-btn {
  position: absolute;
  left: -12px;
  top: 60px;
  cursor: pointer;
}
body.service .modal-container .export_settings .clear-btn {
  position: absolute;
  left: -12px;
  top: 82px;
  cursor: pointer;
}
body.service .modal-container .export_settings select#dbs {
  height: 120px;
}
body.service .modal-container .export_settings span.insert-check {
  position: absolute;
  left: -17px;
}
body.service .modal-container .export_settings span.xs {
  font-size: 12px;
}
body.service .modal-container .export_settings textarea.form-control.webscript {
  width: 33%;
  display: inline-flex;
  position: relative;
  top: 10px;
  left: 10px;
}
body.service .modal-container .export_settings p span {
  cursor: pointer;
}
body.service .modal-container .export_settings .code-preview {
  position: absolute;
  left: calc(50% - 960px);
  top: 0;
  height: 760px;
  width: 600px;
  background: paleturquoise;
}
body.service .modal-container .export_settings .code-preview .close-btn {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 4px;
}
body.service .modal-container .export_settings .code-preview .code-area {
  position: absolute;
  height: 760px;
  width: 600px;
}
body.service .modal-container .export_settings .code-preview .code-area textarea.code-text {
  height: 100%;
  width: 100%;
  line-height: 31px;
  background-image: -webkit-linear-gradient(left, white 0, transparent 0), -webkit-linear-gradient(right, white 0, transparent 0), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-repeat: repeat-y;
  background-size: 100% 100%, 100% 100%, 100% 31px;
  background-attachment: local;
  padding-left: 16px;
}
body.service .modal-container .docker_popup .sel-lang-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
body.service .modal-container .docker_popup .target_langs {
  justify-content: flex-start;
}
body.service .modal-container .docker_popup .target_langs i {
  cursor: pointer;
}
body.service .modal-container .trans_popup {
  width: 100%;
  margin-top: 2rem;
}
body.service .modal-container .trans_popup a.modal-close {
  margin-top: -2rem;
}
body.service .modal-container .trans_popup .lang-header,
body.service .modal-container .trans_popup .word-list {
  display: grid;
  grid-template-columns: repeat(var(--cnt), 1fr);
  list-style: none;
}
body.service .modal-container .trans_popup .word-list {
  max-height: 85vh;
  overflow-y: scroll;
}
body.service .modal-container .trans_popup .word-list li {
  position: relative;
}
body.service .modal-container .trans_popup span.slug_fix {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  color: #879bb9;
}
body.service .modal-container .trans_popup .lang-header span.lang-label {
  max-height: 2rem;
}
body.service .modal-container .trans_popup .lang-header li {
  display: inline-flex;
  gap: 0.5rem;
}
body.service .modal-container .trans_popup .lang-header li .badge {
  opacity: 0.6;
  position: relative;
  padding-top: 0.45rem;
  cursor: pointer;
}
body.service .modal-container .trans_popup .lang-header li .badge.active {
  opacity: 1;
}
body.service .modal-container .trans_popup .lang-header li .badge.btn-openai {
  position: absolute;
  top: -1.5rem;
  height: 1.2rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  opacity: 0.2;
}
body.service .modal-container .trans_popup .lang-header li .badge.btn-openai.active {
  opacity: 1 !important;
}
body.service .modal-container .trans_popup .lang-header .add-av-lang {
  position: absolute;
  right: 3.5rem;
  cursor: pointer;
  margin-top: -1.8rem;
}
body.service .modal-container .trans_popup .lang-header .add-av-lang i.mdi {
  border-radius: 0.25rem;
  background: #04c9b7;
  color: #fff;
  padding: 0.5rem;
  margin-left: 0.25rem;
  width: 2rem;
  height: 2rem;
}
body.service .modal-container .trans_popup .lang-header i.mdi.mdi-close {
  cursor: pointer;
}
body.service .modal-container .trans_popup .trans-row {
  height: 2rem;
}
body.service .modal-container .trans_popup .add-av-lang {
  display: inline-flex;
}
body.service .modal-container .trans_popup .bottom-wrap {
  display: flex;
  justify-content: space-between;
}
body.service .modal-container .trans_popup .bottom-wrap .indicator {
  padding: 0.25rem 1rem;
  display: flex;
  gap: 1rem;
}
body.service .modal-container .trans_popup .bottom-wrap .indicator span {
  font-size: 0.9rem;
}
body.service .modal-container .trans_popup .btn-wrap {
  justify-content: flex-end;
  display: flex;
  margin-top: -1rem;
  padding: 0.3rem;
  gap: 0.25rem;
}
body.service .modal-container .trans_popup .si-wrap {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
body.service .modal-container .trans_popup .si {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.2rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
body.service .modal-container .trans_popup .si.from {
  background-color: #f0f0f0;
  color: #333;
}
body.service .modal-container .trans_popup .si.from.active {
  background-color: #4caf50;
  color: #fff;
}
body.service .modal-container .trans_popup .si.to {
  background-color: #f0f0f0;
  color: #333;
}
body.service .modal-container .trans_popup .si.to.active {
  background-color: #2196f3;
  color: #fff;
}
body.service .modal-container .trans_popup .si:hover {
  background-color: #e0e0e0;
}
body.service .modal-container .trans_popup .av-docker-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
body.service .modal-container .trans_popup .av-docker-wrap i.mdi {
  cursor: pointer;
}
body.service .modal-container .trans_popup .btn-openai {
  opacity: 0.65;
}
body.service .modal-container .trans_popup .btn-openai.active {
  opacity: 1;
}
body.service .modal-container .trans_popup .autofill-candidates {
  max-height: 80vh;
  overflow-y: scroll;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f9f9f9;
  border-top: 1px solid #ccc;
}
body.service .modal-container .trans_popup .autofill-candidates ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.service .modal-container .trans_popup .autofill-candidates li {
  display: grid;
  grid-template-columns: 20% calc(40% - 5rem) calc(40% - 5rem) 5rem;
  padding: 0.5rem 1rem;
  align-items: center;
  border-bottom: 1px solid #eee;
  font-size: 0.875rem;
  justify-content: space-around;
}
body.service .modal-container .trans_popup .autofill-candidates li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.service .modal-container .trans_popup .autofill-candidates li.candidates-header {
  background: #eaeaea;
  font-weight: bold;
  border-bottom: 2px solid #ccc;
}
body.service .modal-container .trans_popup .autofill-candidates li .btn {
  text-align: right;
}
body.service .modal-container .trans_popup .autofill-candidates li .btn i {
  cursor: pointer;
  font-size: 1rem;
  color: #888;
}
body.service .modal-container .trans_popup .autofill-candidates li .btn i:hover {
  color: #cb4c4c;
}
body.service .modal-container .trans_popup .autofill-candidates li span.btn {
  padding: 0;
}
body.service .modal-container .trans_popup .autofill-candidates li.candidates-item .btn {
  padding: 0;
}
body.service .modal-container .backup_settings .backup-wrap {
  height: 140px;
  margin-bottom: 1re;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 2px solid lightseagreen;
  display: flex;
}
body.service .modal-container .backup_settings .backup-wrap .row.server-info {
  background-color: #F5EDDC;
  border-radius: 8px;
}
body.service .modal-container .backup_settings .backup-wrap .row.server-info .col-6 {
  gap: 6px;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  padding-top: 10px;
}
body.service .modal-container .backup_settings .backup-wrap .row.server-info .col-6 span {
  font-size: 0.9em;
  color: #333;
}
body.service .modal-container .backup_settings .backup-wrap .row.server-info .col-6.r {
  border-left: 2px solid #fff;
}
body.service .modal-container .backup_settings .backup-wrap .row.server-info label {
  min-width: 100px;
  text-align: right;
}
body.service .modal-container .backup_settings .backup-wrap .btn-run {
  position: relative;
  top: 30%;
  left: 35%;
  transform: scale(2);
}
body.service .modal-container .backup_settings .bottom-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
body.service .modal-container .backup_settings .bottom-container .history-wrap {
  width: 350px;
}
body.service .modal-container .backup_settings .bottom-container .history-wrap span.rev-ver {
  min-width: 100px;
}
body.service .modal-container .backup_settings .bottom-container .inspector {
  width: calc(100% - 380px);
  height: 100%;
  padding-left: 50px;
  border-left: 2px solid lightseagreen;
}
body.service .modal-container .backup_settings .bottom-container .inspector .r {
  text-align: right;
}
body.service .modal-container .backup_settings .bottom-container .inspector .btn-close {
  cursor: pointer;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid {
  display: flex;
  height: 140px;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .source_browser {
  position: absolute;
  height: calc(100% - 388px);
  width: 700px;
  top: 200px;
  margin-left: -20px;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .source_browser textarea.source_textarea {
  height: calc(100% - 20px);
  width: 100%;
  line-height: 31px;
  background-image: -webkit-linear-gradient(left, white 0, transparent 0), -webkit-linear-gradient(right, white 0, transparent 0), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-repeat: repeat-y;
  background-size: 100% 100%, 100% 100%, 100% 31px;
  background-attachment: local;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .symbol {
  width: 100px;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .symbol i {
  transform: scale(2.8);
  position: relative;
  top: 38%;
  left: 15%;
  color: #EB1D36 !important;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc {
  width: calc(100% - 120px);
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul {
  flex-direction: row;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  margin: 0;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li {
  display: inline-flex;
  width: calc(25% - 18px);
  flex-direction: column;
  background: #DEA696;
  border-radius: 5px;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li.full {
  background: #F5A6A2;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li.full .info {
  background: #CA5B86 !important;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li .box {
  height: 4rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li .info {
  text-align: center;
  height: 30px;
  padding-top: 2px;
  background: #BD7586;
  border-radius: 5px;
  color: white;
  font-weight: bold;
}
body.service .modal-container .backup_settings .bottom-container .inspector .backup-grid .desc ul li .info a {
  color: white;
  text-decoration: underline;
}
body.service.mixer .modal-container .code-editor {
  width: 100%;
}
body.service.mixer .modal-container .code-editor a.btn-delete-code {
  top: -1.8rem;
}
body.service.mixer .modal-container .code-editor a.btn-save-code {
  top: -1.8rem;
}
body.service.mixer .modal-container .code-editor a.modal-close {
  top: -1.8rem;
}
body.service.mixer .modal-container .code-editor a.btn-expand {
  top: -1.8rem;
}

:root {
  --vz-blue: #32ccff;
  --vz-indigo: #516196;
  --vz-purple: #8772f9;
  --vz-pink: #f672a7;
  --vz-red: #f06548;
  --vz-orange: #f1963b;
  --vz-yellow: #FFBC0A;
  --vz-green: #00bd9d;
  --vz-teal: #02a8b5;
  --vz-cyan: #25a0e2;
  --vz-white: #fff;
  --vz-gray: #878a99;
  --vz-gray-dark: #343a40;
  --vz-gray-100: #f3f6f9;
  --vz-gray-200: #eff2f7;
  --vz-gray-300: #e9ebec;
  --vz-gray-400: #ced4da;
  --vz-gray-500: #adb5bd;
  --vz-gray-600: #878a99;
  --vz-gray-700: #495057;
  --vz-gray-800: #343a40;
  --vz-gray-900: #212529;
  --vz-primary: #25a0e2;
  --vz-secondary: #878a99;
  --vz-success: #00bd9d;
  --vz-info: #32ccff;
  --vz-warning: #FFBC0A;
  --vz-danger: #f06548;
  --vz-light: #f3f6f9;
  --vz-dark: #343a40;
  --vz-primary-rgb: 37, 160, 226;
  --vz-secondary-rgb: 135, 138, 153;
  --vz-success-rgb: 0, 189, 157;
  --vz-info-rgb: 50, 204, 255;
  --vz-warning-rgb: 255, 188, 10;
  --vz-danger-rgb: 240, 101, 72;
  --vz-light-rgb: 243, 246, 249;
  --vz-dark-rgb: 52, 58, 64;
  --vz-white-rgb: 255, 255, 255;
  --vz-black-rgb: 0, 0, 0;
  --vz-body-color-rgb: 33, 37, 41;
  --vz-body-bg-rgb: 255, 255, 255;
  --vz-font-sans-serif: "Open Sans", sans-serif;
  --vz-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --vz-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --vz-body-font-family: var(--vz-font-sans-serif);
  --vz-body-font-size: 0.875rem;
  --vz-body-font-weight: 400;
  --vz-body-line-height: 1.5;
  --vz-body-color: #212529;
  --vz-body-bg: #ffffff;
  --vz-border-width: 1px;
  --vz-border-style: solid;
  --vz-border-color: var(--vz-border-color);
  --vz-border-color-translucent: rgba(0, 0, 0, 0.175);
  --vz-border-radius: 0.25rem;
  --vz-border-radius-sm: 0.2rem;
  --vz-border-radius-lg: 0.3rem;
  --vz-border-radius-xl: 1rem;
  --vz-border-radius-2xl: 2rem;
  --vz-border-radius-pill: 50rem;
  --vz-link-color: var(--vz-link-color);
  --vz-link-hover-color: var(--vz-link-hover-color);
  --vz-code-color: #f672a7;
  --vz-highlight-bg: #fcf8e3;
  --vz-vertical-menu-bg: #f6f8fa;
  --vz-vertical-menu-item-color: #6d7080;
  --vz-vertical-menu-item-hover-color: #25a0e2;
  --vz-vertical-menu-item-active-color: #25a0e2;
  --vz-vertical-menu-sub-item-color: #7c7f90;
  --vz-vertical-menu-sub-item-hover-color: #25a0e2;
  --vz-vertical-menu-sub-item-active-color: #25a0e2;
  --vz-vertical-menu-title-color: #919da9;
  --vz-vertical-menu-bg-dark: #0A2B3D;
  --vz-vertical-menu-item-color-dark: #9aaab3;
  --vz-vertical-menu-item-hover-color-dark: #fff;
  --vz-vertical-menu-item-active-color-dark: #fff;
  --vz-vertical-menu-sub-item-color-dark: #9aaab3;
  --vz-vertical-menu-sub-item-hover-color-dark: #fff;
  --vz-vertical-menu-sub-item-active-color-dark: #fff;
  --vz-vertical-menu-title-color-dark: #aeafaf;
  --vz-header-bg: #fff;
  --vz-header-item-color: #e9ecef;
  --vz-header-bg-dark: #133b50;
  --vz-header-item-color-dark: #9aaab3;
  --vz-topbar-search-bg: #f3f3f9;
  --vz-topbar-user-bg: #f3f3f9;
  --vz-topbar-user-bg-dark: #214c62;
  --vz-footer-bg: #f6f8fa;
  --vz-footer-color: #98a6ad;
  --vz-topnav-bg: #fff;
  --vz-topnav-item-color: #6d7080;
  --vz-topnav-item-color-active: #25a0e2;
  --vz-twocolumn-menu-iconview-bg: #fff;
  --vz-twocolumn-menu-bg: #fff;
  --vz-twocolumn-menu-iconview-bg-dark: var(--vz-vertical-menu-bg-dark);
  --vz-twocolumn-menu-bg-dark: #0b2e41;
  --vz-twocolumn-menu-item-color-dark: var(--vz-vertical-menu-item-color-dark);
  --vz-twocolumn-menu-item-active-color-dark: #fff;
  --vz-twocolumn-menu-item-active-bg-dark: rgba(255, 255, 255, 0.15);
  --vz-boxed-body-bg: whitesmoke;
  --vz-heading-color: #495057;
  --vz-link-color: #25a0e2;
  --vz-link-hover-color: #25a0e2;
  --vz-border-color: #e9ebec;
  --vz-card-bg: #fff;
  --vz-card-cap-bg: #fff;
  --vz-card-bg-custom: #fff;
  --vz-card-logo-dark: block;
  --vz-card-logo-light: none;
  --vz-list-group-hover-bg: #f3f6f9;
  --vz-input-bg: #fff;
  --vz-input-border: #ced4da;
  --vz-input-focus-border: #92d0f1;
  --vz-input-disabled-bg: #eff2f7;
  --vz-input-group-addon-bg: #eff2f7;
  --vz-input-check-border: var(--vz-input-border);
  --vz-gutter-x: 1.5rem;
  --vz-gutter-y: 0;
}

body.service.code .avatar-xs {
  height: 2rem;
  width: 2rem;
}
body.service.code .btn {
  --vz-btn-padding-x: 0.9rem;
  --vz-btn-padding-y: 0.5rem;
  --vz-btn-font-size: 0.875rem;
  --vz-btn-font-weight: 500;
  --vz-btn-line-height: 1.5;
  --vz-btn-color: #212529;
  --vz-btn-bg: transparent;
  --vz-btn-border-width: 1px;
  --vz-btn-border-color: transparent;
  --vz-btn-border-radius: 0.25rem;
  --vz-btn-hover-border-color: transparent;
  --vz-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --vz-btn-disabled-opacity: 0.65;
  --vz-btn-focus-box-shadow: 0 0 0 0 rgba(var(--vz-btn-focus-shadow-rgb), .5);
  padding: var(--vz-btn-padding-y) var(--vz-btn-padding-x);
  font-size: var(--vz-btn-font-size);
  border-radius: var(--vz-btn-border-radius);
  border: var(--vz-btn-border-width) solid var(--vz-btn-border-color);
  border-radius: var(--vz-btn-border-radius);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
body.service.code .btn-group-sm > .btn,
body.service.code .btn-sm {
  --vz-btn-padding-y: 0;
  --vz-btn-padding-x: 0.3rem;
  --vz-btn-font-size: 0.765625rem;
  --vz-btn-border-radius: 0.2rem;
}
body.service.code .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
body.service.code .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
body.service.code .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
body.service.code .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select,
body.service.code .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
body.service.code .me-3 {
  margin-right: 1rem !important;
}
body.service.code .bg-soft-dark {
  background-color: rgba(var(--vz-dark-rgb), 0.18) !important;
}
body.service.code .bg-soft-success {
  background-color: rgba(0, 189, 157, 0.18) !important;
}
body.service.code .bg-soft-primary {
  background-color: rgba(37, 160, 226, 0.18) !important;
}
body.service.code .bg-soft-danger {
  background-color: rgba(240, 101, 72, 0.18) !important;
}
body.service.code .avatar-title {
  align-items: center;
  background-color: #25a0e2;
  color: #fff;
  display: flex;
  font-weight: 500;
  height: 100%;
  justify-content: center;
  width: 100%;
}
body.service.code .avatar-md {
  text-align: center;
}
body.service.code .avatar-md img {
  width: 66px !important;
}
body.service.code .progress {
  height: 18px;
}
body.service.code .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
body.service.code .row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--vz-gutter-x) * 0.5);
  padding-left: calc(var(--vz-gutter-x) * 0.5);
  margin-top: var(--vz-gutter-y);
}
body.service.code .input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
body.service.code .form-check {
  display: block;
  min-height: 1.3125rem;
  padding-left: 1.6em;
  margin-bottom: 0.125rem;
}
body.service.code .nav-tabs-custom {
  border-bottom: 1px solid var(--vz-gray-300);
}
body.service.code .rounded {
  border-radius: var(--vz-border-radius) !important;
}
body.service.code .border-bottom-0 {
  border-bottom: 0 !important;
}
body.service.code .nav {
  --vz-nav-link-padding-x: 1rem;
  --vz-nav-link-padding-y: 0.5rem;
  --vz-nav-link-color: var(--vz-link-color);
  --vz-nav-link-hover-color: var(--vz-link-hover-color);
  --vz-nav-link-disabled-color: #878a99;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
body.service.code .nav-link {
  display: block;
  padding: var(--vz-nav-link-padding-y) var(--vz-nav-link-padding-x);
  font-size: var(--vz-nav-link-font-size);
  font-weight: var(--vz-nav-link-font-weight);
  color: var(--vz-nav-link-color);
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
body.service.code .nav-tabs-custom .nav-item .nav-link {
  border: none;
  font-weight: 500;
}
body.service.code .nav-tabs-custom.card-header-tabs .nav-link {
  padding: 1rem 1rem;
}
body.service.code .card-header-tabs .nav-link.active {
  background-color: var(--vz-card-bg);
  border-bottom-color: var(--vz-card-bg);
}
body.service.code .nav-tabs-custom .nav-item {
  position: relative;
}
body.service.code .nav-tabs-custom .nav-item .nav-link::after {
  content: "";
  background: #25a0e2;
  height: 1px;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  transition: all 250ms ease 0s;
  transform: scale(0);
}
body.service.code .nav-tabs-custom .nav-item .nav-link.active:after {
  transform: scale(1);
}
body.service.code .nav-tabs-custom .nav-item .nav-link.active {
  color: #25a0e2;
}
body.service.code .card-header {
  background: #fff;
  padding: 0;
}
body.service.code .card-header-tabs {
  margin-right: calc(-0.5 * var(--vz-card-cap-padding-x));
  margin-bottom: calc(-1 * var(--vz-card-cap-padding-y));
  margin-left: calc(-0.5 * var(--vz-card-cap-padding-x));
  border-bottom: 0;
  padding-left: 1rem;
}
body.service.code .card-radio .form-check-label {
  background-color: var(--vz-card-bg-custom);
  border: 1px solid var(--vz-input-check-border);
  border-radius: 0.25rem;
  padding: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  position: relative;
  padding-right: 32px;
}
body.service.code .col-9 {
  max-width: 75% !important;
}
body.service.code .tab-content {
  border: 0;
}
body.service.code .form-select {
  display: block;
  width: 100%;
  padding: 0.5rem 2.7rem 0.5rem 0.9rem;
  -moz-padding-start: calc(0.9rem - 3px);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--vz-body-color);
  background-color: var(--vz-input-bg);
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px 12px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  border: 1px solid var(--vz-input-border);
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
body.service.code .content-wrapper {
  max-width: 1600px;
}
body.service.code .text-bg-primary {
  color: #fff !important;
  background-color: RGBA(37, 160, 226, var(--vz-bg-opacity, 1)) !important;
}
body.service.code .text-bg-secondary {
  color: #fff !important;
  background-color: RGBA(135, 138, 153, var(--vz-bg-opacity, 1)) !important;
}
body.service.code .text-bg-warning {
  color: #fff !important;
  background-color: RGBA(255, 188, 10, var(--vz-bg-opacity, 1)) !important;
}
body.service.code .badge {
  --vz-badge-padding-x: 0.65em;
  --vz-badge-padding-y: 0.35em;
  --vz-badge-font-size: 0.75em;
  --vz-badge-font-weight: 600;
  --vz-badge-color: #fff;
  --vz-badge-border-radius: 0.25rem;
  display: inline-block;
  padding: var(--vz-badge-padding-y) var(--vz-badge-padding-x);
  font-size: var(--vz-badge-font-size);
  font-weight: var(--vz-badge-font-weight);
  line-height: 1;
  color: var(--vz-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--vz-badge-border-radius);
}
body.service.code .simplebar-height-auto-observer-wrapper {
  box-sizing: inherit !important;
  height: 100%;
  width: 100%;
  max-width: 1px;
  position: relative;
  float: left;
  max-height: 1px;
  overflow: hidden;
  z-index: -1;
  padding: 0;
  margin: 0;
  pointer-events: none;
  flex-grow: inherit;
  flex-shrink: 0;
  flex-basis: 0;
}
body.service.code .simplebar-mask {
  direction: inherit;
  position: absolute;
  overflow: hidden;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: auto !important;
  height: auto !important;
  z-index: 0;
}
body.service.code .simplebar-offset,
body.service.code .simplebar-mask {
  position: relative;
}
body.service.code .simplebar-offset {
  direction: inherit !important;
  box-sizing: inherit !important;
  resize: none !important;
  position: absolute;
  top: 0;
  left: 0 !important;
  bottom: 0;
  right: 0 !important;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}
body.service.code .simplebar-content-wrapper {
  direction: inherit;
  box-sizing: border-box !important;
  position: relative;
  display: block;
  height: 100%;
  width: auto;
  visibility: visible;
  overflow: auto;
  max-width: 100%;
  max-height: 100%;
  scrollbar-width: none;
  padding: 0 !important;
}
body.service.code .simplebar-content-wrapper .g-wrap {
  padding: 1rem;
  font-size: 1.4rem;
}
body.service.code .simplebar-content-wrapper .g-wrap > i {
  opacity: 0.5;
  cursor: pointer;
}
body.service.code .simplebar-content-wrapper .g-wrap > i:hover {
  opacity: 1;
}
@media (min-width: 992px) {
  body.service.code .email-menu-sidebar-scroll {
    height: auto;
  }
}
body.service.code .email-content {
  width: 100%;
}
body.service.code .input-group.page-info-wrap {
  display: grid;
  grid-template-columns: 40% 20% 20% 20%;
}
body.service.code .input-group.page-info-wrap input {
  width: 100%;
}
body.service.code span.mcode-wrap {
  font-size: 1.2rem;
  position: absolute;
  top: -0.35rem;
  right: 2rem;
}
body.service.code span.mcode-wrap i {
  opacity: 0.5;
}
body.service.code span.mcode-wrap i:hover {
  opacity: 1;
  cursor: pointer;
}
body.service.code textarea.form-control {
  min-height: calc(1.5em + 1rem + 4px);
}
body.service.code .form-check-input {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
  vertical-align: top;
  background-color: var(--vz-input-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid var(--vz-input-check-border);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  print-color-adjust: exact;
}
body.service.code .form-switch-lg {
  padding-left: 2.75rem;
  min-height: 28px;
  line-height: 28px;
}
body.service.code .form-check {
  margin-top: 0.2em;
  position: relative;
  text-align: left;
}
body.service.code .form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
body.service.code .form-switch .form-check-input {
  width: 2em;
  margin-left: -2.5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
body.service.code .form-check-input:checked {
  background-color: #25a0e2;
  border-color: #25a0e2;
}
body.service.code .form-switch-lg .form-check-input {
  width: 48px;
  height: 24px;
  left: -0.75rem;
  position: relative;
}
body.service.code .justify-content-end {
  justify-content: flex-end !important;
}
body.service.code .gap-2 {
  gap: 0.5rem !important;
}
body.service.code .hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}
body.service.code .card-radio {
  padding: 0;
}
body.service.code .card-radio .form-check-label {
  background-color: var(--vz-card-bg-custom);
  border: 1px solid var(--vz-input-check-border);
  border-radius: 0.25rem;
  padding: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  position: relative;
  padding-right: 32px;
}
body.service.code .form-check label {
  cursor: pointer;
}
body.service.code .form-check-label {
  cursor: pointer;
  margin-bottom: 0;
}
body.service.code .badge-soft-success {
  color: #00bd9d;
  background-color: rgba(0, 189, 157, 0.1);
}
body.service.code .badge-soft-danger {
  color: #f06548;
  background-color: rgba(240, 101, 72, 0.1);
}
body.service.code .badge-soft-primary {
  color: #25a0e2;
  background-color: rgba(37, 160, 226, 0.1);
}
body.service.code .text-info {
  --vz-text-opacity: 1;
  color: rgba(var(--vz-info-rgb), var(--vz-text-opacity)) !important;
}
body.service.code .me-2 {
  margin-right: 0.5rem !important;
}
body.service.code .ms-auto {
  margin-left: auto !important;
}
body.service.code .right-pane {
  height: calc(100% + 3rem);
}
body.service.code .tab-content div.tab-pane .editor-wrap {
  height: auto;
  margin-top: -1rem;
  margin-bottom: 1rem;
}
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap {
  display: flex;
  width: 25%;
  margin: 0;
  align-items: flex-start;
  flex-wrap: wrap;
}
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap label.form-label {
  position: relative;
  top: 0.8rem;
}
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap .input-parameter {
  margin-top: 1rem;
}
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap .input-parameter input,
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap .input-parameter select {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap .input-parameter .btn-add,
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap .input-parameter .btn-del {
  cursor: pointer;
  position: absolute;
  right: 1.5rem;
  padding: 0.25rem 0.3rem;
}
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap .input-parameter .c-wrap {
  gap: 0.5rem;
  display: flex;
  align-items: center;
}
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap .input-parameter .c-wrap .label {
  font-size: 0.9rem;
}
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap .input-parameter .c-wrap .value {
  font-size: 0.8rem;
  text-decoration: underline;
}
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap .input-parameter .opt-wrap {
  padding: 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
}
body.service.code .tab-content div.tab-pane .editor-wrap .option-wrap .form-check {
  margin-top: 0.7rem;
}
body.service.code .tab-content div.tab-pane .editor-wrap .option-grid {
  display: flex;
  min-height: 3.3rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0;
  flex-wrap: wrap;
}
body.service.code .tab-content div.tab-pane ul {
  list-style: none;
  display: flex;
  margin-bottom: 0.2rem;
  padding-left: 2rem;
}
body.service.code .tab-content div.tab-pane ul.session-con {
  margin-top: 0.5rem;
}
body.service.code .tab-content div.tab-pane ul.session-con > .col-3 {
  display: flex;
}
body.service.code .tab-content div.tab-pane ul.session-con > .col-3 label {
  display: flex;
  align-items: center;
}
body.service.code .tab-content div.tab-pane ul.session-con span.label {
  display: inline-flex;
  align-items: center;
}
body.service.code .tab-content div.tab-pane label {
  margin-bottom: 0.5rem;
}
body.service.code .tab-content div.tab-pane div.db_opts {
  height: 4rem;
}
body.service.code .tab-content div.tab-pane .btn-toggle-all {
  cursor: pointer;
}
body.service.code .tab-content div.tab-pane#slots.show {
  display: flex;
  gap: 1rem;
}
body.service.code .tab-content div.tab-pane#slots.show .left,
body.service.code .tab-content div.tab-pane#slots.show .right {
  width: 50%;
}
body.service.code .tab-content div.tab-pane#slots.show .left {
  position: relative;
}
body.service.code .tab-content div.tab-pane#slots.show .left .btn-send {
  position: absolute;
  right: 0;
  margin-top: -3.2rem;
}
body.service.code .tab-content div.tab-pane#slots.show .left li.slot {
  width: calc(100% - 3.4rem);
  align-items: unset;
}
body.service.code .tab-content div.tab-pane#slots.show span.badge.x2 a {
  color: #fff;
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
body.service.code .tab-content div.tab-pane#slots.show .frame-loader {
  display: flex;
  gap: 0.5rem;
}
body.service.code .tab-content div.tab-pane#slots.show .frame-loader select {
  flex: 1;
}
body.service.code .tab-content div.tab-pane#slots.show ul.slots {
  flex-direction: column;
  padding-left: 0;
  gap: 0.5rem;
  position: relative;
}
body.service.code .tab-content div.tab-pane#slots.show ul.slots li {
  gap: 0.5rem;
  width: auto;
  display: flex;
}
body.service.code .tab-content div.tab-pane#slots.show ul.slots .slot-bf {
  position: absolute;
  right: 2rem;
  display: flex;
  flex-direction: column;
}
body.service.code .tab-content div.tab-pane#slots.show ul.slots .slot-bf span.slot-before {
  margin-top: -0.1rem;
}
body.service.code .tab-content div.tab-pane#slots.show ul.slots .slot-bf span.slot-after {
  margin-top: -0.6rem;
}
body.service.code .tab-content div.tab-pane#slots.show ul.slots .slot-bf i {
  cursor: pointer;
  opacity: 0.4;
}
body.service.code .tab-content div.tab-pane#slots.show ul.slots .slot-bf i:hover {
  opacity: 1;
}
body.service.code .tab-content div.tab-pane#slots.show .slots-wrap {
  margin-top: 0.5rem;
}
body.service.code .tab-content div.tab-pane#slots.show .right {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body.service.code .tab-content div.tab-pane#slots.show .right .original,
body.service.code .tab-content div.tab-pane#slots.show .right .translated,
body.service.code .tab-content div.tab-pane#slots.show .right .addon {
  height: 100%;
}
body.service.code .tab-content div.tab-pane#slots.show .right .original textarea,
body.service.code .tab-content div.tab-pane#slots.show .right .translated textarea,
body.service.code .tab-content div.tab-pane#slots.show .right .addon textarea {
  height: calc(100% - 2rem);
}
body.service.code .tab-content div.tab-pane .frame-loader {
  display: flex;
}
body.service.code .mail-list a {
  display: flex;
  align-items: center;
  color: #878a99;
  padding: 5px 0;
  font-weight: 500;
}
body.service.code .mail-list a span.linkable {
  position: absolute;
  right: 1.4rem;
  opacity: 0.2;
  padding: 0;
  color: #999;
}
body.service.code .mail-list a span.linkable.active {
  opacity: 1;
}
body.service.code .search-wrap {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1vh;
  width: 100%;
}
body.service.code .search-wrap .col-6 {
  display: inline-flex;
}
body.service.code .search-wrap .search-box .form-control {
  padding-left: 0.9rem;
}
body.service.code .search-wrap .btn-group.radio > label:not(:first-child) {
  border-left: 1px dashed #ccc;
}
body.service.code .search-label {
  display: inline-flex;
  width: 10vw;
  align-items: center;
  padding-left: 0.5vw;
  background: var(--vz-boxed-body-bg);
  border-radius: var(--vz-card-border-radius);
  height: 2.5rem;
}
body.service.code .search-box {
  padding-left: 0.5rem;
}
body.service.code .search-btn-wrap {
  display: flex;
  justify-content: center;
  border-top: 1px;
  border-color: var(--vz-gray-500);
  border-style: solid;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  margin-top: 1rem;
  padding-top: 1rem;
}
body.service.code .search-btn {
  padding: 0.5rem 1.5rem;
}
body.service.code .edit-btn-wrap {
  display: inline-flex;
  gap: 4px;
  position: absolute;
  right: 1.5rem;
  margin-top: 10px;
}
body.service.code body.level .edit-btn-wrap {
  margin-top: 0;
}
body.service.code .search-panel {
  display: inline-flex;
  border-color: var(--vz-gray-500);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  width: 100%;
}
body.service.code .search-panel .btn-wrap {
  gap: 0.5rem;
  width: 100px;
  display: inline-flex;
  flex-direction: column;
}
body.service.code .msg-wrap {
  margin-left: 1rem;
  display: inline-flex;
  gap: 10px;
  position: absolute;
  margin-top: -2.4rem;
  cursor: pointer;
}
body.service.code .msg-wrap .txt-refresh {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
}
body.service.code .msg-wrap .txt-refresh:hover {
  text-decoration: underline;
}
body.service.code .operation-wrapper,
body.service.code .inner-btn-wrapper {
  display: inline-flex;
  gap: 4px;
}
body.service.code .inner-btn-wrapper .btn {
  transform: scale(0.75);
}
body.service.code .p-top {
  padding-top: 1rem;
}
body.service.code .p-top.pagination-wrap {
  min-height: 4rem;
  text-align: center;
}
body.service.code a.btn.btn-link.link-success.fw-medium {
  background: var(--info);
  color: #fff;
  padding: 0.38rem 0.8rem;
}
body.service.code .modal-footer > div {
  gap: 0.25rem;
  display: flex;
}
body.service.code .list-wrap {
  position: relative;
}
body.service.code .list-wrap .sort-wrap {
  display: inline-flex;
  flex-direction: column;
  position: absolute;
  margin-top: -0.5rem;
  margin-left: 0.25rem;
  cursor: pointer;
}
body.service.code .list-wrap .table-nowrap {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  text-align: left;
  table-layout: auto;
}
body.service.code .list-wrap .no-img {
  background: #ccc;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
}
body.service.code .list-wrap .has-img {
  cursor: pointer;
}
body.service.code .list-wrap .cnt_images {
  position: absolute;
  margin-top: -1rem;
  margin-left: 2rem;
}
body.service.code .list-wrap .cnt_images .number {
  font-size: 11px;
}
body.service.code .list-btn-wrap {
  display: inline-flex;
  position: absolute;
  margin-top: 10px;
  align-items: center;
  gap: 1.2rem;
  margin-left: 1.5rem;
}
body.service.code .pagination {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 5px;
}
body.service.code .pagination.square a {
  border-radius: 2px !important;
}
body.service.code .pagination.s-round a {
  border-radius: 5px !important;
}
body.service.code .pagination li {
  display: inline;
  text-align: center;
}
body.service.code .pagination li:not(:last-child) {
  margin-right: 6px;
}
[dir=rtl] body.service.code .pagination li:not(:last-child) {
  margin-left: 6px;
  margin-right: unset;
}
body.service.code .pagination a {
  float: left;
  display: block;
  font-size: 14px;
  min-width: 31px;
  text-decoration: none;
  padding: 5px 12px;
  margin-left: -1px;
  line-height: 1.5;
  border-radius: 50%;
  transition: all 0.5s ease;
  background: var(--vz-success);
  color: #fff;
}
body.service.code .pagination a.active, body.service.code .pagination a:hover {
  opacity: 0.5;
}
body.service.code .pagination a:active {
  outline: none;
}
body.service.code .pagination a.prev, body.service.code .pagination a.next {
  opacity: 0.65;
}
body.service.code .radio-wrap {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  gap: 0.25rem;
  flex-wrap: wrap;
}
body.service.code .radio-wrap .opt-wrap {
  min-width: 5rem;
}
body.service.code .radio-wrap label {
  margin: 0;
  padding: 0 0.5rem;
  position: relative;
  line-height: 2.3rem;
  top: 2px;
}
body.service.code .ext-group {
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 0.5rem;
  margin-bottom: 2rem;
}
body.service.code .ext-group input[type=text] {
  width: calc(100% - 1.2rem);
}
body.service.code .ext-group .radio-wrap label {
  top: 0;
  font-size: small;
  line-height: unset;
}
body.service.code .ext-group .form-check.form-switch-lg {
  margin-top: 0.25rem;
}
body.service.code .ext-group .field-wrap .label {
  align-items: center;
  display: flex;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 100%;
  background: var(--vz-boxed-body-bg);
  border-radius: var(--vz-border-radius-sm);
  min-height: 2.5rem;
  word-break: keep-all;
}
body.service.code .ext-group .field-wrap ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}
body.service.code .ext-group .field-wrap ul li {
  width: calc(20% - 4px);
}
body.service.code .ext-group .field-wrap ul label.grid .grid-block {
  height: 5rem;
}
body.service.code .ext-group label.grid {
  width: 100%;
  margin-bottom: 0;
}
body.service.code .ext-group label.grid .grid-block {
  min-height: 5rem;
  max-height: 100%;
  width: auto;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--vz-boxed-body-bg);
  border-radius: 4px;
  display: flex;
}
body.service.code .ext-group label.grid .grid-block .btn-image-upload {
  font-size: 3rem;
  color: var(--vz-input-bg);
  position: absolute;
}
body.service.code .ext-group label.grid .grid-block img {
  width: 100%;
  height: auto;
}
body.service.code .ext-group .agg-wrap {
  width: calc(100% - 3rem);
  display: flex;
  margin: 0 auto;
}
body.service.code .ext-group .agg-wrap span.label {
  margin-left: 0.5rem !important;
}
body.service.code .ext-group .agg-title {
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vz-body-bg);
  border-radius: var(--vz-border-radius-sm);
}
body.service.code .ext-group .field-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
body.service.code .ext-group .multi-field-wrap,
body.service.code .ext-group .multi-field {
  display: inline-flex;
}
body.service.code .ext-group span.sub-label {
  min-width: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
body.service.code .sel-range-tab {
  width: 135px;
}
body.service.code .sel-range-tab label {
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  margin: 0;
  cursor: pointer;
}
body.service.code .dp__action_buttons button {
  min-width: 52px;
  min-height: 32px;
}
body.service.code .dp__pointer {
  font-size: small !important;
}
body.service.code .search-box .dp__clear_icon {
  display: none !important;
}
body.service.code .multi-table .list-btn-wrap,
body.service.code .multi-table .edit-btn-wrap {
  position: relative;
  width: 100%;
  justify-content: flex-end;
  right: 0;
  margin-bottom: 10px;
}
body.service.code .text-wrap {
  min-height: 2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
body.service.code .tag-wrap {
  min-height: 2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
body.service.code .tag-wrap ul {
  display: inline-flex;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  row-gap: 5px;
}
body.service.code .tag-wrap ul li {
  font-size: 1em;
  line-height: 1.3em;
  margin-right: 6px;
}
body.service.code .tag-wrap ul li i {
  margin-left: 6px;
  cursor: pointer;
}
body.service.code .select-wrapper select.form-select {
  padding: 0.2rem 1.25rem 0.2rem 0.5rem;
  background-position: right 0.2rem center;
}
body.service.code .checkbox-wrap {
  display: flex;
  gap: 0.8rem;
}
body.service.code table.inner-table {
  margin: 1rem auto;
  width: 90%;
}
body.service.code table.inner-table th,
body.service.code table.inner-table td {
  text-align: center;
}
body.service.code table.inner-table th.inner-header {
  height: 2rem;
  border-bottom: 1px solid;
  border-bottom-color: var(--vz-header-item-color-dark);
  background: var(--vz-light);
}
body.service.code table.inner-table tr {
  border-bottom: 1px dotted;
  border-bottom-color: var(--vz-input-focus-border);
  height: 1.6rem;
}
body.service.code .modal.ext-modal .modal-dialog .modal-content {
  min-height: 80vh;
}
body.service.code .cnt-wrapper .btn {
  opacity: 0.5;
}
body.service.code .cnt-wrapper.active .btn {
  opacity: 1;
}
body.service.code .modal-extra {
  position: absolute;
  height: 100%;
  top: 0;
  background: #fff;
  border-radius: var(--vz-modal-border-radius);
}
body.service.code .modal-extra .header .btn-close {
  padding: 0;
  border: none;
  background: none;
  position: absolute;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
}
body.service.code .modal-extra.left-panel {
  width: 24.5vw;
  position: absolute;
  display: block;
  left: 0;
  top: auto;
  height: auto;
  margin-top: -1.25rem;
  border-radius: 2px;
}
body.service.code .modal-extra.right-panel {
  width: 24.5vw;
  position: absolute;
  display: block;
  right: 0;
  top: auto;
  height: auto;
  margin-top: -1.25rem;
  border-radius: 2px;
}
body.service.code .modal-extra .btn-box {
  padding: 0.5rem;
  display: flex;
  gap: 4px;
}
body.service.code .modal-extra > .header {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  padding: 1rem;
  font-size: 1rem;
}
body.service.code .panel-mode-wrap {
  display: inline;
  position: relative;
  left: 16px;
}
body.service.code .panel-mode-wrap > div {
  display: inline-flex;
  cursor: pointer;
  z-index: 5;
}
body.service.code .panel-mode-wrap > div i {
  font-size: 24px;
  opacity: 0.2;
}
body.service.code .panel-mode-wrap > div i.l-overlay {
  width: 12px;
  overflow: hidden;
  position: absolute;
  opacity: 0.4;
}
body.service.code .panel-mode-wrap > div i.r-overlay {
  width: 12px;
  overflow: hidden;
  position: absolute;
  margin-left: 10px;
  opacity: 0.4;
}
body.service.code .panel-mode-wrap > div i.active {
  opacity: 1;
}
body.service.code .logo-text {
  font-size: 1.25rem;
}
@media (min-width: 768px) {
  body.service.code body .main-content {
    margin-top: 75px;
  }
}
body.service.code body {
  --easy-table-body-row-font-size: 1rem;
}
body.service.code body.menu .add-btn-wrap {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.25rem;
}
body.service.code body.menu .list-wrap .col-6 {
  margin-bottom: 2rem;
}
body.service.code .main-content div#app {
  width: 90%;
  margin: 0 auto;
  position: relative;
  padding-top: 5vh;
}
@media (max-width: 767.98px) {
  body.service.code .main-content div#app {
    width: 100%;
  }
}
body.service.code .date-wrap {
  width: 8vw;
}
body.service.code #modal .ext-group-wrap .modal-header {
  padding: 2rem 1rem 0.5rem 1rem;
  margin-bottom: 2rem;
  font-size: 1.2rem;
  border-bottom-color: var(--vz-gray-500);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
body.service.code .modal-lg .modal-container {
  width: 50vw !important;
}
body.service.code .modal-xl .modal-container {
  width: 66vw !important;
}
body.service.code .modal-xxl .modal-container {
  width: 80vw !important;
}
body.service.code .modal-container {
  background-image: unset;
}
body.service.code .dcc {
  justify-content: center;
  align-items: center;
}
body.service.code .v-enter-active,
body.service.code .v-leave-active {
  transition: opacity 0.5s ease;
}
body.service.code .v-enter-from,
body.service.code .v-leave-to {
  opacity: 0;
}
body.service.code div.flag-wrapper img {
  width: 50px;
  height: 50px;
  margin: 0.25rem;
}
body.service.code i.sort-arrow {
  border: 5px solid transparent;
  margin-left: 10px;
  display: inline-block;
  height: 0;
  width: 0;
  cursor: pointer;
  position: absolute;
  border-bottom-color: var(--easy-table-header-font-color);
}
body.service.code i.sort-arrow:hover {
  border-bottom-color: var(--vz-link-hover-color);
}
body.service.code i.sort-arrow.disabled {
  border-bottom-color: var(--vz-gray-500);
  cursor: unset;
}
body.service.code i.sort-arrow.disabled:hover {
  border-bottom-color: var(--vz-gray-500);
}
body.service.code i.sort-arrow.desc {
  transform: rotate(180deg);
  position: absolute;
  margin-left: 25px;
  margin-top: 5px;
  cursor: pointer;
}
body.service.code.product .pt-title-wrap {
  display: flex;
  flex-direction: column;
}
body.service.code.product .content-wrapper {
  max-width: 1760px;
}
body.service.code.product .list-wrap {
  position: relative;
  width: calc(100vw - 22px);
  left: calc((1760px - 100vw) / 2);
}
body.service.code.product .tab-content {
  padding: 1rem 1rem;
}
body.service.code.product .thumb2-wrap.col-10 {
  max-height: 20px;
  overflow: hidden;
}
body.service.code.product .group_2 .tab-content {
  overflow-y: auto;
  max-height: 60vh;
}
body.service.code.faq .category .btn-wrap {
  position: absolute;
  right: -8rem;
  top: -0.3rem;
  display: flex;
  gap: 0.2rem;
}
body.service.code.faq .category .btn-wrap button {
  padding: 0 0.4rem !important;
}
body.service.code.faq .category-wrap {
  display: flex;
  gap: 0.5rem;
  width: 90%;
}
body.service.code ul.grid {
  list-style: none;
  padding: 0;
}
body.service.code.front li.nav-item {
  min-width: 10%;
}
body.service.code.front li.nav-item .menu-link i:before {
  font-size: 1.2rem;
  color: #1e80b5;
}
body.service.code.front li.nav-item .menu-link span {
  font-size: 1.1rem;
  color: #1e80b5;
}
body.service.code.front li.nav-item .menu-link.active i:before {
  color: #333;
  font-weight: 600;
}
body.service.code.front li.nav-item .menu-link.active span {
  color: #333;
  font-weight: 600;
}
@media (min-width: 992px) {
  body.service.code .email-menu-sidebar {
    min-width: 280px;
    max-width: 280px;
    /*      height: calc(100vh - 70px - 60px - 8px);*/
  }
  body.service.code .email-menu-sidebar-scroll {
    height: auto;
  }
}
body.service.code div.need-input {
  height: 56.5vh;
  align-items: center;
  font-size: 1.2rem;
}
body.service.code div.need-input span.desc {
  text-align: center;
}
body.service.code div.alt-wrap {
  position: absolute;
  margin-left: 1.5rem;
  margin-top: -7rem;
}
body.service.code div.list-layout-wrap .active img {
  opacity: 1 !important;
}
body.service.code div.tab-pane .email-wrapper.dx-modal span.sort-wrap {
  position: relative;
  left: -4rem;
  top: -0.45rem;
}
body.service.code div.tab-pane .email-wrapper.dx-modal ul li:nth-child(1) {
  width: 10.4%;
}
body.service.code div.tab-pane .email-wrapper.dx-modal a.btn-toggle-insert-opt {
  position: relative;
  right: -16px;
  color: #333;
}
body.service.code div.tab-pane .email-wrapper.dx-modal a.btn-toggle-insert-opt i.mdi {
  font-size: 1.2rem;
}
body.service.code div.tab-pane .ui-sample {
  display: flex;
  justify-content: space-between;
  padding: 0 1.5rem;
}
body.service.code div.tab-pane .ui-sample .html-page-label {
  position: absolute;
  margin-top: -2rem;
}
body.service.code div.tab-pane .ui-sample .js-page-label {
  position: absolute;
  margin-top: -2rem;
  left: 52%;
}
body.service.code div.tab-pane .ui-sample .html-page {
  height: 33rem;
  width: 48%;
  background: #DCF6F9;
  border-radius: 0.25rem;
}
body.service.code div.tab-pane .ui-sample .js-page {
  height: 33rem;
  width: 48%;
  background: #CCF4F0;
  border-radius: 0.25rem;
}
body.service.code div.tab-pane .ui-sample > div > ul {
  flex-direction: column;
}
body.service.code div.tab-pane .ui-sample > div > ul > li {
  width: 100%;
}
body.service.code div.tab-pane .ui-sample .t1 {
  margin-left: 1rem;
}
body.service.code div.tab-pane .ui-sample .t2 {
  margin-left: 2rem;
}
body.service.code div.tab-pane .ui-sample .t3 {
  margin-left: 3rem;
}
body.service.code div.tab-pane ul {
  list-style: none;
  display: flex;
  margin-bottom: 0.2rem;
}
body.service.code div.tab-pane ul.list-field-header-wrap {
  height: 3rem;
  align-items: center;
  margin-bottom: 0.6rem;
}
body.service.code div.tab-pane ul.list-field-wrap.hide {
  background: var(--vz-input-disabled-bg);
}
body.service.code div.tab-pane ul.list-field-wrap .ic-wrap {
  display: flex;
  justify-content: center;
}
body.service.code div.tab-pane ul.list-field-wrap .ic-wrap .ic {
  cursor: pointer;
  width: 2rem;
  opacity: 0.35;
}
body.service.code div.tab-pane ul.list-field-wrap .ic-wrap .ic.active {
  opacity: 1;
}
body.service.code div.tab-pane ul.list-field-wrap .ic-wrap .ic i {
  font-size: 1.5rem;
}
body.service.code div.tab-pane ul.hook-icons {
  position: absolute;
  padding: 0;
  flex-wrap: wrap;
  -moz-column-gap: 0.3rem;
       column-gap: 0.3rem;
  width: 85%;
  margin: 0 auto;
}
body.service.code div.tab-pane ul.hook-icons li {
  position: absolute;
  display: block;
  width: auto;
  font-size: 1.2rem;
  padding: 0;
  margin: 0;
  height: auto;
  transform: scale(0.75);
  opacity: 0.85;
}
body.service.code div.tab-pane ul.hook-icons li.before_list {
  top: 8.6rem;
  left: 15rem;
}
body.service.code div.tab-pane ul.hook-icons li.after_list {
  top: 14rem;
  left: 15.1rem;
}
body.service.code div.tab-pane ul.hook-icons li.before_list_button {
  top: 10.2rem;
  left: 20rem;
}
body.service.code div.tab-pane ul.hook-icons li.after_list_button {
  top: 11.3rem;
  left: 20.1rem;
}
body.service.code div.tab-pane ul.hook-icons li.before_close_button {
  top: 24.1rem;
  left: 20.1rem;
}
body.service.code div.tab-pane ul.hook-icons li.after_close_button {
  top: 25.3rem;
  left: 20.2rem;
}
body.service.code div.tab-pane ul.hook-icons li.before_detail {
  top: 14.9rem;
  left: 16.9rem;
}
body.service.code div.tab-pane ul.hook-icons li.after_detail {
  top: 18.9rem;
  left: 17.1rem;
}
body.service.code div.tab-pane ul.hook-icons li.before_db_view {
  top: 0;
  left: 10rem;
}
body.service.code div.tab-pane ul.hook-icons li.after_db_view {
  top: 1.2rem;
  left: 10.1rem;
}
body.service.code div.tab-pane ul.hook-icons li.after_css_hook {
  top: 4.1rem;
  left: 10rem;
}
body.service.code div.tab-pane ul.hook-icons li.after_form_hook {
  top: 20.2rem;
  left: 19.9rem;
}
body.service.code div.tab-pane ul.hook-icons li.js_hook {
  top: 29.6rem;
  left: 13.1rem;
}
body.service.code div.tab-pane ul.hook-icons li.backend_hook {
  top: 29.6rem;
  left: 17rem;
}
body.service.code div.tab-pane ul.hook-icons li.mounted_hook {
  top: 17.9rem;
  left: 42rem;
}
body.service.code div.tab-pane ul.hook-icons li.watch_hook {
  top: 14.7rem;
  left: 42rem;
}
body.service.code div.tab-pane ul.hook-icons li.computed_hook {
  top: 11.5rem;
  left: 42rem;
}
body.service.code div.tab-pane ul.hook-icons li.data_hook {
  top: 6.8rem;
  left: 42rem;
}
body.service.code div.tab-pane ul.hook-icons li.render_hook {
  top: 22.4rem;
  left: 43.8rem;
}
body.service.code div.tab-pane ul.hook-icons li.custom_mount_hook {
  top: 6.8rem;
  left: 10rem;
}
body.service.code div.tab-pane ul.hook-icons li.custom_import_hook {
  top: 2.1rem;
  left: 49rem;
}
body.service.code div.tab-pane ul.hook-icons li.custom_component_hook {
  top: 28.7rem;
  left: 41.7rem;
}
body.service.code div.tab-pane ul.hook-icons li.ckeditor_hook {
  top: 26.7rem;
  left: 41.7rem;
}
body.service.code div.tab-pane ul.hook-icons li.method_hook {
  top: 24.2rem;
  left: 39rem;
}
body.service.code div.tab-pane ul li {
  width: 12%;
}
body.service.code div.tab-pane ul li:nth-child(1) {
  width: 9%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.service.code div.tab-pane ul li:nth-child(1) span.sort-wrap {
  position: relative;
  left: -3rem;
  top: -0.45rem;
}
body.service.code div.tab-pane ul li .form-switch-lg {
  padding-left: 4.2rem;
  padding-top: 0.2rem;
}
body.service.code div.tab-pane ul li.columns {
  width: 42% !important;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding-left: 12px;
}
body.service.code div.tab-pane ul li.component {
  width: 15% !important;
}
body.service.code div.tab-pane ul li.component-opt {
  width: 25% !important;
  display: flex;
}
body.service.code div.tab-pane ul li.list-field-header.header {
  position: relative;
  left: 1rem;
}
body.service.code div.tab-pane .hook .wide-view {
  position: absolute;
  width: calc(100% - 2rem);
  height: 60vh;
  z-index: 999;
  border: 2px solid;
  border-color: var(--vz-input-border);
}
body.service.code div.tab-pane .simplebar-offset,
body.service.code div.tab-pane .simplebar-mask {
  position: relative;
}
body.service.code div.tab-pane .integrate {
  display: flex;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 1rem;
}
body.service.code div.tab-pane .type-fake {
  color: crimson;
}
body.service.code .eye-toggle {
  position: absolute;
  z-index: 10;
  right: 5px;
  margin-top: -30px;
  opacity: 0.25;
  cursor: pointer;
}
body.service.code i.btn-remove {
  position: absolute;
  margin-left: -18px;
  margin-top: 3px;
  cursor: pointer;
}
body.service.code .add-field-wrap {
  margin-top: 0.25rem;
}
body.service.code .add-field-wrap .select-field-wrap,
body.service.code .add-field-wrap .new_field_wrap {
  display: flex;
  gap: 4px;
}
body.service.code .add-field-wrap button {
  width: 4rem;
}
body.service.code textarea {
  resize: both;
  z-index: 10;
  position: relative;
  background: #fff;
}
body.service.code #hook textarea,
body.service.code .layer_editor {
  height: 100%;
  width: 100%;
  line-height: 31px;
  background-image: -webkit-linear-gradient(left, white 0, transparent 0), -webkit-linear-gradient(right, white 0, transparent 0), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-repeat: repeat-y;
  background-size: 100% 100%, 100% 100%, 100% 31px;
  background-attachment: local;
  padding-left: 16px;
  font-size: 16px;
  padding-top: 0;
  padding-bottom: 0;
}
body.service.code textarea.layer_editor {
  position: absolute;
  width: 44vw;
  height: 50vh;
  right: 24.3vw;
}
body.service.code .router-wrap ul {
  display: flex;
  list-style: none;
  margin: 0.25rem;
  gap: 4px;
}
body.service.code .router-wrap ul li.role {
  width: 30%;
  padding-left: 0.5rem;
  align-items: center;
  display: inline-flex;
}
body.service.code a.btn-toggle-required {
  color: unset;
  min-width: 1.6rem;
}
body.service.code .load-item {
  width: 90%;
  margin: 10px auto;
  background: #fff;
  display: flex;
  gap: 5px;
}
body.service.code .top-part {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #fdfdfd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body.service.code .top-part .info-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: 2rem;
}
body.service.code .top-part .info-wrap.product-head, body.service.code .top-part .info-wrap.faq-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
body.service.code .top-part .info-wrap.product-head .preset_name, body.service.code .top-part .info-wrap.faq-head .preset_name {
  grid-column: span 2;
}
body.service.code .top-part .info-wrap.product-head .preset_menu .label, body.service.code .top-part .info-wrap.product-head .category .label, body.service.code .top-part .info-wrap.faq-head .preset_menu .label, body.service.code .top-part .info-wrap.faq-head .category .label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #444;
  min-width: 120px;
  position: absolute;
  margin-top: -2rem;
}
body.service.code .top-part .info-wrap.product-head .ic-db-export, body.service.code .top-part .info-wrap.faq-head .ic-db-export {
  opacity: 0.3;
}
body.service.code .top-part .info-wrap.product-head .ic-db-export.active, body.service.code .top-part .info-wrap.faq-head .ic-db-export.active {
  opacity: 1;
}
body.service.code .top-part .info-wrap .preset_name,
body.service.code .top-part .info-wrap .preset_type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
body.service.code .top-part .info-wrap .preset_name .label,
body.service.code .top-part .info-wrap .preset_type .label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #444;
  min-width: 120px;
}
body.service.code .top-part .info-wrap .preset_name .txt,
body.service.code .top-part .info-wrap .preset_type .txt {
  font-size: 1rem;
  color: #666;
}
body.service.code .top-part .info-wrap .option_keys i.mdi {
  cursor: pointer;
}
body.service.code .top-part .ai-menu {
  max-width: 50%;
}
body.service.code .top-part .ai-menu,
body.service.code .top-part .ai-product > div {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
body.service.code .top-part .ai-menu .title,
body.service.code .top-part .ai-product > div .title {
  font-weight: bold;
  font-size: 1.2rem;
  color: #333;
  margin-right: auto;
}
body.service.code .top-part .ai-menu > div,
body.service.code .top-part .ai-product > div > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
body.service.code .top-part .ai-menu > div .label,
body.service.code .top-part .ai-product > div > div .label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #555;
}
body.service.code .top-part .ai-menu > div select,
body.service.code .top-part .ai-product > div > div select {
  flex: 1;
  min-width: 80px;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}
body.service.code .top-part .ai-menu > div select:hover,
body.service.code .top-part .ai-product > div > div select:hover {
  border-color: #888;
}
body.service.code .top-part .ai-menu > div select:focus,
body.service.code .top-part .ai-product > div > div select:focus {
  outline: none;
  border-color: #5bc0de;
  box-shadow: 0 0 4px rgba(91, 192, 222, 0.6);
}
body.service.code .top-part .ai-menu:nth-child(1),
body.service.code .top-part .ai-product > div:nth-child(1) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
body.service.code .top-part .ai-menu:nth-child(2),
body.service.code .top-part .ai-product > div:nth-child(2) {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  justify-content: flex-end;
}
body.service.code .top-part .ai-menu .select-option_key,
body.service.code .top-part .ai-menu .cnt_product,
body.service.code .top-part .ai-product > div .select-option_key,
body.service.code .top-part .ai-product > div .cnt_product {
  display: flex;
  align-items: center;
  gap: 1rem;
}
body.service.code .top-part .ai-menu .select-option_key .label,
body.service.code .top-part .ai-menu .cnt_product .label,
body.service.code .top-part .ai-product > div .select-option_key .label,
body.service.code .top-part .ai-product > div .cnt_product .label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #555;
}
body.service.code .top-part .ai-menu .select-option_key select,
body.service.code .top-part .ai-menu .cnt_product select,
body.service.code .top-part .ai-product > div .select-option_key select,
body.service.code .top-part .ai-product > div .cnt_product select {
  flex: 1;
  min-width: 120px;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}
body.service.code .top-part .ai-menu .select-option_key select:hover,
body.service.code .top-part .ai-menu .cnt_product select:hover,
body.service.code .top-part .ai-product > div .select-option_key select:hover,
body.service.code .top-part .ai-product > div .cnt_product select:hover {
  border-color: #888;
}
body.service.code .top-part .ai-menu .select-option_key select:focus,
body.service.code .top-part .ai-menu .cnt_product select:focus,
body.service.code .top-part .ai-product > div .select-option_key select:focus,
body.service.code .top-part .ai-product > div .cnt_product select:focus {
  outline: none;
  border-color: #5bc0de;
  box-shadow: 0 0 4px rgba(91, 192, 222, 0.6);
}
body.service.code .top-part .ai-menu .price-range,
body.service.code .top-part .ai-product > div .price-range {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  justify-content: flex-end;
}
body.service.code .top-part .ai-menu .price-range .label,
body.service.code .top-part .ai-product > div .price-range .label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #555;
}
body.service.code .top-part .ai-menu .price-range .value,
body.service.code .top-part .ai-product > div .price-range .value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
body.service.code .top-part .ai-menu .price-range .value input,
body.service.code .top-part .ai-product > div .price-range .value input {
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 80px;
}
body.service.code .top-part .ai-menu .price-range .value input:focus,
body.service.code .top-part .ai-product > div .price-range .value input:focus {
  outline: none;
  border-color: #5bc0de;
  box-shadow: 0 0 4px rgba(91, 192, 222, 0.6);
}
body.service.code .top-part .option_keys {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: -3.25rem;
  margin-left: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  position: absolute;
  max-width: 27.7rem;
}
body.service.code .top-part .option_keys .option_key {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}
body.service.code .top-part .option_keys .option_key:hover {
  background-color: #f1f1f1;
  transform: scale(1.05);
}
body.service.code .top-part .option_keys .option_key i {
  margin-left: 0.5rem;
  font-size: 1.1rem;
}
body.service.code .top-part .btn {
  padding: 0.4rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.2s ease-in-out;
}
body.service.code .top-part .btn.btn-primary {
  background: #5bc0de;
  border: none;
}
body.service.code .top-part .btn.btn-primary:hover {
  background: #4aa7c9;
}
body.service.code.product .top-part .selector select.form-select, body.service.code.faq .top-part .selector select.form-select {
  max-width: 20rem;
}
body.service.code.product .top-part .selector.dest, body.service.code.faq .top-part .selector.dest {
  display: flex;
  gap: 0.25rem;
  padding-top: 0.25rem;
}
body.service.code.product .top-part.parser_mode > div, body.service.code.faq .top-part.parser_mode > div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
body.service.code.product .top-part.parser_mode > div select, body.service.code.faq .top-part.parser_mode > div select {
  flex: 1;
}
body.service.code.product .top-part.parser_mode > div.source-wrap, body.service.code.faq .top-part.parser_mode > div.source-wrap {
  flex-direction: column;
}
body.service.code.product .top-part.parser_mode > div.source-wrap > div, body.service.code.faq .top-part.parser_mode > div.source-wrap > div {
  display: grid;
  flex-direction: row;
  grid-template-columns: 8rem calc(100% - 8rem);
  width: 100%;
  align-items: center;
}
body.service.code.product .top-part.parser_mode > div.source-wrap > div .label, body.service.code.faq .top-part.parser_mode > div.source-wrap > div .label {
  padding-left: 0.5rem;
}
body.service.code.product .top-part.parser_mode > div.field-mapper, body.service.code.faq .top-part.parser_mode > div.field-mapper {
  width: 90%;
  position: relative;
  padding-bottom: 1.5rem;
}
body.service.code.product .top-part.parser_mode > div.field-mapper ul, body.service.code.faq .top-part.parser_mode > div.field-mapper ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.25rem;
}
body.service.code.product .top-part.parser_mode > div.field-mapper ul.necessary_fields, body.service.code.faq .top-part.parser_mode > div.field-mapper ul.necessary_fields {
  align-items: flex-start;
}
body.service.code.product .top-part.parser_mode > div.field-mapper ul li, body.service.code.faq .top-part.parser_mode > div.field-mapper ul li {
  display: grid;
  align-items: center;
  grid-template-columns: calc(50% - 2rem) 2rem 50%;
}
body.service.code.product .top-part.parser_mode > div.field-mapper ul li span.label, body.service.code.faq .top-part.parser_mode > div.field-mapper ul li span.label {
  max-width: 100%;
  overflow: hidden;
}
body.service.code.product .top-part.parser_mode > div.field-mapper .btn-wrap, body.service.code.faq .top-part.parser_mode > div.field-mapper .btn-wrap {
  position: absolute;
  right: -0.5rem;
  bottom: -0.5rem;
  display: flex;
  gap: 0.5rem;
}
body.service.code.product .top-part.parser_mode > div.field-mapper .btn-wrap .wh, body.service.code.faq .top-part.parser_mode > div.field-mapper .btn-wrap .wh {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
body.service.code.product .top-part.parser_mode > div.field-mapper .btn-wrap .wh input, body.service.code.faq .top-part.parser_mode > div.field-mapper .btn-wrap .wh input {
  width: 20rem;
}
body.service.code.faq .top-part.parser_mode > div.field-mapper ul {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
}
body.service.code .menu-list {
  display: flex;
  flex-wrap: wrap;
}
body.service.code .session-con-wrap {
  padding-top: 1.5rem;
}
body.service.code .context-menu {
  position: fixed;
  left: var(--left);
  top: var(--top);
  z-index: 9999;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  display: flex;
}
body.service.code .context-menu ul.button-actions {
  padding: 0.8rem 0;
  margin: 0;
}
body.service.code .context-menu ul.button-actions li.button-action {
  padding: 0.25rem 1rem;
  cursor: pointer;
  list-style: none;
}
body.service.code .context-menu ul.button-actions li.button-action:hover {
  background: #f0f0f0;
}
body.service.code .context-menu ul.button-actions li.button-action.save {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  gap: 0.5rem;
}
body.service.code .context-menu ul.button-actions li.button-action.save label {
  position: absolute;
  overflow: hidden;
  width: 15vw;
  height: 1.2vw;
}
body.service.code .context-menu ul.button-actions li.button-action.save .btn {
  height: 100%;
}
body.service.code .context-menu ul.button-actions li.button-action.save .input-group {
  justify-content: flex-end;
}
body.service.code .context-menu ul.button-actions .input-group.sl {
  justify-content: space-between;
}
body.service.code .context-menu ul.button-actions.extra {
  border-left: 1px solid #ccc;
}
body.service.code .context-menu ul.button-actions.extra.define-snippet, body.service.code .context-menu ul.button-actions.extra.load-snippet {
  width: 16vw;
}
body.service.code .context-menu ul.button-actions.extra .btn-wrap {
  text-align: right;
  margin-right: 1rem;
}
body.service.code .context-menu ul.button-actions.extra .btn-wrap .btn-close {
  color: #f5375c !important;
  cursor: pointer;
}
body.service.code .context-menu ul.snippets.results {
  position: absolute;
  top: 100%;
  background: #fff;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  list-style: none;
  padding: 1rem;
  margin: 0;
  margin-top: 1px;
}
body.service.code .context-menu ul.snippets.results .ident {
  font-weight: 600;
}
body.service.code .context-menu ul.snippets.results li.snippet:hover {
  background: #f0f0f0;
}
body.service.code .context-menu ul.snippets.results .hooks {
  display: flex;
  gap: 0.5rem;
}
body.service.code .context-menu ul.snippets.results .btn-append {
  cursor: pointer;
}
body.service.code .context-menu .clipboard-area {
  position: absolute;
  left: 100%;
  width: 10vw;
  height: 10vh;
}
body.service.code .context-menu .clipboard-area textarea {
  height: 100%;
}

body.product .content, body.menu .content, body.faq .content {
  position: relative;
}
body.product .content .table .active, body.menu .content .table .active, body.faq .content .table .active {
  color: tomato;
}
body.product .content .settings, body.menu .content .settings, body.faq .content .settings {
  position: absolute;
  right: -4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body.product .content .settings ul, body.menu .content .settings ul, body.faq .content .settings ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
body.product .content .settings ul li, body.menu .content .settings ul li, body.faq .content .settings ul li {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}
body.product .content .settings ul li i, body.menu .content .settings ul li i, body.faq .content .settings ul li i {
  font-size: 1.5rem;
  color: #666;
  transition: color 0.3s;
}
body.product .content .settings ul li:hover, body.menu .content .settings ul li:hover, body.faq .content .settings ul li:hover {
  background: #ddd;
}
body.product .content .settings ul li.active, body.menu .content .settings ul li.active, body.faq .content .settings ul li.active {
  background: #60b7cc;
}
body.product .content .settings ul li.active i, body.menu .content .settings ul li.active i, body.faq .content .settings ul li.active i {
  color: white;
}
body.product .content .category-code, body.menu .content .category-code, body.faq .content .category-code {
  flex: 1;
}
body.product #modal .thumb2-wrap, body.menu #modal .thumb2-wrap, body.faq #modal .thumb2-wrap {
  max-width: 100% !important;
  overflow: hidden;
}
body.product #modal .thumb2-wrap i, body.menu #modal .thumb2-wrap i, body.faq #modal .thumb2-wrap i {
  cursor: pointer;
}
body.product #modal .option_info-wrap, body.menu #modal .option_info-wrap, body.faq #modal .option_info-wrap {
  padding-right: 3rem;
}
body.product #modal .option_info-wrap .text-wrap, body.menu #modal .option_info-wrap .text-wrap, body.faq #modal .option_info-wrap .text-wrap {
  width: 100%;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info, body.menu #modal .option_info-wrap .text-wrap .field-option_info, body.faq #modal .option_info-wrap .text-wrap .field-option_info {
  width: 100%;
  position: relative;
  min-height: 50vh;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info > ul, body.menu #modal .option_info-wrap .text-wrap .field-option_info > ul, body.faq #modal .option_info-wrap .text-wrap .field-option_info > ul {
  display: grid;
  grid-template-columns: 25% 70%;
  gap: 5%;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  min-height: 4rem;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  width: 100%;
  padding-top: 1rem;
  position: relative;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li > span.label, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li > span.label, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li > span.label {
  position: absolute;
  top: 0;
  left: 1rem;
  color: #678;
  height: unset;
  align-items: center;
  display: flex;
  padding-left: 0;
  padding-right: 0;
  background: unset;
  border-radius: var(--vz-border-radius-sm);
  min-height: unset;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li .price span.label, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li .price span.label, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li .price span.label {
  font-size: smaller;
  display: inline-flex;
  justify-content: space-between;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li .price, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li .price, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li .price {
  display: flex;
  gap: 1rem;
  align-items: center;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li .price input[type=text], body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li .price input[type=text], body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li .price input[type=text] {
  flex: 1;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li.option_name, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li.option_name, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li.option_name {
  align-items: flex-start;
  padding-top: 2.1rem;
  position: relative;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values {
  position: relative;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul {
  padding-left: 1.2rem;
  margin: 0;
  list-style: none;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li.value, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li.value, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li.value {
  margin-bottom: 0;
  padding-top: 0.5rem;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value input[type=hidden], body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value input[type=hidden], body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value input[type=hidden] {
  display: none;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value .txt, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value .txt, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value .txt {
  margin-right: 0.5rem;
  font-size: 1rem;
  color: #555;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value .price, body.menu #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value .price, body.faq #modal .option_info-wrap .text-wrap .field-option_info ul li.option_values ul li .value .price {
  color: #60b7cc;
  font-weight: bold;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info .btn, body.menu #modal .option_info-wrap .text-wrap .field-option_info .btn, body.faq #modal .option_info-wrap .text-wrap .field-option_info .btn {
  width: 2rem;
  height: 2rem;
  padding: 0.2rem;
  padding-top: 0;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  right: -3rem;
  top: 0;
  position: absolute;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-add, body.menu #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-add, body.faq #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-add {
  background-color: #60b7cc;
  border: none;
  color: white;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-add:hover, body.menu #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-add:hover, body.faq #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-add:hover {
  background-color: #4b97b6;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-del, body.menu #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-del, body.faq #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-del {
  margin-top: 2.2rem;
  background-color: gainsboro;
  border: none;
  color: white;
}
body.product #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-del:hover, body.menu #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-del:hover, body.faq #modal .option_info-wrap .text-wrap .field-option_info .btn.btn-opt-del:hover {
  background-color: gainsboro;
}

@media (min-width: 992px) {
  .modal-lg, .modal-xl {
    max-width: unset;
  }
}
body.code.product .modal-container .id-label, body.code.faq .modal-container .id-label {
  position: unset;
  margin-top: unset;
  margin-left: unset;
  font-size: unset;
}
body.code.product .modal-container textarea, body.code.faq .modal-container textarea {
  height: 100%;
}
.menu_popup .modal-container {
  width: 50vw !important;
}
.code.product .modal-container {
  min-height: 82vh;
}
.code.faq .modal-container {
  min-height: 82vh;
}
.admin-modal.program .modal-container {
  width: 820px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.admin-modal.program .modal-container .entity.f span {
  padding-top: 5px;
}
.admin-modal.program .modal-container .add-wrap {
  height: 760px;
}
.app-modal .modal-container {
  width: 820px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.app-modal.vars_popup .modal-container, .app-modal.const_popup .modal-container {
  height: 600px !important;
  width: 600px !important;
  overflow-y: auto;
  overflow-x: hidden;
}
.app-modal.project_files .modal-container, .app-modal.preset_files .modal-container {
  width: 1020px !important;
  height: 760px !important;
}
.modal-container .app-modal.new_program,
.modal-container .app-modal.new_project, .app-modal.clone_popup .modal-container {
  width: 500px !important;
  height: 300px !important;
}
.app-modal.domain_popup .modal-container {
  width: 820px !important;
  height: 760px !important;
}
.app-modal.translate .modal-container {
  width: 98.5vw !important;
  height: 99vh !important;
}
.app-modal.snippet-modal .modal-container {
  overflow-y: scroll;
}
.app-modal.backup_settings .modal-container {
  width: 1200px !important;
  height: 800px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.admin-modal.rev_popup .modal-container {
  width: 1440px !important;
  height: 900px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
body.media-content .btn-wrapper {
  position: absolute;
  right: 40px;
  top: 20px;
  display: flex;
}
body.media-content .table thead th {
  vertical-align: top;
}
body.media-content .table td {
  padding: 5px 20px;
}
body.media-content .table td img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
body.media-content .card {
  min-height: 600px;
}
body.media-content .search-wrapper {
  position: absolute;
  top: 20px;
  width: 320px;
}
body.media-content .btn.list-type {
  padding: 3px 8px;
}
body.media-content .btn i.grid-icon,
body.media-content .btn i.list-icon {
  position: relative;
  top: 4px;
  font-size: 0;
}
body.media-content .btn .mdi:before {
  line-height: 0;
}
body.media-content input.form-control.keyword {
  max-width: 140px;
  max-height: 31px;
}
body.media-content .table td {
  font-size: 14px;
  color: #666;
}
body.media-content .lightGallery .image-tile {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
}
body.media-content .progress-area .row .content {
  width: 100%;
  margin-left: 15px;
}
body.media-content .progress-area .details {
  display: flex;
  align-items: center;
  margin-bottom: 7px;
  justify-content: space-between;
}
body.media-content .progress-bar {
  position: relative;
  top: -4px;
}
body.media-content .progress {
  border-radius: 0;
}
body.media-content .table td.text-center {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

body.video .video-modal .modal-container {
  width: 700px !important;
  height: 500px !important;
  padding: 0;
}
body.video #modal > .video {
  width: 100%;
  display: flex;
}
body.video #modal > .video a.modal-close {
  position: absolute;
  right: 0;
  top: -24px;
  color: #000;
  font-size: 1.3rem;
}
body.video .video-modal .modal-container {
  background: #fff;
}

.music-modal.add .modal-container .add {
  width: 100%;
}
.music-modal.add .modal-container .add a.modal-close {
  position: relative;
  left: calc(100% - 10px);
  top: -30px;
}
.music-modal.add .modal-container .add a.modal-close i {
  position: absolute;
}
.music-modal.add .modal-container form {
  width: 100%;
}
.music-modal.player .modal-container {
  width: 500px !important;
  height: 666px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.music-modal.player .modal-container a.modal-close {
  position: relative;
  left: calc(100% - 14px);
  top: -15px;
}
.music-modal.player .modal-container a.modal-close i {
  position: absolute;
}

body.playlist {
  /* Hide the inner submenus */
  /* 
  When a submenu is openend, we will hide all li siblings.
  For that we give a class to the parent menu called "dl-subview".
  We also hide the submenu link. 
  The opened submenu will get the class "dl-subviewopen".
  All this is done for any sub-level being entered.
  */
  /* Dynamically added submenu outside of the menu context */
  /* Animation classes for moving out and in */
  /* No JS Fallback */
  /* Text Styles, Colors, Backgrounds */
  /* Triggers (menu and button) */
}
body.playlist .playlist-modal .modal-container {
  width: 960px !important;
  height: 600px !important;
  padding: 0;
  background: #D3CCE3;
  /* fallback for old browsers */
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #E9E4F0, #D3CCE3);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
body.playlist .playlist-modal .modal-container .btn-warning {
  background-color: #e63f5d;
}
body.playlist .playlist-modal .modal-container .btn-warning:hover, body.playlist .playlist-modal .modal-container .btn-warning:focus {
  background-color: #e01f42;
  border-color: #B24592;
}
body.playlist .playlist-modal .modal-container .form-control {
  background-color: #fff;
  opacity: 0.7;
}
body.playlist .playlist-modal .modal-container .form-controlfocus, body.playlist .playlist-modal .modal-container .form-controlhover {
  background-color: #fff;
}
body.playlist .playlist-modal .modal-container .modal-close {
  color: #000;
  top: 5px;
}
body.playlist .playlist-modal .modal-container button.btn-add {
  background: #fff;
  border-radius: 0;
  height: 24px;
  padding: 0 20px;
  position: absolute;
  bottom: 2px;
  right: 24px;
  border-radius: 2px;
  font-size: 14px;
  color: #333;
}
body.playlist .playlist-modal .modal-container .right-panel .form-control {
  opacity: 1;
  width: calc(100% - 10px);
}
body.playlist .playlist-modal .modal-container .table thead th {
  font-size: 14px;
}
body.playlist .playlist-modal .modal-container .table td {
  color: #fff;
}
body.playlist .playlist-modal .modal-container .table-responsive {
  overflow-y: scroll;
  max-height: 500px;
}
body.playlist .playlist-modal .modal-container button.badge.badge-white {
  border: 1px solid #ac5fac;
}
body.playlist .playlist-modal .modal-container .pos {
  position: absolute;
  width: 20px;
  height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: -2px;
  right: 100px;
}
.page-a a {
  color: #b3002d;
}
.page-a a:hover {
  color: #e6073f;
}

body.playlist .playlist-modal .modal-container .pos2 {
  position: absolute;
  width: 20px;
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: -2px;
  right: 88px;
}
body.playlist .playlist-modal .modal-container .pos3 {
  position: absolute;
  width: 20px;
  height: 63px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: -2px;
  right: 76px;
}
body.playlist .playlist-modal .modal-container .ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
body.playlist .playlist-modal .modal-container .error-msg {
  font-size: 13px;
  position: relative;
  top: 10px;
  left: 10px;
  color: #000;
}
body.playlist .playlist-modal .modal-container .not-draggable {
  cursor: no-drop;
}
body.playlist .playlist-modal .modal-container .table-header .th {
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 600;
}
body.playlist .playlist-modal .modal-container .table-header .th:nth-child(1) {
  width: 140px;
}
body.playlist .playlist-modal .modal-container .table-header .th:nth-child(2) {
  flex-grow: 1;
}
body.playlist .playlist-modal .modal-container .table-header .th:nth-child(3) {
  width: 80px;
}
body.playlist .playlist-modal .modal-container .table-header .th:nth-child(4) {
  width: 60px;
}
body.playlist .playlist-modal .modal-container .list-group-item {
  display: flex;
  background: unset;
  border: unset;
  border-top: 1px solid #fff;
  margin-bottom: unset;
  padding: 0;
}
body.playlist .playlist-modal .modal-container .list-group-item:last-child {
  border-bottom: 1px solid #fff;
}
body.playlist .playlist-modal .modal-container .list-group-item img.thumb {
  border-radius: 5px;
}
body.playlist .playlist-modal .modal-container .list-group-item .td {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 400;
  font-size: 13px;
}
body.playlist .playlist-modal .modal-container .list-group-item .td a > i {
  font-size: 16px;
}
body.playlist .playlist-modal .modal-container .list-group-item .td:nth-child(1) {
  width: 140px;
}
body.playlist .playlist-modal .modal-container .list-group-item .td:nth-child(2) {
  flex-grow: 1;
}
body.playlist .playlist-modal .modal-container .list-group-item .td:nth-child(3) {
  width: 80px;
}
body.playlist .playlist-modal .modal-container .list-group-item .td:nth-child(4) {
  width: 60px;
}
body.playlist .playlist-modal .modal-container .play-wrap {
  position: absolute;
  right: -4px;
  font-size: 2.5rem;
}
body.playlist .playlist-modal .modal-container .play-wrap.has-playlist-id {
  top: 64px;
}
body.playlist .playlist-modal .modal-container .play-wrap a.btn-play-round {
  width: 3rem;
  display: flex;
  justify-content: center;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
}
body.playlist .playlist-modal .modal-container .play-wrap a.btn-play-round i.mdi-play {
  height: 3rem;
}
body.playlist .playlist-modal .modal-container .play-wrap a.btn-play-round i.mdi-play::before {
  position: absolute;
  left: 0.2rem;
  top: 0.15rem;
}
body.playlist #modal > .video a.modal-close {
  position: absolute;
  right: 0;
  top: -24px;
  color: #000;
  font-size: 1.3rem;
}
body.playlist .table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
body.playlist img.zoom {
  width: 450px;
  height: 253px;
  position: absolute;
  left: 460px;
  z-index: 999;
}
body.playlist span.sec {
  font-size: 14px;
}
body.playlist .dl-menuwrapper {
  width: 100%;
  position: relative;
  perspective: 1000px;
  perspective-origin: 50% 200%;
}
body.playlist .dl-menuwrapper:first-child {
  margin-right: 100px;
}
body.playlist .dl-menuwrapper button {
  display: block;
  width: 100%;
  margin: 0;
  border: none;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  outline: none;
}
body.playlist .dl-menuwrapper ul {
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}
body.playlist .dl-menuwrapper li {
  position: relative;
}
body.playlist .dl-menuwrapper li a {
  display: block;
  position: relative;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}
body.playlist .dl-menuwrapper button,
body.playlist .dl-menuwrapper li a {
  background: #fff;
  color: #aaa;
}
body.playlist .no-touch .dl-menuwrapper li a:hover {
  background: #f8f8f8;
}
body.playlist .dl-menuwrapper li.dl-back > a {
  padding-left: 30px;
  background: #f2f2f2;
}
body.playlist .dl-menuwrapper li.dl-back:after,
body.playlist .dl-menuwrapper li > a:not(:only-child):after,
body.playlist .dl-menuwrapper button:after {
  position: absolute;
  top: 0;
  line-height: 33px;
  color: #ddd;
  font-family: "icomoon";
  speak: none;
  -webkit-font-smoothing: antialiased;
  content: "\e000";
}
body.playlist .dl-menuwrapper button:after {
  line-height: 50px;
  right: 15px;
  transform: rotate(90deg);
}
body.playlist .dl-menuwrapper li.dl-back:after {
  left: 10px;
  transform: rotate(180deg);
}
body.playlist .dl-menuwrapper li > a:after {
  right: 10px;
  color: rgba(0, 0, 0, 0.15);
}
body.playlist .dl-menuwrapper .dl-menu {
  margin: 1px 0 0 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(10px);
  backface-visibility: hidden;
}
body.playlist .dl-menuwrapper .dl-menu.dl-menu-toggle {
  transition: all 0.3s ease;
}
body.playlist .dl-menuwrapper .dl-menu.dl-menuopen {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0px);
}
body.playlist .dl-menuwrapper li .dl-submenu {
  display: none;
}
body.playlist .dl-menu.dl-subview li,
body.playlist .dl-menu.dl-subview li.dl-subviewopen > a,
body.playlist .dl-menu.dl-subview li.dl-subview > a {
  display: none;
}
body.playlist .dl-menu.dl-subview li.dl-subview,
body.playlist .dl-menu.dl-subview li.dl-subview .dl-submenu,
body.playlist .dl-menu.dl-subview li.dl-subviewopen,
body.playlist .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
body.playlist .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
  display: block;
}
body.playlist .dl-menuwrapper > .dl-submenu {
  position: absolute;
  width: 100%;
  top: 55px;
  /* This needs to be adjusted to the button */
  left: 0;
  margin: 0;
}
body.playlist .dl-menu.dl-animate-out-1 {
  animation: MenuAnimOut1 0.4s linear forwards;
}
body.playlist .dl-menu.dl-animate-out-2 {
  animation: MenuAnimOut2 0.3s ease-in-out forwards;
}
body.playlist .dl-menu.dl-animate-out-3 {
  animation: MenuAnimOut3 0.4s ease forwards;
}
body.playlist .dl-menu.dl-animate-out-4 {
  animation: MenuAnimOut4 0.4s ease forwards;
}
body.playlist .dl-menu.dl-animate-out-5 {
  animation: MenuAnimOut5 0.4s ease forwards;
}
@keyframes MenuAnimOut1 {
  50% {
    transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    transform: translateZ(-372.5px) rotateY(15deg);
    opacity: 0.5;
  }
  100% {
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}
@keyframes MenuAnimOut2 {
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
@keyframes MenuAnimOut3 {
  100% {
    transform: translateZ(300px);
    opacity: 0;
  }
}
@keyframes MenuAnimOut4 {
  100% {
    transform: translateZ(-300px);
    opacity: 0;
  }
}
@keyframes MenuAnimOut5 {
  100% {
    transform: translateY(40%);
    opacity: 0;
  }
}
body.playlist .dl-menu.dl-animate-in-1 {
  animation: MenuAnimIn1 0.3s linear forwards;
}
body.playlist .dl-menu.dl-animate-in-2 {
  animation: MenuAnimIn2 0.3s ease-in-out forwards;
}
body.playlist .dl-menu.dl-animate-in-3 {
  animation: MenuAnimIn3 0.4s ease forwards;
}
body.playlist .dl-menu.dl-animate-in-4 {
  animation: MenuAnimIn4 0.4s ease forwards;
}
body.playlist .dl-menu.dl-animate-in-5 {
  animation: MenuAnimIn5 0.4s ease forwards;
}
@keyframes MenuAnimIn1 {
  0% {
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes MenuAnimIn2 {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes MenuAnimIn3 {
  0% {
    transform: translateZ(300px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0px);
    opacity: 1;
  }
}
@keyframes MenuAnimIn4 {
  0% {
    transform: translateZ(-300px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0px);
    opacity: 1;
  }
}
@keyframes MenuAnimIn5 {
  0% {
    transform: translateY(40%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
body.playlist .dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
  animation: SubMenuAnimIn1 0.4s ease forwards;
}
body.playlist .dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
  animation: SubMenuAnimIn2 0.3s ease-in-out forwards;
}
body.playlist .dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
  animation: SubMenuAnimIn3 0.4s ease forwards;
}
body.playlist .dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
  animation: SubMenuAnimIn4 0.4s ease forwards;
}
body.playlist .dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
  animation: SubMenuAnimIn5 0.4s ease forwards;
}
@keyframes SubMenuAnimIn1 {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes SubMenuAnimIn2 {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes SubMenuAnimIn3 {
  0% {
    transform: translateZ(-300px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0px);
    opacity: 1;
  }
}
@keyframes SubMenuAnimIn4 {
  0% {
    transform: translateZ(300px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0px);
    opacity: 1;
  }
}
@keyframes SubMenuAnimIn5 {
  0% {
    transform: translateZ(-200px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}
body.playlist .dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
  animation: SubMenuAnimOut1 0.4s ease forwards;
}
body.playlist .dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
  animation: SubMenuAnimOut2 0.3s ease-in-out forwards;
}
body.playlist .dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
  animation: SubMenuAnimOut3 0.4s ease forwards;
}
body.playlist .dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
  animation: SubMenuAnimOut4 0.4s ease forwards;
}
body.playlist .dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
  animation: SubMenuAnimOut5 0.4s ease forwards;
}
@keyframes SubMenuAnimOut1 {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(50%);
    opacity: 0;
  }
}
@keyframes SubMenuAnimOut2 {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes SubMenuAnimOut3 {
  0% {
    transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    transform: translateZ(-300px);
    opacity: 0;
  }
}
@keyframes SubMenuAnimOut4 {
  0% {
    transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    transform: translateZ(300px);
    opacity: 0;
  }
}
@keyframes SubMenuAnimOut5 {
  0% {
    transform: translateZ(0);
    opacity: 1;
  }
  100% {
    transform: translateZ(-200px);
    opacity: 0;
  }
}
body.playlist .no-js .dl-menuwrapper .dl-menu {
  position: relative;
  opacity: 1;
  transform: none;
}
body.playlist .no-js .dl-menuwrapper li .dl-submenu {
  display: block;
}
body.playlist .no-js .dl-menuwrapper li.dl-back {
  display: none;
}
body.playlist .no-js .dl-menuwrapper li > a:not(:only-child) {
  background: rgba(0, 0, 0, 0.1);
}
body.playlist .no-js .dl-menuwrapper li > a:not(:only-child):after {
  content: "";
}
body.playlist .pt-perspective {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  overflow: hidden;
}
body.playlist .pt-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow: hidden;
  overflow-y: auto;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}
body.playlist .pt-page::-webkit-scrollbar {
  width: 10px;
}
body.playlist .pt-page::-webkit-scrollbar-thumb {
  background-color: #2f3542;
  border-radius: 10px;
}
body.playlist .pt-page::-webkit-scrollbar-track {
  background-color: grey;
  border-radius: 10px;
  box-shadow: inset 0px 0px 5px white;
}
body.playlist .pt-page-current,
body.playlist .no-js .pt-page {
  visibility: visible;
  z-index: 1;
}
body.playlist .no-js body {
  overflow: auto;
}
body.playlist .pt-page-ontop {
  z-index: 999;
}
body.playlist .pt-page h1 {
  position: absolute;
  font-weight: 300;
  font-size: 4.4em;
  line-height: 1;
  letter-spacing: 6px;
  margin: 0;
  top: 12%;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  word-spacing: -0.3em;
}
body.playlist .pt-page h1 span {
  font-family: "Satisfy", serif;
  font-weight: 400;
  font-size: 40%;
  text-transform: none;
  word-spacing: 0;
  letter-spacing: 0;
  display: block;
  opacity: 0.4;
}
body.playlist .pt-page h1 strong {
  color: rgba(0, 0, 0, 0.1);
}
body.playlist .pt-page-1 {
  background: #f68dbb;
}
body.playlist .pt-page-2 {
  background: #7bb7fa;
}
body.playlist .pt-page-3 {
  background: #60d7a9;
}
body.playlist .pt-page-4 {
  background: #fdc162;
}
body.playlist .pt-page-5 {
  background: #fd6a62;
}
body.playlist .pt-page-6 {
  background: #f68dbb;
}
body.playlist .pt-triggers {
  z-index: 777;
  /*
          position: absolute;
          width: 300px;
          z-index: 999999;
          top: 12%;
          left: 50%;
          margin-top: 130px;
          -webkit-transform: translateX(-50%);
          -moz-transform: translateX(-50%);
          -ms-transform: translateX(-50%); 
          transform: translateX(-50%);
  */
}
body.playlist .no-js .pt-triggers {
  display: none;
}
body.playlist .pt-triggers .dl-menuwrapper button,
body.playlist .pt-touch-button {
  border: none;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 10px 0 20px;
  padding: 0px 20px;
  height: 44px;
  letter-spacing: 1px;
  width: 100%;
  cursor: pointer;
  display: block;
  font-family: "Lato", Calibri, Arial, sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
body.playlist .pt-touch-button {
  background: #fff;
  color: #aaa;
}
body.playlist .pt-triggers .dl-menuwrapper button {
  margin-bottom: 0;
}
body.playlist .pt-touch-button:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
body.playlist .touch .pt-triggers .dl-menuwrapper {
  display: none;
}
body.playlist .pt-message {
  display: none;
  position: absolute;
  z-index: 99999;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #da475c;
  color: #fff;
  text-align: center;
}
body.playlist .pt-message p {
  margin: 0;
  line-height: 60px;
  font-size: 26px;
}
body.playlist .no-cssanimations .pt-message {
  display: block;
}

body.palette .pb-0, body.svg .pb-0 {
  padding: 0;
}
@media (min-width: 1200px) {
  body.palette .container-scroller .content-wrapper, body.svg .container-scroller .content-wrapper {
    max-width: unset;
  }
}
body.palette #app, body.svg #app {
  display: flex;
  flex-direction: column;
}
body.palette #app ul.colors, body.svg #app ul.colors {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  list-style: none;
  width: 100%;
  text-align: center;
  margin: 0;
  height: 100%;
}
body.palette #app ul.colors li, body.svg #app ul.colors li {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
body.palette #app img.svg, body.svg #app img.svg {
  max-width: 100%;
}
body.palette #app div.svg, body.svg #app div.svg {
  width: 100%;
  height: 100%;
}
body.palette #app .top, body.svg #app .top {
  height: 2%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
body.palette #app .top .zoom-controls, body.svg #app .top .zoom-controls {
  padding: 0 10px;
}
body.palette #app .top .zoom-controls button, body.svg #app .top .zoom-controls button {
  margin: 0 6px;
  padding: 4px 10px;
  font-size: 14px;
  border-radius: 6px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  color: #333;
  transition: all 0.2s ease-in-out;
}
body.palette #app .top .zoom-controls button:hover, body.svg #app .top .zoom-controls button:hover {
  background-color: #e0e0e0;
  border-color: #bbb;
}
body.palette #app .top .zoom-controls button:active, body.svg #app .top .zoom-controls button:active {
  background-color: #d5d5d5;
  border-color: #aaa;
}
body.palette #app .top .zoom-controls button:focus, body.svg #app .top .zoom-controls button:focus {
  outline: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
body.palette #app .top .ruler-x, body.svg #app .top .ruler-x {
  flex: 1;
  display: flex;
  overflow-x: auto;
}
body.palette #app .top .ruler-x div, body.svg #app .top .ruler-x div {
  min-width: 40px;
  padding: 2px 8px;
  border-right: 1px solid #ddd;
  cursor: pointer;
  text-align: center;
}
body.palette #app .top .ruler-x div.active, body.svg #app .top .ruler-x div.active {
  background: #e0f0ff;
}
body.palette #app .bottom, body.svg #app .bottom {
  flex: 1;
  display: flex;
}
body.palette #app .bottom .ruler-y, body.svg #app .bottom .ruler-y {
  width: 2%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid #ccc;
}
body.palette #app .bottom .ruler-y div, body.svg #app .bottom .ruler-y div {
  padding: 8px 2px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
body.palette #app .bottom .ruler-y div.active, body.svg #app .bottom .ruler-y div.active {
  background: #e0f0ff;
}
body.palette #app .bottom .workspace, body.svg #app .bottom .workspace {
  flex: 1;
  padding: 10px;
  display: grid;
  gap: 2px;
}
body.palette #app .bottom .workspace .palette-item, body.svg #app .bottom .workspace .palette-item {
  background: #f5f5f5;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
}
body.palette #app .bottom .workspace .palette-item ul, body.svg #app .bottom .workspace .palette-item ul {
  padding-left: 0;
}
body.palette #app .ruler-x div, body.palette #app .ruler-y div, body.svg #app .ruler-x div, body.svg #app .ruler-y div {
  transition: background 0.2s;
}
body.palette #app .ruler-x div:hover, body.palette #app .ruler-y div:hover, body.svg #app .ruler-x div:hover, body.svg #app .ruler-y div:hover {
  background: #f0f0f0;
}
body.palette #app .ruler-x div.active, body.palette #app .ruler-y div.active, body.svg #app .ruler-x div.active, body.svg #app .ruler-y div.active {
  background: #007bff;
  color: white;
  font-weight: bold;
}

body.svg .workspace {
  grid-auto-rows: minmax(0, 1fr);
  height: 100%;
  gap: 0 !important;
}
body.svg .palette-item {
  position: relative;
  min-height: 0;
  aspect-ratio: 1;
  overflow: hidden;
  height: 100%;
  aspect-ratio: unset;
  transition: transform 0.2s, box-shadow 0.2s;
}
body.svg .palette-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2;
}
body.svg .palette-item .svg-container {
  width: 100%;
  height: 100%;
  padding: 8px;
  padding-top: 100%;
  position: relative;
  /*            
              &::before {
                  content: 'SVG';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: rgba(0,0,0,0.2);
                  font-size: 0.8em;
                  display: none;
              }
  */
}
body.svg .palette-item .svg-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: inherit;
  background-repeat: inherit;
  background-position: inherit;
}
body.svg .palette-item .svg-container[style*=background-image]:empty::before {
  display: block;
}

@media (min-width: 1200px) {
  body.csvviewer .container-scroller .content-wrapper {
    max-width: 100% !important;
  }
}
body.csvviewer .editor {
  overflow: hidden;
}
body.csvviewer .content {
  display: flex;
  flex-direction: row;
}
body.csvviewer .content-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}
body.csvviewer .history div {
  font-size: 12px;
}
body.csvviewer .history .sel-table-info {
  position: absolute;
  margin-top: -24px;
  left: 50px;
  color: deeppink;
  font-weight: 600;
}
body.csvviewer .history .tab-wrapper > i {
  font-size: 18px;
}
body.csvviewer .history .tab-wrapper > i.active {
  opacity: 1;
}
body.csvviewer .history .tab-wrapper > i:not(.active) {
  opacity: 0.5;
  cursor: pointer;
}
body.csvviewer .history .tab-wrapper span.active {
  opacity: 1;
}
body.csvviewer .history .tab-wrapper span:not(.active) {
  opacity: 0.5;
  cursor: pointer;
}
body.csvviewer .history .tab-wrapper span.comma {
  font-size: 3rem;
  line-height: 0;
  letter-spacing: 0;
  display: inline-flex;
  margin: 0;
  padding: 0;
  font-family: fantasy !important;
  position: relative;
  top: -10px;
  left: 3px;
}
body.csvviewer .history .tab-wrapper span.tab {
  font-size: 1rem;
  line-height: 0;
  letter-spacing: -2.4px;
  display: inline-flex;
  margin: 0;
  padding: 0;
  position: relative;
  top: -5px;
  left: 10px;
}
body.csvviewer .history .btn-search {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  display: flex;
  align-items: center;
  color: white;
}
body.csvviewer .x-ruler {
  position: absolute;
  left: var(--left);
  width: var(--width);
  top: var(--top);
  z-index: 0;
}
body.csvviewer .x-ruler ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}
body.csvviewer .x-ruler ul li {
  display: inline-block;
  width: calc(100% / var(--cnt));
  text-align: center;
  overflow: hidden;
}
body.csvviewer .x-ruler ul li a {
  color: #000;
}
body.csvviewer .x-ruler ul li a.active {
  font-weight: 600;
  color: deeppink;
}
body.csvviewer .x-ruler .direction-wrap {
  display: inline;
}
body.csvviewer .x-ruler .direction-wrap > i {
  cursor: pointer;
  opacity: 0.5;
}
body.csvviewer .x-ruler .direction-wrap > i.active {
  opacity: 1;
}
body.csvviewer .tools {
  padding: 0;
}
body.csvviewer .tools .row {
  align-items: center;
}
body.csvviewer .tools.right {
  position: relative;
}
body.csvviewer .tools div {
  font-size: 12px;
}
body.csvviewer .tools .gutter {
  width: 8px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: col-resize;
  background: gainsboro;
  z-index: 1;
}
body.csvviewer .tools .icon-wrapper {
  position: relative;
  top: -12px;
  cursor: pointer;
}
body.csvviewer .tools .icon-wrapper > i {
  margin-right: 6px;
}
body.csvviewer .tools .icon-sub-wrapper {
  position: absolute;
  top: 45px;
  left: 20px;
}
body.csvviewer .tools .icon-sub-wrapper span {
  cursor: pointer;
  font-size: 10px;
  padding: 2px 5px;
}
body.csvviewer .tools .icon-sub-wrapper span:hover {
  color: #fff;
  background-color: #03a395;
  border-color: #039789;
}
body.csvviewer .tools .icon-sub-wrapper span:not(:first-child) {
  margin-left: 4px;
}
body.csvviewer .tools .icon-sub-wrapper .grid-option-wrapper {
  display: flex;
  position: relative;
  left: 50px;
  top: 3px;
}
body.csvviewer .tools .icon-sub-wrapper .grid-option-wrapper input.form-control {
  padding: 0;
  height: 24px;
}
body.csvviewer .tools .icon-sub-wrapper .grid-option-wrapper span.x {
  font-size: 1.2rem;
  line-height: 15px;
  margin-left: 0;
}
body.csvviewer .tools .icon-sub-wrapper .grid-option-wrapper button {
  padding: 0 8px !important;
  margin-left: 8px;
  height: 24px;
}
body.csvviewer .tools .icon-sub-wrapper .grid-option-wrapper i {
  position: relative;
  top: -3px;
}
body.csvviewer .tools .db-type span {
  margin-left: 6px;
  cursor: pointer;
}
body.csvviewer .tools .dataset-item-wrap ul.dataset-item {
  display: flex;
  list-style: none;
  align-items: center;
  margin-bottom: 5px;
  padding: 0;
  width: 340px;
}
body.csvviewer .tools .dataset-item-wrap ul.dataset-item li {
  padding: 0;
}
body.csvviewer .tools .dataset-item-wrap ul.dataset-item li input.form-control {
  padding: 6px;
}
body.csvviewer .tools .dataset-item-wrap ul.dataset-item li:not(:first-child) {
  margin-left: 5px;
}
body.csvviewer .tools .dataset-item-wrap ul.dataset-item li .add-dataset-field {
  position: absolute;
  left: -8px;
  width: 16px;
  height: 16px;
  margin-top: 6px;
}
body.csvviewer .tools .dataset-item-wrap ul.dataset-item li .add-dataset-field i {
  position: relative;
  left: -5px;
  top: -3px;
}
body.csvviewer .tools .dataset-item-wrap .save-btn button {
  height: 32px;
  width: 50px;
  padding: 0 6px;
  font-size: 14px;
}
body.csvviewer .tools .panel-mode-wrap {
  display: inline;
  position: relative;
  top: 4px;
  left: 16px;
}
body.csvviewer .tools .panel-mode-wrap > div {
  display: inline-flex;
  cursor: pointer;
  z-index: 5;
}
body.csvviewer .tools .panel-mode-wrap > div i {
  opacity: 0.2;
}
body.csvviewer .tools .panel-mode-wrap > div i.l-overlay {
  width: 12px;
  overflow: hidden;
  position: absolute;
  opacity: 0.4;
}
body.csvviewer .tools .panel-mode-wrap > div i.r-overlay {
  width: 12px;
  overflow: hidden;
  position: absolute;
  margin-left: 10px;
  opacity: 0.4;
}
body.csvviewer .tools .panel-mode-wrap > div i.active {
  opacity: 1;
}
body.csvviewer .tools .btn-wrap.col-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10px;
  z-index: 2;
}
body.csvviewer .tools .btn-up-down {
  display: flex;
  flex-direction: column;
}
body.csvviewer .tools .btn-up-down i {
  cursor: pointer;
}
body.csvviewer .tools .btn-up-down.less i {
  position: relative;
}
body.csvviewer .tools .btn-up-down.less i.mdi-menu-up {
  top: 2px;
}
body.csvviewer .tools .btn-up-down.less i.mdi-menu-down {
  top: -2px;
}
body.csvviewer .tools .where, body.csvviewer .tools .off-limit {
  height: 37px;
}
body.csvviewer .tools .divider.more {
  position: relative;
  z-index: 1;
  width: 100%;
}
body.csvviewer .tools .divider.more:before {
  border-top: 1px solid #d9e2ef;
  content: "";
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}
body.csvviewer .tools .divider.more .locate {
  position: absolute;
  left: calc(50% - 35px);
  top: -13px;
}
body.csvviewer .tools .divider.more .locate.start {
  left: 0;
}
body.csvviewer .tools .divider.more .locate.start .mdi-lock {
  color: #999;
}
body.csvviewer .tools .divider.more .locate.end {
  left: calc(100% - 40px);
}
body.csvviewer .tools .divider.more .locate.end .mdi {
  color: #999;
}
body.csvviewer .tools .tagsinput {
  margin-left: 15px;
  margin-right: 15px;
  width: 100%;
  min-height: 75%;
  height: 75%;
}
body.csvviewer .tools .ref_board {
  overflow-y: auto;
}
body.csvviewer .tools .ref_board .csveditor {
  border-top: 1px solid #eee;
}
body.csvviewer .tools .ref_board li {
  height: 30px !important;
  font-size: 0.8rem;
}
body.csvviewer .tools .tools-upper textarea {
  position: absolute;
  top: 0;
  left: calc(100% - 20px);
  width: 20px;
  height: 20px;
  overflow: hidden;
}
body.csvviewer .pane {
  display: block;
}
body.csvviewer .pane.left {
  width: var(--width);
  padding: 0;
}
body.csvviewer .pane.center {
  width: var(--width);
  left: 228px;
}
body.csvviewer .pane.right {
  width: var(--width);
  left: var(--left);
}
body.csvviewer .pane.right:before {
  display: block;
  content: "";
  width: 3px;
  height: calc(100% - 2px);
  position: absolute;
  top: 1px;
  left: 2px;
  margin-left: -1.5px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  z-index: 1;
}
body.csvviewer .pane.right:hover:before {
  border-color: #aaa;
}
body.csvviewer .pane .full-height {
  height: var(--height);
}
body.csvviewer footer.footer {
  display: none;
}
body.csvviewer .content-wrapper {
  margin: 0 !important;
  padding: 30px 0 0 0 !important;
}
@media (min-width: 1920px) {
  body.csvviewer .container-scroller .content-wrapper {
    max-width: 100%;
  }
}

body.preview .player {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
  background: #000000;
}
body.preview video.deck_video {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

body.users .search-field {
  max-width: 120px;
}
body.users .search-wrapper {
  position: absolute;
  top: 20px;
  width: 420px;
}
body.users #modal {
  display: flex;
  height: 100%;
  align-content: flex-end;
}
body.users a.modal-close {
  position: absolute;
  right: 0;
  top: -60px;
}

body.settings .search-field {
  max-width: 120px;
}
body.settings .search-wrapper {
  position: absolute;
  top: 20px;
  width: 420px;
}
body.settings .lang-wrap {
  justify-content: center;
}
body.settings .form-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
body.settings .form-wrapper .default-input {
  margin: 0;
}
body.settings .form-wrapper > div:first-child .title-header {
  margin-top: 1rem;
}
body.settings .form-wrapper > div:not(:first-child) .title-header {
  margin-top: 2rem;
}
body.settings .form-wrapper > div:last-child {
  margin-bottom: 3rem;
}
body.settings .form-wrapper > div .title-header {
  margin-bottom: 1rem;
  font-weight: 600;
  color: #333;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--success);
  width: 90%;
  margin: 6px auto;
}
body.settings .form-wrapper > div .title-header span {
  margin-left: 4rem;
}
body.settings .form-wrapper .form-check {
  position: relative;
  display: block;
  padding-left: 0;
}
body.settings .form-wrapper label.form-check-label {
  margin: 0 30px;
}
body.settings .sortable {
  font-size: 0.8rem;
  line-height: 0;
  font-family: Material Design Icons !important;
  cursor: pointer;
}
body.settings .sortable.asc:before {
  opacity: 1;
}
body.settings .sortable:not(.asc):before {
  opacity: 0.5;
}
body.settings .sortable.desc:after {
  opacity: 1;
}
body.settings .sortable:not(.desc):after {
  opacity: 0.5;
}
body.settings .sortable:before {
  content: "\f05d";
  position: relative;
  margin-left: -6px;
  top: -2px;
}
body.settings .sortable:after {
  content: "\f045";
  position: relative;
  top: -2px;
}
body.settings .add_action #modal {
  display: flex;
  height: 100%;
  align-content: flex-end;
  width: 100%;
}
body.settings .add_action #modal .col-lg-12 {
  position: relative;
  left: 1rem;
}
body.settings a.modal-close {
  position: absolute;
  right: 0.4rem;
}
body.settings .add_action a.modal-close {
  top: -60px;
}
body.settings .add_shortcut a.modal-close, body.settings .add_action a.modal-close {
  right: -0.5rem;
  top: 0;
}
body.settings .add_shortcut .m-0.row, body.settings .add_action .m-0.row {
  width: calc(100% - 2rem);
}
body.settings .add_shortcut input#key_binding::-moz-placeholder, body.settings .add_action input#key_binding::-moz-placeholder {
  color: #999;
}
body.settings .add_shortcut input#key_binding::placeholder, body.settings .add_action input#key_binding::placeholder {
  color: #999;
}
body.settings .add_shortcut input#parameter_custom, body.settings .add_action input#parameter_custom {
  margin-top: 0.8rem;
}
body.settings .add_shortcut .action-wrap form, body.settings .add_action .action-wrap form {
  margin-top: 3rem;
  display: flex;
}
body.settings .add_shortcut .action-wrap input[type=checkbox], body.settings .add_action .action-wrap input[type=checkbox] {
  margin-right: 1rem;
}
body.settings .add_shortcut .action-wrap .left, body.settings .add_shortcut .action-wrap .right, body.settings .add_action .action-wrap .left, body.settings .add_action .action-wrap .right {
  width: 50%;
}
body.settings .add_shortcut .action-wrap .left .action-wrap, body.settings .add_shortcut .action-wrap .right .action-wrap, body.settings .add_action .action-wrap .left .action-wrap, body.settings .add_action .action-wrap .right .action-wrap {
  margin-top: 0;
}
body.settings .add_shortcut .action-wrap ul.actions, body.settings .add_action .action-wrap ul.actions {
  height: 40vh;
  overflow-y: scroll;
  list-style: none;
}
body.settings .add_shortcut .action-wrap ul.actions li.action, body.settings .add_action .action-wrap ul.actions li.action {
  margin: 0 0.2rem;
  cursor: pointer;
}
body.settings .add_shortcut .action-wrap ul.actions li.action:hover, body.settings .add_action .action-wrap ul.actions li.action:hover {
  text-decoration: underline;
}
body.settings .add_shortcut .action-wrap .left .label, body.settings .add_action .action-wrap .left .label {
  padding: 1rem 0.5rem 1rem 1rem;
}
body.settings .add_shortcut .action-wrap .field-wrap .field > span, body.settings .add_action .action-wrap .field-wrap .field > span {
  margin-left: 0.25rem;
  cursor: pointer;
}
body.settings .add_shortcut .action-wrap .field-wrap .field > span.active, body.settings .add_action .action-wrap .field-wrap .field > span.active {
  background: #03a092;
}
body.settings .add_shortcut .action-wrap .script-wrap, body.settings .add_action .action-wrap .script-wrap {
  height: calc(100% - 5rem);
  padding: 0 1rem 5rem 1rem;
  margin-top: 1rem;
}
body.settings .add_shortcut .action-wrap .add-wrap, body.settings .add_action .action-wrap .add-wrap {
  padding: 0 1rem;
  margin-top: 0.5rem;
}
body.settings .add_shortcut .action-wrap .add-wrap .label, body.settings .add_action .action-wrap .add-wrap .label {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
body.settings .add_shortcut .action-wrap .right .label, body.settings .add_action .action-wrap .right .label {
  margin-bottom: 1rem;
  display: inline-block;
}
body.settings .add_shortcut .btn-wrap, body.settings .add_action .btn-wrap {
  margin-top: 10rem;
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 0.5rem;
}
body.settings .button-wrap {
  gap: 0.25rem;
  display: flex;
}
body.settings .add_group_item ul.tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid #ddd;
}
body.settings .add_group_item ul.tabs .tab {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0.25rem 0.25rem 0 0;
  background-color: #f8f9fa;
  font-weight: bold;
  color: #333;
}
body.settings .add_group_item ul.tabs .tab.active {
  background-color: #fff;
  border-color: #ddd #ddd #fff;
  color: #60b7cc;
}
body.settings .add_group_item ul.tabs .tab:hover {
  background-color: #e9ecef;
}
body.settings .add_group_item ul.tabs .tab-plus {
  margin-left: auto;
}
body.settings .add_group_item ul.tabs .tab-plus .btn {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.settings .add_group_item .tab-content {
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 2rem 1.5rem;
  background-color: #fdfdfd;
  position: relative;
}
body.settings .add_group_item .tab-content .del-wrap {
  position: absolute;
  top: 0.2rem;
  right: 0;
  color: #d9534f;
  font-size: 1.25rem;
  cursor: pointer;
}
body.settings .add_group_item .tab-content .del-wrap:hover {
  color: #c9302c;
}
body.settings .add_group_item .tab-content .minus-wrap {
  position: absolute;
  right: 1.4rem;
  margin-top: -1.8rem;
  cursor: pointer;
  color: #d9534f;
  font-size: 1.25rem;
  cursor: pointer;
}
body.settings .add_group_item .tab-content .minus-wrap:hover {
  color: #c9302c;
}
body.settings .add_group_item .tab-content .form-group {
  margin-bottom: 0.75rem;
}
body.settings .add_group_item .tab-content .form-group label {
  font-weight: bold;
  color: #555;
}
body.settings .add_group_item .tab-content .form-group input.form-control {
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 0.5rem;
  font-size: 0.9rem;
}
body.settings .add_group_item .tab-content .form-group input.form-control:focus {
  border-color: #60b7cc;
  box-shadow: 0 0 5px rgba(96, 183, 204, 0.5);
}
body.settings ul {
  list-style: none;
}
body.settings .btn-warning {
  background-color: #f0ad4e;
  border: none;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
body.settings .btn-warning:hover {
  background-color: #ec971f;
}
body.settings .btn-warning:focus {
  box-shadow: 0 0 5px rgba(240, 173, 78, 0.5);
}
body.settings.configuration .configuration-wrap .trans-type {
  opacity: 0.65;
  display: flex;
  gap: 0.5rem;
}
body.settings.configuration .configuration-wrap .trans-type.active {
  opacity: 1;
}
body.settings.configuration .configuration-wrap > .row {
  display: grid;
  grid-template-columns: 25% 75%;
}
body.settings.configuration .configuration-wrap .btn-wrap {
  position: relative;
  left: calc(100% - 7rem);
}
body.settings.configuration .mdi.mdi-eye {
  opacity: 0.5;
  cursor: pointer;
}
body.settings.configuration .mdi.mdi-eye.active {
  opacity: 1;
}
body.settings.translation li.header {
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(var(--cnt), 1fr);
  align-items: center;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  padding: 1rem;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
body.settings.translation li.header img {
  max-width: 3rem;
  border-radius: 5%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body.settings.translation .lang-files {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.settings.translation .lang-files li {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(var(--cnt), 1fr);
  gap: 1rem;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
}
body.settings.translation .lang-files li:last-child {
  border-bottom: none;
}
body.settings.translation .lang-files li span {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 0.875rem;
  color: #495057;
  border-left: 1px solid #dee2e6;
  padding-left: 1rem;
}
body.settings.translation .lang-files li span:first-child {
  border-left: none;
  padding-left: 0;
}
body.settings.translation .lang-files li span img {
  display: block;
  margin-bottom: 0.5rem;
  max-width: 2.5rem;
  border-radius: 5%;
}
body.settings.translation .trans-wrap > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  padding-top: 1rem;
  gap: 0.5rem;
}
body.settings.translation .left-pane, body.settings.translation .right-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
body.settings.translation div#modal {
  height: 100%;
}
body.settings.translation .target-lang {
  display: grid;
  grid-template-columns: 25% 25%;
  padding-top: 1rem;
  align-items: flex-start;
  position: absolute;
  z-index: 99;
  width: 100%;
}
body.settings.translation .target-lang span.label {
  margin-left: 1rem;
  color: #495057;
}
body.settings.translation .source-lang {
  padding-top: 1rem;
  position: absolute;
  width: 10rem;
  z-index: 99;
  color: #495057;
}
body.settings.translation .btn-wrap {
  display: flex;
  gap: 0.25rem;
}
body.settings.translation textarea.pack-code.form-control {
  height: 50%;
}
body.settings.translation textarea.ai-output.form-control {
  height: calc(50% - 3rem);
}
body.settings.translation textarea.original-code.form-control {
  height: 50%;
}
body.settings.translation textarea.applied-code.form-control {
  height: calc(50% - 3rem);
}

.app-modal .modal-container {
  width: 820px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.app-modal.add_shortcut .modal-container {
  width: 400px !important;
  height: 400px !important;
}
.app-modal.add_listener_group .modal-container {
  width: 600px !important;
  height: 220px !important;
}
.app-modal.child .modal-container {
  width: 660px !important;
  height: 320px !important;
}
.app-modal.trans .modal-container {
  width: 98.5vw !important;
  height: 99vh !important;
}

body.parser .shared {
  position: absolute;
  margin-left: -20px;
}
body.parser .form-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
body.parser .form-wrapper .default-input {
  margin: 0;
}
body.parser .form-wrapper > div:first-child .title-header {
  margin-top: 1rem;
}
body.parser .form-wrapper > div:not(:first-child) .title-header {
  margin-top: 2rem;
}
body.parser .form-wrapper > div:last-child {
  margin-bottom: 3rem;
}
body.parser .form-wrapper > div .title-header {
  margin-bottom: 2rem;
  font-weight: 600;
  color: #333;
  width: 100%;
}
body.parser .form-wrapper > div .title-header span {
  margin-left: 4rem;
}
body.parser .form-wrapper .form-check {
  position: relative;
  display: block;
  padding-left: 0;
}
body.parser .form-wrapper label.form-check-label {
  margin: 0 30px;
}
body.parser .form-wrapper select.form-control {
  display: inline;
  color: #333;
}
body.parser .form-wrapper select.form-control.http-method {
  width: 79px;
}
body.parser .form-wrapper select.form-control.post_type {
  width: 120px;
}
body.parser .form-wrapper select.form-control.encoding {
  width: 80px;
}
body.parser .form-wrapper .form-group {
  margin-bottom: 0;
}
body.parser .form-wrapper .form-group label {
  padding-top: calc(0.64rem + 1px);
  padding-bottom: calc(0.64rem + 1px);
  display: inline-flex;
  justify-content: flex-end;
  font-size: 13px;
}
body.parser .form-wrapper .form-group .form-check .form-check-label input[type=checkbox] + .input-helper:before {
  margin-top: 12px;
}
body.parser .form-wrapper .form-group .form-check .form-check-label input[type=checkbox] + .input-helper:after {
  margin-top: 12px;
}
body.parser .form-wrapper .form-group .form-check {
  margin: 0;
}
body.parser .form-wrapper .form-group.item-container {
  min-height: 250px;
}
body.parser .form-wrapper .form-group ul.item-header, body.parser .form-wrapper .form-group ul.item-list {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 0;
}
body.parser .form-wrapper .form-group ul.item-header li.label, body.parser .form-wrapper .form-group ul.item-header li.entity, body.parser .form-wrapper .form-group ul.item-list li.label, body.parser .form-wrapper .form-group ul.item-list li.entity {
  min-width: 40px;
}
body.parser .form-wrapper .form-group ul.item-header li.label.w, body.parser .form-wrapper .form-group ul.item-header li.entity.w, body.parser .form-wrapper .form-group ul.item-list li.label.w, body.parser .form-wrapper .form-group ul.item-list li.entity.w {
  width: 132px;
  text-align: center;
}
body.parser .form-wrapper .form-group ul.item-header li.entity, body.parser .form-wrapper .form-group ul.item-list li.entity {
  display: inline-flex;
  justify-content: center;
  height: 30px;
}
body.parser .form-wrapper .form-group ul.item-header li.entity .btn-del i.mdi.mdi-close, body.parser .form-wrapper .form-group ul.item-list li.entity .btn-del i.mdi.mdi-close {
  position: relative;
  top: -7px;
  right: 7px;
}
body.parser .form-wrapper .form-group .button-wrapper {
  position: absolute;
  top: -40px;
}
body.parser .form-wrapper .form-group .page-loop > * {
  min-width: 10%;
  margin-left: 1rem;
}
body.parser .form-wrapper .form-group .page-loop > input {
  height: 35px;
  width: 20%;
}
body.parser .form-wrapper .form-group input#param_selector {
  height: 35px;
}
body.parser .form-wrapper .form-group .btn-page-loop {
  max-height: 32px;
}
body.parser .form-wrapper .form-group.page-order .form-check-label {
  padding: 0 !important;
}
body.parser .form-wrapper .form-group .extract-test, body.parser .form-wrapper .form-group .loop-split-test {
  position: absolute;
  right: 16px;
  top: 4px;
}
body.parser .form-wrapper .form-group .extract-test > button, body.parser .form-wrapper .form-group .loop-split-test > button {
  padding: 1px 8px;
}
body.parser .form-wrapper .form-group textarea#uri {
  width: calc(100% - 42px);
  margin-top: 4px;
}
body.parser .form-wrapper .form-group input#spliter {
  width: calc(100% - 42px);
}
body.parser .form-wrapper .save-btn {
  position: absolute;
  right: 23px;
  top: 32px;
}
body.parser .form-wrapper .ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
body.parser .form-wrapper .error-msg {
  font-size: 13px;
  position: relative;
  top: 10px;
  left: 10px;
  color: #000;
}
body.parser .form-wrapper .not-draggable {
  cursor: no-drop;
}
body.parser .form-wrapper select.form-control {
  color: unset !important;
}
body.parser .form-wrapper .list-group-item {
  padding: 0;
  border: 0;
}
body.parser .form-wrapper .tab-wrapper i:before {
  width: 20px;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}
body.parser .form-wrapper .tab-wrapper {
  display: flex;
  position: relative;
  top: 5px;
}
body.parser .form-wrapper .tab-wrapper i.active {
  opacity: 1;
}
body.parser .form-wrapper .tab-wrapper i:not(.active) {
  opacity: 0.5;
  cursor: pointer;
}
body.parser .form-wrapper .code-opt {
  position: absolute;
  top: 32px;
}
body.parser .form-wrapper .code-opt i.mdi {
  cursor: pointer;
}
body.parser .modal-container a.modal-close {
  position: absolute;
  right: 23px;
  top: 0;
  font-size: 1rem;
  color: #000;
}
body.parser .modal-container label {
  font-size: 14px;
}
body.parser .modal-container .result-wrap {
  margin-top: 2rem;
}
body.parser .modal-container .btn-warning {
  background-color: #e63f5d;
}
body.parser .modal-container .btn-warning:hover, body.parser .modal-container .btn-warning:focus {
  background-color: #e01f42;
  border-color: #B24592;
}
body.parser .modal-container .form-control {
  background-color: #fff;
  opacity: 0.7;
}
body.parser .modal-container .form-controlfocus, body.parser .modal-container .form-controlhover {
  background-color: #fff;
}
body.parser .modal-container table.dataTable {
  width: 100% !important;
}
body.parser .modal-container div.dataTables_length {
  display: inline-flex;
  justify-content: flex-end;
  width: 175px;
}
body.parser .modal-container div.dataTables_filter {
  width: calc(100% - 200px);
  display: inline-flex;
  justify-content: flex-start;
}
body.parser .modal-container div.dataTables_paginate {
  text-align: center;
  padding-bottom: 1rem;
}
body.parser .modal-container .dataTables_wrapper .dataTable thead .sorting:before, body.parser .modal-container .dataTables_wrapper .dataTable thead .sorting:after, body.parser .modal-container .dataTables_wrapper .dataTable thead .sorting_asc:before, body.parser .modal-container .dataTables_wrapper .dataTable thead .sorting_asc:after, body.parser .modal-container .dataTables_wrapper .dataTable thead .sorting_desc:before, body.parser .modal-container .dataTables_wrapper .dataTable thead .sorting_desc:after, body.parser .modal-container .dataTables_wrapper .dataTable thead .sorting_asc_disabled:before, body.parser .modal-container .dataTables_wrapper .dataTable thead .sorting_asc_disabled:after, body.parser .modal-container .dataTables_wrapper .dataTable thead .sorting_desc_disabled:before, body.parser .modal-container .dataTables_wrapper .dataTable thead .sorting_desc_disabled:after {
  font-size: 1rem;
  line-height: 0;
}
body.parser .modal-container td.label.sorting:first-child:before, body.parser .modal-container td.label.sorting:first-child:after, body.parser .modal-container td.label.sorting:last-child:before, body.parser .modal-container td.label.sorting:last-child:after {
  display: none;
}
body.parser .modal-container td.label.sorting:before, body.parser .modal-container td.label.sorting:after {
  top: 18px;
}
body.parser .modal-container td.label.sorting:before {
  right: calc(50% - 46px);
}
body.parser .modal-container td.label.sorting:after {
  right: calc(50% - 60px);
}
body.parser .modal-container input.form-control::-moz-placeholder {
  color: #999;
}
body.parser .modal-container input.form-control::placeholder {
  color: #999;
}
body.parser .modal-container .page-param input.form-control::-moz-placeholder {
  font-size: 10.7px;
}
body.parser .modal-container .page-param input.form-control::placeholder {
  font-size: 10.7px;
}
body.parser .modal-container .dataTables_wrapper select {
  padding: 0.5rem;
}
body.parser .modal-container .dataTables_wrapper {
  height: 620px;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.parser .modal-container tr.item-header {
  height: 40px;
}
body.parser .modal-container tr.item-header .show-btn {
  margin-left: 18px;
  cursor: pointer;
}
body.parser .modal-container tr.item-header, body.parser .modal-container tr.item-list {
  padding: 0 1px;
  margin-top: 1rem;
  margin-bottom: 0;
  width: 100%;
}
body.parser .modal-container tr.item-header.lock td, body.parser .modal-container tr.item-list.lock td {
  padding: 6.7px 1px;
}
body.parser .modal-container tr.item-header.unlock td, body.parser .modal-container tr.item-list.unlock td {
  padding: 0 1px;
}
body.parser .modal-container tr.item-header td.label:first-child, body.parser .modal-container tr.item-header td.label:last-child, body.parser .modal-container tr.item-header td.entity:first-child, body.parser .modal-container tr.item-header td.entity:last-child, body.parser .modal-container tr.item-list td.label:first-child, body.parser .modal-container tr.item-list td.label:last-child, body.parser .modal-container tr.item-list td.entity:first-child, body.parser .modal-container tr.item-list td.entity:last-child {
  width: 40px;
}
body.parser .modal-container tr.item-header td.label:first-child, body.parser .modal-container tr.item-header td.entity:first-child, body.parser .modal-container tr.item-list td.label:first-child, body.parser .modal-container tr.item-list td.entity:first-child {
  text-align: right;
}
body.parser .modal-container tr.item-header td.label.w, body.parser .modal-container tr.item-header td.entity.w, body.parser .modal-container tr.item-list td.label.w, body.parser .modal-container tr.item-list td.entity.w {
  text-align: center;
}
body.parser .modal-container tr.item-header li.entity, body.parser .modal-container tr.item-list li.entity {
  height: 30px;
}
body.parser .modal-container tr.item-header li.entity .btn-del i.mdi.mdi-close, body.parser .modal-container tr.item-list li.entity .btn-del i.mdi.mdi-close {
  position: relative;
  top: -7px;
  right: 7px;
}
body.parser .modal-container tr.item-header {
  background: rgba(125, 255, 155, 0.1);
}
body.parser .modal-container tr.item-list td.w {
  overflow: hidden;
}
body.parser .modal-container tr.item-list.even {
  background: rgba(255, 255, 255, 0.1);
}
body.parser .modal-container .button-group {
  position: absolute;
  right: 40px;
}
body.parser .modal-container a.paginate_button {
  display: inline-flex;
  background: #04c9b7;
  width: 24px;
  height: 24px;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  margin-right: 0.65rem;
  font-size: 15px;
  cursor: pointer;
}
body.parser .modal-container .lock-btn.lock i.mdi-lock-open {
  display: none;
}
body.parser .modal-container .lock-btn.unlock i.mdi-lock {
  display: none;
}
body.parser .modal-container textarea {
  overflow: hidden;
}
body.parser .modal-container .preset-selector {
  position: absolute;
  top: 0.2rem;
  left: 1.2rem;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: calc(100% - 4rem);
}
body.parser .modal-container .preset-selector ul {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.parser .modal-container .preset-selector ul li {
  white-space: nowrap;
  padding: 0.5rem;
  font-size: smaller;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  flex-shrink: 0;
}
body.parser .modal-container .preset-selector ul li:hover, body.parser .modal-container .preset-selector ul li.active {
  background-color: #e6f7ff;
  border-color: #60b7cc;
  cursor: pointer;
}
body.parser .modal-container .run .run-wrap {
  width: 660px;
  margin: 70px 100px 40px 60px;
  height: 382px;
  font-size: 14px;
}
body.parser .modal-container .run .run-wrap span.plus-btn {
  position: absolute;
  right: -20px;
  top: 10px;
}
body.parser .modal-container .run .run_history {
  position: absolute;
  top: -5px;
  cursor: pointer;
}
body.parser .modal-container .run .run-wrap div.h {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}
body.parser .modal-container .run .row.h select {
  position: relative;
  top: 1px;
  padding: 8px;
}
body.parser .modal-container .run .col-9 div {
  padding: 0;
}
body.parser .modal-container .run .col-9 div:first-child, body.parser .modal-container .run .col-9 div:last-child {
  padding: 0;
}
body.parser .modal-container .run .param-wrap {
  height: 100px;
  align-items: start !important;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.parser .modal-container .run .toggle-param-tab i {
  opacity: 1;
}
body.parser .modal-container .run .toggle-param-tab i:not(.active) {
  opacity: 0.5;
  cursor: pointer;
}
body.parser .modal-container .run .param_tab-processor input, body.parser .modal-container .run .param_tab-processor textarea {
  height: 46px;
}
body.parser .modal-container .run .btns > i {
  cursor: pointer;
  margin: 8.5px 0;
  position: relative;
  top: -5px;
}
body.parser .modal-container .run .param_tab-processor .btns > i {
  margin: 14.5px 0;
}
body.parser .modal-container .run .page-opt, body.parser .modal-container .run .page-opt * {
  font-size: 12px !important;
  margin-top: 12px;
  display: block;
}
body.parser .modal-container .run .rule-info {
  padding: 0;
}
body.parser .modal-container .run .rule-info ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
}
body.parser .modal-container .run .rule-info ul li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
body.parser .modal-container .run .rule-info ul li.rule_name {
  width: 60%;
}
body.parser .modal-container .run .rule-info ul li.http_method {
  width: 20%;
}
body.parser .modal-container .run .rule-info ul li.av_param {
  justify-content: flex-end;
  width: 20%;
}
body.parser .modal-container .run .rule-info ul li .btn-parsing-object {
  cursor: pointer;
}
body.parser .modal-container .run textarea.form-control {
  min-height: 35px;
}
body.parser .modal-container .run .page-param {
  min-width: 500px;
}
body.parser .modal-container .run .save_type_label {
  position: relative;
  top: 5px;
  left: 20px;
  font-size: 12px;
  color: #999;
}
body.parser .modal-container .run .paging-preview {
  position: absolute;
  left: calc(50% - 932px);
  top: 0px;
}
body.parser .modal-container .run .paging-preview .paging-list {
  width: 550px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: paleturquoise;
  height: 580px;
}
body.parser .modal-container .run .paging-preview .paging-list ul {
  list-style: none;
  padding-top: 10px;
}
body.parser .modal-container .run .paging-preview .paging-list ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.parser .modal-container .run .output-window {
  position: absolute;
  left: calc(50% + 410px);
  top: 0px;
}
body.parser .modal-container .run .output-window .output {
  width: 540px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background: paleturquoise;
  height: 580px;
}
body.parser .modal-container .run .output-window .output ul {
  list-style: none;
  padding-top: 10px;
}
body.parser .modal-container .run .output-window .output ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.parser .modal-container .run .output-window .log-window {
  height: 60%;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.parser .modal-container .run .output-window .log-window li {
  display: flex;
}
body.parser .modal-container .run .output-window .log-window li > span.time {
  width: 13%;
}
body.parser .modal-container .run .output-window .log-window li > span.url {
  width: 77%;
}
body.parser .modal-container .run .output-window .log-window li > span.cnt {
  width: 10%;
}
body.parser .modal-container .run .output-window .result-window {
  height: 40%;
  font-size: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.parser .modal-container .run .output-window .result-window textarea {
  height: calc(100% - 35px);
  overflow-y: scroll;
}
body.parser .modal-container .run .output-window .result-window button.btn {
  border-radius: 0;
}
body.parser .modal-container .run .output-window .result-button-wrapper {
  height: 35px;
}
body.parser .modal-container .run .progress-bar {
  position: absolute;
  width: calc(100% - 60px);
  left: 30px;
  bottom: -42px;
}
body.parser .modal-container .run .progress-bar .progress {
  border-radius: 0;
  justify-content: flex-end;
}
body.parser .modal-container .run .progress-bar .progress span.progress-label {
  color: navy;
  font-weight: 600;
  font-size: 13px;
}
body.parser .modal-container .history .run_play, body.parser .modal-container .api .run_play {
  position: absolute;
  top: -5px;
  cursor: pointer;
}
body.parser .modal-container .history .rule-info ul, body.parser .modal-container .api .rule-info ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
  justify-content: flex-end;
}
body.parser .modal-container .history .rule-info ul li, body.parser .modal-container .api .rule-info ul li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
body.parser .modal-container .history .rule-info ul li.rule_name, body.parser .modal-container .api .rule-info ul li.rule_name {
  width: 60%;
}
body.parser .modal-container .history .rule-info ul li.http_method, body.parser .modal-container .api .rule-info ul li.http_method {
  width: 20%;
  justify-content: flex-end;
}
body.parser .modal-container .history .history-wrap, body.parser .modal-container .history .api-wrap, body.parser .modal-container .api .history-wrap, body.parser .modal-container .api .api-wrap {
  width: 700px;
  margin: 70px 60px 40px 60px;
  height: 432px;
  font-size: 14px;
}
body.parser .modal-container .history .history-wrap span.plus-btn, body.parser .modal-container .history .api-wrap span.plus-btn, body.parser .modal-container .api .history-wrap span.plus-btn, body.parser .modal-container .api .api-wrap span.plus-btn {
  position: absolute;
  right: -20px;
  top: 10px;
}
body.parser .modal-container .history .history-wrap div.h, body.parser .modal-container .history .api-wrap div.h, body.parser .modal-container .api .history-wrap div.h, body.parser .modal-container .api .api-wrap div.h {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}
body.parser .modal-container .history .history-wrap > .row:nth-child(1), body.parser .modal-container .history .api-wrap > .row:nth-child(1), body.parser .modal-container .api .history-wrap > .row:nth-child(1), body.parser .modal-container .api .api-wrap > .row:nth-child(1) {
  border-bottom: 1px solid #666;
  padding-bottom: 8px;
}
body.parser .modal-container .history .history-results, body.parser .modal-container .api .history-results {
  width: 100%;
}
body.parser .modal-container .history .history-results .btn-replay, body.parser .modal-container .api .history-results .btn-replay {
  position: absolute;
  left: 4px;
  padding: 1px 10px;
}
body.parser .modal-container .history .history-results .row, body.parser .modal-container .api .history-results .row {
  margin-bottom: 0.5rem;
}
body.parser .modal-container .history .history-results .row div, body.parser .modal-container .api .history-results .row div {
  display: inline-flex;
  align-items: center;
}
body.parser .modal-container .history .history-results .row .col-3.r, body.parser .modal-container .api .history-results .row .col-3.r {
  justify-content: flex-end;
  font-style: italic;
  font-size: 13px;
}
body.parser .modal-container .history .history-results .run-info, body.parser .modal-container .api .history-results .run-info {
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
}
body.parser .modal-container .history .history-results .run-info .r_urls > span, body.parser .modal-container .api .history-results .run-info .r_urls > span {
  width: 80px;
  cursor: pointer;
}
body.parser .modal-container .history .history-results .run-info .uri, body.parser .modal-container .api .history-results .run-info .uri {
  width: 60%;
}
body.parser .modal-container .history .history-results .run-info .uri .uri textarea.form-control, body.parser .modal-container .api .history-results .run-info .uri .uri textarea.form-control {
  width: 100%;
  min-width: 280px;
}
body.parser .modal-container .history .history-results .run-info .run_data > span:nth-child(2), body.parser .modal-container .api .history-results .run-info .run_data > span:nth-child(2) {
  width: 72px;
  margin-left: 10px;
}
body.parser .modal-container .history .history-results .run-info .seq, body.parser .modal-container .history .history-results .run-info .save_type, body.parser .modal-container .api .history-results .run-info .seq, body.parser .modal-container .api .history-results .run-info .save_type {
  width: 100px;
  cursor: pointer;
}
body.parser .modal-container .history .history-results .run-info i.history-del, body.parser .modal-container .api .history-results .run-info i.history-del {
  cursor: pointer;
  margin-left: 12px;
}
body.parser .modal-container .history .paging-preview, body.parser .modal-container .api .paging-preview {
  position: absolute;
  left: calc(50% - 932px);
  top: 0px;
}
body.parser .modal-container .history .paging-preview .paging-list, body.parser .modal-container .api .paging-preview .paging-list {
  width: 550px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: paleturquoise;
  height: 580px;
}
body.parser .modal-container .history .paging-preview .paging-list ul, body.parser .modal-container .api .paging-preview .paging-list ul {
  list-style: none;
  padding-top: 10px;
}
body.parser .modal-container .history .paging-preview .paging-list ul li, body.parser .modal-container .api .paging-preview .paging-list ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.parser .modal-container .history .output-window, body.parser .modal-container .api .output-window {
  position: absolute;
  left: calc(50% + 410px);
  top: 0px;
}
body.parser .modal-container .history .output-window .output, body.parser .modal-container .api .output-window .output {
  width: 540px;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background: paleturquoise;
  height: 580px;
}
body.parser .modal-container .history .output-window .output ul, body.parser .modal-container .api .output-window .output ul {
  list-style: none;
  padding-top: 10px;
}
body.parser .modal-container .history .output-window .output ul li, body.parser .modal-container .api .output-window .output ul li {
  font-size: 11px;
  color: navy;
  word-break: break-all;
}
body.parser .modal-container .history .output-window .result-window, body.parser .modal-container .api .output-window .result-window {
  height: 100%;
  font-size: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.parser .modal-container .history .output-window .result-window textarea, body.parser .modal-container .api .output-window .result-window textarea {
  height: calc(100% - 35px);
  overflow-y: scroll;
}
body.parser .modal-container .history .output-window .result-window button.btn, body.parser .modal-container .api .output-window .result-window button.btn {
  border-radius: 0;
}
body.parser .modal-container .history .output-window .result-button-wrapper, body.parser .modal-container .api .output-window .result-button-wrapper {
  height: 35px;
}
body.parser .modal-container .api .hot-link {
  position: absolute;
  margin-top: -30px;
}
body.parser .modal-container .api .hot-link span {
  cursor: pointer;
}
body.parser .modal-container .api .rule-info ul li.rule_name {
  width: 40% !important;
}
body.parser .modal-container .api .rule-info ul li.namespace input {
  height: 33px;
}
body.parser .modal-container .api .rule-info ul li.page-range input {
  height: 33px;
  width: 40px;
}
body.parser .modal-container .api .btn-auto {
  width: 30%;
  justify-content: flex-end !important;
}
body.parser .modal-container .api .api-results {
  width: 100%;
  height: 620px;
  overflow-y: auto;
  overflow-x: hidden;
}
body.parser .modal-container .api .api-results .lv1 > span:last-child::after {
  content: "\f60d";
  font-family: Material Design Icons !important;
  position: absolute;
  top: 30px;
  font-size: 2rem;
  right: -2px;
  color: lightgray;
}
body.parser .modal-container .api .api-results .lv2 > span:last-child::after {
  content: "\f60d";
  font-family: Material Design Icons !important;
  position: absolute;
  font-size: 2rem;
  right: -2px;
  color: lightgray;
  margin-bottom: -72px;
}
body.parser .modal-container .api .api-results .var_name {
  width: 100%;
  min-height: 30px;
  display: inline-flex;
  border-left: 3px solid lightgray;
  align-items: center;
  padding-left: 8px;
  margin-bottom: 4px;
  padding: 0 8px;
  background: #fff;
}
body.parser .modal-container .api .api-results .var_name.empty {
  border-left: 0;
  background: unset;
}
body.parser .modal-container .api .api-results .var_name input.form-control {
  border: 0;
  height: 28px;
}
body.parser .modal-container .api .api-results .tm0 {
  margin-top: 0px;
}
body.parser .modal-container .api .api-results .tm1 {
  margin-top: 34px;
}
body.parser .modal-container .api .api-results .tm2 {
  margin-top: 68px;
}
body.parser .modal-container .api .api-results .tm3 {
  margin-top: 102px;
}
body.parser .modal-container .api .api-results .tm4 {
  margin-top: 136px;
}
body.parser .modal-container .api .api-results .tm5 {
  margin-top: 170px;
}
body.parser .modal-container .api .api-results .tm6 {
  margin-top: 204px;
}
body.parser .modal-container .api .api-results .tm7 {
  margin-top: 238px;
}
body.parser .modal-container .api .api-results .tm8 {
  margin-top: 272px;
}
body.parser .modal-container .api .api-results .tm9 {
  margin-top: 306px;
}
body.parser .modal-container .api .api-results .tm10 {
  margin-top: 340px;
}
body.parser .modal-container .api .api-results .tm11 {
  margin-top: 374px;
}
body.parser .modal-container .api .api-results .tm12 {
  margin-top: 408px;
}
body.parser .modal-container .api .api-results .tm13 {
  margin-top: 442px;
}
body.parser .modal-container .api .api-results .tm14 {
  margin-top: 476px;
}
body.parser .modal-container .api .api-results .tm15 {
  margin-top: 510px;
}
body.parser .modal-container .api .api-results .tm16 {
  margin-top: 544px;
}
body.parser .modal-container .api .api-results .tm17 {
  margin-top: 578px;
}
body.parser .modal-container .api .api-results .tm18 {
  margin-top: 612px;
}
body.parser .modal-container .api .api-results .tm19 {
  margin-top: 646px;
}
body.parser .modal-container .api .api-results .tm20 {
  margin-top: 680px;
}
body.parser .modal-container .api .api-results .tm21 {
  margin-top: 714px;
}
body.parser .modal-container .api .api-results .tm22 {
  margin-top: 748px;
}
body.parser .modal-container .api .api-results .tm23 {
  margin-top: 782px;
}
body.parser .modal-container .api .api-results .tm24 {
  margin-top: 816px;
}
body.parser .modal-container .api .api-results .tm25 {
  margin-top: 850px;
}
body.parser .modal-container .api .api-results .tm26 {
  margin-top: 884px;
}
body.parser .modal-container .api .api-results .tm27 {
  margin-top: 918px;
}
body.parser .modal-container .api .api-results .tm28 {
  margin-top: 952px;
}
body.parser .modal-container .api .api-results .tm29 {
  margin-top: 986px;
}
body.parser .modal-container .api .api-results .tm30 {
  margin-top: 1020px;
}
body.parser .modal-container .api .api-results .tm31 {
  margin-top: 1054px;
}
body.parser .modal-container .api .api-results .tm32 {
  margin-top: 1088px;
}
body.parser .modal-container .api .api-results .tm33 {
  margin-top: 1122px;
}
body.parser .modal-container .api .api-results .tm34 {
  margin-top: 1156px;
}
body.parser .modal-container .api .api-results .tm35 {
  margin-top: 1190px;
}
body.parser .modal-container .api .api-results .tm36 {
  margin-top: 1224px;
}
body.parser .modal-container .api .api-results .tm37 {
  margin-top: 1258px;
}
body.parser .modal-container .api .api-results .tm38 {
  margin-top: 1292px;
}
body.parser .modal-container .api .api-results .tm39 {
  margin-top: 1326px;
}
body.parser .modal-container .api .api-results .tm40 {
  margin-top: 1360px;
}
body.parser .modal-container .api .api-results .tm41 {
  margin-top: 1394px;
}
body.parser .modal-container .api .api-results .tm42 {
  margin-top: 1428px;
}
body.parser .modal-container .api .api-results .tm43 {
  margin-top: 1462px;
}
body.parser .modal-container .api .api-results .tm44 {
  margin-top: 1496px;
}
body.parser .modal-container .api .api-results .tm45 {
  margin-top: 1530px;
}
body.parser .modal-container .api .api-results .tm46 {
  margin-top: 1564px;
}
body.parser .modal-container .api .api-results .tm47 {
  margin-top: 1598px;
}
body.parser .modal-container .api .api-results .tm48 {
  margin-top: 1632px;
}
body.parser .modal-container .api .api-results .tm49 {
  margin-top: 1666px;
}
body.parser .modal-container .api .api-results .tm50 {
  margin-top: 1700px;
}
body.parser .modal-container .api .api-results .tm51 {
  margin-top: 1734px;
}
body.parser .modal-container .api .api-results .tm52 {
  margin-top: 1768px;
}
body.parser .modal-container .api .api-results .tm53 {
  margin-top: 1802px;
}
body.parser .modal-container .api .api-results .tm54 {
  margin-top: 1836px;
}
body.parser .modal-container .api .api-results .tm55 {
  margin-top: 1870px;
}
body.parser .modal-container .api .api-results .tm56 {
  margin-top: 1904px;
}
body.parser .modal-container .api .api-results .tm57 {
  margin-top: 1938px;
}
body.parser .modal-container .api .api-results .tm58 {
  margin-top: 1972px;
}
body.parser .modal-container .api .api-results .tm59 {
  margin-top: 2006px;
}
body.parser .modal-container .api .api-results .tm60 {
  margin-top: 2040px;
}
body.parser .modal-container .api .api-results .modifier {
  position: relative;
  top: -8px;
}
body.parser .modal-container .api .api-results .modifier .var_name {
  border-left: 3px solid #04c9a6;
}
body.parser .modal-container .api .api-results .modifier .var_name.empty {
  border-left: 0;
  background: unset;
}
body.parser .modal-container .api .api-results .add-btn, body.parser .modal-container .api .api-results .add-detail, body.parser .modal-container .api .api-results .add-comment {
  position: absolute;
  font-size: 1.2rem;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding-left: 1px;
  cursor: pointer;
  z-index: 9;
}
body.parser .modal-container .api .api-results .add-btn {
  right: -10px;
  margin-top: -13px;
  background: #14dbb7;
}
body.parser .modal-container .api .api-results .add-detail {
  right: -10px;
  margin-top: 12px;
  background: mediumturquoise;
}
body.parser .modal-container .api .api-results .add-comment {
  right: -36px;
  margin-top: -13px;
  background: dodgerblue;
}
body.parser .modal-container .api .api-results .remove-btn {
  position: absolute;
  left: 20px;
  font-size: 1.2rem;
  background: #14dbb7;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding-left: 1px;
  cursor: pointer;
  z-index: 9;
}
body.parser .modal-container .api .api-results .btn-save {
  position: absolute;
  right: 60px;
  margin-top: -5px;
  cursor: pointer;
  z-index: 10;
}
body.parser .modal-container .api .api-results .btn-save button {
  font-weight: 600;
  color: steelblue;
}
body.parser .modal-container .api .api-results .row.variable {
  height: 60px;
}
body.parser .modal-container .api .api-results span.tt {
  text-align: right;
  width: 100%;
  display: inline-block;
  font-size: 12px;
  margin-top: 3px;
}
body.parser div.close-btn {
  position: absolute;
  top: 4px;
  right: 25px;
  z-index: 1;
  cursor: pointer;
}
body.parser .search-field {
  max-width: 120px;
}
body.parser .search-wrapper {
  position: absolute;
  top: 20px;
  width: 420px;
}
body.parser .table thead th {
  vertical-align: top;
}
body.parser .api-url-wrap {
  display: inline-flex;
  align-items: center;
}
body.parser button.btn-sync {
  padding: 5px;
  height: 23px;
  margin-left: 6px;
}
body.parser .sortable {
  font-size: 0.8rem;
  line-height: 0;
  font-family: Material Design Icons !important;
  cursor: pointer;
}
body.parser .sortable.asc:before {
  opacity: 1;
}
body.parser .sortable:not(.asc):before {
  opacity: 0.5;
}
body.parser .sortable.desc:after {
  opacity: 1;
}
body.parser .sortable:not(.desc):after {
  opacity: 0.5;
}
body.parser .sortable:before {
  content: "\f05d";
  position: relative;
  margin-left: -6px;
  top: -2px;
}
body.parser .sortable:after {
  content: "\f045";
  position: relative;
  top: -2px;
}
body.parser.snapshot div.detail-wrap, body.parser.export div.detail-wrap {
  height: 760px;
  overflow-y: auto;
}
body.parser.snapshot div.detail-wrap textarea.json-data, body.parser.export div.detail-wrap textarea.json-data {
  margin: 0 auto;
  height: 680px;
  position: relative;
  top: 40px;
  width: 90%;
}
body.parser.snapshot table.detail-table, body.parser.export table.detail-table {
  width: 720px;
  margin: 35px auto;
  table-layout: fixed;
}
body.parser.snapshot table.detail-table tr td:first-child, body.parser.snapshot table.detail-table th:first-child, body.parser.export table.detail-table tr td:first-child, body.parser.export table.detail-table th:first-child {
  padding-left: 20px !important;
}
body.parser.snapshot table.detail-table tr.header th, body.parser.export table.detail-table tr.header th {
  height: 40px;
  padding: 12px 10px 12px 0px;
  color: white;
  background: #039789;
}
body.parser.snapshot table.detail-table td, body.parser.export table.detail-table td {
  overflow: hidden;
  background: #f0f1f2;
  color: #9a9a9a;
  padding: 12px 10px 0px 0px;
}
body.parser.snapshot table.detail-table tr:last-child td, body.parser.export table.detail-table tr:last-child td {
  padding-bottom: 12px;
}
body.parser.import .import-wrap {
  height: 600px;
  width: 100%;
}
body.parser.import .import-wrap > .row {
  flex-direction: row;
}
body.parser.import .import-wrap .label {
  width: 20%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
body.parser.import .import-wrap .input {
  width: 60%;
}
body.parser.import .import-wrap .btn-wrap {
  width: 20%;
  display: inline-flex;
  align-items: center;
}

.parser-modal .modal-container {
  width: 1060px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.parser-modal.detail .modal-container {
  width: 1600px !important;
  height: 900px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.parser-modal.run .modal-container {
  width: 820px !important;
  height: 580px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.parser-modal.history .modal-container {
  width: 820px !important;
  height: 580px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.parser-modal.output .modal-container {
  width: 820px !important;
  height: 580px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.parser-modal.api .modal-container {
  width: 820px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}
.detail-modal .modal-container {
  width: 820px !important;
  height: 760px !important;
  padding: 0;
  background: #f7f7f7;
  /* fallback for old browsers */
}

.parser-modal.detail .dataTables_wrapper {
  height: 740px !important;
}

.nav-tabs {
  border-bottom: unset;
}

@media (min-width: 1200px) {
  body.mixer .container-scroller .content-wrapper {
    max-width: 100% !important;
  }
}
body.mixer .part-selector .btn-wrap {
  gap: 1rem;
  display: flex;
  margin-bottom: 1rem;
}
body.mixer .deck-wrap {
  display: grid;
  grid-template-columns: 30% 30% 40%;
  background: #f9f9f9;
  border: 1px solid #eee;
}
body.mixer .deck-wrap .deck {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
body.mixer .deck-wrap .deck span.deck-label {
  margin-bottom: 1rem;
}
body.mixer .deck-wrap .deck .upper-part {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
body.mixer .deck-wrap .deck:not(:first-child) {
  border-left: 1px solid #eee;
}
body.mixer .deck-wrap .btn-wrap {
  display: flex;
  gap: 0.5rem;
}
body.mixer .deck-wrap .main-part {
  margin-top: 1rem;
}
body.mixer ul.program_list, body.mixer ul.diff_list, body.mixer ul.list {
  list-style: none;
  display: grid;
  grid-template-columns: 45% 35% 20%;
  margin-bottom: 0.25rem;
}
body.mixer ul.program_list li.btns, body.mixer ul.diff_list li.btns, body.mixer ul.list li.btns {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
body.mixer ul.program_list li.btns > i, body.mixer ul.diff_list li.btns > i, body.mixer ul.list li.btns > i {
  background: lavender;
  /* padding: 0.2rem; */
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-block;
  cursor: pointer;
}
body.mixer ul.program_list li.btns > i:before, body.mixer ul.diff_list li.btns > i:before, body.mixer ul.list li.btns > i:before {
  position: relative;
  left: 5px;
}
body.mixer ul.program_list li.btns > i.inactive:before, body.mixer ul.diff_list li.btns > i.inactive:before, body.mixer ul.list li.btns > i.inactive:before {
  opacity: 0.3;
}
body.mixer ul.program_list li.btns > i.active, body.mixer ul.diff_list li.btns > i.active, body.mixer ul.list li.btns > i.active {
  background: #678;
  color: lavender;
}
body.mixer ul.program_list .edit-line, body.mixer ul.diff_list .edit-line, body.mixer ul.list .edit-line {
  position: absolute;
  margin-top: 2rem;
  display: flex;
  gap: 0.5rem;
}
body.mixer ul.program_list .edit-line input, body.mixer ul.diff_list .edit-line input, body.mixer ul.list .edit-line input {
  height: 1.5rem;
  width: 10rem;
  background: #eee;
  border-radius: 0.25rem;
  padding: 0.25rem 1rem;
}
body.mixer ul.program_list.edit, body.mixer ul.diff_list.edit, body.mixer ul.list.edit {
  padding-bottom: 2rem;
}
body.mixer ul.program_list .btn-ic, body.mixer ul.diff_list .btn-ic, body.mixer ul.list .btn-ic {
  background: #678;
  padding: 0.2rem;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-block;
  cursor: pointer;
  color: #fff;
}
body.mixer ul.program_list .btn-ic::before, body.mixer ul.diff_list .btn-ic::before, body.mixer ul.list .btn-ic::before {
  position: relative;
  left: 2px;
  bottom: 1px;
}
body.mixer .diff-info {
  display: grid;
  grid-template-columns: 25% calc(75% - 7.5rem) 7.5rem;
  align-items: center;
  margin: 1rem;
  gap: 0.5rem;
}
body.mixer .diff_list-wrap {
  max-height: 11rem;
  overflow: hidden;
}
body.mixer .diff_list-wrap.expand {
  max-height: none;
  overflow: auto;
}
body.mixer .diff-part {
  border: 1px dashed #999;
  border-radius: 0.5rem;
  margin-top: 1rem;
  padding-right: 0.5rem;
  padding-bottom: 1rem;
}
body.mixer .show-all, body.mixer .show-part {
  text-decoration: underline;
  cursor: pointer;
}
body.mixer .diff-more {
  border-top: 1px dashed #999;
  padding-top: 0.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
body.mixer .diff_list span.bx {
  text-decoration: underline;
  cursor: pointer;
  color: var(--primary);
}

.brand-logo img {
  max-width: 200px;
  width: 200px;
  margin-bottom: 7px;
}

body.popup {
  overflow-y: hidden;
}

.horizontal-menu .bottom-navbar ul.page-navigation {
  justify-content: center;
}

@media (min-width: 576px) {
  #app {
    min-height: 800px;
  }
}
body #app *:not(i), body a, body .table thead th, body .table thead td {
  font-family: "Roboto";
}
body.ko #app *:not(i), body.ko a, body.ko .table thead th, body.ko .table thead td {
  font-family: "Noto Sans KR";
}

@media (min-width: 768px) {
  .horizontal-menu .bottom-navbar .page-navigation > .nav-item:hover > .nav-link i,
.horizontal-menu .bottom-navbar .page-navigation > .nav-item:hover > .nav-link .menu-title {
    color: #fff;
  }
}
.horizontal-menu .bottom-navbar .page-navigation > .nav-item.mega-menu .submenu .category-heading {
  margin-left: 1.25rem;
  font-weight: 600;
}

@media (min-width: 1200px) {
  .lightGallery .image-tile {
    max-width: 20%;
    flex: 0 0 20%;
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
  }
}
div.card div.list {
  margin: 60px 0 0 0;
  min-height: 650px;
}

.card .card-title {
  color: #666;
}

.caption-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  font-size: 12px;
}

span.title {
  color: dimgrey;
}

a.modal-close {
  position: absolute;
  right: 6px;
}

.blind {
  display: none;
}

.page-link {
  line-height: 1;
}

.control {
  clear: both;
  margin-top: 25px;
}

label {
  margin-bottom: 0;
}

#logo-img {
  width: 300px;
}

.form-control {
  background-color: unset;
}

.modal-container {
  width: 500px !important;
  height: 400px !important;
  background-image: linear-gradient(135deg, #abecd6 13%, #fbed96 100%);
}

.table thead th {
  padding: 20px;
}

table.table td.time {
  font-size: 12px;
}

.prev_keyword {
  position: absolute;
  top: 36px;
  color: gray;
  font-size: 13px;
  right: 30px;
}
.prev_keyword a {
  color: grey;
}

.btn-group button.btn.btn-outline-secondary {
  padding: 4px 11px;
}

div.col.l, div.row.l {
  text-align: left;
}

div.col.r, div.row.r {
  text-align: right;
}

[v-cloak] {
  display: none;
}

[v-cloak] > * {
  display: none;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.docs .main-panel .content-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}